Spaces:
Running
Running
File size: 6,940 Bytes
31c7d49 c18dbb7 31c7d49 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="dark" />
<meta name="theme-color" content="#070a12" />
<meta name="description" content="Run the TripoSplat five-stage image-to-Gaussian pipeline locally with WebGPU." />
<title>TripoSplat WebGPU · Spatial Generation Lab</title>
<script type="module" crossorigin src="/assets/e2eLab-yJ57WL8T.js"></script>
<link rel="modulepreload" crossorigin href="/assets/modulepreload-polyfill-B5Qt9EMX.js">
<link rel="modulepreload" crossorigin href="/assets/preload-helper-BXl3LOEh.js">
<link rel="stylesheet" crossorigin href="/assets/e2eLab-tgRBtYNi.css">
</head>
<body>
<div class="ambient ambient-one" aria-hidden="true"></div>
<div class="ambient ambient-two" aria-hidden="true"></div>
<nav class="topbar" aria-label="Primary navigation">
<a class="brand" href="/e2e-lab.html" aria-label="TripoSplat WebGPU home">
<span class="brand-mark" aria-hidden="true"><span></span></span>
<span>TRIPOSPLAT <b>WEBGPU</b></span>
</a>
<div class="topbar-meta">
<span class="capability" id="webgpu-capability"><i></i>Checking WebGPU</span>
<a href="https://github.com/yosun/TripoSplatWebGPU" rel="noreferrer">GitHub <span aria-hidden="true">↗</span></a>
</div>
</nav>
<main class="app-shell">
<header class="hero">
<div class="eyebrow"><span>01</span> Browser-native spatial intelligence</div>
<h1>Turn pixels into<br /><em>spatial worlds.</em></h1>
<p>Run the complete five-stage TripoSplat pipeline on your GPU. Your prepared image stays in the browser—from neural encoding to an interactive Gaussian scene.</p>
<div class="pipeline" aria-label="Pipeline stages">
<span>DINOv3</span><i>→</i><span>Flux VAE</span><i>→</i><span>Flow</span><i>→</i><span>Octree</span><i>→</i><span>Gaussians</span>
</div>
</header>
<div class="workspace-grid">
<aside class="control-panel panel">
<div class="panel-heading">
<div><span class="section-index">CONTROL / 01</span><h2>Generation setup</h2></div>
<span class="local-badge">LOCAL</span>
</div>
<p class="panel-copy">Connect immutable model artifacts and deterministic fixtures. Nothing is uploaded by this interface.</p>
<div class="field-stack">
<label for="model-base"><span>Model base URL</span><small>Manifest and ONNX graph directory</small></label>
<input id="model-base" value="/models/triposplat/" autocomplete="url" spellcheck="false" />
<label for="cache"><span>Artifact cache</span><small>Persistent storage reduces repeat downloads</small></label>
<select id="cache">
<option value="none" selected>Ephemeral · release after each graph</option>
<option value="opfs">OPFS · persistent device cache</option>
<option value="cache-api">Cache API · persistent browser cache</option>
</select>
</div>
<details class="advanced">
<summary><span>Fixture endpoints</span><small>Advanced</small></summary>
<div class="advanced-fields">
<label for="prepared-image">Prepared image</label>
<input id="prepared-image" value="/fixtures/generated/dinov3-fp32/prepared.png" autocomplete="url" spellcheck="false" />
<label for="vae-noise">VAE epsilon</label>
<input id="vae-noise" value="/fixtures/generated/flux2-vae-fp32/epsilon.f32" autocomplete="url" spellcheck="false" />
<label for="flow-fixture">Flow fixture directory</label>
<input id="flow-fixture" value="/fixtures/generated/flow4-fp32-compute" autocomplete="url" spellcheck="false" />
</div>
</details>
<div class="run-actions">
<button class="run-button" id="run" type="button"><span>Run spatial generation</span><b aria-hidden="true">↗</b></button>
<button class="cancel-button" id="cancel" type="button" disabled>Cancel</button>
</div>
<div class="status-card">
<span class="status-pulse" aria-hidden="true"></span>
<div><small>PIPELINE STATUS</small><p role="status" data-testid="e2e-status">Ready. The default non-persistent mode verifies and stages one graph at a time.</p></div>
</div>
</aside>
<section class="viewer-panel panel" aria-labelledby="e2e-viewer-heading">
<div class="panel-heading viewer-heading">
<div><span class="section-index">VIEWPORT / 02</span><h2 id="e2e-viewer-heading">Gaussian scene</h2></div>
<p data-testid="e2e-viewer-status" data-viewer-state="waiting">Waiting for exported PLY</p>
</div>
<div id="e2e-preview-root">
<div class="viewer-placeholder" aria-hidden="true">
<div class="orbital"><span></span><i></i></div>
<p>Spatial viewport armed</p>
<small>Your generated scene will appear here</small>
</div>
</div>
<div class="viewer-footer" aria-hidden="true"><span>262K GAUSSIANS</span><span>BROWSER GPU</span><span>PLY + SPLAT</span></div>
</section>
</div>
<section class="notice" aria-label="Demo requirements">
<span>NOTE</span>
<p>This public interface is an engineering preview. A run requires a current desktop Chromium browser with WebGPU and separately hosted model artifacts with CORS and byte-range support.</p>
</section>
<pre class="error" data-testid="e2e-error" hidden></pre>
<pre data-testid="e2e-result" hidden></pre>
</main>
<footer><span>TRIPOSPLAT WEBGPU · 2027 INTERFACE</span><span>INFERENCE STAYS ON DEVICE</span></footer>
<script>
const publishBootstrapError = (value) => {
const target = document.querySelector('[data-testid="e2e-error"]')
if (!target) return
const error = value instanceof Error ? value : new Error(String(value))
target.textContent = `Bootstrap error: ${error.name}: ${error.message}`
target.hidden = false
}
const capability = document.querySelector('#webgpu-capability')
if (capability) {
const supported = 'gpu' in navigator
capability.classList.toggle('is-ready', supported)
capability.classList.toggle('is-missing', !supported)
capability.lastChild.textContent = supported ? 'WebGPU ready' : 'WebGPU unavailable'
}
window.addEventListener('error', (event) => publishBootstrapError(event.error ?? event.message))
window.addEventListener('unhandledrejection', (event) => publishBootstrapError(event.reason))
</script>
</body>
</html> |