Deploy deathmatch from d218214

.gitattributes

@@ -0,0 +1,4 @@
+examples/britney.jpg filter=lfs diff=lfs merge=lfs -text
+examples/musk.jpg filter=lfs diff=lfs merge=lfs -text
+examples/scarlett.jpg filter=lfs diff=lfs merge=lfs -text
+examples/zuckerberg.jpg filter=lfs diff=lfs merge=lfs -text

README.md

@@ -6,35 +6,102 @@ colorTo: yellow
 sdk: gradio
 sdk_version: "6.0.0"
 app_file: app.py
-pinned: false
+pinned: true
+short_description: Two photos in, a claymation celebrity death match out
+tags:
+  - thousand-token-wood
+  - off-brand
+  - best-demo
+  - text-to-video
+  - image-generation
+  - text-to-speech
+  - gradio
+  - modal
+models:
+  - openbmb/MiniCPM-V-2_6
+  - black-forest-labs/FLUX.1-schnell
+  - Lightricks/LTX-Video
+  - Qwen/Qwen3-TTS-12Hz-1.7B-VoiceDesign
 ---
 
-# Celebrity Deathmatch
+![Track: Thousand Token Wood](https://img.shields.io/badge/track-Thousand%20Token%20Wood-7c3aed)
+![Badge: Off Brand](https://img.shields.io/badge/badge-Off%20Brand-e0303c)
+![Badge: Best Demo](https://img.shields.io/badge/badge-Best%20Demo-f2b030)
+![Models < 32B](https://img.shields.io/badge/all%20models-%3C32B-2ea44f)
+![Gradio 6](https://img.shields.io/badge/Gradio-6.x-orange)
+![Backend: Modal](https://img.shields.io/badge/backend-Modal%20GPU-0b6bcb)
 
-Upload two photos, and an AI ring director books an MTV-style claymation brawl:
-a fight script with round-by-round announcer commentary, a rendered keyframe
-reel, a declared winner — and an optional **Animate** button that chains it into
-one continuous fight video with the commentary burned in as captions.
+# 🥊 Celebrity Deathmatch
 
-> ⚠ **Parody.** All visuals are AI-generated claymation caricatures of public
-> figures, for comedic effect. Not real.
+**Upload two photos. Our AI ring director books the brawl** — a claymation fight
+script, a rendered keyframe reel, a declared winner — then turns it into one
+continuous fight video with **two ring announcers screaming over the action** and
+the crowd going wild.
 
-## Models
+It's MTV's *Celebrity Deathmatch* as an AI-native toy: pure spectacle, zero
+practical value, maximum fun. (That's the [Thousand Token Wood](#) track in one
+sentence.)
 
-| Stage | Role | Model | GPU |
-|------|------|-------|-----|
-| 1 | Fight director (reads both photos) | MiniCPM-V-2_6 (OpenBMB) | A10G |
-| 2 | Claymation keyframes | FLUX.1-schnell (BFL) | L40S |
-| 3 | Image→video fight clip (opt-in) | LTX-Video (Lightricks) | H100 |
+> ⚠️ **Parody.** Every visual is an AI-generated claymation **caricature** of a
+> public figure, for comedic effect. Not real. No real people were harmed.
 
-## Architecture
+## ▶️ See it in action
 
-- **Frontend:** this Gradio Space.
-- **Backend:** Modal GPU app `deathmatch` — set `DEATHMATCH_API_URL` (the deploy
-  pipeline does this automatically).
-- **Mock mode:** run locally with `DEATHMATCH_MOCK=1` to exercise the full UX on
-  CPU (canned fight, placeholder frames, GIF stand-in for the video).
+- **Demo video:** _TODO — paste your YouTube / uploaded video link here_
+- **Social post:** _TODO — paste your launch post link here_
+
+## Why it's worth a look
+
+- **🎙️ Two-announcer voiceover, not a silent clip.** Every beat is called by
+  **Nick** (dry, sarcastic) and **Johnny** (loud, over-excited) — two *designed*
+  voices from Qwen3-TTS VoiceDesign — mixed over a bell, a crowd murmur bed, and a
+  winner roar. The fight has a soundtrack, like the real show.
+- **🎨 Off-brand UI.** No default Gradio look: a custom claymation-fight art
+  direction — Anton display type, fire-and-clay palette, tale-of-the-tape stat
+  bars, animated winner banner.
+- **🧱 Real caricatures, real stakes.** MiniCPM *reads both photos*, invents a
+  fighting persona, signature move, and stat line for each, then choreographs a
+  5-beat arc and picks a winner.
+
+## How it works
+
+A four-model pipeline — **every model under the hackathon's 32B cap**:
+
+| Stage | Role | Model | Params |
+|------|------|-------|--------|
+| 1 | Fight director — reads **both** photos → fight card JSON | **MiniCPM-V-2_6** (OpenBMB) | 8B |
+| 2 | Claymation keyframe reel | **FLUX.1-schnell** (BFL) | 12B |
+| 3 | Keyframes → continuous fight video (opt-in) | **LTX-Video** (Lightricks) | 2B |
+| 3 | Two-announcer voiceover | **Qwen3-TTS VoiceDesign** (Qwen) | 2B |
+
+```
+photo A + photo B
+   └─▶ Stage 1  MiniCPM-V-2_6 → fight card (fighters, 5 beats, 2-announcer commentary, winner)
+        └─▶ Stage 2  FLUX.1-schnell → 5 claymation keyframes
+             └─▶ Stage 3 (Animate)  LTX-Video → chained clips
+                  + Qwen3-TTS → Nick/Johnny voiceover  + crowd SFX  + burned-in captions
+                  → one MP4
+```
+
+The reel (Stages 1–2) is the fast default; **Animate** (Stage 3) is opt-in
+because it's the GPU-heavy step.
+
+## Tech
+
+- **Frontend:** this Gradio 6 Space (custom CSS, no template look).
+- **Backend:** two Modal GPU apps — `deathmatch` (MiniCPM A10G + FLUX L40S +
+  ASGI gateway) and `deathmatch-video` (ComfyUI + LTX on H100, Qwen3-TTS on A10G).
+- **Audio/video post:** pure `ffmpeg` — xfade stitch, fit-to-beat TTS mixing,
+  synthesized crowd SFX, burned-in captions.
+- Wired to the backend via `DEATHMATCH_API_URL` (set automatically on deploy).
+
+## Run it locally (no GPU)
 
 ```sh
 DEATHMATCH_MOCK=1 python app.py
 ```
+
+Mock mode exercises the **entire UX** on CPU — canned fight card, placeholder
+keyframe reel, and a stand-in fight video — so you can see the whole flow without
+burning a single GPU minute.
+</content>

app.py

@@ -111,6 +111,51 @@ button.primary, .dm-primary button {
 }
 label, .block label { color: var(--dm-muted) !important; font-family:'JetBrains Mono',monospace !important;
     font-size: 11px !important; letter-spacing: 0.07em !important; text-transform: uppercase !important; }
+
+/* ───────── de-Gradio: hide framework chrome, theme the native controls so the
+   Space stops looking like a Gradio template (Off-Brand) ───────── */
+footer, .gradio-container footer { display: none !important; }
+.gradio-container { border: none !important; box-shadow: none !important; }
+/* Let the page background show through default component panels */
+.block, .form, .gr-group, .gr-box { background: transparent !important; border: none !important; box-shadow: none !important; }
+
+/* Tabs → claymation chips, not default Gradio tabs */
+.tab-nav, .tabs > .tab-nav { border-bottom: none !important; gap: 8px !important; margin-bottom: 14px !important; }
+.tab-nav button {
+    background: rgba(10,6,8,0.6) !important; color: var(--dm-muted) !important;
+    border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 12px !important;
+    font-family: 'Anton', sans-serif !important; letter-spacing: 0.05em !important;
+    text-transform: uppercase !important; padding: 8px 16px !important;
+}
+.tab-nav button.selected {
+    color: #1a0608 !important; border-color: transparent !important;
+    background: linear-gradient(135deg, var(--dm-gold), var(--dm-red)) !important;
+}
+
+/* Native inputs → dark and on-theme */
+input[type=text], textarea, select, .gr-input, .wrap input, .multiselect input {
+    background: rgba(10,6,8,0.66) !important; color: var(--dm-text) !important;
+    border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 12px !important;
+}
+input::placeholder, textarea::placeholder { color: rgba(176,144,136,0.6) !important; }
+
+/* Upload dropzones → dashed gold, matching the disclaimer band */
+.image-container, [data-testid="image"], .gr-image, .upload-container {
+    border: 1px dashed rgba(242,176,48,0.4) !important; border-radius: 16px !important;
+    background: rgba(10,6,8,0.4) !important;
+}
+
+/* Secondary / download buttons → de-orange */
+button.secondary, .secondary > button {
+    background: rgba(255,255,255,0.06) !important; color: var(--dm-text) !important;
+    border: 1px solid rgba(255,255,255,0.14) !important; border-radius: 999px !important;
+    font-family: 'JetBrains Mono', monospace !important; text-transform: uppercase !important;
+    letter-spacing: 0.06em !important; font-size: 12px !important;
+}
+
+/* Kill the orange Gradio accent + focus ring */
+.gradio-container { --color-accent: var(--dm-gold) !important; --color-accent-soft: rgba(242,176,48,0.2) !important; }
+:focus-visible { outline: 1px solid var(--dm-gold) !important; box-shadow: none !important; }
 """
 
 
@@ -311,12 +356,39 @@ with gr.Blocks(title="Celebrity Deathmatch") as demo:
     )
     export_btn.click(export_card, [card_state], [export_file])
 
-    demo_a = os.path.join(os.path.dirname(__file__), "examples", "fighter_a.png")
-    demo_b = os.path.join(os.path.dirname(__file__), "examples", "fighter_b.png")
-    if os.path.exists(demo_a) and os.path.exists(demo_b):
-        gr.Examples(examples=[[demo_a, demo_b, "", ARENAS[0], STYLES[0]]],
-                    inputs=[img_a, img_b, storyline, arena, style],
-                    label="Try a demo matchup")
+    # Pre-loaded celebrity matchups (parody). Each entry pre-fills both photos +
+    # names + arena. A matchup only appears once BOTH of its photos are present in
+    # ui/examples/ (drop in legally-licensed images — see examples/README.md), so
+    # this is safe to ship even before the photos are added.
+    _EX_DIR = os.path.join(os.path.dirname(__file__), "examples")
+
+    def _ex_photo(slug):
+        for ext in (".jpg", ".jpeg", ".png", ".webp"):
+            p = os.path.join(_EX_DIR, slug + ext)
+            if os.path.exists(p):
+                return p
+        return None
+
+    # (slug_a, name_a, slug_b, name_b, arena)
+    EXAMPLE_MATCHUPS = [
+        ("britney", "Britney Spears", "eminem", "Eminem", "Classic Deathmatch ring"),
+        ("musk", "Elon Musk", "zuckerberg", "Mark Zuckerberg", "Neon Tokyo street"),
+        ("keanu", "Keanu Reeves", "scarlett", "Scarlett Johansson", "Rooftop at night"),
+    ]
+    _examples = []
+    for a_slug, a_name, b_slug, b_name, ex_arena in EXAMPLE_MATCHUPS:
+        pa, pb = _ex_photo(a_slug), _ex_photo(b_slug)
+        if pa and pb:
+            arena_val = ex_arena if ex_arena in ARENAS else ARENAS[0]
+            _examples.append([pa, pb, "", arena_val, STYLES[0], a_name, b_name])
+
+    if _examples:
+        gr.Examples(
+            examples=_examples,
+            inputs=[img_a, img_b, storyline, arena, style, name_a, name_b],
+            label="⚡ Try a celebrity matchup (parody)",
+            examples_per_page=3,
+        )
 
 
 if __name__ == "__main__":

examples/README.md

@@ -0,0 +1,38 @@
+# Example matchup photos
+
+Drop fighter photos here and they appear automatically as one-click **"Try a
+celebrity matchup"** examples on the Tale of the Tape tab. A matchup only shows
+up once **both** of its photos exist, so missing files are simply skipped.
+
+## Filenames the app looks for
+
+Any of `.jpg` / `.jpeg` / `.png` / `.webp`:
+
+| Matchup | Fighter A file | Fighter B file |
+|---|---|---|
+| Britney vs. Eminem | `britney.jpg` | `eminem.jpg` |
+| Elon Musk vs. Mark Zuckerberg | `musk.jpg` | `zuckerberg.jpg` |
+| Keanu Reeves vs. Scarlett Johansson | `keanu.jpg` | `scarlett.jpg` |
+
+(The display names + arena are pre-filled by the app — see `EXAMPLE_MATCHUPS`
+in `ui/app.py`. To add a new matchup, add a row there and drop in two photos.)
+
+## Photo tips
+
+- Roughly **square**, **face/head-and-shoulders**, front-facing, ~512px+.
+- A clear, well-lit single face gives the best clay caricature.
+
+## ⚠️ Licensing — please read
+
+These photos get **committed to a public Hugging Face Space**, so use images you
+have the right to redistribute:
+
+- **Wikimedia Commons** is the easiest source — most of these public figures have
+  **CC BY / CC BY-SA** or public-domain portraits. Download from there and keep
+  the attribution.
+- Avoid press/agency/paparazzi shots (Getty, etc.) — those are copyrighted and
+  not yours to redistribute.
+- The app's on-screen "parody / AI caricature" disclaimer covers the *generated*
+  output, **not** redistribution of a copyrighted source photo. Source matters.
+
+If in doubt, use a CC-licensed Wikimedia Commons portrait (and note the credit).