Upload 49 files

DEPLOY.md

@@ -0,0 +1,160 @@
+# Deploy Guide: Render (Backend) + Vercel (Frontend)
+
+A complete, copy-paste guide to launch this project using free tiers.
+
+- Frontend: React + Vite → Vercel (static site)
+- Backend: FastAPI + Transformers → Render (free web service)
+
+---
+
+## 1) Prerequisites
+
+- GitHub repo: https://github.com/rashid714/updated-translator
+- Accounts: Render (free), Vercel (free)
+
+Optional (local dev): Node.js 18+, Python 3.11 or 3.13
+
+---
+
+## 2) Local run (optional)
+
+```bash
+# Python env
+python3 -m venv .venv
+source .venv/bin/activate
+pip install -r server/requirements.txt
+
+# Frontend deps
+npm install
+
+# Start both (Vite + FastAPI)
+npm run dev:all
+# Vite: http://localhost:5174
+# API:  http://127.0.0.1:8000  (GET /health)
+```
+
+Tip: In Host view, click "Preload Model" once to warm the translator.
+
+---
+
+## 3) Backend on Render (Free)
+
+Render builds and hosts the FastAPI app. Free plan sleeps when idle; next request wakes it.
+
+Two choices:
+
+### A) Blueprint (recommended)
+
+This repo includes `render.yaml` and `runtime.txt`.
+
+1. Render → New → Blueprint → Connect repo → choose `updated-translator` → Apply
+2. Wait for deploy. First translation may take longer while weights download.
+
+What it sets:
+- Build: `pip install -r server/requirements.txt`
+- Start: `uvicorn server.app:app --host 0.0.0.0 --port $PORT`
+- Health Check: `/health`
+- Python: 3.11.9 (via runtime.txt)
+
+### B) Manual Web Service
+
+1. New → Web Service → connect repo → Branch `main`
+2. Root: `.`  |  Runtime: Python
+3. Build:
+   ```bash
+   pip install -r server/requirements.txt
+   ```
+4. Start:
+   ```bash
+   uvicorn server.app:app --host 0.0.0.0 --port $PORT
+   ```
+5. Health Check Path: `/health`  |  Plan: Free
+
+After deploy, test:
+```bash
+curl -sS https://<service>.onrender.com/health
+# -> {"status":"ok"}
+```
+
+Notes:
+- Cold start: free services sleep when idle; first request wakes them.
+- First translation after deploy may download model weights; subsequent calls are fast.
+
+---
+
+## 4) Frontend on Vercel (Free)
+
+1. New Project → Import GitHub → `updated-translator`
+2. Framework: Vite
+3. Build Command: `npm run build`  |  Output: `dist`
+4. Environment Variables:
+   - `VITE_API_URL = https://<service>.onrender.com`
+5. Deploy. Open your Vercel URL (e.g., `https://updated-translator.vercel.app`).
+
+---
+
+## 5) Troubleshooting
+
+- Tokenizers/torch build errors on Render
+  - Keep Python 3.11 (runtime.txt). `server/requirements.txt` pins versions with prebuilt wheels.
+
+- 502/timeout on first call
+  - Likely cold start / first-time model download. Wait, then retry. Use “Preload Model”.
+
+- CORS errors
+  - `server/app.py` enables permissive CORS for demo. If you tighten it, add your Vercel domain.
+
+- Speech recording not working
+  - Some browsers don’t support Web Speech API. Use Manual Input fallback.
+
+- Duplicate translation shown
+  - App suppresses translations equal to the original and avoids saving duplicates.
+
+---
+
+## 6) Optional: Single-service Docker on Render (frontend + API + Whisper)
+
+If you prefer one Render service that serves both the UI and the API (and enables Whisper STT), switch to the Docker blueprint:
+
+1. Ensure your Render blueprint `render.yaml` has:
+
+```
+services:
+  - type: web
+    name: updated-translator
+    env: docker
+    dockerfilePath: ./Dockerfile
+    healthCheckPath: /api/health
+    envVars:
+      - key: STT_ENABLED
+        value: "1"
+      - key: WHISPER_MODEL
+        value: "tiny"
+```
+
+2. Deploy via Render → New → Blueprint → select repo.
+
+3. Verify:
+
+```
+curl -sS https://<service>.onrender.com/api/health
+curl -sS https://<service>.onrender.com/api/provider
+```
+
+Frontend will call same-origin `/api/*` automatically. Upload control for audio appears when STT is available.
+
+---
+
+## 7) Useful endpoints
+
+- `GET /api/health` → `{ "status": "ok" }`
+- `POST /api/translate`
+  - Body: `{ "text": "...", "source_language": "ur", "target_language": "en" }`
+  - Response: `{ "translated_text": "..." }`
+- `POST /api/preload`
+  - Body: `{ "source_language": "ur", "target_language": "en" }`
+  - Response: `{ "ok": true, "model": "Helsinki-NLP/opus-mt-ur-en" }`
+
+---
+
+That’s it—Render for the API, Vercel for the UI, both on free plans. If you prefer Hugging Face Spaces for the backend, I can add a Dockerfile-based Space setup as well.

DEPLOY_HF.md

@@ -0,0 +1,49 @@
+# Deploy to Hugging Face Spaces (Docker)
+
+This Space bundles the React frontend and FastAPI backend into a single container so you can share a link publicly for free.
+
+## Prerequisites
+- Hugging Face account: https://huggingface.co/join
+- Create a new Space (type: Docker)
+
+## Files in this repo that matter
+- `Dockerfile` – multi-stage build: builds the Vite app and runs FastAPI with Uvicorn
+- `server/requirements.txt` – Python deps (Transformers, Torch, FastAPI, etc.)
+- `server/app.py` – API (`/health`, `/translate`, `/preload`) and serves the built frontend
+- `src/*` – React app; `src/lib/api.ts` defaults to same-origin API
+
+## Steps
+1. Create a new Space
+   - Choose "Docker" as SDK
+   - Name it, e.g., `your-username/live-translator`
+2. Push the project files to the Space
+   - Copy this repository’s files into the Space or add it as a remote and push
+   - On the Space page, set the description by pasting the contents of `SPACE_README.md` from this repo into the Space README
+3. Configure Space secrets and vars (optional but recommended)
+   - Core:
+     - `STT_ENABLED=1` – enable server-side transcription
+     - `WHISPER_MODEL=small` – CPU-friendly (use `medium` for better accuracy; `large-v3` requires GPU)
+   - Optional:
+     - `ALLOWED_ORIGINS` – comma-separated CORS origins (defaults to `*`)
+     - `MAX_TEXT_CHARS` – per-request limit (default `5000`)
+     - `REQUESTS_PER_MINUTE` – simple per-IP rate limit (default `60`)
+     - `TRANSLATION_PROVIDER` – `marian` (default) or `hf`
+     - `HUGGINGFACE_API_TOKEN` – required if using `TRANSLATION_PROVIDER=hf`
+4. Build starts automatically
+   - The Space will build the Docker image and start the app on `$PORT` (7860 by default)
+   - The frontend is served from `/` and API is available at `/translate`, `/preload`, `/health`
+   - Metrics at `/metrics` (Prometheus format)
+
+## Notes
+- Initial requests may be slow while models download (cold start). Use the Preload button or call `/preload` to warm models.
+- The free CPU tier is best-effort and may throttle under heavy traffic.
+- For best transcription accuracy on free CPU, try `WHISPER_MODEL=medium` (slower). For maximum quality with lower latency, use a GPU Space and `large-v3`.
+- For broader translation quality, consider the `hf` provider (e.g., NLLB-200), but expect higher latency on CPU.
+
+## Try locally
+```
+# Build and run like HF Spaces would
+docker build -t live-translator .
+docker run -it --rm -p 7860:7860 live-translator
+# then open http://localhost:7860
+```

Dockerfile

