Add Karate Wiener title intro overlay

.gitattributes

@@ -206,3 +206,4 @@ pose_vocab_sheet.png filter=lfs diff=lfs merge=lfs -text
 wiener_proto_card.png filter=lfs diff=lfs merge=lfs -text
 wiener_session_crab.png filter=lfs diff=lfs merge=lfs -text
 wiener_session_scorpion.png filter=lfs diff=lfs merge=lfs -text
+assets/karate_wiener_title_overlay.wav filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,49 +1,47 @@
----
-title: Karate Wiener
-emoji: 🥋
-colorFrom: green
-colorTo: gray
-sdk: gradio
-sdk_version: 6.9.0
-app_file: app.py
-python_version: "3.10"
-suggested_hardware: zero-a10g
-pinned: true
-license: apache-2.0
-hf_oauth: true
-short_description: Create your own karate moves with a sausage man
-models:
-  - nvidia/Kimodo-SMPLX-RP-v1
-  - McGill-NLP/LLM2Vec-Meta-Llama-3-8B-Instruct-mntp
-  - McGill-NLP/LLM2Vec-Meta-Llama-3-8B-Instruct-mntp-supervised
----
-
-
-# Kimodo ZeroGPU
-
-Viewer-first ZeroGPU Space for Kimodo text-to-motion generation.
-
-Generated animations are saved into the configured Hugging Face Dataset store so
-they survive Space rebuilds and can be reused by the kata maker. Animation IDs
-are deterministic from the normalized prompt, model, seconds, denoising steps,
-seed, and generation schema; regenerating with the same settings returns the
-cached animation instead of spending GPU time again.
-
-## Generation model
-
-The Space generates on the **SMPL-X 22-joint** skeleton via `kimodo-smplx-rp`
-(set `KIMODO_MODEL` to override). This matches the skeleton used by the kimodo
-web/kata viewers, so generated clips can be retargeted directly onto skinned
-display characters with no joint remapping.
-
-> Note: `nvidia/Kimodo-SMPLX-RP-v1` is distributed under NVIDIA's research/R&D
-> model license, which is more restrictive than the NVIDIA Open Model license
-> used by the SOMA models. Review it before public/commercial use.
-
-## Display characters
-
-The 3D viewer can play a clip as the procedural skeleton or retarget it onto a
-skinned rig (an s&box Citizen ships in `assets/`). The picker in the viewer HUD
-switches between them; retargeting is rest-pose alignment driven by each clip's
-`global_quats_xyzw`. Additional rigs can be added to `_CHARACTER_CATALOG` in
-`app.py` as `{ id, label, mapping, glb_b64 }`.
+---
+title: Kimodo ZeroGPU
+emoji: 🥋
+colorFrom: green
+colorTo: gray
+sdk: gradio
+sdk_version: 6.9.0
+app_file: app.py
+python_version: "3.10"
+suggested_hardware: zero-a10g
+pinned: false
+license: apache-2.0
+hf_oauth: true
+models:
+  - nvidia/Kimodo-SMPLX-RP-v1
+  - McGill-NLP/LLM2Vec-Meta-Llama-3-8B-Instruct-mntp
+  - McGill-NLP/LLM2Vec-Meta-Llama-3-8B-Instruct-mntp-supervised
+---
+
+# Kimodo ZeroGPU
+
+Viewer-first ZeroGPU Space for Kimodo text-to-motion generation.
+
+Generated animations are saved into the configured Hugging Face Dataset store so
+they survive Space rebuilds and can be reused by the kata maker. Animation IDs
+are deterministic from the normalized prompt, model, seconds, denoising steps,
+seed, and generation schema; regenerating with the same settings returns the
+cached animation instead of spending GPU time again.
+
+## Generation model
+
+The Space generates on the **SMPL-X 22-joint** skeleton via `kimodo-smplx-rp`
+(set `KIMODO_MODEL` to override). This matches the skeleton used by the kimodo
+web/kata viewers, so generated clips can be retargeted directly onto skinned
+display characters with no joint remapping.
+
+> Note: `nvidia/Kimodo-SMPLX-RP-v1` is distributed under NVIDIA's research/R&D
+> model license, which is more restrictive than the NVIDIA Open Model license
+> used by the SOMA models. Review it before public/commercial use.
+
+## Display characters
+
+The 3D viewer can play a clip as the procedural skeleton or retarget it onto a
+skinned rig (an s&box Citizen ships in `assets/`). The picker in the viewer HUD
+switches between them; retargeting is rest-pose alignment driven by each clip's
+`global_quats_xyzw`. Additional rigs can be added to `_CHARACTER_CATALOG` in
+`app.py` as `{ id, label, mapping, glb_b64 }`.

