| <!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 onepage-shell"> |
| <header class="topbar onepage-topbar"> |
| <div class="brand"> |
| <div class="brand-mark">✦</div> |
| <div> |
| <h1>Agentic Space Factory</h1> |
| <p>Build, inspect, and validate private Hugging Face Spaces.</p> |
| </div> |
| </div> |
| <div class="top-actions"> |
| <button class="bucket-pill" id="bucketStatusPill"><span class="status-dot" id="bucketStatusDot"></span><span id="bucketStatusText">Checking bucket…</span></button> |
| <span class="user-chip" id="userChip">Sign in</span> |
| <button class="primary small" id="resumeLatestRun">Resume latest run</button> |
| <a class="logout-link" id="logoutLink" href="/logout" hidden>Logout</a> |
| </div> |
| </header> |
|
|
| <main class="onepage-main"> |
| <section class="auth-panel" id="authPanel" hidden></section> |
| <section class="operation-status" id="operationStatus" hidden></section> |
|
|
| <section class="workspace-grid"> |
| <section class="panel build-panel" id="newBuildCard"> |
| <div class="section-head compact"> |
| <div> |
| <span class="eyebrow">New Build</span> |
| <h2>Launch a private Space</h2> |
| <p class="muted">Provide a model card or model ID. The factory creates a private Space, tries ZeroGPU first, and stores logs and artifacts in your private bucket.</p> |
| </div> |
| <button class="secondary small" id="prepareNewBuild">Reset form</button> |
| </div> |
|
|
| <section class="run-storage compact-storage"> |
| <div> |
| <span class="eyebrow">Run storage</span> |
| <strong><span class="status-dot" id="bucketInlineDot"></span><span id="bucketInlineLabel">loading…</span></strong> |
| <p class="muted">Runs, reports, generated files, traces, and validation outputs are written to your private bucket.</p> |
| </div> |
| <div class="inline-actions"> |
| <button class="secondary small" id="checkBucket">Check bucket</button> |
| <button class="secondary small" id="createBucket">Create private bucket</button> |
| </div> |
| <span class="badge" id="bucketInlineStatus">Checking</span> |
| </section> |
|
|
| <div class="build-mode-panel" id="buildModePanel"> |
| <strong>Preparing a new build</strong> |
| <p>This form launches new builds. Existing runs can be inspected in the Runs Explorer on the right.</p> |
| </div> |
|
|
| <div class="field-stack"> |
| <label>Model card URL or model ID<input id="modelId" value="meta-llama/Meta-Llama-3.1-8B-Instruct" /></label> |
| <label>Target Space name<input id="targetSpace" placeholder="my-llama-31-8b-demo" /></label> |
| <div class="form-grid two-cols"> |
| <label>Run ID<input id="runId" placeholder="auto-generated if empty" /></label> |
| <label>Expected output type<select id="buildExpectedOutput"><option>text</option><option>image</option><option>video</option><option>audio</option><option>any</option></select></label> |
| </div> |
| <label>Goal / notes<textarea id="buildGoal" rows="4" placeholder="What should this Space do? Any constraints or notes?"></textarea></label> |
| </div> |
|
|
| <details class="settings-accordion" open> |
| <summary>Settings</summary> |
| <div class="field-stack settings-stack"> |
| <label>Pi model<input id="piModel" value="Qwen/Qwen3-Coder-Next" /></label> |
| <label>Implementation mode<select id="implementationMode"><option selected>full-inference-gated</option><option>full-inference-attempt</option><option>safe-scaffold</option></select></label> |
| <div class="form-grid two-cols"> |
| <label>Preferred hardware<select id="preferredHardware"><option selected>zero-a10g</option><option>l40sx1</option><option>a10g-large</option><option>cpu-basic</option></select></label> |
| <label>Fallback hardware<select id="fallbackHardware"><option selected>l40sx1</option><option>a10g-large</option><option>a100-large</option><option>h200</option><option>cpu-basic</option></select></label> |
| </div> |
| <div class="toggle-list simple-toggles"> |
| <label><span>Try ZeroGPU first <small>Preferred for cost efficiency.</small></span><input id="tryZeroGpu" type="checkbox" checked /></label> |
| <label><span>Allow fixed GPU fallback <small>Use fallback if ZeroGPU is unavailable.</small></span><input id="allowFallback" type="checkbox" checked /></label> |
| </div> |
| </div> |
| </details> |
|
|
| <button class="primary full" id="launchBuild" disabled>Build private Space</button> |
| <p class="muted build-gate" id="buildGateText">Checking your run bucket before enabling builds…</p> |
|
|
| <section class="launch-result-card" id="launchResultPanel" hidden> |
| <div class="section-head compact"> |
| <div> |
| <span class="eyebrow">Launch result</span> |
| <h3>Build launched</h3> |
| </div> |
| </div> |
| <div class="detail-grid two-cols"> |
| <div><span>Run ID</span><strong id="launchRunId">—</strong></div> |
| <div><span>Status</span><strong id="launchStatus">—</strong></div> |
| <div><span>Target Space</span><strong id="launchSpace">—</strong></div> |
| <div><span>Hardware</span><strong id="launchHardware">—</strong></div> |
| </div> |
| <div class="quick-links"> |
| <a class="link-btn disabled" id="launchOpenJob" target="_blank">Job ↗</a> |
| <a class="link-btn disabled" id="launchOpenSpace" target="_blank">Space ↗</a> |
| <a class="link-btn disabled" id="launchOpenSettings" target="_blank">Settings ↗</a> |
| <a class="link-btn disabled" id="launchOpenArtifacts" target="_blank">Artifacts ↗</a> |
| </div> |
| </section> |
| </section> |
|
|
| <section class="panel active-run-panel" id="activeRunPanel"> |
| <div class="section-head compact"> |
| <div> |
| <span class="eyebrow">Active Run</span> |
| <h2 id="progressTitle">No run selected</h2> |
| <p class="muted" id="lastEvent">Select a run from the explorer or launch a new build.</p> |
| </div> |
| <span class="badge neutral" id="progressStatus">Idle</span> |
| </div> |
|
|
| <div class="summary-meta summary-meta-grid"> |
| <div><span>Run ID</span><strong id="detailRunId">—</strong></div> |
| <div><span>Target Space</span><strong id="detailSpace">—</strong></div> |
| <div><span>Model</span><strong id="selectedModelId">—</strong></div> |
| <div><span>Elapsed time</span><strong id="elapsed">—</strong></div> |
| <div><span>Current step</span><strong id="currentStep">—</strong></div> |
| <div><span>Last checked</span><strong id="lastPolled">—</strong></div> |
| </div> |
|
|
| <div class="quick-links"> |
| <a class="link-btn disabled" id="openJob" target="_blank">Open Job ↗</a> |
| <a class="link-btn disabled" id="openSpace" target="_blank">Open Space ↗</a> |
| <a class="link-btn disabled" id="openSettings" target="_blank">Open Settings ↗</a> |
| <a class="link-btn disabled" id="openArtifacts" target="_blank">Artifacts ↗</a> |
| </div> |
|
|
| <div class="progress-bar"><div id="progressFill" style="width:0%"></div></div> |
| <div class="progress-percent"><strong id="progressPercent">0%</strong><span id="hardwarePlan">ZeroGPU → fixed GPU fallback</span></div> |
| <div class="timeline" id="timeline"></div> |
|
|
| <div class="manual-action" id="manualActionPanel" hidden> |
| <div> |
| <strong id="manualActionTitle">Manual hardware required</strong> |
| <p id="manualActionText">Open Space settings, choose the recommended GPU, then run Space Test.</p> |
| </div> |
| <div class="inline-actions"> |
| <a class="link-btn" id="manualOpenSettings" target="_blank">Open Space settings ↗</a> |
| <button class="secondary small" id="manualGoValidate">Prefill Space Test</button> |
| </div> |
| </div> |
| <div class="poll-warning" id="pollWarning" hidden>Progress polling is temporarily unavailable. Retrying automatically…</div> |
|
|
| <div class="split-panels three-way"> |
| <section class="mini-panel"> |
| <h4>Latest events</h4> |
| <div id="activityFeed" class="activity-feed"><div class="empty">No activity yet.</div></div> |
| </section> |
| <section class="mini-panel"> |
| <h4>Diagnostics</h4> |
| <div class="diagnostic-list"> |
| <div><span>Status</span><strong id="detailJobStatus">—</strong></div> |
| <div><span>Gate</span><strong id="detailGateStatus">—</strong></div> |
| <div><span>Hardware</span><strong id="detailHardware">—</strong></div> |
| <div><span>Events</span><strong id="detailTraces">—</strong></div> |
| <div><span>Build status</span><strong id="diagBuildStatus">—</strong></div> |
| <div><span>Current phase</span><strong id="diagBuildStep">—</strong></div> |
| </div> |
| <div id="statusChips" class="status-chips"></div> |
| <div class="issue-card" id="issueCard" hidden><strong id="issueTitle">Issue</strong><p id="issueDetail">—</p></div> |
| <ul class="zero-rules" id="zeroGpuChecklist"></ul> |
| </section> |
| <section class="mini-panel report-card"> |
| <h4>Report preview</h4> |
| <div class="report-home" id="homeReportPreview"><strong>No run selected</strong><p>Select a run to preview its report.</p></div> |
| <button class="secondary small full" id="homeValidateBtn" disabled>Prefill Space Test</button> |
| </section> |
| </div> |
| </section> |
|
|
| <section class="panel runs-explorer-panel" id="runsExplorerPanel"> |
| <div class="section-head compact"> |
| <div> |
| <span class="eyebrow">Runs Explorer</span> |
| <h2>Browse runs</h2> |
| </div> |
| <button class="secondary small" id="refreshRuns">Refresh</button> |
| </div> |
|
|
| <div class="search-wrap"><input id="runSearchFull" placeholder="Search runs by ID, model, or space…" /><span>⌕</span></div> |
| <div class="run-filters" id="runFilters"> |
| <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> |
| <button class="filter" data-status="stale">Stale</button> |
| </div> |
| <div id="runsTable" class="runs-table">Loading runs…</div> |
|
|
| <section class="selected-run-card"> |
| <h3>Selected run</h3> |
| <div class="detail-grid two-cols compact-grid"> |
| <div><span>Run ID</span><strong id="selectedRunId">—</strong></div> |
| <div><span>Status</span><strong id="runDetailStatus">—</strong></div> |
| <div><span>Target Space</span><strong id="selectedTargetSpace">—</strong></div> |
| <div><span>Hardware</span><strong id="selectedHardware">—</strong></div> |
| </div> |
| <div class="quick-links selected-links-row"> |
| <a class="link-btn disabled" id="selectedOpenSpace" target="_blank">Space ↗</a> |
| <a class="link-btn disabled" id="selectedOpenJob" target="_blank">Job ↗</a> |
| <a class="link-btn disabled" id="selectedOpenArtifacts" target="_blank">Artifacts ↗</a> |
| <a class="link-btn disabled" id="selectedOpenSettings" target="_blank">Settings ↗</a> |
| </div> |
| <button class="secondary full" id="selectedValidateBtn" disabled>Prefill Space Test</button> |
| <div class="blockers" id="selectedBlockers" hidden></div> |
| </section> |
| </section> |
| </section> |
|
|
| <section class="bottom-grid"> |
| <section class="panel space-test-panel" id="spaceTestSection"> |
| <div class="section-head compact"> |
| <div> |
| <span class="eyebrow">Space Test</span> |
| <h2>Validate an existing Space</h2> |
| <p class="muted">Call the live Gradio API, verify output type, measure latency, and store artifacts.</p> |
| </div> |
| </div> |
| <div class="space-test-grid"> |
| <div class="field-stack"> |
| <label>Target Space ID<input id="validateSpace" placeholder="fffiloni/my-llama-31-8b-demo" /></label> |
| <div class="form-grid test-top-row"> |
| <label>API name<input id="validateApi" value="/predict" /></label> |
| <label>Expected output type<select id="expectedOutput"><option>text</option><option>image</option><option>video</option><option>audio</option><option>any</option></select></label> |
| <label>Timeout (s)<input id="validateTimeout" value="60" /></label> |
| </div> |
| <div class="editor-grid"> |
| <label>Test args (JSON)<textarea id="testArgs" rows="7">[ |
| { |
| "inputs": "Explain the concept of agentic AI in one paragraph." |
| } |
| ]</textarea></label> |
| <label>Test kwargs (JSON)<textarea id="testKwargs" rows="7">{ |
| "max_new_tokens": 128, |
| "temperature": 0.2 |
| }</textarea></label> |
| </div> |
| </div> |
| <div class="validation-result-card" id="spaceTestPreview"> |
| <div class="section-head compact"> |
| <div> |
| <span class="eyebrow">Validation result</span> |
| <h3>Latest validation</h3> |
| </div> |
| <span class="badge neutral" id="spaceTestStatus">Pending</span> |
| </div> |
| <div class="detail-grid two-cols compact-grid"> |
| <div><span>Status</span><strong id="spaceTestOutput">Waiting for API test</strong></div> |
| <div><span>Verdict</span><strong id="spaceTestVerdict">pending</strong></div> |
| </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> |
| <button class="primary full" id="launchValidate">Launch validation</button> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="panel artifact-report-panel"> |
| <div class="split-panels bottom-split"> |
| <section class="mini-panel"> |
| <h4>Raw events</h4> |
| <pre class="events compact-events" id="eventsPanel">No events yet.</pre> |
| </section> |
| <section class="mini-panel"> |
| <h4>Full report</h4> |
| <pre id="reportPreview" class="report-preview">No report selected.</pre> |
| </section> |
| <section class="mini-panel"> |
| <h4>Artifacts</h4> |
| <div id="artifactList" class="artifact-list">No artifacts indexed yet.</div> |
| </section> |
| </div> |
| </section> |
| </section> |
|
|
| <div class="support-elements" hidden> |
| <input id="runSearch" /> |
| <div id="runsTableHome"></div> |
| <button id="refreshRunsHome"></button> |
| <button id="resumeLatestRunFull"></button> |
| <a id="runHeaderSpace" target="_blank"></a> |
| <ul id="selectedValidation"></ul> |
| </div> |
| </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> |
|
|
