Refine landing page: selectable backends, remove Python version, clean tagline, fix diamond char

Author: franckferman

docs/index.html

@@ -168,6 +168,8 @@
   font-size: .58rem; letter-spacing: .12em; text-transform: uppercase;
   color: var(--muted); border: 1px solid var(--faint);
   padding: .2rem .6rem; border-radius: 2px;
+  cursor: pointer; background: none;
+  font-family: var(--mono);
   transition: color .2s, border-color .2s;
 }
 .backend-pill:hover { color: var(--accent2); border-color: var(--accent); }
@@ -332,7 +334,7 @@
 <div class="page">
 
   <div class="header">
-    <span class="req-pill">Python 3.9+ &nbsp;&middot;&nbsp; ffmpeg</span>
+    <span class="req-pill">Python &nbsp;&middot;&nbsp; ffmpeg</span>
 
     <div class="wave" aria-hidden="true">
       <div class="wave-bar"></div><div class="wave-bar"></div><div class="wave-bar"></div>
@@ -345,12 +347,12 @@
     </div>
 
     <h1 class="glitch" data-text="whispr">whispr</h1>
-    <p class="tagline">CLI + Web UI<span class="sep">&middot;</span>Multi-Backend<span class="sep">&middot;</span>Whisper Transcription</p>
+    <p class="tagline">CLI + Web UI<span class="sep">&middot;</span>Multi-Backend</p>
 
     <div class="backends">
-      <span class="backend-pill hi">faster-whisper</span>
-      <span class="backend-pill">whisper.cpp</span>
-      <span class="backend-pill">openai api</span>
+      <button class="backend-pill hi" onclick="setBackend(0)">faster-whisper</button>
+      <button class="backend-pill"    onclick="setBackend(1)">whisper.cpp</button>
+      <button class="backend-pill"    onclick="setBackend(2)">openai api</button>
     </div>
   </div>
 
@@ -376,7 +378,7 @@ <h1 class="glitch" data-text="whispr">whispr</h1>
         <span class="dot dot-r"></span>
         <span class="dot dot-y"></span>
         <span class="dot dot-g"></span>
-        <span class="term-label">bash &mdash; whispr</span>
+        <span class="term-label">bash -- whispr</span>
       </div>
       <div class="term-body">
         <span class="ps">$&gt;</span>
@@ -409,7 +411,7 @@ <h1 class="glitch" data-text="whispr">whispr</h1>
   {
     raw:  `git clone git@github.com:franckferman/whispr.git && cd whispr && bash install.sh`,
     html: `<span class="cmd">git</span> <span class="kw">clone</span> <span class="str">git@github.com:franckferman/whispr.git</span> <span class="op">&amp;&amp;</span> <span class="cmd">cd</span> <span class="str">whispr</span> <span class="op">&amp;&amp;</span> <span class="cmd">bash</span> <span class="str">install.sh</span>`,
-    desc: `Interactive installer &mdash; detects <span class="hl">Python 3.9+</span> and <span class="hl">ffmpeg</span>, sets up a venv, and lets you choose backends (<span class="hl">faster-whisper</span>, <span class="hl">whisper.cpp</span>, <span class="hl">OpenAI</span>) and interfaces (CLI / Web UI).`,
+    desc: `Interactive installer. Detects <span class="hl">Python</span> and <span class="hl">ffmpeg</span>, sets up a venv, and lets you choose backends (<span class="hl">faster-whisper</span>, <span class="hl">whisper.cpp</span>, <span class="hl">OpenAI</span>) and interfaces (CLI / Web UI).`,
   },
   {
     raw:  `python main.py -f lecture.mp4 --backend faster_whisper -F txt,srt,vtt`,
@@ -429,25 +431,57 @@ <h1 class="glitch" data-text="whispr">whispr</h1>
   {
     raw:  `python main.py -f interview.mp3 --backend openai --openai-key $OPENAI_API_KEY -F srt,txt`,
     html: `<span class="cmd">python</span> <span class="str">main.py</span> <span class="flag">-f</span> <span class="str">interview.mp3</span> <span class="flag">--backend</span> <span class="kw">openai</span> <span class="flag">--openai-key</span> <span class="env">$OPENAI_API_KEY</span> <span class="flag">-F</span> <span class="str">srt,txt</span>`,
-    desc: `Cloud transcription via <span class="hl">OpenAI Whisper API</span>. No local model &mdash; files &gt; 25 MB are chunked automatically. Rate-limit handling with <span class="hl">Retry-After</span> backoff. Falls back to a local backend on failure if <span class="hl">--fallback-backend</span> is set.`,
+    desc: `Cloud transcription via <span class="hl">OpenAI Whisper API</span>. No local model. Files &gt; 25 MB are chunked automatically. Rate-limit handling with <span class="hl">Retry-After</span> backoff. Falls back to a local backend on failure if <span class="hl">--fallback-backend</span> is set.`,
   },
 ];
 
