Connect Space portal to verified Windows Style-SALAD session

Frontend portal only; inference stays on the Windows PC. Preserve the existing Space SDK, visibility and hardware.

README.md

@@ -3,13 +3,33 @@ title: Controllable Human Motion Generation
 emoji: 🌍
 colorFrom: red
 colorTo: indigo
-sdk: gradio
-sdk_version: 6.30.0
-python_version: '3.12'
-app_file: app.py
 pinned: false
 license: mit
 short_description: Based on style salad model
+sdk: gradio
+sdk_version: 6.15.0
+python_version: '3.12'
+app_file: app.py
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+This English portal connects visitors to Style-SALAD running on the owner's Windows PC. The Space hosts only the entry page. Inference, uploads, datasets, checkpoints and generation outputs stay on the PC; no hosted GPU is requested by this repository.
+
+Choose one of 100 movement styles, sample a reference with a seed, choose a reference ID, or upload raw HumanML3D features `(T,263)` at 20 fps with at least 41 frames. Describe the action in English and download MP4, BVH, NPY, NPZ and JSON outputs.
+
+The colored checkerboard stays fixed in world coordinates while the camera follows the generated root. MP4 is rendered from the 22 joints reconstructed from the generated features. BVH is exported from those same joints through inverse kinematics; it is not the input to video rendering.
+
+The computer and local application must remain online. Temporary Gradio share links can expire. Update `config.json` with the current public HTTPS `app_url`, keeping `temporary` and `updated_at`; restarting the Space loads the new address. Never use a private IP or `localhost` for external visitors.
+
+`app.py` reuses `index.html`, `styles.css` and `app.js` with Gradio's supported `HTML` component (`css_template`, `js_on_load` and props). The portal owns no inference API and downloads no model weights. `config.json` is passed as a component prop to avoid colliding with Gradio's own `/config` route. The browser connects directly to the local studio through its HTTPS iframe.
+
+Run the portal locally with Gradio 6.15.0 installed:
+
+```powershell
+$env:GRADIO_SERVER_NAME = '127.0.0.1'
+$env:GRADIO_SERVER_PORT = '7862'
+python app.py
+```
+
+This repository does not change the Space's hardware or billing settings. Use the free CPU configuration for the entry page; model computation remains on the local GPU.
+
+The adapter retains its MIT license. The [Style-SALAD code](https://github.com/junhyukjeon/style-salad) and checkpoint have their own terms, including [CC BY-NC-ND 4.0](https://creativecommons.org/licenses/by-nc-nd/4.0/) for the checkpoint. Third-party components and datasets retain their own terms. Availability of 100 style labels does not guarantee equal quality beyond the released 47-style subset.

app.js

@@ -0,0 +1,62 @@
+"use strict";
+
+async function connectApplication() {
+  document.documentElement.lang = "en";
+  const status = element.querySelector(".status");
+  const statusText = element.querySelector("#status-text");
+  const frame = element.querySelector("#application-frame");
+  const open = element.querySelector("#open-app");
+  const placeholder = element.querySelector("#placeholder");
+  const setStatus = (state, text) => { status.dataset.state = state; statusText.textContent = text; };
+
+  // Gradio owns /config. Pass the repo's config.json through the HTML props.
+  const config = props.session;
+  if (!config || typeof config !== "object") {
+    setStatus("offline", "Session information unavailable");
+    return;
+  }
+
+  if (!config.app_url) {
+    setStatus("pending", "Session being prepared");
+    return;
+  }
+
+  let app;
+  try {
+    app = new URL(config.app_url);
+    if (app.protocol !== "https:" || app.username || app.password ||
+        /^(localhost|127\.|0\.|10\.|192\.168\.|169\.254\.|172\.(1[6-9]|2\d|3[01])\.)/i.test(app.hostname) ||
+        app.hostname.includes(":") || !app.hostname.includes(".")) {
+      throw new Error("An external HTTPS URL is required");
+    }
+    app.search = "";
+    app.hash = "";
+    if (!app.pathname.endsWith("/")) app.pathname += "/";
+  } catch (_) {
+    setStatus("offline", "Session address unavailable");
+    return;
+  }
+
+  open.href = app.href;
+  open.hidden = false;
+  frame.src = app.href;
+  frame.hidden = false;
+  placeholder.hidden = true;
+  setStatus("pending", "Checking the session…");
+
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), 10000);
+  try {
+    const response = await fetch(new URL("config", app), { signal: controller.signal, cache: "no-store" });
+    if (!response.ok) throw new Error("Session unavailable");
+    const metadata = await response.json();
+    if (!metadata || !Array.isArray(metadata.components)) throw new Error("Unexpected response");
+    setStatus("online", config.temporary ? "Studio available · temporary link" : "Studio available");
+  } catch (_) {
+    setStatus("offline", "Availability unconfirmed · try opening the studio");
+  } finally {
+    clearTimeout(timeout);
+  }
+}
+
+connectApplication();

