AI Speech-to-Text Webbapp: Skapa Applikationen
Den här guiden går igenom hur du bygger samtliga filer för vår AI-drivna tal-till-text-webbapplikation. Vi skapar ett Flask-backend som integrerar Whisper samt ett modernt webb-gränssnitt där användare kan spela in och transkribera ljud.
Arkitekturöversikt
- Flask-backend - hanterar HTTP-förfrågningar och kommunicerar med modellen
- Whisper-modell - utför taligenkänningen
- Webb-frontend - ger användargränssnitt för inspelning och visning
- Ljudhantering - spelar in, kodar och skickar ljudet till backend
Backend (app.py)
# Se originalfilen för fullständig kod (app.py)
Koden skapar en Flask-app, laddar Whisper-modellen och exponerar ett /transcribe-end-point som tar emot WAV-filer, transkriberar dem och returnerar texten i JSON-format.
HTML-mall (index.html)
<!-- Se originalfilen för fullständig index.html -->
Mallen innehåller en inspelningsknapp, statusmeddelanden, en progress-bar samt en textarea som visar transkriptionen.
CSS (style.css)
/* Se originalfilen för fullständig style.css */
Stilen ger en ren och responsiv layout med visuell feedback när inspelning pågår.
JavaScript (main.js)
// Se originalfilen för fullständig main.js
JavaScript-koden hanterar MediaRecorder-API:t, skickar ljudet till servern och uppdaterar användargränssnittet beroende på status.
Valfri inspelningsmodul (recorder.py)
# Se originalfilen för fullständig recorder.py
Ger mer finmaskig kontroll över ljudinspelning för avancerade användningsfall.
Kör applikationen
Starta servern med python app.py och öppna http://127.0.0.1:5000/ i din webbläsare.
Slutsats
Nu har vi skapat all grundläggande funktionalitet. I nästa del sammanfattar vi projektet och diskuterar framtida förbättringar.