Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>LiveTranscribe — Real-time Audio Transcription</title> | |
| <meta name="description" content="LiveTranscribe: real-time microphone + uploaded audio transcription with speaker diarization and downloadable transcripts." /> | |
| <!-- Tailwind CDN for quick styling --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| /* small extra tweaks */ | |
| .feature-icon { width:48px; height:48px; } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800 font-sans"> | |
| <header class="bg-white shadow"> | |
| <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 rounded-lg bg-gradient-to-tr from-indigo-500 to-purple-500 flex items-center justify-center text-white font-bold">LT</div> | |
| <div> | |
| <a href="#home" class="text-xl font-semibold">LiveTranscribe</a> | |
| <div class="text-sm text-gray-500">Real-time transcription + diarization</div> | |
| </div> | |
| </div> | |
| <nav class="hidden md:flex items-center gap-6 text-sm"> | |
| <a href="#features" class="hover:underline">Features</a> | |
| <a href="#how" class="hover:underline">How it works</a> | |
| <a href="#deploy" class="hover:underline">Deploy</a> | |
| <a href="#try" class="px-4 py-2 rounded-lg bg-indigo-600 text-white">Get started</a> | |
| </nav> | |
| <div class="md:hidden"> | |
| <button id="menuBtn" class="px-3 py-2 bg-gray-100 rounded">Menu</button> | |
| </div> | |
| </div> | |
| </header> | |
| <main id="home" class="max-w-6xl mx-auto px-6 py-12"> | |
| <section class="grid md:grid-cols-2 gap-10 items-center"> | |
| <div> | |
| <h1 class="text-4xl md:text-5xl font-extrabold leading-tight">Real-time transcription for live and uploaded audio</h1> | |
| <p class="mt-4 text-gray-600">Record, chunk, diarize speakers and transcribe — all in real time. Useful for meetings, podcasts, lectures, and interviews.</p> | |
| <div class="mt-6 flex gap-3"> | |
| <a href="/live" class="px-5 py-3 rounded-lg bg-indigo-600 text-white shadow">Open Live Recorder</a> | |
| <a href="/upload" class="px-5 py-3 rounded-lg border border-gray-200">Upload & Live Transcribe</a> | |
| </div> | |
| <div class="mt-6 text-sm text-gray-500"> | |
| <strong>Note:</strong> The links above assume your Flask static templates are served at the project root. Adjust if your routes differ. | |
| </div> | |
| </div> | |
| <!-- <div class="bg-white rounded-lg shadow p-6"> | |
| <h3 class="font-semibold">Quick demo</h3> | |
| <ol class="mt-3 list-decimal list-inside text-gray-600 text-sm space-y-2"> | |
| <li>Open <code>/index2.html</code> to start the live recorder and see live transcription + diarization.</li> | |
| <li>Open <code>/index2_upload.html</code> to upload an audio file and receive a streaming transcript.</li> | |
| <li>Download transcripts or copy them from the web UI.</li> | |
| </ol> | |
| </div> --> | |
| </section> | |
| <section id="features" class="mt-14"> | |
| <h2 class="text-2xl font-bold">Features</h2> | |
| <div class="grid md:grid-cols-3 gap-6 mt-6"> | |
| <article class="bg-white p-6 rounded-lg shadow-sm"> | |
| <img class="feature-icon" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%235a67d8' viewBox='0 0 24 24'><path d='M12 3v10c0 3.31-2.69 6-6 6H4v2h8v-2h-2c2.21 0 4-1.79 4-4V3h-6z'/></svg>" alt="microphone" /> | |
| <h4 class="mt-3 font-semibold">Live recording</h4> | |
| <p class="text-sm text-gray-600 mt-2">Capture mic & system audio in short chunks (5s) and stream them to the transcriber.</p> | |
| </article> | |
| <article class="bg-white p-6 rounded-lg shadow-sm"> | |
| <img class="feature-icon" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%2337a6ff' viewBox='0 0 24 24'><path d='M12 2C8 2 5 5 5 9c0 4.42 7 13 7 13s7-8.58 7-13c0-4-3-7-7-7z'/></svg>" alt="upload" /> | |
| <h4 class="mt-3 font-semibold">Upload + stream</h4> | |
| <p class="text-sm text-gray-600 mt-2">Users upload audio files and get live, incremental transcripts back in the browser.</p> | |
| </article> | |
| <article class="bg-white p-6 rounded-lg shadow-sm"> | |
| <img class="feature-icon" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23f59e0b' viewBox='0 0 24 24'><path d='M12 12c2.21 0 4-1.79 4-4V4h-8v4c0 2.21 1.79 4 4 4z'/></svg>" alt="diarization" /> | |
| <h4 class="mt-3 font-semibold">Speaker diarization</h4> | |
| <p class="text-sm text-gray-600 mt-2">Differentiate speakers in meetings so transcripts label speakers/segments automatically.</p> | |
| </article> | |
| </div> | |
| </section> | |
| <section id="how" class="mt-14"> | |
| <h2 class="text-2xl font-bold">How it works</h2> | |
| <div class="mt-4 grid md:grid-cols-3 gap-6"> | |
| <div class="col-span-2 bg-white p-6 rounded-lg shadow-sm"> | |
| <h3 class="font-semibold">Architecture (high level)</h3> | |
| <ol class="list-decimal list-inside text-gray-600 mt-3 space-y-2 text-sm"> | |
| <li>Client captures audio (microphone or upload) and sends 5s chunks to the server via WebSocket / fetch.</li> | |
| <li>Server stores, optionally concatenates chunks and runs an ASR model (eg. Whisper, faster-whisper) in streaming mode.</li> | |
| <li>Speaker diarization runs (pyannote) to assign speaker labels to segments.</li> | |
| <li>Transcribed segments + speaker labels are pushed to the client and shown live.</li> | |
| <li>User can download the full transcript or copy segments.</li> | |
| </ol> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <h3 class="font-semibold">Quick tips</h3> | |
| <ul class="text-sm text-gray-600 mt-3 list-disc list-inside space-y-2"> | |
| <li>Tune chunk-length (5s is a good start) for latency vs accuracy tradeoff.</li> | |
| <li>Run diarization asynchronously to avoid blocking transcription if you need lower latency.</li> | |
| <li>Provide a "finalize" button so the server can merge chunks and run a final pass for improved accuracy.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="deploy" class="mt-14"> | |
| <h2 class="text-2xl font-bold">Deploy & run</h2> | |
| <div class="mt-4 bg-white p-6 rounded-lg shadow-sm text-sm text-gray-700"> | |
| <p>Typical steps to run locally or on a VM:</p> | |
| <pre class="mt-3 bg-gray-100 p-3 rounded text-xs overflow-auto"># 1. create venv | |
| python -m venv .venv | |
| source .venv/bin/activate # or .\\venv\\Scripts\\activate on Windows | |
| # 2. install requirements | |
| pip install -r requirements.txt | |
| # 3. run app(s) | |
| python app.py # live recorder | |
| python app2.py # upload-based transcription | |
| # 4. open in browser | |
| http://localhost:5000/index2.html | |
| http://localhost:5000/index2_upload.html | |
| </pre> | |
| <p class="mt-3">If you want a single Flask app with a landing page route, add this snippet to your Flask app:</p> | |
| <pre class="mt-3 bg-gray-100 p-3 rounded text-xs overflow-auto">@app.route('/') | |
| def landing(): | |
| return render_template('landing.html') | |
| </pre> | |
| </div> | |
| </section> | |
| <section id="try" class="mt-14"> | |
| <h2 class="text-2xl font-bold">Try it now</h2> | |
| <div class="mt-4 flex flex-col md:flex-row gap-4"> | |
| <a href="/live" class="px-4 py-3 rounded-lg bg-indigo-600 text-white">Open Live Recorder</a> | |
| <a href="/upload" class="px-4 py-3 rounded-lg border">Upload & Transcribe</a> | |
| <a href="#deploy" class="px-4 py-3 rounded-lg border">Deployment instructions</a> | |
| </div> | |
| </section> | |
| <!-- <footer class="mt-16 text-center text-sm text-gray-500 pb-8"> | |
| Built with ❤️ — Add your logo, links, and analytics here. | |
| </footer> --> | |
| </main> | |
| <script> | |
| // tiny menu toggle for mobile | |
| const menuBtn = document.getElementById('menuBtn'); | |
| menuBtn && menuBtn.addEventListener('click', ()=>{ | |
| alert('Use the links on the page: Features, How it works, Deploy, Try it now'); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |