Add transcribator page: audio recording + Whisper STT proxy

Browser records audio via MediaRecorder API, bcard proxies it to Whisper STT service and returns transcription as JSON. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-18 20:23:10 +03:00
parent c1db6ae562
commit 22a16affa5
5 changed files with 1500 additions and 12 deletions
--- a/static/transcribator.html
+++ b/static/transcribator.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="ru" data-theme="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Transcribator</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
+    <style>
+        :root { --pico-font-size: 16px; }
+        html, body { height: 100dvh; margin: 0; overflow: hidden; }
+        body { display: flex; flex-direction: column; }
+        main { flex: 1; display: flex; flex-direction: column; max-width: 640px; width: 100%; margin: 0 auto; padding: 0.5rem; overflow: hidden; }
+        h1 { text-align: center; margin: 0.5rem 0; font-size: 1.4rem; }
+        #chat { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.75rem; padding: 0.5rem 0; }
+        #chat:empty::before { content: "Tap the microphone to start recording"; display: block; text-align: center; opacity: 0.5; margin-top: 2rem; }
+        #chat article { margin: 0; padding: 0.75rem; }
+        #chat article audio { width: 100%; margin-bottom: 0.5rem; }
+        #chat article p { margin: 0; }
+        .input-area { padding: 0.5rem 0; display: flex; justify-content: center; }
+        #mic-btn {
+            width: 64px; height: 64px; border-radius: 50%; font-size: 1.8rem;
+            display: flex; align-items: center; justify-content: center;
+            cursor: pointer; border: none; padding: 0; min-height: 48px;
+        }
+        #mic-btn.recording { background: var(--pico-del-color); animation: pulse 1s infinite; }
+        @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
+        .spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: middle; }
+        @keyframes spin { to { transform: rotate(360deg); } }
+        .error { color: var(--pico-del-color); }
+    </style>
+</head>
+<body>
+<main>
+    <h1>Transcribator</h1>
+    <div id="chat"></div>
+    <div class="input-area">
+        <button id="mic-btn" aria-label="Record">&#127908;</button>
+    </div>
+</main>
+<script>
+const chat = document.getElementById('chat');
+const micBtn = document.getElementById('mic-btn');
+let mediaRecorder = null;
+let chunks = [];
+
+function getMimeType() {
+    if (MediaRecorder.isTypeSupported('audio/webm;codecs=opus')) return 'audio/webm';
+    if (MediaRecorder.isTypeSupported('audio/mp4')) return 'audio/mp4';
+    return '';
+}
+
+function getExtension(mime) {
+    if (mime.includes('webm')) return 'webm';
+    if (mime.includes('mp4')) return 'm4a';
+    return 'bin';
+}
+
+function addMessage(audioBlob) {
+    const article = document.createElement('article');
+    const audio = document.createElement('audio');
+    audio.controls = true;
+    audio.src = URL.createObjectURL(audioBlob);
+    const text = document.createElement('p');
+    text.innerHTML = '<span class="spinner"></span> Transcribing...';
+    article.append(audio, text);
+    chat.append(article);
+    chat.scrollTop = chat.scrollHeight;
+    return text;
+}
+
+async function sendAudio(blob, textEl) {
+    const mime = blob.type || 'audio/webm';
+    const ext = getExtension(mime);
+    const form = new FormData();
+    form.append('audio', blob, `recording.${ext}`);
+    try {
+        const res = await fetch('/api/transcribe', { method: 'POST', body: form });
+        if (!res.ok) {
+            const err = await res.text();
+            textEl.innerHTML = `<span class="error">Error: ${err}</span>`;
+            return;
+        }
+        const data = await res.json();
+        textEl.textContent = data.text || '(empty)';
+    } catch (e) {
+        textEl.innerHTML = `<span class="error">Error: ${e.message}</span>`;
+    }
+}
+
+async function toggleRecording() {
+    if (mediaRecorder && mediaRecorder.state === 'recording') {
+        mediaRecorder.stop();
+        return;
+    }
+    try {
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        const mime = getMimeType();
+        mediaRecorder = new MediaRecorder(stream, mime ? { mimeType: mime } : {});
+        chunks = [];
+        mediaRecorder.ondataavailable = e => { if (e.data.size > 0) chunks.push(e.data); };
+        mediaRecorder.onstop = () => {
+            stream.getTracks().forEach(t => t.stop());
+            micBtn.classList.remove('recording');
+            const blob = new Blob(chunks, { type: mediaRecorder.mimeType });
+            const textEl = addMessage(blob);
+            sendAudio(blob, textEl);
+        };
+        mediaRecorder.start();
+        micBtn.classList.add('recording');
+    } catch (e) {
+        alert('Microphone access denied: ' + e.message);
+    }
+}
+
+micBtn.addEventListener('click', toggleRecording);
+</script>
+</body>
+</html>