Spaces:

moonlantern1
/

clipforge

Sleeping

App Files Files Community

moonlantern1 commited on 11 days ago

Commit

ed35a5c

verified ·

1 Parent(s): 4ce778e

Harden ClipForge progress polling UI

Browse files

Files changed (1) hide show

app.py +144 -14

app.py CHANGED Viewed

@@ -250,6 +250,8 @@ def _snapshot(job: Job) -> dict[str, object]:
         "nav_status": job.nav_status,
         "done": job.done,
         "error": job.error,
         "logs": "\n".join(job.logs[-MAX_LOG_LINES:]),
         "steps": job.steps,
         "clips": [clip.__dict__ for clip in job.clips.values()],
@@ -406,6 +408,31 @@ async def create_job(
     return JSONResponse(_snapshot(job))
 @app.post("/api/probe-upload")
 async def probe_upload(file: Annotated[UploadFile | None, File()] = None) -> JSONResponse:
     if file is None:
@@ -552,8 +579,16 @@ INDEX_HTML = r"""<!DOCTYPE html>
   .modal-actions { display:flex; align-items:center; gap:8px; }
   .modal-close, .modal-download { padding: 8px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 0.82rem; cursor: pointer; transition: all 0.15s; color:var(--ink); text-decoration:none; }
   .modal-close:hover, .modal-download:hover { background: var(--champagne); }
   .log-panel { display:none; margin-top:24px; background:var(--ink); color:var(--cream); border-radius:12px; padding:14px; font:12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; white-space:pre-wrap; max-height:240px; overflow:auto; text-align:left; }
-  @media (max-width: 600px) { nav { padding: 16px 20px; } .input-card { padding: 24px 20px; } #screen-processing { padding: 32px 16px 60px; } .pipeline { padding: 20px 16px; } .clips-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .regen-section { padding: 22px 18px; } .regen-btn { width: 100%; margin-left: 0; } .regen-row { flex-direction: column; align-items: flex-start; } }
   .thumb-1 { background: linear-gradient(135deg, #D4A96A 0%, #8B5E3C 100%); } .thumb-2 { background: linear-gradient(135deg, #7A9E8A 0%, #3D6650 100%); }
   .thumb-3 { background: linear-gradient(135deg, #9E8A7A 0%, #5C3E2E 100%); } .thumb-4 { background: linear-gradient(135deg, #8A7A9E 0%, #4A3866 100%); }
   .thumb-5 { background: linear-gradient(135deg, #9E9A7A 0%, #5C5820 100%); } .thumb-6 { background: linear-gradient(135deg, #C4856A 0%, #7A3020 100%); }
@@ -600,6 +635,16 @@ INDEX_HTML = r"""<!DOCTYPE html>
     <h2 class="processing-title">Your clips are being crafted</h2>
     <p class="processing-sub" id="processing-sub">Sit back - long videos can take a little while</p>
   </div>
   <div class="pipeline" id="pipeline">
     <div class="pipeline-step" id="step-0"><div class="step-icon">Up</div><div class="step-content"><div class="step-name">Uploading video <span class="step-pct" id="pct-0">0%</span></div><div class="progress-track"><div class="progress-fill" id="fill-0"></div></div></div></div>
     <div class="pipeline-step" id="step-1"><div class="step-icon">Text</div><div class="step-content"><div class="step-name">Generating transcript <span class="step-pct" id="pct-1"></span></div><div class="progress-track"><div class="progress-fill" id="fill-1"></div></div></div></div>
@@ -649,6 +694,44 @@ INDEX_HTML = r"""<!DOCTYPE html>
   let currentJobId = null;
   let renderedClips = [];
   const iconLabels = ['Up','Text','Cut','Film','Edit'];
   function switchMode(m) {
     currentMode = m;
@@ -718,12 +801,11 @@ INDEX_HTML = r"""<!DOCTYPE html>
       btn.disabled = true;
       btn.textContent = 'Starting...';
       const job = await createJob();
-      currentJobId = job.id;
       renderedClips = [];
       document.getElementById('clips-grid').innerHTML = '';
-      document.getElementById('screen-input').classList.remove('active');
-      document.getElementById('screen-processing').classList.add('active');
-      document.getElementById('nav-status').style.display = 'block';
       syncJob(job);
       pollJob(job.id);
     } catch (err) {
@@ -734,18 +816,43 @@ INDEX_HTML = r"""<!DOCTYPE html>
     }
   }
-  async function pollJob(id) {
     let done = false;
-    while (!done && currentJobId === id) {
-      await new Promise(r => setTimeout(r, 1400));
-      const res = await fetch(`/api/jobs/${id}`);
-      const job = await res.json();
-      syncJob(job);
-      done = job.done;
     }
   }
   function syncJob(job) {
     document.getElementById('nav-status').textContent = job.nav_status || 'Processing...';
     document.getElementById('processing-sub').textContent = job.error ? job.error : job.status;
     document.getElementById('log-panel').textContent = job.logs || '';
@@ -773,7 +880,7 @@ INDEX_HTML = r"""<!DOCTYPE html>
     }
     if (job.done) {
       document.getElementById('regen-section').style.display = 'block';
-      if (job.error) document.getElementById('log-panel').style.display = 'block';
     }
   }