app.py

@@ -0,0 +1,50 @@
+"""Gradio Space portal. Motion inference stays on the owner's Windows GPU."""
+
+from pathlib import Path
+import json
+import os
+import re
+
+import gradio as gr
+
+ROOT = Path(__file__).resolve().parent
+
+
+def create_portal() -> gr.Blocks:
+    """Reuse the English portal through Gradio's scoped HTML component API."""
+    document = (ROOT / "index.html").read_text(encoding="utf-8-sig")
+    body = re.search(r"<body[^>]*>(.*?)</body>", document, flags=re.S | re.I)
+    if body is None:
+        raise ValueError("The portal must contain an HTML body")
+    html = re.sub(r"<script\b[^>]*>.*?</script>", "", body.group(1), flags=re.S | re.I)
+    css = (ROOT / "styles.css").read_text(encoding="utf-8-sig")
+    css = css.replace(":root", ".portal").replace("body {", ".portal {")
+    javascript = (ROOT / "app.js").read_text(encoding="utf-8-sig")
+    config = json.loads((ROOT / "config.json").read_text(encoding="utf-8-sig"))
+
+    with gr.Blocks(title="Style-SALAD · Human Motion", analytics_enabled=False) as portal:
+        gr.HTML(
+            value=f'<div class="portal">{html}</div>',
+            css_template=css,
+            js_on_load=javascript,
+            apply_default_css=False,
+            session=config,
+            elem_id="motion-portal",
+            container=False,
+            padding=False,
+        )
+    return portal
+
+
+demo = create_portal()
+
+if __name__ == "__main__":
+    demo.launch(
+        server_name=os.environ.get("GRADIO_SERVER_NAME", "0.0.0.0"),
+        server_port=int(os.environ.get("GRADIO_SERVER_PORT", "7860")),
+        share=False,
+        ssr_mode=False,
+        footer_links=[],
+        css=".gradio-container {padding: 0 !important; max-width: 100% !important;} body {margin: 0; background: #f4f3ee;}",
+        head='<meta name="description" content="Academic human motion generation with Style-SALAD on a local GPU.">',
+    )

config.json

@@ -0,0 +1,5 @@
+{
+  "app_url": "https://5454ee2cf7716abe10.gradio.live/",
+  "temporary": true,
+  "updated_at": "2026-10-14T13:58:34.574067+00:00"
+}

index.html

@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="color-scheme" content="light">
+  <meta name="description" content="Academic human motion generation with Style-SALAD, style selection and inference on a local GPU.">
+  <title>Style-SALAD · Human Motion</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <main>
+    <header class="hero">
+      <p class="eyebrow">HTI · Academic project</p>
+      <h1>An action.<br>A way to move.</h1>
+      <p class="intro">Choose a movement style and describe an action. Style-SALAD creates a new animation to watch and download as MP4, BVH and motion data.</p>
+      <div class="status" role="status" aria-live="polite"><span class="dot" aria-hidden="true"></span><span id="status-text">Loading session information…</span></div>
+    </header>
+
+    <section class="instructions" aria-label="How to use">
+      <article><span class="step">01</span><h2>Choose the style</h2><p>Select one of 100 styles. Sample a reference with the seed, choose a specific ID from that style, or upload a compatible <code>.npy</code>.</p></article>
+      <article><span class="step">02</span><h2>Describe the action</h2><p>Write in English. For example: “A person walks forward and turns left.”</p></article>
+      <article><span class="step">03</span><h2>Generate and watch</h2><p>Wait for your turn in the queue, compare the video with the reference, and download MP4, BVH, features and generation parameters.</p></article>
+    </section>
+
+    <section class="application" aria-labelledby="application-title">
+      <div class="application-heading"><h2 id="application-title">Generate motion</h2><a id="open-app" class="open-link" target="_blank" rel="noopener noreferrer" hidden>Open in another tab ↗</a></div>
+      <div id="placeholder" class="placeholder"><div class="motion-mark" aria-hidden="true">↗</div><h3 id="placeholder-title">Preparing the session</h3><p id="placeholder-text">The studio will appear here when the local application and external connection are available.</p></div>
+      <iframe id="application-frame" title="Style-SALAD motion generation studio" allow="autoplay; clipboard-write; fullscreen" referrerpolicy="no-referrer" hidden></iframe>
+      <p class="availability">Generation runs on the project host's local GPU. The computer and application must stay online. Share sessions can expire; this Gradio Space is the entry page and does not guarantee continuous availability.</p>
+    </section>
+
+    <aside class="input-note"><strong>Before uploading</strong><p>Use raw HumanML3D features <code>(T, 263)</code> at 20 fps with at least 41 frames. The reference uses a centered window of up to 196 frames. Videos, webcam, BVH, FBX, positions <code>(T, 22, 3)</code> and object-based <code>results.npy</code> files need conversion. Uploads are sent to the host computer.</p></aside>
+
+    <footer><p>Academic demonstration · Results depend on the action and reference. Availability of 100 style labels does not guarantee equal quality beyond the released 47-style subset.</p><p><a href="https://github.com/junhyukjeon/style-salad" target="_blank" rel="noopener noreferrer">Style-SALAD code and research ↗</a> · <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" rel="noopener noreferrer">Checkpoint: CC BY-NC-ND 4.0 ↗</a></p><p class="license">The adapter retains its MIT license. Third-party components and datasets retain their own terms; a supported input format does not grant rights to uploaded data.</p></footer>
+  </main>
+  <script src="app.js"></script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1,2 @@
+# The Gradio SDK version is pinned in README.md.
+# This portal needs no model, CUDA, or dataset packages.