+const BACKENDS = ['faster_whisper', 'whisper_cpp', 'openai'];
+const BACKEND_LABELS = ['faster-whisper', 'whisper.cpp', 'openai api'];
 let cur = 0;
+let curBackend = 0;
+
+function setBackend(i) {
+  curBackend = i;
+  document.querySelectorAll('.backend-pill').forEach((p, idx) => p.classList.toggle('hi', idx === i));
+  setTab(cur);
+}
+
+function buildCmd(i) {
+  if (i === 0) return S[0];
+  if (i === 3) return S[3];
+  if (i === 4) return S[4];
+  const b = BACKENDS[curBackend];
+  const bl = BACKEND_LABELS[curBackend];
+  if (i === 1) {
+    return {
+      raw:  `python main.py -f lecture.mp4 --backend ${b} -F txt,srt,vtt`,
+      html: `<span class="cmd">python</span> <span class="str">main.py</span> <span class="flag">-f</span> <span class="str">lecture.mp4</span> <span class="flag">--backend</span> <span class="kw">${b}</span> <span class="flag">-F</span> <span class="str">txt,srt,vtt</span>`,
+      desc: `Transcribe a local file with <span class="hl">${bl}</span>${b==='faster_whisper'?' (CTranslate2, GPU/CPU)':b==='whisper_cpp'?' (GGML, CPU-optimized)':' (OpenAI API, no local model)'}. Outputs <span class="hl">plain text</span>, <span class="hl">SRT</span>, and <span class="hl">WebVTT</span> subtitles. Supports MP3, MP4, WAV, MKV, FLAC, and any ffmpeg-compatible format.`,
+    };
+  }
+  if (i === 2) {
+    return {
+      raw:  `python main.py -u "https://youtu.be/dQw4w9WgXcQ" --backend ${b} -l en -F srt`,
+      html: `<span class="cmd">python</span> <span class="str">main.py</span> <span class="flag">-u</span> <span class="str">"https://youtu.be/dQw4w9WgXcQ"</span> <span class="flag">--backend</span> <span class="kw">${b}</span> <span class="flag">-l</span> <span class="str">en</span> <span class="flag">-F</span> <span class="str">srt</span>`,
+      desc: `Transcribe a <span class="hl">YouTube URL</span> (or any HTTP URL) via yt-dlp. Audio is extracted, chunked with ffmpeg, transcribed in parallel, and output as <span class="hl">SRT subtitles</span>. Language auto-detected if <span class="hl">-l</span> is omitted.`,
+    };
+  }
+}
 
 function setTab(i) {
   cur = i;
   document.querySelectorAll('.tab').forEach((t, idx) => t.classList.toggle('active', idx === i));
+  const entry = buildCmd(i);
   const d = document.getElementById('cmd-display');
   d.innerHTML = '';
   void d.offsetWidth;
-  d.innerHTML = S[i].html;
-  document.getElementById('tab-desc').innerHTML = S[i].desc;
+  d.innerHTML = entry.html;
+  document.getElementById('tab-desc').innerHTML = entry.desc;
 }
 
 function copyCmd() {
   const btn = document.getElementById('copy-btn');
-  navigator.clipboard.writeText(S[cur].raw).then(() => {
+  navigator.clipboard.writeText(buildCmd(cur).raw).then(() => {
     btn.textContent = 'Copied!';
     btn.classList.add('ok');
     setTimeout(() => { btn.textContent = 'Copy'; btn.classList.remove('ok'); }, 1800);