@@ -829,13 +936,36 @@ INDEX_HTML = r"""<!DOCTYPE html>
     window.scrollTo({ top: 0, behavior: 'smooth' });
     try {
       const job = await createJob(prompt);
-      currentJobId = job.id;
       syncJob(job);
       pollJob(job.id);
     } catch (err) {
       alert(err.message || err);
     }
   }
 </script>
 </body>
 </html>"""

         "nav_status": job.nav_status,
         "done": job.done,
         "error": job.error,
+        "created_at": job.created_at,
+        "age_sec": max(0, int(time.time() - job.created_at)),
         "logs": "\n".join(job.logs[-MAX_LOG_LINES:]),
         "steps": job.steps,
         "clips": [clip.__dict__ for clip in job.clips.values()],
     return JSONResponse(_snapshot(job))
+@app.get("/api/jobs")
+def list_jobs() -> JSONResponse:
+    with JOBS_LOCK:
+        jobs = sorted(JOBS.values(), key=lambda item: item.created_at, reverse=True)[:10]
+        for job in jobs:
+            _publish_files(job)
+        return JSONResponse(
+            {
+                "jobs": [
+                    {
+                        "id": job.id,
+                        "status": job.status,
+                        "nav_status": job.nav_status,
+                        "done": job.done,
+                        "error": job.error,
+                        "created_at": job.created_at,
+                        "age_sec": max(0, int(time.time() - job.created_at)),
+                        "clip_count": len(job.clips),
+                    }
+                    for job in jobs
+                ]
+            }
+        )
 @app.post("/api/probe-upload")
 async def probe_upload(file: Annotated[UploadFile | None, File()] = None) -> JSONResponse:
     if file is None:
   .modal-actions { display:flex; align-items:center; gap:8px; }
   .modal-close, .modal-download { padding: 8px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 0.82rem; cursor: pointer; transition: all 0.15s; color:var(--ink); text-decoration:none; }
   .modal-close:hover, .modal-download:hover { background: var(--champagne); }
+  .job-status-card { margin: -18px 0 24px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; box-shadow: 0 2px 10px rgba(42,31,14,0.04); }
+  .job-status-main { display: flex; flex-direction: column; gap: 3px; text-align: left; min-width: 0; }
+  .job-status-main strong { font-size: 0.78rem; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
+  .job-status-main span { font-size: 0.75rem; color: var(--ink-muted); }
+  .job-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
+  .job-action-btn { padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--ink); font-family: 'DM Sans', sans-serif; font-size: 0.78rem; cursor: pointer; }
+  .job-action-btn:hover { background: var(--champagne); }
   .log-panel { display:none; margin-top:24px; background:var(--ink); color:var(--cream); border-radius:12px; padding:14px; font:12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; white-space:pre-wrap; max-height:240px; overflow:auto; text-align:left; }
