🎙️ Building a Speech-to-Text Web App with Grammar Correction in React & FastAPI

🎙️ Building a Speech-to-Text Web App with Grammar Correction in React & FastAPI #Python #Speech-To-Text #React.js #javascript #FastAPI #WebSpeechAPI In this blog, we’ll walk through how to build a Speech-to-Text (STT) application using React.js for the frontend and FastAPI for the backend. Our app includes features like: Let’s dive in! ⚙️ Tech Stack 🎯 Features Overview FeatureDescription🎤 Mic ToggleStart/Stop voice transcription✍️ Grammar FixSend transcript to backend for corrections⏱️ Silence DetectionAutomatically stops mic after 30 seconds of no input⌨️ Live TextTranscription updates in real-time🔡 PunctuationAdds punctuation post-processing♻️ Clear & CopyOptions to clear or copy transcript 🧠 How It Works: Flow 🧩 Frontend Logic (React + Web Speech API) We use the Web Speech API's SpeechRecognition interface to handle voice input. A useRef is used to hold the recognition instance and manage its state. 🔄 Live Transcription 🛑 Auto Stop on Silence (30 sec) We track user input and reset a timeout whenever speech is detected. If no input is received for 30 seconds, we stop the mic automatically. 🔤 Punctuation Post-Processing Before sending the transcript to the backend, we lightly correct punctuation using simple JS rules to enhance readability. 🛠️ Backend: FastAPI Grammar Correction API (Conceptual Overview) To enhance the transcription output, we developed a backend service using FastAPI that performs grammar correction on the raw speech-to-text input. This helps ensure the final transcript is both grammatically accurate and readable. 🧩 Key Components: 🧠 Architecture Logic: ⚙️ Handling Paragraphs and Structure Instead of fixing grammar sentence-by-sentence, the backend preserves paragraph-level structure. This is done by splitting on double newlines (\n\n) and processing each paragraph individually to maintain formatting in the final output. 🧵 Non-Blocking Correction with AsyncIO Grammar correction using a Transformer-based model like Gramformer can be compute-heavy. To avoid blocking FastAPI's main event loop, each correction job is offloaded to a thread pool executor, keeping the API fast and responsive. 🔐 CORS and Device Management 📌 API Contract Summary MethodEndpointPurposePOST/fix-grammarCorrects grammar in raw text Expected Request: Expected Response: 🔍 Challenges Faced 💡 Future Improvements ✅ Final Thoughts This project demonstrates how speech recognition, NLP, and frontend UX can come together to create a powerful and helpful web app. Whether you're building for accessibility, productivity, or education — this architecture is lightweight, scalable, and practical. 🔗 GitHub Links:

🎙️ Building a Speech-to-Text Web App with Grammar Correction in React & FastAPI

Topics included

Social.
Snapshot.

Explore similar content

🎙️ Building a Speech-to-Text Web App with Grammar Correction in React & FastAPI

Topics included

Social.Snapshot.

Explore similar content

Social.
Snapshot.