VoxSplit POC

.dockerignore

@@ -0,0 +1,10 @@
+.venv/
+venv/
+__pycache__/
+*.pyc
+.env
+uploads/
+output/
+.git/
+.DS_Store
+agent-tools/

.env.example

@@ -0,0 +1,6 @@
+# Copy this file to .env and fill in your Sarvam AI subscription key.
+# Get one at https://dashboard.sarvam.ai
+SARVAM_API_KEY=your_sarvam_api_key_here
+
+# Expected number of speakers passed to Sarvam diarization (1-8).
+NUM_SPEAKERS=2

.gitignore

@@ -0,0 +1,8 @@
+.venv/
+venv/
+__pycache__/
+*.pyc
+.env
+uploads/
+output/
+.DS_Store

DEPLOY.md

@@ -0,0 +1,72 @@
+# Deploying the POC
+
+The app needs PyTorch + a ~360 MB model, so pick a host with **≥ 1–2 GB RAM**
+(the smallest free tiers like Render's 512 MB will OOM). A `Dockerfile` is
+included and works on any container host.
+
+Set your Sarvam key as a **secret env var** on the host — never commit `.env`:
+
+```
+SARVAM_API_KEY=your_key
+```
+
+---
+
+## Option A — Hugging Face Spaces (recommended, free, persistent)
+
+Free CPU Spaces give 16 GB RAM and a stable public URL like
+`https://<user>-voxsplit.hf.space` — ideal for an ML demo.
+
+1. Create a Space at https://huggingface.co/new-space → **SDK: Docker** → Blank.
+2. Push this folder to the Space's git repo (or upload files in the UI):
+   ```bash
+   git init && git add . && git commit -m "voxsplit poc"
+   git remote add space https://huggingface.co/spaces/<user>/voxsplit
+   git push space main
+   ```
+3. Space → **Settings → Variables and secrets** → add secret `SARVAM_API_KEY`.
+4. It builds the Dockerfile and serves on port 7860 automatically. Share the URL.
+
+> The Dockerfile pre-downloads the gender model during build, so the first
+> request is fast.
+
+## Option B — Render (Docker web service)
+
+1. Push this repo to GitHub.
+2. Render → **New → Web Service** → connect repo → it detects the `Dockerfile`.
+3. Instance type: pick one with **≥ 2 GB RAM** (Starter/Standard, not Free).
+4. Add env var `SARVAM_API_KEY`. Render injects `PORT`; the container already
+   honors it. Deploy and share the `*.onrender.com` URL.
+
+## Option C — Fly.io (Docker, good for long requests)
+
+```bash
+fly launch --no-deploy          # generates fly.toml from the Dockerfile
+fly secrets set SARVAM_API_KEY=your_key
+fly scale memory 2048           # give it 2 GB
+fly deploy
+```
+
+## Option D — Instant link, zero deploy (temporary)
+
+Fastest way to show a client *right now*, while your server runs locally:
+
+```bash
+# terminal 1: your app is already running on :8000
+# terminal 2:
+brew install cloudflared
+cloudflared tunnel --url http://localhost:8000
+```
+
+This prints a public `https://*.trycloudflare.com` link. Downsides: the link is
+temporary and your machine must stay on. (`ngrok http 8000` works the same way.)
+
+---
+
+## Heads-up: long transcription jobs
+
+The `/api/transcribe` request blocks until Sarvam's **batch** job finishes, which
+can take a while for long audio. Some platform proxies cut idle HTTP requests at
+~60–100s. For a smooth client demo, **use short clips** (≤ ~1–2 min). If you need
+long files in production, the next step is to make transcription async (return a
+job id + poll for status) — ask and I'll wire that up.

Dockerfile

@@ -0,0 +1,30 @@
+FROM python:3.11-slim
+
+ENV PYTHONUNBUFFERED=1 \
+    PIP_NO_CACHE_DIR=1 \
+    HF_HOME=/app/.cache/huggingface \
+    UPLOAD_DIR=/tmp/uploads \
+    PORT=7860
+
+WORKDIR /app
+
+# System libs needed by soundfile / librosa for audio decoding.
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    libsndfile1 ffmpeg \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt .
+RUN pip install -r requirements.txt
+
+COPY backend ./backend
+COPY frontend ./frontend
+
+# Pre-download the gender model so the first request isn't slow.
+RUN python -c "from transformers import Wav2Vec2ForSequenceClassification, Wav2Vec2FeatureExtractor as F; M='prithivMLmods/Common-Voice-Gender-Detection'; Wav2Vec2ForSequenceClassification.from_pretrained(M); F.from_pretrained(M)"
+
+# Make caches/uploads writable for non-root hosts (e.g. HF Spaces runs as uid 1000).
+RUN mkdir -p /tmp/uploads "$HF_HOME" && chmod -R 777 /app/.cache /tmp/uploads
+
+EXPOSE 7860
+
+CMD ["sh", "-c", "uvicorn backend.main:app --host 0.0.0.0 --port ${PORT:-7860}"]

README.md

@@ -0,0 +1,69 @@
+---
+title: VoxSplit
+emoji: 🎙️
+colorFrom: purple
+colorTo: pink
+sdk: docker
+app_port: 7860
+pinned: false
+---
+
+# Audio Transcription & Gender Detection (POC)
+
+Upload a `.wav` file and get a **diarized, timestamped transcript** (via the
+[Sarvam AI](https://sarvam.ai) `saaras:v3` batch API) plus a **per-speaker
+gender estimate**. The transcript is synced to audio playback — the active
+segment highlights as it plays, and clicking a segment seeks to it.
+
+## How it works
+
+1. The WAV is uploaded to a small FastAPI backend.
+2. The backend runs a Sarvam **batch STT job** with `with_diarization=True`,
+   which returns speaker-labelled segments with start/end timestamps.
+3. For each speaker, the backend pools all of their audio and runs the
+   [`prithivMLmods/Common-Voice-Gender-Detection`](https://huggingface.co/prithivMLmods/Common-Voice-Gender-Detection)
+   wav2vec2 classifier, returning softmax **female / male** probabilities. Below
+   a 0.6 confidence floor (or with too little audio) the speaker is marked
+   **uncertain**.
+4. The frontend renders the audio player, a speaker legend, and the synced
+   transcript.
+
+> The gender model is downloaded from HuggingFace on first run (~360 MB) and
+> cached. It's a trained classifier (~98% reported accuracy) but can still err
+> on children, atypical voices, or noisy/short audio.
+
+## Setup
+
+```bash
+cd audio-gender-detection
+python3 -m venv .venv
+source .venv/bin/activate
+pip install -r requirements.txt
+
+cp .env.example .env   # then add your Sarvam API key
+```
+
+`.env`:
+
+```
+SARVAM_API_KEY=your_sarvam_api_key_here
+NUM_SPEAKERS=2
+```
+
+(You can also paste the key directly into the UI instead of using `.env`.)
+
+## Run
+
+```bash
+uvicorn backend.main:app --reload --port 8000
+```
+
+Open http://localhost:8000
+
+## Notes
+
+- Diarization is **only** available through Sarvam's Batch API, so processing is
+  asynchronous — longer files take longer.
+- Uploaded files land in `uploads/` (gitignored). Clean it up periodically.
+- `librosa`/`soundfile` need a working audio backend; on macOS these install
+  cleanly via pip. On Linux you may need `libsndfile1` (`apt install libsndfile1`).

backend/gender.py

@@ -0,0 +1,81 @@
+"""Gender detection using a fine-tuned wav2vec2 classifier.
+
+Model: prithivMLmods/Common-Voice-Gender-Detection
+  https://huggingface.co/prithivMLmods/Common-Voice-Gender-Detection
+A `facebook/wav2vec2-base-960h` model fine-tuned for binary (female/male)
+speaker-gender classification. We feed it a 16 kHz mono waveform and read the
+softmax probabilities. If the top probability is below a confidence floor (or
+there isn't enough audio) we report "uncertain" instead of guessing.
+"""
+
+from __future__ import annotations
+
+from dataclasses import dataclass, field
+from functools import lru_cache
+
+import numpy as np
+import torch
+from transformers import Wav2Vec2FeatureExtractor, Wav2Vec2ForSequenceClassification
+
+MODEL_NAME = "prithivMLmods/Common-Voice-Gender-Detection"
+TARGET_SR = 16000
+MIN_SAMPLES = int(0.3 * TARGET_SR)  # need ~0.3s of audio to bother
+CONFIDENCE_FLOOR = 0.6  # below this we say "uncertain"
+
+
+@dataclass
+class GenderResult:
+    label: str  # "male" | "female" | "uncertain"
+    confidence: float  # top-class softmax probability (0..1)
+    probs: dict = field(default_factory=dict)  # {"male": p, "female": p}
+    audio_seconds: float = 0.0
+
+
+@lru_cache(maxsize=1)
+def _load():
+    """Load (and cache) the model + feature extractor once per process."""
+    model = Wav2Vec2ForSequenceClassification.from_pretrained(MODEL_NAME)
+    extractor = Wav2Vec2FeatureExtractor.from_pretrained(MODEL_NAME)
+    model.eval()
+    id2label = {int(k): str(v).lower() for k, v in model.config.id2label.items()}
+    return model, extractor, id2label
+
+
+def warmup() -> None:
+    """Eagerly load the model (e.g. at server startup) to avoid a cold first request."""
+    _load()
+
+
+def classify(samples: np.ndarray, sr: int) -> GenderResult:
+    """Classify gender from a mono waveform (float32)."""
+    audio_seconds = float(len(samples) / sr) if sr else 0.0
+
+    if samples is None or samples.size < MIN_SAMPLES:
+        return GenderResult("uncertain", 0.0, {}, round(audio_seconds, 2))
+
+    samples = np.asarray(samples, dtype=np.float32)
+    if sr != TARGET_SR:
+        import librosa
+
+        samples = librosa.resample(samples, orig_sr=sr, target_sr=TARGET_SR)
+        sr = TARGET_SR
+
+    model, extractor, id2label = _load()
+
+    inputs = extractor(samples, sampling_rate=sr, return_tensors="pt", padding=True)
+    with torch.no_grad():
+        logits = model(**inputs).logits
+        probs = torch.softmax(logits, dim=1).squeeze(0).tolist()
+
+    prob_map = {id2label[i]: float(probs[i]) for i in range(len(probs))}
+    label = max(prob_map, key=prob_map.get)
+    confidence = prob_map[label]
+    if confidence < CONFIDENCE_FLOOR:
+        label = "uncertain"
+
+    return GenderResult(
+        label=label,
+        confidence=round(confidence, 3),
+        probs={k: round(v, 3) for k, v in prob_map.items()},
+        audio_seconds=round(audio_seconds, 2),
+    )

backend/main.py

@@ -0,0 +1,133 @@
+"""FastAPI app: upload a WAV, get diarized transcription + per-speaker gender."""
+
+from __future__ import annotations
+
+import os
+import uuid
+from collections import defaultdict
+from pathlib import Path
+from typing import Optional
+
+import librosa
+import numpy as np
+import soundfile as sf
+from dotenv import load_dotenv
+from fastapi import FastAPI, File, Form, HTTPException, UploadFile
+from fastapi.responses import FileResponse, HTMLResponse
+from fastapi.staticfiles import StaticFiles
+
+from . import gender
+from .transcribe import Transcription, transcribe_with_diarization
+
+load_dotenv()
+
+BASE_DIR = Path(__file__).resolve().parent.parent
+UPLOAD_DIR = Path(os.getenv("UPLOAD_DIR") or (BASE_DIR / "uploads"))
+FRONTEND_DIR = BASE_DIR / "frontend"
+UPLOAD_DIR.mkdir(parents=True, exist_ok=True)
+
+app = FastAPI(title="Audio Gender + Transcription POC")
+
+
+@app.on_event("startup")
+def _warmup_model() -> None:
+    # Load the gender model ahead of the first request (best-effort).
+    try:
+        gender.warmup()
+    except Exception:
+        pass
+
+
+@app.get("/", response_class=HTMLResponse)
+def index() -> HTMLResponse:
+    return HTMLResponse((FRONTEND_DIR / "index.html").read_text(encoding="utf-8"))
+
+
+@app.get("/api/audio/{file_id}")
+def get_audio(file_id: str) -> FileResponse:
+    # Guard against path traversal; we only ever serve from UPLOAD_DIR.
+    safe_id = Path(file_id).name
+    path = UPLOAD_DIR / safe_id
+    if not path.exists():
+        raise HTTPException(status_code=404, detail="Audio not found")
+    return FileResponse(path, media_type="audio/wav")
+
+
+@app.post("/api/transcribe")
+async def transcribe(
+    file: UploadFile = File(...),
+    api_key: Optional[str] = Form(default=None),
+    num_speakers: int = Form(default=int(os.getenv("NUM_SPEAKERS", "2"))),
+):
+    key = (api_key or os.getenv("SARVAM_API_KEY") or "").strip()
+    if not key:
+        raise HTTPException(
+            status_code=400,
+            detail="Server is missing the SARVAM_API_KEY. Set it in the .env file and restart.",
+        )
+
+    file_id = f"{uuid.uuid4().hex}.wav"
+    dest = UPLOAD_DIR / file_id
+    dest.write_bytes(await file.read())
+
+    try:
+        result = transcribe_with_diarization(str(dest), key, num_speakers=num_speakers)
+    except Exception as exc:  # surface a clean error to the UI
+        raise HTTPException(status_code=502, detail=str(exc))
+
+    speakers = _detect_genders(str(dest), result)
+
+    return {
+        "file_id": file_id,
+        "audio_url": f"/api/audio/{file_id}",
+        "language_code": result.language_code,
+        "full_transcript": result.full_transcript,
+        "speakers": speakers,
+        "segments": [
+            {
+                "start": round(s.start, 2),
+                "end": round(s.end, 2),
+                "speaker_id": s.speaker_id,
+                "text": s.text,
+                "gender": speakers.get(s.speaker_id, {}).get("label", "uncertain"),
+            }
+            for s in result.segments
+        ],
+    }
+
+
+def _detect_genders(audio_path: str, result: Transcription) -> dict:
+    """Estimate gender per speaker by pooling all of their voiced audio."""
+    samples, sr = librosa.load(audio_path, sr=16000, mono=True)
+
+    by_speaker: dict[str, list[np.ndarray]] = defaultdict(list)
+    for seg in result.segments:
+        if seg.end <= seg.start:
+            continue
+        start_idx = max(0, int(seg.start * sr))
+        end_idx = min(len(samples), int(seg.end * sr))
+        if end_idx > start_idx:
+            by_speaker[seg.speaker_id].append(samples[start_idx:end_idx])
+
+    speakers: dict[str, dict] = {}
+    for speaker_id, chunks in by_speaker.items():
+        pooled = np.concatenate(chunks) if chunks else np.array([])
+        res = gender.classify(pooled, sr)
+        speakers[speaker_id] = {
+            "label": res.label,
+            "confidence": res.confidence,
+            "probs": res.probs,
+            "audio_seconds": res.audio_seconds,
+        }
+
+    # Ensure every diarized speaker has an entry even with no usable audio.
+    for seg in result.segments:
+        speakers.setdefault(
+            seg.speaker_id,
+            {"label": "uncertain", "confidence": 0.0, "probs": {}, "audio_seconds": 0.0},
+        )
+    return speakers
+
+
+if FRONTEND_DIR.exists():
+    app.mount("/static", StaticFiles(directory=FRONTEND_DIR), name="static")

backend/transcribe.py

@@ -0,0 +1,91 @@
+"""Sarvam AI batch speech-to-text with diarization."""
+
+from __future__ import annotations
+
+import glob
+import json
+import os
+import tempfile
+from dataclasses import dataclass
+
+from sarvamai import SarvamAI
+
+
+@dataclass
+class Segment:
+    start: float
+    end: float
+    speaker_id: str
+    text: str
+
+
+@dataclass
+class Transcription:
+    language_code: str | None
+    segments: list[Segment]
+    full_transcript: str
+
+
+def transcribe_with_diarization(
+    audio_path: str,
+    api_key: str,
+    num_speakers: int = 2,
+) -> Transcription:
+    """Run a Sarvam batch STT job with diarization and return parsed segments."""
+    client = SarvamAI(api_subscription_key=api_key)
+
+    job = client.speech_to_text_job.create_job(
+        model="saaras:v3",
+        mode="verbatim",
+        language_code="unknown",
+        with_diarization=True,
+        num_speakers=num_speakers,
+    )
+
+    job.upload_files(file_paths=[audio_path])
+    job.start()
+    # Default timeout is 600s; raise it so longer recordings don't get cut off.
+    job.wait_until_complete(poll_interval=5, timeout=3600)
+
+    file_results = job.get_file_results()
+    if not file_results.get("successful"):
+        failed = file_results.get("failed", [])
+        msg = failed[0].get("error_message") if failed else "unknown error"
+        raise RuntimeError(f"Sarvam transcription failed: {msg}")
+
+    with tempfile.TemporaryDirectory() as out_dir:
+        job.download_outputs(output_dir=out_dir)
+        json_files = sorted(glob.glob(os.path.join(out_dir, "*.json")))
+        if not json_files:
+            raise RuntimeError("No output JSON returned by Sarvam.")
+        with open(json_files[0], "r", encoding="utf-8") as fh:
+            data = json.load(fh)
+
+    return _parse(data)
+
+
+def _parse(data: dict) -> Transcription:
+    language_code = data.get("language_code")
+    full_transcript = data.get("transcript", "") or ""
+
+    segments: list[Segment] = []
+    diarized = data.get("diarized_transcript") or {}
+    for entry in diarized.get("entries", []) or []:
+        text = (entry.get("transcript") or "").strip()
+        if not text:
+            continue
+        segments.append(
+            Segment(
+                start=float(entry.get("start_time_seconds", 0.0)),
+                end=float(entry.get("end_time_seconds", 0.0)),
+                speaker_id=str(entry.get("speaker_id", "0")),
+                text=text,
+            )
+        )
+
+    # Fallback: no diarization entries -> single segment from the full transcript.
+    if not segments and full_transcript:
+        segments.append(Segment(0.0, 0.0, "0", full_transcript))
+
+    segments.sort(key=lambda s: s.start)
+    return Transcription(language_code, segments, full_transcript)

frontend/index.html

@@ -0,0 +1,373 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>VoxSplit · Transcribe + Gender</title>
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
+<style>
+  :root {
+    --bg: #07070d;
+    --text: #f4f5fb;
+    --muted: #9ea3bb;
+    --glass: rgba(255, 255, 255, 0.045);
+    --glass-2: rgba(255, 255, 255, 0.03);
+    --stroke: rgba(255, 255, 255, 0.09);
+    --stroke-strong: rgba(255, 255, 255, 0.18);
+    --violet: #a855f7;
+    --pink: #ec4899;
+    --cyan: #22d3ee;
+    --male: #38bdf8;
+    --female: #fb7185;
+    --uncertain: #9ea3bb;
+    --grad: linear-gradient(115deg, #a855f7 0%, #ec4899 50%, #22d3ee 100%);
+  }
+  * { box-sizing: border-box; }
+  html { scroll-behavior: smooth; }
+  body {
+    margin: 0;
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    min-height: 100vh;
+    overflow-x: hidden;
+    -webkit-font-smoothing: antialiased;
+  }
+  /* animated gradient mesh backdrop */
+  .blob { position: fixed; border-radius: 50%; filter: blur(90px); opacity: .55; z-index: 0; pointer-events: none; }
+  .b1 { width: 520px; height: 520px; background: #7c3aed; top: -160px; left: -120px; animation: float1 16s ease-in-out infinite; }
+  .b2 { width: 480px; height: 480px; background: #ec4899; top: 10%; right: -160px; animation: float2 19s ease-in-out infinite; }
+  .b3 { width: 460px; height: 460px; background: #06b6d4; bottom: -200px; left: 25%; animation: float3 22s ease-in-out infinite; }
+  @keyframes float1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(60px,50px)} }
+  @keyframes float2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-50px,40px)} }
+  @keyframes float3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,-50px)} }
+
+  .wrap { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; padding: 56px 20px 100px; }
+
+  header { text-align: center; margin-bottom: 36px; }
+  .logo {
+    display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px; border-radius: 999px;
+    background: var(--glass); border: 1px solid var(--stroke); backdrop-filter: blur(12px);
+    font-family: "Space Grotesk"; font-weight: 600; font-size: 13px; letter-spacing: .04em;
+    margin-bottom: 22px;
+  }
+  .logo .ping { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
+  header h1 {
+    font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 46px; line-height: 1.05;
+    margin: 0 0 14px; letter-spacing: -0.03em;
+    background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
+  }
+  header p { color: var(--muted); margin: 0 auto; max-width: 520px; font-size: 16px; line-height: 1.5; }
+
+  .card {
+    position: relative;
+    background: var(--glass);
+    border: 1px solid var(--stroke);
+    border-radius: 24px;
+    padding: 26px;
+    backdrop-filter: blur(22px);
+    -webkit-backdrop-filter: blur(22px);
+    box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
+    margin-bottom: 24px;
+  }
+
+  .drop {
+    border: 1.5px dashed var(--stroke-strong); border-radius: 20px; padding: 40px 24px;
+    text-align: center; color: var(--muted); cursor: pointer; transition: .25s cubic-bezier(.2,.8,.2,1);
+    background: var(--glass-2);
+  }
+  .drop:hover, .drop.over {
+    border-color: var(--violet); color: var(--text);
+    background: rgba(168,85,247,.07); transform: translateY(-2px);
+    box-shadow: 0 12px 30px rgba(168,85,247,.16);
+  }
+  .drop .ic {
+    width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px; display: grid; place-items: center;
+    background: var(--grad); box-shadow: 0 10px 26px rgba(236,72,153,.35); font-size: 26px;
+  }
+  .drop .big { font-family: "Space Grotesk"; font-size: 17px; font-weight: 600; color: var(--text); }
+  .drop .big span { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
+  .fileName { font-size: 13px; color: var(--cyan); margin-top: 12px; font-weight: 500; }
+
+  .btn {
+    margin-top: 22px; width: 100%; padding: 16px; border: none; border-radius: 16px; position: relative;
+    background: var(--grad); background-size: 200% 200%; color: white; font-size: 15.5px; font-weight: 700;
+    font-family: "Space Grotesk"; letter-spacing: .01em; cursor: pointer; transition: .2s;
+    box-shadow: 0 14px 34px rgba(168,85,247,.32); animation: shimmer 6s ease infinite;
+  }
+  @keyframes shimmer { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
+  .btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; animation: none; }
+  .btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(236,72,153,.42); }
+  .btn:not(:disabled):active { transform: translateY(0); }
+
+  .hint { font-size: 12.5px; color: var(--muted); margin-top: 14px; text-align: center; }
+  .status { display: none; align-items: center; justify-content: center; gap: 12px; color: var(--text); margin-top: 18px; font-size: 14px; }
+  .status.show { display: flex; }
+  .spinner { width: 20px; height: 20px; border: 2.5px solid var(--stroke); border-top-color: var(--violet); border-right-color: var(--pink); border-radius: 50%; animation: spin .9s linear infinite; }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  .error { display: none; color: #fecaca; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3);
+    padding: 13px 16px; border-radius: 14px; margin-top: 16px; font-size: 14px; }
+  .error.show { display: block; }
+
+  audio { width: 100%; margin-bottom: 20px; border-radius: 12px; filter: saturate(1.1); }
+  audio::-webkit-media-controls-panel { background: var(--glass-2); }
+
+  .meta { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 18px; }
+  .pill { font-size: 12px; padding: 6px 13px; border-radius: 999px; background: var(--glass-2);
+    border: 1px solid var(--stroke); color: var(--muted); font-weight: 500; }
+
+  .section-title { font-family: "Space Grotesk"; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
+    color: var(--muted); margin: 0 0 12px; }
+  .speakers { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
+  .spk {
+    display: flex; align-items: flex-start; gap: 13px; padding: 15px 18px; border-radius: 18px;
+    background: var(--glass-2); border: 1px solid var(--stroke); width: 280px; flex: 1 1 260px; max-width: 340px; transition: .2s;
+  }
+  .spk:hover { border-color: var(--stroke-strong); transform: translateY(-2px); }
+  .spk .info { flex: 1; min-width: 0; }
+  .avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
+    font-family: "Space Grotesk"; font-weight: 700; font-size: 15px; color: #fff; position: relative; margin-top: 2px; }
+  .dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
+  .spk .name { font-family: "Space Grotesk"; font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
+  .spk .sub { font-size: 12px; color: var(--muted); margin-top: 8px; font-variant-numeric: tabular-nums; }
+
+  .bars { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
+  .bar { display: flex; align-items: center; gap: 9px; font-size: 11.5px; }
+  .bar .lab { width: 48px; color: var(--muted); text-transform: capitalize; }
+  .bar .track { flex: 1; height: 7px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
+  .bar .fill { height: 100%; width: 0; border-radius: 999px; transition: width .8s cubic-bezier(.2,.85,.25,1); }
+  .bar .pct { width: 38px; text-align: right; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
+  .bar.female .fill { background: linear-gradient(90deg, #fb7185, #f472b6); }
+  .bar.male .fill { background: linear-gradient(90deg, #38bdf8, #22d3ee); }
+  .bar.top .lab { color: var(--text); font-weight: 600; }
+  .badge { font-size: 10.5px; padding: 3px 10px; border-radius: 999px; font-weight: 700; text-transform: capitalize; letter-spacing: .02em; }
+  .badge.male { background: rgba(56,189,248,.16); color: var(--male); border: 1px solid rgba(56,189,248,.3); }
+  .badge.female { background: rgba(251,113,133,.16); color: var(--female); border: 1px solid rgba(251,113,133,.3); }
+  .badge.uncertain { background: rgba(158,163,187,.14); color: var(--uncertain); border: 1px solid rgba(158,163,187,.25); }
+
+  .transcript { display: flex; flex-direction: column; gap: 10px; }
+  .seg {
+    display: grid; grid-template-columns: 58px 1fr; gap: 16px; padding: 15px 18px; position: relative;
+    border-radius: 16px; border: 1px solid var(--stroke); cursor: pointer; transition: .18s cubic-bezier(.2,.8,.2,1);
+    background: var(--glass-2); overflow: hidden;
+  }
+  .seg::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; transition: .18s; }
+  .seg:hover { border-color: var(--stroke-strong); transform: translateX(2px); }
+  .seg.active { border-color: rgba(168,85,247,.5); background: rgba(168,85,247,.09); box-shadow: 0 8px 24px rgba(168,85,247,.18); }
+  .seg.active::before { background: var(--grad); }
+  .seg .time { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); padding-top: 3px; font-weight: 500; }
+  .seg .who { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
+  .seg .who b { font-family: "Space Grotesk"; font-size: 12.5px; }
+  .seg .txt { font-size: 15px; line-height: 1.55; color: #e9eaf4; }
+  .hidden { display: none; }
+
+  @media (max-width: 560px) {
+    header h1 { font-size: 34px; }
+    .wrap { padding-top: 40px; }
+  }
+</style>
+</head>
+<body>
+<div class="blob b1"></div>
+<div class="blob b2"></div>
+<div class="blob b3"></div>
+
+<div class="wrap">
+  <header>
+    <div class="logo"><span class="ping"></span> VoxSplit</div>
+    <h1>Hear who said what.</h1>
+    <p>Drop a WAV and get a diarized, timestamped transcript with per-speaker gender — synced live to playback.</p>
+  </header>
+
+  <div class="card">
+    <div id="drop" class="drop">
+      <div class="ic">🎙️</div>
+      <div class="big">Drop your <span>.wav</span> here, or click to browse</div>
+      <div id="fileName" class="fileName"></div>
+    </div>
+    <input id="fileInput" type="file" accept=".wav,audio/wav,audio/x-wav" class="hidden" />
+
+    <button id="goBtn" class="btn" disabled>Transcribe &amp; Analyze ✨</button>
+    <div class="hint">Diarized, timestamped transcription with per-speaker gender. Longer files take a bit.</div>
+    <div id="status" class="status"><div class="spinner"></div><span id="statusText">Working…</span></div>
+    <div id="error" class="error"></div>
+  </div>
+
+  <div id="results" class="card hidden">
+    <audio id="player" controls preload="auto"></audio>
+    <div class="meta" id="meta"></div>
+    <div id="speakersWrap">
+      <div class="section-title">Speakers</div>
+      <div class="speakers" id="speakers"></div>
+    </div>
+    <div class="section-title">Transcript</div>
+    <div class="transcript" id="transcript"></div>
+  </div>
+</div>
+
+<script>
+  const SPEAKER_COLORS = ["#a855f7", "#22d3ee", "#fb7185", "#34d399", "#fbbf24", "#60a5fa", "#f472b6", "#c084fc"];
+  const fileInput = document.getElementById("fileInput");
+  const drop = document.getElementById("drop");
+  const fileName = document.getElementById("fileName");
+  const goBtn = document.getElementById("goBtn");
+  const statusEl = document.getElementById("status");
+  const statusText = document.getElementById("statusText");
+  const errorEl = document.getElementById("error");
+  const results = document.getElementById("results");
+  const player = document.getElementById("player");
+  const meta = document.getElementById("meta");
+  const speakersEl = document.getElementById("speakers");
+  const transcriptEl = document.getElementById("transcript");
+
+  let selectedFile = null;
+  let segEls = [];
+
+  const colorFor = (id, order) => SPEAKER_COLORS[order % SPEAKER_COLORS.length];
+  const fmt = (s) => {
+    const m = Math.floor(s / 60);
+    const sec = Math.floor(s % 60);
+    return `${m}:${sec.toString().padStart(2, "0")}`;
+  };
+
+  drop.addEventListener("click", () => fileInput.click());
+  ["dragover", "dragenter"].forEach(e =>
+    drop.addEventListener(e, (ev) => { ev.preventDefault(); drop.classList.add("over"); }));
+  ["dragleave", "drop"].forEach(e =>
+    drop.addEventListener(e, (ev) => { ev.preventDefault(); drop.classList.remove("over"); }));
+  drop.addEventListener("drop", (ev) => {
+    if (ev.dataTransfer.files.length) setFile(ev.dataTransfer.files[0]);
+  });
+  fileInput.addEventListener("change", () => { if (fileInput.files.length) setFile(fileInput.files[0]); });
+
+  function setFile(f) {
+    selectedFile = f;
+    fileName.textContent = `✓ ${f.name} · ${(f.size / 1048576).toFixed(2)} MB`;
+    goBtn.disabled = false;
+  }
+
+  goBtn.addEventListener("click", async () => {
+    if (!selectedFile) return;
+    errorEl.classList.remove("show");
+    results.classList.add("hidden");
+    statusEl.classList.add("show");
+    statusText.textContent = "Uploading & transcribing…";
+    goBtn.disabled = true;
+
+    const fd = new FormData();
+    fd.append("file", selectedFile);
+
+    try {
+      const res = await fetch("/api/transcribe", { method: "POST", body: fd });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.detail || "Request failed");
+      render(data);
+    } catch (e) {
+      errorEl.textContent = "Error: " + e.message;
+      errorEl.classList.add("show");
+    } finally {
+      statusEl.classList.remove("show");
+      goBtn.disabled = false;
+    }
+  });
+
+  function render(data) {
+    results.classList.remove("hidden");
+    player.src = data.audio_url + "?t=" + Date.now();
+
+    meta.innerHTML = "";
+    if (data.language_code) meta.appendChild(pill("🌐 " + data.language_code));
+    meta.appendChild(pill(data.segments.length + " segments"));
+    meta.appendChild(pill(Object.keys(data.speakers).length + " speakers"));
+
+    const order = {};
+    Object.keys(data.speakers).sort().forEach((id, i) => (order[id] = i));
+
+    speakersEl.innerHTML = "";
+    Object.keys(data.speakers).sort().forEach((id) => {
+      const s = data.speakers[id];
+      const c = colorFor(id, order[id]);
+      const div = document.createElement("div");
+      div.className = "spk";
+      div.innerHTML = `
+        <span class="avatar" style="background:${c}33; color:${c}; box-shadow:0 0 0 1px ${c}55, 0 6px 18px ${c}33">${escapeHtml(String(id))}</span>
+        <div class="info">
+          <div class="name">Speaker ${escapeHtml(String(id))}
+            <span class="badge ${s.label}">${s.label}</span>
+          </div>
+          ${buildBars(s)}
+        </div>`;
+      speakersEl.appendChild(div);
+    });
+
+    // Animate the bar fills in after they're in the DOM.
+    requestAnimationFrame(() => {
+      speakersEl.querySelectorAll(".fill").forEach((el) => { el.style.width = el.dataset.w + "%"; });
+    });
+
+    transcriptEl.innerHTML = "";
+    segEls = data.segments.map((seg) => {
+      const c = colorFor(seg.speaker_id, order[seg.speaker_id]);
+      const el = document.createElement("div");
+      el.className = "seg";
+      el.dataset.start = seg.start;
+      el.dataset.end = seg.end;
+      el.innerHTML = `
+        <div class="time">${fmt(seg.start)}</div>
+        <div class="body">
+          <div class="who">
+            <span class="dot" style="background:${c}; box-shadow:0 0 10px ${c}88"></span>
+            <b style="color:${c}">Speaker ${escapeHtml(String(seg.speaker_id))}</b>
+            <span class="badge ${seg.gender}">${seg.gender}</span>
+          </div>
+          <div class="txt">${escapeHtml(seg.text)}</div>
+        </div>`;
+      el.addEventListener("click", () => {
+        if (seg.end > seg.start) { player.currentTime = seg.start; player.play(); }
+      });
+      transcriptEl.appendChild(el);
+      return el;
+    });
+
+    results.scrollIntoView({ behavior: "smooth" });
+  }
+
+  player.addEventListener("timeupdate", () => {
+    const t = player.currentTime;
+    let active = -1;
+    segEls.forEach((el, i) => {
+      const s = parseFloat(el.dataset.start), e = parseFloat(el.dataset.end);
+      if (e > s && t >= s && t < e) active = i;
+    });
+    segEls.forEach((el, i) => el.classList.toggle("active", i === active));
+    const cur = segEls[active];
+    if (cur) cur.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  });
+
+  function buildBars(s) {
+    const probs = s.probs || {};
+    const keys = Object.keys(probs);
+    if (!keys.length) return `<div class="sub">not enough audio to analyze</div>`;
+    const top = keys.reduce((a, b) => (probs[b] > probs[a] ? b : a), keys[0]);
+    const rows = keys
+      .sort((a, b) => probs[b] - probs[a])
+      .map((k) => {
+        const pct = Math.round(probs[k] * 100);
+        return `<div class="bar ${k} ${k === top ? "top" : ""}">
+          <span class="lab">${escapeHtml(k)}</span>
+          <span class="track"><span class="fill" data-w="${pct}"></span></span>
+          <span class="pct">${pct}%</span>
+        </div>`;
+      })
+      .join("");
+    return `<div class="bars">${rows}</div>`;
+  }
+  function pill(t) { const s = document.createElement("span"); s.className = "pill"; s.textContent = t; return s; }
+  function escapeHtml(s) {
+    return s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
+  }
+</script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1,10 @@
+fastapi==0.115.6
+uvicorn[standard]==0.34.0
+python-multipart==0.0.20
+python-dotenv==1.0.1
+sarvamai==0.1.28
+librosa==0.10.2.post1
+soundfile==0.12.1
+numpy==1.26.4
+torch==2.2.2
+transformers==4.46.3