Implémentation complète de LiveFlow (proposition 2, moteur Qwen3-ASR)

- docker-compose : Caddy (HTTPS local) + app FastAPI + Qwen3-ASR via vLLM (GPU) - Backend : WebSocket audio, segmentation VAD (WebRTC), appel ASR compatible OpenAI, stockage SQLite, exports TXT/MD/SRT/JSON - Frontend : capture micro (AudioWorklet, rééchantillonnage 16 kHz), transcription live, historique des réunions, copie et téléchargement - README : démarrage, prérequis GPU, changement de moteur ASR https://claude.ai/code/session_01YHMp3EKzr4s6o8w1ygxuUe
2026-10-18 04:37:07 +02:00 · 2026-06-11 16:28:17 +00:00
1 parent 4fa5964988
commit a8517c3597
@@ -0,0 +1,141 @@
+* { box-sizing: border-box; margin: 0; }
+
+:root {
+  --bg: #0f1117;
+  --panel: #181b24;
+  --panel-2: #1f2330;
+  --text: #e8eaf0;
+  --muted: #8b91a3;
+  --accent: #4f7cff;
+  --rec: #e5484d;
+}
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 20px;
+  background: var(--panel);
+  border-bottom: 1px solid #262b3a;
+}
+
+header h1 { font-size: 1.2rem; }
+
+.badge {
+  font-size: 0.78rem;
+  padding: 3px 10px;
+  border-radius: 999px;
+  background: var(--panel-2);
+  color: var(--muted);
+}
+.badge.rec { background: #3a181a; color: #ff8589; }
+.badge.busy { background: #2a2410; color: #ffd166; }
+.badge.error { background: #3a181a; color: #ff8589; }
+
+.layout { display: flex; flex: 1; min-height: 0; }
+
+aside {
+  width: 260px;
+  background: var(--panel);
+  border-right: 1px solid #262b3a;
+  padding: 16px;
+  overflow-y: auto;
+}
+aside h2 { font-size: 0.85rem; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
+aside ul { list-style: none; padding: 0; }
+aside li {
+  padding: 8px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+aside li:hover { background: var(--panel-2); }
+aside li.active { background: #20294a; }
+.m-title { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.m-meta { font-size: 0.74rem; color: var(--muted); }
+
+main { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 20px; gap: 16px; }
+
+.controls { display: flex; gap: 12px; align-items: center; }
+.controls input {
+  flex: 1;
+  background: var(--panel-2);
+  border: 1px solid #2c3245;
+  color: var(--text);
+  padding: 10px 14px;
+  border-radius: 10px;
+  font-size: 0.95rem;
+}
+.controls input:focus { outline: none; border-color: var(--accent); }
+
+button, .controls a {
+  border: none;
+  border-radius: 10px;
+  padding: 10px 18px;
+  font-size: 0.95rem;
+  cursor: pointer;
+  background: var(--panel-2);
+  color: var(--text);
+}
+button.record { background: var(--accent); font-weight: 600; min-width: 130px; }
+button.record.recording { background: var(--rec); }
+#timer { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 48px; }
+
+#transcript-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: var(--panel);
+  border: 1px solid #262b3a;
+  border-radius: 14px;
+  min-height: 0;
+}
+.panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 14px 18px;
+  border-bottom: 1px solid #262b3a;
+}
+.panel-head h2 { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+#export-bar { display: flex; gap: 8px; align-items: center; }
+#export-bar a, #export-bar button {
+  font-size: 0.8rem;
+  padding: 6px 10px;
+  border-radius: 8px;
+  background: var(--panel-2);
+  color: var(--text);
+  text-decoration: none;
+}
+#export-bar.hidden { display: none; }
+
+#transcript { flex: 1; overflow-y: auto; padding: 18px; }
+.placeholder { color: var(--muted); font-style: italic; }
+.segment { display: flex; gap: 12px; margin-bottom: 12px; line-height: 1.55; }
+.segment .ts {
+  color: var(--muted);
+  font-size: 0.78rem;
+  font-variant-numeric: tabular-nums;
+  padding-top: 3px;
+  flex-shrink: 0;
+}
+
+@media (max-width: 720px) {
+  .layout { flex-direction: column; }
+  aside { width: 100%; max-height: 30vh; border-right: none; border-bottom: 1px solid #262b3a; }
+  .controls { flex-wrap: wrap; }
+  .controls input { width: 100%; flex: none; }
+}