Upload app_gradio.py with huggingface_hub

app_gradio.py

@@ -0,0 +1,1158 @@
+"""
+TranscribeAI - Transcription with Speaker Diarization (ZeroGPU)
+================================================================
+Engine  : openai/whisper via transformers pipeline (CUDA ZeroGPU H200)
+Speaker : MFCC + Agglomerative Clustering
+Language: Indonesian, English, Auto-detect (99 languages)
+Input   : MP3, MP4, WAV, M4A, OGG, FLAC, WEBM
+Output  : SRT, TXT, DOCX
+"""
+
+import time
+import tempfile
+import threading
+import torch
+import spaces
+import gradio as gr
+import numpy as np
+from datetime import datetime
+from pathlib import Path
+from transformers import pipeline
+
+# ============================================================
+# Config — Single model (small) for fastest startup & simplicity
+# ============================================================
+MODEL_ID = 'openai/whisper-small'
+MODEL_NAME = 'small'
+
+LANGUAGE_MAP = {
+    'Auto-detect': None,
+    'Indonesian': 'id',
+    'English': 'en',
+    'Japanese': 'ja',
+    'Korean': 'ko',
+    'Chinese': 'zh',
+    'Arabic': 'ar',
+    'French': 'fr',
+    'German': 'de',
+    'Spanish': 'es',
+    'Portuguese': 'pt',
+    'Russian': 'ru',
+    'Thai': 'th',
+    'Vietnamese': 'vi',
+    'Malay': 'ms',
+    'Hindi': 'hi',
+    'Turkish': 'tr',
+    'Dutch': 'nl',
+    'Italian': 'it',
+}
+
+BATCH_SIZE = 16  # A10G 24GB VRAM — safe for whisper-small float16
+OUTPUT_DIR = Path(tempfile.gettempdir()) / 'transcribeai_output'
+OUTPUT_DIR.mkdir(exist_ok=True)
+
+# ============================================================
+# Load pipeline at MODULE LEVEL (ZeroGPU requirement!)
+# Single model = faster startup, no on-demand loading delay
+# ============================================================
+device = 0 if torch.cuda.is_available() else "cpu"
+
+torch_dtype = torch.float16 if torch.cuda.is_available() else torch.float32
+
+print(f"  Loading pipeline: {MODEL_ID} (dtype={torch_dtype})...")
+pipe = pipeline(
+    task="automatic-speech-recognition",
+    model=MODEL_ID,
+    chunk_length_s=30,
+    device=device,
+    torch_dtype=torch_dtype,
+)
+print(f"  {MODEL_NAME} ready!")
+
+
+# ============================================================
+# Helpers
+# ============================================================
+def fmt_timestamp(seconds):
+    h = int(seconds // 3600)
+    m = int((seconds % 3600) // 60)
+    s = int(seconds % 60)
+    ms = int((seconds % 1) * 1000)
+    return f"{h:02d}:{m:02d}:{s:02d},{ms:03d}"
+
+
+def fmt_time(seconds):
+    h = int(seconds // 3600)
+    m = int((seconds % 3600) // 60)
+    s = int(seconds % 60)
+    if h > 0:
+        return f"{h:02d}:{m:02d}:{s:02d}"
+    return f"{m:02d}:{s:02d}"
+
+
+# ============================================================
+# Speaker Diarization (MFCC + Clustering) — CPU
+# ============================================================
+def perform_diarization(audio_path, segments, num_speakers):
+    import librosa
+    from sklearn.cluster import AgglomerativeClustering
+    from sklearn.preprocessing import StandardScaler
+
+    if not segments or len(segments) < 2:
+        for seg in segments:
+            seg['speaker'] = 'Speaker 1'
+            seg['speaker_id'] = 0
+        return segments
+
+    y, sr = librosa.load(str(audio_path), sr=16000, mono=True)
+
+    features = []
+    valid_indices = []
+
+    for i, seg in enumerate(segments):
+        s0 = int(seg['start'] * sr)
+        s1 = min(int(seg['end'] * sr), len(y))
+        if s1 <= s0 or s0 >= len(y):
+            continue
+        chunk = y[s0:s1]
+        if len(chunk) < int(sr * 0.3):
+            continue
+
+        try:
+            # Cap analysis to 3s per segment for speed
+            max_samples = int(sr * 3)
+            analysis_chunk = chunk[:max_samples] if len(chunk) > max_samples else chunk
+
+            # MFCC (13 = industry standard) + delta — sufficient for speaker ID
+            mfcc = librosa.feature.mfcc(y=analysis_chunk, sr=sr, n_mfcc=13)
+            delta = librosa.feature.delta(mfcc)
+
+            # F0 (pitch) — key differentiator between speakers
+            f0 = librosa.yin(analysis_chunk, fmin=50, fmax=500, sr=sr)
+            f0c = f0[f0 > 0]
+            f0_mean = float(np.mean(f0c)) if len(f0c) > 0 else 0.0
+            f0_std = float(np.std(f0c)) if len(f0c) > 0 else 0.0
+
+            combined = np.vstack([mfcc, delta])
+            vec = np.concatenate([
+                np.mean(combined, axis=1),
+                np.std(combined, axis=1),
+                [f0_mean, f0_std]
+            ])
+            features.append(vec)
+            valid_indices.append(i)
+        except Exception:
+            continue
+
+    if len(features) < 2:
+        for seg in segments:
+            seg['speaker'] = 'Speaker 1'
+            seg['speaker_id'] = 0
+        return segments
+
+    X = np.array(features)
+    X_scaled = StandardScaler().fit_transform(X)
+
+    if num_speakers <= 0:
+        from sklearn.metrics import silhouette_score
+        best_score, best_n = -1, 2
+        max_n = min(6, len(X_scaled) - 1)
+        for n in range(2, max_n + 1):
+            try:
+                lbls = AgglomerativeClustering(
+                    n_clusters=n, metric='cosine', linkage='average'
+                ).fit_predict(X_scaled)
+                score = silhouette_score(X_scaled, lbls, metric='cosine')
+                if score > best_score:
+                    best_score, best_n = score, n
+            except Exception:
+                pass
+        num_speakers = best_n
+    else:
+        num_speakers = min(num_speakers, len(X_scaled))
+
+    if num_speakers >= 2 and len(X_scaled) >= num_speakers:
+        labels = AgglomerativeClustering(
+            n_clusters=num_speakers, metric='cosine', linkage='average'
+        ).fit_predict(X_scaled)
+    else:
+        labels = np.zeros(len(X_scaled), dtype=int)
+
+    label_map = {}
+    for lbl in labels:
+        if lbl not in label_map:
+            label_map[lbl] = len(label_map) + 1
+
+    assigns = {}
+    for idx, seg_idx in enumerate(valid_indices):
+        assigns[seg_idx] = label_map[labels[idx]]
+
+    for i, seg in enumerate(segments):
+        if i in assigns:
+            seg['speaker'] = f'Speaker {assigns[i]}'
+            seg['speaker_id'] = assigns[i] - 1
+        else:
+            nearest = min(valid_indices, key=lambda x: abs(x - i)) if valid_indices else 0
+            seg['speaker'] = f'Speaker {assigns.get(nearest, 1)}'
+            seg['speaker_id'] = assigns.get(nearest, 1) - 1
+
+    return segments
+
+
+def merge_consecutive(segments):
+    if not segments:
+        return segments
+    merged = [segments[0].copy()]
+    for seg in segments[1:]:
+        if seg.get('speaker') == merged[-1].get('speaker'):
+            merged[-1]['end'] = seg['end']
+            merged[-1]['text'] += ' ' + seg['text']
+        else:
+            merged.append(seg.copy())
+    return merged
+
+
+# ============================================================
+# Export Functions
+# ============================================================
+def generate_srt(segments, path):
+    with open(path, 'w', encoding='utf-8') as f:
+        for i, seg in enumerate(segments, 1):
+            f.write(f"{i}\n")
+            f.write(f"{fmt_timestamp(seg['start'])} --> {fmt_timestamp(seg['end'])}\n")
+            sp = seg.get('speaker', '')
+            f.write(f"[{sp}] {seg['text']}\n\n" if sp else f"{seg['text']}\n\n")
+
+
+LANG_NAMES = {
+    'id': 'Indonesian', 'en': 'English', 'ja': 'Japanese', 'ko': 'Korean',
+    'zh': 'Chinese', 'ar': 'Arabic', 'fr': 'French', 'de': 'German',
+    'es': 'Spanish', 'pt': 'Portuguese', 'ru': 'Russian', 'th': 'Thai',
+    'vi': 'Vietnamese', 'ms': 'Malay', 'hi': 'Hindi', 'tr': 'Turkish',
+    'nl': 'Dutch', 'it': 'Italian', 'auto': 'Auto-detected',
+}
+
+
+def generate_txt(segments, path, filename='', language='', duration=0):
+    with open(path, 'w', encoding='utf-8') as f:
+        f.write("TRANSCRIPT\n" + "=" * 60 + "\n")
+        if filename:
+            f.write(f"File: {filename}\n")
+        f.write(f"Language: {LANG_NAMES.get(language, language)}\n")
+        f.write(f"Duration: {fmt_time(duration)}\n")
+        f.write(f"Generated: {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}\n")
+        speakers = sorted(set(s.get('speaker', '') for s in segments))
+        f.write(f"Speakers: {', '.join(speakers)}\n")
+        f.write("=" * 60 + "\n\n")
+        cur_speaker = None
+        for seg in segments:
+            sp = seg.get('speaker', '')
+            if sp != cur_speaker:
+                cur_speaker = sp
+                f.write(f"\n[{fmt_time(seg['start'])}] {sp}:\n")
+            f.write(f"{seg['text']}\n")
+
+
+def generate_docx(segments, path, filename='', language='', duration=0):
+    from docx import Document
+    from docx.shared import Pt, RGBColor
+    from docx.enum.text import WD_ALIGN_PARAGRAPH
+    colors = {
+        0: RGBColor(79, 70, 229), 1: RGBColor(220, 38, 38),
+        2: RGBColor(5, 150, 105), 3: RGBColor(217, 119, 6),
+        4: RGBColor(124, 58, 237), 5: RGBColor(219, 39, 119),
+    }
+
+    doc = Document()
+    style = doc.styles['Normal']
+    style.font.name = 'Calibri'
+    style.font.size = Pt(11)
+
+    title = doc.add_heading('Transcript', level=0)
+    title.alignment = WD_ALIGN_PARAGRAPH.CENTER
+
+    meta = []
+    if filename:
+        meta.append(('File', filename))
+    meta.append(('Language', LANG_NAMES.get(language, language)))
+    meta.append(('Duration', fmt_time(duration)))
+    meta.append(('Generated', datetime.now().strftime('%Y-%m-%d %H:%M:%S')))
+    speakers = sorted(set(s.get('speaker', 'Speaker 1') for s in segments))
+    meta.append(('Speakers', ', '.join(speakers)))
+
+    for label, val in meta:
+        p = doc.add_paragraph()
+        r = p.add_run(f'{label}: ')
+        r.bold = True
+        r.font.size = Pt(10)
+        r.font.color.rgb = RGBColor(100, 100, 100)
+        r = p.add_run(val)
+        r.font.size = Pt(10)
+        p.paragraph_format.space_after = Pt(2)
+
+    doc.add_paragraph('_' * 70)
+
+    for seg in segments:
+        p = doc.add_paragraph()
+        r = p.add_run(f'[{fmt_time(seg["start"])}]  ')
+        r.font.size = Pt(9)
+        r.font.color.rgb = RGBColor(150, 150, 150)
+
+        sp_id = seg.get('speaker_id', 0)
+        sp = seg.get('speaker', 'Speaker 1')
+        color = colors.get(sp_id, RGBColor(79, 70, 229))
+        r = p.add_run(f'{sp}: ')
+        r.bold = True
+        r.font.size = Pt(11)
+        r.font.color.rgb = color
+
+        r = p.add_run(seg['text'])
+        r.font.size = Pt(11)
+        p.paragraph_format.space_after = Pt(6)
+
+    doc.save(path)
+
+
+# ============================================================
+# GPU Transcription (ZeroGPU — proven pattern)
+# ============================================================
+@spaces.GPU(duration=120)
+def transcribe_with_gpu(audio_path, language):
+    """Run Whisper inference on GPU. Single model, always ready."""
+    generate_kwargs = {"task": "transcribe"}
+    if language:
+        generate_kwargs["language"] = language
+
+    result = pipe(
+        str(audio_path),
+        batch_size=BATCH_SIZE,
+        return_timestamps=True,
+        generate_kwargs=generate_kwargs,
+    )
+
+    # Parse segments
+    raw_segments = []
+    duration = 0.0
+
+    chunks = result.get("chunks", [])
+    if chunks:
+        for chunk in chunks:
+            text = chunk.get("text", "").strip()
+            ts = chunk.get("timestamp", (0, 0))
+            start = ts[0] if ts[0] is not None else 0
+            end = ts[1] if ts[1] is not None else start + 1
+            if end > duration:
+                duration = end
+            if text:
+                raw_segments.append({
+                    'start': round(start, 2),
+                    'end': round(end, 2),
+                    'text': text,
+                })
+    else:
+        full_text = result.get("text", "").strip()
+        if full_text:
+            raw_segments.append({'start': 0, 'end': 1, 'text': full_text})
+
+    detected_lang = language or "auto"
+    return raw_segments, detected_lang, duration
+
+
+def apply_vad_filter(segments):
+    """Filter out segments that are likely silence/noise (very short + filler)."""
+    FILLER = {'', '.', '..', '...', '…', '-', '–', '[Music]', '[music]',
+              '(music)', '[Musik]', '[musik]', '♪', '♪♪', '♫'}
+    MIN_DURATION = 0.3  # segments shorter than 0.3s are likely noise
+    filtered = []
+    for seg in segments:
+        text = seg['text'].strip()
+        seg_dur = seg['end'] - seg['start']
+        if text in FILLER:
+            continue
+        if seg_dur < MIN_DURATION and len(text.split()) <= 1:
+            continue
+        filtered.append(seg)
+    return filtered if filtered else segments  # fallback: return original if all filtered
+
+
+# ============================================================
+# Full Pipeline (wired to Gradio)
+# ============================================================
+def transcribe_full(audio_file, language_name, num_speakers,
+                    enable_diarization, enable_vad, progress=gr.Progress()):
+    if audio_file is None:
+        raise gr.Error("Please upload an audio file first!")
+
+    audio_path = audio_file
+    filename = Path(audio_path).name
+    lang_code = LANGUAGE_MAP.get(language_name, None)
+    num_speakers = int(num_speakers)  # Gradio slider returns float
+
+    t0 = time.time()  # Start timing from here — matches JS timer
+    progress(0.05, desc="⏳ Waiting for GPU & processing audio... (may take 30-90 seconds)")
+
+    # 1. Transcribe on GPU
+    try:
+        segments, detected_lang, duration = transcribe_with_gpu(
+            audio_path, lang_code
+        )
+    except Exception as e:
+        raise gr.Error(f"Transcription failed: {str(e)}")
+
+    if not segments:
+        raise gr.Error("No text detected from the audio.")
+
+    # 1b. VAD filter — remove silence/filler segments
+    if enable_vad:
+        segments = apply_vad_filter(segments)
+
+    transcribe_time = time.time() - t0
+    progress(0.60, desc=f"✅ Transcription complete ({transcribe_time:.0f}s) — {len(segments)} segments")
+
+    # 2. Speaker Diarization (CPU)
+    diarization_note = ""
+    if enable_diarization and len(segments) >= 2:
+        progress(0.65, desc="🔍 Identifying speakers...")
+        try:
+            segments = perform_diarization(audio_path, segments, num_speakers)
+            segments = merge_consecutive(segments)
+        except Exception as e:
+            print(f"  [Diarization] Error: {e}")
+            diarization_note = " ⚠️ (diarization failed, fallback to 1 speaker)"
+            for seg in segments:
+                seg['speaker'] = 'Speaker 1'
+                seg['speaker_id'] = 0
+    else:
+        for seg in segments:
+            seg['speaker'] = 'Speaker 1'
+            seg['speaker_id'] = 0
+
+    progress(0.85, desc="📄 Generating output files...")
+
+    # 3. Export
+    timestamp = datetime.now().strftime('%Y%m%d_%H%M%S')
+    base_name = Path(filename).stem
+
+    srt_path = str(OUTPUT_DIR / f"{base_name}_{timestamp}.srt")
+    txt_path = str(OUTPUT_DIR / f"{base_name}_{timestamp}.txt")
+    docx_path = str(OUTPUT_DIR / f"{base_name}_{timestamp}.docx")
+
+    generate_srt(segments, srt_path)
+    generate_txt(segments, txt_path, filename, detected_lang, duration)
+    generate_docx(segments, docx_path, filename, detected_lang, duration)
+
+    progress(0.95, desc="📦 Preparing results...")
+
+    # Build display text
+    transcript_lines = []
+    speakers_found = set()
+    for seg in segments:
+        sp = seg.get('speaker', 'Speaker 1')
+        speakers_found.add(sp)
+        transcript_lines.append(f"[{fmt_time(seg['start'])}] {sp}: {seg['text']}")
+
+    transcript_text = "\n\n".join(transcript_lines)
+
+    total_time = time.time() - t0
+    lang_display = detected_lang.upper() if detected_lang else 'AUTO'
+    summary = (
+        f"**Transcription Complete!**\n\n"
+        f"| Info | Details |\n"
+        f"|------|--------|\n"
+        f"| File | {filename} |\n"
+        f"| Audio Duration | {fmt_time(duration)} |\n"
+        f"| Language | {lang_display} |\n"
+        f"| Model | {MODEL_NAME} (244M) |\n"
+        f"| Speakers | {len(speakers_found)} ({', '.join(sorted(speakers_found))}){diarization_note} |\n"
+        f"| Segments | {len(segments)} |\n"
+        f"| Processing Time | {total_time:.0f} seconds |\n"
+        f"| Engine | Whisper + ZeroGPU H200 |"
+    )
+
+    progress(1.0, desc="🎉 Done!")
+    return summary, transcript_text, srt_path, txt_path, docx_path
+
+
+# ============================================================
+# Cleanup old files (>1 hour)
+# ============================================================
+def cleanup_loop():
+    while True:
+        try:
+            now = time.time()
+            if OUTPUT_DIR.exists():
+                for f in OUTPUT_DIR.iterdir():
+                    if f.is_file() and (now - f.stat().st_mtime) > 3600:
+                        f.unlink(missing_ok=True)
+                        print(f"  [Cleanup] Deleted: {f.name}")
+        except Exception as e:
+            print(f"  [Cleanup] Error: {e}")
+        time.sleep(300)
+
+threading.Thread(target=cleanup_loop, daemon=True).start()
+
+
+# ============================================================
+# Gradio UI
+# ============================================================
+THEME = gr.themes.Base(
+    primary_hue=gr.themes.colors.indigo,
+    secondary_hue=gr.themes.colors.purple,
+    neutral_hue=gr.themes.colors.gray,
+    font=gr.themes.GoogleFont("Inter"),
+).set(
+    body_background_fill="#0f0f11",
+    body_background_fill_dark="#0f0f11",
+    block_background_fill="#1a1a1f",
+    block_background_fill_dark="#1a1a1f",
+    block_border_color="#333340",
+    block_border_color_dark="#333340",
+    block_label_text_color="#a0a0b0",
+    block_title_text_color="#e8e8ed",
+    body_text_color="#e8e8ed",
+    body_text_color_dark="#e8e8ed",
+    button_primary_background_fill="#6366f1",
+    button_primary_background_fill_dark="#6366f1",
+    button_primary_text_color="#ffffff",
+    input_background_fill="#222228",
+    input_background_fill_dark="#222228",
+    input_border_color="#333340",
+    input_border_color_dark="#333340",
+)
+
+CUSTOM_CSS = """
+/* Global */
+.gradio-container {
+    max-width: 960px !important;
+    margin: 0 auto !important;
+}
+footer { display: none !important; }
+
+/* Header */
+.header-wrap {
+    text-align: center;
+    padding: 32px 0 20px;
+}
+.header-wrap h1 {
+    font-size: 32px !important;
+    font-weight: 800 !important;
+    background: linear-gradient(135deg, #818cf8, #8b5cf6) !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    background-clip: text !important;
+    letter-spacing: -0.5px;
+    margin-bottom: 6px !important;
+}
+.header-wrap p {
+    color: #a0a0b0 !important;
+    font-size: 14px !important;
+}
+.badge-gpu {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: rgba(99,102,241,.12);
+    color: #818cf8;
+    font-size: 12px;
+    padding: 4px 14px;
+    border-radius: 20px;
+    font-weight: 600;
+    margin-top: 8px;
+}
+.badge-gpu::before {
+    content: '';
+    width: 7px;
+    height: 7px;
+    background: #10b981;
+    border-radius: 50%;
+    display: inline-block;
+}
+
+/* Cards */
+.card-section {
+    background: #1a1a1f !important;
+    border: 1px solid #333340 !important;
+    border-radius: 14px !important;
+    padding: 20px 24px !important;
+    margin-bottom: 12px !important;
+}
+.card-title {
+    font-size: 14px !important;
+    font-weight: 700 !important;
+    color: #e8e8ed !important;
+    margin-bottom: 12px !important;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+/* Primary button */
+.btn-start {
+    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
+    border: none !important;
+    border-radius: 12px !important;
+    font-size: 16px !important;
+    font-weight: 700 !important;
+    padding: 14px 32px !important;
+    transition: all 0.2s !important;
+    box-shadow: 0 4px 15px rgba(99,102,241,.3) !important;
+}
+.btn-start:hover {
+    transform: translateY(-1px) !important;
+    box-shadow: 0 6px 20px rgba(99,102,241,.4) !important;
+}
+
+/* Settings grid */
+.settings-row {
+    gap: 8px !important;
+}
+
+/* Transcript output */
+.transcript-box textarea {
+    font-family: 'Inter', 'SF Mono', monospace !important;
+    font-size: 13px !important;
+    line-height: 1.7 !important;
+    background: #16161a !important;
+    border-radius: 10px !important;
+}
+
+/* Download cards — labels (dark bg) */
+.download-row label span,
+.download-row .label-wrap span {
+    color: #e8e8ed !important;
+    font-weight: 700 !important;
+}
+/* Download cards — file items (white bg → black bold text) */
+.download-row .file-preview,
+.download-row .download-file,
+.download-row .file-component {
+    border-radius: 10px !important;
+}
+.download-row .file-preview *,
+.download-row .download-file *,
+.download-row .file-component *,
+.download-row a,
+.download-row .file-name,
+.download-row .file-size {
+    color: #111 !important;
+    font-weight: 700 !important;
+}
+
+/* Result summary */
+.summary-box {
+    background: #1a1a1f !important;
+    border: 1px solid #2a2a35 !important;
+    border-radius: 12px !important;
+    padding: 16px !important;
+}
+.summary-box table {
+    width: 100% !important;
+}
+.summary-box td, .summary-box th {
+    padding: 6px 12px !important;
+    font-size: 13px !important;
+    border-bottom: 1px solid #222230 !important;
+}
+
+/* Toggle checkboxes */
+.toggle-row {
+    gap: 24px !important;
+}
+
+/* Audio upload area */
+.audio-upload {
+    border: 2px dashed #333340 !important;
+    border-radius: 14px !important;
+    transition: all 0.2s !important;
+}
+.audio-upload:hover {
+    border-color: #6366f1 !important;
+}
+
+/* How-to steps */
+.howto {
+    display: flex;
+    gap: 16px;
+    margin: 12px 0 4px;
+    flex-wrap: wrap;
+}
+.howto-step {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+    color: #a0a0b0;
+}
+.howto-num {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #6366f1, #8b5cf6);
+    color: #fff;
+    font-size: 12px;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+/* Feature tags */
+.features {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-top: 12px;
+}
+.feat-tag {
+    font-size: 11px;
+    padding: 4px 10px;
+    border-radius: 6px;
+    background: #1a1a1f;
+    border: 1px solid #333340;
+    color: #a0a0b0;
+}
+
+/* Footer */
+.footer-text {
+    text-align: center;
+    padding: 20px 0 8px;
+    color: #6a6a7a;
+    font-size: 12px;
+}
+.footer-text a {
+    color: #818cf8;
+    text-decoration: none;
+}
+
+/* ===== FIX: Dropdown text visibility ===== */
+/* Selected value text */
+.gr-dropdown .wrap .wrap-inner .secondary-wrap,
+.gr-dropdown .wrap .wrap-inner .secondary-wrap span,
+.gr-dropdown .wrap .wrap-inner input,
+.gr-dropdown input,
+.dropdown .wrap span,
+.dropdown input[type="text"],
+div[data-testid="dropdown"] span,
+div[data-testid="dropdown"] input {
+    color: #e8e8ed !important;
+}
+
+/* Dropdown options list */
+.gr-dropdown ul[role="listbox"],
+.gr-dropdown .options,
+.dropdown ul, .dropdown li,
+ul[role="listbox"],
+li[role="option"],
+div[role="option"] {
+    color: #e8e8ed !important;
+    background-color: #1a1a1f !important;
+}
+li[role="option"]:hover,
+div[role="option"]:hover,
+li[role="option"].selected,
+li[role="option"][aria-selected="true"] {
+    background-color: rgba(99,102,241,.2) !important;
+    color: #c7c7ff !important;
+}
+
+/* Dropdown container border */
+.gr-dropdown .wrap, .dropdown .wrap {
+    background: #222228 !important;
+    border-color: #333340 !important;
+}
+
+/* Dropdown info text */
+.gr-dropdown .info-text, .dropdown .info-text,
+span[data-testid="info-text"] {
+    color: #8888a0 !important;
+}
+
+/* ===== FIX: Upload progress visibility ===== */
+/* Gradio upload progress bar */
+.upload-container .progress-bar,
+.uploading .progress-bar,
+.file-upload .progress-bar {
+    background: #333340 !important;
+    border-radius: 6px !important;
+    overflow: hidden !important;
+}
+.upload-container .progress-bar .progress,
+.uploading .progress-bar .progress,
+.file-upload .progress-bar .progress {
+    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
+}
+
+/* Upload progress text */
+.upload-container .progress-text,
+.uploading .progress-text,
+.file-upload-text,
+.upload-text,
+.eta-bar {
+    color: #e8e8ed !important;
+    font-weight: 600 !important;
+}
+
+/* Gradio's built-in ETA bar */
+.eta-bar {
+    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
+    opacity: 0.3 !important;
+}
+
+/* Progress level / status text */
+.progress-level, .progress-level span,
+.progress-level .progress-level-inner {
+    color: #e8e8ed !important;
+    font-size: 13px !important;
+}
+
+/* Upload button area */
+.upload-button, .upload-button span {
+    color: #e8e8ed !important;
+    border-color: #6366f1 !important;
+}
+
+/* Audio component loading state */
+.audio-upload .uploading,
+.audio-upload .loading {
+    color: #e8e8ed !important;
+}
+
+/* Spinner / loading indicator */
+.audio-upload .loading svg,
+.audio-upload .spinner {
+    color: #818cf8 !important;
+}
+
+/* ===== Live Timer ===== */
+.live-timer {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    background: rgba(99,102,241,.08);
+    border: 1px solid rgba(99,102,241,.3);
+    color: #c7c7ff;
+    padding: 12px 24px;
+    border-radius: 12px;
+    font-size: 15px;
+    font-weight: 700;
+    font-family: 'Inter', 'SF Mono', monospace;
+    margin-bottom: 12px;
+    letter-spacing: 0.5px;
+}
+.live-timer.active {
+    display: flex !important;
+}
+.live-timer.done {
+    background: rgba(16,185,129,.08) !important;
+    border-color: rgba(16,185,129,.3) !important;
+    color: #6ee7b7 !important;
+}
+.live-timer.error {
+    background: rgba(239,68,68,.08) !important;
+    border-color: rgba(239,68,68,.3) !important;
+    color: #fca5a5 !important;
+}
+.pulse-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #818cf8;
+    animation: pulse-blink 1s ease-in-out infinite;
+    flex-shrink: 0;
+}
+.live-timer.done .pulse-dot { display: none; }
+.live-timer.error .pulse-dot { display: none; }
+@keyframes pulse-blink {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.3; transform: scale(0.7); }
+}
+.timer-clock {
+    font-variant-numeric: tabular-nums;
+    min-width: 52px;
+    text-align: center;
+}
+
+/* Responsive */
+@media (max-width: 640px) {
+    .howto { flex-direction: column; gap: 8px; }
+    .features { gap: 4px; }
+    .header-wrap h1 { font-size: 26px !important; }
+}
+"""
+
+UPLOAD_PROGRESS_JS = """
+<style>
+#upload-bar-wrap{display:none;position:fixed;top:0;left:0;right:0;z-index:99999;height:5px;background:#222228}
+#upload-bar{height:100%;width:0%;background:linear-gradient(90deg,#6366f1,#a78bfa);transition:width .2s;border-radius:0 3px 3px 0}
+#upload-pct{display:none;position:fixed;top:12px;right:16px;z-index:99999;background:#1a1a1f;border:1px solid #6366f1;
+color:#c7c7ff;padding:7px 16px;border-radius:10px;font-size:13px;font-weight:700;font-family:Inter,sans-serif;
+box-shadow:0 4px 20px rgba(99,102,241,.3)}
+</style>
+<script>
+(function(){
+  var barW=document.createElement('div');barW.id='upload-bar-wrap';
+  barW.innerHTML='<div id="upload-bar"></div>';document.body.appendChild(barW);
+  var pctEl=document.createElement('div');pctEl.id='upload-pct';document.body.appendChild(pctEl);
+
+  function show(p){
+    barW.style.display='block';pctEl.style.display='block';
+    document.getElementById('upload-bar').style.width=p+'%';
+    pctEl.textContent='\\u{1F4E4} Uploading... '+p+'%';
+  }
+  function hide(){
+    show(100);
+    setTimeout(function(){
+      barW.style.display='none';pctEl.style.display='none';
+      document.getElementById('upload-bar').style.width='0%';
+    },800);
+  }
+
+  var _fetch=window.fetch;
+  window.fetch=function(input,init){
+    var url=typeof input==='string'?input:(input&&input.url?input.url:'');
+    if(url.indexOf('/upload')!==-1 && url.indexOf('/upload_progress')===-1 && init && init.method==='POST' && init.body){
+      return new Promise(function(resolve,reject){
+        var xhr=new XMLHttpRequest();
+        xhr.open('POST',url,true);
+        xhr.responseType='text';
+        if(init.headers){
+          try{
+            var h=init.headers instanceof Headers?init.headers:new Headers(init.headers);
+            h.forEach(function(v,k){
+              if(k.toLowerCase()!=='content-type')xhr.setRequestHeader(k,v);
+            });
+          }catch(e){}
+        }
+        xhr.upload.onprogress=function(e){
+          if(e.lengthComputable)show(Math.round(e.loaded/e.total*100));
+        };
+        xhr.onload=function(){
+          hide();
+          var headers=new Headers();
+          try{
+            xhr.getAllResponseHeaders().trim().split('\\r\\n').forEach(function(line){
+              var i=line.indexOf(':');
+              if(i>0)headers.append(line.slice(0,i).trim(),line.slice(i+1).trim());
+            });
+          }catch(e){}
+          resolve(new Response(xhr.responseText,{status:xhr.status,statusText:xhr.statusText,headers:headers}));
+        };
+        xhr.onerror=function(){hide();reject(new TypeError('Network request failed'));};
+        xhr.onabort=function(){hide();reject(new DOMException('Aborted','AbortError'));};
+        xhr.send(init.body);
+      });
+    }
+    return _fetch.apply(this,arguments);
+  };
+})();
+
+/* ===== Live Timer ===== */
+window._timerInterval=null;
+window._timerStart=0;
+window._timerHideTimeout=null;
+window.startTranscribeTimer=function(){
+  var el=document.getElementById('live-timer');
+  if(!el)return;
+  /* Clear previous timer & auto-hide timeout */
+  if(window._timerInterval){clearInterval(window._timerInterval);window._timerInterval=null;}
+  if(window._timerHideTimeout){clearTimeout(window._timerHideTimeout);window._timerHideTimeout=null;}
+  window._timerStart=Date.now();
+  el.className='live-timer active';
+  el.innerHTML='<span class="pulse-dot"></span><span>Processing...</span><span class="timer-clock">00:00</span>';
+  window._timerInterval=setInterval(function(){
+    var sec=Math.floor((Date.now()-window._timerStart)/1000);
+    var m=Math.floor(sec/60);var s=sec%60;
+    var clock=el.querySelector('.timer-clock');
+    if(clock)clock.textContent=String(m).padStart(2,'0')+':'+String(s).padStart(2,'0');
+  },1000);
+};
+window.stopTranscribeTimer=function(ok){
+  if(!window._timerInterval)return; /* Already stopped — prevent double-stop */
+  clearInterval(window._timerInterval);
+  window._timerInterval=null; /* Null it so MutationObserver won't re-trigger */
+  var el=document.getElementById('live-timer');
+  if(!el)return;
+  var sec=Math.floor((Date.now()-window._timerStart)/1000);
+  var m=Math.floor(sec/60);var s=sec%60;
+  var t=String(m).padStart(2,'0')+':'+String(s).padStart(2,'0');
+  if(ok!==false){
+    el.className='live-timer active done';
+    el.innerHTML='\\u2705 Completed in <strong>'+t+'</strong>';
+  }else{
+    el.className='live-timer active error';
+    el.innerHTML='\\u274C Error after <strong>'+t+'</strong>';
+  }
+  window._timerHideTimeout=setTimeout(function(){
+    el.className='live-timer';
+    window._timerHideTimeout=null;
+  },60000);
+};
+
+/* Auto-start timer when EXPLICIT progress() text appears (contains ⏳).
+   Gradio StatusTracker (.eta-bar, .progress-level) appears on ALL fn calls,
+   but our ⏳ marker only appears when progress(0.05,"⏳ Menunggu GPU...") is called,
+   which happens AFTER the audio_file validation passes.
+   - No file → gr.Error() before progress() → no ⏳ → timer never starts
+   - File OK → progress(0.05,"⏳...") → ⏳ detected → timer starts
+   Auto-stop on error toast. */
+new MutationObserver(function(muts){
+  muts.forEach(function(m){
+    if(m.type==='childList'){
+      m.addedNodes.forEach(function(n){
+        /* Element node: check text for ⏳ marker */
+        if(n.nodeType===1){
+          if(!window._timerInterval&&n.textContent&&n.textContent.indexOf('\u23f3')!==-1){
+            window.startTranscribeTimer();
+          }
+          /* Detect error toast → stop timer */
+          var isToast=n.classList&&(n.classList.contains('toast-wrap')||n.classList.contains('error'));
+          var hasError=n.querySelector&&n.querySelector('.error,.toast-body');
+          if((isToast||hasError)&&window._timerInterval){
+            window.stopTranscribeTimer(false);
+          }
+        }
+        /* Text node with ⏳ */
+        if(n.nodeType===3&&!window._timerInterval&&n.nodeValue&&n.nodeValue.indexOf('\u23f3')!==-1){
+          window.startTranscribeTimer();
+        }
+      });
+    }
+    /* Text content change containing ⏳ (progress update on existing node) */
+    if(m.type==='characterData'&&!window._timerInterval&&m.target.nodeValue&&m.target.nodeValue.indexOf('\u23f3')!==-1){
+      window.startTranscribeTimer();
+    }
+  });
+}).observe(document.body,{childList:true,subtree:true,characterData:true});
+</script>
+"""
+
+with gr.Blocks(theme=THEME, title="TranscribeAI", css=CUSTOM_CSS, head=UPLOAD_PROGRESS_JS) as demo:
+
+    # ---- Header ----
+    gr.HTML("""
+    <div class="header-wrap">
+        <h1>TranscribeAI</h1>
+        <p>Audio Transcription with Speaker Diarization &mdash; Free & Fast</p>
+        <div class="badge-gpu">ZeroGPU H200 &bull; Whisper &bull; No API Key</div>
+        <div class="features">
+            <span class="feat-tag">99+ Languages</span>
+            <span class="feat-tag">Speaker ID</span>
+            <span class="feat-tag">SRT / TXT / DOCX</span>
+            <span class="feat-tag">GPU Accelerated</span>
+            <span class="feat-tag">Auto Language Detection</span>
+        </div>
+        <div class="howto">
+            <div class="howto-step"><div class="howto-num">1</div> Upload audio</div>
+            <div class="howto-step"><div class="howto-num">2</div> Click Start</div>
+            <div class="howto-step"><div class="howto-num">3</div> Download results</div>
+        </div>
+    </div>
+    """)
+
+    # ---- Upload ----
+    with gr.Group(elem_classes="card-section"):
+        gr.HTML('<div class="card-title">🎵 Upload Audio</div>')
+        audio_input = gr.Audio(
+            label="Drag & drop audio/video file, or click to browse. You can also record directly.",
+            type="filepath",
+            sources=["upload", "microphone"],
+            elem_classes="audio-upload",
+        )
+        gr.HTML('<div style="font-size:11px;color:#6a6a7a;margin-top:6px;">Formats: MP3, MP4, WAV, M4A, OGG, FLAC, WEBM &bull; Max ~1 hour audio</div>')
+
+    # ---- Settings ----
+    with gr.Group(elem_classes="card-section"):
+        gr.HTML('<div class="card-title">⚙️ Settings</div>')
+        gr.HTML('<div style="font-size:12px;color:#818cf8;margin-bottom:8px;">Model: Whisper Small (244M) &mdash; auto-loaded, ready to use</div>')
+        with gr.Row():
+            language_choice = gr.Dropdown(
+                choices=list(LANGUAGE_MAP.keys()),
+                value="Auto-detect",
+                label="Language",
+                info="Auto-detect or select a specific language",
+                scale=2,
+            )
+            speaker_count = gr.Slider(
+                minimum=0, maximum=10, step=1, value=0,
+                label="Number of Speakers",
+                info="0 = auto-detect",
+                scale=1,
+            )
+        with gr.Row(elem_classes="toggle-row"):
+            enable_diarization = gr.Checkbox(
+                value=True,
+                label="Speaker Diarization",
+                info="Identify who is speaking"
+            )
+            enable_vad = gr.Checkbox(
+                value=True,
+                label="VAD Filter",
+                info="Skip silent parts for cleaner results"
+            )
+
+    # ---- Start Button ----
+    btn_start = gr.Button(
+        "🚀 Start Transcription",
+        variant="primary",
+        size="lg",
+        elem_classes="btn-start",
+    )
+
+    # ---- Live Timer ----
+    gr.HTML('<div id="live-timer" class="live-timer"></div>')
+
+    # ---- Results ----
+    with gr.Group(elem_classes="card-section"):
+        gr.HTML('<div class="card-title">📊 Transcription Results</div>')
+        summary_output = gr.Markdown(
+            elem_classes="summary-box",
+            value="*Upload audio and click 'Start Transcription' to begin.*"
+        )
+        transcript_output = gr.Textbox(
+            label="Transcript Text",
+            lines=20,
+            max_lines=50,
+            show_copy_button=True,
+            interactive=False,
+            elem_classes="transcript-box",
+            placeholder="Transcription results with timestamps and speaker labels will appear here...\n\n[00:00] Speaker 1: example transcription text...",
+        )
+
+    # ---- Downloads ----
+    with gr.Group(elem_classes="card-section"):
+        gr.HTML('<div class="card-title">📥 Download Files</div>')
+        gr.HTML('<div style="font-size:12px;color:#6a6a7a;margin-bottom:8px;">Files are automatically deleted after 1 hour.</div>')
+        with gr.Row(elem_classes="download-row"):
+            srt_file = gr.File(label="SRT — Subtitles for video players")
+            txt_file = gr.File(label="TXT — Text with speaker labels")
+            docx_file = gr.File(label="DOCX — Colored Word document")
+
+    # ---- Connect ----
+    # Timer is started by MutationObserver when Gradio progress() appears in DOM.
+    # This ensures timer ONLY starts after validation passes (no file → no progress).
+    # Timer success-stop via .then(); error-stop via MutationObserver on error toast.
+    btn_start.click(
+        fn=transcribe_full,
+        inputs=[audio_input, language_choice, speaker_count,
+                enable_diarization, enable_vad],
+        outputs=[summary_output, transcript_output, srt_file, txt_file, docx_file],
+    ).then(
+        fn=lambda: None,
+        inputs=None,
+        outputs=None,
+        js="() => { window.stopTranscribeTimer(true); }",
+    )
+
+    # ---- Footer ----
+    gr.HTML("""
+    <div class="footer-text">
+        <strong>TranscribeAI</strong> by <a href="https://huggingface.co/romizone">romizone</a>
+        &bull; <a href="https://github.com/romizone/transcribeAI">GitHub</a>
+        &bull; ZeroGPU H200 &bull; Whisper + PyTorch
+    </div>
+    """)
+
+demo.queue().launch(ssr_mode=False)