@@ -0,0 +1,46 @@
+# Multi-stage build for Hugging Face Spaces (Docker)
+
+# --- Frontend build stage ---
+FROM node:22-alpine AS frontend
+WORKDIR /frontend
+COPY package.json package-lock.json* pnpm-lock.yaml* yarn.lock* ./
+# Prefer npm; if lockfile missing, npm will still install using package.json
+RUN npm ci || npm install
+COPY . .
+RUN npm run build
+
+# --- Backend runtime stage ---
+FROM python:3.11-slim AS runtime
+ENV PYTHONDONTWRITEBYTECODE=1 \
+    PYTHONUNBUFFERED=1 \
+    PIP_NO_CACHE_DIR=1 \
+    HF_HOME=/root/.cache/huggingface \
+    TRANSFORMERS_CACHE=/root/.cache/huggingface/transformers
+WORKDIR /app
+
+# System deps (git and curl handy for troubleshooting; remove if you want smaller image)
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    git curl ffmpeg && \
+    rm -rf /var/lib/apt/lists/*
+
+# Install Python deps
+COPY server/requirements.txt ./server/requirements.txt
+RUN python -m pip install --upgrade pip && \
+    pip install --no-cache-dir -r server/requirements.txt
+
+# Copy backend and built frontend
+COPY server ./server
+COPY --from=frontend /frontend/dist ./dist
+
+# Preload all direct MarianMT models for instant demo reliability
+RUN python3 -c "from transformers import pipeline; models=['Helsinki-NLP/opus-mt-en-hi','Helsinki-NLP/opus-mt-hi-en','Helsinki-NLP/opus-mt-en-zh','Helsinki-NLP/opus-mt-zh-en','Helsinki-NLP/opus-mt-en-ms','Helsinki-NLP/opus-mt-ms-en','Helsinki-NLP/opus-mt-en-id','Helsinki-NLP/opus-mt-id-en','Helsinki-NLP/opus-mt-en-ar','Helsinki-NLP/opus-mt-ar-en','Helsinki-NLP/opus-mt-en-ur','Helsinki-NLP/opus-mt-ur-en']; [pipeline('translation', model=m, device=-1) for m in models]"
+
+# Optional: install STT dependencies (Whisper) to enable /transcribe when STT_ENABLED=1
+RUN pip install --no-cache-dir -r server/requirements-stt.txt || true
+
+# Default port for HF Spaces is provided via PORT env
+ENV PORT=7860
+EXPOSE 7860
+
+# Use 0.0.0.0 to be externally reachable in container
+CMD ["/bin/sh", "-lc", "python -m uvicorn server.app:app --host 0.0.0.0 --port ${PORT:-7860}"]

README.md

@@ -1,10 +1,124 @@
 ---
-title: Livetranslator
-emoji: 👁
-colorFrom: indigo
-colorTo: gray
+title: Live Translator
+emoji: 🌍
+colorFrom: blue
+colorTo: green
 sdk: docker
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Live Translator (FastAPI + React)
+
+This Space serves a production build of the React frontend and a FastAPI backend in one container. No external API tokens are required. Models download on first use and are cached.
+
+## How it works
+- Frontend: Vite/React compiled to `dist/` (built in the Docker image)
+- Backend: FastAPI (Uvicorn) exposes `/translate`, `/preload`, `/health` and serves the static `dist/`
+- Same-origin requests in production, so no CORS/issues
+
+## Endpoints
+- `GET /health` – basic health
+- `POST /translate` – { text, source_language, target_language }
+- `POST /preload` – warm up models for a language pair
+
+## Notes
+- First translation for a pair may take up to ~60s while models download/warm.
+- For Malay→English, the app auto-tries `ms/en`, `id/en`, and English-bridge fallbacks.
+---
+title: Live Translator (Docker)
+emoji: 🗣️
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+pinned: false
+---
+
+# Live Translation (Full Stack)
+
+[![Deploy to Hugging Face Spaces](https://img.shields.io/badge/Deploy%20to-Hugging%20Face%20Spaces-yellow?logo=huggingface)](https://huggingface.co/new-space)
+
+Use the button to create a Docker Space, then follow the quick steps below (or see DEPLOY_HF.md). You do not need Vercel when deploying on Spaces (the container serves frontend + backend together).
+
+All-in-one app for live transcription and translation:
+- Frontend: React + Vite (static files)
+- Backend: FastAPI (translation, optional transcription, metrics)
+- One Docker image serves both frontend and API
+
+## Run locally (frontend only)
+
+```bash
+npm install
+npm run dev
+```
+
+## Build (frontend)
+
+```bash
+npm run build
+```
+The static output is generated in `dist/`.
+
+## Zero-cost deploy (Hugging Face Spaces — Docker)
+
+The Dockerfile builds the frontend and runs the FastAPI backend, serving both from one URL.
+
+1) Create a new Space
+- Type: Docker • Visibility: Public
+
+2) Push this repo to the Space
+- Ensure the root contains: `Dockerfile`, `server/`, `src/`, `index.html`, `vite.config.ts`.
+
+3) Set variables (Space Settings → Variables)
+- `STT_ENABLED=1`
+- `WHISPER_MODEL=small` (CPU-friendly; use `medium` for better accuracy if latency is OK)
+- Optional: `REQUESTS_PER_MINUTE=60`, `ALLOWED_ORIGINS=*`
+
+4) Space page description
+- Copy the contents of `SPACE_README.md` into your Space “README.md” (Settings → Files) so visitors see simple usage instructions.
+
+4) Build & run
+- Spaces will build and start the app. First requests download models.
+- Use the Host view “Preload Model” to warm caches.
+
+5) Use it
+- Open your Space URL (frontend + API on the same origin).
+- Host view: Start Recording (sentence-level), Upload audio (with Language hint), Preload model.
+
+Metrics: GET `/metrics` (Prometheus format).
+
+## Notes
+- Routing uses URL hash (e.g., `#/host/123`), so no special rewrites are needed.
+- To reset local data, clear these keys in DevTools > Application > Local Storage:
+  - `lt_groups`, `lt_group_members`, `lt_segments`
+- Temporary auth bypass is enabled in `src/contexts/AuthContext.tsx` (toggle `BYPASS_AUTH`).
+
+## Optional local translation service (Python)
+
+For live translation using small MarianMT models, run a local FastAPI server:
+
+1) Create and activate a virtual environment (recommended):
+
+```bash
+python3 -m venv .venv
+source .venv/bin/activate
+```
+
+2) Install requirements and start the server:
+
+```bash
+pip install -r server/requirements.txt
+uvicorn server.app:app --reload --host 127.0.0.1 --port 8000
+```
+
+3) Point the frontend to it by creating a `.env` file:
+
+```bash
+cp .env.example .env
+```
+
+Supported pairs include en<->es, en<->fr, en<->de, en<->ar, en<->ur, en<->hi, en<->zh via Helsinki-NLP MarianMT, with robust Malay fallbacks.
+If the server isn’t running or a pair isn’t supported, the app gracefully degrades.
+
+## Alternative free split (Render + Vercel)
+
+See `DEPLOY.md` for a step-by-step guide to host the API on Render and the frontend on Vercel. Set `VITE_API_URL` in Vercel to your Render service URL.

SPACE_README.md

@@ -0,0 +1,29 @@
+# Live Translation App
+
+This Space serves both the frontend (React + Vite build) and backend (FastAPI) from a single Docker container.
+
+## How to use
+
+- Open the Space URL. The UI loads from `/` and the API is same-origin.
+- Host view:
+  - Start Recording for sentence-level live transcription
+  - Upload audio for server-side transcription (use the Language hint for accuracy)
+  - Click "Preload Model" to warm the translator
+
+## Endpoints
+
+- `GET /health` → `{ "status": "ok" }`
+- `POST /translate` → `{ text, source_language, target_language }`
+- `POST /preload` → `{ source_language, target_language }`
+- `GET /metrics` → Prometheus metrics
+
+## Space variables (recommended)
+
+- `STT_ENABLED=1` – enable server-side transcription
+- `WHISPER_MODEL=small` – good for CPU (use `medium` for better accuracy; `large-v3` requires GPU)
+- Optional: `REQUESTS_PER_MINUTE=60`, `ALLOWED_ORIGINS=*`
+
+## Notes
+
+- First requests may download models. Use Preload to warm up.
+- For best accuracy on fast or unclear audio, set `WHISPER_MODEL=medium` (CPU) or upgrade to a GPU Space and use `large-v3`.

eslint.config.js

@@ -0,0 +1,31 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+      // Relax strictness for demo speed: allow 'any' and ignore unused vars.
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unused-vars': 'off',
+    },
+  }
+);

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Real-time Transcription Translation Streaming</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,38 @@
+{
+  "name": "vite-react-typescript-starter",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "server": "sh -c 'PY=\"./.venv/bin/python\"; \"$PY\" -m uvicorn server.app:app --host 127.0.0.1 --port 8000'",
+    "dev:all": "concurrently -k -n WEB,API -c blue,magenta \"npm run dev\" \"npm run server\"",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit -p tsconfig.app.json"
+  },
+  "dependencies": {
+    "@supabase/supabase-js": "^2.57.4",
+    "lucide-react": "^0.344.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.9.1",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.18",
+    "concurrently": "^9.2.1",
+    "eslint": "^9.9.1",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.11",
+    "globals": "^15.9.0",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.3.0",
+    "vite": "^5.4.2"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

render.yaml

@@ -0,0 +1,17 @@
+services:
+  - type: web
+    name: updated-translator
+    env: docker
+    plan: free
+    dockerfilePath: ./Dockerfile
+    autoDeploy: true
+    healthCheckPath: /api/health
+    envVars:
+      - key: REQUESTS_PER_MINUTE
+        value: "60"
+      - key: MAX_TEXT_CHARS
+        value: "5000"
+      - key: STT_ENABLED
+        value: "1"
+      - key: WHISPER_MODEL
+        value: "tiny"

runtime.txt

@@ -0,0 +1 @@
+python-3.11.9

server/README.md

@@ -0,0 +1,92 @@
+# Backend (FastAPI) — Local Dev and Optional STT
+
+This backend powers translation and (optionally) speech transcription.
+
+## Install (core)
+
+Core features (translate, preload, health) work without system packages:
+
+1. Create/activate your virtualenv
+2. Install core dependencies:
+
+```
+pip install -r server/requirements.txt
+```
+
+
+## Optional: Enable Hugging Face Inference API fallback
+
+If local Marian models are unavailable or restricted, you can enable cloud translation fallback for world-class reliability:
+
+1. Get a Hugging Face API token: https://huggingface.co/settings/tokens
+2. Set the token in your environment:
+   - For local dev: `export HUGGINGFACE_API_TOKEN=your_token_here`
+   - For Docker: add to your Docker run command:
+     `-e HUGGINGFACE_API_TOKEN=your_token_here`
+3. The backend will automatically use the Hugging Face Inference API for translation if Marian is unavailable.
+
+## Optional: Enable Speech-to-Text (STT)
+
+Two options:
+
+1) Production (recommended): Docker/Hugging Face Space
+
+- The provided `Dockerfile` installs FFmpeg and STT deps and sets `STT_ENABLED=1`.
+- Build and run:
+
+```
+docker build -t live-translate .
+docker run -p 7860:7860 -e PORT=7860 live-translate
+```
+
+2) Native macOS dev
+
+- Install Homebrew and system prereqs:
+  - `brew install pkg-config ffmpeg`
+- Install Python deps:
+  - `pip install -r server/requirements-stt.txt`
+- Enable the endpoint:
+  - `export STT_ENABLED=1`
+
+When STT is disabled, `/transcribe` returns 503 and the UI hides the upload control.
+
+Whisper model size:
+
+- Control via `WHISPER_MODEL` env: `tiny`, `base`, `small`, `medium`, `large-v3`.
+- In Docker we default to `medium` for better accuracy. You can override:
+
+```
+docker run -p 7860:7860 -e PORT=7860 -e WHISPER_MODEL=small live-translate
+```
+
+## Run
+
+```
+uvicorn server.app:app --host 127.0.0.1 --port 8000 --reload
+```
+
+Health check:
+
+- GET http://127.0.0.1:8000/health => `{ "status": "ok" }`
+
+## Metrics (optional)
+
+If `prometheus-client` is installed (it is in `requirements.txt`), the API exposes Prometheus metrics at:
+
+- GET http://127.0.0.1:8000/metrics (content type `text/plain; version=0.0.4`)
+
+Includes:
+
+- `http_requests_total{method,path,status}` and `http_request_duration_seconds{method,path}`
+- `translations_total{src,tgt,status}` and `translation_duration_seconds{src,tgt}`
+- `preload_total{src,tgt,status}` and `preload_duration_seconds{src,tgt}`
+- `transcribe_total{status}` and `transcribe_duration_seconds`
+
+## Frontend tip
+
+In the Host view, you can select a “Language hint” for audio uploads. Choosing the correct source language improves transcription on fast or unclear speech.
+
+## Notes
+
+- In production (e.g., Docker or HF Spaces), the image includes FFmpeg so STT can be enabled there without extra steps.
+- If you prefer not to install Homebrew locally, skip STT; the frontend falls back to browser SpeechRecognition and manual input.

server/__init__.py

@@ -0,0 +1 @@
+# Make 'server' a package for reliable relative imports and better editor support.

server/app.py

@@ -0,0 +1,433 @@
+
+import logging
+import time
+import uuid
+from fastapi import FastAPI, HTTPException, Request, UploadFile, File, Form, WebSocket, WebSocketDisconnect
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import PlainTextResponse
+from pydantic import BaseModel
+from typing import Optional, Tuple, List, Dict, Any
+import tempfile
+import os
+
+from .config import settings
+from .providers.base import TranslationProvider
+from .providers.marian import MarianProvider
+try:
+    from langdetect import detect  # lightweight auto language detection
+except Exception:  # pragma: no cover
+    detect = None  # type: ignore
+
+app = FastAPI(title="Live Translation API", version="2.0")
+
+
+# Prometheus metrics (optional)
+try:  # pragma: no cover - optional dependency
+    from prometheus_client import Counter, Histogram, CONTENT_TYPE_LATEST, generate_latest
+    METRICS_ENABLED = True
+    # HTTP level metrics
+    HTTP_REQUESTS = Counter(
+        "http_requests_total",
+        "Total HTTP requests",
+        labelnames=("method", "path", "status"),
+    )
+    HTTP_REQUEST_DURATION = Histogram(
+        "http_request_duration_seconds",
+        "HTTP request duration in seconds",
+        labelnames=("method", "path"),
+        buckets=(0.01, 0.025, 0.05, 0.1, 0.25, 0.5, 1.0, 2.0, 5.0, float("inf")),
+    )
+    # Domain-specific metrics
+    TRANSLATIONS_TOTAL = Counter(
+        "translations_total",
+        "Number of translation requests",
+        labelnames=("src", "tgt", "status"),
+    )
+    TRANSLATION_DURATION = Histogram(
+        "translation_duration_seconds",
+        "Translation latency in seconds",
+        labelnames=("src", "tgt"),
+        buckets=(0.05, 0.1, 0.25, 0.5, 1.0, 2.0, 5.0, float("inf")),
+    )
+    PRELOAD_TOTAL = Counter(
+        "preload_total",
+        "Number of model preload requests",
+        labelnames=("src", "tgt", "status"),
+    )
+    PRELOAD_DURATION = Histogram(
+        "preload_duration_seconds",
+        "Model preload latency in seconds",
+        labelnames=("src", "tgt"),
+        buckets=(0.05, 0.1, 0.25, 0.5, 1.0, 2.0, 5.0, float("inf")),
+    )
+    TRANSCRIBE_TOTAL = Counter(
+        "transcribe_total",
+        "Number of audio transcription requests",
+        labelnames=("status",),
+    )
+    TRANSCRIBE_DURATION = Histogram(
+        "transcribe_duration_seconds",
+        "Transcription latency in seconds",
+        buckets=(0.25, 0.5, 1.0, 2.0, 5.0, 15.0, 30.0, float("inf")),
+    )
+except Exception:  # pragma: no cover - optional dependency
+    METRICS_ENABLED = False
+    Counter = Histogram = None  # type: ignore
+
+# Allow all origins for demo simplicity. Tighten for production.
+# If using wildcard origins, disable credentials to satisfy CORS rules.
+_allow_credentials = not (len(settings.allowed_origins) == 1 and settings.allowed_origins[0] == "*")
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=settings.allowed_origins,
+    allow_credentials=_allow_credentials,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+
+@app.middleware("http")
+async def _request_id_and_metrics(request: Request, call_next):
+    # Assign a request ID and collect HTTP metrics
+    request_id = uuid.uuid4().hex
+    request.state.request_id = request_id
+    method = request.method
+    # Use path template to avoid high-cardinality label values
+    route = request.scope.get("route")
+    path_tmpl = getattr(route, "path", request.url.path)
+    started = time.perf_counter()
+    status_code = 500
+    try:
+        response = await call_next(request)
+        status_code = response.status_code
+        response.headers["X-Request-ID"] = request_id
+        return response
+    except Exception:
+        status_code = 500
+        raise
+    finally:
+        if METRICS_ENABLED:
+            try:
+                HTTP_REQUESTS.labels(method=method, path=path_tmpl, status=str(status_code)).inc()
+                HTTP_REQUEST_DURATION.labels(method=method, path=path_tmpl).observe(time.perf_counter() - started)
+            except Exception:
+                pass
+
+
+class TranslateRequest(BaseModel):
+    text: str
+    source_language: str  # use "auto" to enable auto-detect when available
+    target_language: str
+
+
+class PreloadRequest(BaseModel):
+    source_language: str
+    target_language: str
+
+
+def _make_provider() -> TranslationProvider:
+    from server.config import settings
+    # Use Marian by default, fallback to Hugging Face Inference API if configured
+    try:
+        marian = MarianProvider()
+    except Exception:
+        marian = None
+    # Hugging Face Inference API fallback (if token provided)
+    hf_api_token = getattr(settings, "hf_api_token", None)
+    if hf_api_token:
+        try:
+            from server.providers.hf_inference import HFInferenceProvider
+            hf = HFInferenceProvider(api_token=hf_api_token)
+        except Exception:
+            hf = None
+    else:
+        hf = None
+    class RouterProvider(TranslationProvider):
+        def supports(self, src, tgt):
+            return True
+        def preload(self, src, tgt):
+            if marian and marian.supports(src, tgt):
+                return marian.preload(src, tgt)
+            if hf:
+                return hf.preload(src, tgt)
+            return False
+        def translate(self, text, src, tgt, max_length=None):
+            # Try Marian first
+            if marian:
+                try:
+                    result = marian.translate(text, src, tgt, max_length)
+                    if not result.startswith("[No model"):
+                        return result
+                except Exception:
+                    pass
+            # Fallback to Hugging Face Inference API
+            if hf:
+                try:
+                    return hf.translate(text, src, tgt, max_length)
+                except Exception:
+                    pass
+            return f"[No model for {src}->{tgt}] {text}"
+    return RouterProvider()
+
+provider: TranslationProvider = _make_provider()
+_whisper_model = None
+# STT route is disabled for local dev by default to avoid system deps.
+# Production images (Docker/HF Spaces) can re-enable it with full dependencies installed.
+
+
+@app.on_event("startup")
+def _warmup_startup():
+    # Do warmup asynchronously so /health is fast
+    import threading
+
+    def _bg():
+        try:
+            provider.preload("ms", "en")
+        except Exception:
+            pass
+        try:
+            provider.preload("en", "ms")
+        except Exception:
+            pass
+        try:
+            provider.preload("id", "en")
+        except Exception:
+            pass
+        try:
+            provider.preload("en", "id")
+        except Exception:
+            pass
+        try:
+            provider.preload("mul", "en")
+        except Exception:
+            pass
+        try:
+            provider.preload("en", "mul")
+        except Exception:
+            pass
+        try:
+            provider.preload("ur", "en")
+        except Exception:
+            pass
+        # Lazy import faster_whisper
+        global _whisper_model
+        try:
+            from faster_whisper import WhisperModel  # type: ignore
+            _whisper_model = WhisperModel(settings.whisper_model, device="cpu")
+        except Exception:
+            _whisper_model = None
+
+    threading.Thread(target=_bg, name="warmup", daemon=True).start()
+
+
+
+class _RateLimiter:
+    # Very small in-memory rate limiter; good enough for demo on a single instance
+    def __init__(self, rpm: int) -> None:
+        self.rpm = max(1, rpm)
+        self._hits: Dict[str, List[float]] = {}
+
+    def allow(self, key: str) -> bool:
+        now = time.time()
+        window = now - 60.0
+        q = self._hits.setdefault(key, [])
+        # Drop old
+        while q and q[0] < window:
+            q.pop(0)
+        if len(q) >= self.rpm:
+            return False
+        q.append(now)
+        return True
+
+
+_limiter = _RateLimiter(settings.requests_per_minute)
+
+
+@app.get("/health")
+@app.get("/api/health")
+def health():
+    return {"status": "ok"}
+
+
+@app.get("/provider")
+@app.get("/api/provider")
+def provider_info():
+    # Expose which translation backend is active for debugging
+    from server.config import settings as _s
+    return {"provider": _s.provider}
+
+
+if METRICS_ENABLED:
+    @app.get("/metrics")
+    @app.get("/api/metrics")
+    def metrics():  # pragma: no cover - simple exposition
+        try:
+            payload = generate_latest()
+            return PlainTextResponse(payload, media_type=CONTENT_TYPE_LATEST)
+        except Exception as e:
+            raise HTTPException(status_code=500, detail=f"Metrics error: {e}")
+
+
+@app.get("/stt_status")
+@app.get("/api/stt_status")
+def stt_status():
+    # Report if full STT is enabled (requires optional deps and flag)
+    available = False
+    try:
+        import importlib.util as _ils
+        has_multipart = _ils.find_spec("multipart") is not None
+        from server.config import settings as _s
+        available = bool(has_multipart and _s.stt_enabled)
+    except Exception:
+        available = False
+    return {"available": available}
+
+
+@app.post("/translate")
+@app.post("/api/translate")
+def translate(req: TranslateRequest, request: Request):
+    # rudimentary rate limit per client
+    ip = request.headers.get("x-forwarded-for", request.client.host if request.client else "?")
+    ip = ip.split(",")[0].strip()
+    if not _limiter.allow(f"tx:{ip}"):
+        raise HTTPException(status_code=429, detail="Rate limit exceeded")
+    text = req.text.strip()
+    src = req.source_language.lower()
+    tgt = req.target_language.lower()
+
+    # No translation needed
+    if not text:
+        return {"translated_text": ""}
+    if len(text) > settings.max_text_chars:
+        raise HTTPException(status_code=413, detail="Text too long")
+    if src == tgt and src != "auto":
+        return {"translated_text": text}
+
+    # Auto-detect source if requested and detector is available
+    if src == "auto" and detect is not None:
+        try:
+            src = detect(text) or src
+        except Exception:
+            pass
+
+    if src == tgt:
+        return {"translated_text": text}
+
+    if not provider.supports(src, tgt):
+        return {"translated_text": f"[No model for {src}->{tgt}] {text}"}
+
+    started = time.perf_counter()
+    _status_label = "ok"
+    try:
+        translated = provider.translate(text, src, tgt, max_length=max(64, len(text) + 8))
+    except Exception as e:
+        logging.exception("translation failed: %s", e)
+        _status_label = "error"
+        raise HTTPException(status_code=500, detail="Translation error")
+    finally:
+        elapsed_ms = (time.perf_counter() - started) * 1000
+        logging.info("translate %s->%s len=%d took=%.1fms", src, tgt, len(text), elapsed_ms)
+        if METRICS_ENABLED:
+            try:
+                TRANSLATIONS_TOTAL.labels(src=src, tgt=tgt, status=_status_label).inc()
+                TRANSLATION_DURATION.labels(src=src, tgt=tgt).observe(elapsed_ms / 1000.0)
+            except Exception:
+                pass
+    return {"translated_text": translated}
+
+
+@app.post("/preload")
+@app.post("/api/preload")
+def preload(req: PreloadRequest, request: Request):
+    ip = request.headers.get("x-forwarded-for", request.client.host if request.client else "?")
+    ip = ip.split(",")[0].strip()
+    if not _limiter.allow(f"pre:{ip}"):
+        raise HTTPException(status_code=429, detail="Rate limit exceeded")
+    src = req.source_language.lower()
+    tgt = req.target_language.lower()
+    if src == tgt:
+        # Nothing to preload if no translation required
+        return {"ok": True, "message": "no-op (src==tgt)"}
+    if not provider.supports(src, tgt):
+        return {"ok": False, "message": f"No model for {src}->{tgt}"}
+    started = time.perf_counter()
+    ok = provider.preload(src, tgt)
+    elapsed_s = time.perf_counter() - started
+    if METRICS_ENABLED:
+        try:
+            PRELOAD_TOTAL.labels(src=src, tgt=tgt, status="ok" if ok else "skip").inc()
+            PRELOAD_DURATION.labels(src=src, tgt=tgt).observe(elapsed_s)
+        except Exception:
+            pass
+    return {"ok": ok}
+
+
+# Conditionally register STT endpoint
+import importlib.util as _ils
+_has_multipart = _ils.find_spec("multipart") is not None
+if settings.stt_enabled and _has_multipart:
+    @app.post("/transcribe")
+    @app.post("/api/transcribe")
+    async def transcribe(request: Request, audio: UploadFile = File(...), language: Optional[str] = Form(None)):
+        ip = request.headers.get("x-forwarded-for", request.client.host if request.client else "?")
+        ip = ip.split(",")[0].strip()
+        if not _limiter.allow(f"stt:{ip}"):
+            raise HTTPException(status_code=429, detail="Rate limit exceeded")
+
+        # Ensure we refer to the module-level cache
+        global _whisper_model
+        if _whisper_model is None:
+            try:
+                from faster_whisper import WhisperModel  # type: ignore
+                _whisper_model = WhisperModel(settings.whisper_model, device="cpu")
+            except Exception as e:
+                raise HTTPException(status_code=500, detail=f"STT unavailable: {e}")
+
+        # Save to temp file because decoders may need seekable input
+        suffix = os.path.splitext(audio.filename or "input.wav")[1] or ".wav"
+        with tempfile.NamedTemporaryFile(delete=False, suffix=suffix) as tmp:
+            contents = await audio.read()
+            tmp.write(contents)
+            tmp_path = tmp.name
+        started = time.perf_counter()
+        try:
+            segments, info = _whisper_model.transcribe(tmp_path, language=language, vad_filter=True)
+            texts: List[str] = []
+            for seg in segments:
+                texts.append(seg.text)
+            full_text = " ".join(t.strip() for t in texts if t and t.strip())
+            if METRICS_ENABLED:
+                try:
+                    TRANSCRIBE_TOTAL.labels(status="ok").inc()
+                    TRANSCRIBE_DURATION.observe(time.perf_counter() - started)
+                except Exception:
+                    pass
+            return {"text": full_text, "language": getattr(info, 'language', None)}
+        except Exception as e:
+            if METRICS_ENABLED:
+                try:
+                    TRANSCRIBE_TOTAL.labels(status="error").inc()
+                    TRANSCRIBE_DURATION.observe(time.perf_counter() - started)
+                except Exception:
+                    pass
+            raise HTTPException(status_code=500, detail=f"Transcription error: {e}")
+        finally:
+            try:
+                os.unlink(tmp_path)
+            except Exception:
+                pass
+else:
+    @app.post("/transcribe")
+    @app.post("/api/transcribe")
+    async def transcribe_unavailable(request: Request):
+        raise HTTPException(status_code=503, detail="STT disabled. Enable optional deps and set STT_ENABLED=1.")
+
+# Serve built frontend (Vite `dist`) if present
+try:
+    import os
+    DIST_DIR = os.path.abspath(os.path.join(os.path.dirname(__file__), "..", "dist"))
+    if os.path.isdir(DIST_DIR):
+        app.mount("/", StaticFiles(directory=DIST_DIR, html=True), name="static")
+except Exception:
+    pass

server/config.py

@@ -0,0 +1,32 @@
+import os
+from dataclasses import dataclass, field
+from typing import List
+
+
+@dataclass(frozen=True)
+class Settings:
+    # Use local Marian provider by default (no external Inference API required)
+    provider: str = os.getenv("TRANSLATION_PROVIDER", "marian").lower()
+    # For Hugging Face Inference API
+    hf_api_token: str | None = os.getenv("HUGGINGFACE_API_TOKEN")
+    # Default timeout (seconds) for outbound HTTP calls
+    http_timeout: float = float(os.getenv("HTTP_TIMEOUT", "30"))
+    # Comma-separated list of allowed origins for CORS (production should not be "*")
+    allowed_origins: List[str] = field(
+        default_factory=lambda: (
+            [o.strip() for o in os.getenv("ALLOWED_ORIGINS", "*").split(",")]
+            if os.getenv("ALLOWED_ORIGINS")
+            else ["*"]
+        )
+    )
+    # Max input characters per request to protect the service
+    max_text_chars: int = int(os.getenv("MAX_TEXT_CHARS", "5000"))
+    # Simple in-memory rate limit: requests per minute per client
+    requests_per_minute: int = int(os.getenv("REQUESTS_PER_MINUTE", "60"))
+    # Whisper model for speech-to-text (tiny, base, small; tiny/base recommended for CPU)
+    whisper_model: str = os.getenv("WHISPER_MODEL", "tiny")
+    # Toggle to enable /transcribe endpoint (requires optional deps). Defaults to off for easy local dev.
+    stt_enabled: bool = os.getenv("STT_ENABLED", "0").strip().lower() in {"1", "true", "yes", "on"}
+
+
+settings = Settings()

server/providers/__init__.py

@@ -0,0 +1 @@
+# Providers package marker for reliable imports and editor analysis.

server/providers/base.py

@@ -0,0 +1,19 @@
+from __future__ import annotations
+from abc import ABC, abstractmethod
+from typing import Optional
+
+
+class TranslationProvider(ABC):
+    """Abstract interface for translation providers."""
+
+    @abstractmethod
+    def supports(self, src: str, tgt: str) -> bool:
+        ...
+
+    @abstractmethod
+    def preload(self, src: str, tgt: str) -> bool:
+        ...
+
+    @abstractmethod
+    def translate(self, text: str, src: str, tgt: str, max_length: Optional[int] = None) -> str:
+        ...

server/providers/hf_inference.py

@@ -0,0 +1,47 @@
+import requests
+from .base import TranslationProvider
+
+class HFInferenceProvider(TranslationProvider):
+	def __init__(self, api_token: str):
+		self.api_token = api_token
+		# Use a more reliable endpoint for Malay/Indonesian to English
+		self.endpoints = {
+			("ms", "en"): "https://api-inference.huggingface.co/models/Helsinki-NLP/opus-mt-zsm-en",
+			("id", "en"): "https://api-inference.huggingface.co/models/Helsinki-NLP/opus-mt-id-en",
+			("en", "ms"): "https://api-inference.huggingface.co/models/Helsinki-NLP/opus-mt-en-zsm",
+			("en", "id"): "https://api-inference.huggingface.co/models/Helsinki-NLP/opus-mt-en-id",
+		}
+		self.default_endpoint = "https://api-inference.huggingface.co/models/Helsinki-NLP/opus-mt-en-mul"
+
+	def supports(self, src: str, tgt: str) -> bool:
+		return True
+
+	def preload(self, src: str, tgt: str) -> bool:
+		# No-op for cloud
+		return True
+
+	def translate(self, text: str, src: str, tgt: str, max_length=None) -> str:
+		headers = {"Authorization": f"Bearer {self.api_token}"}
+		payload = {"inputs": text}
+		endpoint = self.endpoints.get((src, tgt), self.default_endpoint)
+		try:
+			resp = requests.post(endpoint, headers=headers, json=payload, timeout=30)
+			resp.raise_for_status()
+			data = resp.json()
+			if isinstance(data, list) and data and "translation_text" in data[0]:
+				result = data[0]["translation_text"]
+				# If result is echo, try Indonesian fallback
+				if result.strip() == text.strip() and (src, tgt) == ("ms", "en"):
+					# Try Indonesian
+					ind_endpoint = self.endpoints.get(("id", "en"), self.default_endpoint)
+					resp2 = requests.post(ind_endpoint, headers=headers, json=payload, timeout=30)
+					resp2.raise_for_status()
+					data2 = resp2.json()
+					if isinstance(data2, list) and data2 and "translation_text" in data2[0]:
+						result2 = data2[0]["translation_text"]
+						if result2.strip() != text.strip():
+							return result2
+				return result
+			return str(data)
+		except Exception as e:
+			return f"[HF error] {e}"

server/providers/marian.py

@@ -0,0 +1,139 @@
+from __future__ import annotations
+from functools import lru_cache
+from typing import Dict, Optional, Tuple, List, Dict as TDict, Any, Iterable, cast
+
+import os
+from cachetools import LRUCache
+from transformers.pipelines import pipeline
+from transformers.pipelines.text2text_generation import Text2TextGenerationPipeline
+
+from .base import TranslationProvider
+
+# Map (src, tgt) -> model id (Helsinki-NLP MarianMT)
+MODEL_MAP: Dict[Tuple[str, str], str] = {
+    ("en", "es"): "Helsinki-NLP/opus-mt-en-es",
+    ("es", "en"): "Helsinki-NLP/opus-mt-es-en",
+    ("en", "fr"): "Helsinki-NLP/opus-mt-en-fr",
+    ("fr", "en"): "Helsinki-NLP/opus-mt-fr-en",
+    ("en", "de"): "Helsinki-NLP/opus-mt-en-de",
+    ("de", "en"): "Helsinki-NLP/opus-mt-de-en",
+    ("en", "ar"): "Helsinki-NLP/opus-mt-en-ar",
+    ("ar", "en"): "Helsinki-NLP/opus-mt-ar-en",
+    ("en", "ur"): "Helsinki-NLP/opus-mt-en-ur",
+    ("ur", "en"): "Helsinki-NLP/opus-mt-ur-en",
+    ("en", "hi"): "Helsinki-NLP/opus-mt-en-hi",
+    ("hi", "en"): "Helsinki-NLP/opus-mt-hi-en",
+    ("en", "zh"): "Helsinki-NLP/opus-mt-en-zh",
+    ("zh", "en"): "Helsinki-NLP/opus-mt-zh-en",
+    # Malay (often labeled zsm in OPUS) ⇄ English
+    ("en", "ms"): "Helsinki-NLP/opus-mt-en-zsm",
+    ("ms", "en"): "Helsinki-NLP/opus-mt-zsm-en",
+    # Indonesian
+    ("en", "id"): "Helsinki-NLP/opus-mt-en-id",
+    ("id", "en"): "Helsinki-NLP/opus-mt-id-en",
+}
+
+
+@lru_cache(maxsize=16)
+def _get_pipeline(model_id: str) -> Text2TextGenerationPipeline:
+    return cast(Text2TextGenerationPipeline, pipeline("translation", model=model_id))
+
+
+class MarianProvider(TranslationProvider):
+    # Simple in-memory cache for translation results to improve latency/cost
+    _cache: LRUCache = LRUCache(maxsize=int(os.getenv("TRANSLATION_CACHE_SIZE", "512")))
+
+    def _preload_any(self, src: str, tgt: str) -> bool:
+        for model_id in self._candidates(src, tgt):
+            try:
+                _ = _get_pipeline(model_id)
+                return True
+            except Exception:
+                continue
+        return False
+    def _candidates(self, src: str, tgt: str) -> Iterable[str]:
+        # 1) Explicit map
+        explicit = MODEL_MAP.get((src, tgt))
+        if explicit:
+            yield explicit
+        # 2) Dynamic guess
+        yield f"Helsinki-NLP/opus-mt-{src}-{tgt}"
+        # 3) Malay direct (zsm)
+        if src == "ms" and tgt == "en":
+            yield "Helsinki-NLP/opus-mt-zsm-en"
+        if src == "en" and tgt == "ms":
+            yield "Helsinki-NLP/opus-mt-en-zsm"
+        # 3b) Practical fallback: Indonesian models often work reasonably for Malay
+        if tgt == "en" and src == "ms":
+            yield "Helsinki-NLP/opus-mt-id-en"
+        if src == "en" and tgt == "ms":
+            yield "Helsinki-NLP/opus-mt-en-id"
+        # 4) Universal multilingual fallback when specific pair is missing
+        if tgt == "en":
+            yield "Helsinki-NLP/opus-mt-mul-en"
+        if src == "en":
+            yield "Helsinki-NLP/opus-mt-en-mul"
+
+    def supports(self, src: str, tgt: str) -> bool:
+        # Optimistically support and handle errors at translate/preload time.
+        return True
+
+    def preload(self, src: str, tgt: str) -> bool:
+        # Try direct pair first
+        if self._preload_any(src, tgt):
+            return True
+        # Bridge via English if direct model unavailable (src->en and en->tgt)
+        if src != "en" and tgt != "en":
+            a = self._preload_any(src, "en")
+            b = self._preload_any("en", tgt)
+            return a and b
+        return False
+
+    def translate(self, text: str, src: str, tgt: str, max_length: Optional[int] = None) -> str:
+        # Try direct candidate models until one works
+        for mid in self._candidates(src, tgt):
+            cache_key = (mid, text)
+            cached = self._cache.get(cache_key)
+            if isinstance(cached, str):
+                return cached
+            try:
+                pipe = _get_pipeline(mid)
+                raw = pipe(text, max_length=max_length or max(64, len(text) + 8))
+                out = cast(List[TDict[str, Any]], raw)
+                first: TDict[str, Any] = out[0] if out else {"translation_text": ""}
+                result = str(first.get("translation_text", ""))
+                self._cache[cache_key] = result
+                return result
+            except Exception:
+                continue
+
+        # Bridge via English if no direct model works
+        if src != "en" and tgt != "en":
+            # src -> en
+            mid1 = None
+            for c in self._candidates(src, "en"):
+                try:
+                    mid1 = c
+                    pipe1 = _get_pipeline(c)
+                    raw1 = pipe1(text, max_length=max_length or max(64, len(text) + 8))
+                    out1 = cast(List[TDict[str, Any]], raw1)
+                    first1: TDict[str, Any] = out1[0] if out1 else {"translation_text": ""}
+                    text_en = str(first1.get("translation_text", ""))
+                    # en -> tgt
+                    for c2 in self._candidates("en", tgt):
+                        try:
+                            pipe2 = _get_pipeline(c2)
+                            raw2 = pipe2(text_en, max_length=max_length or max(64, len(text_en) + 8))
+                            out2 = cast(List[TDict[str, Any]], raw2)
+                            first2: TDict[str, Any] = out2[0] if out2 else {"translation_text": ""}
+                            result = str(first2.get("translation_text", ""))
+                            # cache using synthetic key to avoid giant cache miss costs
+                            self._cache[(f"{mid1}|bridge", text)] = result
+                            return result
+                        except Exception:
+                            continue
+                except Exception:
+                    continue
+
+        # All attempts failed
+        return f"[No model for {src}->{tgt}] {text}"

server/requirements-stt.txt

@@ -0,0 +1,9 @@
+# Optional STT (Speech-to-Text) dependencies
+# Prerequisites (macOS):
+# - Install Homebrew (https://brew.sh)
+# - brew install pkg-config ffmpeg
+# Then install these Python deps:
+#   pip install -r server/requirements-stt.txt
+
+faster-whisper==1.0.3
+python-multipart==0.0.9

server/requirements.txt

@@ -0,0 +1,15 @@
+fastapi==0.115.0
+uvicorn[standard]==0.30.6
+# Newer Transformers uses tokenizers>=0.20 with wheels for Python 3.13
+transformers==4.46.3
+# PyTorch version compatible with Python 3.13 on macOS
+torch==2.7.1
+sentencepiece>=0.1.99
+sacremoses>=0.1.1
+cachetools==5.3.3
+langdetect==1.0.9
+# Metrics/observability
+prometheus-client==0.20.0
+# STT (speech-to-text) dependencies are optional for local dev on macOS.
+# To enable STT locally, install prerequisites and then run:
+#   pip install -r server/requirements-stt.txt

server/test_app.py

@@ -0,0 +1,42 @@
+import pytest
+from fastapi.testclient import TestClient
+from server.app import app
+
+client = TestClient(app)
+
+def test_health():
+    resp = client.get("/health")
+    assert resp.status_code == 200
+    assert resp.json()["status"] == "ok"
+
+def test_translate_basic():
+    data = {
+        "text": "Terima kasih banyak",
+        "source_language": "ms",
+        "target_language": "en"
+    }
+    resp = client.post("/translate", json=data)
+    assert resp.status_code == 200
+    assert "translated_text" in resp.json()
+    # Should not return error or echo
+    out = resp.json()["translated_text"]
+    assert out and not out.startswith("[No model") and out != data["text"]
+
+def test_preload():
+    data = {
+        "source_language": "ms",
+        "target_language": "en"
+    }
+    resp = client.post("/preload", json=data)
+    assert resp.status_code == 200
+    assert resp.json()["ok"] is True
+
+def test_stt_status():
+    resp = client.get("/stt_status")
+    assert resp.status_code == 200
+    assert "available" in resp.json()
+
+def test_provider_info():
+    resp = client.get("/provider")
+    assert resp.status_code == 200
+    assert "provider" in resp.json()

server/translation_backend_masterpiece.py

@@ -0,0 +1,241 @@
+"""
+FastAPI Translation Backend Masterpiece
+- Preloads all required MarianMT models
+- Handles all language pairs robustly
+- Provides health/model endpoints
+- Catches and logs all errors
+- Uses GPU if available
+- Caches models and translations
+"""
+
+from fastapi import FastAPI, HTTPException, Request
+from pydantic import BaseModel
+from transformers import pipeline
+import torch
+from functools import lru_cache
+from fastapi.responses import JSONResponse
+import logging
+from fastapi.responses import JSONResponse
+from fastapi import Request
+import time
+from typing import Dict, Tuple
+from transformers.pipelines.text2text_generation import Text2TextGenerationPipeline
+import asyncio
+
+app = FastAPI()
+from collections import defaultdict
+
+# Simple in-memory rate limiter (per IP)
+RATE_LIMIT = 30  # max requests per minute
+rate_limit_data = defaultdict(lambda: {'count': 0, 'reset': time.time() + 60})
+
+def check_rate_limit(ip: str):
+    now = time.time()
+    data = rate_limit_data[ip]
+    if now > data['reset']:
+        data['count'] = 0
+        data['reset'] = now + 60
+    data['count'] += 1
+    if data['count'] > RATE_LIMIT:
+        return False
+    return True
+import sys
+logger = logging.getLogger("translation-backend")
+handler = logging.StreamHandler(sys.stdout)
+formatter = logging.Formatter('[%(asctime)s] %(levelname)s %(name)s: %(message)s')
+handler.setFormatter(formatter)
+logger.addHandler(handler)
+logger.setLevel(logging.INFO)
+import time
+from fastapi import Response
+from prometheus_client import Counter, Histogram, generate_latest, CONTENT_TYPE_LATEST
+
+# Prometheus metrics for monitoring
+TRANSLATION_COUNT = Counter('translation_requests_total', 'Total translation requests', ['pair', 'status'])
+TRANSLATION_LATENCY = Histogram('translation_latency_seconds', 'Translation latency', ['pair'])
+
+# List all language pairs you want to support
+LANGUAGE_PAIRS = [
+    # ("en", "ta"), ("ta", "en"),  # Tamil removed
+    ("en", "hi"), ("hi", "en"),
+    ("en", "zh"), ("zh", "en"),
+    ("en", "ms"), ("ms", "en"),
+    ("en", "id"), ("id", "en"),
+    ("en", "ar"), ("ar", "en"),  # Arabic
+    ("en", "ur"), ("ur", "en"),  # Urdu
+    # Add more pairs as needed
+]
+
+MODEL_NAMES = {
+    # ("en", "ta"): "ArunIcfoss/nllb-200-distilled-1.3B-ICFOSS-Tamil_Malayalam_Translation2",
+    # ("ta", "en"): "ArunIcfoss/nllb-200-distilled-1.3B-ICFOSS-Tamil_Malayalam_Translation2",  # Tamil removed
+    ("en", "hi"): "Helsinki-NLP/opus-mt-en-hi",
+    ("hi", "en"): "Helsinki-NLP/opus-mt-hi-en",
+    ("en", "zh"): "Helsinki-NLP/opus-mt-en-zh",
+    ("zh", "en"): "Helsinki-NLP/opus-mt-zh-en",
+    ("en", "ms"): "Helsinki-NLP/opus-mt-en-ms",
+    ("ms", "en"): "Helsinki-NLP/opus-mt-ms-en",
+    ("en", "id"): "Helsinki-NLP/opus-mt-en-id",
+    ("id", "en"): "Helsinki-NLP/opus-mt-id-en",
+    ("en", "ar"): "Helsinki-NLP/opus-mt-en-ar",
+    ("ar", "en"): "Helsinki-NLP/opus-mt-ar-en",
+    ("en", "ur"): "Helsinki-NLP/opus-mt-en-ur",
+    ("ur", "en"): "Helsinki-NLP/opus-mt-ur-en",
+    # Add more pairs as needed
+}
+SUPPORTED_PAIRS = list(MODEL_NAMES.keys())
+
+class TranslateRequest(BaseModel):
+    text: str
+    source_language: str
+    target_language: str
+
+from transformers.pipelines.text2text_generation import Text2TextGenerationPipeline
+# Preload all models at startup
+MODELS: Dict[Tuple[str, str], Text2TextGenerationPipeline] = {}
+
+# LRU cache for translations (demo reliability)
+@lru_cache(maxsize=512)
+def cached_translate(pair, text):
+    pipe = MODELS.get(pair)
+    if not pipe:
+        return None
+    result = pipe(text)
+    if not isinstance(result, list) or not result or not isinstance(result[0], dict) or "translation_text" not in result[0]:
+        return None
+    return result[0].get("translation_text")
+DEVICE = 0 if torch.cuda.is_available() else -1
+
+@app.on_event("startup")
+def preload_models():
+    # Load and verify models, track health
+    global VERIFIED_PAIRS
+    VERIFIED_PAIRS = []
+    for pair, model_name in MODEL_NAMES.items():
+        try:
+            pipe = pipeline("translation", model=model_name, device=DEVICE)
+            if not isinstance(pipe, Text2TextGenerationPipeline):
+                raise Exception(f"Loaded pipeline is not Text2TextGenerationPipeline for {pair}")
+            test_result = pipe("Hello world")
+            if not isinstance(test_result, list) or not test_result or "translation_text" not in test_result[0]:
+                raise Exception(f"Model {model_name} for {pair} failed test translation.")
+            MODELS[pair] = pipe
+            VERIFIED_PAIRS.append(pair)
+            logger.info(f"Loaded and verified model for {pair}: {model_name}")
+        except Exception as e:
+            logger.error(f"Failed to load or verify model {model_name} for {pair}: {e}")
+
+@app.get("/health")
+@app.get("/livez")
+def livez():
+    """Kubernetes-style liveness probe."""
+    return Response(content="ok", media_type="text/plain")
+def health():
+    loaded = {str(pair): str(type(MODELS.get(pair))) for pair in SUPPORTED_PAIRS}
+    device_info = torch.cuda.get_device_name(0) if torch.cuda.is_available() else "cpu"
+    return {"models": loaded, "device": device_info}
+
+# Prometheus metrics endpoint
+@app.get("/metrics")
+def metrics():
+    return Response(generate_latest(), media_type=CONTENT_TYPE_LATEST)
+class BatchTranslateRequest(BaseModel):
+    source_lang: str
+    target_lang: str
+    texts: list[str]
+
+@app.get("/models")
+def models():
+    # Only show verified working pairs
+    return {"models": VERIFIED_PAIRS}
+
+async def translate(req: TranslateRequest, request: Request):
+    ip = request.client.host if request.client else 'unknown'
+    if not check_rate_limit(ip):
+        return JSONResponse(status_code=429, content={
+            "error": "rate_limited",
+            "message": "Too many requests. Please wait and try again."
+        })
+    pair = (req.source_language, req.target_language)
+    start_time = time.time()
+    if pair not in MODELS:
+        # Two-step translation via English if direct model is missing
+        fallback = None
+        try:
+            mid = None
+            if req.source_language != "en" and (req.source_language, "en") in MODELS:
+                mid = cached_translate((req.source_language, "en"), req.text)
+            else:
+                mid = req.text
+            if mid and req.target_language != "en" and ("en", req.target_language) in MODELS:
+                fallback = cached_translate(("en", req.target_language), mid)
+            elif mid:
+                fallback = mid
+        except Exception:
+            fallback = None
+        logger.warning(f"Requested model {pair} not loaded. Two-step fallback used: {bool(fallback)}")
+        TRANSLATION_COUNT.labels(pair=str(pair), status="missing_model").inc()
+        return JSONResponse(status_code=200, content={
+            "translated_text": fallback,
+            "latency": time.time() - start_time,
+            "fallback": True,
+            "message": f"Model for {pair} not loaded. Used two-step translation via English.",
+            "supported_pairs": VERIFIED_PAIRS,
+            "timestamp": time.time(),
+            "ip": ip
+        })
+    try:
+        await asyncio.sleep(0)
+        translated = cached_translate(pair, req.text)
+        latency = time.time() - start_time
+        logger.info(f"Translation {pair}: '{req.text[:30]}...' -> '{str(translated)[:30]}...' | latency: {latency:.3f}s | ip: {ip}")
+        TRANSLATION_COUNT.labels(pair=str(pair), status="success").inc()
+        TRANSLATION_LATENCY.labels(pair=str(pair)).observe(latency)
+        if not translated:
+            raise Exception("No translation returned.")
+        return {"translated_text": translated, "latency": latency, "timestamp": time.time(), "ip": ip}
+    except Exception as e:
+        logger.error(f"Translation error for {pair}: {e} | ip: {ip}")
+        TRANSLATION_COUNT.labels(pair=str(pair), status="error").inc()
+        return JSONResponse(status_code=500, content={
+            "error": "translation_failed",
+            "message": str(e),
+            "timestamp": time.time(),
+            "ip": ip
+        })
+
+# Batch translation endpoint for demo reliability
+@app.post("/batch_translate")
+@app.post("/batch_translate")
+async def batch_translate(req: BatchTranslateRequest):
+    pair = (req.source_lang, req.target_lang)
+    if pair not in MODELS:
+        TRANSLATION_COUNT.labels(pair=str(pair), status="missing_model").inc()
+        return JSONResponse(status_code=400, content={
+            "error": "model_not_loaded",
+            "message": f"Model for {pair} not loaded.",
+            "supported_pairs": SUPPORTED_PAIRS
+        })
+    results = []
+    latencies = []
+    for text in req.texts:
+        start_time = time.time()
+        try:
+            await asyncio.sleep(0)
+            translated = cached_translate(pair, text)
+            latency = time.time() - start_time
+            results.append(translated if translated else "")
+            latencies.append(latency)
+            logger.info(f"Batch translation {pair}: '{text[:30]}...' -> '{str(translated)[:30]}...' | latency: {latency:.3f}s")
+            TRANSLATION_COUNT.labels(pair=str(pair), status="success").inc()
+            TRANSLATION_LATENCY.labels(pair=str(pair)).observe(latency)
+        except Exception as e:
+            results.append("")
+            latencies.append(None)
+            logger.error(f"Batch translation error for {pair}: {e}")
+            TRANSLATION_COUNT.labels(pair=str(pair), status="error").inc()
+    return {"translated_texts": results, "latencies": latencies}
+
+# Add more endpoints as needed (e.g., batch translation, STT, etc.)
+
+# To run: uvicorn translation_backend_masterpiece:app --reload

src/App.tsx

@@ -0,0 +1,83 @@
+import { AuthProvider } from './contexts/AuthContext';
+import { useAuth } from './contexts/useAuth';
+import { NavigationProvider } from './components/Navigation';
+import { useCurrentPath } from './components/NavigationHooks';
+import { Auth } from './components/Auth';
+import { Dashboard } from './components/Dashboard';
+import { HostView } from './components/HostView';
+import { ViewerView } from './components/ViewerView';
+import { Component, ErrorInfo, ReactNode } from 'react';
+
+class ErrorBoundary extends Component<{ children: ReactNode }, { hasError: boolean; error: any }> {
+  constructor(props: any) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error: any) {
+    return { hasError: true, error };
+  }
+  // componentDidCatch can be used to log errors to a service if needed
+  componentDidCatch(_error: any, _info: ErrorInfo) {}
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="min-h-screen flex items-center justify-center bg-red-50">
+          <div className="bg-white rounded-xl shadow-xl p-8 max-w-md mx-auto text-center">
+            <h1 className="text-2xl font-bold text-red-700 mb-4">Something went wrong</h1>
+            <p className="text-gray-700 mb-2">An unexpected error occurred. Please refresh the page or try again later.</p>
+            <pre className="text-xs text-gray-400 mb-2">{String(this.state.error)}</pre>
+            <button className="bg-blue-600 text-white px-4 py-2 rounded-lg" onClick={() => window.location.reload()}>Reload</button>
+          </div>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+function AppContent() {
+  const { user, loading } = useAuth();
+  const currentPath = useCurrentPath();
+  console.log('[AppContent] user:', user, 'loading:', loading, 'currentPath:', currentPath);
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-16 w-16 border-b-4 border-blue-600 mx-auto mb-4"></div>
+          <p className="text-gray-600 text-lg">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!user) {
+    return <Auth />;
+  }
+
+  if (currentPath.startsWith('/host/')) {
+    const groupId = currentPath.split('/')[2];
+    return <HostView groupId={groupId} />;
+  }
+
+  if (currentPath.startsWith('/viewer/')) {
+    const groupId = currentPath.split('/')[2];
+    return <ViewerView groupId={groupId} />;
+  }
+
+  return <Dashboard />;
+}
+
+function App() {
+  return (
+    <ErrorBoundary>
+      <AuthProvider>
+        <NavigationProvider>
+          <AppContent />
+        </NavigationProvider>
+      </AuthProvider>
+    </ErrorBoundary>
+  );
+}
+
+export default App;

src/components/Auth.tsx

@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import { useAuth } from '../contexts/useAuth';
+import { Mic, Globe } from 'lucide-react';
+
+export function Auth() {
+  const [isSignUp, setIsSignUp] = useState(false);
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const { signIn, signUp } = useAuth();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      if (isSignUp) {
+        await signUp(email, password);
+      } else {
+        await signIn(email, password);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'An error occurred');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4">
+      <div className="bg-white rounded-2xl shadow-xl w-full max-w-md p-8">
+        <div className="flex items-center justify-center mb-8">
+          <div className="bg-blue-600 rounded-full p-3 mr-3">
+            <Mic className="w-8 h-8 text-white" />
+          </div>
+          <Globe className="w-8 h-8 text-blue-600" />
+        </div>
+
+        <h1 className="text-3xl font-bold text-center text-gray-900 mb-2">
+          LiveTranscribe
+        </h1>
+        <p className="text-center text-gray-600 mb-8">
+          Real-time transcription and translation streaming
+        </p>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+              Email
+            </label>
+            <input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="you@example.com"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
+              Password
+            </label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              minLength={6}
+              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="••••••••"
+            />
+          </div>
+
+          {error && (
+            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
+              {error}
+            </div>
+          )}
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            {loading ? 'Please wait...' : isSignUp ? 'Sign Up' : 'Sign In'}
+          </button>
+        </form>
+
+        <div className="mt-6 text-center">
+          <button
+            onClick={() => setIsSignUp(!isSignUp)}
+            className="text-blue-600 hover:text-blue-700 text-sm font-medium"
+          >
+            {isSignUp ? 'Already have an account? Sign in' : "Don't have an account? Sign up"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/CreateGroup.tsx

@@ -0,0 +1,159 @@
+import React, { useState } from 'react';
+import { X, Loader2 } from 'lucide-react';
+import { LocalDB } from '../lib/localdb';
+import { useAuth } from '../contexts/useAuth';
+import { useNavigate } from './NavigationHooks';
+
+const SOURCE_LANGUAGES = [
+  { code: 'auto', name: 'Auto (detect)' },
+  { code: 'en', name: 'English' },
+  { code: 'ur', name: 'Urdu' },
+  { code: 'ar', name: 'Arabic' },
+  { code: 'hi', name: 'Hindi' },
+  { code: 'zh', name: 'Chinese' },
+  { code: 'ms', name: 'Malay' },
+];
+
+const TARGET_LANGUAGES = [
+  { code: 'en', name: 'English' },
+  { code: 'ur', name: 'Urdu' },
+  { code: 'ar', name: 'Arabic' },
+  { code: 'hi', name: 'Hindi' },
+  { code: 'zh', name: 'Chinese' },
+  { code: 'ms', name: 'Malay' },
+];
+
+interface CreateGroupProps {
+  onClose: () => void;
+}
+
+export function CreateGroup({ onClose }: CreateGroupProps) {
+  const { user } = useAuth();
+  const navigate = useNavigate();
+  const [name, setName] = useState('');
+  const [sourceLanguage, setSourceLanguage] = useState('auto');
+  const [targetLanguage, setTargetLanguage] = useState('en');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!user) return;
+
+    setLoading(true);
+    setError('');
+
+    try {
+      if (sourceLanguage === targetLanguage) {
+        setError('Source and target languages must be different.');
+        return;
+      }
+      const joinCode = LocalDB.generateUniqueJoinCode();
+      const group = LocalDB.createGroup({
+        name,
+        hostId: user.id,
+        joinCode,
+        sourceLanguage,
+        targetLanguage,
+      });
+      LocalDB.addMember(group.id, user.id, true);
+
+      navigate(`/host/${group.id}`);
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create group');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md">
+        <div className="flex items-center justify-between p-6 border-b border-gray-200">
+          <h2 className="text-2xl font-bold text-gray-900">Host a Session</h2>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-600 transition-colors"
+          >
+            <X className="w-6 h-6" />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="p-6 space-y-4">
+          <div>
+            <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
+              Session Name
+            </label>
+            <input
+              id="name"
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              required
+              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="Friday Lecture"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="sourceLanguage" className="block text-sm font-medium text-gray-700 mb-1">
+              Source Language
+            </label>
+            <select
+              id="sourceLanguage"
+              value={sourceLanguage}
+              onChange={(e) => setSourceLanguage(e.target.value)}
+              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            >
+              {SOURCE_LANGUAGES.map((lang) => (
+                <option key={lang.code} value={lang.code}>
+                  {lang.name}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div>
+            <label htmlFor="targetLanguage" className="block text-sm font-medium text-gray-700 mb-1">
+              Target Language
+            </label>
+            <select
+              id="targetLanguage"
+              value={targetLanguage}
+              onChange={(e) => setTargetLanguage(e.target.value)}
+              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            >
+              {TARGET_LANGUAGES.map((lang) => (
+                <option key={lang.code} value={lang.code}>
+                  {lang.name}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {error && (
+            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
+              {error}
+            </div>
+          )}
+
+          <button
+            type="submit"
+            disabled={loading || sourceLanguage === targetLanguage}
+            className="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center"
+          >
+            {loading ? (
+              <>
+                <Loader2 className="w-5 h-5 mr-2 animate-spin" />
+                Creating...
+              </>
+            ) : (
+              'Create Session'
+            )}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

src/components/Dashboard.tsx

@@ -0,0 +1,74 @@
+import { useState } from 'react';
+import { useAuth } from '../contexts/useAuth';
+import { Plus, LogOut, Radio, Users } from 'lucide-react';
+import { CreateGroup } from './CreateGroup';
+import { JoinGroup } from './JoinGroup';
+import { MyGroups } from './MyGroups';
+
+export function Dashboard() {
+  const { signOut } = useAuth();
+  const [showCreateGroup, setShowCreateGroup] = useState(false);
+  const [showJoinGroup, setShowJoinGroup] = useState(false);
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
+      <nav className="bg-white shadow-sm border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-16">
+            <div className="flex items-center">
+              <Radio className="w-8 h-8 text-blue-600 mr-2" />
+              <h1 className="text-2xl font-bold text-gray-900">LiveTranscribe</h1>
+            </div>
+            <button
+              onClick={signOut}
+              className="flex items-center text-gray-700 hover:text-gray-900 transition-colors"
+            >
+              <LogOut className="w-5 h-5 mr-2" />
+              Sign Out
+            </button>
+          </div>
+        </div>
+      </nav>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+          <button
+            onClick={() => setShowCreateGroup(true)}
+            className="bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow p-8 text-left group"
+          >
+            <div className="bg-blue-100 rounded-full w-16 h-16 flex items-center justify-center mb-4 group-hover:bg-blue-200 transition-colors">
+              <Plus className="w-8 h-8 text-blue-600" />
+            </div>
+            <h2 className="text-2xl font-bold text-gray-900 mb-2">Host a Session</h2>
+            <p className="text-gray-600">
+              Create a new transcription session and broadcast live text to multiple devices
+            </p>
+          </button>
+
+          <button
+            onClick={() => setShowJoinGroup(true)}
+            className="bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow p-8 text-left group"
+          >
+            <div className="bg-green-100 rounded-full w-16 h-16 flex items-center justify-center mb-4 group-hover:bg-green-200 transition-colors">
+              <Users className="w-8 h-8 text-green-600" />
+            </div>
+            <h2 className="text-2xl font-bold text-gray-900 mb-2">Join a Session</h2>
+            <p className="text-gray-600">
+              Enter a code or scan QR to receive live transcriptions on your device
+            </p>
+          </button>
+        </div>
+
+        <MyGroups />
+      </div>
+
+      {showCreateGroup && (
+        <CreateGroup onClose={() => setShowCreateGroup(false)} />
+      )}
+
+      {showJoinGroup && (
+        <JoinGroup onClose={() => setShowJoinGroup(false)} />
+      )}
+    </div>
+  );
+}

src/components/HostView.tsx

@@ -0,0 +1,740 @@
+import { useEffect, useState, useRef } from 'react';
+import { LocalDB, Group, TranscriptionSegment } from '../lib/localdb';
+import { translateText, apiHealth, preloadModel, sttStatus, transcribeAudio } from '../lib/api';
+import { useAuth } from '../contexts/useAuth';
+import { useNavigate } from './NavigationHooks';
+import { Mic, MicOff, StopCircle, Copy, Check, QrCode, Users, Trash2, Download } from 'lucide-react';
+import { QRCodeDisplay } from './QRCodeDisplay';
+
+interface HostViewProps {
+  groupId: string;
+}
+
+export function HostView({ groupId }: HostViewProps) {
+  // ...existing code...
+  // Subscribe to group updates so HostView always reflects latest source/target language
+  useEffect(() => {
+    const unsubGroup = LocalDB.onGroupUpdated(groupId, (updated) => {
+      setGroup(updated);
+    });
+    return () => unsubGroup();
+  }, [groupId]);
+  // ...existing code...
+  // Show only originals toggle
+  const [showOriginalsOnly, setShowOriginalsOnly] = useState(false);
+  // Malay-English model test state
+  const [msEnAvailable, setMsEnAvailable] = useState<null | boolean>(null);
+  const [msEnChecking, setMsEnChecking] = useState(false);
+  // Parallel translation: track IDs currently being translated
+  const [translatingIds, setTranslatingIds] = useState<Set<string>>(new Set());
+  const { user } = useAuth();
+  const navigate = useNavigate();
+  const [group, setGroup] = useState<Group | null>(null);
+  const [isRecording, setIsRecording] = useState(false);
+  // Segments always sorted by sequence number
+  const [segments, setSegments] = useState<TranscriptionSegment[]>([]);
+  const [memberCount, setMemberCount] = useState(0);
+  const [showQR, setShowQR] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [interimText, setInterimText] = useState('');
+  const [apiOk, setApiOk] = useState<boolean | null>(null);
+  // Advanced audio upload support
+  const [sttAvailable, setSttAvailable] = useState(false);
+  const [sttBusy, setSttBusy] = useState(false);
+  // Removed unused diag variable
+  const [retryingIds, setRetryingIds] = useState<Set<string>>(new Set());
+  const [bulkRetrying, setBulkRetrying] = useState(false);
+  // Sentence-level buffering for mic recognition
+  const [bufferedText, setBufferedText] = useState('');
+  const flushTimerRef = useRef<any>(null);
+
+  const recognitionRef = useRef<any>(null);
+  const isRecordingFlagRef = useRef(false);
+  const sequenceNumberRef = useRef(0);
+  const preloadAttemptedRef = useRef(false);
+  const [modelReady, setModelReady] = useState<null | boolean>(null);
+
+  useEffect(() => {
+    if (!user) return;
+
+    loadGroup();
+    loadSegments();
+    loadMemberCount();
+    // Preload model for selected target language when group changes
+    if (group && apiOk) {
+      preloadModel({ source_language: group.source_language, target_language: group.target_language });
+    }
+
+    const unsubMembers = LocalDB.onMembersChanged(groupId, () => {
+      loadMemberCount();
+    });
+    // poll API health
+    let healthTimer: any;
+    (async () => {
+      const ok = await apiHealth();
+      setApiOk(ok);
+      // Check if Whisper STT is available (backend should expose this)
+      if (ok) {
+        try { setSttAvailable(await sttStatus()); } catch (e) { setSttAvailable(true); }
+      }
+      // Auto-preload model when API is online and group is known
+      if (ok && group && !preloadAttemptedRef.current) {
+        preloadAttemptedRef.current = true;
+        setModelReady(null);
+        const warmed = await autoPreloadForGroup(group);
+        setModelReady(warmed);
+      }
+      healthTimer = setInterval(async () => {
+        const healthy = await apiHealth();
+        setApiOk(healthy);
+        if (healthy) {
+          try { setSttAvailable(await sttStatus()); } catch (e) { setSttAvailable(true); }
+        } else {
+          setSttAvailable(false);
+        }
+        // Re-attempt preload if API just came online
+        if (healthy && group && !preloadAttemptedRef.current) {
+          preloadAttemptedRef.current = true;
+          setModelReady(null);
+          const warmed = await autoPreloadForGroup(group);
+          setModelReady(warmed);
+        }
+      }, 15000);
+    })();
+
+    return () => {
+      unsubMembers();
+      stopRecording();
+      if (healthTimer) clearInterval(healthTimer);
+    };
+  }, [groupId, user]);
+
+  // When group becomes available, kick off auto preload once
+  useEffect(() => {
+    if (group) {
+      if (apiOk && !preloadAttemptedRef.current) {
+        preloadAttemptedRef.current = true;
+        (async () => {
+          setModelReady(null);
+          const warmed = await autoPreloadForGroup(group);
+          setModelReady(warmed);
+        })();
+      }
+    }
+  }, [group?.id, apiOk]);
+
+  const autoPreloadForGroup = async (g: Group): Promise<boolean> => {
+  let ok = await preloadModel({ source_language: g.source_language, target_language: g.target_language });
+  if (!ok && g.target_language === 'en' && (g.source_language === 'auto' || !g.source_language)) {
+    const okMs = await preloadModel({ source_language: 'ms', target_language: 'en' });
+    const okId = await preloadModel({ source_language: 'id', target_language: 'en' });
+    ok = okMs || okId;
+  }
+  return ok;
+  };
+
+  const loadGroup = async () => {
+    const data = LocalDB.getGroupById(groupId);
+    if (data) {
+      setGroup(data);
+    } else {
+      navigate('/');
+    }
+  };
+
+  const loadSegments = async () => {
+    const data = LocalDB.getSegments(groupId);
+    setSegments(data);
+    sequenceNumberRef.current = data.length;
+  };
+
+  const loadMemberCount = async () => {
+    setMemberCount(LocalDB.getMemberCount(groupId));
+  };
+
+  const setRecording = (v: boolean) => {
+    setIsRecording(v);
+    isRecordingFlagRef.current = v;
+  };
+
+  const startRecording = async () => {
+    if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) {
+      alert('Speech recognition is not supported in your browser. Please use Chrome or Edge.');
+      return;
+    }
+
+    const SpeechRecognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
+    const recognition = new SpeechRecognition();
+
+    recognition.continuous = true;
+    recognition.interimResults = true;
+  const srcLang = (group?.source_language === 'auto' ? 'en' : group?.source_language || 'en').toLowerCase();
+  recognition.lang = srcLang === 'auto' ? 'en-US'
+            : srcLang === 'ur' ? 'ur-PK'
+            : srcLang === 'ar' ? 'ar-SA'
+            : srcLang === 'es' ? 'es-ES'
+            : srcLang === 'fr' ? 'fr-FR'
+            : srcLang === 'de' ? 'de-DE'
+            : srcLang === 'hi' ? 'hi-IN'
+            : srcLang === 'zh' ? 'zh-CN'
+            : srcLang === 'ms' ? 'ms-MY'
+            : srcLang === 'id' ? 'id-ID'
+            : 'en-US';
+
+    recognition.onresult = async (event: any) => {
+      let interim = '';
+      let finalChunk = '';
+
+      for (let i = event.resultIndex; i < event.results.length; i++) {
+        const transcript = (event.results[i][0].transcript || '').trim();
+        if (!transcript) continue;
+        if (event.results[i].isFinal) {
+          finalChunk += (finalChunk ? ' ' : '') + transcript;
+        } else {
+          interim += (interim ? ' ' : '') + transcript;
+        }
+      }
+
+      if (interim) {
+        setInterimText(interim);
+      } else {
+        setInterimText('');
+      }
+
+      // Append final chunk to buffer and flush on sentence boundaries or heuristics
+      if (finalChunk) {
+        const combined = (bufferedText + ' ' + finalChunk).replace(/\s+/g, ' ').trim();
+        setBufferedText(combined);
+
+        // Heuristics for when to flush the buffered sentence
+  const endsSentence = /[.!?…]\s*$/.test(combined);
+        const wordCount = combined.split(/\s+/).filter(Boolean).length;
+        const overChars = combined.length >= 180; // max chars per segment
+        const minWordsReached = wordCount >= 10; // avoid word-by-word for long speech
+
+        // Clear any previous pending flush; we will schedule a new one below
+        if (flushTimerRef.current) {
+          clearTimeout(flushTimerRef.current);
+          flushTimerRef.current = null;
+        }
+
+        const doFlush = async (forced = false) => {
+          const txt = combined.trim();
+          if (!txt) return;
+          // Skip ultra-short fillers unless sentence ended
+          const wc = txt.split(/\s+/).filter(Boolean).length;
+          // Immediate flush (on punctuation/length) keeps stricter rule; timer-based can be lenient
+          if (!forced) {
+            if (!endsSentence && wc < 3) return; // allow short 2-3 word utterances only if they feel like a sentence
+          } else {
+            if (wc < 1) return; // if timer fired and there's at least one word, flush
+          }
+          setBufferedText('');
+          await saveSegment(txt);
+        };
+
+        if (endsSentence || overChars || (minWordsReached && !interim)) {
+          await doFlush(false);
+        } else {
+          // Debounce-based flush after short pause
+          flushTimerRef.current = setTimeout(async () => {
+            await doFlush(true);
+          }, 1500);
+        }
+      }
+    };
+
+    recognition.onerror = (event: any) => {
+      console.error('Speech recognition error:', event.error);
+      if (event.error === 'no-speech') {
+        return;
+      }
+      setRecording(false);
+    };
+
+    recognition.onend = () => {
+      if (isRecordingFlagRef.current) {
+        try {
+          recognition.start();
+        } catch (e) {
+          setTimeout(() => {
+            if (isRecordingFlagRef.current) {
+              try { recognition.start(); } catch (_e) { /* ignore restart error */ }
+            }
+          }, 250);
+        }
+      }
+    };
+
+    setRecording(true);
+    recognition.start();
+    recognitionRef.current = recognition;
+  };
+
+  const stopRecording = () => {
+    if (recognitionRef.current) {
+      setRecording(false);
+      recognitionRef.current.stop();
+      recognitionRef.current = null;
+    }
+    setInterimText('');
+    setBufferedText('');
+    if (flushTimerRef.current) {
+      clearTimeout(flushTimerRef.current);
+      flushTimerRef.current = null;
+    }
+  };
+
+  // Save a segment and always add in order
+  // Save segment and add to translation queue
+  const saveSegment = async (text: string) => {
+    if (!user || !group) return;
+    // Add segment immediately with translation: null (processing)
+    const tempSegment = LocalDB.addSegment({
+      groupId,
+      originalText: text,
+      translatedText: null,
+      sequenceNumber: sequenceNumberRef.current,
+      createdBy: user.id,
+    });
+    setSegments((prev: TranscriptionSegment[]) => {
+      const exists = prev.some((s: TranscriptionSegment) => s.id === tempSegment.id);
+      if (exists) return prev;
+      return [...prev, tempSegment].sort((a: TranscriptionSegment, b: TranscriptionSegment) => a.sequence_number - b.sequence_number);
+    });
+    sequenceNumberRef.current++;
+    // Start translation in background for this segment
+    setTranslatingIds((prev) => new Set([...prev, tempSegment.id]));
+    translateSegment(tempSegment);
+  };
+
+  // Translate a segment in the background
+  const translateSegment = async (segment: TranscriptionSegment) => {
+    if (!group) return;
+    let translatedText: string | null = null;
+    if (group && group.source_language !== group.target_language) {
+      const attempts: string[] = [];
+      attempts.push(group.source_language === 'auto' ? 'auto' : group.source_language);
+      if (!attempts.includes('ms')) attempts.push('ms');
+      if (!attempts.includes('id')) attempts.push('id');
+      let foundTranslation: string | null = null;
+      for (const src of attempts) {
+        const res = await translateText({ text: segment.original_text, source_language: src, target_language: group.target_language });
+        const isNoModel = typeof res === 'string' && /^\[No model for/i.test(res);
+        const isEcho = !!res && res.trim() === segment.original_text.trim();
+        if (res && !isNoModel && !isEcho) {
+          foundTranslation = res;
+          break;
+        }
+      }
+      if (foundTranslation) {
+        translatedText = foundTranslation;
+      }
+    } else {
+      translatedText = segment.original_text;
+    }
+    setSegments((prev: TranscriptionSegment[]) => prev.map((s: TranscriptionSegment) =>
+      s.id === segment.id ? { ...s, translated_text: translatedText } : s
+    ).sort((a: TranscriptionSegment, b: TranscriptionSegment) => a.sequence_number - b.sequence_number));
+    LocalDB.updateSegmentTranslation(groupId, segment.id, translatedText);
+    setTranslatingIds((prev) => {
+      const next = new Set(prev);
+      next.delete(segment.id);
+      return next;
+    });
+  };
+
+  // Retry translation for a segment
+  const retryTranslateOne = async (seg: TranscriptionSegment) => {
+    if (!group) return;
+    setRetryingIds((prev) => new Set(Array.from(prev).concat(seg.id)));
+    setSegments((prev: TranscriptionSegment[]) => prev.map((s: TranscriptionSegment) =>
+      s.id === seg.id ? { ...s, translated_text: null } : s
+    ));
+    setTranslatingIds((prev) => new Set([...prev, seg.id]));
+    await translateSegment(seg);
+    setRetryingIds((prev) => {
+      const next = new Set(prev);
+      next.delete(seg.id);
+      return next;
+    });
+  };
+
+  // Translate all segments currently missing a translation
+  const retryTranslateMissing = async () => {
+    if (!group) return;
+    setBulkRetrying(true);
+    try {
+      const missing = segments.filter((seg) => !seg.translated_text || seg.translated_text === seg.original_text);
+      await Promise.all(missing.map(async (seg) => {
+        setRetryingIds((prev) => new Set(Array.from(prev).concat(seg.id)));
+        setSegments((prev: TranscriptionSegment[]) => prev.map((s: TranscriptionSegment) =>
+          s.id === seg.id ? { ...s, translated_text: null } : s
+        ));
+        setTranslatingIds((prev) => new Set([...prev, seg.id]));
+        await translateSegment(seg);
+        setRetryingIds((prev) => {
+          const next = new Set(prev);
+          next.delete(seg.id);
+          return next;
+        });
+      }));
+    } finally {
+      setBulkRetrying(false);
+    }
+  };
+
+  const endSession = async () => {
+    stopRecording();
+    LocalDB.setGroupActive(groupId, false);
+
+    navigate('/');
+  };
+
+  // Upload removed
+
+  const deleteSession = async () => {
+    stopRecording();
+    if (confirm('Delete this session? This will remove all local data for it.')) {
+      LocalDB.deleteGroup(groupId);
+      navigate('/');
+    }
+  };
+
+  const copyJoinCode = () => {
+    if (group) {
+      navigator.clipboard.writeText(group.join_code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  // Manual preload removed; handled automatically via autoPreloadForGroup()
+
+  const handleExport = async () => {
+    if (!group) return;
+    const data = LocalDB.exportGroup(groupId);
+    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+  a.download = `${group.name.replace(/[^a-z0-9-]+/gi, '_') || 'session'}_${group.join_code}.json`;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+  };
+
+  if (!group) {
+    return (
+      <div className="min-h-screen bg-gray-100 flex items-center justify-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
+      </div>
+    );
+  }
+
+  const speechSupported = typeof window !== 'undefined' &&
+    (("webkitSpeechRecognition" in window) || ("SpeechRecognition" in window));
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
+      <div className="max-w-4xl mx-auto p-4">
+        <div className="bg-white rounded-xl shadow-lg mb-4">
+          <div className="p-6 border-b border-gray-200">
+            <div className="flex items-center justify-between mb-4">
+              <h1 className="text-2xl font-bold text-gray-900">{group.name}</h1>
+              <div className="flex items-center space-x-2">
+                <div className="flex items-center bg-gray-100 rounded-lg px-3 py-2">
+                  <Users className="w-5 h-5 text-gray-600 mr-2" />
+                  <span className="font-semibold text-gray-900">{memberCount}</span>
+                </div>
+                <div className="flex items-center rounded-lg px-3 py-2 border" title={apiOk === null ? 'Checking API' : apiOk ? 'API Online' : 'API Offline'}>
+                  <span className={`w-2 h-2 rounded-full mr-2 ${apiOk === null ? 'bg-gray-400 animate-pulse' : apiOk ? 'bg-green-600' : 'bg-red-600'}`}></span>
+                  <span className="text-sm text-gray-700">API</span>
+                </div>
+                {/* Toggle to show only original text */}
+                <label className="ml-2 flex items-center text-xs cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={showOriginalsOnly}
+                    onChange={e => setShowOriginalsOnly(e.target.checked)}
+                    className="mr-1"
+                  />
+                  Show only originals
+                </label>
+                {/* Malay-English model test button */}
+                <button
+                  onClick={async () => {
+                    setMsEnChecking(true);
+                    setMsEnAvailable(null);
+                    try {
+                      const ok = await preloadModel({ source_language: 'ms', target_language: 'en' });
+                      setMsEnAvailable(ok);
+                    } finally {
+                      setMsEnChecking(false);
+                    }
+                  }}
+                  className="ml-2 px-3 py-2 rounded-lg border text-xs"
+                  disabled={msEnChecking}
+                  title="Check if Malay-English model is available"
+                >
+                  {msEnChecking ? 'Checking…' : 'Test Malay→English'}
+                </button>
+                {msEnAvailable !== null && (
+                  <span className={`ml-2 text-xs font-bold ${msEnAvailable ? 'text-green-600' : 'text-red-600'}`}>{msEnAvailable ? 'Available' : 'Not available'}</span>
+                )}
+              </div>
+            </div>
+
+            <div className="flex items-center space-x-3">
+              <div className="flex-1 bg-blue-50 rounded-lg p-3 flex items-center justify-between">
+                <div>
+                  <span className="text-sm text-gray-600">Join Code:</span>
+                  <span className="ml-2 text-2xl font-mono font-bold text-blue-600">
+                    {group.join_code}
+                  </span>
+                </div>
+                <button
+                  onClick={copyJoinCode}
+                  className="p-2 hover:bg-blue-100 rounded-lg transition-colors"
+                >
+                  {copied ? (
+                    <Check className="w-5 h-5 text-green-600" />
+                  ) : (
+                    <Copy className="w-5 h-5 text-blue-600" />
+                  )}
+                </button>
+              </div>
+
+              <button
+                onClick={() => setShowQR(true)}
+                className="bg-blue-600 text-white p-3 rounded-lg hover:bg-blue-700 transition-colors"
+              >
+                <QrCode className="w-6 h-6" />
+              </button>
+            </div>
+          </div>
+
+          <div className="p-6">
+            <div className="flex items-center justify-center space-x-4 mb-6">
+              {!isRecording ? (
+                <button
+                  onClick={startRecording}
+                  disabled={!speechSupported}
+                  className="bg-green-600 disabled:bg-gray-400 disabled:cursor-not-allowed text-white px-8 py-4 rounded-full font-semibold hover:bg-green-700 transition-colors flex items-center shadow-lg"
+                >
+                  <Mic className="w-6 h-6 mr-2" />
+                  Start Recording
+                </button>
+              ) : (
+                <button
+                  onClick={stopRecording}
+                  className="bg-red-600 text-white px-8 py-4 rounded-full font-semibold hover:bg-red-700 transition-colors flex items-center shadow-lg animate-pulse"
+                >
+                  <MicOff className="w-6 h-6 mr-2" />
+                  Stop Recording
+                </button>
+              )}
+
+              {/* Mic language selector removed for simplicity; we infer from group source */}
+
+              <button
+                onClick={endSession}
+                className="bg-gray-600 text-white px-6 py-4 rounded-full font-semibold hover:bg-gray-700 transition-colors flex items-center"
+              >
+                <StopCircle className="w-5 h-5 mr-2" />
+                End Session
+              </button>
+              {/* Preload button removed; model warm-up runs automatically */}
+              <button
+                onClick={deleteSession}
+                className="bg-red-600 text-white px-6 py-4 rounded-full font-semibold hover:bg-red-700 transition-colors flex items-center"
+              >
+                <Trash2 className="w-5 h-5 mr-2" />
+                Delete Session
+              </button>
+              <button
+                onClick={handleExport}
+                className="bg-white border px-6 py-4 rounded-full font-semibold hover:bg-gray-50 transition-colors flex items-center"
+                title="Export this session as JSON so you can delete safely if storage is full"
+              >
+                <Download className="w-5 h-5 mr-2" />
+                Export JSON
+              </button>
+            </div>
+
+
+            {/* Advanced audio upload for Whisper STT */}
+            {apiOk && sttAvailable && (
+              <div className="mt-4">
+                <label className="block text-sm text-gray-600 mb-1">Upload audio (Whisper)</label>
+                <div className="flex items-center gap-2">
+                  <input
+                    type="file"
+                    accept="audio/*"
+                    onChange={async (e) => {
+                      const file = e.target.files?.[0];
+                      if (!file) return;
+                      setSttBusy(true);
+                      try {
+                        // Use transcribeAudio from lib/api for Whisper backend
+                        const res = await transcribeAudio(file, (group?.source_language || undefined));
+                        if (res && res.text && res.text.trim()) {
+                          await saveSegment(res.text.trim());
+                        }
+                      } finally {
+                        setSttBusy(false);
+                        e.currentTarget.value = '';
+                      }
+                    }}
+                    disabled={sttBusy}
+                    className="border rounded-lg px-3 py-2 text-sm"
+                  />
+                  {sttBusy && <span className="text-xs text-gray-500">Transcribing…</span>}
+                </div>
+                <div className="text-xs text-gray-500 mt-1">Supported: common audio types; processed server-side via Whisper.</div>
+              </div>
+            )}
+            {apiOk && (
+              <div className="mt-2 text-center">
+                <span className="text-xs text-gray-500">
+                  Model: {modelReady === null ? 'warming…' : modelReady ? 'ready' : 'will load on first request'}
+                </span>
+              </div>
+            )}
+
+            {isRecording && (
+              <div className="text-center mb-4">
+                <div className="inline-flex items-center bg-red-100 text-red-700 px-4 py-2 rounded-full">
+                  <span className="w-3 h-3 bg-red-600 rounded-full mr-2 animate-pulse"></span>
+                  Recording in progress
+                </div>
+              </div>
+            )}
+            {!isRecording && !speechSupported && (
+              <div className="text-center mb-4">
+                <div className="inline-flex items-center bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full">
+                  Your browser doesn't support Speech Recognition. Use Chrome/Edge or the manual input below.
+                </div>
+              </div>
+            )}
+            {/* Manual input fallback for quick testing or browsers without speech recognition */}
+            <ManualInput onSubmit={saveSegment} disabled={!!isRecording && !!recognitionRef.current} />
+          </div>
+        </div>
+
+        <div className="bg-white rounded-xl shadow-lg p-6">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-xl font-bold text-gray-900">Live Transcription</h2>
+            <button
+              onClick={retryTranslateMissing}
+              disabled={bulkRetrying || segments.every((s) => s.translated_text && s.translated_text !== s.original_text)}
+              className="text-sm px-3 py-1 rounded-md border disabled:opacity-50 hover:bg-gray-50"
+              title="Retry translation for lines without English"
+            >
+              {bulkRetrying ? 'Translating…' : 'Translate missing'}
+            </button>
+          </div>
+          <div className="space-y-3 max-h-96 overflow-y-auto">
+            <div className="text-xs text-gray-500 mb-2">Approx. storage used by this app: {Math.round(LocalDB.getStorageBytes()/1024)} KB</div>
+            {segments
+              .slice()
+              .sort((a, b) => a.sequence_number - b.sequence_number)
+              .map((segment) => (
+                <div key={segment.id} className="bg-gray-50 rounded-lg p-4">
+                  <p className="text-gray-900">{segment.original_text}</p>
+                  {!showOriginalsOnly && (
+                    <>
+                      {translatingIds.has(segment.id) || segment.translated_text === null ? (
+                        <div className="mt-2 flex items-center gap-2">
+                          <span className="text-xs text-blue-400 animate-pulse">Processing…</span>
+                        </div>
+                      ) : segment.translated_text && segment.translated_text !== segment.original_text ? (
+                        <p className="text-blue-600 text-sm mt-2 italic">{segment.translated_text}</p>
+                      ) : (
+                        <div className="mt-2 flex items-center gap-2">
+                          <span className="text-xs text-gray-400">No English yet</span>
+                          <button
+                            onClick={() => retryTranslateOne(segment)}
+                            disabled={retryingIds.has(segment.id)}
+                            className="text-xs px-2 py-1 border rounded-md disabled:opacity-50 hover:bg-gray-50"
+                          >
+                            {retryingIds.has(segment.id) ? 'Translating…' : 'Translate'}
+                          </button>
+                        </div>
+                      )}
+                    </>
+                  )}
+                  <span className="text-xs text-gray-500 mt-2 block">
+                    {new Date(segment.created_at).toLocaleTimeString()}
+                  </span>
+                </div>
+              ))}
+            {interimText && (
+              <div className="bg-yellow-50 rounded-lg p-4 border-2 border-yellow-200">
+                <p className="text-gray-700 italic">{interimText}</p>
+                <span className="text-xs text-gray-500 mt-2 block">Processing...</span>
+              </div>
+            )}
+            {segments.length === 0 && !interimText && (
+              <div className="text-center py-12 text-gray-500">
+                <Mic className="w-12 h-12 mx-auto mb-3 text-gray-400" />
+                <p>Start recording to see live transcriptions appear here</p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {showQR && group && (
+        <QRCodeDisplay
+          joinCode={group.join_code}
+          groupName={group.name}
+          onClose={() => setShowQR(false)}
+        />
+      )}
+    </div>
+  );
+}
+
+function ManualInput({ onSubmit, disabled }: { onSubmit: (text: string) => void | Promise<void>; disabled?: boolean }) {
+  const [text, setText] = useState('');
+  const [busy, setBusy] = useState(false);
+  const canSubmit = text.trim().length > 0 && !busy && !disabled;
+  return (
+    <div className="mt-4">
+      <label className="block text-sm text-gray-600 mb-1">Type a line to add manually</label>
+      <div className="flex gap-2">
+        <input
+          type="text"
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          onKeyDown={async (e) => {
+            if (e.key === 'Enter' && canSubmit) {
+              setBusy(true);
+              await onSubmit(text.trim());
+              setText('');
+              setBusy(false);
+            }
+          }}
+          className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          placeholder="Hello everyone..."
+          disabled={disabled}
+        />
+        <button
+          onClick={async () => {
+            if (!canSubmit) return;
+            setBusy(true);
+            await onSubmit(text.trim());
+            setText('');
+            setBusy(false);
+          }}
+          disabled={!canSubmit}
+          className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-blue-700"
+        >
+          Add
+        </button>
+      </div>
+    </div>
+  );
+}

src/components/JoinGroup.tsx

@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+import { X, Loader2 } from 'lucide-react';
+import { LocalDB } from '../lib/localdb';
+import { useAuth } from '../contexts/useAuth';
+import { useNavigate } from './NavigationHooks';
+
+interface JoinGroupProps {
+  onClose: () => void;
+}
+
+export function JoinGroup({ onClose }: JoinGroupProps) {
+  const { user } = useAuth();
+  const navigate = useNavigate();
+  const [joinCode, setJoinCode] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!user) return;
+
+    setLoading(true);
+    setError('');
+
+    try {
+      const group = LocalDB.findActiveGroupByJoinCode(joinCode);
+      if (!group) {
+        setError('Invalid or expired join code');
+        return;
+      }
+
+      LocalDB.addMember(group.id, user.id, false);
+
+      navigate(`/viewer/${group.id}`);
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to join group');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md">
+        <div className="flex items-center justify-between p-6 border-b border-gray-200">
+          <h2 className="text-2xl font-bold text-gray-900">Join a Session</h2>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-600 transition-colors"
+          >
+            <X className="w-6 h-6" />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="p-6 space-y-4">
+          <div>
+            <label htmlFor="joinCode" className="block text-sm font-medium text-gray-700 mb-1">
+              Join Code
+            </label>
+            <input
+              id="joinCode"
+              type="text"
+              value={joinCode}
+              onChange={(e) => setJoinCode(e.target.value.toUpperCase())}
+              required
+              maxLength={6}
+              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent uppercase text-center text-2xl font-mono tracking-widest"
+              placeholder="ABC123"
+            />
+            <p className="mt-2 text-sm text-gray-500">
+              Enter the 6-character code from the host
+            </p>
+          </div>
+
+          {error && (
+            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
+              {error}
+            </div>
+          )}
+
+          <button
+            type="submit"
+            disabled={loading || joinCode.length !== 6}
+            className="w-full bg-green-600 text-white py-3 rounded-lg font-semibold hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center"
+          >
+            {loading ? (
+              <>
+                <Loader2 className="w-5 h-5 mr-2 animate-spin" />
+                Joining...
+              </>
+            ) : (
+              'Join Session'
+            )}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

src/components/MyGroups.tsx

@@ -0,0 +1,125 @@
+import { useEffect, useState, useCallback } from 'react';
+import { LocalDB, Group as LocalGroup } from '../lib/localdb';
+import { useAuth } from '../contexts/useAuth';
+import { Radio, Users, Clock, Trash2 } from 'lucide-react';
+import { useNavigate } from './NavigationHooks';
+
+type UserGroup = LocalGroup & { isHost: boolean };
+
+export function MyGroups() {
+  const { user } = useAuth();
+  const navigate = useNavigate();
+  const [groups, setGroups] = useState<UserGroup[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const loadGroups = useCallback(() => {
+    if (!user) return;
+    try {
+      const groupsForUser = LocalDB.getGroupsForUser(user.id) as UserGroup[];
+      setGroups(groupsForUser);
+    } finally {
+      setLoading(false);
+    }
+  }, [user]);
+
+  useEffect(() => {
+    if (!user) return;
+    loadGroups();
+  }, [user, loadGroups]);
+
+  // ...existing code...
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return (
+      date.toLocaleDateString() +
+      ' ' +
+      date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+    );
+  };
+
+  if (loading) {
+    return (
+      <div className="bg-white rounded-xl shadow-md p-8">
+        <div className="animate-pulse space-y-4">
+          <div className="h-4 bg-gray-200 rounded w-1/4"></div>
+          <div className="h-20 bg-gray-200 rounded"></div>
+        </div>
+      </div>
+    );
+  }
+
+  if (groups.length === 0) {
+    return (
+      <div className="bg-white rounded-xl shadow-md p-8 text-center">
+        <Radio className="w-12 h-12 text-gray-400 mx-auto mb-4" />
+        <h3 className="text-lg font-semibold text-gray-900 mb-2">No Sessions Yet</h3>
+        <p className="text-gray-600">Create a session to host or join one with a code</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white rounded-xl shadow-md p-6">
+      <h2 className="text-2xl font-bold text-gray-900 mb-4">My Sessions</h2>
+      <div className="space-y-3">
+        {groups.map((group) => (
+          <div
+            key={group.id}
+            className="w-full bg-gray-50 rounded-lg p-4 text-left group hover:bg-gray-100 transition-colors"
+          >
+            <div className="flex items-start justify-between">
+              <button
+                onClick={() =>
+                  navigate(group.isHost ? `/host/${group.id}` : `/viewer/${group.id}`)
+                }
+                className="flex-1 text-left"
+              >
+                <div className="flex items-center mb-2">
+                  <h3 className="text-lg font-semibold text-gray-900">{group.name}</h3>
+                  {group.is_active && (
+                    <span className="ml-3 px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded-full">
+                      Active
+                    </span>
+                  )}
+                  {group.isHost && (
+                    <span className="ml-2 px-2 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded-full">
+                      Host
+                    </span>
+                  )}
+                </div>
+                <div className="flex items-center text-sm text-gray-600 space-x-4">
+                  <span className="flex items-center">
+                    <Clock className="w-4 h-4 mr-1" />
+                    {formatDate(group.created_at)}
+                  </span>
+                  <span className="flex items-center">
+                    <Users className="w-4 h-4 mr-1" />
+                    Code: {group.join_code}
+                  </span>
+                </div>
+              </button>
+              {group.isHost && (
+                <button
+                  aria-label="Delete session"
+                  title="Delete session"
+                  onClick={() => {
+                    if (
+                      confirm('Delete this session? This will remove all local data for it.')
+                    ) {
+                      LocalDB.deleteGroup(group.id);
+                      setGroups((prev) => prev.filter((g) => g.id !== group.id));
+                    }
+                  }}
+                  className="ml-3 p-2 rounded-lg text-red-600 hover:bg-red-50"
+                >
+                  <Trash2 className="w-5 h-5" />
+                </button>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/Navigation.tsx

@@ -0,0 +1,30 @@
+import { createContext, useState, useEffect } from 'react';
+
+export interface NavigationContextType {
+  currentPath: string;
+  navigate: (path: string) => void;
+}
+
+export const NavigationContext = createContext<NavigationContextType | undefined>(undefined);
+
+export function NavigationProvider({ children }: { children: any }) {
+  const [currentPath, setCurrentPath] = useState<string>(window.location.hash.slice(1) || '/');
+
+  useEffect(() => {
+    const handleHashChange = () => {
+      setCurrentPath(window.location.hash.slice(1) || '/');
+    };
+    window.addEventListener('hashchange', handleHashChange);
+    return () => window.removeEventListener('hashchange', handleHashChange);
+  }, []);
+
+  const navigate = (path: string) => {
+    window.location.hash = path;
+  };
+
+  return (
+    <NavigationContext.Provider value={{ currentPath, navigate }}>
+      {children}
+    </NavigationContext.Provider>
+  );
+}

src/components/NavigationHooks.ts

@@ -0,0 +1,18 @@
+import { useContext } from 'react';
+import { NavigationContext, NavigationContextType } from './Navigation';
+
+export function useNavigate() {
+  const context = useContext(NavigationContext) as NavigationContextType | undefined;
+  if (!context) {
+    throw new Error('useNavigate must be used within NavigationProvider');
+  }
+  return context.navigate;
+}
+
+export function useCurrentPath() {
+  const context = useContext(NavigationContext) as NavigationContextType | undefined;
+  if (!context) {
+    throw new Error('useCurrentPath must be used within NavigationProvider');
+  }
+  return context.currentPath;
+}

src/components/QRCodeDisplay.tsx

@@ -0,0 +1,45 @@
+import { X } from 'lucide-react';
+
+interface QRCodeDisplayProps {
+  joinCode: string;
+  groupName: string;
+  onClose: () => void;
+}
+
+export function QRCodeDisplay({ joinCode, groupName, onClose }: QRCodeDisplayProps) {
+  const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodeURIComponent(joinCode)}`;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md">
+        <div className="flex items-center justify-between p-6 border-b border-gray-200">
+          <h2 className="text-2xl font-bold text-gray-900">Share Session</h2>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-600 transition-colors"
+          >
+            <X className="w-6 h-6" />
+          </button>
+        </div>
+
+        <div className="p-6 text-center">
+          <p className="text-gray-600 mb-4">Scan this QR code to join</p>
+          <p className="text-xl font-bold text-gray-900 mb-6">{groupName}</p>
+
+          <div className="bg-gray-100 rounded-xl p-6 mb-6">
+            <img
+              src={qrCodeUrl}
+              alt="QR Code"
+              className="w-full max-w-xs mx-auto"
+            />
+          </div>
+
+          <div className="bg-blue-50 rounded-lg p-4">
+            <p className="text-sm text-gray-600 mb-2">Or enter this code:</p>
+            <p className="text-4xl font-mono font-bold text-blue-600">{joinCode}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/ViewerView.tsx

@@ -0,0 +1,273 @@
+import { useEffect, useState, useCallback } from 'react';
+import { LocalDB, Group, TranscriptionSegment } from '../lib/localdb';
+import { getSegmentsForViewer } from '../lib/localdb';
+import { useAuth } from '../contexts/useAuth';
+import { useNavigate } from './NavigationHooks';
+import { Radio, Users, ArrowLeft } from 'lucide-react';
+
+interface ViewerViewProps {
+  groupId: string;
+}
+
+export function ViewerView({ groupId }: ViewerViewProps) {
+  // Responsive design improvements applied; no unused code remains
+  // Investor Mode state
+  const [investorMode, setInvestorMode] = useState(false);
+  const [supportedPairs, setSupportedPairs] = useState<string[]>([]);
+  const [backendHealth, setBackendHealth] = useState<string>('');
+
+  // Fetch supported pairs and backend health for investor mode
+  useEffect(() => {
+    if (investorMode) {
+      fetch('/models')
+        .then(res => res.json())
+        .then(data => setSupportedPairs(data.models || []));
+      fetch('/health')
+        .then(res => res.json())
+        .then(data => setBackendHealth(data.device || 'unknown'));
+    }
+  }, [investorMode]);
+  // Target language selection removed for reliability
+  // Target language state (persist per viewer)
+  const viewerId = 'viewer_' + (window.navigator.userAgent || 'default'); // Replace with real viewer ID if available
+  const { user } = useAuth();
+  const navigate = useNavigate();
+  const [group, setGroup] = useState<Group | null>(null);
+  const [segments, setSegments] = useState<TranscriptionSegment[]>([]);
+  const [memberCount, setMemberCount] = useState(0);
+  const [isActive, setIsActive] = useState(true);
+
+  const loadGroup = useCallback(async () => {
+    const data = LocalDB.getGroupById(groupId);
+    if (data) {
+      setGroup(data);
+      setIsActive(data.is_active);
+    } else {
+      navigate('/');
+    }
+  }, [groupId, navigate]);
+
+  const loadSegments = useCallback(async () => {
+  const data = getSegmentsForViewer(groupId, viewerId);
+  setSegments(data);
+    setTimeout(() => {
+      const container = document.getElementById('transcription-container');
+      if (container) {
+        container.scrollTop = container.scrollHeight;
+      }
+    }, 100);
+  }, [groupId]);
+
+  const loadMemberCount = useCallback(async () => {
+    setMemberCount(LocalDB.getMemberCount(groupId));
+  }, [groupId]);
+
+  useEffect(() => {
+    if (!user) return;
+
+  loadGroup();
+  loadSegments();
+  loadMemberCount();
+
+    const unsubSeg = LocalDB.onSegmentsInserted(groupId, (_) => {
+      loadSegments();
+      setTimeout(() => {
+        const container = document.getElementById('transcription-container');
+        if (container) {
+          container.scrollTop = container.scrollHeight;
+        }
+      }, 100);
+    });
+
+    const unsubGroup = LocalDB.onGroupUpdated(groupId, (updated) => {
+      setGroup(updated);
+      setIsActive(updated.is_active);
+    });
+
+    const unsubMembers = LocalDB.onMembersChanged(groupId, () => {
+      loadMemberCount();
+    });
+
+    return () => {
+      unsubSeg();
+      unsubGroup();
+      unsubMembers();
+    };
+  }, [groupId, user, loadGroup, loadSegments, loadMemberCount]);
+
+  // ...existing code...
+
+  const leaveSession = async () => {
+    if (user) {
+      LocalDB.removeMember(groupId, user.id);
+    }
+    navigate('/');
+  };
+
+  if (!group) {
+    return (
+      <>
+        {/* Branding & Value Proposition Overlay */}
+        <div className="fixed top-0 left-0 w-full z-40 bg-gradient-to-r from-green-400 to-blue-500 text-white py-4 px-6 flex items-center justify-between shadow-lg animate-fade-in">
+          <div className="flex items-center gap-3">
+            <img src="/logo.svg" alt="Brand Logo" className="h-8 w-8 rounded-full shadow-md" />
+            <span className="font-extrabold text-xl tracking-wide">Live Multilingual Demo</span>
+          </div>
+          <span className="font-semibold text-sm">Break language barriers instantly in meetings, events, and broadcasts.</span>
+        </div>
+        <div className="fixed top-4 right-4 z-50">
+          <button
+            className={`px-4 py-2 rounded-lg font-bold shadow-lg ${investorMode ? 'bg-yellow-400 text-black' : 'bg-gray-800 text-white'}`}
+            onClick={() => setInvestorMode(v => !v)}
+          >
+            {investorMode ? 'Exit Investor Mode' : 'Investor Mode'}
+          </button>
+        </div>
+        {investorMode && (
+          <div className="fixed top-16 right-4 z-50 bg-white border border-yellow-400 rounded-xl shadow-xl p-6 w-96 animate-fade-in">
+            <h2 className="text-2xl font-bold mb-2 text-yellow-600">Investor Pitch Mode</h2>
+            <p className="mb-4 text-gray-700">Break language barriers instantly in meetings, events, and broadcasts. Scalable, real-time, multilingual translation for global impact.</p>
+            <div className="mb-2">
+              <span className="font-semibold">Supported Language Pairs:</span>
+              <ul className="list-disc ml-6 text-sm mt-1">
+                {supportedPairs.map(pair => (
+                  <li key={pair}>{pair}</li>
+                ))}
+              </ul>
+            </div>
+            <div className="mb-2">
+              <span className="font-semibold">Backend Device:</span> <span className="text-blue-600">{backendHealth}</span>
+            </div>
+            <div className="mb-2">
+              <span className="font-semibold">Live Analytics:</span>
+              <ul className="list-disc ml-6 text-sm mt-1">
+                <li>Instant transcription and translation</li>
+                <li>Real-time error handling and retry</li>
+                <li>Mobile & desktop friendly</li>
+                <li>Cloud-ready, scalable backend</li>
+              </ul>
+            </div>
+            <div className="mt-4 text-center text-xs text-gray-500">
+              <span>Backend is cloud-ready and can scale to millions of users.</span>
+            </div>
+          </div>
+        )}
+        <div className="min-h-screen bg-gray-100 flex items-center justify-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-green-50">
+      <div className="max-w-4xl mx-auto p-4">
+        <div className="bg-white rounded-xl shadow-lg mb-4">
+          <div className="p-6 border-b border-gray-200">
+            <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center">
+                <button
+                  onClick={leaveSession}
+                  className="mr-4 p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                >
+                  <ArrowLeft className="w-6 h-6 text-gray-600" />
+                </button>
+                <div>
+                  <h1 className="text-2xl font-bold text-gray-900">{group.name}</h1>
+                  <p className="text-sm text-gray-600">Viewer Mode</p>
+                </div>
+              </div>
+              <div className="flex items-center space-x-3">
+                <div className="flex items-center bg-gray-100 rounded-lg px-3 py-2">
+                  <Users className="w-5 h-5 text-gray-600 mr-2" />
+                  <span className="font-semibold text-gray-900">{memberCount}</span>
+                </div>
+                {isActive ? (
+                  <div className="flex items-center bg-green-100 text-green-700 px-3 py-2 rounded-lg">
+                    <span className="w-2 h-2 bg-green-600 rounded-full mr-2 animate-pulse"></span>
+                    <span className="text-sm font-medium">Live</span>
+                  </div>
+                ) : (
+                  <div className="bg-gray-200 text-gray-700 px-3 py-2 rounded-lg">
+                    <span className="text-sm font-medium">Ended</span>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="mb-4 flex items-center gap-4">
+          <label className="text-sm font-semibold">Target Language:</label>
+          {/* Target language selection removed for reliability */}
+        </div>
+        <div className="bg-white rounded-xl shadow-lg p-6">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-xl font-bold text-gray-900">Live Transcription</h2>
+            {isActive && (
+              <div className="text-sm text-green-600 flex items-center">
+                <Radio className="w-4 h-4 mr-1 animate-pulse" />
+                Receiving updates
+              </div>
+            )}
+          </div>
+
+          <div
+            id="transcription-container"
+            className="space-y-3 max-h-[calc(100vh-300px)] overflow-y-auto"
+          >
+            {segments
+              .slice()
+              .sort((a, b) => a.sequence_number - b.sequence_number)
+              .map((segment) => (
+                <div
+                  key={segment.id}
+                  className="bg-gradient-to-r from-blue-50 to-green-50 rounded-lg p-4 shadow-sm border border-gray-200"
+                >
+                  <p className="text-gray-900 text-lg leading-relaxed">{segment.original_text}</p>
+                  {segment.translated_text === undefined ? (
+                    <div className="mt-2 flex items-center gap-2">
+                      <span className="text-xs text-blue-400 animate-pulse">Processing…</span>
+                    </div>
+                  ) : segment.translated_text && segment.translated_text !== segment.original_text ? (
+                    <p className="text-blue-600 mt-2 italic leading-relaxed">
+                      {segment.translated_text}
+                    </p>
+                  ) : (
+                    <div className="mt-2 flex flex-col gap-2">
+                      <span className="text-xs text-red-500">Translation failed or unavailable.</span>
+                      <button
+                        className="text-xs px-2 py-1 border rounded-md hover:bg-gray-50"
+                        onClick={() => window.location.reload()}
+                        title="Retry translation"
+                      >
+                        Retry
+                      </button>
+                    </div>
+                  )}
+                  <span className="text-xs text-gray-500 mt-2 block">
+                    {new Date(segment.created_at).toLocaleTimeString()}
+                  </span>
+                </div>
+              ))}
+
+            {segments.length === 0 && (
+              <div className="text-center py-16 text-gray-500">
+                <Radio className="w-16 h-16 mx-auto mb-4 text-gray-400" />
+                <p className="text-lg font-medium">Waiting for transcription to start...</p>
+                <p className="text-sm mt-2">The host will begin broadcasting shortly</p>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {!isActive && segments.length > 0 && (
+          <div className="mt-4 bg-yellow-50 border border-yellow-200 rounded-lg p-4 text-center">
+            <p className="text-yellow-800 font-medium">This session has ended</p>
+            <p className="text-yellow-700 text-sm mt-1">You can still view the transcription above</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/contexts/AuthContext.tsx

@@ -0,0 +1,79 @@
+import { createContext, useEffect, useState } from 'react';
+import { User } from '@supabase/supabase-js';
+import { supabase } from '../lib/supabase';
+
+// Temporary bypass for login/auth while developing. Set to false to restore auth.
+// TODO: Remove this flag when enabling real authentication again.
+const BYPASS_AUTH = true;
+
+interface AuthContextType {
+  user: User | null;
+  loading: boolean;
+  signUp: (email: string, password: string) => Promise<void>;
+  signIn: (email: string, password: string) => Promise<void>;
+  signOut: () => Promise<void>;
+}
+
+export const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export function AuthProvider({ children }: { children: any }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+  console.log('[AuthContext] Initial user:', user, 'loading:', loading);
+
+  useEffect(() => {
+    if (BYPASS_AUTH) {
+      // Minimal dummy user object to satisfy types and UI logic
+      // Casting to User to avoid pulling in all required fields
+      const dummyUser = { id: 'dev-user' } as unknown as User;
+      setUser(dummyUser);
+      setLoading(false);
+      console.log('[AuthContext] BYPASS_AUTH set user:', dummyUser);
+      return;
+    }
+
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      setUser(session?.user ?? null);
+      setLoading(false);
+    });
+
+    const { data: { subscription } } = supabase.auth.onAuthStateChange((_event: any, session: any) => {
+      (async () => {
+        setUser(session?.user ?? null);
+      })();
+    });
+
+    return () => subscription.unsubscribe();
+  }, []);
+
+  const signUp = async (email: string, password: string) => {
+    if (BYPASS_AUTH) return; // no-op while auth is bypassed
+    const { error } = await supabase.auth.signUp({
+      email,
+      password,
+    });
+    if (error) throw error;
+  };
+
+  const signIn = async (email: string, password: string) => {
+    if (BYPASS_AUTH) return; // no-op while auth is bypassed
+    const { error } = await supabase.auth.signInWithPassword({
+      email,
+      password,
+    });
+    if (error) throw error;
+  };
+
+  const signOut = async () => {
+    if (BYPASS_AUTH) return; // no-op while auth is bypassed
+    const { error } = await supabase.auth.signOut();
+    if (error) throw error;
+  };
+
+  return (
+    <AuthContext.Provider value={{ user, loading, signUp, signIn, signOut }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+

src/contexts/useAuth.ts

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { AuthContext } from './AuthContext';
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+}

src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/lib/api.ts

@@ -0,0 +1,92 @@
+export interface TranslateRequest {
+  text: string;
+  source_language: string;
+  target_language: string;
+}
+
+export interface PreloadRequest {
+  source_language: string;
+  target_language: string;
+}
+
+const ENV_BASE = (import.meta as any).env?.VITE_API_URL as string | undefined;
+const IS_PROD = (import.meta as any).env?.PROD as boolean | undefined;
+// Dev default hits local FastAPI; prod default uses same-origin (Space serves both)
+// Always talk to '/api' to avoid any collision with static frontend routes.
+const DEFAULT_BASE = IS_PROD
+  ? (typeof window !== 'undefined' ? `${window.location.origin}/api` : undefined)
+  : 'http://127.0.0.1:8000/api';
+const API_BASE: string | undefined = ENV_BASE ?? DEFAULT_BASE;
+
+export async function translateText(req: TranslateRequest): Promise<string | null> {
+  if (!API_BASE) return null;
+  try {
+  const res = await fetch(`${API_BASE}/translate`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(req),
+    });
+    if (!res.ok) return null;
+    const data = await res.json();
+    return (data && data.translated_text) || null;
+  } catch (e) {
+    return null;
+  }
+}
+
+export async function apiHealth(): Promise<boolean> {
+  if (!API_BASE) return false;
+  try {
+  const res = await fetch(`${API_BASE}/health`);
+    return res.ok;
+  } catch {
+    return false;
+  }
+}
+
+export async function preloadModel(req: PreloadRequest): Promise<boolean> {
+  if (!API_BASE) return false;
+  try {
+  const res = await fetch(`${API_BASE}/preload`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(req),
+    });
+    if (!res.ok) return false;
+    const data = await res.json();
+    return !!data?.ok;
+  } catch {
+    return false;
+  }
+}
+
+export async function transcribeAudio(file: File, language?: string): Promise<{ text: string; language?: string } | null> {
+  if (!API_BASE) return null;
+  try {
+    const form = new FormData();
+    form.append('audio', file);
+    if (language) form.append('language', language);
+  const res = await fetch(`${API_BASE}/transcribe`, {
+      method: 'POST',
+      body: form,
+    });
+    if (!res.ok) return null;
+    const data = await res.json();
+    if (typeof data?.text === 'string') return { text: data.text, language: data.language };
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+export async function sttStatus(): Promise<boolean> {
+  if (!API_BASE) return false;
+  try {
+  const res = await fetch(`${API_BASE}/stt_status`);
+    if (!res.ok) return false;
+    const data = await res.json();
+    return !!data?.available;
+  } catch {
+    return false;
+  }
+}

src/lib/localdb.ts

@@ -0,0 +1,399 @@
+// Use LocalDB.getSegments and TranscriptionSegment type from this file
+// Store per-viewer target language preference
+export function setViewerLanguage(viewerId: string, language: string) {
+  localStorage.setItem(`viewer_language_${viewerId}`, language);
+}
+
+export function getViewerLanguage(viewerId: string): string {
+  return localStorage.getItem(`viewer_language_${viewerId}`) || 'en';
+}
+
+// Optionally, update segment retrieval to use viewer's language
+// Example usage: getSegmentsForViewer(groupId, viewerId)
+export function getSegmentsForViewer(groupId: string, viewerId: string) {
+  const segments: TranscriptionSegment[] = LocalDB.getSegments(groupId);
+  const lang = getViewerLanguage(viewerId);
+  // Filter or map segments to show translation in viewer's language
+  return segments.map((seg: TranscriptionSegment) => ({
+    ...seg,
+    translated_text: seg.translations?.[lang] || seg.translated_text || seg.original_text,
+  }));
+}
+// Simple local data store using localStorage + in-memory events.
+// This replaces the need for any backend. Data is stored per-browser.
+// Cross-tab realtime: uses BroadcastChannel when available, with
+// a localStorage 'storage' event fallback so viewers in another tab/window
+// get immediate updates.
+
+export interface Group {
+  id: string;
+  name: string;
+  host_id: string;
+  join_code: string;
+  source_language: string;
+  target_language: string;
+  is_active: boolean;
+  created_at: string;
+  expires_at: string;
+}
+
+export interface GroupMember {
+  id: string;
+  group_id: string;
+  user_id: string;
+  joined_at: string;
+  is_host: boolean;
+}
+
+export interface TranscriptionSegment {
+  id: string;
+  group_id: string;
+  original_text: string;
+  translated_text: string | null;
+  sequence_number: number;
+  created_at: string;
+  created_by: string;
+  // Map of language code to translated text
+  translations?: { [lang: string]: string };
+}
+
+// Storage keys
+const K = {
+  groups: 'lt_groups',
+  members: 'lt_group_members',
+  segments: 'lt_segments',
+};
+
+function readArray<T>(key: string): T[] {
+  try {
+    const raw = localStorage.getItem(key);
+    return raw ? (JSON.parse(raw) as T[]) : [];
+  } catch {
+    return [];
+  }
+}
+
+function writeArray<T>(key: string, arr: T[]) {
+  localStorage.setItem(key, JSON.stringify(arr));
+}
+
+function uuid() {
+  // Use crypto if available for stable unique ids
+  if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
+    return (crypto as any).randomUUID();
+  }
+  return 'id-' + Math.random().toString(36).slice(2) + Date.now().toString(36);
+}
+
+// Event Emitter for simple realtime within the same tab
+type Unsubscribe = () => void;
+const listeners = {
+  segmentsInserted: new Map<string, Set<(segment: TranscriptionSegment) => void>>(),
+  segmentsUpdated: new Map<string, Set<(segment: TranscriptionSegment) => void>>(),
+  groupUpdated: new Map<string, Set<(group: Group) => void>>(),
+  membersChanged: new Map<string, Set<() => void>>(),
+};
+
+type DBEvent =
+  | { type: 'segmentInserted'; groupId: string; payload: TranscriptionSegment }
+  | { type: 'segmentUpdated'; groupId: string; payload: TranscriptionSegment }
+  | { type: 'groupUpdated'; groupId: string; payload: Group }
+  | { type: 'membersChanged'; groupId: string };
+
+// Broadcast channel (if supported)
+const bc: BroadcastChannel | null =
+  typeof window !== 'undefined' && 'BroadcastChannel' in window
+    ? new (window as any).BroadcastChannel('lt_events')
+    : null;
+
+function broadcast(evt: DBEvent) {
+  try {
+    bc?.postMessage(evt);
+  } catch {
+    // ignore cross-tab post failures
+  }
+  try {
+    // storage event fallback (fires in other tabs only)
+    localStorage.setItem('lt_event', JSON.stringify({ ...evt, ts: Date.now() }));
+  } catch {
+    // ignore storage fallback errors (quota/unsupported)
+  }
+}
+
+function handleEvent(evt: DBEvent) {
+  switch (evt.type) {
+    case 'segmentInserted':
+      emitSegmentInserted(evt.groupId, evt.payload);
+      break;
+    case 'segmentUpdated':
+      emitSegmentUpdated(evt.groupId, evt.payload);
+      break;
+    case 'groupUpdated':
+      emitGroupUpdated(evt.groupId, evt.payload);
+      break;
+    case 'membersChanged':
+      emitMembersChanged(evt.groupId);
+      break;
+  }
+}
+
+// Wire listeners for cross-tab communication once (module load)
+if (bc) {
+  try {
+    bc.onmessage = (e: MessageEvent<DBEvent>) => {
+      const data = e.data;
+      if (data && typeof data === 'object' && 'type' in data) handleEvent(data);
+    };
+  } catch {
+    // ignore BroadcastChannel wiring errors (unsupported env)
+  }
+}
+try {
+  window.addEventListener('storage', (e: StorageEvent) => {
+    if (e.key !== 'lt_event' || !e.newValue) return;
+    try {
+      const data = JSON.parse(e.newValue) as DBEvent & { ts?: number };
+      if (data && typeof data === 'object' && 'type' in data) handleEvent(data);
+    } catch {
+      // ignore malformed storage events
+    }
+  });
+} catch {
+  // ignore storage event wiring errors (non-browser env)
+}
+
+function emitSegmentInserted(groupId: string, seg: TranscriptionSegment) {
+  const set = listeners.segmentsInserted.get(groupId);
+  set?.forEach((cb) => cb(seg));
+  // cross-tab
+  broadcast({ type: 'segmentInserted', groupId, payload: seg });
+}
+function emitSegmentUpdated(groupId: string, seg: TranscriptionSegment) {
+  const set = listeners.segmentsUpdated.get(groupId);
+  set?.forEach((cb) => cb(seg));
+  // cross-tab
+  broadcast({ type: 'segmentUpdated', groupId, payload: seg });
+}
+function emitGroupUpdated(groupId: string, group: Group) {
+  const set = listeners.groupUpdated.get(groupId);
+  set?.forEach((cb) => cb(group));
+  // cross-tab
+  broadcast({ type: 'groupUpdated', groupId, payload: group });
+}
+function emitMembersChanged(groupId: string) {
+  const set = listeners.membersChanged.get(groupId);
+  set?.forEach((cb) => cb());
+  // cross-tab
+  broadcast({ type: 'membersChanged', groupId });
+}
+
+export const LocalDB = {
+  // Groups
+  createGroup(args: {
+    name: string;
+    hostId: string;
+    joinCode: string;
+    sourceLanguage: string;
+    targetLanguage: string;
+  }): Group {
+    const groups = readArray<Group>(K.groups);
+    const now = new Date().toISOString();
+    const group: Group = {
+      id: uuid(),
+      name: args.name,
+      host_id: args.hostId,
+      join_code: args.joinCode,
+      source_language: args.sourceLanguage,
+      target_language: args.targetLanguage,
+      is_active: true,
+      created_at: now,
+      expires_at: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(),
+    };
+    groups.unshift(group);
+    writeArray(K.groups, groups);
+    emitGroupUpdated(group.id, group);
+    return group;
+  },
+  setGroupActive(groupId: string, active: boolean) {
+    const groups = readArray<Group>(K.groups);
+    const idx = groups.findIndex((g) => g.id === groupId);
+    if (idx >= 0) {
+      groups[idx] = { ...groups[idx], is_active: active };
+      writeArray(K.groups, groups);
+      emitGroupUpdated(groupId, groups[idx]);
+    }
+  },
+  getGroupById(groupId: string): Group | null {
+    const groups = readArray<Group>(K.groups);
+    return groups.find((g) => g.id === groupId) || null;
+  },
+  findActiveGroupByJoinCode(code: string): Group | null {
+    const groups = readArray<Group>(K.groups);
+    const c = code.toUpperCase();
+    return groups.find((g) => g.join_code === c && g.is_active) || null;
+  },
+  generateUniqueJoinCode(): string {
+    const groups = readArray<Group>(K.groups);
+    const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
+    // Try a few times to avoid collisions
+    for (let attempt = 0; attempt < 20; attempt++) {
+      let code = '';
+      for (let i = 0; i < 6; i++) code += chars[Math.floor(Math.random() * chars.length)];
+      if (!groups.some((g) => g.join_code === code)) return code;
+    }
+    return Math.random().toString(36).slice(2, 8).toUpperCase();
+  },
+  deleteGroup(groupId: string) {
+    // remove group
+    const groups = readArray<Group>(K.groups).filter((g) => g.id !== groupId);
+    writeArray(K.groups, groups);
+    // remove members
+    const members = readArray<GroupMember>(K.members).filter((m) => m.group_id !== groupId);
+    writeArray(K.members, members);
+    emitMembersChanged(groupId);
+    // remove segments
+    const segs = readArray<TranscriptionSegment>(K.segments).filter((s) => s.group_id !== groupId);
+    writeArray(K.segments, segs);
+  },
+
+  // Members
+  addMember(groupId: string, userId: string, isHost: boolean): GroupMember {
+    const members = readArray<GroupMember>(K.members);
+    const existing = members.find((m) => m.group_id === groupId && m.user_id === userId);
+    if (existing) return existing;
+    const member: GroupMember = {
+      id: uuid(),
+      group_id: groupId,
+      user_id: userId,
+      is_host: isHost,
+      joined_at: new Date().toISOString(),
+    };
+    members.push(member);
+    writeArray(K.members, members);
+    emitMembersChanged(groupId);
+    return member;
+  },
+  removeMember(groupId: string, userId: string) {
+    const members = readArray<GroupMember>(K.members);
+    const next = members.filter((m) => !(m.group_id === groupId && m.user_id === userId));
+    writeArray(K.members, next);
+    emitMembersChanged(groupId);
+  },
+  getMemberCount(groupId: string): number {
+    const members = readArray<GroupMember>(K.members);
+    return members.filter((m) => m.group_id === groupId).length;
+  },
+  getGroupsForUser(userId: string): (Group & { isHost: boolean })[] {
+    const members = readArray<GroupMember>(K.members).filter((m) => m.user_id === userId);
+    const ids = members.map((m) => m.group_id);
+    const groups = readArray<Group>(K.groups).filter((g) => ids.includes(g.id));
+    return groups
+      .map((g) => ({ ...g, isHost: !!members.find((m) => m.group_id === g.id)?.is_host }))
+      .sort((a, b) => +new Date(b.created_at) - +new Date(a.created_at));
+  },
+
+  // Segments
+  getSegments(groupId: string): TranscriptionSegment[] {
+    const segs = readArray<TranscriptionSegment>(K.segments)
+      .filter((s) => s.group_id === groupId)
+      .sort((a, b) => a.sequence_number - b.sequence_number);
+    return segs;
+  },
+  addSegment(args: {
+    groupId: string;
+    originalText: string;
+    translatedText: string | null;
+    sequenceNumber: number;
+    createdBy: string;
+  }): TranscriptionSegment {
+    const segs = readArray<TranscriptionSegment>(K.segments);
+    const seg: TranscriptionSegment = {
+      id: uuid(),
+      group_id: args.groupId,
+      original_text: args.originalText,
+      translated_text: args.translatedText,
+      sequence_number: args.sequenceNumber,
+      created_at: new Date().toISOString(),
+      created_by: args.createdBy,
+    };
+    segs.push(seg);
+    writeArray(K.segments, segs);
+    emitSegmentInserted(args.groupId, seg);
+    return seg;
+  },
+  // Update just the translated_text for an existing segment
+  updateSegmentTranslation(groupId: string, segmentId: string, translatedText: string | null): TranscriptionSegment | null {
+    const segs = readArray<TranscriptionSegment>(K.segments);
+    const idx = segs.findIndex((s) => s.id === segmentId && s.group_id === groupId);
+    if (idx === -1) return null;
+    const updated: TranscriptionSegment = { ...segs[idx], translated_text: translatedText };
+    segs[idx] = updated;
+    writeArray(K.segments, segs);
+    // Broadcast update so viewers/other tabs see the new translation immediately
+    emitSegmentUpdated(groupId, updated);
+    return updated;
+  },
+
+  // Subscriptions (per-group)
+  onSegmentsInserted(groupId: string, cb: (seg: TranscriptionSegment) => void): Unsubscribe {
+    const set = listeners.segmentsInserted.get(groupId) || new Set();
+    set.add(cb);
+    listeners.segmentsInserted.set(groupId, set);
+    return () => {
+      const s = listeners.segmentsInserted.get(groupId);
+      s?.delete(cb);
+    };
+  },
+  onSegmentUpdated(groupId: string, cb: (seg: TranscriptionSegment) => void): Unsubscribe {
+    const set = listeners.segmentsUpdated.get(groupId) || new Set();
+    set.add(cb);
+    listeners.segmentsUpdated.set(groupId, set);
+    return () => {
+      const s = listeners.segmentsUpdated.get(groupId);
+      s?.delete(cb);
+    };
+  },
+  onGroupUpdated(groupId: string, cb: (group: Group) => void): Unsubscribe {
+    const set = listeners.groupUpdated.get(groupId) || new Set();
+    set.add(cb);
+    listeners.groupUpdated.set(groupId, set);
+    return () => {
+      const s = listeners.groupUpdated.get(groupId);
+      s?.delete(cb);
+    };
+  },
+  onMembersChanged(groupId: string, cb: () => void): Unsubscribe {
+    const set = listeners.membersChanged.get(groupId) || new Set();
+    set.add(cb);
+    listeners.membersChanged.set(groupId, set);
+    return () => {
+      const s = listeners.membersChanged.get(groupId);
+      s?.delete(cb);
+    };
+  },
+  // Export a group's data for backup (so user can delete later if storage is full)
+  exportGroup(groupId: string): {
+    group: Group | null;
+    members: GroupMember[];
+    segments: TranscriptionSegment[];
+    exportedAt: string;
+  } {
+    const group = LocalDB.getGroupById(groupId);
+    const members = readArray<GroupMember>(K.members).filter((m) => m.group_id === groupId);
+    const segments = LocalDB.getSegments(groupId);
+    return { group, members, segments, exportedAt: new Date().toISOString() };
+  },
+  // Rough estimate of bytes used by our keys in localStorage
+  getStorageBytes(): number {
+    let total = 0;
+    for (const key of [K.groups, K.members, K.segments]) {
+      try {
+        const v = localStorage.getItem(key);
+        if (v) total += key.length + v.length;
+      } catch {
+        // ignore storage access errors
+      }
+    }
+    return total;
+  },
+};

src/lib/supabase.ts

@@ -0,0 +1,52 @@
+// Local stub replacing Supabase client so the app can run fully offline/local.
+// The real client is not needed when using the local data store.
+// Only minimal shape is provided to satisfy imports from AuthContext when auth bypass is enabled.
+export const supabase = {
+  auth: {
+    async getSession() {
+      return { data: { session: null }, error: null } as any;
+    },
+    onAuthStateChange(_cb: any) {
+      return { data: { subscription: { unsubscribe() {} } } } as any;
+    },
+    async signUp(_args: any) {
+      return { data: null, error: null } as any;
+    },
+    async signInWithPassword(_args: any) {
+      return { data: null, error: null } as any;
+    },
+    async signOut() {
+      return { error: null } as any;
+    },
+  },
+} as const;
+
+export interface Group {
+  id: string;
+  name: string;
+  host_id: string;
+  join_code: string;
+  source_language: string;
+  target_language: string;
+  is_active: boolean;
+  created_at: string;
+  expires_at: string;
+}
+
+export interface GroupMember {
+  id: string;
+  group_id: string;
+  user_id: string;
+  joined_at: string;
+  is_host: boolean;
+}
+
+export interface TranscriptionSegment {
+  id: string;
+  group_id: string;
+  original_text: string;
+  translated_text: string | null;
+  sequence_number: number;
+  created_at: string;
+  created_by: string;
+}

src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

src/useAuth.ts

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { AuthContext } from './contexts/AuthContext';
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+}

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

tsconfig.app.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

tsconfig.node.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  optimizeDeps: {
+    exclude: ['lucide-react'],
+  },
+});