File size: 20,954 Bytes
d4889d2
 
 
 
 
214cbbe
d4889d2
 
 
848a549
 
09aa484
736524a
d4889d2
 
848a549
d4889d2
ad15d48
 
7a210d1
ad15d48
 
 
d4889d2
0a20c1a
 
848a549
d4889d2
 
848a549
7a210d1
7c3d312
 
 
 
 
 
 
 
 
 
7a210d1
 
7c3d312
 
 
49166c3
7a210d1
 
 
848a549
7e1d728
736524a
 
ad15d48
7e1d728
 
848a549
c40901b
 
 
 
 
 
 
 
 
 
 
f820cf7
848a549
a378620
 
 
 
 
 
 
 
bbf5aa4
c40901b
 
 
bbf5aa4
ad15d48
c40901b
736524a
0a20c1a
c40901b
736524a
 
 
 
09aa484
736524a
 
09aa484
848a549
7e1d728
3f78d12
 
09aa484
ed8a04b
3f78d12
 
 
 
 
7e1d728
736524a
848a549
7e1d728
848a549
736524a
848a549
 
 
c40901b
dab40a2
 
 
a378620
848a549
736524a
7e1d728
d4889d2
7c3d312
 
 
 
 
 
 
 
887efe8
7c3d312
887efe8
736524a
848a549
05651a0
848a549
 
 
7e1d728
848a549
 
7e1d728
 
848a549
 
7e1d728
09aa484
7e1d728
736524a
 
848a549
281a27f
736524a
 
 
7c3d312
6e4c1bc
 
 
 
 
 
 
 
 
 
c40901b
 
 
 
 
 
 
 
 
 
 
 
edde694
7c3d312
 
edde694
7c3d312
 
edde694
7c3d312
 
f06446e
7e1d728
2ef87b0
3f78d12
2ef87b0
 
 
 
 
c40901b
2ef87b0
 
 
 
 
 
 
 
edde694
2ef87b0
 
 
 
 
 
3f78d12
2ef87b0
edde694
2ef87b0
 
7c3d312
edde694
7c3d312
 
 
 
 
 
 
 
 
2ef87b0
 
 
ed8a04b
2ef87b0
848a549
 
736524a
848a549
7e1d728
848a549
 
 
 
 
 
 
 
09aa484
848a549
7a210d1
848a549
ae87f13
7c3d312
ae87f13
 
7c3d312
ae87f13
 
7c3d312
7d769bd
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
848a549
27bc4c8
 
 
 
 
 
 
 
 
a378620
27bc4c8
 
 
 
 
 
 
 
 
a378620
27bc4c8
 
 
 
 
09aa484
2ef87b0
848a549
736524a
 
 
848a549
887efe8
09aa484
887efe8
edde694
 
