Whisper Frontend

A React web application that provides an interface for OpenAI's Whisper speech-to-text services. Supports audio transcription and translation with multiple file formats.

Features

• Transcription: Convert speech to text in the original language
• Translation: Convert speech to English from any language
• File Upload: Drag-and-drop interface with support for audio and video formats
• Modern Stack: React 19, TypeScript, Vite, and Tailwind CSS
• Production Ready: Docker containerization with optimized builds

Quick Start

Prerequisites

• Node.js: Version 24.6.0
• npm: Version 11.5.1 or later
• Backend Service: Whisper API server running on port 8000

Installation

Option 1: Docker (Recommended)

# Clone the repository
git clone https://github.com/duytechie/whisper-frontend.git
cd whisper-frontend

# Build and run with Docker
docker build -t whisper-frontend:latest .
docker run -p 8080:80 whisper-frontend

# Application will be available at http://localhost:8080

Option 2: Local Development Setup

# Clone the repository
git clone https://github.com/duytechie/whisper-frontend.git
cd whisper-frontend

# Install dependencies
npm install

# Start development server
npm run dev

# Application will be available at http://localhost:5173

Usage

1. Start the application and open in your browser
2. Upload an audio file via drag-and-drop or file picker
3. Choose processing mode (Transcribe or Translate)
4. View results in browser alert

Supported File Formats

Type	Formats
Audio	.mp3, .wav, .mpga, .webm
Video	.mp4, .mpeg
Max Size	100MB per file

Technology Stack

Frontend

• React 19.1.1 - Modern React with latest features
• TypeScript 5.8.3 - Type-safe development
• Vite 7.1.2 - Fast build tool and dev server
• Tailwind CSS 4.1.12 - Utility-first styling

Development Tools

• ESLint 9.33.0 - Code linting and quality
• Node.js 24.6.0 - Runtime environment

Deployment

• Docker - Containerized deployment
• Nginx - Production web server

Development

Available Scripts

npm run dev      # Start development server
npm run build    # Build for production
npm run preview  # Preview production build
npm run lint     # Run ESLint

Deployment

docker build -t whisper-frontend:latest .
docker run -p 8080:80 whisper-frontend

Documentation

• Documentation Overview - Complete documentation guide
• Architecture Guide - System design and technical decisions
• API Documentation - Backend integration and endpoints
• Component Reference - React component documentation
• Deployment Guide - Setup, build, and deployment instructions