Viewer for codepawl/100style-glb

README.md

@@ -1,10 +1,10 @@
 ---
-title: 100style Viewer
-emoji: 🚀
-colorFrom: purple
-colorTo: pink
+title: 100STYLE locomotion as GLB viewer
+emoji: 📦
+colorFrom: gray
+colorTo: gray
 sdk: static
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Browse https://huggingface.co/datasets/codepawl/100style-glb in the browser.

index.html

@@ -1,19 +1,234 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<title>Motion pack viewer</title>
+<style>
+  :root { --background: #ecece9; --panel: #f7f7f5; --text: #1d1d1b; --muted: #6b6b66; --fill: #e2e2de; --accent: #2f5bd3; --ground: #d9d9d4; }
+  @media (prefers-color-scheme: dark) {
+    :root { --background: #161615; --panel: #1f1f1d; --text: #ececea; --muted: #9a9a94; --fill: #2b2b28; --accent: #8aa7ff; --ground: #232321; }
+  }
+  * { box-sizing: border-box; }
+  html, body { height: 100%; }
+  body { margin: 0; font: 15px/1.4 system-ui, sans-serif; background: var(--background); color: var(--text); display: grid; grid-template-columns: 300px 1fr; }
+  aside { background: var(--panel); overflow: auto; padding: 12px; user-select: none; display: flex; flex-direction: column; gap: 10px; }
+  input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 0; background: var(--fill); color: var(--text); font: inherit; }
+  .chips { display: flex; flex-wrap: wrap; gap: 4px; }
+  .chips button { border: 0; border-radius: 8px; padding: 7px 10px; background: none; color: var(--muted); font: inherit; cursor: pointer; }
+  .chips button[aria-pressed="true"] { background: var(--fill); color: var(--text); }
+  .chips button:disabled { opacity: 0.35; cursor: default; }
+  #styles { display: flex; flex-direction: column; gap: 2px; }
+  #styles button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
+  #styles button:hover, #styles button[aria-current="true"] { background: var(--fill); }
+  #styles small { display: block; color: var(--muted); font-size: 13px; }
+  main { position: relative; min-height: 0; }
+  canvas { width: 100%; height: 100%; display: block; touch-action: none; }
+  #status { position: absolute; left: 16px; top: 14px; display: flex; align-items: center; gap: 8px; color: var(--muted); }
+  #status svg { width: 16px; height: 16px; flex: none; }
+  #status[data-state="loading"] svg { animation: spin 0.9s linear infinite; }
+  #status[data-state="failed"] { color: #c2410c; }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  @media (max-width: 760px) {
+    body { grid-template-columns: 1fr; grid-template-rows: 58vh 1fr; }
+    aside { order: 2; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
+  }
+</style>
+<script type="importmap">
+{ "imports": { "three": "https://cdn.jsdelivr.net/npm/three@0.187.0/build/three.module.js", "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.187.0/examples/jsm/" } }
+</script>
+</head>
+<body>
+<aside>
+  <div class="chips" id="tiers" role="group" aria-label="File"></div>
+  <div class="chips" id="movements" role="group" aria-label="Movement"></div>
+  <input id="search" type="search" placeholder="Search styles" aria-label="Search styles">
+  <div id="styles"></div>
+</aside>
+<main>
+  <canvas id="view"></canvas>
+  <div id="status" data-state="loading" aria-live="polite"><svg viewBox="0 0 16 16" aria-hidden="true"></svg><span></span></div>
+</main>
+<script type="module">
+// Motion pack viewer: pick a style and a movement, the clip plays on the character (or the bare source skeleton) and
+// the camera follows the root. Reads metadata.jsonl from the dataset; ?base=<url> points it at a local copy.
+import * as THREE from 'three';
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
+import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js';
+
+const PACK = {"repository":"codepawl/100style-glb","title":"100STYLE locomotion as GLB"};
+const base = new URLSearchParams(location.search).get('base') ?? `https://huggingface.co/datasets/${PACK.repository}/resolve/main`;
+document.title = PACK.title ?? document.title;
+const isPhone = matchMedia('(max-width: 760px)').matches;
+const TIERS = [
+  { key: isPhone ? 'mobile' : 'web', label: 'Character' },
+  { key: 'skeleton', label: 'Skeleton' },
+];
+const STATUS_ICONS = {
+  loading: '<circle cx="8" cy="8" r="6" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="26 12"/>',
+  ready: '<path d="M3 8.5l3 3 7-7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
+  failed: '<path d="M8 1.5l7 13H1z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/><path d="M8 6v4M8 12v.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>',
+};
+
+const statusElement = document.getElementById('status');
+function setStatus(state, text) {
+  statusElement.dataset.state = state;
+  statusElement.querySelector('svg').innerHTML = STATUS_ICONS[state];
+  statusElement.querySelector('span').textContent = text;
+}
+
+const canvas = document.getElementById('view');
+const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
+renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
+renderer.toneMapping = THREE.ACESFilmicToneMapping;
+const style = getComputedStyle(document.documentElement);
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(style.getPropertyValue('--background').trim());
+scene.fog = new THREE.Fog(scene.background, 12, 40);
+scene.environment = new THREE.PMREMGenerator(renderer).fromScene(new RoomEnvironment(), 0.04).texture;
+scene.environmentIntensity = 0.7;
+scene.add(new THREE.HemisphereLight(0xffffff, 0x8a8a84, 1.4));
+const sun = new THREE.DirectionalLight(0xffffff, 1.6);
+sun.position.set(3, 6, 4);
+scene.add(sun);
+const ground = new THREE.GridHelper(400, 400, style.getPropertyValue('--muted').trim(), style.getPropertyValue('--ground').trim());
+ground.material.transparent = true;
+ground.material.opacity = 0.55;
+scene.add(ground);
+const camera = new THREE.PerspectiveCamera(35, 1, 0.05, 200);
+camera.position.set(2.6, 1.6, 3.6);
+const controls = new OrbitControls(camera, canvas);
+controls.target.set(0, 0.9, 0);
+controls.enablePan = false;
+controls.minDistance = 1.2;
+controls.maxDistance = 14;
+const loader = new GLTFLoader()
+  .setMeshoptDecoder(MeshoptDecoder)
+  .setKTX2Loader(new KTX2Loader().setTranscoderPath('https://cdn.jsdelivr.net/npm/three@0.187.0/examples/jsm/libs/basis/').detectSupport(renderer));
+
+let rows = [];
+let current = null;
+let mixer = null;
+let followBone = null;
+let loadToken = 0;
+const selection = { style: null, movement: 'FW', tier: TIERS[0].key };
+const clock = new THREE.Clock();
+
+function resize() {
+  const { clientWidth, clientHeight } = canvas.parentElement;
+  renderer.setSize(clientWidth, clientHeight, false);
+  camera.aspect = clientWidth / clientHeight;
+  camera.updateProjectionMatrix();
+}
+new ResizeObserver(resize).observe(canvas.parentElement);
+
+function rowFor(styleName, movement) {
+  return rows.find((row) => row.style === styleName && row.movement === movement);
+}
+
+async function play() {
+  const row = rowFor(selection.style, selection.movement) ?? rows.find((candidate) => candidate.style === selection.style);
+  if (!row) return;
+  selection.movement = row.movement;
+  renderChips();
+  history.replaceState(null, '', `#${row.id}`);
+  const relative = row.files[selection.tier] ?? row.files.web;
+  const token = ++loadToken;
+  setStatus('loading', `${row.title}`);
+  try {
+    const gltf = await loader.loadAsync(`${base}/${relative}`);
+    if (token !== loadToken) return;
+    if (current) scene.remove(current);
+    current = gltf.scene;
+    scene.add(current);
+    let skeletonOnly = true;
+    const bones = [];
+    current.traverse((object) => {
+      if (object.isMesh) skeletonOnly = false;
+      if (object.isBone) bones.push(object);
+    });
+    if (skeletonOnly) {
+      const helper = new THREE.SkeletonHelper(current);
+      helper.material.linewidth = 2;
+      current.add(helper);
+      for (const bone of bones) bone.add(new THREE.Mesh(new THREE.SphereGeometry(0.022, 10, 8), new THREE.MeshStandardMaterial({ color: style.getPropertyValue('--accent').trim() })));
+    }
+    followBone = bones.find((bone) => /pelvis|hips/i.test(bone.name)) ?? bones[0] ?? current;
+    mixer = new THREE.AnimationMixer(current);
+    mixer.clipAction(gltf.animations[0]).play();
+    setStatus('ready', `${row.title} · ${row.seconds?.toFixed(0) ?? '?'} s · ${((row[`${selection.tier}_bytes`] ?? 0) / 1e6).toFixed(1)} MB`);
+  } catch (error) {
+    if (token === loadToken) setStatus('failed', `Could not load ${relative}`);
+  }
+}
+
+function renderChips() {
+  const tiers = document.getElementById('tiers');
+  tiers.replaceChildren(...TIERS.map(({ key, label }) => {
+    const button = document.createElement('button');
+    button.textContent = label;
+    button.setAttribute('aria-pressed', String(selection.tier === key));
+    button.onclick = () => { selection.tier = key; play(); };
+    return button;
+  }));
+  const movements = [...new Map(rows.map((row) => [row.movement, row.movement_name])).entries()];
+  const available = new Set(rows.filter((row) => row.style === selection.style).map((row) => row.movement));
+  document.getElementById('movements').replaceChildren(...movements.map(([code, name]) => {
+    const button = document.createElement('button');
+    button.textContent = name ?? code;
+    button.disabled = !available.has(code);
+    button.setAttribute('aria-pressed', String(selection.movement === code));
+    button.onclick = () => { selection.movement = code; play(); };
+    return button;
+  }));
+}
+
+function renderStyles() {
+  const query = document.getElementById('search').value.toLowerCase();
+  const styles = [...new Map(rows.map((row) => [row.style, row.description])).entries()]
+    .filter(([name, description]) => `${name} ${description ?? ''}`.toLowerCase().includes(query));
+  document.getElementById('styles').replaceChildren(...styles.map(([name, description]) => {
+    const button = document.createElement('button');
+    button.setAttribute('aria-current', String(selection.style === name));
+    button.innerHTML = '<span></span><small></small>';
+    button.querySelector('span').textContent = name.replace(/([a-z])([A-Z])/g, '$1 $2');
+    button.querySelector('small').textContent = description ?? '';
+    button.onclick = () => {
+      selection.style = name;
+      renderStyles();
+      play();
+    };
+    return button;
+  }));
+}
+
+const text = await (await fetch(`${base}/metadata.jsonl`)).text();
+rows = text.split('\n').filter(Boolean).map((line) => JSON.parse(line)).filter((row) => row.style);
+const fromHash = rows.find((row) => row.id === location.hash.slice(1));
+selection.style = fromHash?.style ?? rows.find((row) => row.style === 'Neutral')?.style ?? rows[0]?.style;
+selection.movement = fromHash?.movement ?? 'FW';
+document.getElementById('search').oninput = renderStyles;
+renderStyles();
+play();
+
+const followed = new THREE.Vector3();
+renderer.setAnimationLoop(() => {
+  const delta = Math.min(clock.getDelta(), 0.1);
+  mixer?.update(delta);
+  if (followBone) {
+    followBone.getWorldPosition(followed);
+    // Follow the root along the ground; the orbit keeps its angle and distance.
+    const shift = new THREE.Vector3(followed.x - controls.target.x, 0, followed.z - controls.target.z);
+    controls.target.add(shift);
+    camera.position.add(shift);
+    controls.target.y += (followed.y * 0.9 - controls.target.y) * 0.1;
+  }
+  controls.update();
+  renderer.render(scene, camera);
+});
+</script>
+</body>
 </html>