feat(web): Nightjar web app - Plaud-style record/transcribe/summarise UI

A runnable, self-hosted web interface so the whole workflow can be tested end to end: record or upload audio in the browser, watch it transcribe and summarise, browse a library, play back, and export. What changed: - server/app/store.py: SQLite + on-disk audio storage for recordings (stdlib only). - server/app/pipeline.py: background task audio -> transcribe -> summarise via the existing provider layer, updating status (queued/transcribing/summarising/done/error). - server/app/main.py: web API - POST upload, list, detail, audio (Range), delete, and export (txt/md/srt/vtt/json) - and serves the SPA at /. - server/app/web/: Plaud-style single-page UI (index.html, styles.css, app.js). Sidebar library, in-browser recording (MediaRecorder) + file upload, live status polling, audio player, summary (overview/key points/actions), timestamped transcript, exports. - server/Dockerfile + README: two-minute run instructions (default provider: Groq free tier for both Whisper + LLM), and a Docker option. - config: env prefix switched OPENSCRIBE_ -> NIGHTJAR_ to match the brand and the site tutorials; .env.example rewritten with a ready Groq quick-start. - state/TODO: web app recorded as done. Why: - User asked for a Plaud-like web interface to test how it all works. Nothing testable existed before (marketing site is a brochure; pipeline was unwired). This delivers a real, runnable product demo and effectively lands M5/M6 for the HTTP providers. Notes: - Slim by design: AI is offloaded to the configured provider, so no local ML deps needed for the demo. Byte-compiles clean; JS passes node --check. Local faster-whisper still needs its model (M5) for the fully-offline path. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-06 09:57:42 +01:00 · 2026-07-06 09:57:42 +01:00 · 19c3e156a0
commit 19c3e156a0
parent b9e56d0825
10 changed files with 501 additions and 76 deletions
--- a/server/app/web/app.js
+++ b/server/app/web/app.js
@ -0,0 +1,103 @@
+// SPDX-License-Identifier: GPL-3.0-only  -  Nightjar web UI logic (vanilla JS)
+(function () {
+  const $ = (s) => document.querySelector(s);
+  const listEl = $("#list"), detailEl = $("#detail");
+  const recBtn = $("#recBtn"), recTimer = $("#recTimer"), uploadEl = $("#upload");
+  let selected = null, poller = null;
+  let mediaRecorder = null, chunks = [], recStart = 0, recInterval = null;
+
+  const PROC = ["queued", "transcribing", "summarising"];
+  const fmtTime = (s) => { s = Math.floor(s || 0); const m = Math.floor(s / 60); return `${m}:${String(s % 60).padStart(2, "0")}`; };
+  const when = (t) => new Date((t || 0) * 1000).toLocaleString();
+  const esc = (x) => (x || "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+
+  async function j(url, opts) { const r = await fetch(url, opts); if (!r.ok && r.status !== 204) throw new Error(await r.text()); return r.status === 204 ? null : r.json(); }
+
+  function badge(status) {
+    if (status === "done") return '<span class="badge done">done</span>';
+    if (status === "error") return '<span class="badge error">error</span>';
+    return `<span class="badge proc">${status}</span>`;
+  }
+
+  async function refreshList() {
+    const items = await j("/api/recordings");
+    listEl.innerHTML = items.map((r) => `
+      <li class="item ${r.id === selected ? "sel" : ""}" data-id="${r.id}">
+        <div class="t">${esc(r.title)}</div>
+        <div class="m">${badge(r.status)} <span>${when(r.created_at)}</span></div>
+      </li>`).join("") || '<li class="m" style="padding:12px;color:var(--muted)">No recordings yet.</li>';
+    listEl.querySelectorAll(".item").forEach((li) => li.onclick = () => open(li.dataset.id));
+    // keep polling if anything is still processing
+    if (items.some((r) => PROC.includes(r.status)) && !poller) poller = setInterval(tick, 2500);
+    if (!items.some((r) => PROC.includes(r.status)) && poller) { clearInterval(poller); poller = null; }
+  }
+
+  async function tick() { await refreshList(); if (selected) await open(selected, true); }
+
+  async function open(id, quiet) {
+    selected = id;
+    if (!quiet) listEl.querySelectorAll(".item").forEach((li) => li.classList.toggle("sel", li.dataset.id === id));
+    const r = await j("/api/recordings/" + id);
+    const s = r.summary, t = r.transcript;
+    let mid;
+    if (PROC.includes(r.status)) mid = `<div class="card"><span class="spinner"></span> &nbsp;${r.status}… this can take a few seconds.</div>`;
+    else if (r.status === "error") mid = `<div class="card"><h3 style="color:var(--bad)">Processing failed</h3><p style="color:var(--muted)">${esc(r.error)}</p><p style="color:var(--muted)">Check the server&#39;s AI provider config (see .env).</p></div>`;
+    else mid = `
+      ${s ? `<div class="card"><h3>Summary</h3><p class="overview">${esc(s.overview)}</p>
+        ${s.key_points && s.key_points.length ? `<h4>Key points</h4><ul>${s.key_points.map((p) => `<li>${esc(p)}</li>`).join("")}</ul>` : ""}
+        ${s.action_items && s.action_items.length ? `<h4>Action items</h4><ul>${s.action_items.map((a) => `<li>${esc(a)}</li>`).join("")}</ul>` : ""}</div>` : ""}
+      <div class="card"><h3>Transcript</h3>
+        ${(t && t.segments && t.segments.length)
+          ? t.segments.map((g) => `<div class="seg"><div class="ts">${fmtTime(g.start)}</div><div class="tx">${esc(g.text)}</div></div>`).join("")
+          : `<div class="overview">${esc(t && t.text || "")}</div>`}</div>
+      <div class="exports"><span style="color:var(--muted);font-size:.82rem;align-self:center">Export:</span>
+        ${["txt", "md", "srt", "vtt", "json"].map((f) => `<a href="/api/recordings/${id}/export?format=${f}" download="${id}.${f}">${f.toUpperCase()}</a>`).join("")}</div>`;
+
+    detailEl.innerHTML = `
+      <div class="head"><h1>${esc(r.title)}</h1>
+        <div class="sub">${badge(r.status)} <span>${when(r.created_at)}</span>
+          <button class="link-danger right" id="delBtn">Delete</button></div>
+        <audio controls preload="metadata" src="/api/recordings/${id}/audio"></audio>
+      </div>${mid}`;
+    $("#delBtn").onclick = async () => { if (confirm("Delete this recording?")) { await j("/api/recordings/" + id, { method: "DELETE" }); selected = null; detailEl.innerHTML = ""; refreshList(); } };
+  }
+
+  async function upload(blob, name) {
+    const fd = new FormData();
+    fd.append("file", blob, name);
+    const r = await j("/api/recordings?title=" + encodeURIComponent(name), { method: "POST", body: fd });
+    await refreshList();
+    open(r.id);
+    if (!poller) poller = setInterval(tick, 2500);
+  }
+
+  uploadEl.onchange = () => { const f = uploadEl.files[0]; if (f) upload(f, f.name); uploadEl.value = ""; };
+
+  recBtn.onclick = async () => {
+    if (mediaRecorder && mediaRecorder.state === "recording") { mediaRecorder.stop(); return; }
+    let stream;
+    try { stream = await navigator.mediaDevices.getUserMedia({ audio: true }); }
+    catch (e) { alert("Microphone access denied or unavailable."); return; }
+    chunks = [];
+    mediaRecorder = new MediaRecorder(stream);
+    mediaRecorder.ondataavailable = (e) => e.data.size && chunks.push(e.data);
+    mediaRecorder.onstop = () => {
+      stream.getTracks().forEach((t) => t.stop());
+      clearInterval(recInterval); recTimer.hidden = true;
+      recBtn.classList.remove("recording"); recBtn.textContent = "● Record";
+      const blob = new Blob(chunks, { type: mediaRecorder.mimeType || "audio/webm" });
+      const name = "Recording " + new Date().toLocaleString();
+      upload(blob, name.replace(/[/:]/g, "-") + ".webm");
+    };
+    mediaRecorder.start();
+    recStart = Date.now(); recTimer.hidden = false;
+    recInterval = setInterval(() => recTimer.textContent = fmtTime((Date.now() - recStart) / 1000) + " · recording…", 250);
+    recBtn.classList.add("recording"); recBtn.textContent = "■ Stop";
+  };
+
+  async function boot() {
+    try { const h = await j("/health"); $("#providers").textContent = `stt: ${h.transcriber}  ·  llm: ${h.summariser}`; } catch (e) {}
+    refreshList();
+  }
+  boot();
+})();
--- a/server/app/web/index.html
+++ b/server/app/web/index.html
@ -0,0 +1,38 @@
+<!doctype html>
+<!-- SPDX-License-Identifier: GPL-3.0-only -->
+<html lang="en-GB">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Nightjar</title>
+  <link rel="stylesheet" href="/styles.css" />
+</head>
+<body>
+  <header class="topbar">
+    <div class="brand"><span class="dot"></span> Nightjar</div>
+    <div class="providers" id="providers" title="Configured AI providers"></div>
+  </header>
+
+  <main class="layout">
+    <aside class="sidebar">
+      <div class="actions">
+        <button id="recBtn" class="btn primary">● Record</button>
+        <label class="btn" for="upload">Upload</label>
+        <input id="upload" type="file" accept="audio/*" hidden />
+      </div>
+      <div id="recTimer" class="rec-timer" hidden>00:00 · recording…</div>
+      <ul id="list" class="list"></ul>
+    </aside>
+
+    <section class="detail" id="detail">
+      <div class="empty">
+        <h2>Record or upload audio</h2>
+        <p>Nightjar transcribes it and writes a summary using the AI you configured. Your
+           recordings appear on the left.</p>
+      </div>
+    </section>
+  </main>
+
+  <script src="/app.js"></script>
+</body>
+</html>
--- a/server/app/web/styles.css
+++ b/server/app/web/styles.css
@ -0,0 +1,54 @@
+/* SPDX-License-Identifier: GPL-3.0-only  -  Nightjar web UI */
+:root{
+  --ink:#0e1116; --panel:#161b22; --panel2:#1c2230; --line:#2a3140; --text:#e8edf4;
+  --muted:#93a0b4; --accent:#e0894e; --accent2:#5fc7bf; --ok:#3fb950; --bad:#f85149;
+  --sans:ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
+  --mono:ui-monospace,"Cascadia Code",Consolas,monospace;
+}
+*{box-sizing:border-box} html,body{height:100%}
+body{margin:0;font-family:var(--sans);color:var(--text);background:var(--ink);}
+.topbar{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 18px;border-bottom:1px solid var(--line);background:rgba(14,17,22,.8);backdrop-filter:blur(8px);position:sticky;top:0;z-index:5}
+.brand{font-weight:800;letter-spacing:.3px;display:flex;align-items:center;gap:10px}
+.brand .dot{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 40% 40%,var(--accent2),transparent 70%),var(--accent);box-shadow:0 0 12px rgba(95,199,191,.6)}
+.providers{font-family:var(--mono);font-size:.72rem;color:var(--muted)}
+.layout{display:grid;grid-template-columns:320px 1fr;height:calc(100vh - 56px)}
+.sidebar{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:var(--panel)}
+.actions{display:flex;gap:8px;padding:14px}
+.btn{cursor:pointer;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:10px;padding:9px 14px;font-weight:600;font-size:.92rem;text-align:center;flex:1;transition:.14s}
+.btn:hover{border-color:var(--accent)}
+.btn.primary{background:linear-gradient(135deg,var(--accent),#d1783c);border:none;color:#14100a}
+.btn.recording{background:var(--bad);color:#fff;animation:pulse 1.4s infinite}
+@keyframes pulse{50%{opacity:.6}}
+.rec-timer{padding:0 14px 8px;color:var(--bad);font-family:var(--mono);font-size:.8rem}
+.list{list-style:none;margin:0;padding:6px;overflow-y:auto;flex:1}
+.item{padding:11px 12px;border-radius:10px;cursor:pointer;border:1px solid transparent}
+.item:hover{background:var(--panel2)}
+.item.sel{background:var(--panel2);border-color:var(--accent)}
+.item .t{font-weight:600;font-size:.94rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.item .m{display:flex;gap:8px;align-items:center;margin-top:3px;color:var(--muted);font-size:.76rem}
+.badge{font-size:.68rem;padding:1px 7px;border-radius:999px;border:1px solid var(--line);font-family:var(--mono)}
+.badge.done{color:var(--ok);border-color:#2ea04355}
+.badge.error{color:var(--bad);border-color:#f8514955}
+.badge.proc{color:var(--accent2);border-color:#5fc7bf55}
+.detail{overflow-y:auto;padding:26px 30px}
+.empty{max-width:460px;margin:12vh auto 0;text-align:center;color:var(--muted)}
+.empty h2{color:var(--text)}
+.head h1{margin:0 0 4px;font-size:1.5rem}
+.head .sub{color:var(--muted);font-size:.85rem;display:flex;gap:10px;align-items:center;margin-bottom:16px}
+audio{width:100%;margin:6px 0 20px}
+.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:18px}
+.card h3{margin:0 0 10px;font-size:1.05rem}
+.card ul{margin:6px 0 0;padding-left:18px;color:#d7deea}
+.card li{margin:4px 0}
+.overview{color:#d7deea;line-height:1.6}
+.seg{display:flex;gap:12px;padding:6px 0;border-bottom:1px solid #1f2733}
+.seg .ts{font-family:var(--mono);color:var(--accent2);font-size:.78rem;min-width:64px;padding-top:2px}
+.seg .tx{color:#cdd6e2;line-height:1.5}
+.exports{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
+.exports a{font-size:.82rem;text-decoration:none;color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px 11px}
+.exports a:hover{border-color:var(--accent)}
+.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--accent2);border-radius:50%;animation:spin .8s linear infinite;vertical-align:-2px}
+@keyframes spin{to{transform:rotate(360deg)}}
+.right{margin-left:auto}
+.link-danger{color:var(--bad);cursor:pointer;font-size:.82rem;background:none;border:none}
+@media(max-width:720px){.layout{grid-template-columns:1fr}.sidebar{display:none}}