Deploy hushscribe

app.js

@@ -4,15 +4,28 @@ import { toSegments, toTxt, toSrt, toVtt, toJson, clock, expectedChunks, toMono,
 const $ = (id) => document.getElementById(id);
 const els = { drop: $('drop'), file: $('file'), rec: $('rec'), info: $('fileinfo'), go: $('go'), status: $('status'), bar: $('bar'),
   result: $('result'), segments: $('segments'), partial: $('partial'), copy: $('copy'),
+  choose: $('choose'), find: $('find'), ts: $('ts'), reset: $('reset'), tag: $('tag'), stats: $('stats'), hint: $('edithint'),
   model: $('model'), language: $('language'), task: $('task'), device: $('device') };
 
 let audio = null;       // Float32Array, 16 kHz mono
-let sourceName = 'recording';
-let segments = [];
+let sourceName = 'hearlark-example';
+const EXAMPLE = [
+  { start: 0, end: 4.2, text: 'Thanks everyone for joining. Today we are looking at the launch plan for next month.' },
+  { start: 4.2, end: 9.6, text: 'First, the new pricing page goes live on Tuesday, and Priya will check the checkout links.' },
+  { start: 9.6, end: 15.1, text: 'Second, support needs the updated help articles by Friday so the team can answer questions.' },
+  { start: 15.1, end: 20, text: 'Last, we agreed to review the numbers together on the first Monday of November.' },
+];
+let segments = EXAMPLE.map((s) => ({ ...s }));
+let isExample = true;
 let busy = false;
 let worker = null;
 const files = new Map(); // model download progress per file
 
+const KEY = 'hearlark-settings';
+try { const s = JSON.parse(localStorage.getItem(KEY) || '{}'); for (const k of ['model', 'language', 'task', 'device']) if (s[k] && [...els[k].options].some((o) => o.value === s[k])) els[k].value = s[k]; } catch {}
+const saveSettings = () => { try { localStorage.setItem(KEY, JSON.stringify({ model: els.model.value, language: els.language.value, task: els.task.value, device: els.device.value })); } catch {} };
+['model', 'language', 'task', 'device'].forEach((k) => els[k].addEventListener('change', saveSettings));
+
 const setStatus = (t) => { els.status.textContent = t; };
 const setBar = (f) => { els.bar.style.width = `${Math.round(Math.max(0, Math.min(1, f)) * 100)}%`; };
 
@@ -25,7 +38,7 @@ async function decode(blob, name) {
     const chans = Array.from({ length: decoded.numberOfChannels }, (_, i) => decoded.getChannelData(i));
     audio = toMono(chans);
   } finally { ctx.close?.(); }
-  sourceName = name;
+  sourceName = name; if (isExample) { segments = []; isExample = false; render(false); }
   const secs = audio.length / 16000;
   els.info.textContent = `${name} · ${clock(secs)} long`;
   els.go.disabled = busy;
@@ -37,8 +50,9 @@ function pick(file) {
   decode(file, file.name).catch((e) => { audio = null; els.go.disabled = true; setStatus(`Your browser couldn't decode that file (${e.message || e}). Try MP3, WAV or M4A.`); });
 }
 
+els.choose.addEventListener('click', (e) => { e.stopPropagation(); els.file.click(); });
 els.drop.addEventListener('click', () => els.file.click());
-els.drop.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); els.file.click(); } });
+els.drop.addEventListener('keydown', (e) => { if (e.target === els.drop && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); els.file.click(); } });
 els.file.addEventListener('change', () => pick(els.file.files[0]));
 ['dragenter', 'dragover'].forEach((t) => els.drop.addEventListener(t, (e) => { e.preventDefault(); els.drop.classList.add('over'); }));
 ['dragleave', 'drop'].forEach((t) => els.drop.addEventListener(t, (e) => { e.preventDefault(); els.drop.classList.remove('over'); }));
@@ -66,22 +80,47 @@ els.rec.addEventListener('click', async () => {
   } catch (e) { setStatus(`Microphone not available: ${e.message || e}`); }
 });
 