styles.css

@@ -0,0 +1,38 @@
+:root { font-family: Inter, "Segoe UI", system-ui, sans-serif; color: #20313c; background: #f4f3ee; line-height: 1.55; }
+* { box-sizing: border-box; }
+body { margin: 0; }
+main { width: min(1160px, calc(100% - 48px)); margin: 0 auto; padding: 66px 0 30px; }
+.eyebrow { color: #3c665f; font-size: 13px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; margin: 0 0 20px; }
+h1 { font-size: clamp(36px, 6vw, 64px); line-height: 1.08; font-weight: 650; letter-spacing: -.045em; margin: 0 0 25px; }
+.intro { font-size: 19px; max-width: 690px; color: #59676e; margin: 0; }
+.status { display: inline-flex; align-items: center; gap: 9px; margin-top: 24px; border: 1px solid #d8dfd8; border-radius: 999px; padding: 7px 13px; font-size: 13px; background: #fafbf8; }
+.dot { width: 8px; height: 8px; border-radius: 50%; background: #939f99; }
+.status[data-state="online"] .dot { background: #2d8a69; }
+.status[data-state="offline"] .dot { background: #b67c35; }
+.instructions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin: 55px 0 38px; }
+.instructions article { border-top: 1px solid #ccd5cf; padding-top: 18px; }
+.step { font-size: 12px; color: #68837a; letter-spacing: .1em; }
+h2 { font-size: 18px; margin: 9px 0 10px; font-weight: 650; }
+.instructions p { font-size: 14px; color: #606e75; margin: 0; }
+code { font-size: .91em; background: #e9ede7; padding: 2px 4px; border-radius: 4px; white-space: nowrap; }
+.application { border: 1px solid #d8dfd9; border-radius: 16px; background: #fff; overflow: hidden; }
+.application-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 17px 24px; border-bottom: 1px solid #e5eae5; }
+.application-heading h2 { margin: 0; }
+a { color: #386b63; text-decoration: none; }
+a:hover { text-decoration: underline; }
+a:focus-visible { outline: 3px solid #377f73; outline-offset: 5px; }
+.open-link { font-size: 13px; font-weight: 600; }
+.placeholder { padding: 60px 24px; text-align: center; background: #fafbf8; }
+.motion-mark { width: 55px; height: 55px; margin: auto; border: 1px solid #d4ded4; border-radius: 14px; color: #547a69; font-size: 35px; line-height: 50px; }
+.placeholder h3 { font-size: 18px; font-weight: 600; margin: 16px 0 8px; }
+.placeholder p { color: #69756f; font-size: 14px; max-width: 560px; margin: auto; }
+iframe { width: 100%; height: 1050px; border: 0; display: block; background: #fff; }
+[hidden] { display: none !important; }
+.availability { padding: 15px 24px 18px; margin: 0; background: #f5f8f4; border-top: 1px solid #e1e8df; color: #5a6a5f; font-size: 12px; }
+.input-note { margin: 24px 0 35px; padding: 18px 22px; border-left: 3px solid #92a99b; background: #eaeee7; border-radius: 0 8px 8px 0; }
+.input-note strong { font-size: 14px; }
+.input-note p { margin: 7px 0 0; font-size: 13px; color: #58675e; }
+footer { border-top: 1px solid #d9ded5; padding-top: 20px; color: #728077; font-size: 12px; }
+footer p { margin: 0 0 8px; }
+.license { max-width: 800px; }
+@media (max-width: 720px) { main { width: calc(100% - 32px); padding-top: 36px; } .intro { font-size: 17px; } .instructions { grid-template-columns: 1fr; gap: 20px; margin-top: 35px; } .application-heading { padding: 16px; flex-wrap: wrap; } .availability { padding: 14px 16px; } iframe { height: 1250px; } }