FreeScribe — ML-Powered Transcription & Translation React Web App

---

Project Summary

FreeScribe is a modern, open-source transcription and translation web application that leverages on-device machine learning models, running entirely in your browser using Web Workers. Users can record or upload audio, transcribe speech to text, translate between languages, and export the results — all with privacy and speed, without sending data to any backend server.

• Live demo: https://free-scribe-arnob.vercel.app/

---

Table of Contents

• Project Summary
• Features
• Technology Stack
• Project Structure
• How It Works
  • Web Worker Architecture
  • Machine Learning Model
• Getting Started
  • Installation
  • Running Locally
• Usage Walkthrough
• Teaching Content & Examples
• Keywords
• Conclusion
• License

---

Features

• 🎙️ Audio Input: Record live or upload MP3/WAV files for transcription.
• ✍️ Transcription: Converts speech to text using ML models (OpenAI Whisper).
• 🌎 Translation: Translate transcribed text into multiple languages.
• ⚡ Runs Locally: All ML inference runs in-browser via Web Workers for privacy and speed.
• 💾 Export: Download or copy the resulting text.
• 🚀 Modern UI: Built with React, Vite, and TailwindCSS.
• 💡 No Cost: 100% free and open-source.

---

Technology Stack

• Frontend: React 18, Vite, TailwindCSS
• Web Worker ML: @xenova/transformers
• Transcription Model: OpenAI Whisper (via transformers.js)
• Other: ESLint, PostCSS, modern ES2020+ JavaScript

---

Project Structure

/
├── public/
│   └── vite.svg           # App icon
├── src/
│   ├── components/
│   │   ├── Header.jsx     # Top navigation and branding
│   │   ├── Footer.jsx     # Footer
│   │   ├── HomePage.jsx   # Landing/upload UI
│   │   ├── FileDisplay.jsx# Audio file display and controls
│   │   ├── Information.jsx# Output display
│   │   └── Transcribing.jsx # Loading/transcribing UI
│   ├── utils/
│   │   ├── presets.js     # Worker message types, language codes, model names
│   │   └── whisper.worker.js # Main ML Web Worker logic
│   ├── App.jsx            # Main application logic
│   ├── main.jsx           # Entry point
│   └── index.css          # Tailwind and custom styles
├── index.html             # HTML template
├── package.json           # Dependencies & scripts
└── ... (config files)

---

How It Works

Web Worker Architecture

• The app delegates heavy ML inference to a Web Worker (whisper.worker.js). This prevents UI blocking and ensures smooth user experience.
• The worker receives audio data, loads the ML model (Whisper), and performs transcription/translation asynchronously.
• Communication uses structured messages (see presets.js for message types).

Machine Learning Model

• Transcription uses the OpenAI Whisper model, via @xenova/transformers, running entirely in-browser (no server needed).
• Translation is performed using Whisper’s multilingual capabilities and language codes defined in presets.js.
• Model progress and results are streamed back to the main app for display.

---

Getting Started

Installation

1. Clone the repo:

   git clone https://github.com/arnobt78/FreeScribe-Transcription-Translation-ML-App--ReactVite.git
   cd FreeScribe-Transcription-Translation-ML-App--ReactVite

2. Install Node.js:
   Download and install from nodejs.org.

3. Install dependencies:

   npm install

4. Install Transformers.js:

   npm i @xenova/transformers

Running Locally

Start the development server:

npm run dev

Open http://localhost:5173/ in your browser.

---

Usage Walkthrough

1. Home Screen:
   Select to record audio or upload an MP3/WAV file.

2. Audio Processing:
   Once uploaded or recorded, the file is displayed. Click "Transcribe" to start.

3. ML Inference:
   The app loads the Whisper model in a web worker and processes your audio.

4. View & Translate:
   The transcribed text appears. Use translation options to convert it into another language.

5. Export or Copy:
   Download the text as a file or copy it to your clipboard.

---

Teaching Content & Examples

Example: Adding a New Language

To add a new translation language, extend the LANGUAGES object in src/utils/presets.js:

export const LANGUAGES = {
  ...,
  "Spanish": "spa_Latn",
  // Add more as needed
};

Example: Using the Web Worker

The worker is initialized in App.jsx:

worker.current = new Worker(new URL('./utils/whisper.worker.js', import.meta.url), { type: 'module' });
worker.current.postMessage({
  type: MessageTypes.INFERENCE_REQUEST,
  audio,
  model_name: 'openai/whisper-tiny.en'
});

The worker receives audio, runs the model, and sends back results via postMessage.

---

Keywords

• Transcription
• Translation
• Machine Learning
• React
• Vite
• TailwindCSS
• Web Worker
• OpenAI Whisper
• Speech Recognition
• @xenova/transformers
• In-browser ML
• Audio Processing

---

Conclusion

FreeScribe streamlines advanced speech-to-text and language translation—directly in your browser, for free. Powered by modern frontend tools and the latest open-source ML models, it’s a practical, privacy-respecting alternative to expensive SaaS solutions.

---

License

MIT License. © 2030 arnobt78

---