+function stats() {
+  const words = segments.reduce((n, s) => n + (s.text.trim() ? s.text.trim().split(/\s+/).length : 0), 0);
+  els.stats.textContent = segments.length ? `${segments.length} line${segments.length === 1 ? '' : 's'} · ${words} words · ${clock(segments[segments.length - 1].end)}` : '';
+}
+
 function render(done) {
-  els.result.classList.remove('hidden');
-  els.segments.replaceChildren(...segments.map((s) => {
+  els.tag.textContent = isExample ? 'Example transcript (not your audio)' : 'Your transcript';
+  els.hint.hidden = !segments.length;
+  const q = els.find.value.trim().toLowerCase();
+  els.segments.replaceChildren(...segments.map((s, i) => {
     const li = document.createElement('li');
+    li.hidden = !!q && !s.text.toLowerCase().includes(q);
     const t = document.createElement('time'); t.textContent = clock(s.start);
     const p = document.createElement('span'); p.textContent = s.text;
+    p.contentEditable = 'plaintext-only'; p.spellcheck = true; p.tabIndex = 0;
+    p.setAttribute('role', 'textbox'); p.setAttribute('aria-label', `Transcript line ${i + 1} at ${clock(s.start)}`);
+    p.addEventListener('input', () => { segments[i].text = p.textContent; stats(); });
     li.append(t, p);
     return li;
   }));
+  stats();
   if (done) els.partial.textContent = '';
 }
+els.find.addEventListener('input', () => render(false));
+render(false);
+
+const plainText = () => toTxt(segments, { timestamps: els.ts.checked });
+
+function startOver() {
+  audio = null; busy = false; segments = EXAMPLE.map((s) => ({ ...s })); isExample = true; sourceName = 'hearlark-example';
+  els.go.disabled = true; els.info.textContent = ''; els.find.value = ''; els.file.value = ''; setBar(0);
+  setStatus('Choose a file to start, or try the example below.');
+  render(true);
+}
+els.reset.addEventListener('click', startOver);
+document.addEventListener('keydown', (e) => { if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); els.go.click(); } });
 
 function download(fmt) {
   if (!segments.length) return;
   const meta = { source: sourceName, model: els.model.value, task: els.task.value, language: els.language.value || 'auto', createdWith: 'Hearlark by CyberMax' };
-  const body = { txt: () => toTxt(segments), srt: () => toSrt(segments), vtt: () => toVtt(segments), json: () => toJson(segments, meta) }[fmt]();
+  const body = { txt: () => plainText(), srt: () => toSrt(segments), vtt: () => toVtt(segments), json: () => toJson(segments, meta) }[fmt]();
   const type = { txt: 'text/plain', srt: 'application/x-subrip', vtt: 'text/vtt', json: 'application/json' }[fmt];
   const a = document.createElement('a');
   a.href = URL.createObjectURL(new Blob([body], { type: `${type};charset=utf-8` }));
@@ -91,14 +130,14 @@ function download(fmt) {
 }
 document.querySelectorAll('[data-fmt]').forEach((b) => b.addEventListener('click', () => download(b.dataset.fmt)));
 els.copy.addEventListener('click', async () => {
-  try { await navigator.clipboard.writeText(toTxt(segments)); els.copy.textContent = 'Copied'; setTimeout(() => { els.copy.textContent = 'Copy text'; }, 1500); }
+  try { await navigator.clipboard.writeText(plainText()); els.copy.textContent = 'Copied'; setTimeout(() => { els.copy.textContent = 'Copy text'; }, 1500); }
   catch { setStatus('Copy blocked by the browser; use Download TXT instead.'); }
 });
 
 els.go.addEventListener('click', () => {
   if (!audio || busy) return;
-  busy = true; els.go.disabled = true; segments = []; files.clear();
-  els.segments.replaceChildren(); els.partial.textContent = ''; setBar(0);
+  busy = true; els.go.disabled = true; segments = []; isExample = false; files.clear();
+  els.segments.replaceChildren(); els.stats.textContent = ''; els.hint.hidden = true; els.tag.textContent = 'Your transcript'; els.partial.textContent = ''; setBar(0);
   const device = els.device.value === 'auto' ? ('gpu' in navigator ? 'webgpu' : 'wasm') : els.device.value;
   const duration = audio.length / 16000;
   const total = expectedChunks(duration);
@@ -124,14 +163,13 @@ els.go.addEventListener('click', () => {
       setBar(0);
       setStatus(`Transcribing ${clock(duration)} of audio on ${m.device === 'webgpu' ? 'your GPU (WebGPU)' : 'your CPU (WASM)'}…`);
     } else if (m.type === 'partial') {
-      els.result.classList.remove('hidden');
       els.partial.textContent = (els.partial.textContent + m.text).slice(-400);
     } else if (m.type === 'chunk') {
       setBar(m.done / total);
       setStatus(`Transcribing… part ${Math.min(m.done, total)} of about ${total}`);
       els.partial.textContent = '';
     } else if (m.type === 'done') {
-      segments = toSegments(m.result, duration);
+      segments = toSegments(m.result, duration); isExample = false;
       render(true); setBar(1);
       const secs = (performance.now() - started) / 1000;
       setStatus(segments.length ? `Done: ${segments.length} segment${segments.length === 1 ? '' : 's'} in ${secs.toFixed(0)} s on ${m.device === 'webgpu' ? 'GPU' : 'CPU'}. Download below.` : 'No speech was found in this audio.');

index.html

@@ -23,11 +23,24 @@ h1{font-size:30px;margin:0 0 4px;letter-spacing:-.01em}
 .card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:16px}
 .drop{border:2px dashed var(--line);border-radius:10px;padding:26px 14px;text-align:center;cursor:pointer}
 .drop.over{border-color:var(--accent);background:var(--soft)}
-.drop strong{display:block;font-size:17px}
+.drop strong{display:block;font-size:17px;margin-bottom:10px}
 .row{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin-top:14px}
 label{font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:4px}
 select,button{font:inherit;font-size:15px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:8px 10px}
-button{cursor:pointer}
+button{cursor:pointer;min-height:44px}
+select{min-height:44px}
+button.quiet{background:transparent}
+kbd{font:12px/1 ui-monospace,Menlo,monospace;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:2px 5px;background:var(--code);color:var(--ink)}
+:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
+.tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
+.tools input[type=search]{flex:1 1 180px;min-height:44px;font:inherit;font-size:15px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);padding:8px 10px}
+.tag{display:inline-block;background:var(--soft);color:var(--ink);border-radius:999px;padding:3px 10px;font-size:13px;font-weight:600}
+.chk{flex-direction:row;align-items:center;gap:8px;min-height:44px;font-size:14px}
+.chk input{width:20px;height:20px}
+#segments span[contenteditable]{flex:1;border-radius:4px;padding:0 4px}
+#segments span[contenteditable]:focus{background:var(--soft);outline:2px solid var(--accent)}
+@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
+.more a,.priv a,footer a,.note a,.card a{padding:10px 0}
 button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600;padding:9px 18px}
 button:disabled{opacity:.5;cursor:not-allowed}
 .status{font-size:14px;color:var(--muted);min-height:22px;margin-top:12px}
@@ -41,26 +54,28 @@ button:disabled{opacity:.5;cursor:not-allowed}
 .note{font-size:14px;color:var(--muted)}
 .priv{background:var(--soft);border-radius:8px;padding:10px 12px;font-size:14px}
 a{color:var(--accent)}
+.more a{padding:12px 0}
 footer{font-size:13px;color:var(--muted);margin-top:28px}
 .more a{display:inline-block;margin:0 12px 6px 0}
-.hidden{display:none}
+.hidden,[hidden]{display:none!important}
 @media (max-width:520px){h1{font-size:25px}.row>label{flex:1 1 45%}}
 </style>
 <!-- cm:studio-meta --><meta property="og:image" content="https://cybermax-tools-cybermax.static.hf.space/brand/hushscribe/cover.png"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:image" content="https://cybermax-tools-cybermax.static.hf.space/brand/hushscribe/cover.png"><link rel="icon" type="image/png" href="https://cybermax-tools-cybermax.static.hf.space/brand/hushscribe/icon.png"><!-- /cm:studio-meta -->
 </head>
-<body><!-- cybermax-offer:start --><div style="max-width:960px;margin:8px auto;padding:8px 14px;border:1px solid rgba(127,127,127,.35);border-radius:10px;font:14px/1.5 system-ui,sans-serif"><b>Turn a podcast into captioned shorts:</b> <a href="https://data.cybermaxtools.com/buy/st-clipwhit-pro-monthly?s=sp-hushscribe" target="_blank" rel="noopener" style="color:inherit;font-weight:700">Clipwhit Pro</a> ($12/month)</div><!-- cybermax-offer:end -->
+<body>
 <main>
   <h1>Hearlark</h1>
   <p class="sub">Private speech-to-text. Whisper runs <b>inside your browser</b>: your audio is never uploaded. Free, no sign-up.</p>
 
   <section class="card">
     <div id="drop" class="drop" tabindex="0" role="button" aria-label="Choose an audio or video file">
-      <strong>Drop an audio or video file here, or click to choose</strong>
-      <span class="note">MP3, WAV, M4A, OGG, WEBM, MP4… anything your browser can play.</span>
-      <input id="file" type="file" accept="audio/*,video/*" class="hidden">
+      <strong>Transcribe a recording on your own device</strong>
+      <button id="choose" type="button" class="primary">Choose an audio or video file</button>
+      <span class="note" style="display:block;margin-top:8px">or drop it here · MP3, WAV, M4A, OGG, WEBM, MP4… anything your browser can play.</span>
+      <input id="file" type="file" accept="audio/*,video/*" class="hidden" aria-label="Audio or video file to transcribe">
     </div>
     <div class="row">
-      <button id="rec" type="button">● Record from microphone</button>
+      <button id="rec" type="button" class="quiet" aria-label="Record from microphone">● Record from microphone</button>
       <span id="fileinfo" class="note"></span>
     </div>
     <div class="row">
@@ -97,15 +112,25 @@ footer{font-size:13px;color:var(--muted);margin-top:28px}
           <option value="wasm">WASM (CPU)</option>
         </select>
       </label>
-      <button id="go" class="primary" type="button" disabled>Transcribe</button>
+      <button id="go" class="primary" type="button" disabled>Transcribe <kbd>Ctrl</kbd>+<kbd>Enter</kbd></button>
     </div>
-    <div id="status" class="status" aria-live="polite">Choose a file to start. The model downloads once and is then cached by your browser.</div>
+    <div id="status" class="status" aria-live="polite">Choose a file to start, or try the example below. The model downloads once and is then cached by your browser.</div>
     <div class="bar"><i id="bar"></i></div>
   </section>
 
-  <section id="result" class="card hidden">
+  <section id="result" class="card" aria-label="Transcript">
+    <div class="tools">
+      <span id="tag" class="tag">Example transcript</span>
+      <span id="stats" class="note"></span>
+    </div>
+    <div class="tools">
+      <input id="find" type="search" placeholder="Find in transcript" aria-label="Find in transcript">
+      <label class="chk"><input id="ts" type="checkbox"> Timestamps in TXT and copy</label>
+      <button id="reset" type="button" class="quiet">Start over</button>
+    </div>
     <ol id="segments"></ol>
-    <div id="partial" class="partial"></div>
+    <div id="partial" class="partial" aria-live="off"></div>
+    <p class="note" id="edithint">Click any line to fix a word; downloads use your edits. <kbd>Tab</kbd> moves to the next line.</p>
     <div class="exports">
       <button data-fmt="txt" type="button">Download TXT</button>
       <button data-fmt="srt" type="button">Download SRT subtitles</button>
@@ -138,5 +163,5 @@ footer{font-size:13px;color:var(--muted);margin-top:28px}
 </main>
 <script type="module" src="./app.js"></script>
 <!-- cm:hf-upgrade-foot --><div id="cm-hf-up" hidden style="max-width:980px;margin:24px auto 12px;padding:0 16px;text-align:center;font:13px/1.5 system-ui,-apple-system,Segoe UI,sans-serif;color:#64748b">Free tool by <a href="https://huggingface.co/spaces/CyberMax-tools/cybermax" target="_blank" rel="noopener" style="color:inherit">CyberMax</a> · Need more? <a href="https://data.cybermaxtools.com/buy/st-clipwhit-pro-monthly?s=hf-space-hushscribe" target="_blank" rel="noopener" style="color:#0284c7;font-weight:600">Turn the recording into captioned shorts: Clipwhit Pro, $12/month &#8594;</a></div><script>(function(){if(/\.static\.hf\.space$/.test(location.hostname)){var d=document.getElementById("cm-hf-up");if(d)d.hidden=false}})()</script><!-- /cm:hf-upgrade-foot -->
-<!-- cybermax-count:start --><script>(function(){try{var D="https://data.cybermaxtools.com",P=location.host+location.pathname,H=navigator.webdriver||!(navigator.languages&&navigator.languages.length)||!screen.width?"&h=1":"",Z=function(x){navigator.sendBeacon?navigator.sendBeacon(x):(new Image).src=x},V=null,K="cmx-visit";if(navigator.doNotTrack!=="1")try{var o=JSON.parse(sessionStorage.getItem(K)||"null"),t=Date.now();if(!o||t-o.t>18e5)o={e:P,n:0};o.n++;o.t=t;sessionStorage.setItem(K,JSON.stringify(o));V=o}catch(e){}var u=D+"/v?p="+encodeURIComponent(P)+"&r="+encodeURIComponent((function(r){var h=r.split("/")[2]||"";return h===location.host?r.split(/[?#]/)[0]:h})(document.referrer||""))+H+(function(){var q=new URLSearchParams(location.search),s=q.get("utm_source"),t=(q.get("s")||"").toLowerCase().replace(/[^a-z0-9-]/g,"-").slice(0,80);return s?"&us="+encodeURIComponent(s)+"&uc="+encodeURIComponent(q.get("utm_campaign")||""):t?"&us=s&uc="+encodeURIComponent(t):""})()+(V?"&vn="+V.n+(V.n>1?"&ve="+encodeURIComponent(V.e):""):"");Z(u);if(!V)return;var B="a[data-count],a[href*=\"buy.stripe.com\"],a[href*=\"data.cybermaxtools.com/buy/\"],a[href*=\".workers.dev/buy/\"],a[href*=\"buy.polar.sh\"],a[href*=\"polar.sh/checkout\"],[data-cmx-buy]",E=function(k){try{var o=JSON.parse(sessionStorage.getItem(K)||"null");if(!o||o[k])return;o[k]=1;sessionStorage.setItem(K,JSON.stringify(o));Z(D+"/v?p="+encodeURIComponent(P)+"&ev="+k+"&ve="+encodeURIComponent(o.e)+H)}catch(e){}};document.addEventListener("click",function(x){var a=x.target&&x.target.closest&&x.target.closest(B);if(a){E("seen");E("click")}},true);var S=V.seen,C=function(){if(S)return;var l=document.querySelectorAll(B),w=innerWidth,h=innerHeight;for(var i=0;i<l.length;i++){var r=l[i].getBoundingClientRect();if(r.width>0&&r.height>0&&r.bottom>0&&r.right>0&&r.top<h&&r.left<w){S=1;E("seen");return}}},T0=Date.now(),I=setInterval(function(){C();if(S||Date.now()-T0>6e5)clearInterval(I)},1500),R=0;addEventListener("scroll",function(){if(!R&&!S){R=1;setTimeout(function(){R=0;C()},250)}},{passive:true});document.readyState=="loading"?document.addEventListener("DOMContentLoaded",C):C()}catch(e){}})()</script><!-- cybermax-count:end --></body>
+<!-- cybermax-count:start --><script>(function(){try{var u="https://data.cybermaxtools.com/v?p="+encodeURIComponent(location.host+location.pathname)+"&r="+encodeURIComponent((document.referrer||"").split("/")[2]||"")+(function(){var q=new URLSearchParams(location.search),s=q.get("utm_source");return s?"&us="+encodeURIComponent(s)+"&uc="+encodeURIComponent(q.get("utm_campaign")||""):""})();navigator.sendBeacon?navigator.sendBeacon(u):(new Image).src=u}catch(e){}})()</script><!-- cybermax-count:end --></body>
 </html>