Deploy Karate Wiener (kimodo kata maker)

app.py

@@ -127,6 +127,30 @@ CLOTHING_CATALOG = [
 DEFAULT_CLOTHING = {"head": "beanie_green", "face": "nerdy_glasses",
                     "torso_over": "kimono", "legs": "kimono_trousers"}
 
+# --- Pluggable side tabs ---------------------------------------------------
+# A NEW side tab is added by DROPPING FILES into ./tabs — NO app.py edit needed,
+# so multiple people can build tabs in parallel without touching shared code:
+#   tabs/<name>.tab.html    -> the rail button (.kimodo-left-tab[data-drawer=…])
+#   tabs/<name>.drawer.html -> the slide-in <aside id="kimodo-<name>-drawer"> panel
+#   tabs/<name>.tab.css     -> styles for that tab
+#   tabs/<name>.tab.js      -> behavior; runs INSIDE the drawer-JS scope, so it can
+#                              call the shared helpers (previewFrame, fetchManifest,
+#                              fetchRecord, loadIntoViewer, setOpen, sendViewportInset…).
+# All matching files are globbed + concatenated in sorted filename order at import.
+# The drawer manager auto-discovers the new button+aside from the DOM; the tab hooks
+# its "drawer opened" behavior WITHOUT editing setOpen via:
+#   window.addEventListener('kimodo-drawer-open', (e) => {
+#     if (e.detail === 'kimodo-<name>-drawer') { /* refresh / build */ }
+#   });
+# Tabs needing a Python/@GPU backend are the only case that still edits app.py — at
+# 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)))
+
 APP_CSS = """
 #main-preview {
   min-width: 0;
@@ -2252,6 +2276,8 @@ def _drawers_html() -> str:
         'data-drawer="kimodo-compose-drawer" title="Storyboard composer: sequence stances into a kata">COMPOSE</button>',
         '<button id="kimodo-clothing-toggle" class="kimodo-left-tab" type="button" '
         'data-drawer="kimodo-clothing-drawer" title="Add clothing to the citizen">CLOTHING</button>',
+        # Pluggable tabs drop a rail button here (tabs/<name>.tab.html).
+        _read_tabs("*.tab.html"),
         '</div>',
         # Actions library (clip cards populated in a later phase).
         '<aside id="kimodo-actions-drawer" class="kimodo-drawer" aria-label="Actions library">',
@@ -2311,6 +2337,8 @@ def _drawers_html() -> str:
                 f'{html.escape(item["label"])}</button>'
             )
     parts.append("</aside>")
+    # Pluggable tabs drop their slide-in <aside> panel here (tabs/<name>.drawer.html).
+    parts.append(_read_tabs("*.drawer.html"))
     # Fixed bottom-of-page Build & Play — shown only while a sequence is storyboarded.
     parts.append('<button id="kimodo-compose-launch" type="button">▶ Build &amp; Play</button>')
     parts.append("</div>")
@@ -3248,6 +3276,9 @@ _COMPOSE_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"""
 (() => {{
   let attempts = 0;
@@ -3333,6 +3364,9 @@ DRAWER_JS = f"""
     if (open && drawer.id === 'kimodo-stances-drawer') refreshStances();
     // Build the storyboard composer (palette + strip) when its drawer opens.
     if (open && drawer.id === 'kimodo-compose-drawer') composeOpen();
+    // Pluggable tabs (tabs/*.tab.js) hook their open behavior off this event,
+    // so a new tab never has to edit setOpen. detail = the opened drawer's id.
+    if (open) window.dispatchEvent(new CustomEvent('kimodo-drawer-open', {{ detail: drawer.id }}));
     // Shift the viewer camera to keep the character centered beside the open drawer.
     sendViewportInset();
   }}
@@ -3417,6 +3451,8 @@ DRAWER_JS = f"""
 {_KATA_JS}
 {_STANCES_JS}
 {_COMPOSE_JS}
+  // --- Pluggable tabs (tabs/*.tab.js) — run in this same scope, after the helpers. ---
+{_EXTRA_TABS_JS}
 
   window.addEventListener('message', (event) => {{
     const msg = event.data || {{}};
@@ -3451,7 +3487,8 @@ DRAWER_JS = f"""
 """
 APP_HEAD = (
     '<script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>'
-    f"<style>{APP_CSS}</style><script>{DRAWER_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>"
 )
 
 
@@ -4085,6 +4122,13 @@ with gr.Blocks(title="Kimodo ZeroGPU", css=_BLOCKS_CSS) as demo:
         fn=_generate_button_label, inputs=[anonymous_client_id], outputs=[btn], api_name=False,
     )
 
+    # ===================== NEW-TAB BACKEND EXTENSION POINT =====================
+    # Front-end-only tabs need NOTHING here (drop files in tabs/). A tab that needs
+    # a Python/@GPU backend adds its hidden gr components + .click wiring BELOW this
+    # line (mirror the compose_btn pattern: a hidden #<name>-btn the tab JS clicks,
+    # outputs routed to [preview, meta, file_out]). Append only — don't edit above.
+    # ==========================================================================
+
     # Display model drives the persistent viewer live via postMessage (no reload).
     # Clothing is handled by the fixed browser drawer so it can behave like kata's drawers.
     model_dd.change(

tabs/README.md

@@ -0,0 +1,68 @@
+# Pluggable side tabs
+
+A side tab is added by **dropping files into this folder** — you do **not** edit
+`app.py` (unless your tab needs a Python/@GPU backend). This lets several tabs be
+built in parallel with zero shared-code conflicts.
+
+## The 4 files (replace `<name>` with your tab's slug, e.g. `effects`)
+
+| File | What it is | Globbed into |
+|------|------------|--------------|
+| `<name>.tab.html`    | the rail button | the left tab rail |
+| `<name>.drawer.html` | the slide-in `<aside>` panel | the drawer container |
+| `<name>.tab.css`     | styles for your tab | the page `<style>` |
+| `<name>.tab.js`      | behavior | the drawer-JS scope (shared helpers available) |
+
+All four are optional, but a useful tab has at least `.drawer.html` + `.tab.html`.
+Files load in **sorted filename order** at import.
+
+## ID conventions (the drawer manager auto-discovers these from the DOM)
+
+- Rail button: `id="kimodo-<name>-toggle"`, `class="kimodo-left-tab"`,
+  `data-drawer="kimodo-<name>-drawer"`.
+- Drawer panel: `<aside id="kimodo-<name>-drawer" class="kimodo-drawer">` (add
+  `kimodo-drawer--wide` for a wider panel). Opening it is handled for you
+  (one drawer open at a time, tab-rail shift, camera re-centers beside it).
+
+## Showing your tab
+
+Minimal mode currently **hides every rail tab except COMPOSE**. Your `.tab.css`
+must un-hide yours:
+
+```css
+#kimodo-<name>-toggle { display: block !important; }
+```
+
+## Hooking "drawer opened" (no setOpen edit)
+
+```js
+window.addEventListener('kimodo-drawer-open', (e) => {
+  if (e.detail !== 'kimodo-<name>-drawer') return;
+  // build/refresh your panel here
+});
+```
+
+## Shared helpers your `.tab.js` can call (same scope)
+
+- `fetchManifest()` → `[{id, prompt, ...}]` of all saved clips/stances.
+- `fetchRecord(id)` → a clip record (incl. `posed_joints`, `global_quats_xyzw`).
+- `loadIntoViewer(rec, id, label)` → play a clip in the 3D viewer (set
+  `rec.num_joints` + `rec.bone_names = SMPLX22_BONES` first if missing).
+- `previewFrame()` → the viewer iframe (for custom `postMessage`).
+- `setOpen(drawerEl, bool)`, `sendViewportInset()`, `stitchPath(ids)`,
+  `DATASET_BASE`, `KIMODO_BACKEND`.
+
+## Tabs that need a Python/@GPU backend
+
+Front-end-only tabs need nothing in `app.py`. If you need server generation, add a
+hidden `gr` component + `.click` wiring **below** the
+`NEW-TAB BACKEND EXTENSION POINT` marker in `app.py` (mirror the `compose_btn`
+pattern: a hidden `#<name>-btn` your JS clicks; outputs → `[preview, meta, file_out]`).
+That marker is the **only** shared line a backend tab touches — append only.
+
+## Deploy
+
+`tabs/` ships automatically with the Space (no ignore rule). `tabs/templates/` is a
+subfolder, so its example files are **not** loaded (the globs are non-recursive).
+
+See `tabs/templates/` for a complete, copy-paste example tab.

tabs/templates/example.drawer.html

@@ -0,0 +1,8 @@
+<!-- The slide-in panel. Copy to tabs/<name>.drawer.html. Use class
+     "kimodo-drawer" (add " kimodo-drawer--wide" for a wider panel). -->
+<aside id="kimodo-example-drawer" class="kimodo-drawer" aria-label="Example tab">
+  <h2>Example tab</h2>
+  <div class="kimodo-drawer-sub">A starter tab — lists saved clips; click one to
+    play it in the viewer. Replace this with your own UI.</div>
+  <div id="kimodo-example-list"></div>
+</aside>

tabs/templates/example.tab.css

@@ -0,0 +1,11 @@
+/* Styles for the example tab. Copy to tabs/<name>.tab.css.
+   The un-hide rule is REQUIRED: minimal mode hides every rail tab but COMPOSE. */
+#kimodo-example-toggle { display: block !important; color: #9fe6c0; }
+#kimodo-example-toggle.active { background: #1f3a2c !important; border-color: #3a6 !important; color: #9fe6c0 !important; }
+
+.kimodo-ex-item {
+  display: block; width: 100%; text-align: left; margin-bottom: 6px;
+  padding: 8px 10px; font-size: 12px; cursor: pointer; border-radius: 7px;
+  background: #26262b; color: #e3e3e8; border: 1px solid #3a3a40;
+}
+.kimodo-ex-item:hover { background: #30303a; }

tabs/templates/example.tab.html

@@ -0,0 +1,5 @@
+<!-- Rail button. Copy to tabs/<name>.tab.html and rename ids/label.
+     NOTE: files under tabs/templates/ are NOT loaded (globs are non-recursive);
+     move a copy up to tabs/ to activate it. -->
+<button id="kimodo-example-toggle" class="kimodo-left-tab" type="button"
+        data-drawer="kimodo-example-drawer" title="Example pluggable tab">EXAMPLE</button>

tabs/templates/example.tab.js

@@ -0,0 +1,37 @@
+// Behavior for the example tab. Copy to tabs/<name>.tab.js.
+// This block is concatenated INTO the drawer-JS scope, AFTER the shared helpers,
+// so it can call them directly (fetchManifest, fetchRecord, loadIntoViewer, …).
+// Wrap in an IIFE to keep your locals from colliding with other tabs.
+(function () {
+  let loaded = false;
+
+  async function refreshExample() {
+    const list = document.getElementById('kimodo-example-list');
+    if (!list) return;
+    list.textContent = 'loading…';
+    let items = [];
+    try { items = await fetchManifest(); } catch (e) { list.textContent = 'failed to load'; return; }
+    list.innerHTML = '';
+    for (const m of items.slice(0, 25)) {
+      const b = document.createElement('button');
+      b.type = 'button'; b.className = 'kimodo-ex-item';
+      b.textContent = (m.prompt || m.id).slice(0, 48);
+      b.onclick = async () => {
+        try {
+          const rec = await fetchRecord(m.id);
+          // The viewer skips clips whose num_joints != 22; derive them if missing.
+          if (!rec.num_joints) rec.num_joints = (rec.posed_joints && rec.posed_joints[0]) ? rec.posed_joints[0].length : 22;
+          if (!rec.bone_names || !rec.bone_names.length) rec.bone_names = SMPLX22_BONES;
+          loadIntoViewer(rec, m.id, m.prompt || m.id);
+        } catch (e) { console.error('example load failed', e); }
+      };
+      list.appendChild(b);
+    }
+    loaded = true;
+  }
+
+  // Build the panel when THIS drawer opens (no setOpen edit needed).
+  window.addEventListener('kimodo-drawer-open', (e) => {
+    if (e.detail === 'kimodo-example-drawer' && !loaded) refreshExample();
+  });
+})();