Spaces:

Theflame47
/

RunPodRun

Sleeping

App Files Files Community

Theflame47 commited on Nov 4, 2025

Commit

0bbbc1e

verified ·

1 Parent(s): 9dd3a51

Update Deployment_UI.py

Browse files

Files changed (1) hide show

Deployment_UI.py +227 -221

Deployment_UI.py CHANGED Viewed

@@ -1,4 +1,4 @@
-# Deployment_UI.py — UI-only (binds to /api/* provided by Deployment_UI_BE.py)
 from fastapi import APIRouter
 from fastapi.responses import HTMLResponse
@@ -6,239 +6,245 @@ router = APIRouter()
 @router.get("/Deployment_UI", response_class=HTMLResponse)
 def deployment_ui_page():
-    html_head = """
 <!doctype html>
-<html><head><meta charset="utf-8"/><title>Deployment UI</title>
-<style>
-  body { font-family: system-ui, sans-serif; margin: 24px; display: flex; flex-direction: column; height: 90vh; }
-  a.button { display:inline-block; padding:8px 14px; margin-bottom:10px; border:1px solid #ccc; border-radius:6px; text-decoration:none; color:#000; background:#f7f7f7; }
-  a.button:hover { background:#eee; }
-  #chat-window { flex:1; border:1px solid #ccc; border-radius:8px; padding:12px; overflow-y:auto; background:#fafafa; margin-bottom:10px; }
-  #input-area { display:flex; gap:8px; margin-bottom:10px; }
-  #user-input { flex:1; padding:10px; border:1px solid #ccc; border-radius:8px; }
-  #send-btn { padding:10px 16px; border:none; border-radius:8px; background:#0078d7; color:#fff; cursor:pointer; }
-  #send-btn:hover { background:#005fa3; }
-  #control-bar { display:flex; gap:8px; margin:0 0 10px; }
-  #start-btn, #stop-btn, #endall-btn { padding:8px 14px; border:1px solid #ccc; border-radius:8px; background:#f7f7f7; cursor:pointer; }
-  #start-btn:hover, #stop-btn:hover, #endall-btn:hover { background:#eee; }
-  #log-toggle { cursor:pointer; font-size:14px; color:#0078d7; text-decoration:underline; margin-bottom:6px; align-self:flex-start; }
-  #logs { border:1px dashed #bbb; border-radius:8px; padding:10px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; background:#fff; max-height:220px; overflow-y:auto; transition:max-height .25s ease, opacity .25s ease; opacity:1; }
-  #logs.collapsed { max-height:0; padding:0; opacity:0; overflow:hidden; border:none; }
-  .log-line { margin:0 0 6px; white-space:pre-wrap; }
-  .log-raw { color:#333; } .log-ok { color:#2d7c2d; } .log-err { color:#9d1c1c; }
-  #results { border:1px solid #ddd; border-radius:8px; padding:10px; background:#fff; margin-top:10px; }
-  .result { margin:8px 0; }
-  .thumb { max-width: 420px; border:1px solid #ccc; border-radius:6px; }
-  .meta { font-size:12px; color:#555; margin-top:4px; }
-  .download { display:inline-block; margin-top:6px; }
-  /* loading mask */
-  #boot-mask{position:fixed;inset:0;background:rgba(255,255,255,.85);display:none;
-    align-items:center;justify-content:center;flex-direction:column;z-index:9999}
-  #boot-msg{margin-top:12px;color:#000;font-weight:600}
-  .spinner{width:36px;height:36px;border:3px solid #ddd;border-top-color:#0078d7;border-radius:50%;
-    animation:spin 1s linear infinite}
-  @keyframes spin{to{transform:rotate(360deg)}}
-</style>
 </head>
 <body>
-  <a href="/trythis" class="button">← Back</a>
-  <div id="chat-window"></div>
-  <div id="input-area">
-    <input type="text" id="user-input" placeholder="Describe an image to generate…" />
-    <button id="send-btn">Send</button>
-  </div>
-  <div id="control-bar">
-    <button id="start-btn">Create inst.</button>
-    <button id="stop-btn">Stop</button>
-    <button id="endall-btn">End All</button>
   </div>
-  <div id="log-toggle">Hide Logs</div>
-  <div id="logs" aria-live="polite"></div>
-  <div id="results"></div>
-  <div id="boot-mask" aria-live="polite" role="status">
-    <div class="spinner"></div>
-    <div id="boot-msg">Starting…</div>
   </div>
 <script>
-"""
-    html_tail = """
-  const logs = document.getElementById('logs');
-  const toggleBtn = document.getElementById('log-toggle');
-  const startBtn = document.getElementById('start-btn');
-  const stopBtn = document.getElementById('stop-btn');
-  const endAllBtn = document.getElementById('endall-btn');
-  const sendBtn = document.getElementById('send-btn');
-  const userInput = document.getElementById('user-input');
-  const results = document.getElementById('results');
-  const chat = document.getElementById('chat-window');
-  const bootMask = document.getElementById('boot-mask');
-  const bootMsg  = document.getElementById('boot-msg');
-  let running = false, ready = false;
-  let MODEL_BASE = null, PREDICT_ROUTE = null;
-  // NEW: auto-ingest blob from FE query param on page load
-  (async () => {
-    try {
-      const u = new URL(window.location.href);
-      const blobUrl = u.searchParams.get('blob_url') || '/modelblob.json';
-      const r = await fetch(`/api/ingest/from_landing?blob_url=${encodeURIComponent(blobUrl)}`, { method: 'POST' });
-      const t = await r.text();
-      console.log('ingest-from-landing', r.status, t.slice(0,200));
-    } catch (e) {
-      console.warn('ingest bootstrap failed:', e);
-    }
-  })();
-  function showBoot(msg){ bootMsg.textContent = msg || 'Starting…'; bootMask.style.display = 'flex'; }
-  function setBoot(msg){  bootMsg.textContent = msg || 'Working…'; }
-  function hideBoot(){    bootMask.style.display = 'none'; }
-  function log(msg, cls='log-raw') {
-    const line = document.createElement('div');
-    line.className = 'log-line ' + cls;
-    line.textContent = String(msg);
-    logs.appendChild(line);
-    logs.scrollTop = logs.scrollHeight;
-  }
-  toggleBtn.addEventListener('click', () => {
-    const collapsed = logs.classList.toggle('collapsed');
-    toggleBtn.textContent = collapsed ? "Show Logs" : "Hide Logs";
-  });
-  async function post(path, payload) {
-    const r = await fetch(path, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(payload || {}) });
-    const text = await r.text();
-    log(text, r.ok ? 'log-ok' : 'log-err');
-    try { return { ok: r.ok, json: JSON.parse(text) }; } catch { return { ok: r.ok, json: { _raw: text } }; }
-  }
-  async function del(path) {
-    const r = await fetch(path, { method: 'DELETE' });
-    const text = await r.text();
-    log(text, r.ok ? 'log-ok' : 'log-err');
-    try { return { ok: r.ok, json: JSON.parse(text) }; } catch { return { ok: r.ok, json: { _raw: text } }; }
-  }
-  // create + wait for true readiness (isReady)
-  async function begin() {
-    if (running) return;
-    running = true; ready = false;
-    showBoot('Creating instance…');
-    const create = await post('/api/compute/create_instance');
-    if (!create.ok) { running = false; hideBoot(); return; }
-    const ok = await ensureReady(true);
-    hideBoot();
-  }
-  async function stopOnce() {
-    await del('/api/compute/delete_instance');
-    hideBoot(); setBoot(''); ready = false; running = false;
-  }
-  async function endAll() {
-    await stopOnce();
-    MODEL_BASE = null; PREDICT_ROUTE = null;
   }
-  function appendResult(job_id, b64, timings) {
-    const div = document.createElement('div'); div.className = 'result';
-    const img = document.createElement('img'); img.className = 'thumb'; img.src = 'data:image/png;base64,' + b64;
-    const a = document.createElement('a'); a.className = 'download'; a.textContent = 'Download'; a.href = img.src; a.download = `job_${job_id}.png`;
-    const meta = document.createElement('div'); meta.className = 'meta'; meta.textContent = `job ${job_id} | ${JSON.stringify(timings || {})}`;
-    div.append(img, document.createTextNode(' '), a, meta); results.prepend(div);
   }
-  // chat helpers
-  function escapeHtml(s){ return String(s).replace(/[&<>"']/g, m => ({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' }[m])); }
-  function addBlock(sender, html) {
-    const wrap = document.createElement('div');
-    wrap.style.margin = '8px 0';
-    wrap.innerHTML = `<div class="meta"><strong>${sender}:</strong></div><div>${html}</div>`;
-    chat.appendChild(wrap);
-    chat.scrollTop = chat.scrollHeight;
-    return wrap;
   }
-  function addUser(text)   { return addBlock('You',  `<div>${escapeHtml(text)}</div>`); }
-  function addModel(text)  { return addBlock('Model', `<div>${escapeHtml(text)}</div>`); }
-  function addModelImg(b64){
-    const wrap = addBlock('Model', '');
-    const img = document.createElement('img');
-    img.className = 'thumb';
-    img.src = 'data:image/png;base64,' + b64;
-    wrap.lastElementChild.appendChild(img);
-    return wrap;
   }
-  function addLoader() {
-    const wrap = addBlock('Model', `<div id="spinner" style="display:inline-block">Loading…</div>`);
-    return wrap;
   }
-  function looksBase64(s){ return /^[A-Za-z0-9+/=\\s]+$/.test(s||'') && String(s||'').length > 100; }
-  // poll for true readiness provided by BE via cachedState.isReady
-  async function ensureReady(verbose=false) {
-    for (let i = 0; i < 60; i++) {
-      const r = await fetch('/api/compute/wait_instance');
-      const j = await r.json();
-      const cs = j.cachedState || {};
-      const status = (cs.status || '').toUpperCase();
-      if (verbose) {
-        if (cs.isReady === true) setBoot('Ready');
-        else if (status === 'RUNNING' && cs.base) setBoot('Warming model…');
-        else setBoot(`Status: ${status || '…'}`);
-      }
-      if (cs.base && cs.predictRoute && cs.isReady === true) {
-        MODEL_BASE = cs.base;
-        PREDICT_ROUTE = cs.predictRoute.startsWith('/') ? cs.predictRoute : `/${cs.predictRoute}`;
-        log(`PROMPT_ENDPOINT ${MODEL_BASE}${PREDICT_ROUTE}`, 'log-ok');
-        ready = true;
-        return true;
-      }
-      log(`READY_POLL base=${cs.base ? 'yes' : 'no'} route=${cs.predictRoute || ''} isReady=${cs.isReady === true} status=${status}`, 'log-raw');
-      await new Promise(res => setTimeout(res, 1000));
-    }
-    ready = false;
-    return false;
   }
-  // backend hop for prompts
-  async function sendViaBackend(prompt) {
-    const r = await fetch('/api/middleware/infer', {
-      method: 'POST',
-      headers: { 'content-type': 'application/json' },
-      body: JSON.stringify({ prompt })
-    });
-    const text = await r.text();
-    log(`POST /api/middleware/infer → ${r.status}`, r.ok ? 'log-ok' : 'log-err');
-    try { return { ok: r.ok, json: JSON.parse(text) }; } catch { return { ok: r.ok, json: { _raw: text } }; }
   }
-  async function sendMessage() {
-    const prompt = (userInput.value || '').trim();
-    if (!prompt) return;
-    if (!ready) { addModel('Instance not ready yet. Try Start, or wait a moment.'); return; }
-    addUser(prompt);
-    const loader = addLoader();
-    userInput.disabled = true;
-    try {
-      const { ok, json } = await sendViaBackend(prompt);
-      loader.remove();
-      if (!ok && json?.error) { addModel(`Error: ${json.error}`); return; }
-      if (json?.image_b64) {
-        addModelImg(json.image_b64);
-        if (json.timings) appendResult(String(Date.now()), json.image_b64, json.timings);
-      } else if (typeof json?.output === 'string' && looksBase64(json.output)) {
-        addModelImg(json.output);
-      } else if (typeof json?.output === 'string') {
-        addModel(json.output);
-      } else if (json?._raw) {
-        addModel(json._raw);
-      } else {
-        addModel(JSON.stringify(json || {}, null, 2));
-      }
-    } catch (e) {
-      loader.remove();
-      addModel(`Error: ${String(e)}`);
-    } finally {
-      userInput.disabled = false; userInput.value = '';
-      userInput.focus();
-    }
   }
-  document.getElementById('send-btn').addEventListener('click', sendMessage);
-  document.getElementById('user-input').addEventListener('keypress', (e) => { if (e.key === 'Enter') { e.preventDefault(); sendMessage(); } });
-  document.getElementById('start-btn').addEventListener('click', begin);
-  document.getElementById('stop-btn').addEventListener('click', stopOnce);
-  document.getElementById('endall-btn').addEventListener('click', endAll);
-  (function init(){})();
 </script>
-</body></html>
 """
