Spaces:
Sleeping
Sleeping
| /* ============================================================ | |
| SoundCloud-Style Audio Recorder + Waveform Display + Analyzer | |
| ============================================================ | |
| */ | |
| // Global variables | |
| let audioContext; | |
| let gumStream; | |
| let rec; | |
| let input; | |
| // DOM Elements | |
| const recordBtn = document.getElementById("recordButton"); | |
| const stopBtn = document.getElementById("stopButton"); | |
| const pauseBtn = document.getElementById("pauseButton"); | |
| const recordingsList = document.getElementById("recordingsList"); | |
| const uploadButton = document.getElementById("upload-button"); | |
| const uploadInput = document.getElementById("audio-file"); | |
| const responseBox = document.getElementById("response"); | |
| const metadataBox = document.getElementById("metadata-display"); | |
| // ============================== | |
| // Recording Controls | |
| // ============================== | |
| recordBtn.addEventListener("click", startRecording); | |
| stopBtn.addEventListener("click", stopRecording); | |
| pauseBtn.addEventListener("click", pauseRecording); | |
| // Start recording | |
| function startRecording() { | |
| console.log("Recording started..."); | |
| recordBtn.disabled = true; | |
| stopBtn.disabled = false; | |
| pauseBtn.disabled = false; | |
| navigator.mediaDevices.getUserMedia({ audio: true }).then(function (stream) { | |
| audioContext = new (window.AudioContext || window.webkitAudioContext)(); | |
| document.getElementById("formats").innerText = | |
| "Sample rate: " + audioContext.sampleRate + " Hz"; | |
| gumStream = stream; | |
| input = audioContext.createMediaStreamSource(stream); | |
| rec = new Recorder(input, { numChannels: 1 }); | |
| rec.record(); | |
| }).catch(function (e) { | |
| console.error("Could not start recording:", e); | |
| recordBtn.disabled = false; | |
| stopBtn.disabled = true; | |
| pauseBtn.disabled = true; | |
| }); | |
| } | |
| // Pause recording | |
| function pauseRecording() { | |
| if (rec.recording) { | |
| rec.stop(); | |
| pauseBtn.innerText = "Resume"; | |
| } else { | |
| rec.record(); | |
| pauseBtn.innerText = "Pause"; | |
| } | |
| } | |
| // Stop recording | |
| function stopRecording() { | |
| console.log("Recording stopped."); | |
| stopBtn.disabled = true; | |
| recordBtn.disabled = false; | |
| pauseBtn.disabled = true; | |
| pauseBtn.innerText = "Pause"; | |
| rec.stop(); | |
| gumStream.getAudioTracks()[0].stop(); | |
| rec.exportWAV(createWaveformItem); | |
| } | |
| // ============================== | |
| // File Upload | |
| // ============================== | |
| uploadButton.addEventListener("click", () => { | |
| if (!uploadInput.files.length) { | |
| alert("Select at least one file."); | |
| return; | |
| } | |
| Array.from(uploadInput.files).forEach((file) => handleUploadedFile(file)); | |
| }); | |
| function handleUploadedFile(file) { | |
| const url = URL.createObjectURL(file); | |
| createWaveformItem(file, url); | |
| } | |
| // ============================== | |
| // Create SoundCloud-like Waveform | |
| // ============================== | |
| function createWaveformItem(blob, forcedUrl = null) { | |
| const url = forcedUrl || URL.createObjectURL(blob); | |
| const li = document.createElement("li"); | |
| li.className = "wave-item"; | |
| const container = document.createElement("div"); | |
| container.className = "wave-canvas"; | |
| // Waveform and its temporal analysis share one column, so both use the same time axis | |
| const waveCol = document.createElement("div"); | |
| waveCol.className = "wave-col"; | |
| const timelineEl = document.createElement("div"); | |
| timelineEl.className = "timeline"; | |
| waveCol.appendChild(container); | |
| waveCol.appendChild(timelineEl); | |
| const meta = document.createElement("div"); | |
| meta.className = "wave-meta"; | |
| meta.innerHTML = `<div class="file-title">${blob.name || "recording.wav"}</div>`; | |
| // Play button | |
| const playBtn = document.createElement("button"); | |
| playBtn.className = "btn btn-play btn-sm"; | |
| playBtn.innerText = "Play"; | |
| // Analyze button | |
| const analyzeBtn = document.createElement("button"); | |
| analyzeBtn.className = "btn btn-outline-secondary btn-sm"; | |
| analyzeBtn.innerText = "Analyze"; | |
| const controls = document.createElement("div"); | |
| controls.className = "wave-controls"; | |
| controls.appendChild(analyzeBtn); | |
| controls.appendChild(playBtn); | |
| li.appendChild(controls); | |
| li.appendChild(waveCol); | |
| li.appendChild(meta); | |
| recordingsList.appendChild(li); | |
| // Create WaveSurfer | |
| const wavesurfer = WaveSurfer.create({ | |
| container, | |
| autoCenter: true, | |
| waveColor: "#bbb", | |
| progressColor: "#ff5500", | |
| cursorColor: "#333", | |
| barWidth: 2, | |
| height: 70, | |
| responsive: true, | |
| }); | |
| // Analyze | |
| const item = { blob, wavesurfer, timelineEl, abort: null, timeline: null }; | |
| analyzeBtn.addEventListener("click", () => { | |
| analyzeAudio(item); | |
| }); | |
| // Toggle play/pause | |
| playBtn.addEventListener("click", () => { | |
| wavesurfer.playPause(); | |
| playBtn.innerText = wavesurfer.isPlaying() ? "Pause" : "Play"; | |
| }); | |
| wavesurfer.on("finish", () => { playBtn.innerText = "Play"; }); | |
| // Keep the timeline's playback cursor in sync with the audio | |
| const syncCursor = () => item.timeline && item.timeline.setCursor(wavesurfer.getCurrentTime()); | |
| wavesurfer.on("audioprocess", syncCursor); | |
| wavesurfer.on("seek", syncCursor); | |
| wavesurfer.load(url); | |
| // Metadata | |
| if (metadataBox) blob.arrayBuffer().then((buffer) => { | |
| const ctx = new AudioContext(); | |
| ctx.decodeAudioData(buffer).then((decoded) => { | |
| metadataBox.innerHTML = ` | |
| <strong>Channels:</strong> ${decoded.numberOfChannels}<br> | |
| <strong>Duration:</strong> ${decoded.duration.toFixed(2)}s<br> | |
| <strong>Sample Rate:</strong> ${decoded.sampleRate} Hz | |
| `; | |
| }); | |
| }); | |
| } | |
| // ============================== | |
| // Audio Analysis API (placeholder) | |
| // ============================== | |
| async function analyzeAudio(item) { | |
| const blob = item.blob; | |
| // Check if the response element exists | |
| const responseBox = document.getElementById('response'); | |
| if (!responseBox) return; | |
| responseBox.innerHTML = "<em>Analyzing...</em>"; | |
| // Convert Blob to File | |
| const file = new File([blob], blob.name || "recording.wav", { type: blob.type }); | |
| const formData = new FormData(); | |
| formData.append("files", file); | |
| try { | |
| // Replace the URL with your real backend endpoint | |
| const res = await fetch("/predict/", { | |
| method: "POST", | |
| body: formData, | |
| }); | |
| const data = await res.json(); | |
| let message = "Prediction Failed!"; | |
| if (data[0]?.status === "success") { | |
| const item = data[0]; | |
| const confidencePercent = Math.round(item.confidence * 100); | |
| message = `${item.filename} is ${item.label} with confidence of ${confidencePercent}%`; | |
| } | |
| let messageVolume = "... "; | |
| if (data[0]?.volume === "silent") { | |
| messageVolume = "The audio appears to be silent or contains no detectable speech. Please record/select another file! "; | |
| message = "" | |
| } | |
| if (data[0]?.volume === "augmented") { | |
| messageVolume = "The detected speech volume was low, so a volume augmentation was applied before analysis. "; | |
| } | |
| const volumeColor = "orange"; | |
| let predictionColor = message.includes("Genuine") ? "green" : "red"; | |
| const silent = data[0]?.volume === "silent"; | |
| responseBox.innerHTML = ` | |
| <div style="font-size: 1.1rem; margin-bottom: 6px; color:${volumeColor};"> | |
| ${messageVolume} | |
| </div> | |
| <div style="font-size: 1.25rem; font-weight:600; color:${predictionColor};"> | |
| ${message} | |
| </div> | |
| `; | |
| // Temporal analysis runs after the global score (one CPU-heavy job at a time) | |
| if (data[0]?.status === "success" && !silent) { | |
| runTimeline(item, file); | |
| } | |
| } catch (err) { | |
| responseBox.innerHTML = `<div style="font-size: 1.25rem; font-weight:600; color:red;">/!\ Analysis failed.</div>`; | |
| console.error(err); | |
| } | |
| } | |
| // ============================== | |
| // Temporal Analysis (sliding window) | |
| // ============================== | |
| const SVG_NS = "http://www.w3.org/2000/svg"; | |
| const TL = { | |
| height: 150, | |
| padTop: 10, | |
| padBottom: 22, // room for the time axis labels | |
| ink: "#2b3a55", // the P(genuine) line | |
| genuineTint: "rgba(12, 163, 12, 0.08)", | |
| spoofTint: "rgba(208, 59, 59, 0.08)", | |
| grid: "#e6e6e6", | |
| cursor: "#ff5500", // same orange as the waveform progress | |
| }; | |
| function svgEl(tag, attrs = {}, parent = null) { | |
| const el = document.createElementNS(SVG_NS, tag); | |
| for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, v); | |
| if (parent) parent.appendChild(el); | |
| return el; | |
| } | |
| const fmtPct = (p) => `${(p * 100).toFixed(1)}%`; | |
| const fmtSec = (t) => `${t.toFixed(t < 10 ? 2 : 1)} s`; | |
| function niceTimeStep(duration, widthPx) { | |
| const maxTicks = Math.max(2, Math.floor(widthPx / 60)); | |
| const steps = [0.25, 0.5, 1, 2, 5, 10, 15, 30, 60, 120]; | |
| return steps.find((s) => duration / s <= maxTicks) || 300; | |
| } | |
| // Read an NDJSON stream line by line | |
| async function* readNdjson(response) { | |
| const reader = response.body.getReader(); | |
| const decoder = new TextDecoder(); | |
| let buffer = ""; | |
| while (true) { | |
| const { value, done } = await reader.read(); | |
| if (done) break; | |
| buffer += decoder.decode(value, { stream: true }); | |
| let nl; | |
| while ((nl = buffer.indexOf("\n")) >= 0) { | |
| const line = buffer.slice(0, nl).trim(); | |
| buffer = buffer.slice(nl + 1); | |
| if (line) yield JSON.parse(line); | |
| } | |
| } | |
| if (buffer.trim()) yield JSON.parse(buffer); | |
| } | |
| async function runTimeline(item, file) { | |
| // A new analysis of the same item replaces the running one | |
| if (item.abort) item.abort.abort(); | |
| item.abort = new AbortController(); | |
| const windowSec = document.getElementById("tl-window")?.value || "4"; | |
| const hopSec = document.getElementById("tl-hop")?.value || "1"; | |
| const chart = createTimelineChart(item); | |
| item.timeline = chart; | |
| chart.setStatus("Temporal analysis: uploading…"); | |
| const formData = new FormData(); | |
| formData.append("file", file); | |
| formData.append("window_sec", windowSec); | |
| formData.append("hop_sec", hopSec); | |
| try { | |
| const res = await fetch("/timeline/", { | |
| method: "POST", | |
| body: formData, | |
| signal: item.abort.signal, | |
| }); | |
| if (!res.ok) { | |
| const err = await res.json().catch(() => ({})); | |
| throw new Error(err.detail || `HTTP ${res.status}`); | |
| } | |
| for await (const msg of readNdjson(res)) { | |
| if (msg.n_windows !== undefined) chart.setHeader(msg); | |
| else chart.addSegment(msg); | |
| } | |
| chart.finish(); | |
| } catch (err) { | |
| if (err.name === "AbortError") return; | |
| console.error(err); | |
| chart.setStatus(`Temporal analysis failed: ${err.message}`); | |
| } | |
| } | |
| function createTimelineChart(item) { | |
| const root = item.timelineEl; | |
| root.replaceChildren(); | |
| root.classList.add("active"); | |
| const status = document.createElement("div"); | |
| status.className = "timeline-status"; | |
| const plot = document.createElement("div"); | |
| plot.className = "timeline-plot"; | |
| const svg = svgEl("svg", { height: TL.height, role: "img" }, plot); | |
| const tip = document.createElement("div"); | |
| tip.className = "timeline-tip"; | |
| plot.appendChild(tip); | |
| // Table view: the same numbers without hovering | |
| const details = document.createElement("details"); | |
| const summary = document.createElement("summary"); | |
| summary.textContent = "Segment values"; | |
| const table = document.createElement("table"); | |
| const thead = table.createTHead().insertRow(); | |
| ["Start", "End", "P(genuine)", "Decision"].forEach((h) => { | |
| const th = document.createElement("th"); | |
| th.textContent = h; | |
| thead.appendChild(th); | |
| }); | |
| const tbody = table.createTBody(); | |
| details.append(summary, table); | |
| root.append(status, plot, details); | |
| const state = { header: null, segments: [], cursor: null, hover: null, done: false }; | |
| const duration = () => { | |
| const d = item.wavesurfer.getDuration(); | |
| return d > 0 ? d : state.header?.duration || 1; | |
| }; | |
| const geom = () => { | |
| const w = plot.clientWidth || 600; | |
| const h = TL.height; | |
| const y0 = TL.padTop, y1 = h - TL.padBottom; | |
| return { | |
| w, h, y0, y1, | |
| x: (t) => (t / duration()) * w, | |
| y: (p) => y1 - p * (y1 - y0), | |
| t: (px) => Math.min(Math.max(px / w, 0), 1) * duration(), | |
| }; | |
| }; | |
| const center = (s) => (s.start + s.end) / 2; | |
| function render() { | |
| const g = geom(); | |
| svg.replaceChildren(); | |
| svg.setAttribute("viewBox", `0 0 ${g.w} ${g.h}`); | |
| // Zones: above 50% = genuine, below = spoof | |
| svgEl("rect", { x: 0, y: g.y0, width: g.w, height: g.y(0.5) - g.y0, fill: TL.genuineTint }, svg); | |
| svgEl("rect", { x: 0, y: g.y(0.5), width: g.w, height: g.y1 - g.y(0.5), fill: TL.spoofTint }, svg); | |
| // Hovered window span | |
| if (state.hover !== null) { | |
| const s = state.segments[state.hover]; | |
| svgEl("rect", { | |
| x: g.x(s.start), y: g.y0, width: Math.max(1, g.x(s.end) - g.x(s.start)), | |
| height: g.y1 - g.y0, fill: "rgba(43, 58, 85, 0.07)", | |
| }, svg); | |
| } | |
| // Grid at 0 / 50 / 100 %, decision threshold dashed | |
| [0, 0.5, 1].forEach((p) => { | |
| svgEl("line", { | |
| x1: 0, x2: g.w, y1: g.y(p), y2: g.y(p), | |
| stroke: p === 0.5 ? "#9aa0a6" : TL.grid, | |
| "stroke-width": 1, "stroke-dasharray": p === 0.5 ? "4 3" : "", | |
| }, svg); | |
| }); | |
| const ylab = (txt, p, dy) => { | |
| const t = svgEl("text", { x: g.w - 4, y: g.y(p) + dy, "text-anchor": "end" }, svg); | |
| t.textContent = txt; | |
| }; | |
| ylab("100%", 1, 11); | |
| ylab("50%", 0.5, -4); | |
| ylab("0%", 0, -4); | |
| const zlab = (txt, y) => { | |
| const t = svgEl("text", { x: 4, y, "font-weight": 600 }, svg); | |
| t.textContent = txt; | |
| }; | |
| zlab("▲ Genuine", g.y0 + 12); | |
| zlab("▼ Spoof", g.y1 - 5); | |
| // Time axis | |
| const step = niceTimeStep(duration(), g.w); | |
| for (let t = 0; t <= duration() + 1e-9; t += step) { | |
| const x = g.x(t); | |
| svgEl("line", { x1: x, x2: x, y1: g.y1, y2: g.y1 + 4, stroke: "#bbb" }, svg); | |
| const lbl = svgEl("text", { | |
| x, y: g.h - 6, | |
| "text-anchor": t === 0 ? "start" : x > g.w - 20 ? "end" : "middle", | |
| }, svg); | |
| lbl.textContent = `${+t.toFixed(2)}s`; | |
| } | |
| // P(genuine) line through window centres; silent windows break the line | |
| let d = ""; | |
| let pen = false; | |
| state.segments.forEach((s) => { | |
| if (s.silent) { pen = false; return; } | |
| d += `${pen ? "L" : "M"}${g.x(center(s)).toFixed(1)},${g.y(s.bonafide_prob).toFixed(1)}`; | |
| pen = true; | |
| }); | |
| if (d) { | |
| svgEl("path", { | |
| d, fill: "none", stroke: TL.ink, "stroke-width": 2, | |
| "stroke-linejoin": "round", "stroke-linecap": "round", | |
| }, svg); | |
| } | |
| // Markers (only when sparse enough to stay readable) | |
| const showDots = state.segments.length <= 60; | |
| state.segments.forEach((s, i) => { | |
| const cx = g.x(center(s)); | |
| if (s.silent) { | |
| svgEl("line", { | |
| x1: cx - 4, x2: cx + 4, y1: g.y1 - 3, y2: g.y1 - 3, | |
| stroke: "#adb5bd", "stroke-width": 2, "stroke-linecap": "round", | |
| }, svg); | |
| return; | |
| } | |
| if (!showDots && i !== state.hover) return; | |
| svgEl("circle", { | |
| cx, cy: g.y(s.bonafide_prob), r: i === state.hover ? 5 : 3.5, | |
| fill: TL.ink, stroke: "#fff", "stroke-width": 2, | |
| }, svg); | |
| }); | |
| // Crosshair on hover | |
| if (state.hover !== null) { | |
| const x = g.x(center(state.segments[state.hover])); | |
| svgEl("line", { x1: x, x2: x, y1: g.y0, y2: g.y1, stroke: TL.ink, "stroke-width": 1, opacity: 0.4 }, svg); | |
| } | |
| // Playback cursor | |
| if (state.cursor !== null) { | |
| const x = g.x(state.cursor); | |
| svgEl("line", { x1: x, x2: x, y1: 0, y2: g.y1, stroke: TL.cursor, "stroke-width": 2 }, svg); | |
| } | |
| svg.setAttribute("aria-label", ariaSummary()); | |
| } | |
| function ariaSummary() { | |
| const scored = state.segments.filter((s) => !s.silent); | |
| if (!scored.length) return "Temporal analysis: no scored segments yet"; | |
| const spoofed = scored.filter((s) => s.bonafide_prob < 0.5).length; | |
| return `Probability of genuine speech over time: ${spoofed} of ${scored.length} segments below 50%`; | |
| } | |
| function updateStatus() { | |
| const h = state.header; | |
| if (!h) return; | |
| const n = state.segments.length; | |
| const cfg = `window ${h.window_sec} s · hop ${h.hop_sec} s`; | |
| status.replaceChildren(); | |
| const strong = document.createElement("strong"); | |
| if (!state.done) { | |
| strong.textContent = `Temporal analysis: ${n} / ${h.n_windows} segments`; | |
| status.append(strong, ` · ${cfg} · computing…`); | |
| return; | |
| } | |
| const scored = state.segments.filter((s) => !s.silent); | |
| const spoofed = scored.filter((s) => s.bonafide_prob < 0.5).length; | |
| const silent = n - scored.length; | |
| strong.textContent = `${spoofed} of ${scored.length} segments look spoofed`; | |
| status.append( | |
| strong, | |
| ` · ${cfg}${silent ? ` · ${silent} silent segment${silent > 1 ? "s" : ""} not scored` : ""}`, | |
| ); | |
| } | |
| function addRow(s) { | |
| const row = tbody.insertRow(); | |
| [ | |
| fmtSec(s.start), | |
| fmtSec(s.end), | |
| s.silent ? "—" : fmtPct(s.bonafide_prob), | |
| s.silent ? "silent" : s.bonafide_prob >= 0.5 ? "Genuine" : "Spoof", | |
| ].forEach((v) => { row.insertCell().textContent = v; }); | |
| } | |
| // Hover: snap to the nearest window centre | |
| function showTip(i) { | |
| const s = state.segments[i]; | |
| const g = geom(); | |
| tip.replaceChildren(); | |
| const value = document.createElement("div"); | |
| value.className = "tip-value"; | |
| value.textContent = s.silent ? "silent" : `${fmtPct(s.bonafide_prob)} genuine`; | |
| const label = document.createElement("div"); | |
| label.className = "tip-label"; | |
| label.textContent = `${fmtSec(s.start)} – ${fmtSec(s.end)}` | |
| + (s.silent ? " · not scored" : ` · ${s.bonafide_prob >= 0.5 ? "Genuine" : "Spoof"}`); | |
| tip.append(value, label); | |
| tip.style.display = "block"; | |
| const x = g.x(center(s)); | |
| const tw = tip.offsetWidth; | |
| tip.style.left = `${Math.min(Math.max(x - tw / 2, 0), g.w - tw)}px`; | |
| tip.style.top = `${Math.max(0, (s.silent ? g.y1 : g.y(s.bonafide_prob)) - tip.offsetHeight - 10)}px`; | |
| } | |
| svg.addEventListener("pointermove", (e) => { | |
| if (!state.segments.length) return; | |
| const t = geom().t(e.offsetX); | |
| let best = 0; | |
| state.segments.forEach((s, i) => { | |
| if (Math.abs(center(s) - t) < Math.abs(center(state.segments[best]) - t)) best = i; | |
| }); | |
| if (best !== state.hover) { | |
| state.hover = best; | |
| render(); | |
| } | |
| showTip(best); | |
| }); | |
| svg.addEventListener("pointerleave", () => { | |
| state.hover = null; | |
| tip.style.display = "none"; | |
| render(); | |
| }); | |
| // Click to play from that point | |
| svg.addEventListener("click", (e) => { | |
| const g = geom(); | |
| item.wavesurfer.seekTo(g.t(e.offsetX) / duration()); | |
| }); | |
| new ResizeObserver(() => render()).observe(plot); | |
| render(); | |
| return { | |
| setStatus(text) { status.textContent = text; }, | |
| setHeader(h) { state.header = h; updateStatus(); render(); }, | |
| addSegment(s) { state.segments.push(s); addRow(s); updateStatus(); render(); }, | |
| finish() { state.done = true; updateStatus(); render(); }, | |
| setCursor(t) { state.cursor = t; render(); }, | |
| }; | |
| } | |