app.py

@@ -129,8 +129,9 @@ CLOTHING_CATALOG = [
 # it's still in the catalog so it can be added from the wardrobe.)
 DEFAULT_CLOTHING = {"face": "nerdy_glasses",
                     "torso_over": "kimono", "legs": "kimono_trousers"}
-_DEFAULT_SCENE_PATH = Path(__file__).parent / "assets" / "default_scene.webp"
-DIT360_SPACE = os.environ.get("KIMODO_DIT360_SPACE", "Insta360-Research/DiT360").strip()
+_DEFAULT_SCENE_PATH = Path(__file__).parent / "assets" / "default_scene.webp"
+_TITLE_OVERLAY_AUDIO_PATH = Path(__file__).parent / "assets" / "karate_wiener_title_overlay.wav"
+DIT360_SPACE = os.environ.get("KIMODO_DIT360_SPACE", "Insta360-Research/DiT360").strip()
 KLEIN_SPACE = os.environ.get("KIMODO_KLEIN_SPACE", "polats/tiny-army-klein-zerogpu").strip()
 TRIPOSPLAT_SPACE = os.environ.get("KIMODO_TRIPOSPLAT_SPACE", "polats/kimodo-triposplat-zerogpu").strip()
 # tiny-aya (Cohere Tiny Aya) text model — used to suggest/improve dojo scene prompts.
@@ -155,10 +156,18 @@ TINY_AYA_SPACE = os.environ.get("KIMODO_TINY_AYA_SPACE", "polats/tiny-army-tiny-
 # the "NEW-TAB BACKEND EXTENSION POINT" marker near the compose wiring.
 # See tabs/README.md + tabs/templates/ for a complete copy-paste example.
 _TABS_DIR = Path(__file__).parent / "tabs"
-def _read_tabs(pattern: str) -> str:
-    if not _TABS_DIR.is_dir():
-        return ""
-    return "".join(p.read_text(encoding="utf-8") for p in sorted(_TABS_DIR.glob(pattern)))
+def _read_tabs(pattern: str) -> str:
+    if not _TABS_DIR.is_dir():
+        return ""
+    return "".join(p.read_text(encoding="utf-8") for p in sorted(_TABS_DIR.glob(pattern)))
+
+
+def _load_b64(path: Path) -> str:
+    try:
+        return base64.b64encode(path.read_bytes()).decode("ascii")
+    except Exception as exc:  # pragma: no cover - optional startup flourish
+        print(f"Could not load {path}: {exc}")
+        return ""
 
 APP_CSS = """
 #main-preview {
@@ -1792,7 +1801,7 @@ def _render_preview_html(
     fill.position.set(-2, 3, 5);
     scene.add(fill);
 
-    const floor = new THREE.GridHelper(1, 20, 0x4c5663, 0x2b3138);
+    const floor = new THREE.GridHelper(1, 20, 0x42f6ff, 0x1aa6b8);
     floor.position.y = dojoFloorSurfaceY;
     floor.scale.set(dojoRoomSize, 1, dojoRoomSize);
     scene.add(floor);
@@ -5963,8 +5972,8 @@ _ACCT_JS = r"""
 # Pluggable side-tab behavior, concatenated into the drawer-JS scope (see _read_tabs).
 _EXTRA_TABS_JS = _read_tabs("*.tab.js")
 
-DRAWER_JS = f"""
-(() => {{
+DRAWER_JS = f"""
+(() => {{
   // Lift the SSR boot splash (the body::before/::after overlay in _BLOCKS_CSS) by
   // tagging <body>. Called on the viewer's first preview-ready / viewer-error, plus a
   // safety timeout so a slow/blocked CDN never traps the user behind the spinner.
@@ -6254,9 +6263,335 @@ DRAWER_JS = f"""
   }}
   if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot);
   else boot();
-}})();
-"""
-APP_HEAD = (
+}})();
+"""
+
+TITLE_OVERLAY_CSS = """
+#kw-title-overlay {
+  position: fixed; inset: 0; z-index: 100020; overflow: hidden;
+  display: grid; place-items: center; background: transparent;
+  font-family: Impact, Haettenschweiler, "Arial Black", system-ui, sans-serif;
+  pointer-events: none;
+}
+#kw-title-overlay.kw-ready { pointer-events: auto; }
+#kw-title-overlay.kw-done { pointer-events: none; }
+#kw-title-overlay::before {
+  content: ""; position: absolute; inset: 0; pointer-events: none;
+  background:
+    radial-gradient(circle at 50% 50%, transparent 0 24%, rgba(0,0,0,.08) 62%, rgba(0,0,0,.22) 100%),
+    linear-gradient(90deg, rgba(255,42,163,.08), transparent 25% 75%, rgba(66,246,255,.08));
+}
+.kw-sun {
+  position: absolute; z-index: 3; left: 50%; top: 45%; width: min(42vw, 460px);
+  aspect-ratio: 1; border-radius: 50%; opacity: 0; pointer-events: none;
+  transform: translate(-50%, -58%) scale(.72);
+  background:
+    repeating-linear-gradient(0deg, transparent 0 18px, rgba(7,2,15,.78) 19px 26px),
+    linear-gradient(180deg, #ffe96c, #ff8a26 46%, #ef2a7a 100%);
+}
+#kw-title-overlay.kw-exploded .kw-sun { animation: kwSunReveal .55s ease-out forwards; }
+#kw-title-overlay.kw-vanish .kw-sun { animation: kwSunVanish .48s ease-in forwards; }
+.kw-card {
+  position: relative; z-index: 6; width: min(94vw, 1080px); text-align: center;
+  transform: translateY(-1vh); overflow: visible;
+}
+.kw-logo {
+  position: relative; transform: translateX(-145vw) rotate(-1080deg) scale(.18);
+  opacity: 0; transform-origin: 50% 52%; overflow: visible;
+}
+#kw-title-overlay.kw-running .kw-logo { animation: kwLogoSpinIn .95s linear forwards; }
+#kw-title-overlay.kw-vanish .kw-logo { animation: kwLogoVanish .48s cubic-bezier(.62,0,.9,.42) forwards; }
+.kw-title {
+  margin: 0; display: flex; flex-direction: column; align-items: center;
+  text-transform: uppercase; line-height: .78; letter-spacing: 0;
+  font-size: clamp(72px, 15vw, 184px); color: #ffd84a;
+  -webkit-text-stroke: clamp(2px, .45vw, 6px) #2a032a;
+  text-shadow:
+    5px 5px 0 #8f143f,
+    10px 10px 0 #2a032a,
+    0 0 18px rgba(255,216,74,.65),
+    0 0 44px rgba(255,42,163,.85);
+  transform: rotate(-7deg) scale(1);
+}
+.kw-title span:last-child {
+  color: #ff5d2c;
+  text-shadow:
+    5px 5px 0 #7021a8,
+    10px 10px 0 #22022d,
+    0 0 18px rgba(255,107,25,.75),
+    0 0 46px rgba(66,246,255,.46);
+}
+#kw-title-overlay.kw-exploded .kw-title { animation: kwTitleImpact .82s ease-out forwards; }
+.kw-blast { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }
+.kw-grain, .kw-scanlines { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
+.kw-play {
+  position: absolute; z-index: 6; left: 50%; top: 50%;
+  transform: translate(-50%, -50%); display: none; align-items: center; justify-content: center;
+  width: clamp(78px, 19vw, 110px); aspect-ratio: 1; padding: 0; border: 0;
+  border-radius: 999px;
+  background:
+    linear-gradient(rgba(7,2,15,.14), rgba(7,2,15,.14)) padding-box,
+    linear-gradient(180deg, rgba(255,233,108,.58) 0%, rgba(255,155,47,.52) 43%, rgba(239,42,122,.5) 100%) border-box;
+  border: 4px solid transparent; backdrop-filter: blur(1px);
+  box-shadow: 0 0 0 1px rgba(42,3,42,.38), 0 0 18px rgba(239,42,122,.18), inset 0 0 20px rgba(255,155,47,.06);
+  cursor: pointer;
+}
+.kw-play::before {
+  content: ""; width: 0; height: 0; margin-left: 7%;
+  border-top: clamp(13px, 3.2vw, 18px) solid transparent;
+  border-bottom: clamp(13px, 3.2vw, 18px) solid transparent;
+  border-left: clamp(20px, 5vw, 29px) solid rgba(255,138,38,.58);
+  filter: drop-shadow(0 0 6px rgba(255,138,38,.22)) drop-shadow(0 0 12px rgba(239,42,122,.16));
+}
+.kw-play:active { transform: translate(-50%, -50%) scale(.94); filter: brightness(1.18); }
+#kw-title-overlay.kw-ready .kw-play { display: inline-flex; animation: kwPlayIdle 1.45s ease-in-out infinite; }
+#kw-title-overlay.kw-pressed .kw-play { display: inline-flex; animation: kwPlayPressed .22s ease-in forwards; }
+#kw-title-overlay.kw-running .kw-play,
+#kw-title-overlay.kw-vanish .kw-play,
+#kw-title-overlay.kw-done .kw-play { display: none; }
+.kw-grain {
+  opacity: .12;
+  background-image:
+    radial-gradient(circle at 15% 35%, #fff 0 1px, transparent 1px),
+    radial-gradient(circle at 68% 22%, #fff 0 1px, transparent 1px),
+    radial-gradient(circle at 45% 71%, #fff 0 1px, transparent 1px);
+  background-size: 37px 31px, 53px 47px, 71px 61px;
+  animation: kwGrain .3s steps(2,end) infinite;
+}
+.kw-scanlines { background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px); mix-blend-mode: screen; }
+#kw-title-overlay.kw-filters-out .kw-grain,
+#kw-title-overlay.kw-filters-out .kw-scanlines { opacity: 0; transition: opacity 1.8s ease; }
+#kw-title-overlay.kw-flash { animation: kwScreenFlash .82s ease-out; }
+@keyframes kwLogoSpinIn {
+  0% { opacity: 0; transform: translateX(-145vw) rotate(-1260deg) scale(.16); }
+  66% { opacity: 1; transform: translateX(-26vw) rotate(-520deg) scale(.82); }
+  91% { opacity: 1; transform: translateX(0) rotate(-94deg) scale(1.18); }
+  97% { opacity: 1; transform: translateX(0) rotate(-24deg) scale(1.24); }
+  100% { opacity: 1; transform: translateX(0) rotate(0deg) scale(1.18); }
+}
+@keyframes kwLogoVanish {
+  0% { opacity: 1; transform: translateX(0) rotate(0deg) scale(1.18); filter: brightness(1.15); }
+  100% { opacity: 0; transform: translateX(0) rotate(0deg) scale(.03); filter: brightness(2.4) blur(8px); }
+}
+@keyframes kwSunReveal {
+  0% { opacity: 0; transform: translate(-50%, -58%) scale(.72); }
+  22% { opacity: .95; transform: translate(-50%, -58%) scale(1.08); }
+  100% { opacity: .88; transform: translate(-50%, -58%) scale(1); }
+}
+@keyframes kwSunVanish {
+  from { opacity: .88; transform: translate(-50%, -58%) scale(1); }
+  to { opacity: 0; transform: translate(-50%, -58%) scale(.25); }
+}
+@keyframes kwTitleImpact {
+  0% { transform: rotate(-7deg) scale(1); filter: brightness(1) saturate(1.4); }
+  18% { transform: rotate(-4deg) scale(1.1); filter: brightness(3.2) saturate(2.2); }
+  34% { transform: rotate(-10deg) scale(1.03); filter: brightness(1.55) saturate(1.7); }
+  100% { transform: rotate(-7deg) scale(1); filter: brightness(1.16) saturate(1.48); }
+}
+@keyframes kwScreenFlash {
+  0% { box-shadow: inset 0 0 0 100vmax rgba(255,247,196,.82); }
+  18% { box-shadow: inset 0 0 0 100vmax rgba(255,88,24,.42); }
+  100% { box-shadow: inset 0 0 0 100vmax rgba(255,88,24,0); }
+}
+@keyframes kwPlayIdle {
+  0%, 100% { opacity: .54; transform: translate(-50%, -50%) scale(1); filter: saturate(1.02) brightness(.96); }
+  50% { opacity: .7; transform: translate(-50%, -50%) scale(1.06); filter: saturate(1.12) brightness(1.06); }
+}
+@keyframes kwPlayPressed {
+  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
+  42% { opacity: .96; transform: translate(-50%, -50%) scale(1.18); filter: brightness(1.45); }
+  100% { opacity: 0; transform: translate(-50%, -50%) scale(.08); filter: brightness(2) blur(3px); }
+}
+@keyframes kwGrain { from { transform: translate(0,0); } to { transform: translate(-18px,11px); } }
+@media (max-width: 620px) {
+  .kw-title { font-size: clamp(58px, 21vw, 112px); }
+  .kw-sun { width: 76vw; }
+}
+"""
+
+_TITLE_OVERLAY_AUDIO_B64 = _load_b64(_TITLE_OVERLAY_AUDIO_PATH)
+_TITLE_OVERLAY_AUDIO_DATA = (
+    "data:audio/wav;base64," + _TITLE_OVERLAY_AUDIO_B64
+    if _TITLE_OVERLAY_AUDIO_B64 else ""
+)
+
+TITLE_OVERLAY_JS = f"""
+(() => {{
+  const AUDIO_SRC = {json.dumps(_TITLE_OVERLAY_AUDIO_DATA)};
+  if (!AUDIO_SRC || window.__kwTitleOverlayInstalled) return;
+  window.__kwTitleOverlayInstalled = true;
+
+  function install() {{
+    if (document.getElementById('kw-title-overlay')) return;
+    const root = document.createElement('div');
+    root.id = 'kw-title-overlay';
+    root.innerHTML = `
+      <canvas class="kw-blast" aria-hidden="true"></canvas>
+      <div class="kw-sun" aria-hidden="true"></div>
+      <section class="kw-card" aria-label="Karate Wiener title card">
+        <div class="kw-logo">
+          <h1 class="kw-title"><span>Karate</span><span>Wiener</span></h1>
+        </div>
+      </section>
+      <button class="kw-play" type="button" aria-label="Start Karate Wiener intro"></button>
+      <div class="kw-grain" aria-hidden="true"></div>
+      <div class="kw-scanlines" aria-hidden="true"></div>
+      <audio class="kw-audio" preload="auto"></audio>
+    `;
+    document.body.appendChild(root);
+
+    const audio = root.querySelector('.kw-audio');
+    const canvas = root.querySelector('.kw-blast');
+    const ctx = canvas.getContext('2d');
+    const mobile = window.matchMedia('(max-width: 700px), (pointer: coarse)').matches;
+    let particles = [];
+    let sparks = [];
+    let raf = 0;
+    let active = false;
+    let starting = false;
+    audio.src = AUDIO_SRC;
+
+    function resize() {{
+      const dpr = Math.min(mobile ? 1.35 : 2, window.devicePixelRatio || 1);
+      canvas.width = Math.floor(window.innerWidth * dpr);
+      canvas.height = Math.floor(window.innerHeight * dpr);
+      canvas.style.width = `${{window.innerWidth}}px`;
+      canvas.style.height = `${{window.innerHeight}}px`;
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    }}
+    function rand(min, max) {{ return min + Math.random() * (max - min); }}
+    function makeExplosion() {{
+      const cx = window.innerWidth / 2;
+      const cy = window.innerHeight * 0.45;
+      particles = [];
+      sparks = [];
+      const pc = mobile ? 58 : 96;
+      const sc = mobile ? 96 : 170;
+      for (let i = 0; i < pc; i += 1) {{
+        const a = rand(0, Math.PI * 2);
+        const speed = rand(5, 24);
+        particles.push({{
+          x: cx + Math.cos(a) * rand(0, 56),
+          y: cy + Math.sin(a) * rand(0, 38),
+          vx: Math.cos(a) * speed,
+          vy: Math.sin(a) * speed - rand(0, 5),
+          r: rand(10, 54),
+          life: rand(.85, 1.55),
+          max: 1,
+          hue: rand(22, 58),
+        }});
+      }}
+      for (let i = 0; i < sc; i += 1) {{
+        const a = rand(-Math.PI * .95, Math.PI * 1.95);
+        const speed = rand(7, 38);
+        sparks.push({{
+          x: cx, y: cy,
+          vx: Math.cos(a) * speed,
+          vy: Math.sin(a) * speed,
+          life: rand(.4, 1.1),
+          len: rand(8, 30),
+          hue: rand(35, 62),
+        }});
+      }}
+      root.classList.add('kw-flash', 'kw-exploded');
+      window.setTimeout(() => root.classList.remove('kw-flash'), 900);
+      animateExplosion();
+    }}
+    function drawExplosion() {{
+      ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
+      ctx.globalCompositeOperation = 'lighter';
+      particles.forEach((p) => {{
+        const alpha = Math.max(0, p.life / p.max);
+        const grad = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.r);
+        grad.addColorStop(0, `hsla(${{p.hue}},100%,72%,${{.8 * alpha}})`);
+        grad.addColorStop(.38, `hsla(${{p.hue - 18}},100%,50%,${{.45 * alpha}})`);
+        grad.addColorStop(1, 'hsla(3,94%,30%,0)');
+        ctx.fillStyle = grad;
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+        ctx.fill();
+      }});
+      ctx.lineCap = 'round';
+      sparks.forEach((s) => {{
+        const alpha = Math.max(0, s.life);
+        ctx.strokeStyle = `hsla(${{s.hue}},100%,70%,${{alpha}})`;
+        ctx.lineWidth = 2.4 * alpha;
+        ctx.beginPath();
+        ctx.moveTo(s.x, s.y);
+        ctx.lineTo(s.x - s.vx * .7, s.y - s.vy * .7 + s.len);
+        ctx.stroke();
+      }});
+      ctx.globalCompositeOperation = 'source-over';
+    }}
+    function animateExplosion() {{
+      window.cancelAnimationFrame(raf);
+      let last = performance.now();
+      function tick(now) {{
+        const dt = Math.min(.033, (now - last) / 1000);
+        last = now;
+        particles.forEach((p) => {{
+          p.x += p.vx; p.y += p.vy;
+          p.vx *= .964; p.vy = p.vy * .96 + .22;
+          p.r *= 1.012; p.life -= dt;
+        }});
+        sparks.forEach((s) => {{
+          s.x += s.vx; s.y += s.vy;
+          s.vx *= .982; s.vy = s.vy * .98 + .5;
+          s.life -= dt * 1.18;
+        }});
+        particles = particles.filter((p) => p.life > 0);
+        sparks = sparks.filter((s) => s.life > 0);
+        drawExplosion();
+        if (particles.length || sparks.length) raf = window.requestAnimationFrame(tick);
+        else ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
+      }}
+      raf = window.requestAnimationFrame(tick);
+    }}
+    async function run() {{
+      if (active) return;
+      active = true;
+      root.classList.remove('kw-ready', 'kw-pressed', 'kw-exploded', 'kw-flash', 'kw-vanish', 'kw-filters-out', 'kw-done');
+      void root.offsetWidth;
+      root.classList.add('kw-running');
+      window.setTimeout(async () => {{
+        makeExplosion();
+        try {{
+          audio.muted = false;
+          audio.volume = 1;
+          audio.currentTime = 0;
+          await audio.play();
+        }} catch (error) {{
+          console.warn('Karate Wiener audio blocked:', error);
+        }}
+      }}, 950);
+      window.setTimeout(() => root.classList.add('kw-vanish'), 3450);
+      window.setTimeout(() => root.classList.add('kw-filters-out'), 3950);
+      window.setTimeout(() => {{
+        root.classList.add('kw-done');
+        root.remove();
+      }}, 5600);
+    }}
+    resize();
+    window.addEventListener('resize', resize, {{ passive: true }});
+    root.addEventListener('click', async (event) => {{
+      if (!root.classList.contains('kw-ready') || starting) return;
+      starting = true;
+      event.preventDefault();
+      root.classList.add('kw-pressed');
+      window.setTimeout(run, 180);
+    }});
+    if (mobile) {{
+      root.classList.add('kw-ready');
+    }} else {{
+      window.setTimeout(run, 350);
+    }}
+  }}
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', install);
+  else install();
+}})();
+"""
+
+APP_HEAD = (
     # Warm the CDNs the viewer iframe pulls three.js (+ lazy spark) from. (head= is
     # injected at hydration, so this is a best-effort warm-up; the boot splash that
     # hides the pre-hydration flash lives in the SSR'd css= block instead — see
@@ -6264,10 +6599,11 @@ APP_HEAD = (
     '<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>'
     '<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">'
     '<link rel="preconnect" href="https://unpkg.com" crossorigin>'
-    '<script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>'
-    # APP_CSS + any pluggable-tab styles (tabs/<name>.tab.css), then the drawer JS.
-    f"<style>{APP_CSS}{_read_tabs('*.tab.css')}</style><script>{DRAWER_JS}</script>"
-)
+    '<script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>'
+    # APP_CSS + any pluggable-tab styles (tabs/<name>.tab.css), then the drawer JS.
+    f"<style>{APP_CSS}{_read_tabs('*.tab.css')}{TITLE_OVERLAY_CSS}</style>"
+    f"<script>{DRAWER_JS}</script><script>{TITLE_OVERLAY_JS}</script>"
+)
 
 
 def generate(

assets/karate_wiener_title_overlay.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dcd9c57314a80c1e1ee4f95f95823a7171abdcac03508e96edfc4d765d474046
+size 783404

deploy_out2.txt

@@ -802,3 +802,7 @@ variables + HF_TOKEN secret set
 
  ...ace\comic_koma_sample.png: 100%|##########|  365kB /  365kB            
 
  ...raw_lora-minimal_1234.png: 100%|##########|  490kB /  490kB            
 
  [+ 167 files]               : 100%|##########|  285MB /  285MB            
+No files have been modified since last commit. Skipping to prevent empty commit.
+Uploaded: https://huggingface.co/spaces/build-small-hackathon/karate-wiener/commit/be2c1ca83c0c7fd01bc453c629c1bface7121a4f
+Space URL: https://huggingface.co/spaces/build-small-hackathon/karate-wiener
+restarting local gradio -> http://127.0.0.1:7860 (log: C:\Users\paulg\AppData\Local\Temp\kimodo_local_gradio.log)

deploy_space.py

@@ -43,6 +43,21 @@ def main() -> None:
             ".kimodo-animations/**",
             # Local headless probes / checks (never part of the Space).
             "_*.py",
+            # Experiment line + LAN-only lab/prototype servers (never deployed).
+            "experiments/**",
+            "kimodo_lab.py",
+            "flux_lab.py",
+            "wiener_dojo.py",
+            "wiener_dojo_web.py",
+            ".comic-cache/**",
+            "comic_klein_out/**",
+            "weiner_dataset_raw/**",
+            "weiner_lora_train/**",
+            "weiner_lora_train.zip",
+            "*.task",
+            "*.obj",
+            "dojo_*",
+            ".gitignore",
         ],
     )
     runtime = api.request_space_hardware(repo_id=args.repo_id, hardware=SpaceHardware.ZERO_A10G)