+  .log-panel.open { display:block; }
+  @media (max-width: 600px) { nav { padding: 16px 20px; } .input-card { padding: 24px 20px; } #screen-processing { padding: 32px 16px 60px; } .pipeline { padding: 20px 16px; } .job-status-card { flex-direction: column; align-items: stretch; } .job-actions { justify-content: flex-start; } .clips-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .regen-section { padding: 22px 18px; } .regen-btn { width: 100%; margin-left: 0; } .regen-row { flex-direction: column; align-items: flex-start; } }
   .thumb-1 { background: linear-gradient(135deg, #D4A96A 0%, #8B5E3C 100%); } .thumb-2 { background: linear-gradient(135deg, #7A9E8A 0%, #3D6650 100%); }
   .thumb-3 { background: linear-gradient(135deg, #9E8A7A 0%, #5C3E2E 100%); } .thumb-4 { background: linear-gradient(135deg, #8A7A9E 0%, #4A3866 100%); }
   .thumb-5 { background: linear-gradient(135deg, #9E9A7A 0%, #5C5820 100%); } .thumb-6 { background: linear-gradient(135deg, #C4856A 0%, #7A3020 100%); }
     <h2 class="processing-title">Your clips are being crafted</h2>
     <p class="processing-sub" id="processing-sub">Sit back - long videos can take a little while</p>
   </div>
+  <div class="job-status-card">
+    <div class="job-status-main">
+      <strong id="job-id-label">Job pending</strong>
+      <span id="poll-status-label">Waiting for updates</span>
+    </div>
+    <div class="job-actions">
+      <button class="job-action-btn" onclick="manualReconnect()">Reconnect</button>
+      <button class="job-action-btn" onclick="toggleLogs()">Logs</button>
+    </div>
+  </div>
   <div class="pipeline" id="pipeline">
     <div class="pipeline-step" id="step-0"><div class="step-icon">Up</div><div class="step-content"><div class="step-name">Uploading video <span class="step-pct" id="pct-0">0%</span></div><div class="progress-track"><div class="progress-fill" id="fill-0"></div></div></div></div>
     <div class="pipeline-step" id="step-1"><div class="step-icon">Text</div><div class="step-content"><div class="step-name">Generating transcript <span class="step-pct" id="pct-1"></span></div><div class="progress-track"><div class="progress-fill" id="fill-1"></div></div></div></div>
   let currentJobId = null;
   let renderedClips = [];
   const iconLabels = ['Up','Text','Cut','Film','Edit'];
+  const JOB_STORAGE_KEY = 'clipforge_current_job_id';
+  let pollToken = 0;
+  let pollFailures = 0;
+  let lastJobSnapshot = null;
+  function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); }
+  function showProcessingScreen() {
+    document.getElementById('screen-input').classList.remove('active');
+    document.getElementById('screen-processing').classList.add('active');
+    document.getElementById('nav-status').style.display = 'block';
+  }
+  function setPollStatus(text) {
+    document.getElementById('poll-status-label').textContent = text;
+  }
+  function rememberJob(id) {
+    currentJobId = id;
+    try { localStorage.setItem(JOB_STORAGE_KEY, id); } catch (_) {}
+    document.getElementById('job-id-label').textContent = `Job ${id}`;
+  }
+  function forgetJob(id) {
+    if (!id || currentJobId === id) {
+      try { localStorage.removeItem(JOB_STORAGE_KEY); } catch (_) {}
+    }
+  }
+  function toggleLogs() {
+    document.getElementById('log-panel').classList.toggle('open');
+  }
+  function manualReconnect() {
+    if (currentJobId) {
+      pollJob(currentJobId, { immediate: true });
+    }
+  }
   function switchMode(m) {
     currentMode = m;
       btn.disabled = true;
       btn.textContent = 'Starting...';
       const job = await createJob();
+      rememberJob(job.id);
       renderedClips = [];
       document.getElementById('clips-grid').innerHTML = '';
+      showProcessingScreen();
+      setPollStatus('Connected - waiting for progress');
       syncJob(job);
       pollJob(job.id);
     } catch (err) {
     }
   }
+  async function pollJob(id, options = {}) {
+    const token = ++pollToken;
+    rememberJob(id);
+    showProcessingScreen();
+    if (options.immediate) setPollStatus('Reconnecting...');
     let done = false;
+    while (!done && currentJobId === id && token === pollToken) {
+      if (!options.immediate) await sleep(pollFailures ? Math.min(10000, 1800 + pollFailures * 1800) : 1400);
+      options.immediate = false;
+      try {
+        const res = await fetch(`/api/jobs/${id}?t=${Date.now()}`, { cache: 'no-store' });
+        if (!res.ok) {
+          if (res.status === 404) {
+            forgetJob(id);
+            currentJobId = null;
+            setPollStatus('Job not found - start a new upload');
+            break;
+          }
+          throw new Error(`Job refresh failed (${res.status})`);
+        }
+        const job = await res.json();
+        pollFailures = 0;
+        lastJobSnapshot = job;
+        syncJob(job);
+        done = Boolean(job.done);
+        setPollStatus(done ? 'Finished' : `Connected - updated ${new Date().toLocaleTimeString()}`);
+      } catch (err) {
+        pollFailures += 1;
+        setPollStatus(`Connection hiccup - retrying (${pollFailures})`);
+        if (lastJobSnapshot) syncJob(lastJobSnapshot);
+      }
     }
   }
   function syncJob(job) {
+    if (!job || !job.id) return;
+    document.getElementById('job-id-label').textContent = `Job ${job.id}`;
     document.getElementById('nav-status').textContent = job.nav_status || 'Processing...';
     document.getElementById('processing-sub').textContent = job.error ? job.error : job.status;
     document.getElementById('log-panel').textContent = job.logs || '';
     }
     if (job.done) {
       document.getElementById('regen-section').style.display = 'block';
+      if (job.error) document.getElementById('log-panel').classList.add('open');
     }
   }
     window.scrollTo({ top: 0, behavior: 'smooth' });
     try {
       const job = await createJob(prompt);
+      rememberJob(job.id);
+      setPollStatus('Connected - waiting for progress');
       syncJob(job);
       pollJob(job.id);
     } catch (err) {
       alert(err.message || err);
     }
   }
+  async function resumeStoredJob() {
+    let id = '';
+    try { id = localStorage.getItem(JOB_STORAGE_KEY) || ''; } catch (_) {}
+    if (id) {
+      setPollStatus('Resuming previous job...');
+      pollJob(id, { immediate: true });
+      return;
+    }
+    try {
+      const res = await fetch(`/api/jobs?t=${Date.now()}`, { cache: 'no-store' });
+      if (!res.ok) return;
+      const data = await res.json();
+      const active = (data.jobs || []).find(job => !job.done);
+      if (active && active.id) {
+        setPollStatus('Resuming active job...');
+        pollJob(active.id, { immediate: true });
+      }
+    } catch (_) {}
+  }
+  window.addEventListener('DOMContentLoaded', resumeStoredJob);
 </script>
 </body>
 </html>"""