736524a
 
 
 
 
7a210d1
848a549
d4889d2
 
 
 
 
 
 
 
 
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
<!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>
        <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 compact-storage" id="bucketSetupPanel">
            <div class="bucket-status-card">
              <div class="bucket-status-main">
                <span class="bucket-status-orb" id="bucketInlineOrb"><span class="status-dot" id="bucketInlineDot"></span></span>
                <div>
                  <div class="mini-kicker">Run storage</div>
                  <strong id="bucketInlineLabel">loading…</strong>
                  <p id="bucketFeedbackText">Checking private bucket access…</p>
                </div>
              </div>
              <span class="badge" id="bucketInlineStatus">Checking</span>
            </div>
            <div class="inline-actions bucket-actions compact">
              <button class="secondary small" id="checkBucket">Check</button>
              <button class="secondary small" id="createBucket">Create</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="Tongyi-MAI/Z-Image-Turbo" /></label>
            <section class="model-prescan-card" id="modelPreScanCard" aria-live="polite">
              <div class="model-prescan-head">
                <div><span class="mini-kicker">Model pre-scan</span><strong id="modelPreScanTitle">Not scanned yet</strong></div>
                <span class="badge neutral" id="modelPreScanBadge">Required</span>
              </div>
              <p class="muted" id="modelPreScanSummary">Run a fast metadata scan before launching a paid Job. It checks the model card guidance, runnable examples, Diffusers signals, files, safetensors, gated access and custom-code risk without downloading weights.</p>
              <div class="model-prescan-signals" id="modelPreScanSignals" hidden></div>
              <label class="model-risk-ack" id="modelRiskAckWrap" hidden><input id="modelRiskAck" type="checkbox" /> <span>I reviewed the risk signals and still want to launch.</span></label>
              <button class="secondary small" id="scanModel" type="button">Scan model</button>
            </section>
            <label>Target Space name <span class="optional-label">optional</span><input id="targetSpace" placeholder="z-image-turbo-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>
                  <option value="moonshotai/Kimi-K2-Instruct-0905">moonshotai/Kimi-K2-Instruct-0905</option>
                  <option value="zai-org/GLM-4.7">zai-org/GLM-4.7</option>
                  <option value="zai-org/GLM-4.5-Air">zai-org/GLM-4.5-Air</option>
                  <option value="deepseek-ai/DeepSeek-V3.2">deepseek-ai/DeepSeek-V3.2</option>
                  <option value="Qwen/Qwen3-Coder-480B-A35B-Instruct">Qwen/Qwen3-Coder-480B-A35B-Instruct</option>
                </select></label>
              <label>Implementation mode<select id="implementationMode">
                <option value="full-inference-gated" selected>Strict inference</option>
                <option value="full-inference-attempt">Best effort inference</option>
                <option value="safe-scaffold">Demo scaffold only</option>
              </select></label>
            </div>
            <p class="implementation-mode-help" id="implementationModeHelp">Strict inference requires a real working inference endpoint. The run fails if the generated Space only boots without producing a valid output.</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="t4-medium">T4 Medium</option><option value="cpu-basic">CPU Basic</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>
          </section>
        </div>

        <div class="center-stack">
          <div class="center-tabs" role="tablist" aria-label="Run workspace tabs">
            <button class="center-tab active" id="activeRunTab" type="button" role="tab" aria-selected="true" aria-controls="activeRunPanel" data-center-tab="active">Active Run</button>
            <button class="center-tab" id="spaceTestTab" type="button" role="tab" aria-selected="false" aria-controls="spaceTestSection" data-center-tab="validate">Space Test <span class="tab-status-dot" id="spaceTestTabDot" aria-hidden="true"></span></button>
          </div>
        <section class="panel active-run-panel center-tab-panel active" id="activeRunPanel" role="tabpanel" aria-labelledby="activeRunTab" data-center-panel="active">
          <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>Build goal</span><strong id="detailImplementationMode"></strong></div>
            <div><span>Target GPU</span><strong id="detailTargetGpu"></strong></div>
            <div><span>Fallback GPU</span><strong id="detailFallbackGpu"></strong></div>
            <div><span>Expected output</span><strong id="detailExpectedOutput"></strong></div>
            <div><span>Pi assistant</span><strong id="detailPiAssistant"></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" aria-label="Active run actions">
            <a class="link-btn disabled" id="activeOpenSpace" target="_blank">Space ↗</a>
            <a class="link-btn disabled" id="activeOpenSettings" target="_blank">Settings ↗</a>
            <a class="link-btn disabled" id="activeOpenJob" target="_blank">Job ↗</a>
            <a class="link-btn disabled" id="activeOpenArtifacts" target="_blank">Artifacts ↗</a>
            <button class="secondary small" id="activePrefillSpaceTest" disabled>Prefill Space Test</button>
            <button class="secondary danger small" id="deleteActiveRun" disabled>Delete run</button>
            <button class="secondary danger small" id="cancelRun" disabled>Cancel Job</button>
          </div>
          <div class="blockers" id="selectedBlockers" hidden></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-trace-note" id="timelineTraceNote" hidden></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>
              <span class="muted">Typed activity</span>
            </div>
            <div id="activityFeed" class="activity-feed"><div class="empty">No activity yet.</div></div>
          </section>

          <section class="mini-panel agent-recovery-card" id="agentRecoveryCard" aria-label="Agent recovery status" hidden>
            <div class="card-title-row">
              <h4>Agent recovery</h4>
              <span class="badge neutral" id="agentRecoveryBadge">Not needed</span>
            </div>
            <div id="agentRecoveryBody" class="agent-recovery-body">
              <div class="empty compact-empty">Recovery details appear when Pi diagnoses a build or runtime blockage.</div>
            </div>
          </section>

          <section class="mini-panel active-latency-card" id="activeLatencyCard" aria-label="Active run inference latency">
            <div class="card-title-row">
              <h4>Inference latency</h4>
              <span class="muted" id="activeLatencySource">measured when smoke test passes</span>
            </div>
            <div class="active-latency-grid">
              <div><span>Observed</span><strong id="activeLatencyValue"></strong></div>
              <div><span>ZeroGPU duration</span><strong id="activeZeroGpuDuration"></strong></div>
            </div>
            <p id="activeLatencyNote" class="latency-note">When available, the live smoke-test latency is used to recommend the `@spaces.GPU(duration=...)` value for ZeroGPU apps.</p>
          </section>

          <section class="mini-panel run-documents-card" id="runDocumentsCard" aria-label="Run traces document dock">
            <div class="card-title-row">
              <h4>Run traces</h4>
              <span class="muted">Document dock · source files</span>
            </div>
            <div id="runDocumentsDock" class="run-documents-dock">
              <div class="empty">Source traces and documents will appear as files are written to the bucket.</div>
            </div>
          </section>
