Spaces:

fffiloni
/

agentic-space-factory-UI-public

Sleeping

App Files Files Community

fffiloni commited on Jun 3

Commit

ad15d48

verified ·

1 Parent(s): b20b865

Upload index.html

Browse files

Files changed (1) hide show

web/index.html +94 -100

web/index.html CHANGED Viewed

@@ -8,119 +8,108 @@
 </head>
 <body>
   <div class="app-shell">
-    <aside class="sidebar">
-      <div class="brand">
         <div class="brand-icon">🚀</div>
-        <div><strong>Agentic Space Factory</strong><span>Private Space builder</span></div>
-      </div>
-      <nav class="main-nav">
-        <button class="nav-item active" data-view="build">Run build</button>
-        <button class="nav-item" data-view="validate">Test Space</button>
-      </nav>
-      <div class="sidebar-note">
-        <strong>Workflow</strong>
-        <ol>
-          <li>Build a private Space from a model card.</li>
-          <li>Set hardware manually if needed.</li>
-          <li>Run a live smoke test.</li>
-        </ol>
-      </div>
-      <div class="storage-card">
-        <div><span class="status-dot" id="sidebarBucketDot"></span><strong>Run storage</strong></div>
-        <p>Runs, logs and artifacts stay in the connected user bucket.</p>
-        <button class="secondary" id="checkBucketSide">Check / Create bucket</button>
-      </div>
-    </aside>
-    <main class="main">
-      <header class="topbar">
         <div>
           <h1>Agentic Space Factory</h1>
           <p>Turn a Hugging Face model card into a private, testable Space.</p>
         </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>
-        </div>
-      </header>
       <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="dashboard-grid">
           <div class="workspace-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>
               </div>
-              <div class="strip-actions">
-                <button class="secondary" id="checkBucket">Check bucket</button>
-                <button class="secondary" id="createBucket">Create private bucket</button>
               </div>
-            </section>
-            <div class="primary-grid">
-              <section class="panel build-card">
-                <div class="panel-title-row build-title-row">
-                  <div>
-                    <span class="eyebrow">New build</span>
-                    <h2>Build from model card</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. Selecting a run on the right only changes the progress and detail panels.</p>
-                </div>
-                <p class="muted">Generate a private Gradio Space with Pi, then validate it live. Hardware is ZeroGPU-first with fixed GPU fallback.</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>
-              <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 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" 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>
             <div class="bottom-grid">
               <section class="panel">
@@ -153,7 +142,7 @@
                 <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">Run filters are instant. Refresh only reloads the bucket.</p>
             </section>
             <section class="panel run-details-home">
@@ -182,8 +171,8 @@
       <section data-section="validate" hidden>
         <div class="test-layout">
           <section class="panel large">
-            <div class="panel-title-row"><div><span class="eyebrow">Test Space</span><h2>Validate existing Space</h2></div></div>
-            <p class="muted">Use this after changing hardware manually. 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>
@@ -208,6 +197,11 @@
         <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>
       </section>
     </main>
   </div>

 </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">
                 <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">
       <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>
         <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>