Dictée vocale : micro dans la carte de saisie, whisper.cpp local

Un bouton micro dans la carte de saisie : un clic enregistre, un second
arrête, transcrit et pose le texte dans le champ sans écraser ce qui s'y
trouve. Anneau rouge pulsé pendant l'enregistrement, garde-fou à 90 s.

La transcription est 100 % locale : POST /api/transcribe → whisper-cli
(whisper.cpp, compilé CPU en statique dans une étape dédiée du Dockerfile).
Le modèle ggml-small-q5_1 (~190 Mo, multilingue) n'est pas dans l'image :
téléchargé au premier usage dans /data/whisper/ avec progression (503
{downloading, pct} en attendant), il survit aux recréations du conteneur.

L'audio est encodé en WAV 16 kHz mono côté navigateur (whisper.cpp ne lit
que du PCM) — pas de ffmpeg dans l'image. Le micro n'existe qu'en contexte
sécurisé (HTTPS ou localhost) : le bouton l'explique au lieu d'échouer en
silence.

Vérifié bout en bout avec le binaire whisper.cpp officiel : téléchargement
du modèle par le handler, puis une sinusoïde 440 Hz transcrite « (beeping) ».

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

internal/loki/ui/src/index.tmpl.html

@@ -160,6 +160,12 @@ document.documentElement.setAttribute('data-side',localStorage.getItem('loki-sid
         <option value="high">haute</option>
         <option value="xhigh">maximale</option>
       </select>
+      <!-- Dictée vocale : enregistre au micro, transcrit en local (whisper.cpp
+           côté serveur) et pose le texte dans le champ. Voir js/23-dictate.js.
+           Le navigateur n'autorise le micro qu'en HTTPS (ou localhost). -->
+      <button id="mic" onclick="dictateToggle()" title="dicter au micro" aria-label="dicter au micro">
+        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="3" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0 0 14 0"/><path d="M12 18v3"/></svg>
+      </button>
       <!-- Joindre un fichier. Icône dessinée en SVG : pas de dépendance à une
            police d'emoji, dont le rendu varie énormément d'un système à l'autre. -->
       <button id="attach" onclick="document.getElementById('attach-input').click()" title="joindre un fichier" aria-label="joindre un fichier">

internal/loki/ui/src/js/23-dictate.js

@@ -0,0 +1,87 @@
+// ─── Dictée vocale ───────────────────────────────────────────────────────────
+// Bouton micro de la carte de saisie : un clic enregistre, un second arrête et
+// transcrit. La capture est encodée en WAV 16 kHz mono ICI, côté navigateur —
+// whisper.cpp ne lit que du PCM, et encoder au bon format évite d'embarquer
+// ffmpeg dans l'image. La transcription est locale (POST /api/transcribe →
+// whisper-cli). Le texte s'ajoute au champ sans écraser ce qui s'y trouve.
+//
+// ⚠️ Le micro n'est autorisé par le NAVIGATEUR qu'en contexte sécurisé (HTTPS
+// ou localhost) : servi en http://IP:8090, getUserMedia n'existe pas — on
+// l'explique plutôt que d'échouer en silence.
+let MIC = null; // {ctx, stream, src, node, chunks, rate, timer}
+
+async function dictateToggle(){
+  if(MIC){ dictateStop(); return; }
+  if(!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia)){
+    toast('micro bloqué par le navigateur : il faut HTTPS (ou localhost)');
+    return;
+  }
+  let stream;
+  try{
+    stream = await navigator.mediaDevices.getUserMedia({audio:{channelCount:1, echoCancellation:true, noiseSuppression:true}});
+  }catch(e){ toast('accès au micro refusé'); return; }
+  const ctx = new (window.AudioContext||window.webkitAudioContext)();
+  const src = ctx.createMediaStreamSource(stream);
+  // ScriptProcessor : déprécié mais universel, et amplement suffisant pour
+  // copier des blocs de PCM (AudioWorklet demanderait un module séparé,
+  // impossible dans un fichier unique servi inline).
+  const node = ctx.createScriptProcessor(4096, 1, 1);
+  const chunks = [];
+  node.onaudioprocess = e => { chunks.push(new Float32Array(e.inputBuffer.getChannelData(0))); };
+  src.connect(node); node.connect(ctx.destination);
+  // Garde-fou : une dictée oubliée ne tourne pas des heures.
+  MIC = {ctx, stream, src, node, chunks, rate:ctx.sampleRate, timer:setTimeout(dictateStop, 90000)};
+  document.getElementById('mic').classList.add('rec');
+}
+
+async function dictateStop(){
+  const m = MIC; if(!m) return; MIC = null;
+  clearTimeout(m.timer);
+  try{ m.src.disconnect(); m.node.disconnect(); }catch(_){}
+  m.stream.getTracks().forEach(t => t.stop());
+  try{ m.ctx.close(); }catch(_){}
+  const btn = document.getElementById('mic');
+  btn.classList.remove('rec'); btn.classList.add('busy'); btn.disabled = true;
+  try{
+    const wav = encodeWav16k(m.chunks, m.rate);
+    if(wav.byteLength < 16000){ toast('rien entendu'); return; } // < 0,5 s
+    const r = await jfetch('/api/transcribe', {method:'POST', headers:{'Content-Type':'audio/wav'}, body:wav});
+    const j = await r.json().catch(()=>({}));
+    if(r.status === 503 && j.downloading){
+      toast('modèle de dictée en téléchargement ('+(j.pct||0)+' %) — réessaie dans un instant');
+      return;
+    }
+    if(!r.ok){ toast(j.error || 'échec de la transcription'); return; }
+    const text = (j.text||'').trim();
+    if(!text){ toast('rien compris — réessaie'); return; }
+    const ta = document.getElementById('input');
+    ta.value = ta.value.trim() ? ta.value.replace(/\s+$/,'') + ' ' + text : text;
+    autoGrow(ta); ta.focus();
+  }catch(_){ toast('erreur réseau'); }
+  finally{ btn.classList.remove('busy'); btn.disabled = false; }
+}
+
+// Ré-échantillonne le PCM capturé (44,1/48 kHz selon la machine) vers du WAV
+// 16 kHz mono 16 bits — le format d'entrée de whisper.cpp. Décimation simple :
+// pour de la voix ré-échantillonnée VERS LE BAS, largement suffisant.
+function encodeWav16k(chunks, fromRate){
+  const toRate = 16000;
+  let n = 0; for(const c of chunks) n += c.length;
+  const all = new Float32Array(n); let o = 0;
+  for(const c of chunks){ all.set(c, o); o += c.length; }
+  const ratio = fromRate / toRate, outN = Math.floor(n / ratio);
+  const pcm = new Int16Array(outN);
+  for(let i = 0; i < outN; i++){
+    const s = Math.max(-1, Math.min(1, all[Math.floor(i*ratio)] || 0));
+    pcm[i] = s < 0 ? s*0x8000 : s*0x7fff;
+  }
+  const buf = new ArrayBuffer(44 + pcm.length*2), v = new DataView(buf);
+  const wr = (off, s) => { for(let i = 0; i < s.length; i++) v.setUint8(off+i, s.charCodeAt(i)); };
+  wr(0,'RIFF'); v.setUint32(4, 36 + pcm.length*2, true); wr(8,'WAVEfmt ');
+  v.setUint32(16, 16, true); v.setUint16(20, 1, true); v.setUint16(22, 1, true);
+  v.setUint32(24, toRate, true); v.setUint32(28, toRate*2, true);
+  v.setUint16(32, 2, true); v.setUint16(34, 16, true);
+  wr(36,'data'); v.setUint32(40, pcm.length*2, true);
+  new Int16Array(buf, 44).set(pcm);
+  return buf;
+}

internal/loki/ui/src/styles.css

@@ -2028,6 +2028,12 @@ html[data-files="1"] #files-btn{color:var(--accent)}
 
 .rolebadge{display:inline-block;margin-left:6px;padding:0 6px;border:1px solid var(--accent);border-radius:3px;color:var(--accent);font-size:9px;letter-spacing:.05em;text-transform:uppercase;vertical-align:middle}
 
+/* Dictée : anneau rouge pulsé pendant l'enregistrement, estompé pendant la
+   transcription. Le bouton garde le gabarit de ses voisins (joindre, fichiers). */
+#mic.rec{color:var(--err);border-color:var(--err);animation:micpulse 1.2s ease-in-out infinite}
+@keyframes micpulse{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--err) 25%,transparent)}}
+#mic.busy{opacity:.55}
+
 /* ── Réglages en modale ─────────────────────────────────────────────────────
    Deux volets : nav des sections à gauche, LE panneau choisi à droite. Les
    panneaux réutilisent tels quels les gabarits de la barre latérale (.slist,