</section>


      <section class="panel space-test-panel center-tab-panel" id="spaceTestSection" role="tabpanel" aria-labelledby="spaceTestTab" data-center-panel="validate" hidden>
        <div class="space-test-grid">
          <div>
            <div class="section-head compact"><div><span class="panel-icon"></span><h2>Space Test</h2></div></div>
            <p class="muted validation-help">Validation launches a separate validation run for an existing Space. It does not replace the current Active Run unless you select it from the Runs Explorer. Test kwargs are endpoint-specific; the validation Job inspects the Gradio API schema and ignores unsupported kwargs with a warning.</p>
            <div class="form-grid test-top-row">
              <label>Target Space ID<input id="validateSpace" placeholder="fffiloni/z-image-turbo-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 array)<textarea id="testArgs" rows="7">[
  "Explain the concept of agentic AI in one paragraph."
]</textarea></label>
              <label>Optional kwargs (JSON object)<textarea id="testKwargs" rows="7">{}</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 id="spaceTestLatency"></strong></div>
              <div><span>Validation run ID</span><strong id="spaceTestOutput"></strong></div>
              <div><span>Started at</span><strong id="validationStartedAt"></strong></div>
              <div><span>Verdict</span><strong id="spaceTestVerdict">pending</strong></div>
            </div>
            <div class="validation-endpoints-card">
              <div class="card-title-row"><h4>Gradio API endpoints</h4><span class="muted">discovered by Gradio client</span></div>
              <div id="spaceTestEndpoints" class="validation-endpoints"><div class="empty compact-empty">No Gradio endpoints discovered yet.</div></div>
            </div>
            <div class="validation-progress-caption"><span>Validation progress</span><strong id="spaceTestProgressPercent">0%</strong></div>
            <div class="validation-progress-bar"><div id="spaceTestProgressFill" class="validation-progress-fill" style="width:0%"></div></div>
            <div class="validation-timeline" id="spaceTestTimeline"><div class="empty">No validation selected yet.</div></div>
            <div class="validation-actions">
              <button class="primary full" id="launchValidate">Launch validation</button>
              <button class="secondary danger full" id="deleteValidationRun" disabled>Delete validation run</button>
            </div>
          </div>
        </div>
      </section>
        </div>

        <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="run-stats-card" id="runStatsPanel" aria-label="Aggregated run statistics">
            <div class="card-title-row">
              <h4>Run Stats</h4>
              <span class="badge neutral" id="runStatsBadge">No runs</span>
            </div>
            <div class="run-stats-list" id="runStatsList">
              <div class="empty">Run stats will appear after the first refresh.</div>
            </div>
          </section>

          <section class="eval-archive-panel" id="evalArchiveCard" hidden aria-label="Anonymous eval archive">
            <div class="card-title-row eval-archive-title-row">
              <div>
                <span class="mini-kicker">Eval archive</span>
                <h4 id="evalArchiveTitle">Checking…</h4>
              </div>
              <span class="badge neutral" id="evalArchiveStateBadge">Checking</span>
            </div>
            <p id="anonymousEvalText" class="eval-archive-summary">Anonymous project eval archive: checking…</p>
            <div class="eval-archive-actions" id="evalArchiveActions">
              <button class="secondary small eval-enable-button" id="enableEvalArchive" hidden>Enable</button>
              <button class="secondary small" id="verifyEvalArchive" hidden>Verify</button>
              <button class="secondary small danger" id="disableEvalArchive" hidden>Disable</button>
            </div>
          </section>


          <section class="panel billing-panel" id="billingPanel">
            <div class="section-head compact">
              <div><span class="panel-icon">¢</span><h2>Billing & compute</h2></div>
              <span class="badge neutral" id="billingStatusBadge">Check billing</span>
            </div>
            <div class="billing-warning-simple billing-cost-note" role="note">
              <strong>This can cost money.</strong>
              <p>Builds launch Hugging Face Jobs. Pi uses Hugging Face Inference Providers for Qwen and other selected assistant models, and usage may consume paid inference credits. Before running builds, open your Hugging Face Billing dashboard and make sure payment, quotas and spend limits are okay.</p>
            </div>
            <div class="billing-simple billing-compat" hidden aria-hidden="true">
              <span id="billingUsage">Dashboard only</span>
              <span>Payment readiness</span>
              <span>Pi assistant</span>
              <span>Build Job</span>
              <span>Generated Space</span>
              <span>Guardrail</span>
              <span>Hugging Face Inference Providers</span>
              <span>Pi uses Hugging Face Inference Providers for Qwen and other selected assistant models. Usage may consume paid inference credits.</span>
              <span>A100/H200</span>
              <span>Review spend and quotas</span>
            </div>
            <a class="link-btn small full" id="openBilling" href="https://huggingface.co/settings/billing" target="_blank">Open billing dashboard ↗</a>
          </section>
        </section>
      </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>
        <a id="runHeaderSpace" target="_blank"></a>
        
        <span id="progressTitle"></span><span id="lastEvent"></span><span id="lastPolled"></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>