refactor: overhaul Gradio app UI and enhance functionality

- Update app.py to implement a neobrutalism design for the Gradio interface.
- Introduce a two-pane layout with a stepper and results dock for improved user experience.
- Enhance interactive features including a progress log and editable transcripts.
- Add new functions for handling speaker label mapping in formatters.py.
- Update README.md to reflect UI changes and new features.
- Modify YouTube cookies in cookies.txt for session management consistency.

README.md

@@ -16,6 +16,13 @@ Whisper speaker diarization on T4 using `faster-whisper` (large-v3, fp16) and `p
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
+## UI Highlights
+
+- **Two-pane brutalist workspace** — 4-step stepper (Source · Configure · Process · Review) on the left, tabbed results dock (Transcript · Audio · Downloads · Diagnostics) on the right.
+- **Stage-aware progress** — single PROCESS button auto-chains YouTube download → convert → transcribe → diarize → align → format, with a live monospace log card (first feedback under 2s).
+- **Interactive transcript** — per-speaker color chips with a deterministic palette, click-row-to-seek audio playback, and editable speaker rename that rewrites CSV + SRT in place without re-running the pipeline.
+- **Inline error card** — known failure modes (missing HF_TOKEN, GPU OOM, YouTube auth) render an actionable remediation card next to the progress log.
+
 ## Required Setup
 
 This Space depends on the gated `pyannote/speaker-diarization-3.1` model. Before the app can run you must:

app.py

@@ -1,11 +1,7 @@
-"""Whisper Speaker Diarization — Gradio app (single tab, faster-whisper + pyannote)."""
+"""Whisper Speaker Diarization — Neobrutalism Gradio app (event wiring only)."""
 
 import logging
 import os
-import threading
-import time
-import traceback
-import uuid
 from pathlib import Path
 
 
@@ -21,7 +17,6 @@ def load_env_file(env_path=".env"):
         os.environ.setdefault(key.strip(), value.strip().strip('"').strip("'"))
 
 
-# Resolve cache dir + export HF/torch env BEFORE importing torch / hf libs (M2).
 load_env_file()
 from core import cache_manager  # noqa: E402
 
@@ -31,177 +26,126 @@ cache_manager.cleanup_old_videos()
 
 import gradio as gr  # noqa: E402
 import gradio_client.utils as _gcu  # noqa: E402
-import pandas as pd  # noqa: E402
-import psutil  # noqa: E402
-import torch  # noqa: E402
 
-# gradio_client 1.5–1.7 raises TypeError when a JSON schema node is a plain bool
-# (JSON Schema allows `additionalProperties: true|false`). Short-circuit on bool.
+# gradio_client 1.5–1.7 raises TypeError on plain bool JSON-schema nodes.
 _orig_get_type = _gcu.get_type
 _orig_to_py = _gcu._json_schema_to_python_type
+_gcu.get_type = lambda s: "Any" if isinstance(s, bool) else _orig_get_type(s)
+_gcu._json_schema_to_python_type = lambda s, d=None: ("Any" if s else "None") if isinstance(s, bool) else _orig_to_py(s, d)
 
+from core.pipeline_runner import OUTPUT_DIR  # noqa: E402
+from core.ui import handlers  # noqa: E402
+from core.ui.layout import build_results_dock, build_stepper  # noqa: E402
 
-def _safe_get_type(schema):
-    if isinstance(schema, bool):
-        return "Any"
-    return _orig_get_type(schema)
-
-
-def _safe_to_py(schema, defs=None):
-    if isinstance(schema, bool):
-        return "Any" if schema else "None"
-    return _orig_to_py(schema, defs)
-
-
-_gcu.get_type = _safe_get_type
-_gcu._json_schema_to_python_type = _safe_to_py
-
-from core import aligner, audio_io, diarizer, formatters, transcriber  # noqa: E402
-from core.youtube_loader import YouTubeAuthRequiredError, download_video  # noqa: E402
-
-logger = logging.getLogger("whisper-diarization")
 logging.basicConfig(level=logging.INFO)
 
-# Serialize GPU work — lru_cache'd model singletons are not thread-safe (C2).
-_PIPELINE_LOCK = threading.Lock()
-
-OUTPUT_DIR = cache_manager.get_output_dir()
-YOUTUBE_DIR = cache_manager.get_youtube_output_dir()
-
-LANGUAGES = [
-    ("Auto-detect", None), ("English", "en"), ("Japanese", "ja"), ("Chinese", "zh"),
-    ("Spanish", "es"), ("French", "fr"), ("German", "de"), ("Korean", "ko"),
-    ("Portuguese", "pt"), ("Russian", "ru"), ("Italian", "it"), ("Vietnamese", "vi"),
-    ("Arabic", "ar"), ("Hindi", "hi"), ("Indonesian", "id"), ("Dutch", "nl"),
-    ("Polish", "pl"), ("Turkish", "tr"), ("Thai", "th"), ("Ukrainian", "uk"),
-]
-
-EXAMPLE_URLS = [
-    "https://www.youtube.com/watch?v=j7BfEzAFuYc&t=32s",
-    "https://www.youtube.com/watch?v=-UX0X45sYe4",
-    "https://www.youtube.com/watch?v=7minSgqi-Gw",
-]
-
-
-def get_system_info(elapsed):
-    mem = psutil.virtual_memory()
-    parts = [
-        f"*RAM: {mem.total / 1024**3:.2f} GB total, {mem.percent}% used.*",
-        f"*Processing time: {elapsed:.2f} s.*",
-    ]
-    if torch.cuda.is_available():
-        free, total = torch.cuda.mem_get_info()
-        used_gb = (total - free) / 1024**3
-        total_gb = total / 1024**3
-        parts.append(f"*GPU: {used_gb:.2f} / {total_gb:.2f} GB used.*")
-    return "\n".join(parts)
-
-
-def download_youtube_for_ui(url):
-    if not url:
-        raise gr.Error("Please enter a YouTube URL first.")
-
-    yield (
-        gr.update(value=None, label="Downloading YouTube video..."),
-        "Downloading YouTube video. This may take a few minutes for long videos.",
+_STYLES_DIR = Path(__file__).parent / "core" / "styles"
+_THEME_CSS = (_STYLES_DIR / "neobrutalism.css").read_text(encoding="utf-8")
+_SEEK_JS = (_STYLES_DIR / "seek.js").read_text(encoding="utf-8")
+
+_HEAD = (
+    '<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=Archivo+Black&family=JetBrains+Mono&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">'
+    f'<script>{_SEEK_JS}</script>'
+)
+
+_THEME = gr.themes.Base(primary_hue="yellow", neutral_hue="stone").set(
+    body_background_fill="#FFF8E7",
+    body_background_fill_dark="#FFF8E7",
+    body_text_color="#000000",
+    body_text_color_dark="#000000",
+    button_primary_background_fill="#FFD23F",
+    button_primary_background_fill_dark="#FFD23F",
+    button_primary_text_color="#000000",
+    button_primary_text_color_dark="#000000",
+    button_secondary_background_fill="#FFFFFF",
+    button_secondary_background_fill_dark="#FFFFFF",
+    button_secondary_text_color="#000000",
+    button_secondary_text_color_dark="#000000",
+    background_fill_primary="#FFFFFF",
+    background_fill_primary_dark="#FFFFFF",
+    background_fill_secondary="#FFF8E7",
+    background_fill_secondary_dark="#FFF8E7",
+    block_background_fill="#FFFFFF",
+    block_background_fill_dark="#FFFFFF",
+    block_label_text_color="#000000",
+    block_label_text_color_dark="#000000",
+    block_title_text_color="#000000",
+    block_title_text_color_dark="#000000",
+    input_background_fill="#FFFFFF",
+    input_background_fill_dark="#FFFFFF",
+    panel_background_fill="#FFFFFF",
+    panel_background_fill_dark="#FFFFFF",
+    border_color_primary="#000000",
+    border_color_primary_dark="#000000",
+)
+
+# Force light variant always — drop .dark class on root + add .neobrut for CSS scoping
+_NEOBRUT_BOOTSTRAP = (
+    "<script>"
+    "(function(){"
+    "function fix(){"
+    "var roots=[document.documentElement, document.body, document.querySelector('.gradio-container')];"
+    "roots.forEach(function(el){if(el){el.classList.remove('dark');el.classList.add('neobrut');}});"
+    "}"
+    "fix();"
+    "document.addEventListener('DOMContentLoaded',fix);"
+    "var mo=new MutationObserver(fix);"
+    "mo.observe(document.documentElement,{attributes:true,attributeFilter:['class']});"
+    "})();"
+    "</script>"
+)
+
+
+with gr.Blocks(title="Whisper Speaker Diarization", css=_THEME_CSS, head=_HEAD, theme=_THEME) as demo:
+    gr.HTML(_NEOBRUT_BOOTSTRAP)
+    gr.HTML('<div class="neobrut-brand">WHISPER × DIARIZE <span class="neobrut-brand-tag">v3.1</span></div>')
+
+    with gr.Row(elem_classes="brut-workspace"):
+        with gr.Column(scale=1):
+            stepper = build_stepper()
+        with gr.Column(scale=2):
+            dock = build_results_dock()
+
+    stepper["yt_btn"].click(
+        handlers.download_youtube_for_ui, [stepper["yt_url"]],
+        [stepper["video_in"], stepper["yt_status"]],
     )
 
-    try:
-        video_path = download_video(url, YOUTUBE_DIR)
-    except YouTubeAuthRequiredError as exc:
-        yield (gr.update(value=None, label="Video / Audio file"), str(exc))
-        return
-    except Exception as exc:  # noqa: BLE001
-        logger.error("YouTube download failed: %s", traceback.format_exc())
-        yield (gr.update(value=None, label="Video / Audio file"), f"Download failed: {type(exc).__name__}.")
-        return
-
-    cache_manager.cleanup_old_videos()
-    yield (
-        gr.update(value=video_path, label="Video / Audio file"),
-        f"Downloaded video: `{video_path}`",
+    stepper["run_btn"].click(
+        handlers.run_unified,
+        [stepper["yt_url"], stepper["video_in"], stepper["language"], stepper["num_speakers"]],
+        [
+            dock["df_out"], dock["csv_out"], dock["srt_out"], dock["sysinfo"],
+            stepper["progress_log"], stepper["error_card"],
+            dock["merged_state"], dock["wav_state"],
+            dock["audio_player"], dock["seek_bus"], stepper["video_in"],
+        ],
+        show_progress="minimal",
+        show_progress_on=[stepper["progress_log"]],
     )
 
-
-def run_pipeline(video_path, language, num_speakers):
-    if not video_path:
-        raise gr.Error("Please upload a file or download a YouTube video first.")
-
-    t0 = time.time()
-    job_id = uuid.uuid4().hex[:8]
-
-    try:
-        with _PIPELINE_LOCK:
-            wav_path = audio_io.convert_to_wav(video_path, OUTPUT_DIR)
-            segments = transcriber.transcribe(wav_path, language=language or None)
-            if not segments:
-                raise gr.Error("No speech detected in the input audio.")
-            turns = diarizer.diarize(wav_path, num_speakers=num_speakers)
-            if torch.cuda.is_available():
-                torch.cuda.empty_cache()
-            merged = aligner.assign_speakers(segments, turns)
-    except gr.Error:
-        raise
-    except torch.cuda.OutOfMemoryError as exc:  # type: ignore[attr-defined]
-        if torch.cuda.is_available():
-            torch.cuda.empty_cache()
-        logger.error("GPU OOM: %s", exc)
-        raise gr.Error("GPU out of memory. Try a shorter clip or set fewer speakers.") from exc
-    except Exception as exc:  # noqa: BLE001
-        logger.error("Pipeline failure (job %s):\n%s", job_id, traceback.format_exc())
-        raise gr.Error(f"Pipeline failed: {type(exc).__name__}. See server logs for details.") from exc
-
-    rows = formatters.build_grouped_rows(merged)
-    csv_path = formatters.write_csv(rows, OUTPUT_DIR / f"transcript_{job_id}.csv")
-    srt_path = formatters.write_srt(merged, OUTPUT_DIR / f"transcript_{job_id}.srt")
-
-    df = pd.DataFrame(rows)
-    return df, csv_path, srt_path, get_system_info(time.time() - t0)
-
-
-with gr.Blocks(title="Whisper Speaker Diarization") as demo:
-    gr.Markdown(
-        "# Whisper Speaker Diarization\n"
-        "Upload a video/audio file or download a YouTube video, then transcribe "
-        "with `faster-whisper` (large-v3) and diarize with `pyannote.audio` 3.1. "
-        "Outputs CSV + SRT."
+    dock["edit_btn"].click(
+        handlers.enter_edit_mode, [dock["merged_state"]],
+        [dock["df_out"], dock["edit_btn"], dock["apply_btn"], dock["cancel_btn"], dock["edit_mode_state"]],
     )
-
-    with gr.Row():
-        with gr.Column():
-            yt_url = gr.Textbox(label="YouTube URL", lines=1)
-            yt_btn = gr.Button("Download YouTube video")
-            yt_status = gr.Markdown()
-            video_in = gr.Video(label="Video / Audio file")
-            language = gr.Dropdown(
-                choices=LANGUAGES, value=None,
-                label="Spoken language (auto-detect if blank)",
-            )
-            num_speakers = gr.Number(
-                value=0, precision=0,
-                label="Number of speakers (0 = auto-detect via pyannote)",
-            )
-            run_btn = gr.Button("Transcribe & Diarize", variant="primary")
-            gr.Examples(examples=EXAMPLE_URLS, inputs=[yt_url], label="YouTube examples")
-
-        with gr.Column():
-            df_out = gr.DataFrame(
-                value=pd.DataFrame(columns=["Start", "End", "Speaker", "Text"]),
-                label="Transcript", row_count=(0, "dynamic"), wrap=True,
-            )
-            csv_out = gr.File(label="Download CSV")
-            srt_out = gr.File(label="Download SRT")
-            sysinfo = gr.Markdown()
-
-    yt_btn.click(download_youtube_for_ui, [yt_url], [video_in, yt_status])
-    run_btn.click(
-        run_pipeline,
-        [video_in, language, num_speakers],
-        [df_out, csv_out, srt_out, sysinfo],
+    dock["cancel_btn"].click(
+        handlers.cancel_edit, [dock["merged_state"]],
+        [dock["df_out"], dock["edit_btn"], dock["apply_btn"], dock["cancel_btn"], dock["edit_mode_state"]],
+    )
+    dock["apply_btn"].click(
+        handlers.apply_renames, [dock["df_out"], dock["merged_state"]],
+        [dock["df_out"], dock["csv_out"], dock["srt_out"],
+         dock["edit_btn"], dock["apply_btn"], dock["cancel_btn"],
+         dock["edit_mode_state"], dock["merged_state"]],
+    )
+    dock["df_out"].select(
+        handlers.on_row_select, [dock["merged_state"], dock["edit_mode_state"]], [dock["seek_bus"]],
     )
 
 
 demo.queue(default_concurrency_limit=1)
 
 if __name__ == "__main__":
-    demo.launch(debug=False, ssr_mode=False)
+    demo.launch(debug=False, ssr_mode=False, allowed_paths=[str(OUTPUT_DIR)])

cookies.txt

@@ -73,8 +73,8 @@
 .www.linkedin.com	TRUE	/	TRUE	13376020845000000	li_theme_set	app
 .www.linkedin.com	TRUE	/	TRUE	13361678445000000	timezone	Etc/GMT-9
 .youtube.com	TRUE	/	FALSE	0	PREF	hl=en&tz=UTC
-.youtube.com	TRUE	/	TRUE	1793752536	VISITOR_INFO1_LIVE	Vz7XlgEER4M
-.youtube.com	TRUE	/	TRUE	1793752536	VISITOR_PRIVACY_METADATA	CgJKUBIEGgAgDA%3D%3D
+.youtube.com	TRUE	/	TRUE	1793759290	VISITOR_INFO1_LIVE	Vz7XlgEER4M
+.youtube.com	TRUE	/	TRUE	1793759290	VISITOR_PRIVACY_METADATA	CgJKUBIEGgAgDA%3D%3D
 .youtube.com	TRUE	/	TRUE	13392004842930348	__Secure-1PSIDTS	sidts-CjIBLwcBXHTZZ4VlgjO9d0X9960k-m3xB6nUHCU0ovveIk9bhdMwuI1M5U6sCFpH69WGyxAA
 .youtube.com	TRUE	/	TRUE	13395028842930468	__Secure-3PAPISID	rXfXaV6elrnuLRG2/ATiQ5qo4qP3esXWRf
 .youtube.com	TRUE	/	TRUE	13395028842930396	__Secure-3PSID	g.a000jwgUbTicY-c3T2zFcPSBSs9JcjhaZuSGyJ_QzqtQAsI829wiF4sYm8c8WRawxgyeTMLvGgACgYKAdwSAQASFQHGX2MiAtagbvetYeXJFcm11E34gBoVAUF8yKovqs11VovRjv2YDBvIDwSY0076
@@ -83,8 +83,8 @@
 .youtube.com	TRUE	/	TRUE	1793696513	__Secure-YNID	18.YT=pClxLbLt2ndTOFz5TjTNNAVDqO4rdY2bPBZgXXEDTx1Vu4kIMxueXBGt8aI1fxCrPAood0t9wFaYccU9eEuMaqRF-NF4Y4vizaoFkbmU129yihrUKBHAou0NF9B71i2Fnado_fUjbeRAgE2hp5i17_ATo0B373qzKI9Gl1vBCw3Qc4_fB4uevKv0_mAuKbWTeBe0VhDmLiL9bXaajYiLqu8F4nh1b6IeaAaNBa38-C_6MlWQcBe6Wy0FgGlcH-1Rbskojho9yRnjYCLYCTX_A1eEYqHDX-X0lWZVQBM8RTjIEabEql-EQGmVhqkOyGT5zzB7e5WXJxfsqA7M-vKE1Q
 .youtube.com	TRUE	/	TRUE	1793697765	__Secure-ROLLOUT_TOKEN	COfp1qDEr8aDsgEQ8bvOwOimlAMY9v3Ole2mlAM%3D
 .youtube.com	TRUE	/	TRUE	0	SOCS	CAI
-.youtube.com	TRUE	/	TRUE	1778202336	GPS	1
-.youtube.com	TRUE	/	TRUE	0	YSC	-wZ94Xwu_3Q
+.youtube.com	TRUE	/	TRUE	1778207818	GPS	1
+.youtube.com	TRUE	/	TRUE	0	YSC	ED98F99fkiE
 accounts.google.com	FALSE	/	TRUE	13395028842810568	ACCOUNT_CHOOSER	AFx_qI7mKNWJOzlVhiBG_7ePk9G1aurgq_vRbUrMT4vUpZIBEglJRds2dMuP4xyKSU31IrM6EQDzANxN9beScMQqM7W9i35ZREssDLIsMAbV3iAWW-daDL0bL0uccjENF9AYSTq0Q_xNNNianZfPYldxwjVVv3DgQEPRQ5-vJ-FK3cN6OZT-Xr0aN8m19h5rFR1-HfqEXbJlBCSA8KaoPLdRbr0d8xIm0w
 accounts.google.com	FALSE	/	TRUE	13395155885030990	LSID	o.drive.fife.usercontent.google.com|o.drive.google.com|s.JP|s.youtube:g.a000jwgUbVr8DCZQNAUc_81ez4p7muwo5wbEV58bNPuohR3K4oQecCW3cJBMWTcPoXpV4ezWIwACgYKAdESAQASFQHGX2MiQp7teYLYhQb_QY1etv0AmxoVAUF8yKoT2rc29PMCNKIpy9Qze0xd0076
 accounts.google.com	FALSE	/	TRUE	13395028842810594	SMSV	ADHTe-DtGKOMdPXjuNGHm29fqrNj6gxDE1al9AaonriIQgaa6Ng8ZBhEIFU3_1GyD_D4xJwDzRPvyEWFivLcjm92Et4gqOnss6uY9LQEPAkVSycJctnf5cw

core/formatters.py

@@ -64,3 +64,17 @@ def write_srt(segments, path):
         lines.append(f"{i}\n{start} --> {end}\n{prefix}{text}\n")
     Path(path).write_text("\n".join(lines) + "\n", encoding="utf-8")
     return str(Path(path).resolve())
+
+
+def rewrite_with_label_map(segments, label_map):
+    """Apply {orig_label → new_label} to merged segments, returning a new list (does not mutate input)."""
+    if not label_map:
+        return list(segments) if segments else []
+    out = []
+    for seg in segments:
+        new_seg = dict(seg)
+        spk = new_seg.get("speaker")
+        if spk in label_map:
+            new_seg["speaker"] = label_map[spk]
+        out.append(new_seg)
+    return out

core/pipeline_runner.py

@@ -0,0 +1,183 @@
+"""Stage-aware pipeline generator. Yields (kind, payload) for UI consumption.
+
+kind ∈ {"log", "video", "result", "error"}:
+  - log:    payload is the cumulative log string
+  - video:  payload is a video path (set after auto YT download)
+  - result: payload is (df, csv_path, srt_path, sysinfo, merged, wav_path)
+  - error:  payload is rendered error-card HTML; generator then re-raises
+"""
+
+import logging
+import threading
+import time
+import traceback
+import uuid
+from typing import Iterator, Tuple, Any
+
+import gradio as gr
+import pandas as pd
+import psutil
+import torch
+
+from core import aligner, audio_io, cache_manager, diarizer, formatters, transcriber
+from core.ui.error_card import render_error
+from core.youtube_loader import YouTubeAuthRequiredError, download_video
+
+
+logger = logging.getLogger("whisper-diarization.runner")
+
+_PIPELINE_LOCK = threading.Lock()
+
+OUTPUT_DIR = cache_manager.get_output_dir()
+YOUTUBE_DIR = cache_manager.get_youtube_output_dir()
+
+
+STAGES = [
+    ("convert", 0.05, "Converting audio"),
+    ("transcribe", 0.20, "Transcribing"),
+    ("diarize", 0.55, "Diarizing speakers"),
+    ("align", 0.85, "Aligning"),
+    ("format", 0.95, "Writing CSV/SRT"),
+]
+
+
+def _sysinfo(elapsed: float) -> str:
+    mem = psutil.virtual_memory()
+    parts = [
+        f"*RAM: {mem.total / 1024**3:.2f} GB total, {mem.percent}% used.*",
+        f"*Processing time: {elapsed:.2f} s.*",
+    ]
+    if torch.cuda.is_available():
+        free, total = torch.cuda.mem_get_info()
+        used_gb = (total - free) / 1024**3
+        total_gb = total / 1024**3
+        parts.append(f"*GPU: {used_gb:.2f} / {total_gb:.2f} GB used.*")
+    return "\n".join(parts)
+
+
+def _stage_line(idx: int, total: int, label: str) -> str:
+    return f"[{idx}/{total}] {label}…"
+
+
+def run_stages(
+    video_path: str,
+    language: str,
+    num_speakers: int,
+    progress: gr.Progress,
+) -> Iterator[Tuple[str, Any]]:
+    """Run conversion → transcribe → diarize → align → format. Yield logs and final result."""
+    if not video_path:
+        raise gr.Error("Please upload a file or download a YouTube video first.")
+
+    t0 = time.time()
+    job_id = uuid.uuid4().hex[:8]
+    log_lines: list = []
+    total = len(STAGES)
+
+    def push(idx: int, label: str, weight: float):
+        log_lines.append(_stage_line(idx, total, label))
+        try:
+            progress(weight, desc=label)
+        except Exception:
+            pass
+        return "\n".join(log_lines)
+
+    acquired = _PIPELINE_LOCK.acquire(blocking=True)
+    try:
+        # Stage 1 — convert
+        yield "log", push(1, STAGES[0][2], STAGES[0][1])
+        wav_path = audio_io.convert_to_wav(video_path, OUTPUT_DIR)
+
+        # Stage 2 — transcribe
+        yield "log", push(2, STAGES[1][2], STAGES[1][1])
+        segments = transcriber.transcribe(wav_path, language=language or None)
+        if not segments:
+            raise gr.Error("No speech detected in the input audio.")
+
+        # Stage 3 — diarize
+        yield "log", push(3, STAGES[2][2], STAGES[2][1])
+        turns = diarizer.diarize(wav_path, num_speakers=num_speakers)
+        if torch.cuda.is_available():
+            torch.cuda.empty_cache()
+
+        # Stage 4 — align
+        yield "log", push(4, STAGES[3][2], STAGES[3][1])
+        merged = aligner.assign_speakers(segments, turns)
+
+        # Stage 5 — format
+        yield "log", push(5, STAGES[4][2], STAGES[4][1])
+        rows = formatters.build_grouped_rows(merged)
+        csv_path = formatters.write_csv(rows, OUTPUT_DIR / f"transcript_{job_id}.csv")
+        srt_path = formatters.write_srt(merged, OUTPUT_DIR / f"transcript_{job_id}.srt")
+
+        df = pd.DataFrame(rows)
+        sysinfo = _sysinfo(time.time() - t0)
+        log_lines.append("[done]")
+        yield "log", "\n".join(log_lines)
+        yield "result", (df, csv_path, srt_path, sysinfo, merged, str(wav_path))
+    except gr.Error as exc:
+        yield "error", render_error(exc)
+        raise
+    except torch.cuda.OutOfMemoryError as exc:
+        if torch.cuda.is_available():
+            torch.cuda.empty_cache()
+        logger.error("GPU OOM: %s", exc)
+        yield "error", render_error(exc)
+        raise gr.Error("GPU out of memory. Try a shorter clip or set fewer speakers.") from exc
+    except Exception as exc:
+        logger.error("Pipeline failure (job %s):\n%s", job_id, traceback.format_exc())
+        yield "error", render_error(exc)
+        raise gr.Error(f"Pipeline failed: {type(exc).__name__}. See server logs for details.") from exc
+    finally:
+        if acquired:
+            _PIPELINE_LOCK.release()
+
+
+def process_unified(
+    yt_url: str,
+    video_in: str,
+    language: str,
+    num_speakers: int,
+    progress: gr.Progress,
+) -> Iterator[Tuple[str, Any]]:
+    """Unified flow: optionally download YouTube first, then run stages."""
+    log_lines: list = []
+
+    if not video_in and not yt_url:
+        raise gr.Error("Provide a YouTube URL or upload a file.")
+
+    if not video_in and yt_url:
+        log_lines.append("[0/N] Downloading YouTube video…")
+        try:
+            progress(0.02, desc="Downloading YouTube")
+        except Exception:
+            pass
+        yield "log", "\n".join(log_lines)
+        try:
+            video_in = download_video(yt_url, YOUTUBE_DIR)
+        except YouTubeAuthRequiredError as exc:
+            yield "error", render_error(exc)
+            raise gr.Error(str(exc)) from exc
+        except Exception as exc:
+            logger.error("YouTube download failed: %s", traceback.format_exc())
+            yield "error", render_error(exc)
+            raise gr.Error(f"YouTube download failed: {type(exc).__name__}.") from exc
+        cache_manager.cleanup_old_videos()
+        log_lines.append(f"[0/N] Downloaded: {video_in}")
+        yield "log", "\n".join(log_lines)
+        yield "video", video_in
+    elif video_in and yt_url:
+        log_lines.append("[note] Both URL and upload provided — using uploaded file.")
+        yield "log", "\n".join(log_lines)
+
+    # Chain into stages, prefixing existing log lines
+    saw_log = False
+    for kind, payload in run_stages(video_in, language, num_speakers, progress):
+        if kind == "log":
+            saw_log = True
+            combined = "\n".join(log_lines + [payload]) if log_lines else payload
+            yield "log", combined
+        else:
+            yield kind, payload
+    if not saw_log:
+        yield "log", "\n".join(log_lines)

core/styles/neobrutalism.css

@@ -0,0 +1,662 @@
+/* Neobrutalism design system — strict tokens, no radius, hard offset shadows */
+
+/* Force light theme — override Gradio's auto dark-mode regardless of system pref */
+html, body,
+.gradio-container,
+.gradio-container.dark,
+.dark .gradio-container,
+body.dark,
+body[class*="dark"] {
+  background: #FFF8E7 !important;
+  color: #000000 !important;
+  color-scheme: light !important;
+}
+
+.dark, .gradio-container.dark {
+  --background-fill-primary: #FFFFFF !important;
+  --background-fill-secondary: #FFF8E7 !important;
+  --body-background-fill: #FFF8E7 !important;
+  --body-text-color: #000000 !important;
+}
+
+/* Kill Gradio's per-component progress overlay on transcript / audio / file outputs —
+   we have our own brutalist log card in the Review step */
+.brut-df .progress-bar-wrap,
+.brut-df .progress-text,
+.brut-df [data-testid="block-info"],
+.brut-df .meta-text,
+#brut-audio-mount + .progress-bar-wrap,
+#brut-audio-mount .progress-bar-wrap,
+.gr-html .progress-bar-wrap,
+.gr-html .progress-text,
+.gr-file .progress-bar-wrap,
+.gr-file .progress-text {
+  display: none !important;
+}
+
+/* Hide global timer text leaking into output blocks */
+.brut-df .timer,
+.gr-html .timer,
+.gr-file .timer {
+  display: none !important;
+}
+
+:root {
+  --brut-bg: #FFF8E7;
+  --brut-fg: #000000;
+  --brut-yellow: #FFD23F;
+  --brut-coral: #FF6B6B;
+  --brut-cyan: #5CE1E6;
+  --brut-lime: #A4F47A;
+  --brut-magenta: #FF6FC0;
+  --brut-orange: #FF9F1C;
+  --brut-white: #FFFFFF;
+  --brut-border: 3px solid #000;
+  --brut-border-thin: 2px solid #000;
+  --brut-shadow: 4px 4px 0 #000;
+  --brut-shadow-hover: 2px 2px 0 #000;
+  --brut-shadow-press: 0 0 0 #000;
+  --brut-radius: 0;
+  --brut-font-heading: 'Space Grotesk', system-ui, sans-serif;
+  --brut-font-brand: 'Archivo Black', system-ui, sans-serif;
+  --brut-font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
+}
+
+/* Base reset — apply globally (no .neobrut required) since this is a single-purpose app */
+.gradio-container {
+  background: var(--brut-bg) !important;
+  color: var(--brut-fg) !important;
+  font-family: var(--brut-font-heading) !important;
+}
+
+.gradio-container * {
+  border-radius: var(--brut-radius) !important;
+  box-sizing: border-box;
+}
+
+.gradio-container .gr-button,
+.gradio-container button,
+.gradio-container .gr-input,
+.gradio-container input,
+.gradio-container textarea,
+.gradio-container select,
+.gradio-container .gr-box,
+.gradio-container .block,
+.gradio-container .form,
+.gradio-container .wrap {
+  border-radius: 0 !important;
+  font-family: var(--brut-font-heading);
+}
+
+.gradio-container h1,
+.gradio-container h2,
+.gradio-container h3,
+.gradio-container h4 {
+  font-family: var(--brut-font-heading);
+  font-weight: 700;
+  color: var(--brut-fg) !important;
+  letter-spacing: -0.01em;
+}
+
+/* Brand bar */
+.neobrut-brand {
+  background: var(--brut-yellow);
+  color: var(--brut-fg);
+  border-bottom: var(--brut-border);
+  box-shadow: var(--brut-shadow);
+  font-family: var(--brut-font-brand);
+  font-size: 28px;
+  letter-spacing: 0.06em;
+  padding: 16px 24px;
+  margin: 0 0 20px 0;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.neobrut-brand-tag {
+  font-family: var(--brut-font-mono);
+  font-size: 12px;
+  background: var(--brut-fg);
+  color: var(--brut-yellow);
+  padding: 4px 8px;
+  letter-spacing: 0.1em;
+  font-weight: 400;
+}
+
+/* Buttons — chunky, hard shadow, hover translates */
+.gradio-container button,
+.gradio-container .gr-button {
+  background: var(--brut-white);
+  color: var(--brut-fg);
+  border: var(--brut-border) !important;
+  box-shadow: var(--brut-shadow);
+  font-family: var(--brut-font-heading);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 10px 18px;
+  transition: transform 0.05s ease, box-shadow 0.05s ease;
+  cursor: pointer;
+}
+
+.gradio-container button:hover,
+.gradio-container .gr-button:hover {
+  transform: translate(2px, 2px);
+  box-shadow: var(--brut-shadow-hover);
+}
+
+.gradio-container button:active,
+.gradio-container .gr-button:active {
+  transform: translate(4px, 4px);
+  box-shadow: var(--brut-shadow-press);
+}
+
+.gradio-container button:disabled,
+.gradio-container .gr-button:disabled {
+  opacity: 0.5;
+  background: #ddd;
+  cursor: not-allowed;
+}
+
+.gradio-container .brut-primary,
+.gradio-container button.brut-primary {
+  background: var(--brut-yellow);
+  font-family: var(--brut-font-brand);
+  font-size: 18px;
+  padding: 16px 28px;
+  letter-spacing: 0.08em;
+}
+
+/* Inputs */
+.gradio-container input[type="text"],
+.gradio-container input[type="number"],
+.gradio-container textarea,
+.gradio-container select,
+.gradio-container .gr-input,
+.gradio-container .gr-textbox,
+.gradio-container .gr-dropdown {
+  background: var(--brut-white) !important;
+  border: var(--brut-border) !important;
+  box-shadow: var(--brut-shadow);
+  font-family: var(--brut-font-mono);
+  padding: 8px 12px;
+  color: var(--brut-fg);
+}
+
+.gradio-container input:focus,
+.gradio-container textarea:focus,
+.gradio-container select:focus {
+  outline: 3px solid var(--brut-cyan);
+  outline-offset: 2px;
+}
+
+/* Focus visible across the board */
+.gradio-container *:focus-visible {
+  outline: 3px solid var(--brut-fg);
+  outline-offset: 2px;
+}
+
+/* Step cards */
+.brut-step-card {
+  background: var(--brut-white);
+  border: var(--brut-border) !important;
+  box-shadow: var(--brut-shadow);
+  padding: 18px;
+  margin-bottom: 18px;
+}
+
+/* Step header — black ribbon inside the card, with breathing room on all sides */
+.brut-step-header {
+  display: flex !important;
+  align-items: center;
+  gap: 14px;
+  margin: 4px 0 20px 0;
+  padding: 12px 16px;
+  background: var(--brut-fg) !important;
+  border: var(--brut-border-thin) !important;
+  box-shadow: 3px 3px 0 #000;
+  color: var(--brut-yellow) !important;
+}
+
+.brut-step-num {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 44px;
+  height: 36px;
+  background: var(--brut-yellow);
+  color: var(--brut-fg);
+  border: var(--brut-border-thin);
+  font-family: var(--brut-font-brand);
+  font-size: 20px;
+  padding: 0 10px;
+  letter-spacing: 0.05em;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+/* Per-step accent colors so steps feel sequential and distinct */
+.brut-step-card.step-1 .brut-step-num { background: var(--brut-yellow); }
+.brut-step-card.step-2 .brut-step-num { background: var(--brut-cyan); }
+.brut-step-card.step-3 .brut-step-num { background: var(--brut-lime); }
+.brut-step-card.step-4 .brut-step-num { background: var(--brut-magenta); }
+
+.brut-step-title {
+  font-family: var(--brut-font-brand) !important;
+  font-size: 20px !important;
+  letter-spacing: 0.1em !important;
+  text-transform: uppercase !important;
+  margin: 0 !important;
+  color: var(--brut-yellow) !important;
+  background: transparent !important;
+  line-height: 1.1 !important;
+  flex: 1;
+}
+
+/* Ensure Gradio's gr.HTML wrapper inside the step-card doesn't break the ribbon */
+.brut-step-card .html-container,
+.brut-step-card .prose,
+.brut-step-card [class*="html-container"] {
+  background: transparent !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+/* Tabs — flat saturated, black underline on active */
+.gradio-container .brut-tabs .tab-nav,
+.gradio-container .brut-tabs .tab-nav button {
+  border-radius: 0 !important;
+  font-family: var(--brut-font-heading);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.gradio-container .brut-tabs .tab-nav {
+  border-bottom: var(--brut-border);
+  background: var(--brut-bg);
+}
+
+.gradio-container .brut-tabs .tab-nav button {
+  background: var(--brut-white);
+  border: var(--brut-border-thin) !important;
+  border-bottom: none !important;
+  margin-right: 6px;
+  padding: 8px 16px;
+  box-shadow: none;
+}
+
+.gradio-container .brut-tabs .tab-nav button.selected {
+  background: var(--brut-yellow);
+  border: var(--brut-border) !important;
+  border-bottom: 3px solid var(--brut-yellow) !important;
+  box-shadow: var(--brut-shadow-hover);
+}
+
+.gradio-container .brut-tabs .tab-nav button:hover:not(.selected) {
+  background: var(--brut-bg);
+  transform: translate(0, -1px);
+}
+
+/* Tab content panel — keep separation from background */
+.gradio-container .brut-tabs > .tabitem {
+  background: var(--brut-white) !important;
+  border: var(--brut-border) !important;
+  border-top: none !important;
+  box-shadow: var(--brut-shadow);
+  padding: 16px !important;
+}
+
+/* Block labels everywhere — dark on cream */
+.gradio-container .gr-block-label,
+.gradio-container [data-testid="block-label"],
+.gradio-container .label {
+  color: var(--brut-fg) !important;
+  font-family: var(--brut-font-heading) !important;
+  font-weight: 700 !important;
+}
+
+/* Dock workspace */
+.brut-workspace {
+  gap: 18px;
+}
+
+/* Speaker chips */
+.brut-chip {
+  display: inline-block;
+  padding: 2px 8px;
+  border: var(--brut-border-thin);
+  font-family: var(--brut-font-brand);
+  font-size: 12px;
+  letter-spacing: 0.04em;
+  color: var(--brut-fg);
+  white-space: nowrap;
+}
+
+.brut-df td:first-child {
+  white-space: nowrap;
+}
+
+/* Progress log card — no inner scroll; outer container handles overflow */
+.brut-log {
+  background: #000;
+  color: var(--brut-lime);
+  border: var(--brut-border) !important;
+  box-shadow: var(--brut-shadow);
+  font-family: var(--brut-font-mono);
+  font-size: 13px;
+  padding: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+  overflow: visible;
+  margin-top: 8px;
+}
+
+.brut-log,
+.brut-log .prose,
+.brut-log .markdown,
+.brut-log [class*="container"] {
+  max-height: none !important;
+  overflow: visible !important;
+}
+
+.brut-log * {
+  background: transparent !important;
+  color: var(--brut-lime) !important;
+  font-family: var(--brut-font-mono) !important;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
+/* Audio player */
+.brut-audio-player {
+  width: 100%;
+  border: var(--brut-border);
+  box-shadow: var(--brut-shadow);
+}
+
+.brut-audio-empty {
+  font-family: var(--brut-font-mono);
+  border: 3px dashed var(--brut-fg);
+  padding: 24px;
+  text-align: center;
+  color: var(--brut-fg);
+  background: var(--brut-white);
+}
+
+/* Error card */
+.brut-error-card-content {
+  background: var(--brut-coral);
+  border: var(--brut-border);
+  box-shadow: var(--brut-shadow);
+  padding: 16px;
+  margin-top: 12px;
+  color: var(--brut-fg);
+}
+
+.brut-error-card-content h4 {
+  font-family: var(--brut-font-brand);
+  font-size: 18px;
+  margin: 0 0 8px 0;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.brut-error-card-content p {
+  margin: 6px 0;
+  font-family: var(--brut-font-heading);
+}
+
+.brut-error-card-content ol {
+  font-family: var(--brut-font-mono);
+  font-size: 13px;
+  padding-left: 24px;
+  margin: 8px 0 0 0;
+}
+
+.brut-error-card-content li {
+  margin-bottom: 4px;
+}
+
+/* ---------- DataFrame (Transcript) — readable cells ---------- */
+
+/* Outer frame */
+.gradio-container .brut-df,
+.gradio-container .gr-dataframe {
+  border: var(--brut-border) !important;
+  box-shadow: var(--brut-shadow);
+  background: var(--brut-white) !important;
+}
+
+/* Reset any inherited dark background on inner wrappers */
+.gradio-container .brut-df,
+.gradio-container .brut-df > div,
+.gradio-container .brut-df .table-wrap,
+.gradio-container .brut-df [class*="table-wrap"],
+.gradio-container .brut-df [class*="tableWrap"],
+.gradio-container .brut-df [class*="dataframe"],
+.gradio-container .gr-dataframe > div {
+  background: var(--brut-white) !important;
+  color: var(--brut-fg) !important;
+}
+
+/* Table — fixed layout so columns stay inside card width */
+.gradio-container .brut-df table,
+.gradio-container .gr-dataframe table {
+  background: var(--brut-white) !important;
+  color: var(--brut-fg) !important;
+  border-collapse: collapse !important;
+  width: 100% !important;
+  table-layout: fixed !important;
+  max-width: 100% !important;
+}
+
+/* Column widths — applied via th since Gradio 5 may not render <col> elements */
+.gradio-container .brut-df th:nth-child(1),
+.gradio-container .gr-dataframe th:nth-child(1),
+.gradio-container .brut-df td:nth-child(1),
+.gradio-container .gr-dataframe td:nth-child(1) { width: 90px !important; min-width: 90px !important; max-width: 90px !important; }
+
+.gradio-container .brut-df th:nth-child(2),
+.gradio-container .gr-dataframe th:nth-child(2),
+.gradio-container .brut-df td:nth-child(2),
+.gradio-container .gr-dataframe td:nth-child(2) { width: 90px !important; min-width: 90px !important; max-width: 90px !important; }
+
+.gradio-container .brut-df th:nth-child(3),
+.gradio-container .gr-dataframe th:nth-child(3),
+.gradio-container .brut-df td:nth-child(3),
+.gradio-container .gr-dataframe td:nth-child(3) { width: 130px !important; min-width: 130px !important; max-width: 130px !important; }
+
+/* Text column flexes to fill remaining space */
+.gradio-container .brut-df th:nth-child(4),
+.gradio-container .gr-dataframe th:nth-child(4),
+.gradio-container .brut-df td:nth-child(4),
+.gradio-container .gr-dataframe td:nth-child(4) { width: auto !important; }
+
+/* Outer scroll container — keep within card, no horizontal overflow, remove inner vertical cap */
+.gradio-container .brut-df,
+.gradio-container .brut-df > div,
+.gradio-container .brut-df .table-wrap,
+.gradio-container .brut-df [class*="table-wrap"] {
+  max-width: 100% !important;
+  max-height: none !important;
+  overflow-x: hidden !important;
+  overflow-y: visible !important;
+  box-sizing: border-box !important;
+}
+
+/* Header row — yellow on black, compact so labels don't wrap */
+.gradio-container .brut-df th,
+.gradio-container .brut-df thead th,
+.gradio-container .brut-df [role="columnheader"],
+.gradio-container .gr-dataframe th,
+.gradio-container .gr-dataframe thead th {
+  background: var(--brut-fg) !important;
+  color: var(--brut-yellow) !important;
+  font-family: var(--brut-font-brand) !important;
+  font-size: 12px !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.04em !important;
+  padding: 10px 8px !important;
+  border: var(--brut-border-thin) !important;
+  border-bottom: var(--brut-border) !important;
+  text-align: left !important;
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  word-break: keep-all !important;
+}
+
+/* Force nowrap on inner spans/divs Gradio nests inside headers */
+.gradio-container .brut-df th *,
+.gradio-container .brut-df thead th *,
+.gradio-container .brut-df [role="columnheader"] *,
+.gradio-container .gr-dataframe th *,
+.gradio-container .gr-dataframe thead th * {
+  white-space: nowrap !important;
+  word-break: keep-all !important;
+  font-size: inherit !important;
+  font-family: inherit !important;
+  letter-spacing: inherit !important;
+}
+
+/* Body cells — white bg, black text, wraps inside fixed-width columns */
+.gradio-container .brut-df td,
+.gradio-container .brut-df tbody td,
+.gradio-container .brut-df [role="cell"],
+.gradio-container .brut-df [role="gridcell"],
+.gradio-container .gr-dataframe td,
+.gradio-container .gr-dataframe tbody td {
+  background: var(--brut-white) !important;
+  color: var(--brut-fg) !important;
+  font-family: var(--brut-font-heading) !important;
+  font-size: 14px !important;
+  line-height: 1.55 !important;
+  padding: 10px 14px !important;
+  border-top: var(--brut-border-thin) !important;
+  border-right: 2px solid #000 !important;
+  vertical-align: top !important;
+  white-space: normal !important;
+  word-break: break-word !important;
+  overflow-wrap: anywhere !important;
+}
+
+.gradio-container .brut-df td:last-child,
+.gradio-container .gr-dataframe td:last-child {
+  border-right: none !important;
+}
+
+/* Zebra striping for scan-ability */
+.gradio-container .brut-df tbody tr:nth-child(even) td,
+.gradio-container .gr-dataframe tbody tr:nth-child(even) td {
+  background: #FFFCF0 !important;
+}
+
+/* Hover affordance — selectable rows */
+.gradio-container .brut-df tbody tr:hover td,
+.gradio-container .gr-dataframe tbody tr:hover td {
+  background: var(--brut-yellow) !important;
+  cursor: pointer;
+}
+
+/* First column (Start time) — monospace + slight emphasis */
+.gradio-container .brut-df tbody td:first-child,
+.gradio-container .gr-dataframe tbody td:first-child {
+  font-family: var(--brut-font-mono) !important;
+  font-size: 12px !important;
+  white-space: nowrap !important;
+  font-weight: 700 !important;
+}
+
+.gradio-container .brut-df tbody td:nth-child(2),
+.gradio-container .gr-dataframe tbody td:nth-child(2) {
+  font-family: var(--brut-font-mono) !important;
+  font-size: 12px !important;
+  white-space: nowrap !important;
+}
+
+/* Speaker chip column — keep palette bg from styler but ensure readable text */
+.gradio-container .brut-df tbody td:nth-child(3),
+.gradio-container .gr-dataframe tbody td:nth-child(3) {
+  font-family: var(--brut-font-brand) !important;
+  font-size: 12px !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.04em !important;
+  white-space: nowrap !important;
+  text-align: center !important;
+}
+
+/* Editable mode — show input affordance */
+.gradio-container .brut-df td input,
+.gradio-container .gr-dataframe td input {
+  background: #FFFCF0 !important;
+  color: var(--brut-fg) !important;
+  border: 2px solid var(--brut-fg) !important;
+  font-family: var(--brut-font-heading) !important;
+}
+
+/* Scrollbar inside dataframe */
+.gradio-container .brut-df *::-webkit-scrollbar {
+  height: 12px;
+  width: 12px;
+}
+.gradio-container .brut-df *::-webkit-scrollbar-track {
+  background: var(--brut-bg);
+  border-top: var(--brut-border-thin);
+}
+.gradio-container .brut-df *::-webkit-scrollbar-thumb {
+  background: var(--brut-fg);
+  border: 2px solid var(--brut-bg);
+}
+
+/* Hide any leftover Gradio label that might still render inside the dataframe */
+.gradio-container .brut-df > label,
+.gradio-container .brut-df > .label-wrap,
+.gradio-container .brut-df > [data-testid="block-label"] {
+  display: none !important;
+}
+
+/* Manual "Transcript" badge — matches Video / Audio file block-label badge style */
+.brut-df-badge {
+  display: inline-flex !important;
+  align-items: center;
+  gap: 4px;
+  background: var(--brut-white) !important;
+  color: var(--brut-fg) !important;
+  border: 1px solid #000 !important;
+  box-shadow: 2px 2px 0 #000 !important;
+  padding: 3px 8px !important;
+  font-family: var(--brut-font-heading) !important;
+  font-weight: 700 !important;
+  font-size: 11px !important;
+  line-height: 1.3 !important;
+  margin: 0 0 6px 0 !important;
+  width: auto !important;
+  max-width: max-content !important;
+}
+
+.brut-df-badge svg {
+  flex-shrink: 0;
+}
+
+/* Container of the manual badge gr.HTML — strip wrapper bg/padding so only badge shows */
+.gradio-container .brut-tabs > .tabitem .html-container:has(> .brut-df-badge) {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+/* File outputs */
+.gradio-container .gr-file,
+.gradio-container [data-testid="file"] {
+  border: var(--brut-border) !important;
+  box-shadow: var(--brut-shadow);
+  background: var(--brut-white);
+}

core/styles/seek.js

@@ -0,0 +1,17 @@
+(function () {
+  function findAudio() {
+    var mount = document.getElementById('brut-audio-mount');
+    if (mount) {
+      var a = mount.querySelector('audio');
+      if (a) return a;
+    }
+    return document.querySelector('audio');
+  }
+  window.brutSeek = function (t) {
+    var a = findAudio();
+    if (!a) return;
+    a.currentTime = Number(t) || 0;
+    var p = a.play();
+    if (p && typeof p.catch === 'function') p.catch(function () {});
+  };
+})();

core/ui/__init__.py

@@ -0,0 +1,23 @@
+"""UI builders for Neobrutalism Gradio app."""
+
+from core.ui.layout import build_stepper, build_results_dock, LANGUAGES, EXAMPLE_URLS
+from core.ui.transcript_view import (
+    SPEAKER_PALETTE,
+    color_for_speaker,
+    style_transcript,
+    grouped_row_start_seconds,
+)
+from core.ui.error_card import render_error, empty_card
+
+__all__ = [
+    "build_stepper",
+    "build_results_dock",
+    "LANGUAGES",
+    "EXAMPLE_URLS",
+    "SPEAKER_PALETTE",
+    "color_for_speaker",
+    "style_transcript",
+    "grouped_row_start_seconds",
+    "render_error",
+    "empty_card",
+]

core/ui/error_card.py

@@ -0,0 +1,104 @@
+"""Map known exceptions to actionable remediation cards rendered as inline HTML."""
+
+import torch
+
+from core.youtube_loader import YouTubeAuthRequiredError
+
+
+REMEDIATION = [
+    (YouTubeAuthRequiredError, {
+        "title": "YOUTUBE AUTH REQUIRED",
+        "cause": "This video requires authenticated cookies for download.",
+        "steps": [
+            "Export YouTube cookies in Netscape format (cookies.txt)",
+            "Add as Space secret YTDLP_COOKIES_CONTENT or set YTDLP_COOKIES_FILE",
+            "Restart the Space and retry",
+        ],
+    }),
+    (torch.cuda.OutOfMemoryError, {
+        "title": "GPU OUT OF MEMORY",
+        "cause": "Pipeline exceeded available VRAM.",
+        "steps": [
+            "Try a shorter clip (< 30 min)",
+            "Set Number of speakers to a known value instead of 0",
+            "Restart the Space to clear GPU state",
+        ],
+    }),
+]
+
+
+SUBSTRING_REMEDIATION = [
+    ("HF_TOKEN", {
+        "title": "HUGGING FACE TOKEN MISSING / INVALID",
+        "cause": "pyannote diarization requires a valid HF_TOKEN with accepted user agreement.",
+        "steps": [
+            "Visit huggingface.co/pyannote/speaker-diarization-3.1 and accept the agreement",
+            "Also accept pyannote/segmentation-3.0",
+            "Create a token at huggingface.co/settings/tokens (read scope)",
+            "Add as Space secret HF_TOKEN and restart",
+        ],
+    }),
+    ("401", {
+        "title": "AUTHORIZATION DENIED (401)",
+        "cause": "Server rejected authentication credentials.",
+        "steps": [
+            "Verify HF_TOKEN is current and has read scope",
+            "Confirm pyannote model agreements are accepted",
+            "Restart the Space to pick up new secrets",
+        ],
+    }),
+    ("Unauthorized", {
+        "title": "UNAUTHORIZED",
+        "cause": "Authentication token rejected or missing.",
+        "steps": [
+            "Re-issue HF_TOKEN at huggingface.co/settings/tokens",
+            "Update Space secret and restart",
+        ],
+    }),
+    ("No speech detected", {
+        "title": "NO SPEECH DETECTED",
+        "cause": "Whisper found no speech in the input audio.",
+        "steps": [
+            "Confirm the file actually contains audible speech",
+            "Try setting language explicitly instead of auto-detect",
+            "Check the audio level — silence-only clips fail VAD",
+        ],
+    }),
+]
+
+
+def _render_html(title: str, cause: str, steps: list) -> str:
+    li = "".join(f"<li>{s}</li>" for s in steps)
+    return (
+        f'<div class="brut-error-card-content">'
+        f'<h4>{title}</h4>'
+        f'<p><strong>Cause:</strong> {cause}</p>'
+        f'<ol>{li}</ol>'
+        f'</div>'
+    )
+
+
+def render_error(exc: BaseException) -> str:
+    """Match exception → remediation; fall back to generic card with type name."""
+    for exc_type, payload in REMEDIATION:
+        if isinstance(exc, exc_type):
+            return _render_html(payload["title"], payload["cause"], payload["steps"])
+
+    msg = str(exc)
+    for marker, payload in SUBSTRING_REMEDIATION:
+        if marker.lower() in msg.lower():
+            return _render_html(payload["title"], payload["cause"], payload["steps"])
+
+    return _render_html(
+        title=f"PIPELINE ERROR — {type(exc).__name__}",
+        cause=msg or "Unhandled exception in pipeline.",
+        steps=[
+            "Check server logs for the full traceback",
+            "Verify input file is valid audio/video",
+            "Restart the Space if the error persists",
+        ],
+    )
+
+
+def empty_card() -> str:
+    return ""

core/ui/handlers.py

@@ -0,0 +1,129 @@
+"""Event handlers for the Neobrutalism Gradio app — keeps app.py thin."""
+
+import logging
+import os
+import traceback
+
+import gradio as gr
+import pandas as pd
+
+from core import cache_manager, formatters
+from core.pipeline_runner import OUTPUT_DIR, YOUTUBE_DIR, process_unified
+from core.ui.transcript_view import build_label_map, grouped_row_start_seconds
+from core.youtube_loader import YouTubeAuthRequiredError, download_video
+
+
+logger = logging.getLogger("whisper-diarization.handlers")
+
+
+_OUTPUT_KEYS = (
+    "df_out", "csv_out", "srt_out", "sysinfo",
+    "progress_log", "error_card",
+    "merged_state", "wav_state",
+    "audio_player", "seek_bus", "video_in",
+)
+
+
+def _empty_update_dict():
+    return {k: gr.update() for k in _OUTPUT_KEYS}
+
+
+def _to_tuple(d: dict) -> tuple:
+    return tuple(d[k] for k in _OUTPUT_KEYS)
+
+
+def run_unified(yt_url, video_in, language, num_speakers, progress=gr.Progress()):
+    """Drive PROCESS button: download (if needed) → stages → final result. Yields tuples in _OUTPUT_KEYS order."""
+    log_str = ""
+    error_html = ""
+
+    def emit(**overrides):
+        d = _empty_update_dict()
+        d["progress_log"] = log_str
+        d["error_card"] = error_html
+        d.update(overrides)
+        return _to_tuple(d)
+
+    try:
+        for kind, payload in process_unified(yt_url, video_in, language, num_speakers, progress):
+            if kind == "log":
+                log_str = payload
+                yield emit()
+            elif kind == "video":
+                yield emit(video_in=payload)
+            elif kind == "error":
+                error_html = payload
+                yield emit()
+            elif kind == "result":
+                df, csv, srt, sysinfo, merged, wav_path = payload
+                error_html = ""
+                yield emit(
+                    df_out=df, csv_out=csv, srt_out=srt, sysinfo=sysinfo,
+                    audio_player=str(wav_path), seek_bus="",
+                    merged_state=merged, wav_state=wav_path,
+                )
+    except gr.Error:
+        yield emit()
+        raise
+
+
+def download_youtube_for_ui(url):
+    if not url:
+        raise gr.Error("Please enter a YouTube URL first.")
+    yield gr.update(value=None, label="Downloading YouTube video..."), "Downloading YouTube video. This may take a few minutes."
+    try:
+        video_path = download_video(url, YOUTUBE_DIR)
+    except YouTubeAuthRequiredError as exc:
+        yield gr.update(value=None, label="Video / Audio file"), str(exc)
+        return
+    except Exception as exc:  # noqa: BLE001
+        logger.error("YouTube download failed: %s", traceback.format_exc())
+        yield gr.update(value=None, label="Video / Audio file"), f"Download failed: {type(exc).__name__}."
+        return
+    cache_manager.cleanup_old_videos()
+    yield gr.update(value=video_path, label="Video / Audio file"), f"Downloaded: `{video_path}`"
+
+
+def enter_edit_mode(_merged):
+    return (
+        gr.update(interactive=True),
+        gr.update(visible=False), gr.update(visible=True), gr.update(visible=True),
+        True,
+    )
+
+
+def cancel_edit(_merged):
+    return (
+        gr.update(interactive=False),
+        gr.update(visible=True), gr.update(visible=False), gr.update(visible=False),
+        False,
+    )
+
+
+def apply_renames(edited_df, merged):
+    if not merged:
+        return (
+            gr.update(interactive=False), gr.update(), gr.update(),
+            gr.update(visible=True), gr.update(visible=False), gr.update(visible=False),
+            False, merged,
+        )
+    label_map = build_label_map(edited_df, merged)
+    new_merged = formatters.rewrite_with_label_map(merged, label_map)
+    rows = formatters.build_grouped_rows(new_merged)
+    job = os.urandom(4).hex()
+    csv_path = formatters.write_csv(rows, OUTPUT_DIR / f"transcript_renamed_{job}.csv")
+    srt_path = formatters.write_srt(new_merged, OUTPUT_DIR / f"transcript_renamed_{job}.srt")
+    return (
+        gr.update(value=pd.DataFrame(rows), interactive=False),
+        csv_path, srt_path,
+        gr.update(visible=True), gr.update(visible=False), gr.update(visible=False),
+        False, new_merged,
+    )
+
+
+def on_row_select(merged, edit_mode, evt: gr.SelectData):
+    if not merged or edit_mode or evt is None or evt.index is None:
+        return ""
+    idx = evt.index[0] if isinstance(evt.index, (list, tuple)) else evt.index
+    start = grouped_row_start_seconds(merged, idx)
+    return f'<svg width="0" height="0" onload="window.brutSeek({start})"></svg>'

core/ui/layout.py

@@ -0,0 +1,123 @@
+"""Two-pane brutalist layout: 4-step stepper + tabbed results dock."""
+
+import pandas as pd
+import gradio as gr
+
+
+LANGUAGES = [
+    ("Auto-detect", None), ("English", "en"), ("Japanese", "ja"), ("Chinese", "zh"),
+    ("Spanish", "es"), ("French", "fr"), ("German", "de"), ("Korean", "ko"),
+    ("Portuguese", "pt"), ("Russian", "ru"), ("Italian", "it"), ("Vietnamese", "vi"),
+    ("Arabic", "ar"), ("Hindi", "hi"), ("Indonesian", "id"), ("Dutch", "nl"),
+    ("Polish", "pl"), ("Turkish", "tr"), ("Thai", "th"), ("Ukrainian", "uk"),
+]
+
+EXAMPLE_URLS = [
+    "https://www.youtube.com/watch?v=j7BfEzAFuYc&t=32s",
+    "https://www.youtube.com/watch?v=-UX0X45sYe4",
+    "https://www.youtube.com/watch?v=7minSgqi-Gw",
+]
+
+
+def _step_header(num: str, title: str) -> gr.HTML:
+    return gr.HTML(
+        f'<div class="brut-step-header">'
+        f'<span class="brut-step-num">{num}</span>'
+        f'<h3 class="brut-step-title">{title}</h3>'
+        f'</div>'
+    )
+
+
+def build_stepper(languages=LANGUAGES, example_urls=EXAMPLE_URLS) -> dict:
+    """4-card stepper: Source / Configure / Process / Review. Returns named handles."""
+    handles: dict = {}
+
+    # Step 1 — Source
+    with gr.Group(elem_classes=["brut-step-card", "step-1"]):
+        _step_header("01", "SOURCE")
+        handles["yt_url"] = gr.Textbox(label="YouTube URL", lines=1, placeholder="https://www.youtube.com/watch?v=...")
+        handles["video_in"] = gr.Video(label="Video / Audio file")
+        gr.Examples(examples=example_urls, inputs=[handles["yt_url"]], label="YouTube examples")
+        with gr.Accordion("Advanced YouTube download", open=False):
+            handles["yt_btn"] = gr.Button("Download YouTube video")
+            handles["yt_status"] = gr.Markdown()
+
+    # Step 2 — Configure
+    with gr.Group(elem_classes=["brut-step-card", "step-2"]):
+        _step_header("02", "CONFIGURE")
+        handles["language"] = gr.Dropdown(
+            choices=languages, value=None,
+            label="Spoken language (auto-detect if blank)",
+        )
+        handles["num_speakers"] = gr.Number(
+            value=0, precision=0,
+            label="Number of speakers (0 = auto-detect via pyannote)",
+        )
+
+    # Step 3 — Process
+    with gr.Group(elem_classes=["brut-step-card", "step-3"]):
+        _step_header("03", "PROCESS")
+        handles["run_btn"] = gr.Button("PROCESS", variant="primary", elem_classes="brut-primary")
+        gr.HTML('<small style="font-family: var(--brut-font-mono); font-size: 12px;">Downloads YouTube URL or processes uploaded file.</small>')
+
+    # Step 4 — Review
+    with gr.Group(elem_classes=["brut-step-card", "step-4"]):
+        _step_header("04", "REVIEW")
+        handles["progress_log"] = gr.Markdown(value="", elem_classes="brut-log")
+        handles["error_card"] = gr.Markdown(value="", elem_classes="brut-error-card")
+
+    return handles
+
+
+def build_results_dock() -> dict:
+    """Tabbed results dock: Transcript / Audio / Downloads / Diagnostics."""
+    handles: dict = {}
+
+    with gr.Tabs(elem_classes="brut-tabs"):
+        with gr.TabItem("Transcript"):
+            gr.HTML(
+                '<div class="brut-df-badge">'
+                '<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" '
+                'fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" '
+                'stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 '
+                '0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" y1="13" x2="15" '
+                'y2="13"/><line x1="9" y1="17" x2="15" y2="17"/></svg>'
+                '<span>Transcript</span>'
+                '</div>'
+            )
+            handles["df_out"] = gr.DataFrame(
+                value=pd.DataFrame(columns=["Start", "End", "Speaker", "Text"]),
+                show_label=False,
+                row_count=(0, "dynamic"),
+                wrap=True,
+                elem_classes="brut-df",
+                interactive=False,
+            )
+            with gr.Row():
+                handles["edit_btn"] = gr.Button("EDIT SPEAKERS")
+                handles["apply_btn"] = gr.Button("APPLY RENAMES", variant="primary", visible=False)
+                handles["cancel_btn"] = gr.Button("CANCEL", visible=False)
+
+        with gr.TabItem("Audio"):
+            handles["audio_player"] = gr.Audio(
+                label="Converted WAV (16kHz mono)",
+                interactive=False,
+                show_download_button=True,
+                elem_id="brut-audio-mount",
+                elem_classes="brut-audio-player",
+                value=None,
+            )
+            handles["seek_bus"] = gr.HTML(value="", elem_id="brut-seek-bus")
+
+        with gr.TabItem("Downloads"):
+            handles["csv_out"] = gr.File(label="Download CSV")
+            handles["srt_out"] = gr.File(label="Download SRT")
+
+        with gr.TabItem("Diagnostics"):
+            handles["sysinfo"] = gr.Markdown()
+
+    handles["merged_state"] = gr.State(value=None)
+    handles["edit_mode_state"] = gr.State(value=False)
+    handles["wav_state"] = gr.State(value=None)
+
+    return handles

core/ui/transcript_view.py

@@ -0,0 +1,106 @@
+"""Speaker chip palette, styler, and grouped-row time mapping for transcript DataFrame."""
+
+import re
+
+import pandas as pd
+
+
+SPEAKER_PALETTE = [
+    "#FFD23F",  # yellow
+    "#FF6B6B",  # coral
+    "#5CE1E6",  # cyan
+    "#A4F47A",  # lime
+    "#FF6FC0",  # magenta
+    "#FF9F1C",  # orange
+]
+
+
+def _extract_index(label: str) -> int:
+    """Pull a stable integer index out of a speaker label.
+
+    SPEAKER_00 → 0, SPK-1 → 1, "Alice" → hash-fallback so renames keep deterministic colors
+    only when caller passes original label; once renamed without a digit, fall back to hash.
+    """
+    if not label:
+        return 0
+    m = re.search(r"(\d+)", str(label))
+    if m:
+        return int(m.group(1))
+    return abs(hash(str(label))) % len(SPEAKER_PALETTE)
+
+
+def color_for_speaker(label: str) -> str:
+    return SPEAKER_PALETTE[_extract_index(label) % len(SPEAKER_PALETTE)]
+
+
+def render_chip(label: str) -> str:
+    color = color_for_speaker(label)
+    return f'<span class="brut-chip" style="background:{color}">▣ {label}</span>'
+
+
+def style_transcript(df: pd.DataFrame):
+    """Return a Styler that paints the Speaker column cell background per palette."""
+    if df is None or df.empty or "Speaker" not in df.columns:
+        return df
+
+    def _color(value):
+        c = color_for_speaker(value)
+        return f"background-color: {c}; font-family: 'Archivo Black', sans-serif;"
+
+    try:
+        return df.style.applymap(_color, subset=["Speaker"])
+    except AttributeError:
+        # pandas >= 2.1 deprecates applymap → use map
+        return df.style.map(_color, subset=["Speaker"])
+
+
+def grouped_row_start_seconds(merged: list, row_idx: int) -> float:
+    """Walk merged segments, group consecutive same-speaker turns, return start seconds of group at row_idx."""
+    if not merged or row_idx is None or row_idx < 0:
+        return 0.0
+
+    group_idx = -1
+    prev_speaker = None
+    for seg in merged:
+        spk = seg.get("speaker")
+        if spk != prev_speaker:
+            group_idx += 1
+            if group_idx == row_idx:
+                return float(seg.get("start", 0.0))
+            prev_speaker = spk
+    return 0.0
+
+
+def build_label_map(edited_df, merged: list) -> dict:
+    """From edited DataFrame Speaker column + original merged segments, build {orig_label → new_label}.
+
+    Walks grouped segments in order, mapping each group's original speaker label to the
+    corresponding row's edited Speaker value.
+    """
+    if edited_df is None or merged is None:
+        return {}
+
+    if hasattr(edited_df, "values"):
+        rows = edited_df.values.tolist() if isinstance(edited_df, pd.DataFrame) else edited_df
+        if isinstance(edited_df, pd.DataFrame) and "Speaker" in edited_df.columns:
+            new_labels = edited_df["Speaker"].tolist()
+        else:
+            new_labels = [r[2] for r in rows if len(r) > 2]
+    elif isinstance(edited_df, list):
+        new_labels = [r[2] for r in edited_df if len(r) > 2]
+    else:
+        return {}
+
+    label_map: dict = {}
+    group_idx = -1
+    prev_speaker = None
+    for seg in merged:
+        spk = seg.get("speaker")
+        if spk != prev_speaker:
+            group_idx += 1
+            if group_idx < len(new_labels):
+                new_label = str(new_labels[group_idx]).strip()
+                if new_label and new_label != spk:
+                    label_map[spk] = new_label
+            prev_speaker = spk
+    return label_map