| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>Agentic Space Factory</title> |
| <link rel="stylesheet" href="/custom-static/app.css" /> |
| </head> |
| <body> |
| <div class="app-shell"> |
| <header class="app-header"> |
| <div class="brand-lockup"> |
| <div class="brand-icon">🚀</div> |
| <div> |
| <h1>Agentic Space Factory</h1> |
| <p>Turn a Hugging Face model card into a private, testable Space.</p> |
| </div> |
| </div> |
| <div class="top-actions"> |
| <span class="bucket-pill"><span class="status-dot green"></span><span id="bucketLabel">Bucket: loading…</span></span> |
| <span class="bucket-pill" id="bucketStatusPill"><span class="status-dot" id="bucketStatusDot"></span><span id="bucketStatusText">Checking…</span></span> |
| <span class="user-chip" id="userChip">Sign in</span> |
| <a class="logout-link" id="logoutLink" href="/logout" hidden>Logout</a> |
| </div> |
| </header> |
|
|
| <nav class="top-tabs" aria-label="Primary workflow"> |
| <button class="nav-item active" data-view="build">New Build</button> |
| <button class="nav-item" data-view="progress">Live Progress</button> |
| <button class="nav-item" data-view="validate">Space Test</button> |
| </nav> |
|
|
| <main class="main"> |
| <section class="auth-panel" id="authPanel" hidden></section> |
| <section class="operation-status" id="operationStatus" hidden></section> |
|
|
| <section data-section="build" class="build-view"> |
| <div class="single-column"> |
| <section class="bucket-strip"> |
| <div> |
| <span class="eyebrow">Run storage</span> |
| <div class="bucket-source"><span class="status-dot" id="bucketInlineDot"></span><strong id="bucketInlineLabel">loading…</strong><span class="badge" id="bucketInlineStatus">Checking</span></div> |
| <p class="muted mini-copy">Runs, logs and artifacts stay in the connected user bucket.</p> |
| </div> |
| <div class="strip-actions"> |
| <button class="secondary" id="checkBucket">Check bucket</button> |
| <button class="secondary" id="createBucket">Create private bucket</button> |
| </div> |
| </section> |
|
|
| <section class="panel build-card hero-card"> |
| <div class="panel-title-row build-title-row"> |
| <div> |
| <span class="eyebrow">New Build</span> |
| <h2>Prepare a new private Space</h2> |
| </div> |
| <button class="secondary small" id="prepareNewBuild">Prepare new build</button> |
| </div> |
| <div class="build-mode-panel" id="buildModePanel"> |
| <strong>Preparing a new build</strong> |
| <p>This form always starts a fresh private Space build. Select a previous run in Live progress to inspect it without changing this form.</p> |
| </div> |
| <p class="muted">Generate a private Space with Pi, then validate it live. Hardware is ZeroGPU-first with fixed GPU fallback when available.</p> |
| <div class="form-grid compact-form"> |
| <label>Model card URL or model ID<input id="modelId" value="Tongyi-MAI/Z-Image-Turbo" /></label> |
| <label>Target Space name<input id="targetSpace" placeholder="space-factory-z-image-v1" /></label> |
| <label>Pi model<input id="piModel" value="Qwen/Qwen3-Coder-Next" /></label> |
| <label>Implementation mode<select id="implementationMode"><option>full-inference-gated</option><option>full-inference-attempt</option><option>safe-scaffold</option></select></label> |
| <label>Preferred hardware<select id="preferredHardware"><option>zero-a10g</option><option>l40sx1</option><option>a10g-large</option><option>cpu-basic</option></select></label> |
| <label>Fallback hardware<select id="fallbackHardware"><option>l40sx1</option><option>a10g-large</option><option>a100-large</option><option>h200</option></select></label> |
| <label>Expected output type<select id="buildExpectedOutput"><option>text</option><option selected>image</option><option>video</option><option>audio</option><option>any</option></select></label> |
| </div> |
| <div class="toggles stacked-toggles"> |
| <label><input id="tryZeroGpu" type="checkbox" checked /> <span><strong>Try ZeroGPU first</strong><small>Attempt free dynamic GPU before fixed hardware.</small></span></label> |
| <label><input id="allowFallback" type="checkbox" checked /> <span><strong>Allow fixed GPU fallback</strong><small>Use fallback hardware if ZeroGPU is unavailable.</small></span></label> |
| <label><input type="checkbox" checked disabled /> <span><strong>Private Space</strong><small>Generated Spaces remain private by default.</small></span></label> |
| </div> |
| <button class="primary" id="launchBuild" disabled>Launch new build</button> |
| <p class="muted build-gate" id="buildGateText">Checking your run bucket before enabling builds…</p> |
| </section> |
| </div> |
| </section> |
|
|
| <section data-section="progress" hidden> |
| <div class="dashboard-grid"> |
| <div class="workspace-column"> |
| <section class="progress-card" id="progressCard"> |
| <div class="progress-head"> |
| <div><span class="eyebrow">Live progress</span><strong id="progressTitle">Live job progress</strong><span class="badge running" id="progressStatus">Idle</span></div> |
| <strong id="progressPercent">0%</strong> |
| </div> |
| <div class="progress-bar"><div id="progressFill" style="width:0%"></div></div> |
| <div class="progress-meta compact-meta"> |
| <div><span>Current step</span><strong id="currentStep">No run selected</strong></div> |
| <div><span>Last update</span><strong id="lastEvent">Launch a build or select a run to start tracking.</strong></div> |
| <div><span>Elapsed</span><strong id="elapsed">—</strong></div> |
| <div><span>Hardware plan</span><strong id="hardwarePlan">ZeroGPU → fixed GPU fallback</strong></div> |
| <div><span>Last checked</span><strong id="lastPolled">—</strong></div> |
| </div> |
| <div class="timeline timeline-compact" id="timeline"></div> |
| <div class="manual-action" id="manualActionPanel" hidden> |
| <div> |
| <strong id="manualActionTitle">Manual hardware required</strong> |
| <p id="manualActionText">Automatic hardware selection was not available. Open Space settings, choose the recommended GPU, then run validation.</p> |
| </div> |
| <div class="manual-action-buttons"> |
| <a class="link-btn" id="manualOpenSettings" target="_blank">Open Space settings ↗</a> |
| <button class="secondary" id="manualGoValidate">Test after hardware change</button> |
| </div> |
| </div> |
| <div class="poll-warning" id="pollWarning" hidden>Progress polling is temporarily unavailable. The Job may still be running; retrying automatically…</div> |
| </section> |
|
|
| <div class="bottom-grid"> |
| <section class="panel"> |
| <div class="panel-head"><h2>Validation & metrics</h2><span class="badge neutral">Live</span></div> |
| <ul class="metric-list" id="metricsList"> |
| <li><span>/health</span><strong>pending</strong></li> |
| <li><span>/generate smoke test</span><strong>pending</strong></li> |
| <li><span>Latency</span><strong>—</strong></li> |
| <li><span>Recommended ZeroGPU duration</span><strong>—</strong></li> |
| </ul> |
| </section> |
| <section class="panel"> |
| <div class="panel-head"><h2>Latest events</h2><span class="badge live">Live</span></div> |
| <pre class="events" id="eventsPanel">No events yet.</pre> |
| </section> |
| </div> |
| </div> |
|
|
| <aside class="right-rail"> |
| <section class="panel run-explorer home-run-explorer"> |
| <div class="panel-head"> |
| <div><span class="eyebrow">Connected bucket</span><h2>Run Explorer</h2></div> |
| <button class="secondary small" id="refreshRunsHome">Refresh runs</button> |
| </div> |
| <div class="run-filters compact-filters" id="runFiltersHome"> |
| <button class="filter active" data-status="all">All</button> |
| <button class="filter" data-status="running">Running</button> |
| <button class="filter" data-status="full_inference_success">Success</button> |
| <button class="filter" data-status="manual_hardware_required">Manual</button> |
| <button class="filter" data-status="failed">Failed</button> |
| </div> |
| <div id="runsTableHome" class="runs-table compact-runs">Loading runs…</div> |
| <p class="muted tiny-note">Filters are instant. Refresh only reloads the bucket.</p> |
| </section> |
|
|
| <section class="panel run-details-home"> |
| <div class="panel-head"><h2>Run details</h2><span class="badge" id="homeRunDetailStatus">No run</span></div> |
| <div class="detail-grid home-detail-grid"> |
| <div><span>Run ID</span><strong id="detailRunId">—</strong></div> |
| <div><span>Job status</span><strong id="detailJobStatus">—</strong></div> |
| <div><span>Gate status</span><strong id="detailGateStatus">—</strong></div> |
| <div><span>Target Space</span><strong id="detailSpace">—</strong></div> |
| <div><span>Hardware</span><strong id="detailHardware">—</strong></div> |
| <div><span>Traces</span><strong id="detailTraces">—</strong></div> |
| </div> |
| <div class="quick-links"> |
| <a class="link-btn disabled" id="openJob" target="_blank">Job ↗</a> |
| <a class="link-btn disabled" id="openSpace" target="_blank">Space ↗</a> |
| <a class="link-btn disabled" id="openSettings" target="_blank">Settings ↗</a> |
| <a class="link-btn disabled" id="openArtifacts" target="_blank">Artifacts ↗</a> |
| </div> |
| <div class="report-home" id="homeReportPreview"><strong>No run selected</strong><p>Select a run to preview its report and actions.</p></div> |
| <button class="secondary full" id="homeValidateBtn" disabled>Test this Space</button> |
| </section> |
| </aside> |
| </div> |
| </section> |
|
|
| <section data-section="validate" hidden> |
| <div class="test-layout"> |
| <section class="panel large"> |
| <div class="panel-title-row"><div><span class="eyebrow">Space Test</span><h2>Validate existing Space</h2></div></div> |
| <p class="muted">Use this to test a generated Space after choosing hardware manually if needed. The validation Job calls the live Space and stores output artifacts + latency in your bucket.</p> |
| <div class="form-grid"> |
| <label>Target Space ID<input id="validateSpace" placeholder="alice/z-image-demo" /></label> |
| <label>API name<input id="validateApi" value="/generate" /></label> |
| <label>Expected output type<select id="expectedOutput"><option>image</option><option>video</option><option>audio</option><option>text</option><option>any</option></select></label> |
| <label>Timeout seconds<input id="validateTimeout" value="1800" /></label> |
| </div> |
| <label>Test args JSON<textarea id="testArgs" rows="4">["a cinematic robot cat astronaut, detailed, studio lighting"]</textarea></label> |
| <label>Test kwargs JSON<textarea id="testKwargs" rows="3">{}</textarea></label> |
| <button class="primary" id="launchValidate">Run smoke test</button> |
| </section> |
| <aside class="panel help-panel"> |
| <h2>Before testing</h2> |
| <p class="muted">If the Space needs GPU, open Settings, choose hardware, wait for rebuild, then run this smoke test.</p> |
| <a class="link-btn disabled" id="selectedOpenSettings" target="_blank">Open selected Settings ↗</a> |
| <div class="blockers" id="selectedBlockers" hidden></div> |
| </aside> |
| </div> |
| </section> |
|
|
| <section class="hidden-run-inspector" hidden> |
| <span id="selectedRunId">—</span><span id="selectedModelId">—</span><span id="selectedTargetSpace">—</span><span id="selectedHardware">—</span><span id="runDetailStatus">—</span> |
| <button id="selectedValidateBtn" disabled>Validate this Space</button> |
| <a id="selectedOpenJob" target="_blank"></a><a id="selectedOpenSpace" target="_blank"></a><a id="selectedOpenArtifacts" target="_blank"></a> |
| <ul id="selectedValidation"></ul><div id="artifactList"></div><pre id="reportPreview"></pre> |
| <span id="sidebarBucketDot" hidden></span> |
| <div id="runsTable" hidden></div> |
| <input id="runSearch" hidden /> |
| <button id="refreshRuns" hidden></button> |
| <div id="runFilters" hidden></div> |
| </section> |
| </main> |
| </div> |
| <script src="/custom-static/api.js"></script> |
| <script src="/custom-static/components.js"></script> |
| <script src="/custom-static/progress.js"></script> |
| <script src="/custom-static/runs.js"></script> |
| <script src="/custom-static/app.js"></script> |
| </body> |
| </html> |
|
|
