fix: wire up real backend, /api/ prefix, blob download

backend/main.py

@@ -19,7 +19,7 @@ app = FastAPI()
 jobs: dict = {}
 
 
-@app.post("/process")
+@app.post("/api/process")
 async def process(
     model_files: list[UploadFile] = File(...),
     mapping_files: list[UploadFile] = File(...),
@@ -140,7 +140,7 @@ async def run_bootstrap(job_id, model_paths, mapping_paths, expr_path, species_p
         print(traceback.format_exc(), flush=True)
 
 
-@app.get("/progress/{job_id}")
+@app.get("/api/progress/{job_id}")
 async def progress_stream(job_id: str):
     async def event_stream():
         last_idx = 0
@@ -181,7 +181,7 @@ async def progress_stream(job_id: str):
     )
 
 
-@app.get("/download/{job_id}")
+@app.get("/api/download/{job_id}")
 async def download(job_id: str):
     job = jobs.get(job_id, {})
     zip_path = job.get("output_zip")

frontend/index.html

@@ -649,9 +649,9 @@ footer a:hover { color: var(--ink); }
           <div class="stat-label">Species processed</div>
         </div>
       </div>
-      <a class="btn-download" id="downloadBtn" href="#" download="geneExpr_bootstrapped.zip">
+      <button class="btn-download" id="downloadBtn" onclick="triggerDownload()">
         ⬇ Download Bootstrapped ZIP
-      </a>
+      </button>
     </div>
   </div>
 
@@ -716,6 +716,8 @@ function handleFiles(type, files) {
   el.addEventListener('drop',      () => el.style.borderColor = '');
 });
 
+let activeJobId = null;
+
 async function startJob() {
   if (!state.model.length)   { alert('Please upload at least one model file.'); return; }
   if (!state.mapping.length) { alert('Please upload at least one mapping file.'); return; }
@@ -726,30 +728,87 @@ async function startJob() {
   document.getElementById('progressSection').classList.remove('hidden');
   document.getElementById('resultsSection').classList.add('hidden');
   document.getElementById('logBox').innerHTML = '';
-
-  const steps = [
-    [10,  'info', 'Files received. Starting bootstrap…'],
-    [30,  'info', `Bootstrapping genes for ${state.model.map(f => f.name.split('_')[0]).join(', ')}…`],
-    [55,  '',     'Sampling from metabolic subsystems…'],
-    [80,  '',     'Writing output files…'],
-    [95,  '',     'Compressing ZIP archive…'],
-    [100, 'ok',   `Done! ${Number(document.getElementById('batchSlider').value).toLocaleString()} files generated.`],
-  ];
-
-  for (const [pct, cls, msg] of steps) {
-    await new Promise(r => setTimeout(r, 700));
-    document.getElementById('progressBar').style.width = pct + '%';
-    document.getElementById('progressPct').textContent = pct + '%';
-    document.getElementById('progressLabel').textContent = msg;
-    appendLog(msg, cls);
+  document.getElementById('progressBar').style.width = '0%';
+  document.getElementById('progressPct').textContent = '0%';
+  document.getElementById('progressLabel').textContent = 'Starting…';
+
+  // Build form data
+  const fd = new FormData();
+  state.model.forEach(f   => fd.append('model_files',   f));
+  state.mapping.forEach(f => fd.append('mapping_files', f));
+  fd.append('expr_file',   state.expr[0]);
+  fd.append('batch_count', document.getElementById('batchSlider').value);
+
+  // Submit job
+  let jobId;
+  try {
+    const res = await fetch('/api/process', { method: 'POST', body: fd });
+    if (!res.ok) throw new Error((await res.json()).detail || res.statusText);
+    jobId = (await res.json()).job_id;
+    activeJobId = jobId;
+    appendLog('Files received. Starting bootstrap…', 'info');
+  } catch (e) {
+    appendLog('Error: ' + e.message, 'err');
+    document.getElementById('runBtn').disabled = false;
+    return;
   }
 
-  await new Promise(r => setTimeout(r, 400));
-  document.getElementById('statFiles').textContent =
-    Number(document.getElementById('batchSlider').value).toLocaleString();
-  document.getElementById('statSpecies').textContent = state.model.length;
-  document.getElementById('resultsSection').classList.remove('hidden');
-  document.getElementById('runBtn').disabled = false;
+  // Stream progress via SSE
+  const sse = new EventSource(`/api/progress/${jobId}`);
+
+  sse.onmessage = e => {
+    const d = JSON.parse(e.data);
+
+    if (d.message) appendLog(d.message, d.type || '');
+
+    if (d.progress !== undefined) {
+      document.getElementById('progressBar').style.width = d.progress + '%';
+      document.getElementById('progressPct').textContent = d.progress + '%';
+      if (d.label) document.getElementById('progressLabel').textContent = d.label;
+    }
+
+    if (d.status === 'done') {
+      sse.close();
+      document.getElementById('statFiles').textContent    = (d.file_count   || '—').toLocaleString();
+      document.getElementById('statSpecies').textContent  =  d.species_count || '—';
+      document.getElementById('resultsSection').classList.remove('hidden');
+      document.getElementById('runBtn').disabled = false;
+      // Store job id for download
+      document.getElementById('downloadBtn').dataset.jobId = jobId;
+    }
+
+    if (d.status === 'error') {
+      sse.close();
+      appendLog('Fatal error: ' + d.error, 'err');
+      document.getElementById('runBtn').disabled = false;
+    }
+  };
+
+  sse.onerror = () => {
+    sse.close();
+    appendLog('Connection lost. Check logs.', 'err');
+    document.getElementById('runBtn').disabled = false;
+  };
+}
+
+async function triggerDownload() {
+  const jobId = document.getElementById('downloadBtn').dataset.jobId;
+  if (!jobId) return;
+  try {
+    const res = await fetch(`/api/download/${jobId}`);
+    if (!res.ok) throw new Error('Download failed');
+    const blob = await res.blob();
+    const url  = URL.createObjectURL(blob);
+    const a    = document.createElement('a');
+    a.href     = url;
+    a.download = 'geneExpr_bootstrapped.zip';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  } catch (e) {
+    alert('Download failed: ' + e.message);
+  }
 }
 
 function appendLog(text, cls = '') {