| <!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"> |
| <a class="user-chip" id="userChip" href="/oauth/huggingface/login">Sign in</a> |
| <button class="primary small" id="resumeLatestRun">Resume latest run</button> |
| <a class="logout-link" id="logoutLink" href="/logout" hidden>Logout</a> |
| </div> |
| </header> |
|
|
| <div class="toast-layer" id="toastLayer" aria-live="polite"><section class="operation-status floating-toast" id="operationStatus" hidden></section></div> |
|
|
| <main class="onepage-main"> |
| <section class="auth-panel" id="authPanel" hidden></section> |
|
|
| <section class="workspace-grid"> |
| <div class="left-stack"> |
| <section class="panel bucket-setup-panel" id="bucketSetupPanel"> |
| <div class="section-head compact"> |
| <div><span class="panel-icon">◈</span><h2>Run storage</h2></div> |
| <span class="badge" id="bucketInlineStatus">Checking</span> |
| </div> |
| <p class="muted">Runs, reports, generated files, traces, and validation outputs are written to your private bucket.</p> |
| <div class="bucket-source-line"><span class="status-dot" id="bucketInlineDot"></span><strong id="bucketInlineLabel">loading…</strong></div> |
| <div class="inline-actions bucket-actions"> |
| <button class="secondary small" id="checkBucket">Check bucket</button> |
| <button class="secondary small" id="createBucket">Create private bucket</button> |
| </div> |
| </section> |
|
|
| <section class="panel build-panel" id="newBuildCard"> |
| <div class="section-head compact"> |
| <div> |
| <span class="panel-icon">⌘</span> |
| <h2>New Build</h2> |
| </div> |
| </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>Pi model<select id="piModel"><option value="Qwen/Qwen3-Coder-Next" selected>Qwen/Qwen3-Coder-Next</option></select></label> |
| <label>Implementation mode<select id="implementationMode"> |
| <option value="full-inference-gated" selected>Strict real inference — validated Gradio app</option> |
| <option value="full-inference-attempt">Best-effort inference — permissive prototype</option> |
| <option value="safe-scaffold">Safe scaffold only — boots without inference guarantee</option> |
| </select></label> |
| </div> |
| <p class="muted cost-note">Pi uses Hugging Face Inference Providers for Qwen. Usage may consume paid inference credits.</p> |
| <div class="form-grid two-cols"> |
| <label>Preferred GPU<select id="preferredHardware"><option value="zero-a10g" selected>ZeroGPU</option></select></label> |
| <label>Fallback GPU<select id="fallbackHardware"><option value="a10g-large" selected>A10G Large</option><option value="l40sx1">L40S x1</option><option value="cpu-basic">CPU Basic</option><option value="a100-large">A100 Large</option><option value="h200">H200</option></select></label> |
| </div> |
| <div class="toggle-list compact-toggles"> |
| <label><span>Try ZeroGPU first</span><input id="tryZeroGpu" type="checkbox" checked /></label> |
| <label><span>Allow fixed GPU fallback</span><input id="allowFallback" type="checkbox" checked /></label> |
| </div> |
| <label>Expected output type<select id="buildExpectedOutput"><option value="text">Text</option><option value="image">Image</option><option value="video">Video</option><option value="audio">Audio</option><option value="any">Any</option></select></label> |
| </div> |
|
|
| <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> |
| </div> |
|
|
| <section class="panel active-run-panel" id="activeRunPanel"> |
| <div class="section-head compact"> |
| <div><span class="panel-icon">▷</span><h2>Active Run</h2></div> |
| <span class="badge neutral" id="progressStatus">Idle</span> |
| </div> |
|
|
| <div class="summary-meta active-meta"> |
| <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>Current step</span><strong id="currentStep">—</strong></div> |
| <div><span>Elapsed time</span><strong id="elapsed">—</strong></div> |
| </div> |
|
|
| <div class="active-run-actions active-run-cancel-only"> |
| <button class="secondary danger" id="cancelRun" disabled>Cancel Job</button> |
| </div> |
|
|
| <div class="progress-caption"><span>Overall progress</span><strong id="progressPercent">0%</strong></div> |
| <div class="progress-bar"><div id="progressFill" style="width:0%"></div></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> |
|
|
| <section class="mini-panel latest-events-card"> |
| <div class="card-title-row"> |
| <h4>Latest events</h4> |
| </div> |
| <div id="activityFeed" class="activity-feed"><div class="empty">No activity yet.</div></div> |
| </section> |
| </section> |
|
|
| <section class="panel runs-explorer-panel" id="runsExplorerPanel"> |
| <div class="section-head compact"> |
| <div><span class="panel-icon">☰</span><h2>Runs Explorer</h2></div> |
| </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> |
| <div id="runsPagination" class="runs-pagination"></div> |
|
|
| <section class="selected-run-card"> |
| <div class="section-head compact"> |
| <div><span class="panel-icon">▣</span><h3>Selected run</h3></div> |
| </div> |
| <div class="detail-grid selected-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><span>Model</span><strong id="selectedModelShort">—</strong></div> |
| <div><span>Mode</span><strong id="selectedMode">Gradio (Python)</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> |
| <div class="selected-actions-stack"> |
| <button class="secondary full" id="selectedValidateBtn" disabled>Prefill Space Test</button> |
| <button class="secondary danger full" id="deleteSelectedRun" disabled>Delete run from bucket</button> |
| </div> |
| <div class="blockers" id="selectedBlockers" hidden></div> |
| </section> |
| </section> |
| </section> |
|
|
| <section class="panel space-test-panel" id="spaceTestSection"> |
| <div class="space-test-grid"> |
| <div> |
| <div class="section-head compact"><div><span class="panel-icon">⚗</span><h2>Space Test</h2></div></div> |
| <div class="form-grid test-top-row"> |
| <label>Target Space ID<input id="validateSpace" placeholder="fffiloni/my-llama-31-8b-demo" /></label> |
| <label>API name<input id="validateApi" value="/predict" /></label> |
| <label>Expected output type<select id="expectedOutput"><option value="text">Text</option><option value="image">Image</option><option value="video">Video</option><option value="audio">Audio</option><option value="any">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="validation-grid"> |
| <div><span>Validation status</span><strong><span class="badge neutral" id="spaceTestStatus">Pending</span></strong></div> |
| <div><span>Latency</span><strong>—</strong></div> |
| <div><span>Validation run ID</span><strong id="spaceTestOutput">—</strong></div> |
| <div><span>Started at</span><strong id="lastPolled">—</strong></div> |
| <div><span>Verdict</span><strong id="spaceTestVerdict">pending</strong></div> |
| </div> |
| <button class="primary full" id="launchValidate">Launch validation</button> |
| </div> |
| </div> |
| </section> |
|
|
| <div class="support-elements" hidden> |
| <input id="runSearch" /> |
| <input id="runId" /> |
| <textarea id="buildGoal"></textarea> |
| <button id="refreshRuns"></button> |
| <div id="runsTableHome"></div> |
| <button id="refreshRunsHome"></button> |
| <button id="resumeLatestRunFull"></button> |
| <a id="runHeaderSpace" target="_blank"></a> |
| |
| <span id="progressTitle"></span><span id="lastEvent"></span><span id="hardwarePlan"></span> |
| <span id="detailJobStatus"></span><span id="detailGateStatus"></span><span id="detailHardware"></span><span id="detailTraces"></span><span id="homeRunDetailStatus"></span> |
| <span id="selectedModelIdHidden"></span><span id="selectedHardwareHidden"></span> |
| <ul id="selectedValidation"></ul><ul id="zeroGpuChecklist"></ul><div id="statusChips"></div> |
| <div id="diagBuildStatus"></div><div id="diagBuildStep"></div> |
| <div id="issueCard"><strong id="issueTitle"></strong><p id="issueDetail"></p></div> |
| <ul id="metricsList"></ul> |
| <pre id="reportPreview"></pre><div id="artifactList"></div> |
| </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> |
|
|