-    return HTMLResponse(content=html_head + html_tail)

+# Deployment_UI.py — FE page with explicit Blob load/preview + ingest
 from fastapi import APIRouter
 from fastapi.responses import HTMLResponse
 @router.get("/Deployment_UI", response_class=HTMLResponse)
 def deployment_ui_page():
+    html = """
 <!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8"/>
+  <title>Deployment UI</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1"/>
+  <style>
+    :root { --gap: 12px; --pad: 12px; --border: 1px solid #ddd; --radius: 10px; }
+    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 20px; color: #111; }
+    h1 { margin: 0 0 6px; font-size: 20px; }
+    .row { display: flex; gap: var(--gap); flex-wrap: wrap; }
+    .col { flex: 1 1 360px; min-width: 320px; }
+    .card { border: var(--border); border-radius: var(--radius); padding: var(--pad); background: #fff; }
+    .btn { border: 1px solid #ccc; background: #f7f7f7; padding: 8px 12px; border-radius: 8px; cursor: pointer; }
+    .btn:hover { background: #eee; }
+    .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
+    input[type="text"] { width: 100%; padding: 8px; border: var(--border); border-radius: 8px; }
+    pre { white-space: pre-wrap; word-break: break-word; background: #fafafa; border: var(--border); border-radius: 8px; padding: 8px; max-height: 360px; overflow: auto; }
+    .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
+    .muted { color: #666; }
+    .ok { color: #0a7f2e; }
+    .err { color: #9b1c1c; }
+    .kvs { font-size: 13px; }
+    .line { display:flex; gap:8px; align-items:center; margin: 6px 0; }
+    .small { font-size: 12px; }
+  </style>
 </head>
 <body>
+  <h1>Deployment UI</h1>
+  <div class="row">
+    <div class="col">
+      <div class="card">
+        <div class="line">
+          <label for="blobUrl"><strong>Blob URL</strong></label>
+          <span class="muted small">(defaults to <code class="mono">/modelblob.json</code>)</span>
+        </div>
+        <input id="blobUrl" type="text" placeholder="/modelblob.json"/>
+        <div class="line">
+          <button id="btnLoadBlob" class="btn">Load Blob</button>
+          <button id="btnIngest" class="btn" disabled>Ingest → BE</button>
+          <span id="blobStatus" class="small muted"></span>
+        </div>
+        <pre id="blobPreview" class="mono muted">Blob not loaded.</pre>
+      </div>
+    </div>
+    <div class="col">
+      <div class="card">
+        <div class="line"><strong>Actions</strong></div>
+        <div class="line">
+          <button id="btnCreate" class="btn" disabled>Create Instance</button>
+          <button id="btnStart" class="btn" disabled>Start</button>
+          <button id="btnWait" class="btn" disabled>Wait</button>
+        </div>
+        <div class="line">
+          <button id="btnStop" class="btn" disabled>Stop</button>
+          <button id="btnEndAll" class="btn" disabled>End All</button>
+        </div>
+        <div class="kvs mono" id="stateKvs"></div>
+      </div>
+    </div>
   </div>
+  <div class="row" style="margin-top:12px;">
+    <div class="col">
+      <div class="card">
+        <div class="line"><strong>Logs</strong> <span class="muted small">(key responses)</span></div>
+        <pre id="logs" class="mono"></pre>
+      </div>
+    </div>
   </div>
 <script>
+const $ = (id) => document.getElementById(id);
+const logsEl = $("logs");
+const blobPreviewEl = $("blobPreview");
+const blobStatusEl = $("blobStatus");
+const stateKvsEl = $("stateKvs");
+let cachedBlob = null;
+let cachedPodId = null;
+function logLine(s, cls="") {
+  const at = new Date().toLocaleTimeString();
+  const line = `[${at}] ${s}\\n`;
+  logsEl.textContent += line;
+  logsEl.scrollTop = logsEl.scrollHeight;
+}
+function setActionsEnabled(enabled) {
+  $("btnCreate").disabled = !enabled;
+  $("btnStart").disabled  = !enabled || !cachedPodId;
+  $("btnWait").disabled   = !enabled || !cachedPodId;
+  $("btnStop").disabled   = !enabled || !cachedPodId;
+  $("btnEndAll").disabled = !enabled || !cachedPodId;
+}
+function updateStateKvs(obj) {
+  const st = obj || {};
+  const cs = (st.cachedState || {});
+  const kvs = [
+    ["podId", cs.podId || ""],
+    ["status", cs.status || ""],
+    ["ip", cs.ip || ""],
+    ["port", cs.port || ""],
+    ["predictRoute", cs.predictRoute || ""],
+    ["base", cs.base || ""],
+  ];
+  stateKvsEl.innerHTML = kvs.map(([k,v]) => `<div><strong>${k}</strong>: <span class="mono">${String(v)}</span></div>`).join("");
+  if (cs.podId) cachedPodId = cs.podId;
+  setActionsEnabled(true);
+}
+async function fetchJSON(url, opts={}) {
+  const r = await fetch(url, opts);
+  const ct = r.headers.get("content-type") || "";
+  if (!ct.includes("application/json")) {
+    const t = await r.text();
+    throw new Error(`Non-JSON response ${r.status}: ${t.slice(0,200)}`);
   }
+  const j = await r.json();
+  if (!r.ok) throw new Error(JSON.stringify(j).slice(0,200));
+  return j;
+}
+function pretty(obj) {
+  try { return JSON.stringify(obj, null, 2); } catch { return String(obj); }
+}
+$("btnLoadBlob").addEventListener("click", async () => {
+  const url = ($("blobUrl").value || "/modelblob.json").trim();
+  blobStatusEl.textContent = "Loading…";
+  try {
+    const j = await fetchJSON(url, { method: "GET" });
+    cachedBlob = j;
+    blobPreviewEl.textContent = pretty(j);
+    blobPreviewEl.classList.remove("muted");
+    blobStatusEl.textContent = "Blob loaded";
+    $("btnIngest").disabled = false;
+    logLine(`BLOB_LOADED from ${url}`);
+  } catch (e) {
+    blobStatusEl.textContent = "Load failed";
+    blobPreviewEl.textContent = String(e.message || e);
+    blobPreviewEl.classList.remove("muted");
+    $("btnIngest").disabled = true;
+    logLine(`BLOB_LOAD_ERROR ${e.message || e}`, "err");
   }
+});
+$("btnIngest").addEventListener("click", async () => {
+  const url = ($("blobUrl").value || "/modelblob.json").trim();
+  blobStatusEl.textContent = "Ingesting…";
+  try {
+    const j = await fetchJSON(`/api/ingest/from_landing?blob_url=${encodeURIComponent(url)}`, { method: "POST" });
+    blobStatusEl.textContent = `Ingested (${j.source || url})`;
+    $("btnCreate").disabled = false;
+    logLine(`BLOB_INGEST_OK source=${j.source || url}`);
+  } catch (e) {
+    blobStatusEl.textContent = "Ingest failed";
+    logLine(`BLOB_INGEST_ERROR ${e.message || e}`, "err");
   }
+});
+$("btnCreate").addEventListener("click", async () => {
+  setActionsEnabled(false);
+  logLine("CREATE → /api/compute/create_instance");
+  try {
+    const j = await fetchJSON("/api/compute/create_instance", { method: "POST", headers: { "Content-Type": "application/json" }, body: "{}" });
+    logLine("CREATE_OK " + (j.id || j.podId || JSON.stringify(j).slice(0,120)));
+    await refreshStatus();
+  } catch (e) {
+    logLine("CREATE_ERROR " + (e.message || e), "err");
+  } finally {
+    setActionsEnabled(true);
   }
+});
+$("btnStart").addEventListener("click", async () => {
+  if (!cachedPodId) return;
+  setActionsEnabled(false);
+  logLine(`START → /api/compute/pods/${cachedPodId}/start`);
+  try {
+    const j = await fetchJSON(`/api/compute/pods/${cachedPodId}/start`, { method: "POST" });
+    logLine("START_OK " + JSON.stringify(j).slice(0,120));
+  } catch (e) {
+    logLine("START_ERROR " + (e.message || e), "err");
+  } finally {
+    setActionsEnabled(true);
   }
+});
+$("btnWait").addEventListener("click", async () => {
+  await refreshStatus(true);
+});
+$("btnStop").addEventListener("click", async () => {
+  setActionsEnabled(false);
+  logLine("STOP → /api/compute/delete_instance");
+  try {
+    const j = await fetchJSON("/api/compute/delete_instance", { method: "DELETE" });
+    logLine("STOP_OK " + JSON.stringify(j).slice(0,120));
+  } catch (e) {
+    logLine("STOP_ERROR " + (e.message || e), "err");
+  } finally {
+    await refreshStatus();
+    setActionsEnabled(true);
   }
+});
+$("btnEndAll").addEventListener("click", async () => {
+  if (!cachedPodId) return;
+  setActionsEnabled(false);
+  logLine(`END_ALL → /api/compute/end_all`);
+  try {
+    const j = await fetchJSON("/api/compute/end_all", { method: "DELETE" });
+    logLine("END_ALL_OK " + JSON.stringify(j).slice(0,120));
+  } catch (e) {
+    logLine("END_ALL_ERROR " + (e.message || e), "err");
+  } finally {
+    await refreshStatus();
+    setActionsEnabled(true);
   }
+});
+async function refreshStatus(verbose=false) {
+  try {
+    const j = await fetchJSON("/api/compute/pods/placeholder?pod_id=", { method: "GET" });
+    if (verbose) logLine("STATUS " + JSON.stringify(j).slice(0,180));
+    updateStateKvs(j);
+  } catch (e) {
+    logLine("STATUS_ERROR " + (e.message || e), "err");
   }
+}
+// On load: try to show current state (if any); do NOT auto-ingest.
+refreshStatus();
 </script>
+</body>
+</html>
 """
+    return HTMLResponse(html)