ui: restore general-mode Space editor

README.md

@@ -9,7 +9,7 @@ python_version: 3.10.13
 app_file: app.py
 pinned: true
 license: apache-2.0
-short_description: Revision-pinned general Image-to-Image API backend
+short_description: Revision-pinned general AI image editor and API
 ---
 
 # hy3dlab Image-to-Image
@@ -22,6 +22,11 @@ Current mode: general image editing through the pinned replacement transformer.
 No LoRA adapter is loaded. The legacy `lora_adapter` API field is retained for
 compatibility and accepts only the reserved internal value `__base__`.
 
+The Space App includes a first-party single-image editor with upload, Prompt,
+queue status, before/after comparison, session history, and PNG download. Its
+browser code is self-hosted and uses the same strict seven-field API contract;
+the removed upstream LoRA and example controls are not exposed.
+
 ## API boundary
 
 - Named endpoint: `/edit_image`
@@ -49,7 +54,9 @@ Remote model, transformer, kernel, and candidate LoRA revisions are pinned in
 `provenance.py`. See `MODEL_BOM.md` for the recorded supply-chain facts and open
 release gates. Candidate LoRAs are provenance records only and none are enabled
 by the runtime. Python direct dependencies are pinned in `requirements.txt` and
-`pre-requirements.txt`; a Linux transitive lock remains a post-build task.
+`pre-requirements.txt`. The browser client is vendored at the installed
+`@gradio/client` 2.3.1 build and hash-checked by the static test suite; a Linux
+transitive lock remains a post-build task.
 
 No Hugging Face owner token is required by the browser-facing public API design.
 Deployment credentials must never be stored in this repository or sent to a

app.py

@@ -11,7 +11,8 @@ import threading
 import gradio as gr
 import spaces
 import torch
-from fastapi.responses import HTMLResponse
+from fastapi import HTTPException
+from fastapi.responses import FileResponse, HTMLResponse
 from gradio import Server
 
 from i2i_contract import (
@@ -263,11 +264,29 @@ def client_config() -> dict:
     }
 
 
+NO_STORE_HEADERS = {
+    "Cache-Control": "no-store, max-age=0, must-revalidate",
+    "Pragma": "no-cache",
+    "Expires": "0",
+}
+
+
 @app.get("/", response_class=HTMLResponse)
-async def homepage() -> str:
+async def homepage() -> HTMLResponse:
     html_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), "index.html")
     with open(html_path, "r", encoding="utf-8") as file:
-        return file.read()
+        return HTMLResponse(content=file.read(), headers=NO_STORE_HEADERS)
+
+
+@app.get("/hy3d-assets/{asset_name}", include_in_schema=False)
+async def ui_asset(asset_name: str) -> FileResponse:
+    """Serve the two allowlisted, revision-controlled browser assets."""
+
+    allowed_assets = {"app-ui.js", "gradio-client-2.3.1.js"}
+    if asset_name not in allowed_assets:
+        raise HTTPException(status_code=404, detail="Not found")
+    asset_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), "assets", asset_name)
+    return FileResponse(asset_path, media_type="application/javascript", headers=NO_STORE_HEADERS)
 
 
 if __name__ == "__main__":

assets/app-ui.js

@@ -0,0 +1,869 @@
+import { Client } from "/hy3d-assets/gradio-client-2.3.1.js";
+
+const GENERAL_MODE_ID = "__base__";
+const MAX_HISTORY_ITEMS = 6;
+const FALLBACK_LIMITS = Object.freeze({
+  input_images: 1,
+  mime_types: ["image/jpeg", "image/png", "image/webp"],
+  max_image_bytes: 10 * 1024 * 1024,
+  max_image_pixels: 16_000_000,
+  min_image_side: 64,
+  max_prompt_chars: 1000,
+  seed: [0, 2147483647],
+  guidance: [1, 10],
+  steps: [1, 50],
+  max_output_side: 1024,
+});
+
+const PUBLIC_ERROR_MESSAGES = Object.freeze({
+  I2I_BAD_REQUEST: "The request is invalid. Check the image and settings.",
+  I2I_UNSUPPORTED_TYPE: "Use a PNG, JPEG, or WebP image.",
+  I2I_FILE_TOO_LARGE: "The image is too large. Use a file up to 10 MB.",
+  I2I_IMAGE_DECODE_FAILED: "The image could not be read. Try another file.",
+  I2I_IMAGE_DIMENSIONS_INVALID: "The image dimensions are not supported.",
+  I2I_PROMPT_REQUIRED: "Enter an instruction for the edit.",
+  I2I_PROMPT_TOO_LONG: "The instruction is too long.",
+  I2I_LORA_NOT_ALLOWED: "The editor configuration is out of date. Refresh the page.",
+  I2I_PROVIDER_BUSY: "The editor is busy. Please try again shortly.",
+  I2I_INFERENCE_FAILED: "Image editing failed. Please try again.",
+  I2I_INVALID_OUTPUT: "The editor returned an invalid result. Please try again.",
+});
+
+const SUGGESTIONS = Object.freeze([
+  ["Studio Background", "Replace the background with a clean studio backdrop while preserving the subject."],
+  ["Warm Light", "Add warm natural lighting while keeping the subject unchanged."],
+  ["Cool Light", "Add cool balanced lighting while keeping the subject unchanged."],
+  ["B&W", "Convert the image to black and white with balanced contrast."],
+  ["Blur Background", "Add a natural shallow depth of field and softly blur the background."],
+  ["Sharpen", "Improve clarity and fine detail without changing the composition."],
+  ["Remove Object", "Remove the distracting object and reconstruct the background naturally."],
+  ["Product Photo", "Turn this into a clean professional product photo with even lighting."],
+]);
+
+const galleryGrid = document.getElementById("image-gallery-grid");
+const studio = document.querySelector(".studio");
+const fileInput = document.getElementById("custom-file-input");
+const btnUpload = document.getElementById("tb-upload");
+const btnRemove = document.getElementById("tb-remove");
+const btnClear = document.getElementById("tb-clear");
+const promptInput = document.getElementById("custom-prompt-input");
+const charCount = document.getElementById("char-count");
+const runBtn = document.getElementById("custom-run-btn");
+const runBtnLabel = document.getElementById("run-btn-label");
+const cancelBtn = document.getElementById("custom-cancel-btn");
+const imgCountTb = document.getElementById("tb-image-count");
+const imgCountSb = document.getElementById("sb-image-count");
+const sbStatus = document.getElementById("sb-status");
+const loader = document.getElementById("output-loader");
+const loaderText = document.getElementById("loader-text");
+const loaderFill = document.getElementById("loader-bar-fill");
+const outBody = document.getElementById("output-image-container");
+const outPh = document.getElementById("output-placeholder");
+const dlBtn = document.getElementById("dl-btn-output");
+const compareBtn = document.getElementById("compare-btn");
+const useAsInputBtn = document.getElementById("use-as-input-btn");
+const zoomBtn = document.getElementById("zoom-btn");
+const seedChip = document.getElementById("out-seed-chip");
+const historyStrip = document.getElementById("history-strip");
+const historyCount = document.getElementById("history-count");
+const seedSlider = document.getElementById("custom-seed");
+const seedVal = document.getElementById("custom-seed-val");
+const diceBtn = document.getElementById("dice-btn");
+const randomizeInput = document.getElementById("custom-randomize");
+const guidanceSlider = document.getElementById("custom-guidance");
+const stepsSlider = document.getElementById("custom-steps");
+const lightbox = document.getElementById("lightbox");
+const lightboxImg = document.getElementById("lightbox-img");
+const lightboxClose = document.getElementById("lightbox-close");
+const dropOverlay = document.getElementById("drop-overlay");
+const compareWrap = document.getElementById("compare-wrap");
+const compareTop = document.getElementById("compare-top");
+const compareDivider = document.getElementById("compare-divider");
+const compareBeforeImg = document.getElementById("compare-before-img");
+const compareAfterImg = document.getElementById("compare-after-img");
+const canvasMeta = document.getElementById("canvas-meta");
+const segResult = document.getElementById("seg-result");
+const segInput = document.getElementById("seg-input");
+const connDot = document.getElementById("conn-dot");
+const connText = document.getElementById("conn-text");
+const suggestionsWrap = document.getElementById("suggestions-wrap");
+
+let client = null;
+let limits = FALLBACK_LIMITS;
+let contractReady = false;
+let inputImage = null;
+let currentResult = null;
+let history = [];
+let historyIndex = -1;
+let viewMode = "result";
+let compareMode = false;
+let compareFraction = .5;
+let running = false;
+let currentJob = null;
+let currentStage = "idle";
+let cancellationRequested = false;
+let activeRunId = 0;
+let selectionId = 0;
+let toastTimer = null;
+
+function errorClass(error) {
+  return error instanceof Error ? error.name : typeof error;
+}
+
+function extractPublicErrorCode(error) {
+  const text = typeof error === "string"
+    ? error
+    : error && typeof error.message === "string"
+      ? error.message
+      : "";
+  const match = text.match(/I2I_[A-Z_]+/);
+  return match && PUBLIC_ERROR_MESSAGES[match[0]] ? match[0] : "I2I_INFERENCE_FAILED";
+}
+
+function showToast(message, type = "error") {
+  let toast = document.getElementById("app-toast");
+  if (!toast) {
+    toast = document.createElement("div");
+    toast.id = "app-toast";
+    toast.className = "toast-notification";
+    const icon = document.createElement("span");
+    icon.className = "toast-icon";
+    const text = document.createElement("span");
+    text.className = "toast-text";
+    toast.append(icon, text);
+    document.body.appendChild(toast);
+  }
+  toast.className = `toast-notification ${type}`;
+  toast.setAttribute("role", type === "info" ? "status" : "alert");
+  toast.setAttribute("aria-live", type === "info" ? "polite" : "assertive");
+  toast.setAttribute("aria-atomic", "true");
+  toast.querySelector(".toast-icon").textContent = type === "warning" ? "⚠" : type === "info" ? "ℹ" : "✗";
+  toast.querySelector(".toast-text").textContent = message;
+  if (toastTimer) clearTimeout(toastTimer);
+  void toast.offsetWidth;
+  toast.classList.add("visible");
+  toastTimer = setTimeout(() => toast.classList.remove("visible"), 3500);
+}
+
+function setStatus(text, style = "") {
+  sbStatus.textContent = text;
+  sbStatus.className = `sb-pill${style ? ` ${style}` : ""}`;
+}
+
+function updateRunButton() {
+  runBtn.disabled = !contractReady || running || !inputImage;
+}
+
+function flashPromptError() {
+  promptInput.classList.add("error-flash");
+  promptInput.focus();
+  setTimeout(() => promptInput.classList.remove("error-flash"), 800);
+}
+
+function getCanvasImage() {
+  return outBody.querySelector("img.modern-out-img");
+}
+
+function exitCompareMode() {
+  if (!compareMode) return;
+  compareMode = false;
+  compareBtn.classList.remove("active");
+  compareBtn.setAttribute("aria-pressed", "false");
+  compareWrap.classList.remove("visible");
+  const canvasImage = getCanvasImage();
+  if (canvasImage && (currentResult || inputImage)) canvasImage.style.display = "";
+}
+
+function updateRailState() {
+  const hasResult = Boolean(currentResult);
+  btnUpload.disabled = running || !contractReady;
+  dlBtn.disabled = running || !hasResult;
+  useAsInputBtn.disabled = running || !hasResult;
+  compareBtn.disabled = running || !(hasResult && currentResult.beforeB64);
+  zoomBtn.disabled = running || !(hasResult || inputImage);
+  btnRemove.disabled = running || !inputImage;
+  btnClear.disabled = running || !inputImage;
+}
+
+function renderCanvas() {
+  exitCompareMode();
+  let canvasImage = getCanvasImage();
+  const shown = viewMode === "result" ? currentResult : inputImage;
+  if (shown) {
+    outPh.style.display = "none";
+    if (!canvasImage) {
+      canvasImage = document.createElement("img");
+      canvasImage.className = "modern-out-img";
+      canvasImage.alt = "Image preview";
+      canvasImage.addEventListener("click", () => {
+        if (!canvasImage.src) return;
+        openLightbox(canvasImage.src, canvasImage);
+      });
+      outBody.appendChild(canvasImage);
+    }
+    canvasImage.style.display = "";
+    canvasImage.src = viewMode === "result" ? currentResult.b64 : inputImage.b64;
+    canvasMeta.textContent = viewMode === "result"
+      ? `result · seed ${currentResult.seed}`
+      : `input · ${inputImage.name || "image"}`;
+  } else {
+    if (canvasImage) canvasImage.style.display = "none";
+    outPh.style.display = "";
+    canvasMeta.textContent = inputImage ? "Input ready — run an edit" : "No image loaded";
+  }
+  updateRailState();
+}
+
+function setViewMode(mode) {
+  viewMode = mode;
+  segResult.classList.toggle("active", mode === "result");
+  segInput.classList.toggle("active", mode === "input");
+  renderCanvas();
+}
+
+function updateCounts() {
+  const inputCount = inputImage ? 1 : 0;
+  imgCountTb.textContent = String(inputCount);
+  imgCountSb.textContent = inputCount
+    ? `1 input · ${history.length} result${history.length === 1 ? "" : "s"}`
+    : "No inputs";
+}
+
+function renderInputStrip() {
+  galleryGrid.replaceChildren();
+  if (!inputImage) {
+    const empty = document.createElement("div");
+    empty.className = "fs-empty";
+    empty.textContent = "Drop or paste one image…";
+    galleryGrid.appendChild(empty);
+  } else {
+    const thumb = document.createElement("div");
+    thumb.className = "fs-thumb selected";
+    const image = document.createElement("img");
+    image.src = inputImage.b64;
+    image.alt = "Input image";
+    const badge = document.createElement("span");
+    badge.className = "fs-badge";
+    badge.textContent = "#1";
+    const remove = document.createElement("button");
+    remove.className = "fs-remove";
+    remove.type = "button";
+    remove.textContent = "✕";
+    remove.setAttribute("aria-label", "Remove input image");
+    remove.addEventListener("click", (event) => {
+      event.stopPropagation();
+      clearInput();
+    });
+    thumb.append(image, badge, remove);
+    thumb.addEventListener("click", () => setViewMode("input"));
+    galleryGrid.appendChild(thumb);
+  }
+  const add = document.createElement("button");
+  add.type = "button";
+  add.className = "fs-add";
+  add.innerHTML = '<span class="add-icon">+</span><span class="add-text">Replace</span>';
+  add.addEventListener("click", () => fileInput.click());
+  galleryGrid.appendChild(add);
+  updateRailState();
+}
+
+function renderHistory() {
+  historyStrip.replaceChildren();
+  historyCount.textContent = String(history.length);
+  if (!history.length) {
+    const empty = document.createElement("div");
+    empty.className = "fs-empty";
+    empty.textContent = "No results yet";
+    historyStrip.appendChild(empty);
+    return;
+  }
+  history.forEach((entry, index) => {
+    const thumb = document.createElement("button");
+    thumb.type = "button";
+    thumb.className = `fs-thumb${index === historyIndex ? " selected" : ""}`;
+    thumb.title = `seed ${entry.seed}`;
+    const image = document.createElement("img");
+    image.src = entry.b64;
+    image.alt = `Edited result ${index + 1}`;
+    thumb.appendChild(image);
+    thumb.addEventListener("click", () => {
+      historyIndex = index;
+      currentResult = history[index];
+      seedChip.textContent = `seed ${currentResult.seed}`;
+      seedChip.classList.add("visible");
+      setViewMode("result");
+      renderHistory();
+    });
+    historyStrip.appendChild(thumb);
+  });
+}
+
+function clearInput() {
+  selectionId += 1;
+  inputImage = null;
+  fileInput.value = "";
+  renderInputStrip();
+  updateCounts();
+  renderCanvas();
+  updateRunButton();
+}
+
+function replaceInput(b64, name) {
+  inputImage = { b64, name };
+  renderInputStrip();
+  updateCounts();
+  setViewMode("input");
+  updateRunButton();
+}
+
+function readFileAsDataUrl(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => typeof reader.result === "string" ? resolve(reader.result) : reject(new Error("invalid_reader_result"));
+    reader.onerror = () => reject(new Error("file_read_failed"));
+    reader.readAsDataURL(file);
+  });
+}
+
+function decodeImageFile(file) {
+  return new Promise((resolve, reject) => {
+    const url = URL.createObjectURL(file);
+    const image = new Image();
+    image.onload = () => {
+      URL.revokeObjectURL(url);
+      resolve({ width: image.naturalWidth, height: image.naturalHeight });
+    };
+    image.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error("image_decode_failed"));
+    };
+    image.src = url;
+  });
+}
+
+async function processFile(file) {
+  if (!file) return;
+  if (!contractReady) {
+    showToast("The editor is still connecting. Try again shortly.", "warning");
+    return;
+  }
+  if (running) {
+    showToast("Wait for the current edit to finish.", "warning");
+    return;
+  }
+  const localSelectionId = ++selectionId;
+  if (!limits.mime_types.includes(file.type)) {
+    showToast(PUBLIC_ERROR_MESSAGES.I2I_UNSUPPORTED_TYPE);
+    return;
+  }
+  if (file.size <= 0 || file.size > limits.max_image_bytes) {
+    showToast(PUBLIC_ERROR_MESSAGES.I2I_FILE_TOO_LARGE);
+    return;
+  }
+  try {
+    const dimensions = await decodeImageFile(file);
+    if (
+      Math.min(dimensions.width, dimensions.height) < limits.min_image_side ||
+      dimensions.width * dimensions.height > limits.max_image_pixels
+    ) {
+      showToast(PUBLIC_ERROR_MESSAGES.I2I_IMAGE_DIMENSIONS_INVALID);
+      return;
+    }
+    const b64 = await readFileAsDataUrl(file);
+    if (localSelectionId !== selectionId) return;
+    replaceInput(b64, file.name);
+    showToast("Input image ready", "info");
+  } catch (error) {
+    console.warn("[image-editor] input validation failed", { error_class: errorClass(error) });
+    showToast(PUBLIC_ERROR_MESSAGES.I2I_IMAGE_DECODE_FAILED);
+  }
+}
+
+fileInput.addEventListener("change", () => {
+  const file = fileInput.files && fileInput.files[0];
+  void processFile(file);
+  fileInput.value = "";
+});
+btnUpload.addEventListener("click", () => fileInput.click());
+btnRemove.addEventListener("click", clearInput);
+btnClear.addEventListener("click", clearInput);
+
+let dragDepth = 0;
+window.addEventListener("dragenter", (event) => {
+  if (!event.dataTransfer || !Array.from(event.dataTransfer.types).includes("Files")) return;
+  event.preventDefault();
+  dragDepth += 1;
+  dropOverlay.classList.add("visible");
+});
+window.addEventListener("dragleave", (event) => {
+  if (!event.dataTransfer || !Array.from(event.dataTransfer.types).includes("Files")) return;
+  dragDepth = Math.max(0, dragDepth - 1);
+  if (!dragDepth) dropOverlay.classList.remove("visible");
+});
+window.addEventListener("dragover", (event) => event.preventDefault());
+window.addEventListener("drop", (event) => {
+  event.preventDefault();
+  dragDepth = 0;
+  dropOverlay.classList.remove("visible");
+  const files = event.dataTransfer && event.dataTransfer.files;
+  if (!files || !files.length) return;
+  if (files.length > 1) showToast("Only the first image will be used.", "warning");
+  void processFile(files[0]);
+});
+
+document.addEventListener("paste", (event) => {
+  if (event.target === promptInput) return;
+  const items = event.clipboardData && event.clipboardData.items;
+  if (!items) return;
+  const item = Array.from(items).find((candidate) => candidate.kind === "file" && limits.mime_types.includes(candidate.type));
+  const file = item && item.getAsFile();
+  if (!file) return;
+  event.preventDefault();
+  void processFile(file);
+});
+
+SUGGESTIONS.forEach(([label, prompt]) => {
+  const chip = document.createElement("button");
+  chip.type = "button";
+  chip.className = "suggestion-chip";
+  chip.textContent = label;
+  chip.addEventListener("click", () => {
+    promptInput.value = prompt;
+    charCount.textContent = String(Array.from(prompt).length);
+    suggestionsWrap.querySelectorAll(".suggestion-chip").forEach((item) => item.classList.remove("active"));
+    chip.classList.add("active");
+    promptInput.focus();
+    updateRunButton();
+  });
+  suggestionsWrap.appendChild(chip);
+});
+
+promptInput.addEventListener("input", () => {
+  charCount.textContent = String(Array.from(promptInput.value).length);
+  suggestionsWrap.querySelectorAll(".suggestion-chip").forEach((item) => item.classList.remove("active"));
+  updateRunButton();
+});
+
+function bindSlider(slider) {
+  const value = document.getElementById(`${slider.id}-val`);
+  slider.addEventListener("input", () => { value.textContent = slider.value; });
+}
+bindSlider(seedSlider);
+bindSlider(guidanceSlider);
+bindSlider(stepsSlider);
+diceBtn.addEventListener("click", () => {
+  const seed = Math.floor(Math.random() * (limits.seed[1] + 1));
+  seedSlider.value = String(seed);
+  seedVal.textContent = String(seed);
+});
+randomizeInput.addEventListener("change", () => {
+  seedSlider.disabled = randomizeInput.checked;
+  diceBtn.disabled = randomizeInput.checked;
+  seedSlider.parentElement.style.opacity = randomizeInput.checked ? ".55" : "1";
+});
+randomizeInput.dispatchEvent(new Event("change"));
+
+function showLoader(text) {
+  loaderText.textContent = text;
+  loaderFill.classList.remove("determinate");
+  loaderFill.style.width = "100%";
+  loader.classList.add("active");
+}
+
+function setLoaderProgress(text, fraction) {
+  loaderText.textContent = text;
+  if (Number.isFinite(fraction) && fraction >= 0 && fraction <= 1) {
+    loaderFill.classList.add("determinate");
+    loaderFill.style.width = `${Math.max(4, Math.round(fraction * 100))}%`;
+  } else {
+    loaderFill.classList.remove("determinate");
+    loaderFill.style.width = "100%";
+  }
+}
+
+function hideLoader(statusText, style = "") {
+  loader.classList.remove("active");
+  setStatus(statusText, style);
+}
+
+function validateResult(output) {
+  if (
+    !output ||
+    typeof output.image !== "string" ||
+    !/^data:image\/png;base64,[A-Za-z0-9+/]+={0,2}$/.test(output.image) ||
+    !Number.isSafeInteger(output.seed) ||
+    output.seed < limits.seed[0] ||
+    output.seed > limits.seed[1]
+  ) {
+    throw new Error("I2I_INVALID_OUTPUT");
+  }
+  return { image: output.image, seed: output.seed };
+}
+
+function decodeOutput(dataUrl) {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.onload = () => {
+      if (!image.naturalWidth || !image.naturalHeight || Math.max(image.naturalWidth, image.naturalHeight) > limits.max_output_side) {
+        reject(new Error("I2I_INVALID_OUTPUT"));
+        return;
+      }
+      resolve();
+    };
+    image.onerror = () => reject(new Error("I2I_INVALID_OUTPUT"));
+    image.src = dataUrl;
+  });
+}
+
+function showResult(entry) {
+  currentResult = entry;
+  seedChip.textContent = `seed ${entry.seed}`;
+  seedChip.classList.add("visible");
+  setViewMode("result");
+}
+
+function pushHistory(entry) {
+  history.push(entry);
+  if (history.length > MAX_HISTORY_ITEMS) history.shift();
+  historyIndex = history.length - 1;
+  renderHistory();
+  updateCounts();
+}
+
+function setComparePosition(fraction) {
+  const bounded = Math.max(0, Math.min(1, fraction));
+  compareFraction = bounded;
+  const width = compareWrap.clientWidth;
+  const x = bounded * width;
+  compareTop.style.clipPath = `inset(0 ${width - x}px 0 0)`;
+  compareDivider.style.left = `${x}px`;
+  compareWrap.setAttribute("aria-valuenow", String(Math.round(bounded * 100)));
+}
+
+function enterCompareMode() {
+  if (!currentResult || !currentResult.beforeB64) return;
+  compareMode = true;
+  compareBtn.classList.add("active");
+  compareBtn.setAttribute("aria-pressed", "true");
+  const canvasImage = getCanvasImage();
+  if (canvasImage) canvasImage.style.display = "none";
+  compareAfterImg.src = currentResult.b64;
+  compareBeforeImg.src = currentResult.beforeB64;
+  compareWrap.classList.add("visible");
+  requestAnimationFrame(() => setComparePosition(compareFraction));
+}
+
+compareBtn.addEventListener("click", () => compareMode ? exitCompareMode() : enterCompareMode());
+let compareDragging = false;
+compareWrap.addEventListener("pointerdown", (event) => {
+  compareDragging = true;
+  compareWrap.setPointerCapture(event.pointerId);
+  const rect = compareWrap.getBoundingClientRect();
+  setComparePosition((event.clientX - rect.left) / rect.width);
+});
+compareWrap.addEventListener("pointermove", (event) => {
+  if (!compareDragging) return;
+  const rect = compareWrap.getBoundingClientRect();
+  setComparePosition((event.clientX - rect.left) / rect.width);
+});
+compareWrap.addEventListener("pointerup", () => { compareDragging = false; });
+compareWrap.addEventListener("pointercancel", () => { compareDragging = false; });
+compareWrap.addEventListener("keydown", (event) => {
+  if (!compareMode) return;
+  let next = compareFraction;
+  if (event.key === "ArrowLeft" || event.key === "ArrowDown") next -= .05;
+  else if (event.key === "ArrowRight" || event.key === "ArrowUp") next += .05;
+  else if (event.key === "Home") next = 0;
+  else if (event.key === "End") next = 1;
+  else return;
+  event.preventDefault();
+  setComparePosition(next);
+});
+
+segResult.addEventListener("click", () => setViewMode("result"));
+segInput.addEventListener("click", () => setViewMode("input"));
+let lightboxReturnFocus = null;
+function openLightbox(source, returnFocus) {
+  if (!source) return;
+  lightboxReturnFocus = returnFocus || document.activeElement;
+  lightboxImg.src = source;
+  lightbox.classList.add("visible");
+  lightbox.setAttribute("aria-hidden", "false");
+  studio.inert = true;
+  lightboxClose.focus();
+}
+function closeLightbox() {
+  if (!lightbox.classList.contains("visible")) return;
+  lightbox.classList.remove("visible");
+  lightbox.setAttribute("aria-hidden", "true");
+  lightboxImg.removeAttribute("src");
+  studio.inert = false;
+  if (lightboxReturnFocus && typeof lightboxReturnFocus.focus === "function") lightboxReturnFocus.focus();
+  lightboxReturnFocus = null;
+}
+lightbox.addEventListener("click", (event) => {
+  if (event.target === lightbox) closeLightbox();
+});
+lightboxClose.addEventListener("click", closeLightbox);
+document.addEventListener("keydown", (event) => {
+  if (event.key === "Escape") closeLightbox();
+});
+zoomBtn.addEventListener("click", () => {
+  const source = viewMode === "result" && currentResult ? currentResult.b64 : inputImage && inputImage.b64;
+  if (!source) return;
+  openLightbox(source, zoomBtn);
+});
+dlBtn.addEventListener("click", () => {
+  if (!currentResult) return;
+  const link = document.createElement("a");
+  link.href = currentResult.b64;
+  link.download = `hy3d-image-edit-${currentResult.seed}.png`;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+});
+useAsInputBtn.addEventListener("click", () => {
+  if (!currentResult) return;
+  replaceInput(currentResult.b64, `hy3d-image-edit-${currentResult.seed}.png`);
+  showToast("Result is ready for another edit", "info");
+});
+seedChip.addEventListener("click", () => {
+  if (!currentResult || !navigator.clipboard) return;
+  navigator.clipboard.writeText(String(currentResult.seed)).then(
+    () => showToast(`Seed copied: ${currentResult.seed}`, "info"),
+    () => undefined,
+  );
+});
+
+function setRunningUi(isRunning, stage = "idle") {
+  running = isRunning;
+  currentStage = stage;
+  runBtnLabel.textContent = isRunning ? "Editing…" : "Edit Image";
+  cancelBtn.style.display = isRunning && stage === "pending" ? "flex" : "none";
+  updateRailState();
+  updateRunButton();
+}
+
+function validateBeforeRun() {
+  if (!contractReady || !client) {
+    showToast("The editor is not connected. Refresh the page.");
+    return false;
+  }
+  if (!inputImage) {
+    showToast("Upload one image first.");
+    return false;
+  }
+  const prompt = promptInput.value.trim();
+  if (!prompt) {
+    showToast(PUBLIC_ERROR_MESSAGES.I2I_PROMPT_REQUIRED, "warning");
+    flashPromptError();
+    return false;
+  }
+  if (Array.from(prompt).length > limits.max_prompt_chars) {
+    showToast(PUBLIC_ERROR_MESSAGES.I2I_PROMPT_TOO_LONG);
+    return false;
+  }
+  return true;
+}
+
+async function runEdit() {
+  if (running || !validateBeforeRun()) return;
+  const runId = ++activeRunId;
+  cancellationRequested = false;
+  const beforeB64 = inputImage.b64;
+  const prompt = promptInput.value.trim();
+  let parsedResult = null;
+  setRunningUi(true, "preparing");
+  setViewMode("result");
+  showLoader("Submitting to queue…");
+  setStatus("Queued");
+
+  const payload = {
+    images_b64_json: JSON.stringify([beforeB64]),
+    prompt,
+    lora_adapter: GENERAL_MODE_ID,
+    seed: Number.parseInt(seedSlider.value, 10),
+    randomize_seed: randomizeInput.checked,
+    guidance_scale: Number.parseFloat(guidanceSlider.value),
+    steps: Number.parseInt(stepsSlider.value, 10),
+  };
+
+  try {
+    currentJob = client.submit("/edit_image", payload);
+    const eventId = await currentJob.wait_for_id();
+    if (runId !== activeRunId) return;
+    if (typeof eventId !== "string" || !eventId) throw new Error("I2I_PROVIDER_BUSY");
+    setRunningUi(true, "pending");
+    for await (const message of currentJob) {
+      if (runId !== activeRunId) return;
+      if (!message || typeof message.type !== "string") throw new Error("I2I_INVALID_OUTPUT");
+      if (message.type === "status") {
+        const stage = message.stage || message.status;
+        if (stage === "pending") {
+          setRunningUi(true, "pending");
+          const position = Number.isInteger(message.position) ? message.position + 1 : null;
+          const size = Number.isInteger(message.size) ? message.size : message.queue_size;
+          const label = position ? `In queue — position ${position}${size ? ` of ${size}` : ""}` : "Waiting in queue…";
+          setLoaderProgress(label, null);
+          setStatus("Queued");
+        } else if (stage === "generating" || stage === "streaming") {
+          setRunningUi(true, "generating");
+          setStatus("Processing…");
+          const progress = Array.isArray(message.progress_data) && message.progress_data.length
+            ? message.progress_data[message.progress_data.length - 1]
+            : null;
+          const fraction = progress && Number.isFinite(progress.index) && Number.isFinite(progress.length) && progress.length > 0
+            ? progress.index / progress.length
+            : null;
+          setLoaderProgress(fraction === null ? "Generating image…" : `Generating… ${Math.round(fraction * 100)}%`, fraction);
+        } else if (stage === "error") {
+          throw new Error(extractPublicErrorCode(message));
+        }
+      } else if (message.type === "data") {
+        if (parsedResult) throw new Error("I2I_INVALID_OUTPUT");
+        const output = validateResult(message.data && message.data[0]);
+        await decodeOutput(output.image);
+        parsedResult = {
+          b64: output.image,
+          seed: output.seed,
+          prompt,
+          beforeB64,
+        };
+      }
+    }
+    if (cancellationRequested) {
+      hideLoader("Stopped waiting");
+      showToast("Stopped waiting for this job. The backend may still finish it.", "warning");
+      return;
+    }
+    if (!parsedResult) throw new Error("I2I_INVALID_OUTPUT");
+    showResult(parsedResult);
+    pushHistory(parsedResult);
+    seedSlider.value = String(parsedResult.seed);
+    seedVal.textContent = String(parsedResult.seed);
+    hideLoader("Done", "done");
+    showToast("Image edited successfully", "info");
+  } catch (error) {
+    if (cancellationRequested) {
+      hideLoader("Stopped waiting");
+      showToast("Stopped waiting for this job. The backend may still finish it.", "warning");
+    } else {
+      const code = extractPublicErrorCode(error);
+      console.warn("[image-editor] request failed", { error_code: code, error_class: errorClass(error) });
+      hideLoader("Error", "error");
+      showToast(PUBLIC_ERROR_MESSAGES[code]);
+    }
+  } finally {
+    if (runId === activeRunId) {
+      currentJob = null;
+      cancellationRequested = false;
+      setRunningUi(false);
+    }
+  }
+}
+
+runBtn.addEventListener("click", () => void runEdit());
+cancelBtn.addEventListener("click", async () => {
+  if (!currentJob || currentStage !== "pending") return;
+  const job = currentJob;
+  cancellationRequested = true;
+  cancelBtn.style.display = "none";
+  setLoaderProgress("Cancellation requested…", null);
+  setStatus("Cancelling…");
+  try {
+    await job.cancel();
+  } catch (error) {
+    console.warn("[image-editor] queue cancellation failed", { error_class: errorClass(error) });
+  } finally {
+    await job.return();
+  }
+});
+document.addEventListener("keydown", (event) => {
+  if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+    event.preventDefault();
+    void runEdit();
+  }
+});
+
+function validateConfig(config) {
+  if (
+    !config ||
+    config.edit_mode !== "general" ||
+    config.uses_lora !== false ||
+    config.required_lora_adapter_value !== GENERAL_MODE_ID ||
+    config.content_moderation_enabled !== false ||
+    !Array.isArray(config.loras) ||
+    config.loras.length !== 0 ||
+    !config.limits
+  ) {
+    throw new Error("contract_mismatch");
+  }
+  const nextLimits = config.limits;
+  const expectedMimes = ["image/jpeg", "image/png", "image/webp"];
+  if (
+    !Array.isArray(nextLimits.mime_types) ||
+    nextLimits.mime_types.length !== expectedMimes.length ||
+    !expectedMimes.every((mime) => nextLimits.mime_types.includes(mime)) ||
+    nextLimits.input_images !== 1 ||
+    !Number.isInteger(nextLimits.max_image_bytes) || nextLimits.max_image_bytes <= 0 ||
+    !Number.isInteger(nextLimits.max_image_pixels) || nextLimits.max_image_pixels <= 0 ||
+    !Number.isInteger(nextLimits.min_image_side) || nextLimits.min_image_side <= 0 ||
+    !Number.isInteger(nextLimits.max_prompt_chars) || nextLimits.max_prompt_chars <= 0 ||
+    !Array.isArray(nextLimits.seed) ||
+    !Array.isArray(nextLimits.guidance) ||
+    !Array.isArray(nextLimits.steps) ||
+    nextLimits.seed.length !== 2 || !nextLimits.seed.every(Number.isInteger) || nextLimits.seed[0] < 0 || nextLimits.seed[0] > nextLimits.seed[1] ||
+    nextLimits.guidance.length !== 2 || !nextLimits.guidance.every(Number.isFinite) || nextLimits.guidance[0] > nextLimits.guidance[1] ||
+    nextLimits.steps.length !== 2 || !nextLimits.steps.every(Number.isInteger) || nextLimits.steps[0] < 1 || nextLimits.steps[0] > nextLimits.steps[1] ||
+    !Number.isInteger(nextLimits.max_output_side) || nextLimits.max_output_side <= 0
+  ) {
+    throw new Error("invalid_limits");
+  }
+  return nextLimits;
+}
+
+function applyLimits(nextLimits) {
+  limits = nextLimits;
+  promptInput.maxLength = limits.max_prompt_chars;
+  seedSlider.min = String(limits.seed[0]);
+  seedSlider.max = String(limits.seed[1]);
+  guidanceSlider.min = String(limits.guidance[0]);
+  guidanceSlider.max = String(limits.guidance[1]);
+  stepsSlider.min = String(limits.steps[0]);
+  stepsSlider.max = String(limits.steps[1]);
+}
+
+async function initialize() {
+  runBtn.disabled = true;
+  try {
+    const [configResponse, connectedClient] = await Promise.all([
+      fetch("/api/config", { cache: "no-store" }),
+      Client.connect(window.location.origin, { events: ["data", "status"] }),
+    ]);
+    if (!configResponse.ok) throw new Error("config_unavailable");
+    applyLimits(validateConfig(await configResponse.json()));
+    client = connectedClient;
+    contractReady = true;
+    connDot.classList.remove("off", "pending");
+    connText.textContent = "connected";
+    setStatus("Ready");
+  } catch (error) {
+    console.warn("[image-editor] initialization failed", { error_class: errorClass(error) });
+    contractReady = false;
+    connDot.classList.remove("pending");
+    connDot.classList.add("off");
+    connText.textContent = "offline";
+    setStatus("Offline", "error");
+    showToast("Could not connect to the image editor. Refresh the page.");
+  } finally {
+    updateRailState();
+    updateRunButton();
+  }
+}
+
+renderInputStrip();
+renderHistory();
+updateCounts();
+renderCanvas();
+updateRunButton();
+void initialize();

assets/gradio-client-2.3.1.js

@@ -0,0 +1,1971 @@
+const Ke = "host", xe = "queue/data", Ve = "queue/join", ye = "upload", Ye = "login", K = "config", Qe = "info", Xe = "runtime", et = "sleeptime", tt = "heartbeat", st = "component_server", nt = "reset", it = "cancel", ot = "app_id", De = "This application is currently busy. Please try again. ", N = "Connection errored out. ", L = "Could not resolve app config. ", rt = "Could not get space status. ", at = "Could not get API info. ", ue = "Space metadata could not be loaded. ", ct = "Invalid URL. A full URL path is required.", ut = "Not authorized to access this space. ", Le = "Invalid credentials. Could not login. ", lt = "Login credentials are required to access this space.", pt = "File system access is only available in Node.js environments", Ne = "Root URL not found in client config", dt = "Error uploading file";
+async function be(e, s, t) {
+  try {
+    return (await (await fetch(`https://huggingface.co/api/spaces/${e}/jwt`, {
+      headers: {
+        Authorization: `Bearer ${s}`,
+        ...t ? { Cookie: t } : {}
+      }
+    })).json()).token || !1;
+  } catch {
+    return !1;
+  }
+}
+function ht(e) {
+  let s = {};
+  return e.forEach(({ api_name: t, id: n }) => {
+    t && (s[t] = n);
+  }), s;
+}
+async function ft(e) {
+  const s = this.options.token ? { Authorization: `Bearer ${this.options.token}` } : {};
+  if (typeof window < "u" && window.gradio_config && location.origin !== "http://localhost:9876") {
+    if (window.gradio_config.current_page && (e = e.substring(0, e.lastIndexOf("/"))), window.gradio_config.dev_mode || typeof window < "u" && window?.BUILD_MODE === "dev") {
+      let t = ae(
+        e,
+        this.deep_link ? K + "?deep_link=" + this.deep_link : K
+      );
+      const n = await this.fetch(t, {
+        headers: s,
+        credentials: this.options.credentials ?? "same-origin"
+      }), o = await ve(n, !!this.options.auth);
+      o.root = e || o.root, window.gradio_config = {
+        ...o,
+        current_page: window.gradio_config.current_page
+      };
+    }
+    return { ...window.gradio_config };
+  } else if (e) {
+    let t = ae(
+      e,
+      this.deep_link ? K + "?deep_link=" + this.deep_link : K
+    );
+    const n = await this.fetch(t, {
+      headers: s,
+      credentials: this.options.credentials ?? "same-origin"
+    }), o = await ve(n, !!this.options.auth);
+    return o.root || (o.root = e), o;
+  }
+  throw new Error(L);
+}
+async function ve(e, s) {
+  if (e?.status === 401 && !s) {
+    const n = (await e.json())?.detail?.auth_message;
+    throw new Error(n || lt);
+  } else if (e?.status === 401 && s)
+    throw new Error(Le);
+  if (e?.status === 200) {
+    let t = await e.json();
+    return t.dependencies?.forEach((n, o) => {
+      n.id === void 0 && (n.id = o);
+    }), t;
+  } else if (e?.status === 401)
+    throw new Error(ut);
+  throw new Error(L);
+}
+async function _t() {
+  const { http_protocol: e, host: s } = await pe(
+    this.app_reference,
+    this.options.token
+  );
+  try {
+    if (this.options.auth) {
+      const t = await Ce(
+        e,
+        s,
+        this.options.auth,
+        this.fetch,
+        this.options.token,
+        this.options.credentials
+      );
+      t && this.set_cookies(t);
+    }
+  } catch (t) {
+    throw Error(t.message);
+  }
+}
+async function Ce(e, s, t, n, o, r) {
+  const i = new FormData();
+  i.append("username", t?.[0]), i.append("password", t?.[1]);
+  let a = {};
+  o && (a.Authorization = `Bearer ${o}`);
+  const u = await n(`${e}//${s}/${Ye}`, {
+    headers: a,
+    method: "POST",
+    body: i,
+    credentials: r ?? "same-origin"
+  });
+  if (u.status === 200)
+    return u.headers.get("set-cookie");
+  throw u.status === 401 ? new Error(Le) : new Error(ue);
+}
+function re(e) {
+  if (e.startsWith("http")) {
+    const { protocol: s, host: t, pathname: n } = new URL(e);
+    return {
+      ws_protocol: s === "https:" ? "wss" : "ws",
+      http_protocol: s,
+      host: t + (n !== "/" ? n : "")
+    };
+  }
+  return {
+    ws_protocol: "wss",
+    http_protocol: "https:",
+    host: new URL(e).host
+  };
+}
+const Pe = (e) => {
+  let s = [];
+  return e.split(/,(?=\s*[^\s=;]+=[^\s=;]+)/).forEach((n) => {
+    const [o, r] = n.split(";")[0].split("=");
+    o && r && s.push(`${o.trim()}=${r.trim()}`);
+  }), s;
+}, le = /^[a-zA-Z0-9_\-\.]+\/[a-zA-Z0-9_\-\.]+$/, gt = /.*hf\.space\/{0,1}.*$/;
+async function pe(e, s) {
+  const t = {};
+  s && (t.Authorization = `Bearer ${s}`);
+  const n = e.trim().replace(/\/$/, "");
+  if (le.test(n))
+    try {
+      const r = (await (await fetch(
+        `https://huggingface.co/api/spaces/${n}/${Ke}`,
+        { headers: t }
+      )).json()).host;
+      return {
+        space_id: e,
+        ...re(r)
+      };
+    } catch {
+      throw new Error(ue);
+    }
+  if (gt.test(n)) {
+    const { ws_protocol: o, http_protocol: r, host: i } = re(n);
+    return {
+      space_id: i.split("/")[0].replace(".hf.space", ""),
+      ws_protocol: o,
+      http_protocol: r,
+      host: i
+    };
+  }
+  return {
+    space_id: !1,
+    ...re(n)
+  };
+}
+const ae = (...e) => {
+  try {
+    return e.reduce((s, t) => (s = s.replace(/\/+$/, ""), t = t.replace(/^\/+/, ""), new URL(t, s + "/").toString()));
+  } catch {
+    throw new Error(ct);
+  }
+};
+function mt(e, s, t) {
+  const n = {
+    named_endpoints: {},
+    unnamed_endpoints: {}
+  };
+  return Object.keys(e).forEach((o) => {
+    (o === "named_endpoints" || o === "unnamed_endpoints") && (n[o] = {}, Object.entries(e[o]).forEach(
+      ([r, { parameters: i, returns: a }]) => {
+        const u = s.dependencies.find(
+          (c) => c.api_name === r || c.api_name === r.replace("/", "")
+        )?.id || t[r.replace("/", "")] || -1, l = u !== -1 ? s.dependencies.find((c) => c.id == u)?.types : { generator: !1, cancel: !1 };
+        if (u !== -1 && s.dependencies.find((c) => c.id == u)?.inputs?.length !== i.length) {
+          const c = s.dependencies.find((g) => g.id == u).inputs.map(
+            (g) => s.components.find((w) => w.id === g)?.type
+          );
+          try {
+            c.forEach((g, w) => {
+              if (g === "state") {
+                const C = {
+                  component: "state",
+                  example: null,
+                  parameter_default: null,
+                  parameter_has_default: !0,
+                  parameter_name: null,
+                  hidden: !0
+                };
+                i.splice(w, 0, C);
+              }
+            });
+          } catch (g) {
+            console.error(g);
+          }
+        }
+        const p = (c, g, w, C) => ({
+          ...c,
+          description: yt(c?.type, w),
+          type: wt(c?.type, g, w, C) || ""
+        });
+        n[o][r] = {
+          parameters: i.map(
+            (c) => p(c, c?.component, c?.serializer, "parameter")
+          ),
+          returns: a.map(
+            (c) => p(c, c?.component, c?.serializer, "return")
+          ),
+          type: l
+        };
+      }
+    ));
+  }), n;
+}
+function wt(e, s, t, n) {
+  if (s === "Api") return e.type;
+  switch (e?.type) {
+    case "string":
+      return "string";
+    case "boolean":
+      return "boolean";
+    case "number":
+      return "number";
+  }
+  if (t === "JSONSerializable" || t === "StringSerializable")
+    return "any";
+  if (t === "ListStringSerializable")
+    return "string[]";
+  if (s === "Image")
+    return n === "parameter" ? "Blob | File | Buffer" : "string";
+  if (t === "FileSerializable")
+    return e?.type === "array" ? n === "parameter" ? "(Blob | File | Buffer)[]" : "{ name: string; data: string; size?: number; is_file?: boolean; orig_name?: string}[]" : n === "parameter" ? "Blob | File | Buffer" : "{ name: string; data: string; size?: number; is_file?: boolean; orig_name?: string}";
+  if (t === "GallerySerializable")
+    return n === "parameter" ? "[(Blob | File | Buffer), (string | null)][]" : "[{ name: string; data: string; size?: number; is_file?: boolean; orig_name?: string}, (string | null))][]";
+}
+function yt(e, s) {
+  return s === "GallerySerializable" ? "array of [file, label] tuples" : s === "ListStringSerializable" ? "array of strings" : s === "FileSerializable" ? "array of files or single file" : e?.description;
+}
+function Ee(e, s) {
+  switch (e.msg) {
+    case "send_data":
+      return { type: "data" };
+    case "send_hash":
+      return { type: "hash" };
+    case "queue_full":
+      return {
+        type: "update",
+        status: {
+          queue: !0,
+          message: De,
+          stage: "error",
+          code: e.code,
+          success: e.success
+        }
+      };
+    case "heartbeat":
+      return {
+        type: "heartbeat"
+      };
+    case "unexpected_error":
+      return {
+        type: "unexpected_error",
+        status: {
+          queue: !0,
+          message: e.message,
+          session_not_found: e.session_not_found,
+          stage: "error",
+          success: !1
+        }
+      };
+    case "broken_connection":
+      return {
+        type: "broken_connection",
+        status: {
+          queue: !0,
+          message: e.message,
+          stage: "error",
+          success: !1
+        }
+      };
+    case "estimation":
+      return {
+        type: "update",
+        status: {
+          queue: !0,
+          stage: s || "pending",
+          code: e.code,
+          size: e.queue_size,
+          position: e.rank,
+          eta: e.rank_eta,
+          success: e.success
+        }
+      };
+    case "progress":
+      return {
+        type: "update",
+        status: {
+          queue: !0,
+          stage: "pending",
+          code: e.code,
+          progress_data: e.progress_data,
+          success: e.success
+        }
+      };
+    case "log":
+      return { type: "log", data: e };
+    case "process_generating":
+      return {
+        type: "generating",
+        status: {
+          queue: !0,
+          message: e.success ? null : e.output.error,
+          stage: e.success ? "generating" : "error",
+          code: e.code,
+          progress_data: e.progress_data,
+          eta: e.average_duration,
+          changed_state_ids: e.success ? e.output.changed_state_ids : void 0
+        },
+        data: e.success ? e.output : null
+      };
+    case "process_streaming":
+      return {
+        type: "streaming",
+        status: {
+          queue: !0,
+          message: e.output.error,
+          stage: "streaming",
+          time_limit: e.time_limit,
+          code: e.code,
+          progress_data: e.progress_data,
+          changed_state_ids: e.output.changed_state_ids,
+          eta: e.eta
+        },
+        data: e.output
+      };
+    case "process_completed":
+      return "error" in e.output ? {
+        type: "update",
+        status: {
+          queue: !0,
+          title: e.output.title ?? "Error",
+          message: e.output.error ?? "An error occurred",
+          visible: e.output.visible,
+          duration: e.output.duration,
+          stage: "error",
+          code: e.code,
+          success: e.success
+        }
+      } : {
+        type: "complete",
+        status: {
+          queue: !0,
+          message: e.success ? void 0 : e.output.error,
+          stage: e.success ? "complete" : "error",
+          code: e.code,
+          progress_data: e.progress_data,
+          changed_state_ids: e.success ? e.output.changed_state_ids : void 0,
+          used_cache: e.used_cache,
+          cache_duration: e.cache_duration,
+          avg_time: e.avg_time
+        },
+        data: e.success ? e.output : null
+      };
+    case "process_starts":
+      return {
+        type: "update",
+        status: {
+          queue: !0,
+          stage: "pending",
+          code: e.code,
+          size: e.rank,
+          position: 0,
+          success: e.success,
+          eta: e.eta
+        },
+        original_msg: "process_starts"
+      };
+  }
+  return { type: "none", status: { stage: "error", queue: !0 } };
+}
+const bt = (e = [], s) => {
+  const t = s ? s.parameters : [];
+  if (Array.isArray(e))
+    return s && t.length > 0 && e.length > t.length && console.warn("Too many arguments provided for the endpoint."), e;
+  const n = [], o = Object.keys(e);
+  return t.forEach((r, i) => {
+    if (e.hasOwnProperty(r.parameter_name))
+      n[i] = e[r.parameter_name];
+    else if (r.parameter_has_default)
+      n[i] = r.parameter_default;
+    else
+      throw new Error(
+        `No value provided for required parameter: ${r.parameter_name}`
+      );
+  }), o.forEach((r) => {
+    if (!t.some((i) => i.parameter_name === r))
+      throw new Error(
+        `Parameter \`${r}\` is not a valid keyword argument. Please refer to the API for usage.`
+      );
+  }), n.forEach((r, i) => {
+    if (r === void 0 && !t[i].parameter_has_default)
+      throw new Error(
+        `No value provided for required parameter: ${t[i].parameter_name}`
+      );
+  }), n;
+};
+async function vt() {
+  if (this.api_info) return this.api_info;
+  const { token: e } = this.options, { config: s } = this, t = {};
+  if (e && (t.Authorization = `Bearer ${e}`), !!s)
+    try {
+      let n, o;
+      if (typeof window < "u" && window.gradio_api_info)
+        o = window.gradio_api_info;
+      else {
+        const r = ae(s.root, this.api_prefix, Qe);
+        if (n = await this.fetch(r, {
+          headers: t,
+          credentials: this.options.credentials ?? "same-origin"
+        }), !n.ok)
+          throw new Error(N);
+        o = await n.json();
+      }
+      return "api" in o && (o = o.api), o.named_endpoints["/predict"] && !o.unnamed_endpoints[0] && (o.unnamed_endpoints[0] = o.named_endpoints["/predict"]), mt(o, s, this.api_map);
+    } catch (n) {
+      throw new Error("Could not get API info. " + n.message);
+    }
+}
+async function Et(e, s, t) {
+  const n = {};
+  this?.options?.token && (n.Authorization = `Bearer ${this.options.token}`);
+  const o = 1e3, r = [];
+  let i;
+  for (let a = 0; a < s.length; a += o) {
+    const u = s.slice(a, a + o), l = new FormData();
+    u.forEach((c) => {
+      l.append("files", c);
+    });
+    try {
+      const c = t ? `${e}${this.api_prefix}/${ye}?upload_id=${t}` : `${e}${this.api_prefix}/${ye}`;
+      i = await this.fetch(c, {
+        method: "POST",
+        body: l,
+        headers: n,
+        credentials: this.options.credentials ?? "same-origin"
+      });
+    } catch (c) {
+      throw new Error(N + c.message);
+    }
+    if (!i.ok) {
+      const c = await i.text();
+      return { error: `HTTP ${i.status}: ${c}` };
+    }
+    const p = await i.json();
+    p && r.push(...p);
+  }
+  return { files: r };
+}
+const St = {
+  radix: 1e3,
+  unit: ["b", "kb", "Mb", "Gb", "Tb", "Pb", "Eb", "Zb", "Yb"]
+}, $t = {
+  radix: 1024,
+  unit: ["b", "Kib", "Mib", "Gib", "Tib", "Pib", "Eib", "Zib", "Yib"]
+}, kt = {
+  radix: 1024,
+  unit: ["b", "Kb", "Mb", "Gb", "Tb", "Pb", "Eb", "Zb", "Yb"]
+}, Se = {
+  si: St,
+  iec: $t,
+  jedec: kt
+};
+function Rt(e, s = 1, t = "jedec") {
+  e = Math.abs(e);
+  const { radix: n, unit: o } = Se[t] || Se.jedec;
+  let r = 0;
+  for (; e >= n; )
+    e /= n, ++r;
+  return `${e.toFixed(s)} ${o[r]}`;
+}
+async function Ot(e, s, t, n) {
+  let o = (Array.isArray(e) ? e : [e]).map(
+    (i) => i.blob
+  );
+  const r = o.filter(
+    (i) => i.size > (n ?? 1 / 0)
+  );
+  if (r.length)
+    throw new Error(
+      `File(s) exceed the maximum allowed size of ${Rt(n || 1 / 0)}: ${r.map((i) => `"${i.name}"`).join(", ")}`
+    );
+  return await Promise.all(
+    await this.upload_files(s, o, t).then(
+      async (i) => {
+        if (i.error)
+          throw new Error(i.error);
+        return i.files ? i.files.map((a, u) => new Q({
+          ...e[u],
+          path: a,
+          url: `${s}${this.api_prefix}/file=${a}`
+        })) : [];
+      }
+    )
+  );
+}
+async function ns(e, s) {
+  return e.map(
+    (t) => new Q({
+      path: t.name,
+      orig_name: t.name,
+      blob: t,
+      size: t.size,
+      mime_type: t.type,
+      is_stream: s
+    })
+  );
+}
+class Q {
+  path;
+  url;
+  orig_name;
+  size;
+  blob;
+  is_stream;
+  mime_type;
+  alt_text;
+  b64;
+  meta = { _type: "gradio.FileData" };
+  constructor({
+    path: s,
+    url: t,
+    orig_name: n,
+    size: o,
+    blob: r,
+    is_stream: i,
+    mime_type: a,
+    alt_text: u,
+    b64: l
+  }) {
+    this.path = s, this.url = t, this.orig_name = n, this.size = o, this.blob = t ? void 0 : r, this.is_stream = i, this.mime_type = a, this.alt_text = u, this.b64 = l;
+  }
+}
+class Ie {
+  type;
+  command;
+  meta;
+  fileData;
+  constructor(s, t) {
+    this.type = "command", this.command = s, this.meta = t;
+  }
+}
+const At = typeof process < "u" && process.versions && process.versions.node;
+function $e(e, s, t) {
+  for (; t.length > 1; ) {
+    const o = t.shift();
+    if (typeof o == "string" || typeof o == "number")
+      e = e[o];
+    else
+      throw new Error("Invalid key type");
+  }
+  const n = t.shift();
+  if (typeof n == "string" || typeof n == "number")
+    e[n] = s;
+  else
+    throw new Error("Invalid key type");
+}
+async function ce(e, s = void 0, t = [], n = !1, o = void 0) {
+  if (Array.isArray(e)) {
+    let r = [];
+    return await Promise.all(
+      e.map(async (i, a) => {
+        let u = t.slice();
+        u.push(String(a));
+        const l = await ce(
+          e[a],
+          n ? o?.parameters[a]?.component || void 0 : s,
+          u,
+          !1,
+          o
+        );
+        r = r.concat(l);
+      })
+    ), r;
+  } else {
+    if (globalThis.Buffer && e instanceof globalThis.Buffer || e instanceof Blob)
+      return [
+        {
+          path: t,
+          blob: new Blob([e]),
+          type: s
+        }
+      ];
+    if (typeof e == "object" && e !== null) {
+      let r = [];
+      for (const i of Object.keys(e)) {
+        const a = [...t, i], u = e[i];
+        r = r.concat(
+          await ce(
+            u,
+            void 0,
+            a,
+            !1,
+            o
+          )
+        );
+      }
+      return r;
+    }
+  }
+  return [];
+}
+function Tt(e, s) {
+  let t = s?.dependencies?.find((n) => n.id == e)?.queue;
+  return t != null ? !t : !s.enable_queue;
+}
+function xt(e, s) {
+  return new Promise((t, n) => {
+    const o = new MessageChannel();
+    o.port1.onmessage = (({ data: r }) => {
+      o.port1.close(), t(r);
+    }), window.parent.postMessage(e, s, [o.port2]);
+  });
+}
+function is(e) {
+  if (typeof e == "string") {
+    if (e.startsWith("http://") || e.startsWith("https://"))
+      return {
+        path: e,
+        url: e,
+        orig_name: e.split("/").pop() ?? "unknown",
+        meta: { _type: "gradio.FileData" }
+      };
+    if (At)
+      return new Ie("upload_file", {
+        path: e,
+        name: e,
+        orig_path: e
+      });
+  } else {
+    if (typeof File < "u" && e instanceof File)
+      return new Blob([e]);
+    if (e instanceof Buffer)
+      return new Blob([e]);
+    if (e instanceof Blob)
+      return e;
+  }
+  throw new Error(
+    "Invalid input: must be a URL, File, Blob, or Buffer object."
+  );
+}
+function V(e, s, t, n, o = !1) {
+  if (n === "input" && !o)
+    throw new Error("Invalid code path. Cannot skip state inputs for input.");
+  if (n === "output" && o)
+    return e;
+  let r = [], i = 0;
+  const a = n === "input" ? s.inputs : s.outputs;
+  for (let u = 0; u < a.length; u++) {
+    const l = a[u];
+    if (t.find((c) => c.id === l)?.type === "state") {
+      if (o)
+        if (e.length === a.length) {
+          const c = e[i];
+          r.push(c), i++;
+        } else
+          r.push(null);
+      else {
+        i++;
+        continue;
+      }
+      continue;
+    } else {
+      const c = e[i];
+      r.push(c), i++;
+    }
+  }
+  return r;
+}
+async function Dt(e, s, t) {
+  const n = this;
+  await Lt(n, s);
+  const o = await ce(
+    s,
+    void 0,
+    [],
+    !0,
+    t
+  );
+  return (await Promise.all(
+    o.map(async ({ path: i, blob: a, type: u }) => {
+      if (!a) return { path: i, type: u };
+      const l = await n.upload_files(e, [a]), p = l.files && l.files[0];
+      return {
+        path: i,
+        file_url: p,
+        type: u,
+        name: typeof File < "u" && a instanceof File ? a?.name : void 0
+      };
+    })
+  )).forEach(({ path: i, file_url: a, type: u, name: l }) => {
+    if (u === "Gallery")
+      $e(s, a, i);
+    else if (a) {
+      const p = new Q({ path: a, orig_name: l });
+      $e(s, p, i);
+    }
+  }), s;
+}
+async function Lt(e, s) {
+  if (!(e.config?.root || e.config?.root_url))
+    throw new Error(Ne);
+  await Ue(e, s);
+}
+async function Ue(e, s, t = []) {
+  for (const n in s)
+    s[n] instanceof Ie ? await Nt(e, s, n) : typeof s[n] == "object" && s[n] !== null && await Ue(e, s[n], [...t, n]);
+}
+async function Nt(e, s, t) {
+  let n = s[t];
+  const o = e.config?.root || e.config?.root_url;
+  if (!o)
+    throw new Error(Ne);
+  try {
+    let r, i;
+    if (typeof process < "u" && process.versions && process.versions.node) {
+      const p = await import("./__vite-browser-external-DYxpcVy9.js");
+      i = (await import("./__vite-browser-external-DYxpcVy9.js")).resolve(process.cwd(), n.meta.path), r = await p.readFile(i);
+    } else
+      throw new Error(pt);
+    const a = new Blob([r], {
+      type: "application/octet-stream"
+    }), u = await e.upload_files(o, [a]), l = u.files && u.files[0];
+    if (l) {
+      const p = new Q({
+        path: l,
+        orig_name: n.meta.name || ""
+      });
+      s[t] = p;
+    }
+  } catch (r) {
+    console.error(dt, r);
+  }
+}
+async function Ct(e, s, t) {
+  const n = { "Content-Type": "application/json" };
+  this.options.token && (n.Authorization = `Bearer ${this.options.token}`);
+  try {
+    var o = await this.fetch(e, {
+      method: "POST",
+      body: JSON.stringify(s),
+      headers: { ...n, ...t },
+      credentials: this.options.credentials ?? "same-origin"
+    });
+  } catch {
+    return [{ error: N }, 500];
+  }
+  let r, i;
+  try {
+    r = await o.json(), i = o.status;
+  } catch (a) {
+    r = { error: `Could not parse server response: ${a}` }, i = 500;
+  }
+  return [r, i];
+}
+async function Pt(e, s = {}) {
+  let t = !1, n = !1;
+  if (!this.config)
+    throw new Error("Could not resolve app config");
+  if (typeof e == "number")
+    this.config.dependencies.find((i) => i.id == e);
+  else {
+    const i = e.replace(/^\//, "");
+    this.config.dependencies.find(
+      (a) => a.id == this.api_map[i]
+    );
+  }
+  const o = this.submit(e, s, null, null, !0);
+  let r;
+  for await (const i of o) {
+    if (i.type === "data" && (t = !0, r = i, n))
+      return r;
+    if (i.type === "status") {
+      if (i.stage === "error")
+        throw i;
+      if (i.stage === "complete" && (n = !0, t))
+        return r;
+    }
+  }
+  return r;
+}
+async function F(e, s, t) {
+  let n = s === "subdomain" ? `https://huggingface.co/api/spaces/by-subdomain/${e}` : `https://huggingface.co/api/spaces/${e}`, o, r;
+  try {
+    if (o = await fetch(n), r = o.status, r !== 200)
+      throw new Error();
+    o = await o.json();
+  } catch {
+    t({
+      status: "error",
+      load_status: "error",
+      message: rt,
+      detail: "NOT_FOUND"
+    });
+    return;
+  }
+  if (!o || r !== 200) return;
+  const {
+    runtime: { stage: i },
+    id: a
+  } = o;
+  switch (i) {
+    case "STOPPED":
+    case "SLEEPING":
+      t({
+        status: "sleeping",
+        load_status: "pending",
+        message: "Space is asleep. Waking it up...",
+        detail: i
+      }), setTimeout(() => {
+        F(e, s, t);
+      }, 1e3);
+      break;
+    case "PAUSED":
+      t({
+        status: "paused",
+        load_status: "error",
+        message: "This space has been paused by the author. If you would like to try this demo, consider duplicating the space.",
+        detail: i,
+        discussions_enabled: await ke(a)
+      });
+      break;
+    case "RUNNING":
+    case "RUNNING_BUILDING":
+      t({
+        status: "running",
+        load_status: "complete",
+        message: "Space is running.",
+        detail: i
+      });
+      break;
+    case "BUILDING":
+      t({
+        status: "building",
+        load_status: "pending",
+        message: "Space is building...",
+        detail: i
+      }), setTimeout(() => {
+        F(e, s, t);
+      }, 1e3);
+      break;
+    case "APP_STARTING":
+      t({
+        status: "starting",
+        load_status: "pending",
+        message: "Space is starting...",
+        detail: i
+      }), setTimeout(() => {
+        F(e, s, t);
+      }, 1e3);
+      break;
+    default:
+      t({
+        status: "space_error",
+        load_status: "error",
+        message: "This space is experiencing an issue.",
+        detail: i,
+        discussions_enabled: await ke(a)
+      });
+      break;
+  }
+}
+const je = async (e, s) => {
+  let t = 0;
+  const n = 12, o = 5e3;
+  return new Promise((r) => {
+    F(
+      e,
+      le.test(e) ? "space_name" : "subdomain",
+      (i) => {
+        s(i), i.status === "running" || i.status === "error" || i.status === "paused" || i.status === "space_error" ? r() : (i.status === "sleeping" || i.status === "building") && (t < n ? (t++, setTimeout(() => {
+          je(e, s).then(r);
+        }, o)) : r());
+      }
+    );
+  });
+}, It = /^(?=[^]*\b[dD]iscussions{0,1}\b)(?=[^]*\b[dD]isabled\b)[^]*$/;
+async function ke(e) {
+  try {
+    const s = await fetch(
+      `https://huggingface.co/api/spaces/${e}/discussions`,
+      {
+        method: "HEAD"
+      }
+    ), t = s.headers.get("x-error-message");
+    return !(!s.ok || t && It.test(t));
+  } catch {
+    return !1;
+  }
+}
+async function Ut(e, s) {
+  const t = {};
+  s && (t.Authorization = `Bearer ${s}`);
+  try {
+    const n = await fetch(
+      `https://huggingface.co/api/spaces/${e}/${Xe}`,
+      { headers: t }
+    );
+    if (n.status !== 200)
+      throw new Error("Space hardware could not be obtained.");
+    const { hardware: o } = await n.json();
+    return o.current;
+  } catch (n) {
+    throw new Error(n.message);
+  }
+}
+async function jt(e, s, t) {
+  const n = {};
+  t && (n.Authorization = `Bearer ${t}`);
+  const o = {
+    seconds: s
+  };
+  try {
+    const r = await fetch(
+      `https://huggingface.co/api/spaces/${e}/${et}`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...n },
+        body: JSON.stringify(o)
+      }
+    );
+    if (r.status !== 200)
+      throw new Error(
+        "Could not set sleep timeout on duplicated Space. Please visit *ADD HF LINK TO SETTINGS* to set a timeout manually to reduce billing charges."
+      );
+    return await r.json();
+  } catch (r) {
+    throw new Error(r.message);
+  }
+}
+const Re = [
+  "cpu-basic",
+  "cpu-upgrade",
+  "cpu-xl",
+  "t4-small",
+  "t4-medium",
+  "a10g-small",
+  "a10g-large",
+  "a10g-largex2",
+  "a10g-largex4",
+  "a100-large",
+  "zero-a10g",
+  "h100",
+  "h100x8"
+];
+async function qt(e, s) {
+  const { token: t, private: n, hardware: o, timeout: r, auth: i } = s;
+  if (o && !Re.includes(o))
+    throw new Error(
+      `Invalid hardware type provided. Valid types are: ${Re.map((m) => `"${m}"`).join(",")}.`
+    );
+  const { http_protocol: a, host: u } = await pe(e, t);
+  let l = null;
+  if (i) {
+    const m = await Ce(
+      a,
+      u,
+      i,
+      fetch,
+      void 0,
+      s.credentials
+    );
+    m && (l = Pe(m));
+  }
+  const p = {
+    Authorization: `Bearer ${t}`,
+    "Content-Type": "application/json",
+    ...l ? { Cookie: l.join("; ") } : {}
+  }, c = (await (await fetch("https://huggingface.co/api/whoami-v2", {
+    headers: p
+  })).json()).name, g = e.split("/")[1], w = {
+    repository: `${c}/${g}`
+  };
+  n && (w.private = !0);
+  let C;
+  try {
+    o || (C = await Ut(e, t));
+  } catch (m) {
+    throw Error(ue + m.message);
+  }
+  const f = o || C || "cpu-basic";
+  w.hardware = f;
+  try {
+    const m = await fetch(
+      `https://huggingface.co/api/spaces/${e}/duplicate`,
+      {
+        method: "POST",
+        headers: p,
+        body: JSON.stringify(w)
+      }
+    );
+    if (m.status === 409)
+      try {
+        return await Y.connect(`${c}/${g}`, s);
+      } catch (z) {
+        throw console.error("Failed to connect Client instance:", z), z;
+      }
+    else if (m.status !== 200)
+      throw new Error(m.statusText);
+    const H = await m.json();
+    return await jt(`${c}/${g}`, r || 300, t), await Y.connect(
+      zt(H.url),
+      s
+    );
+  } catch (m) {
+    throw new Error(m);
+  }
+}
+function zt(e) {
+  const s = /https:\/\/huggingface.co\/spaces\/([^/]+\/[^/]+)/, t = e.match(s);
+  if (t)
+    return t[1];
+}
+const Oe = "supports-zerogpu-headers";
+let Ae = !1;
+function Bt() {
+  return typeof window < "u" && typeof document < "u" && typeof window.addEventListener == "function";
+}
+function qe(e) {
+  return e.includes(".dev.") ? `https://moon-${e.split(".")[1]}.dev.spaces.huggingface.tech` : e.endsWith(".hf.space") ? "https://huggingface.co" : null;
+}
+function Gt() {
+  if (!Bt() || Ae)
+    return;
+  window.addEventListener("message", (s) => {
+    s.data === Oe && (window.supports_zerogpu_headers = !0);
+  }), Ae = !0;
+  const e = qe(window.location.hostname);
+  e && window.parent !== window && window.parent.postMessage(Oe, e);
+}
+class Mt extends TransformStream {
+  #e = "";
+  /** Constructs a new instance. */
+  constructor(s = { allowCR: !1 }) {
+    super({
+      transform: (t, n) => {
+        for (t = this.#e + t; ; ) {
+          const o = t.indexOf(`
+`), r = s.allowCR ? t.indexOf("\r") : -1;
+          if (r !== -1 && r !== t.length - 1 && (o === -1 || o - 1 > r)) {
+            n.enqueue(t.slice(0, r)), t = t.slice(r + 1);
+            continue;
+          }
+          if (o === -1)
+            break;
+          const i = t[o - 1] === "\r" ? o - 1 : o;
+          n.enqueue(t.slice(0, i)), t = t.slice(o + 1);
+        }
+        this.#e = t;
+      },
+      flush: (t) => {
+        if (this.#e === "")
+          return;
+        const n = s.allowCR && this.#e.endsWith("\r") ? this.#e.slice(0, -1) : this.#e;
+        t.enqueue(n);
+      }
+    });
+  }
+}
+function Ft(e) {
+  let s = new TextDecoderStream(), t = new Mt({ allowCR: !0 });
+  return e.pipeThrough(s).pipeThrough(t);
+}
+function Ht(e) {
+  let t = /[:]\s*/.exec(e), n = t && t.index;
+  if (n)
+    return [
+      e.substring(0, n),
+      e.substring(n + t[0].length)
+    ];
+}
+function Te(e, s, t) {
+  e.get(s) || e.set(s, t);
+}
+async function* Jt(e, s) {
+  if (!e.body)
+    return;
+  let t = Ft(e.body), n, o = t.getReader(), r;
+  for (; ; ) {
+    if (s && s.aborted)
+      return o.cancel();
+    if (n = await o.read(), n.done)
+      return;
+    if (!n.value) {
+      r && (yield r), r = void 0;
+      continue;
+    }
+    let [i, a] = Ht(n.value) || [];
+    i === "data" ? (r ||= {}, r[i] = r[i] ? r[i] + `
+` + a : a) : i === "event" ? (r ||= {}, r[i] = a) : i === "id" ? (r ||= {}, r[i] = String(+a) === a ? +a : a) : i === "retry" && (r ||= {}, r[i] = +a || void 0);
+  }
+}
+async function Wt(e, s) {
+  let t = new Request(e, s);
+  Te(t.headers, "Accept", "text/event-stream"), Te(t.headers, "Content-Type", "application/json");
+  let n = await fetch(t);
+  if (!n.ok)
+    throw n;
+  return Jt(n, t.signal);
+}
+async function Zt() {
+  let {
+    event_callbacks: e,
+    unclosed_events: s,
+    pending_stream_messages: t,
+    stream_status: n,
+    config: o,
+    jwt: r
+  } = this;
+  const i = this;
+  if (!o)
+    throw new Error("Could not resolve app config");
+  n.open = !0;
+  let a = null, u = new URLSearchParams({
+    session_hash: this.session_hash
+  }).toString(), l = new URL(`${o.root}${this.api_prefix}/${xe}?${u}`);
+  if (r && l.searchParams.set("__sign", r), a = this.stream(l), !a) {
+    console.warn("Cannot connect to SSE endpoint: " + l.toString());
+    return;
+  }
+  a.onmessage = async function(p) {
+    let c = JSON.parse(p.data);
+    if (c.msg === "close_stream") {
+      de(n, i.abort_controller);
+      return;
+    }
+    const g = c.event_id;
+    if (!g)
+      await Promise.all(
+        Object.keys(e).map(
+          (w) => e[w](c)
+        )
+      );
+    else if (e[g] && o) {
+      c.msg === "process_completed" && ["sse", "sse_v1", "sse_v2", "sse_v2.1", "sse_v3"].includes(
+        o.protocol
+      ) && s.delete(g);
+      let w = e[g];
+      typeof window < "u" && typeof document < "u" ? setTimeout(w, 0, c) : w(c);
+    } else
+      t[g] || (t[g] = []), t[g].push(c);
+  }, a.onerror = async function(p) {
+    console.error(p), await Promise.all(
+      Object.keys(e).map(
+        (c) => e[c]({
+          msg: "broken_connection",
+          message: N
+        })
+      )
+    );
+  };
+}
+function de(e, s) {
+  e && (e.open = !1, s?.abort());
+}
+function Kt(e, s, t) {
+  !e[s] ? (e[s] = [], t.data.forEach((o, r) => {
+    e[s][r] = o;
+  })) : t.data.forEach((o, r) => {
+    let i = Vt(e[s][r], o);
+    e[s][r] = i, t.data[r] = i;
+  });
+}
+function Vt(e, s) {
+  return s.forEach(([t, n, o]) => {
+    e = Yt(e, n, t, o);
+  }), e;
+}
+function Yt(e, s, t, n) {
+  if (s.length === 0) {
+    if (t === "replace")
+      return n;
+    if (t === "append")
+      return e + n;
+    throw new Error(`Unsupported action: ${t}`);
+  }
+  let o = e;
+  for (let i = 0; i < s.length - 1; i++)
+    o = o[s[i]];
+  const r = s[s.length - 1];
+  switch (t) {
+    case "replace":
+      o[r] = n;
+      break;
+    case "append":
+      o[r] += n;
+      break;
+    case "add":
+      Array.isArray(o) ? o.splice(Number(r), 0, n) : o[r] = n;
+      break;
+    case "delete":
+      Array.isArray(o) ? o.splice(Number(r), 1) : delete o[r];
+      break;
+    default:
+      throw new Error(`Unknown action: ${t}`);
+  }
+  return e;
+}
+function Qt(e, s = {}) {
+  const t = {
+    close: () => {
+      console.warn("Method not implemented.");
+    },
+    onerror: null,
+    onmessage: null,
+    onopen: null,
+    readyState: 0,
+    url: e.toString(),
+    withCredentials: !1,
+    CONNECTING: 0,
+    OPEN: 1,
+    CLOSED: 2,
+    addEventListener: () => {
+      throw new Error("Method not implemented.");
+    },
+    dispatchEvent: () => {
+      throw new Error("Method not implemented.");
+    },
+    removeEventListener: () => {
+      throw new Error("Method not implemented.");
+    }
+  };
+  return Wt(e, s).then(async (n) => {
+    t.readyState = t.OPEN;
+    try {
+      for await (const o of n)
+        t.onmessage && t.onmessage(o);
+      t.readyState = t.CLOSED;
+    } catch (o) {
+      t.onerror && t.onerror(o), t.readyState = t.CLOSED;
+    }
+  }).catch((n) => {
+    console.error(n), t.onerror && t.onerror(n), t.readyState = t.CLOSED;
+  }), t;
+}
+function Xt(e, s = {}, t, n, o, r) {
+  try {
+    let i = function(h) {
+      (o || Me[h.type]) && p(h);
+    }, a = function() {
+      for (me = !0; M.length > 0; )
+        M.shift()({
+          value: void 0,
+          done: !0
+        });
+    }, u = function(h) {
+      M.length > 0 ? M.shift()(h) : ie.push(h);
+    }, l = function(h) {
+      u(es(h)), a();
+    }, p = function(h) {
+      u({ value: h, done: !1 });
+    }, c = function() {
+      return ie.length > 0 ? Promise.resolve(ie.shift()) : me ? Promise.resolve({ value: void 0, done: !0 }) : new Promise((h) => M.push(h));
+    };
+    const { token: g } = this.options, {
+      fetch: w,
+      app_reference: C,
+      config: f,
+      session_hash: m,
+      api_info: H,
+      api_map: z,
+      stream_status: X,
+      pending_stream_messages: ee,
+      pending_diff_streams: te,
+      event_callbacks: se,
+      unclosed_events: ze,
+      post_data: ne,
+      options: J,
+      api_prefix: A
+    } = this, he = r || { "x-gradio-user": "api" }, Be = this;
+    if (!H) throw new Error("No API found");
+    if (!f) throw new Error("Could not resolve app config");
+    let { fn_index: d, endpoint_info: fe, dependency: B } = ts(
+      H,
+      e,
+      z,
+      f
+    ), Ge = bt(s, fe), I, T = f.protocol ?? "ws";
+    if (T === "ws")
+      throw new Error("WebSocket protocol is not supported in this version");
+    let U = "", ss = () => U;
+    const _ = typeof e == "number" ? "/predict" : e;
+    let W, v = null, x = !1, _e = {}, G = typeof window < "u" && typeof document < "u" ? new URLSearchParams(window.location.search).toString() : "";
+    const Me = J?.events?.reduce(
+      (h, R) => (h[R] = !0, h),
+      {}
+    ) || {};
+    async function Fe() {
+      let h = {}, R = {};
+      h = { event_id: v }, R = { event_id: v, session_hash: m, fn_index: d };
+      try {
+        if (!f)
+          throw new Error("Could not resolve app config");
+        "event_id" in R && await w(`${f.root}${A}/${it}`, {
+          headers: { "Content-Type": "application/json" },
+          method: "POST",
+          body: JSON.stringify(R)
+        }), await w(`${f.root}${A}/${nt}`, {
+          headers: { "Content-Type": "application/json" },
+          method: "POST",
+          body: JSON.stringify(h)
+        });
+      } catch {
+        console.warn(
+          "The `/reset` endpoint could not be called. Subsequent endpoint results may be unreliable."
+        );
+      }
+    }
+    const He = async (h) => {
+      await this._resolve_heartbeat(h);
+    };
+    async function ge(h) {
+      if (!f) return;
+      let R = h.render_id;
+      f.components = [
+        ...f.components.filter((E) => E.props.rendered_in !== R),
+        ...h.components
+      ], f.dependencies = [
+        ...f.dependencies.filter((E) => E.rendered_in !== R),
+        ...h.dependencies
+      ];
+      const Z = f.components.some((E) => E.type === "state"), y = f.dependencies.some(
+        (E) => E.targets.some((j) => j[1] === "unload")
+      );
+      f.connect_heartbeat = Z || y, await He(f), i({
+        type: "render",
+        data: h,
+        endpoint: _,
+        fn_index: d
+      });
+    }
+    const Je = this.handle_blob(
+      f.root,
+      Ge,
+      fe
+    ).then(async (h) => {
+      if (W = {
+        data: V(
+          h,
+          B,
+          f.components,
+          "input",
+          !0
+        ) || [],
+        event_data: t,
+        fn_index: d,
+        trigger_id: n
+      }, Tt(d, f))
+        i({
+          type: "status",
+          endpoint: _,
+          stage: "pending",
+          queue: !1,
+          fn_index: d,
+          time: /* @__PURE__ */ new Date()
+        }), ne(
+          `${f.root}${A}/run${_.startsWith("/") ? _ : `/${_}`}${G ? "?" + G : ""}`,
+          {
+            ...W,
+            session_hash: m
+          },
+          he
+        ).then(async ([y, E]) => {
+          const j = y.data;
+          if (E == 200)
+            i({
+              type: "data",
+              endpoint: _,
+              fn_index: d,
+              data: V(
+                j,
+                B,
+                f.components,
+                "output",
+                J.with_null_state
+              ),
+              time: /* @__PURE__ */ new Date(),
+              event_data: t,
+              trigger_id: n
+            }), y.render_config && await ge(y.render_config), i({
+              type: "status",
+              endpoint: _,
+              fn_index: d,
+              stage: "complete",
+              eta: y.average_duration,
+              queue: !1,
+              time: /* @__PURE__ */ new Date()
+            });
+          else {
+            const O = y?.error === N;
+            i({
+              type: "status",
+              stage: "error",
+              endpoint: _,
+              fn_index: d,
+              message: y.error,
+              broken: O,
+              queue: !1,
+              time: /* @__PURE__ */ new Date()
+            });
+          }
+        }).catch((y) => {
+          i({
+            type: "status",
+            stage: "error",
+            message: y.message,
+            endpoint: _,
+            fn_index: d,
+            queue: !1,
+            time: /* @__PURE__ */ new Date()
+          });
+        });
+      else if (T == "sse") {
+        i({
+          type: "status",
+          stage: "pending",
+          queue: !0,
+          endpoint: _,
+          fn_index: d,
+          time: /* @__PURE__ */ new Date()
+        });
+        var Z = new URLSearchParams({
+          fn_index: d.toString(),
+          session_hash: m
+        }).toString();
+        let y = new URL(
+          `${f.root}${A}/${xe}?${G ? G + "&" : ""}${Z}`
+        );
+        if (this.jwt && y.searchParams.set("__sign", this.jwt), I = this.stream(y), !I)
+          return Promise.reject(
+            new Error("Cannot connect to SSE endpoint: " + y.toString())
+          );
+        I.onmessage = async function(E) {
+          const j = JSON.parse(E.data), { type: O, status: D, data: b } = Ee(
+            j,
+            _e[d]
+          );
+          if (O === "update" && D && !x)
+            i({
+              type: "status",
+              endpoint: _,
+              fn_index: d,
+              time: /* @__PURE__ */ new Date(),
+              ...D
+            }), D.stage === "error" && (I?.close(), a());
+          else if (O === "data") {
+            let [q, P] = await ne(
+              `${f.root}${A}/queue/data`,
+              {
+                ...W,
+                session_hash: m,
+                event_id: v
+              }
+            );
+            P !== 200 && (i({
+              type: "status",
+              stage: "error",
+              message: N,
+              queue: !0,
+              endpoint: _,
+              fn_index: d,
+              time: /* @__PURE__ */ new Date()
+            }), I?.close(), a());
+          } else O === "complete" ? x = D : O === "log" ? i({
+            type: "log",
+            title: b.title,
+            log: b.log,
+            level: b.level,
+            endpoint: _,
+            duration: b.duration,
+            visible: b.visible,
+            fn_index: d
+          }) : (O === "generating" || O === "streaming") && i({
+            type: "status",
+            time: /* @__PURE__ */ new Date(),
+            ...D,
+            stage: D?.stage,
+            queue: !0,
+            endpoint: _,
+            fn_index: d
+          });
+          b && (i({
+            type: "data",
+            time: /* @__PURE__ */ new Date(),
+            data: V(
+              b.data,
+              B,
+              f.components,
+              "output",
+              J.with_null_state
+            ),
+            endpoint: _,
+            fn_index: d,
+            event_data: t,
+            trigger_id: n
+          }), x && (i({
+            type: "status",
+            time: /* @__PURE__ */ new Date(),
+            ...x,
+            stage: D?.stage,
+            queue: !0,
+            endpoint: _,
+            fn_index: d
+          }), I?.close(), a()));
+        };
+      } else if (T == "sse_v1" || T == "sse_v2" || T == "sse_v2.1" || T == "sse_v3") {
+        i({
+          type: "status",
+          stage: "pending",
+          queue: !0,
+          endpoint: _,
+          fn_index: d,
+          time: /* @__PURE__ */ new Date()
+        });
+        let y = "";
+        typeof window < "u" && typeof document < "u" && (y = window?.location?.hostname);
+        const E = qe(y);
+        return (typeof window < "u" && typeof document < "u" && window.parent != window && !!E && window.supports_zerogpu_headers ? xt("zerogpu-headers", E) : Promise.resolve(null)).then((b) => {
+          const q = { ...he, ...b || {} };
+          return ne(
+            `${f.root}${A}/${Ve}?${G}`,
+            {
+              ...W,
+              session_hash: m
+            },
+            q
+          );
+        }).then(async ([b, q]) => {
+          if (b.event_id && (U = b.event_id), q === 503)
+            i({
+              type: "status",
+              stage: "error",
+              message: De,
+              queue: !0,
+              endpoint: _,
+              fn_index: d,
+              time: /* @__PURE__ */ new Date(),
+              visible: !0
+            }), a();
+          else if (q === 422)
+            i({
+              type: "status",
+              stage: "error",
+              message: b.detail,
+              queue: !0,
+              endpoint: _,
+              fn_index: d,
+              code: "validation_error",
+              time: /* @__PURE__ */ new Date(),
+              visible: !0
+            }), a();
+          else if (q !== 200) {
+            const P = b?.error === N;
+            i({
+              type: "status",
+              stage: "error",
+              broken: P,
+              message: P ? N : b.detail || b.error,
+              queue: !0,
+              endpoint: _,
+              fn_index: d,
+              time: /* @__PURE__ */ new Date(),
+              visible: !0
+            }), a();
+          } else {
+            v = b.event_id, U = v;
+            let P = async function(oe) {
+              try {
+                const { type: S, status: $, data: k, original_msg: We } = Ee(
+                  oe,
+                  _e[d]
+                );
+                if (S == "heartbeat")
+                  return;
+                if (S === "update" && $ && !x)
+                  i({
+                    type: "status",
+                    endpoint: _,
+                    fn_index: d,
+                    time: /* @__PURE__ */ new Date(),
+                    original_msg: We,
+                    ...$
+                  });
+                else if (S === "complete")
+                  x = $;
+                else if (S == "unexpected_error" || S == "broken_connection") {
+                  console.error("Unexpected error", $?.message);
+                  const Ze = S === "broken_connection";
+                  i({
+                    type: "status",
+                    stage: "error",
+                    message: $?.message || "An Unexpected Error Occurred!",
+                    queue: !0,
+                    endpoint: _,
+                    broken: Ze,
+                    session_not_found: $?.session_not_found,
+                    fn_index: d,
+                    time: /* @__PURE__ */ new Date()
+                  });
+                } else if (S === "log") {
+                  i({
+                    type: "log",
+                    title: k.title,
+                    log: k.log,
+                    level: k.level,
+                    endpoint: _,
+                    duration: k.duration,
+                    visible: k.visible,
+                    fn_index: d
+                  });
+                  return;
+                } else (S === "generating" || S === "streaming") && (i({
+                  type: "status",
+                  time: /* @__PURE__ */ new Date(),
+                  ...$,
+                  stage: $?.stage,
+                  queue: !0,
+                  endpoint: _,
+                  fn_index: d
+                }), k && B.connection !== "stream" && ["sse_v2", "sse_v2.1", "sse_v3"].includes(T) && Kt(te, v, k));
+                k && (i({
+                  type: "data",
+                  time: /* @__PURE__ */ new Date(),
+                  data: V(
+                    k.data,
+                    B,
+                    f.components,
+                    "output",
+                    J.with_null_state
+                  ),
+                  endpoint: _,
+                  fn_index: d
+                }), k.render_config && await ge(k.render_config), x && (i({
+                  type: "status",
+                  time: /* @__PURE__ */ new Date(),
+                  ...x,
+                  stage: $?.stage,
+                  queue: !0,
+                  endpoint: _,
+                  fn_index: d
+                }), a())), ($?.stage === "complete" || $?.stage === "error") && (se[v] && delete se[v], v in te && delete te[v], a());
+              } catch (S) {
+                console.error("Unexpected client exception", S), i({
+                  type: "status",
+                  stage: "error",
+                  message: "An Unexpected Error Occurred!",
+                  queue: !0,
+                  endpoint: _,
+                  fn_index: d,
+                  time: /* @__PURE__ */ new Date()
+                }), ["sse_v2", "sse_v2.1", "sse_v3"].includes(T) && (de(X, Be.abort_controller), X.open = !1, a());
+              }
+            };
+            v in ee && (ee[v].forEach((oe) => P(oe)), delete ee[v]), se[v] = P, ze.add(v), X.open || await this.open_stream();
+          }
+        });
+      }
+    });
+    let me = !1;
+    const ie = [], M = [], we = {
+      [Symbol.asyncIterator]: () => we,
+      next: c,
+      throw: async (h) => (l(h), c()),
+      return: async () => (a(), { value: void 0, done: !0 }),
+      cancel: Fe,
+      send_chunk: (h) => {
+        this.post_data(`${f.root}${A}/stream/${U}`, {
+          ...h,
+          session_hash: this.session_hash
+        });
+      },
+      close_stream: () => {
+        this.post_data(
+          `${f.root}${A}/stream/${U}/close`,
+          {}
+        ), a();
+      },
+      event_id: () => U,
+      wait_for_id: async () => (await Je, v)
+    };
+    return we;
+  } catch (i) {
+    throw console.error("Submit function encountered an error:", i), i;
+  }
+}
+function es(e) {
+  return {
+    then: (s, t) => t(e)
+  };
+}
+function ts(e, s, t, n) {
+  let o, r, i;
+  if (typeof s == "number")
+    o = s, r = e.unnamed_endpoints[o], i = n.dependencies.find((a) => a.id == s);
+  else {
+    const a = s.replace(/^\//, "");
+    o = t[a], r = e.named_endpoints[s.trim()], i = n.dependencies.find(
+      (u) => u.id == t[a]
+    );
+  }
+  if (typeof o != "number")
+    throw new Error(
+      "There is no endpoint matching that name of fn_index matching that number."
+    );
+  return { fn_index: o, endpoint_info: r, dependency: i };
+}
+class Y {
+  app_reference;
+  options;
+  deep_link = null;
+  config;
+  api_prefix = "";
+  api_info;
+  api_map = {};
+  session_hash = Math.random().toString(36).substring(2);
+  jwt = !1;
+  last_status = {};
+  cookies = null;
+  // streaming
+  stream_status = { open: !1 };
+  closed = !1;
+  pending_stream_messages = {};
+  pending_diff_streams = {};
+  event_callbacks = {};
+  unclosed_events = /* @__PURE__ */ new Set();
+  heartbeat_event = null;
+  abort_controller = null;
+  stream_instance = null;
+  current_payload;
+  get_url_config(s = null) {
+    if (!this.config)
+      throw new Error(L);
+    s === null && (s = window.location.href);
+    const t = (i) => i.replace(/^\/+|\/+$/g, "");
+    let n = t(new URL(this.config.root).pathname), o = t(new URL(s).pathname), r;
+    return o.startsWith(n) ? r = t(o.substring(n.length)) : r = "", this.get_page_config(r);
+  }
+  get_page_config(s) {
+    if (!this.config)
+      throw new Error(L);
+    let t = this.config;
+    return s in t.page || (s = ""), {
+      ...t,
+      current_page: s,
+      layout: t.page[s].layout,
+      components: t.components.filter(
+        (n) => t.page[s].components.includes(n.id)
+      ),
+      dependencies: this.config.dependencies.filter(
+        (n) => t.page[s].dependencies.includes(n.id)
+      )
+    };
+  }
+  fetch(s, t) {
+    const n = new Headers(t?.headers || {});
+    return this && this.cookies && n.append("Cookie", this.cookies), this && this.options.headers && new Headers(this.options.headers).forEach((r, i) => {
+      n.append(i, r);
+    }), fetch(s, { ...t, headers: n });
+  }
+  stream(s) {
+    const t = new Headers();
+    return this && this.cookies && t.append("Cookie", this.cookies), this && this.options.headers && new Headers(this.options.headers).forEach((o, r) => {
+      t.append(r, o);
+    }), this && this.options.token && t.append("Authorization", `Bearer ${this.options.token}`), this.abort_controller = new AbortController(), this.stream_instance = Qt(s.toString(), {
+      credentials: this.options.credentials ?? "same-origin",
+      headers: t,
+      signal: this.abort_controller.signal
+    }), this.stream_instance;
+  }
+  view_api;
+  upload_files;
+  upload;
+  handle_blob;
+  post_data;
+  submit;
+  predict;
+  open_stream;
+  resolve_config;
+  resolve_cookies;
+  constructor(s, t = { events: ["data"] }) {
+    this.app_reference = s, this.deep_link = t.query_params?.deep_link || null, t.events || (t.events = ["data"]), this.options = t, this.current_payload = {}, t.cookies && (this.cookies = t.cookies), this.view_api = vt.bind(this), this.upload_files = Et.bind(this), this.handle_blob = Dt.bind(this), this.post_data = Ct.bind(this), this.submit = Xt.bind(this), this.predict = Pt.bind(this), this.open_stream = Zt.bind(this), this.resolve_config = ft.bind(this), this.resolve_cookies = _t.bind(this), this.upload = Ot.bind(this), this.fetch = this.fetch.bind(this), this.handle_space_success = this.handle_space_success.bind(this), this.stream = this.stream.bind(this);
+  }
+  async init() {
+    Gt(), this.options.auth && await this.resolve_cookies(), await this._resolve_config().then(
+      ({ config: s }) => this._resolve_heartbeat(s)
+    ), this.api_info = await this.view_api(), this.api_map = ht(this.config?.dependencies || []);
+  }
+  async _resolve_heartbeat(s) {
+    if (s && (this.config = s, this.api_prefix = s.api_prefix || "", this.config && this.config.connect_heartbeat && this.config.space_id && this.options.token && (this.jwt = await be(
+      this.config.space_id,
+      this.options.token,
+      this.cookies
+    ))), s.space_id && this.options.token && (this.jwt = await be(s.space_id, this.options.token)), this.config && this.config.connect_heartbeat) {
+      const t = new URL(
+        `${this.config.root}${this.api_prefix}/${tt}/${this.session_hash}`
+      );
+      this.jwt && t.searchParams.set("__sign", this.jwt), this.heartbeat_event || (this.heartbeat_event = this.stream(t));
+    }
+  }
+  static async connect(s, t = {
+    events: ["data"]
+  }) {
+    const n = new this(s, t);
+    return t.session_hash && (n.session_hash = t.session_hash), await n.init(), n;
+  }
+  async reconnect() {
+    const s = new URL(
+      `${this.config.root}${this.api_prefix}/${ot}`
+    );
+    let t;
+    try {
+      const n = await this.fetch(s);
+      if (!n.ok)
+        throw new Error();
+      t = (await n.json()).app_id;
+    } catch {
+      return "broken";
+    }
+    return t !== this.config.app_id ? "changed" : "connected";
+  }
+  close() {
+    this.closed = !0, de(this.stream_status, this.abort_controller);
+  }
+  set_current_payload(s) {
+    this.current_payload = s;
+  }
+  static async duplicate(s, t = {
+    events: ["data"]
+  }) {
+    return qt(s, t);
+  }
+  async _resolve_config() {
+    const { http_protocol: s, host: t, space_id: n } = await pe(
+      this.app_reference,
+      this.options.token
+    ), { status_callback: o } = this.options;
+    n && o && await je(n, o);
+    let r;
+    try {
+      let i = `${s}//${t}`;
+      if (r = await this.resolve_config(i), !r)
+        throw new Error(L);
+      return this.config_success(r);
+    } catch (i) {
+      if (n && o)
+        F(
+          n,
+          le.test(n) ? "space_name" : "subdomain",
+          this.handle_space_success
+        );
+      else
+        throw o && o({
+          status: "error",
+          message: "Could not load this space.",
+          load_status: "error",
+          detail: "NOT_FOUND"
+        }), Error(i);
+    }
+  }
+  async config_success(s) {
+    if (this.config = s, this.api_prefix = s.api_prefix || "", this.config.auth_required)
+      return this.prepare_return_obj();
+    try {
+      this.api_info = await this.view_api();
+    } catch (t) {
+      console.error(at + t.message);
+    }
+    return this.prepare_return_obj();
+  }
+  async handle_space_success(s) {
+    if (!this)
+      throw new Error(L);
+    const { status_callback: t } = this.options;
+    if (t && t(s), s.status === "running")
+      try {
+        if (this.config = await this._resolve_config(), this.api_prefix = this?.config?.api_prefix || "", !this.config)
+          throw new Error(L);
+        return await this.config_success(this.config);
+      } catch (n) {
+        throw t && t({
+          status: "error",
+          message: "Could not load this space.",
+          load_status: "error",
+          detail: "NOT_FOUND"
+        }), n;
+      }
+  }
+  async component_server(s, t, n) {
+    if (!this.config)
+      throw new Error(L);
+    const o = {}, { token: r } = this.options, { session_hash: i } = this;
+    r && (o.Authorization = `Bearer ${this.options.token}`);
+    let a, u = this.config.components.find(
+      (p) => p.id === s
+    );
+    u?.props?.root_url ? a = u.props.root_url : a = this.config.root;
+    let l;
+    if (typeof n == "object" && n !== null && "binary" in n) {
+      const p = n;
+      l = new FormData();
+      for (const c in p.data)
+        c !== "binary" && l.append(c, p.data[c]);
+      l.set("component_id", s.toString()), l.set("fn_name", t), l.set("session_hash", i);
+    } else
+      l = JSON.stringify({
+        data: n,
+        component_id: s,
+        fn_name: t,
+        session_hash: i
+      }), o["Content-Type"] = "application/json";
+    r && (o.Authorization = `Bearer ${r}`);
+    try {
+      const p = await this.fetch(
+        `${a}${this.api_prefix}/${st}/`,
+        {
+          method: "POST",
+          body: l,
+          headers: o,
+          credentials: this.options.credentials ?? "same-origin"
+        }
+      );
+      if (!p.ok)
+        throw new Error(
+          "Could not connect to component server: " + p.statusText
+        );
+      return await p.json();
+    } catch (p) {
+      console.warn(p);
+    }
+  }
+  set_cookies(s) {
+    this.cookies = Pe(s).join("; ");
+  }
+  prepare_return_obj() {
+    return {
+      config: this.config,
+      predict: this.predict,
+      submit: this.submit,
+      view_api: this.view_api,
+      component_server: this.component_server
+    };
+  }
+}
+async function os(e, s = {
+  events: ["data"]
+}) {
+  return await Y.connect(e, s);
+}
+async function rs(e, s) {
+  return await Y.duplicate(e, s);
+}
+export {
+  Y as Client,
+  Q as FileData,
+  lt as MISSING_CREDENTIALS_MSG,
+  os as client,
+  rs as duplicate,
+  is as handle_file,
+  Pt as predict,
+  ns as prepare_files,
+  Xt as submit,
+  Ot as upload,
+  Et as upload_files
+};

index.html

@@ -1,47 +1,716 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>hy3dlab Image-to-Image API</title>
-    <style>
-      :root {
-        color-scheme: dark;
-        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-        background: #0b0b0f;
-        color: #f3f4f6;
-      }
-      body {
-        margin: 0;
-        min-height: 100vh;
-        display: grid;
-        place-items: center;
-      }
-      main {
-        width: min(42rem, calc(100% - 3rem));
-        padding: 2rem;
-        border: 1px solid #2d2d36;
-        border-radius: 1rem;
-        background: #141419;
-      }
-      h1 {
-        margin-top: 0;
-        font-size: 1.5rem;
-      }
-      p {
-        line-height: 1.65;
-        color: #c7c9d1;
-      }
-      code {
-        color: #d8b4fe;
-      }
-    </style>
-  </head>
-  <body>
-    <main>
-      <h1>hy3dlab Image-to-Image API</h1>
-      <p>This public Space provides the backend API for the first-party hy3d.dev UI.</p>
-      <p>The named Gradio endpoint is <code>/edit_image</code>. No task is submitted by loading this page.</p>
-    </main>
-  </body>
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Hy3D Lab · AI Image Editor</title>
+<style>
+*{box-sizing:border-box;margin:0;padding:0}
+:root{
+    --bg:#0a0a0c;--panel:#131316;--panel2:#0e0e11;--canvas:#08080a;
+    --border:#232328;--border2:#33333a;
+    --text:#e4e4e7;--muted:#a1a1aa;--dim:#6b6b75;--faint:#4a4a52;
+    --accent:#1E90FF;--accent2:#47A3FF;--accent3:#7CB8FF;
+    --menubar-h:48px;--statusbar-h:30px;--rail-w:52px;--inspector-w:360px;--filmstrip-h:132px;
+}
+html,body{height:100%}
+body{
+    background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
+    font-size:13px;color:var(--text);overflow:hidden;
+}
+
+/* ══ Layout grid ══ */
+.studio{
+    display:grid;height:100vh;
+    grid-template-rows:var(--menubar-h) 1fr var(--statusbar-h);
+    grid-template-columns:var(--rail-w) 1fr var(--inspector-w);
+    grid-template-areas:
+        "menubar menubar menubar"
+        "rail    workspace inspector"
+        "statusbar statusbar statusbar";
+}
+
+/* ══ Menu bar ══ */
+.menubar{
+    grid-area:menubar;display:flex;align-items:center;gap:14px;
+    background:var(--panel);border-bottom:1px solid var(--border);
+    padding:0 16px;z-index:50;
+}
+.menubar-logo{
+    width:28px;height:28px;background:linear-gradient(135deg,#1E90FF,#47A3FF,#7CB8FF);
+    border-radius:8px;display:flex;align-items:center;justify-content:center;
+    box-shadow:0 2px 8px rgba(30,144,255,.35);flex-shrink:0;
+}
+.menubar-logo svg{width:15px;height:15px;fill:#fff}
+.menubar-title{font-size:14px;font-weight:700;letter-spacing:-.2px;white-space:nowrap}
+.menubar-title span{color:var(--dim);font-weight:500}
+.menubar-badge{
+    font-size:10px;font-weight:700;padding:2px 8px;border-radius:12px;
+    background:rgba(30,144,255,.14);color:var(--accent2);border:1px solid rgba(30,144,255,.25);
+    letter-spacing:.4px;white-space:nowrap;
+}
+.menubar-badge.fast{background:rgba(34,197,94,.12);color:#4ade80;border-color:rgba(34,197,94,.25)}
+.menubar-spacer{flex:1}
+.menubar-status{
+    display:flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;
+    font-size:11px;color:var(--dim);
+}
+.menubar-status .dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 6px rgba(74,222,128,.6)}
+.menubar-status .dot.pending{background:#facc15;box-shadow:0 0 6px rgba(250,204,21,.45)}
+.menubar-status .dot.off{background:#f87171;box-shadow:0 0 6px rgba(248,113,113,.5)}
+.site-btn{
+    display:inline-flex;align-items:center;gap:6px;
+    padding:5px 13px;border-radius:7px;text-decoration:none;
+    font-size:12px;font-weight:600;background:var(--accent);color:#fff;
+    border:1px solid rgba(255,255,255,.15);
+    transition:all .15s ease;flex-shrink:0;
+}
+.site-btn:hover{background:var(--accent2)}
+.site-btn svg{fill:none;stroke:currentColor;stroke-width:2;width:13px;height:13px}
+
+/* ══ Left icon rail ══ */
+.rail{
+    grid-area:rail;background:var(--panel);border-right:1px solid var(--border);
+    display:flex;flex-direction:column;align-items:center;padding:10px 0;gap:4px;
+    overflow-y:auto;z-index:40;
+}
+.rail-btn{
+    width:38px;height:38px;border-radius:9px;border:1px solid transparent;
+    background:transparent;color:var(--dim);cursor:pointer;
+    display:flex;align-items:center;justify-content:center;
+    transition:all .15s ease;position:relative;
+}
+.rail-btn:hover:not(:disabled){background:rgba(30,144,255,.12);color:var(--accent3);border-color:rgba(30,144,255,.25)}
+.rail-btn.active{background:rgba(30,144,255,.2);color:var(--accent2);border-color:rgba(30,144,255,.4)}
+.rail-btn:disabled{opacity:.3;cursor:not-allowed}
+.rail-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
+.rail-btn svg.fill{fill:currentColor;stroke:none}
+.rail-sep{width:24px;height:1px;background:var(--border);margin:6px 0}
+.rail-label{
+    font-size:8px;font-weight:700;color:var(--faint);letter-spacing:1px;
+    text-transform:uppercase;margin:8px 0 2px;user-select:none;
+}
+
+/* ══ Workspace (canvas + filmstrip) ══ */
+.workspace{
+    grid-area:workspace;display:flex;flex-direction:column;min-width:0;min-height:0;
+    background:var(--canvas);
+}
+.canvas-head{
+    display:flex;align-items:center;gap:10px;padding:8px 16px;
+    border-bottom:1px solid var(--border);background:var(--panel2);flex-shrink:0;
+}
+.seg-control{
+    display:inline-flex;background:var(--panel);border:1px solid var(--border);
+    border-radius:8px;padding:2px;gap:2px;
+}
+.seg-btn{
+    padding:4px 14px;font-size:11px;font-weight:600;color:var(--dim);
+    background:transparent;border:none;border-radius:6px;cursor:pointer;
+    font-family:'Inter',sans-serif;transition:all .15s;letter-spacing:.2px;
+}
+.seg-btn:hover:not(.active){color:var(--muted)}
+.seg-btn.active{background:rgba(30,144,255,.18);color:var(--accent2)}
+.canvas-meta{
+    font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--faint);
+    overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;
+}
+.canvas-actions{display:flex;align-items:center;gap:6px}
+.canvas-action-btn{
+    display:none;align-items:center;gap:5px;background:rgba(30,144,255,.1);
+    border:1px solid rgba(30,144,255,.2);border-radius:6px;cursor:pointer;padding:4px 11px;
+    font-size:11px;font-weight:500;color:var(--accent3);height:26px;transition:all .15s;
+    font-family:'Inter',sans-serif;white-space:nowrap;
+}
+.canvas-action-btn:hover{background:rgba(30,144,255,.2);border-color:rgba(30,144,255,.35);color:#fff}
+.canvas-action-btn.visible{display:inline-flex}
+.canvas-action-btn.active{background:rgba(30,144,255,.3);border-color:var(--accent);color:#fff}
+.canvas-action-btn svg{width:12px;height:12px;fill:currentColor}
+.out-seed-chip{
+    display:none;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;
+    color:var(--dim);background:var(--panel);border:1px solid var(--border);
+    border-radius:6px;padding:4px 9px;cursor:pointer;transition:all .15s;
+}
+.out-seed-chip.visible{display:inline-flex}
+.out-seed-chip:hover{color:var(--accent3);border-color:rgba(30,144,255,.35)}
+
+.canvas-stage{
+    flex:1;position:relative;overflow:hidden;min-height:0;
+    display:flex;align-items:center;justify-content:center;
+    background:
+        repeating-conic-gradient(#0c0c0f 0% 25%, #08080a 0% 50%) 0 0/24px 24px;
+}
+.canvas-stage img.modern-out-img{
+    max-width:calc(100% - 48px);max-height:calc(100% - 48px);
+    box-shadow:0 12px 48px rgba(0,0,0,.7),0 0 0 1px var(--border);
+    border-radius:4px;cursor:zoom-in;image-rendering:auto;
+    animation:canvasIn .3s ease;
+}
+@keyframes canvasIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}
+.canvas-placeholder{
+    text-align:center;color:var(--faint);user-select:none;
+    display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px;
+}
+.canvas-placeholder svg{width:72px;height:72px;opacity:.5}
+.canvas-placeholder .cp-title{font-size:15px;font-weight:600;color:var(--dim)}
+.canvas-placeholder .cp-sub{font-size:12px;line-height:1.7;max-width:340px}
+.canvas-placeholder kbd{
+    padding:1px 6px;background:var(--panel);border:1px solid var(--border2);
+    border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);
+}
+
+/* Compare slider */
+.compare-wrap{
+    position:relative;max-width:calc(100% - 48px);max-height:calc(100% - 48px);overflow:hidden;
+    display:none;user-select:none;touch-action:none;cursor:ew-resize;
+    box-shadow:0 12px 48px rgba(0,0,0,.7),0 0 0 1px var(--border);border-radius:4px;
+}
+.compare-wrap.visible{display:block}
+.compare-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
+.compare-wrap img{display:block;max-width:100%;max-height:100%;pointer-events:none}
+.compare-top{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}
+.compare-top img{position:absolute;top:0;left:0;height:100%;width:auto;max-width:none!important;max-height:none!important}
+.compare-divider{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 8px rgba(0,0,0,.6);pointer-events:none}
+.compare-handle{
+    position:absolute;top:50%;transform:translate(-50%,-50%);
+    width:32px;height:32px;border-radius:50%;background:#fff;
+    display:flex;align-items:center;justify-content:center;
+    box-shadow:0 2px 8px rgba(0,0,0,.5);color:#111;font-size:13px;font-weight:800;
+}
+.compare-label{
+    position:absolute;top:8px;padding:2px 8px;border-radius:4px;
+    background:rgba(0,0,0,.65);color:#fff;font-size:10px;font-weight:600;
+    font-family:'JetBrains Mono',monospace;pointer-events:none;
+}
+.compare-label.before{left:8px}
+.compare-label.after{right:8px}
+
+/* Loader */
+.modern-loader{
+    display:none;position:absolute;inset:0;background:rgba(8,8,10,.9);
+    z-index:15;flex-direction:column;align-items:center;justify-content:center;gap:16px;backdrop-filter:blur(5px);
+}
+.modern-loader.active{display:flex}
+.loader-spinner{
+    width:38px;height:38px;border:3px solid var(--border);border-top-color:var(--accent);
+    border-radius:50%;animation:spin .8s linear infinite;
+}
+@keyframes spin{to{transform:rotate(360deg)}}
+.loader-text{font-size:13px;color:var(--muted);font-weight:500;text-align:center;padding:0 16px}
+.loader-bar-track{width:220px;height:4px;background:var(--border);border-radius:2px;overflow:hidden}
+.loader-bar-fill{
+    height:100%;width:100%;background:linear-gradient(90deg,#1E90FF,#47A3FF,#1E90FF);
+    background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:2px;
+    transition:width .3s ease;
+}
+.loader-bar-fill.determinate{animation:none;background:var(--accent)}
+@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
+
+/* ══ Filmstrip ══ */
+.filmstrip{
+    height:var(--filmstrip-h);flex-shrink:0;background:var(--panel);
+    border-top:1px solid var(--border);display:flex;min-height:0;overflow:hidden;
+}
+.filmstrip-section{
+    display:flex;flex-direction:column;min-width:0;padding:8px 0 8px 14px;
+}
+.filmstrip-section.inputs{flex:1.2;border-right:1px solid var(--border)}
+.filmstrip-section.history{flex:1}
+.filmstrip-label{
+    font-size:9px;font-weight:700;color:var(--faint);letter-spacing:1.2px;
+    text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;gap:8px;
+    user-select:none;flex-shrink:0;
+}
+.filmstrip-label .count{
+    font-family:'JetBrains Mono',monospace;font-weight:500;color:var(--dim);
+    background:var(--panel2);border:1px solid var(--border);border-radius:4px;padding:0 5px;font-size:9px;
+}
+.filmstrip-row{
+    display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;flex:1;
+    align-items:flex-start;padding-bottom:4px;padding-right:14px;
+}
+.filmstrip-row::-webkit-scrollbar{height:5px}
+.filmstrip-row::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
+.fs-thumb{
+    position:relative;flex-shrink:0;width:76px;height:76px;border-radius:8px;overflow:hidden;
+    border:2px solid var(--border);cursor:pointer;transition:all .15s;background:var(--panel2);
+    animation:thumbIn .25s ease;
+}
+@keyframes thumbIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
+.fs-thumb:hover{border-color:var(--border2);transform:translateY(-2px)}
+.fs-thumb.selected{border-color:var(--accent);box-shadow:0 0 0 2px rgba(30,144,255,.25)}
+.fs-thumb img{width:100%;height:100%;object-fit:cover}
+.fs-badge{
+    position:absolute;bottom:4px;left:4px;background:rgba(0,0,0,.75);color:#fff;
+    padding:1px 6px;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:600;
+}
+.fs-remove{
+    position:absolute;top:4px;right:4px;width:20px;height:20px;background:rgba(0,0,0,.8);
+    color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:50%;cursor:pointer;
+    display:none;align-items:center;justify-content:center;font-size:10px;transition:all .15s;line-height:1;
+}
+.fs-thumb:hover .fs-remove{display:flex}
+.fs-remove:hover{background:#ef4444;border-color:#ef4444}
+.fs-add{
+    flex-shrink:0;width:76px;height:76px;border-radius:8px;border:2px dashed var(--border2);
+    display:flex;flex-direction:column;align-items:center;justify-content:center;
+    cursor:pointer;transition:all .2s;background:rgba(30,144,255,.03);gap:3px;
+}
+.fs-add:hover{border-color:var(--accent);background:rgba(30,144,255,.08)}
+.fs-add .add-icon{font-size:22px;color:var(--dim);font-weight:300}
+.fs-add .add-text{font-size:9px;color:var(--dim);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
+.fs-empty{
+    flex-shrink:0;display:flex;align-items:center;height:76px;
+    color:var(--faint);font-size:11px;font-style:italic;padding-right:12px;
+}
+
+/* ══ Inspector (right panel) ══ */
+.inspector{
+    grid-area:inspector;background:var(--panel);border-left:1px solid var(--border);
+    display:flex;flex-direction:column;min-height:0;z-index:40;
+}
+.inspector-tabs{
+    display:flex;border-bottom:1px solid var(--border);flex-shrink:0;
+}
+.insp-tab{
+    flex:1;padding:11px 8px;font-size:11px;font-weight:700;color:var(--dim);
+    background:transparent;border:none;border-bottom:2px solid transparent;
+    cursor:pointer;font-family:'Inter',sans-serif;text-transform:uppercase;letter-spacing:.8px;
+    transition:all .15s;
+}
+.insp-tab:hover:not(.active){color:var(--muted)}
+.insp-tab.active{color:var(--accent2);border-bottom-color:var(--accent)}
+.insp-page{display:none;flex:1;overflow-y:auto;min-height:0;flex-direction:column}
+.insp-page.active{display:flex}
+
+.insp-section{border-bottom:1px solid var(--border);padding:14px 18px}
+.insp-section-title{
+    font-size:10px;font-weight:700;color:var(--dim);text-transform:uppercase;
+    letter-spacing:1px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;
+}
+.char-count{font-size:9px;font-weight:500;color:var(--faint);font-family:'JetBrains Mono',monospace;text-transform:none;letter-spacing:0}
+.modern-textarea{
+    width:100%;background:var(--panel2);border:1px solid var(--border);border-radius:8px;
+    padding:10px 13px;font-family:'Inter',sans-serif;font-size:13px;color:var(--text);
+    resize:vertical;outline:none;min-height:64px;transition:border-color .2s;line-height:1.55;
+}
+.modern-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(30,144,255,.15)}
+.modern-textarea::placeholder{color:var(--faint)}
+.modern-textarea.error-flash{
+    border-color:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,.2)!important;animation:shake .4s ease;
+}
+@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
+
+.suggestions-wrap{display:flex;flex-wrap:wrap;gap:5px}
+.suggestion-chip{
+    display:inline-flex;align-items:center;padding:4px 11px;
+    background:rgba(30,144,255,.07);border:1px solid rgba(30,144,255,.18);border-radius:14px;
+    color:var(--accent3);font-size:11px;font-weight:500;font-family:'Inter',sans-serif;
+    cursor:pointer;transition:all .15s;white-space:nowrap;
+}
+.suggestion-chip:hover{background:rgba(30,144,255,.15);border-color:rgba(30,144,255,.35);color:var(--accent2)}
+.suggestion-chip.active{background:rgba(30,144,255,.25);border-color:var(--accent);color:#fff}
+
+.btn-run{
+    display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
+    background:linear-gradient(135deg,#1E90FF,#1873CC);border:none;border-radius:9px;
+    padding:12px 24px;cursor:pointer;font-size:14px;font-weight:700;font-family:'Inter',sans-serif;
+    color:#fff;transition:all .2s ease;letter-spacing:-.2px;
+    box-shadow:0 4px 16px rgba(30,144,255,.3),inset 0 1px 0 rgba(255,255,255,.1);
+}
+.btn-run:hover:not(:disabled){
+    background:linear-gradient(135deg,#47A3FF,#1E90FF);transform:translateY(-1px);
+    box-shadow:0 6px 24px rgba(30,144,255,.45),inset 0 1px 0 rgba(255,255,255,.15);
+}
+.btn-run:active:not(:disabled){transform:translateY(0)}
+.btn-run:disabled{opacity:.55;cursor:not-allowed}
+.btn-run svg{width:16px;height:16px;fill:#fff}
+.btn-cancel{
+    display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
+    margin-top:8px;background:transparent;border:1px solid var(--border2);border-radius:9px;
+    padding:8px 24px;cursor:pointer;font-size:12px;font-weight:600;font-family:'Inter',sans-serif;
+    color:var(--muted);transition:all .15s;
+}
+.btn-cancel:hover{border-color:#ef4444;color:#ef4444;background:rgba(239,68,68,.08)}
+.run-hint{
+    text-align:center;font-size:10px;color:var(--faint);margin-top:8px;
+    font-family:'JetBrains Mono',monospace;
+}
+
+.slider-row{display:flex;align-items:center;gap:9px;min-height:26px;margin-bottom:10px}
+.slider-row:last-child{margin-bottom:0}
+.slider-row label{font-size:12px;font-weight:500;color:var(--muted);min-width:64px;flex-shrink:0}
+.slider-row input[type="range"]{
+    flex:1;-webkit-appearance:none;appearance:none;height:5px;background:var(--border);
+    border-radius:3px;outline:none;min-width:0;
+}
+.slider-row input[type="range"]::-webkit-slider-thumb{
+    -webkit-appearance:none;width:14px;height:14px;background:linear-gradient(135deg,#1E90FF,#1873CC);
+    border-radius:50%;cursor:pointer;box-shadow:0 2px 6px rgba(30,144,255,.4);transition:transform .15s;
+}
+.slider-row input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.2)}
+.slider-row input[type="range"]::-moz-range-thumb{
+    width:14px;height:14px;background:linear-gradient(135deg,#1E90FF,#1873CC);
+    border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px rgba(30,144,255,.4);
+}
+.slider-val{
+    min-width:48px;text-align:right;font-family:'JetBrains Mono',monospace;font-size:11px;
+    font-weight:500;padding:2px 7px;background:var(--panel2);border:1px solid var(--border);
+    border-radius:5px;color:var(--muted);flex-shrink:0;
+}
+.dice-btn{
+    display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
+    background:var(--panel2);border:1px solid var(--border);border-radius:5px;cursor:pointer;
+    color:var(--dim);transition:all .15s;flex-shrink:0;padding:0;
+}
+.dice-btn:hover{border-color:var(--accent);color:var(--accent3)}
+.dice-btn:disabled{opacity:.35;cursor:not-allowed;border-color:var(--border);color:var(--dim)}
+.dice-btn svg{width:13px;height:13px;fill:currentColor}
+.checkbox-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-bottom:10px}
+.checkbox-row input[type="checkbox"]{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}
+.checkbox-row label{color:var(--muted);font-size:12px;cursor:pointer}
+.advanced-section{border-bottom:1px solid var(--border)}
+.advanced-section summary{
+    padding:14px 18px;cursor:pointer;list-style:none;font-size:10px;font-weight:700;
+    color:var(--dim);text-transform:uppercase;letter-spacing:1px;user-select:none;
+    display:flex;align-items:center;justify-content:space-between;
+}
+.advanced-section summary::-webkit-details-marker{display:none}
+.advanced-section summary::after{content:'›';font-size:18px;line-height:1;transition:transform .15s}
+.advanced-section[open] summary::after{transform:rotate(90deg)}
+.advanced-content{padding:0 18px 14px}
+
+/* ══ Status bar ══ */
+.statusbar{
+    grid-area:statusbar;background:var(--panel);border-top:1px solid var(--border);
+    display:flex;align-items:center;gap:4px;padding:0 14px;font-size:11px;z-index:50;
+}
+.statusbar .sb-section{
+    padding:0 10px;display:flex;align-items:center;font-family:'JetBrains Mono',monospace;
+    font-size:11px;color:var(--faint);overflow:hidden;white-space:nowrap;gap:6px;
+}
+.statusbar .sb-right{margin-left:auto;display:flex;align-items:center;gap:10px}
+.sb-pill{
+    padding:2px 12px;border-radius:5px;font-weight:600;font-size:10px;
+    background:rgba(30,144,255,.1);color:var(--accent2);
+}
+.sb-pill.error{background:rgba(239,68,68,.12);color:#f87171}
+.sb-pill.done{background:rgba(34,197,94,.12);color:#4ade80}
+.sb-link{color:var(--faint);text-decoration:none;font-family:'JetBrains Mono',monospace;font-size:10px}
+.sb-link:hover{color:var(--accent3)}
+
+/* ══ Toast ══ */
+.toast-notification{
+    position:fixed;top:60px;left:50%;transform:translateX(-50%) translateY(-140%);
+    z-index:9999;padding:10px 22px;border-radius:9px;font-family:'Inter',sans-serif;
+    font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;
+    box-shadow:0 8px 24px rgba(0,0,0,.5);
+    transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .35s ease;opacity:0;pointer-events:none;
+}
+.toast-notification.visible{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
+.toast-notification.error{background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;border:1px solid rgba(255,255,255,.15)}
+.toast-notification.warning{background:linear-gradient(135deg,#d97706,#b45309);color:#fff;border:1px solid rgba(255,255,255,.15)}
+.toast-notification.info{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;border:1px solid rgba(255,255,255,.15)}
+.toast-notification .toast-icon{font-size:15px;line-height:1}
+
+/* ══ Lightbox ══ */
+.lightbox{
+    position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:10000;
+    display:none;align-items:center;justify-content:center;cursor:zoom-out;
+    backdrop-filter:blur(6px);animation:fadeIn .2s ease;
+}
+.lightbox.visible{display:flex}
+.lightbox img{max-width:94vw;max-height:94vh;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.8)}
+.lightbox-close{
+    position:fixed;top:18px;right:18px;width:42px;height:42px;border-radius:50%;
+    border:1px solid var(--border2);background:rgba(19,19,22,.92);color:var(--text);
+    font-size:24px;line-height:1;cursor:pointer;
+}
+.lightbox-close:hover{border-color:var(--accent);color:var(--accent3)}
+@keyframes fadeIn{from{opacity:0}to{opacity:1}}
+
+/* ══ Drop overlay ══ */
+.drop-overlay{
+    position:fixed;inset:0;z-index:9000;background:rgba(8,8,10,.85);
+    display:none;align-items:center;justify-content:center;pointer-events:none;
+    backdrop-filter:blur(3px);
+}
+.drop-overlay.visible{display:flex}
+.drop-overlay-inner{
+    border:3px dashed var(--accent);border-radius:22px;padding:56px 76px;
+    font-size:19px;font-weight:700;color:var(--accent2);background:rgba(30,144,255,.06);
+}
+
+/* ══ Scrollbars ══ */
+::-webkit-scrollbar{width:8px;height:8px}
+::-webkit-scrollbar-track{background:transparent}
+::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
+::-webkit-scrollbar-thumb:hover{background:var(--border2)}
+
+/* ══ Touch devices: hover-only controls must always be visible ══ */
+@media (pointer:coarse){
+    .fs-remove{display:flex}
+    .rail-btn{width:44px;height:44px}
+    .rail-btn svg{width:19px;height:19px}
+}
+
+/* ══ Responsive: tablet & phone ══ */
+@media(max-width:960px){
+    html,body{height:auto}
+    body{overflow:auto!important}
+    .studio{
+        display:flex;flex-direction:column;height:auto;min-height:100vh;
+    }
+
+    /* Menu bar */
+    .menubar{
+        flex-wrap:wrap;gap:8px;padding:10px 12px;min-height:var(--menubar-h);
+        position:sticky;top:0;order:1;
+    }
+    .menubar-title{font-size:13px}
+    .menubar-status{display:flex;order:6;flex-basis:100%;font-size:10px}
+    .menubar-spacer{flex:1}
+    .site-btn{padding:6px 10px}
+    .site-btn span{display:none}
+
+    /* Rail → horizontal tool strip */
+    .rail{
+        flex-direction:row;justify-content:flex-start;flex-wrap:nowrap;
+        overflow-x:auto;overflow-y:hidden;border-right:none;
+        border-bottom:1px solid var(--border);padding:6px 10px;gap:6px;order:2;
+    }
+    .rail-sep{width:1px;height:26px;margin:0 4px;flex-shrink:0}
+    .rail-label{display:none}
+    .rail-btn{flex-shrink:0}
+
+    /* Workspace */
+    .workspace{min-height:0;order:4}
+    .canvas-head{flex-wrap:wrap;gap:8px;padding:8px 12px}
+    .canvas-meta{flex-basis:100%;order:3;font-size:10px}
+    .canvas-stage{min-height:42vh}
+    .canvas-stage img.modern-out-img{max-width:calc(100% - 20px);max-height:52vh}
+    .compare-wrap{max-width:calc(100% - 20px);max-height:52vh}
+    .canvas-placeholder .cp-sub{font-size:11px;max-width:280px}
+
+    /* Filmstrip → stacked rows, natural height */
+    .filmstrip{flex-direction:column;height:auto;max-height:none}
+    .filmstrip-section.inputs{border-right:none;border-bottom:1px solid var(--border)}
+    .filmstrip-section{padding:8px 0 8px 12px}
+    .fs-thumb{width:68px;height:68px}
+    .fs-add{width:68px;height:68px}
+    .fs-empty{height:68px}
+
+    /* Inspector → full width, natural page scroll */
+    .inspector{border-left:none;border-top:1px solid var(--border);order:3}
+    .inspector-tabs{position:static;background:var(--panel)}
+    .insp-tab{padding:13px 8px;font-size:12px}
+    .insp-page{overflow-y:visible}
+    .insp-section{padding:14px 16px}
+    .modern-textarea{font-size:16px} /* prevent iOS zoom-on-focus */
+    .btn-run{padding:14px 24px;font-size:15px}
+    .suggestion-chip{padding:6px 13px;font-size:12px}
+
+    /* Status bar */
+    .statusbar{flex-wrap:wrap;height:auto;min-height:var(--statusbar-h);padding:4px 10px;gap:2px;order:5}
+    .sb-link{display:none}
+
+    /* Toasts span the phone width */
+    .toast-notification{max-width:calc(100vw - 32px);font-size:12px;padding:10px 16px}
+
+    /* Drop overlay fits small screens */
+    .drop-overlay-inner{padding:32px 28px;font-size:15px;border-radius:16px;margin:0 16px}
+}
+
+/* ══ Very small phones ══ */
+@media(max-width:400px){
+    .menubar-badge.fast{display:none}
+    .seg-btn{padding:4px 12px}
+    .canvas-stage{min-height:36vh}
+}
+</style>
+</head>
+<body>
+<div class="studio">
+
+  <!-- ══ Menu bar ══ -->
+  <div class="menubar">
+    <div class="menubar-logo">
+      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 23c-3.6 0-8-2.69-8-7.5 0-3.5 3-6.5 4.5-8 .27-.27.75-.08.75.28v2.44c0 .42.5.63.72.28C12.28 7.5 13 3 13 1c0-.42.48-.64.8-.35C18 4.5 20 9 20 12c0 5.5-3.5 11-8 11z"/></svg>
+    </div>
+    <div class="menubar-title">Hy3D Studio <span>/ Image Editor</span></div>
+    <span class="menubar-badge">GENERAL</span>
+    <span class="menubar-badge fast">4 STEPS DEFAULT</span>
+    <div class="menubar-spacer"></div>
+    <div class="menubar-status"><span class="dot pending" id="conn-dot"></span><span id="conn-text" role="status" aria-live="polite">connecting…</span></div>
+    <a href="https://hy3d.dev" target="_blank" rel="noopener" class="site-btn">
+      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14 3h7v7"/><path d="M10 14L21 3"/><path d="M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5"/></svg>
+      <span>Hy3D</span>
+    </a>
+  </div>
+
+  <!-- ══ Left icon rail ══ -->
+  <div class="rail">
+    <div class="rail-label">Input</div>
+    <button class="rail-btn" id="tb-upload" title="Upload image" aria-label="Upload image">
+      <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+    </button>
+    <button class="rail-btn" id="tb-remove" title="Remove selected image" aria-label="Remove selected image">
+      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
+    </button>
+    <button class="rail-btn" id="tb-clear" title="Clear image" aria-label="Clear image">
+      <svg viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
+    </button>
+    <div class="rail-sep"></div>
+    <div class="rail-label">Result</div>
+    <button class="rail-btn" id="compare-btn" title="Compare before / after" aria-label="Compare before and after" aria-pressed="false" disabled>
+      <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="12" y1="3" x2="12" y2="21"/></svg>
+    </button>
+    <button class="rail-btn" id="use-as-input-btn" title="Use result as input (chain edits)" aria-label="Use result as input" disabled>
+      <svg viewBox="0 0 24 24"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 014-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 01-4 4H3"/></svg>
+    </button>
+    <button class="rail-btn" id="dl-btn-output" title="Download result" aria-label="Download result" disabled>
+      <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+    </button>
+    <button class="rail-btn" id="zoom-btn" title="Zoom result" aria-label="Zoom image" disabled>
+      <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
+    </button>
+  </div>
+
+  <!-- ══ Inspector ══ -->
+  <div class="inspector">
+    <div class="inspector-tabs">
+      <button class="insp-tab active" type="button">Edit</button>
+    </div>
+
+    <!-- Edit page -->
+    <div class="insp-page active" id="page-edit">
+      <div class="insp-section">
+        <div class="insp-section-title"><span>Instruction</span><span class="char-count" id="char-count">0</span></div>
+        <textarea id="custom-prompt-input" class="modern-textarea" rows="3" maxlength="1000"
+                  placeholder="e.g., replace the background, adjust lighting, remove an object…"></textarea>
+      </div>
+
+      <div class="insp-section">
+        <div class="insp-section-title"><span>Quick Prompts</span></div>
+        <div class="suggestions-wrap" id="suggestions-wrap"></div>
+      </div>
+
+      <div class="insp-section">
+        <button id="custom-run-btn" class="btn-run" disabled>
+          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 23c-3.6 0-8-2.69-8-7.5 0-3.5 3-6.5 4.5-8 .27-.27.75-.08.75.28v2.44c0 .42.5.63.72.28C12.28 7.5 13 3 13 1c0-.42.48-.64.8-.35C18 4.5 20 9 20 12c0 5.5-3.5 11-8 11z"/></svg>
+          <span id="run-btn-label">Edit Image</span>
+        </button>
+        <button id="custom-cancel-btn" class="btn-cancel" style="display:none;">Request queue cancellation</button>
+        <div class="run-hint">⌘/Ctrl + Enter</div>
+      </div>
+
+      <details class="advanced-section">
+        <summary>Advanced</summary>
+        <div class="advanced-content">
+        <div class="slider-row">
+          <label for="custom-seed">Seed</label>
+          <input type="range" id="custom-seed" min="0" max="2147483647" step="1" value="0">
+          <span class="slider-val" id="custom-seed-val">0</span>
+          <button class="dice-btn" id="dice-btn" title="Random seed" aria-label="Choose a random seed">
+            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM7.5 18c-.83 0-1.5-.67-1.5-1.5S6.67 15 7.5 15s1.5.67 1.5 1.5S8.33 18 7.5 18zm0-9C6.67 9 6 8.33 6 7.5S6.67 6 7.5 6 9 6.67 9 7.5 8.33 9 7.5 9zm4.5 4.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5 4.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm0-9c-.83 0-1.5-.67-1.5-1.5S15.67 6 16.5 6s1.5.67 1.5 1.5S17.33 9 16.5 9z"/></svg>
+          </button>
+        </div>
+        <div class="checkbox-row">
+          <input type="checkbox" id="custom-randomize" checked>
+          <label for="custom-randomize">Randomize seed</label>
+        </div>
+        <div class="slider-row">
+          <label for="custom-guidance">Guidance</label>
+          <input type="range" id="custom-guidance" min="1" max="10" step="0.1" value="1.0">
+          <span class="slider-val" id="custom-guidance-val">1.0</span>
+        </div>
+        <div class="slider-row">
+          <label for="custom-steps">Steps</label>
+          <input type="range" id="custom-steps" min="1" max="50" step="1" value="4">
+          <span class="slider-val" id="custom-steps-val">4</span>
+        </div>
+        </div>
+      </details>
+    </div>
+  </div>
+
+  <!-- ══ Workspace ══ -->
+  <div class="workspace">
+    <div class="canvas-head">
+      <div class="seg-control">
+        <button class="seg-btn active" id="seg-result">Result</button>
+        <button class="seg-btn" id="seg-input">Input</button>
+      </div>
+      <div class="canvas-meta" id="canvas-meta">No image loaded</div>
+      <div class="canvas-actions">
+        <span id="out-seed-chip" class="out-seed-chip" title="Click to copy seed"></span>
+      </div>
+    </div>
+
+    <div class="canvas-stage" id="output-image-container">
+      <div class="modern-loader" id="output-loader">
+        <div class="loader-spinner"></div>
+        <div class="loader-text" id="loader-text">Processing image&hellip;</div>
+        <div class="loader-bar-track"><div class="loader-bar-fill" id="loader-bar-fill"></div></div>
+      </div>
+
+      <div class="canvas-placeholder" id="output-placeholder">
+        <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect x="8" y="14" width="64" height="52" rx="6" fill="none" stroke="#33333a" stroke-width="2" stroke-dasharray="4 3"/>
+          <polygon points="12,62 30,40 42,50 54,34 68,62" fill="rgba(30,144,255,0.1)" stroke="#33333a" stroke-width="1.5"/>
+          <circle cx="28" cy="30" r="6" fill="rgba(30,144,255,0.12)" stroke="#33333a" stroke-width="1.5"/>
+        </svg>
+        <div class="cp-title">Canvas is empty</div>
+        <div class="cp-sub">
+          Drop an image anywhere, paste with <kbd>⌘/Ctrl+V</kbd>, or use the rail to upload.
+          Then write an instruction and press <kbd>⌘/Ctrl</kbd>+<kbd>↵</kbd>.
+        </div>
+      </div>
+
+      <div class="compare-wrap" id="compare-wrap" role="slider" tabindex="0" aria-label="Before and after comparison" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">
+        <img id="compare-after-img" alt="after">
+        <div class="compare-top" id="compare-top"><img id="compare-before-img" alt="before"></div>
+        <div class="compare-divider" id="compare-divider"><div class="compare-handle">⇄</div></div>
+        <span class="compare-label before">Before</span>
+        <span class="compare-label after">After</span>
+      </div>
+    </div>
+
+    <!-- Filmstrip -->
+    <div class="filmstrip">
+      <div class="filmstrip-section inputs">
+        <div class="filmstrip-label">Inputs <span class="count" id="tb-image-count">0</span></div>
+        <div class="filmstrip-row" id="image-gallery-grid"></div>
+      </div>
+      <div class="filmstrip-section history">
+        <div class="filmstrip-label">History <span class="count" id="history-count">0</span></div>
+        <div class="filmstrip-row" id="history-strip"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ══ Status bar ══ -->
+  <div class="statusbar">
+    <div class="sb-section" id="sb-image-count">No inputs</div>
+    <div class="sb-right">
+      <span class="sb-link">General mode · no LoRA</span>
+      <span class="sb-pill" id="sb-status" role="status" aria-live="polite" aria-atomic="true">Connecting…</span>
+    </div>
+  </div>
+
+</div>
+
+<input id="custom-file-input" type="file" accept="image/png,image/jpeg,image/webp" style="display:none;" />
+
+<!-- Lightbox -->
+<div class="lightbox" id="lightbox" role="dialog" aria-modal="true" aria-label="Image preview" aria-hidden="true" tabindex="-1">
+  <button type="button" class="lightbox-close" id="lightbox-close" aria-label="Close image preview">&times;</button>
+  <img id="lightbox-img" alt="Expanded image preview">
+</div>
+
+<!-- Global drop overlay -->
+<div class="drop-overlay" id="drop-overlay"><div class="drop-overlay-inner">Drop one image to upload</div></div>
+
+<script type="module" src="/hy3d-assets/app-ui.js"></script>
+</body>
 </html>

tests/test_space_static.py

@@ -1,4 +1,5 @@
 import ast
+import hashlib
 import re
 import unittest
 from pathlib import Path
@@ -84,12 +85,66 @@ class SpaceStaticTests(unittest.TestCase):
         self.assertIn('"uses_lora": False', source)
         self.assertIn("allowed_edit_modes={BASE_EDIT_MODE_ID}", source)
 
-    def test_static_homepage_has_no_script_or_remote_asset(self):
-        html = (ROOT / "index.html").read_text(encoding="utf-8").lower()
-        self.assertNotIn("<script", html)
-        self.assertNotIn("http://", html)
-        self.assertNotIn("https://", html)
-        self.assertNotIn("jsdelivr", html)
+    def test_homepage_is_an_interactive_self_hosted_single_image_editor(self):
+        html = (ROOT / "index.html").read_text(encoding="utf-8")
+        script = (ROOT / "assets" / "app-ui.js").read_text(encoding="utf-8")
+
+        self.assertIn('src="/hy3d-assets/app-ui.js"', html)
+        self.assertIn('accept="image/png,image/jpeg,image/webp"', html)
+        self.assertNotIn(" multiple", html)
+        self.assertNotIn("Style / LoRA", html)
+        self.assertNotIn("tab-examples", html)
+        self.assertNotRegex(html, r'<(?:script|link)[^>]+(?:src|href)=["\']https?://')
+        self.assertNotIn("googleapis", html.lower())
+        self.assertNotIn("jsdelivr", html.lower())
+
+        self.assertIn('const GENERAL_MODE_ID = "__base__"', script)
+        self.assertIn("images_b64_json: JSON.stringify([beforeB64])", script)
+        self.assertIn("lora_adapter: GENERAL_MODE_ID", script)
+        self.assertIn('events: ["data", "status"]', script)
+        self.assertIn("await currentJob.wait_for_id()", script)
+        self.assertIn("await job.return()", script)
+        self.assertIn("uses_lora !== false", script)
+        self.assertIn("config.loras.length !== 0", script)
+        self.assertIn("nextLimits.input_images !== 1", script)
+        self.assertIn("Stopped waiting for this job. The backend may still finish it.", script)
+        self.assertNotIn("Queued job cancelled", script)
+        self.assertNotIn('hideLoader("Cancelled")', script)
+        self.assertNotIn("Anime-V2", script)
+        self.assertNotIn("Photo-to-Anime", script)
+        self.assertNotIn("/load_example", script)
+        self.assertNotIn("cfg.examples", script)
+
+        self.assertIn('class="dot pending"', html)
+        self.assertIn("4 STEPS DEFAULT", html)
+        self.assertNotIn(".gh-btn", html)
+        self.assertIn(".site-btn{padding:6px 10px}", html)
+        self.assertLess(html.index('class="inspector"'), html.index('class="workspace"'))
+        self.assertIn('id="sb-status" role="status" aria-live="polite"', html)
+        self.assertIn('toast.setAttribute("aria-live"', script)
+        self.assertIn("studio.inert = true", script)
+
+    def test_browser_client_is_exactly_vendored(self):
+        client_path = ROOT / "assets" / "gradio-client-2.3.1.js"
+        self.assertTrue(client_path.is_file())
+        digest = hashlib.sha256(client_path.read_bytes()).hexdigest()
+        self.assertEqual(digest, "a3d50dc5f3590c5723695abcd85e2009c42a8af08bfc9fa47a7baecc1040c0be")
+
+    def test_interactive_script_only_references_unique_existing_dom_ids(self):
+        html = (ROOT / "index.html").read_text(encoding="utf-8")
+        script = (ROOT / "assets" / "app-ui.js").read_text(encoding="utf-8")
+        element_ids = re.findall(r'\bid=["\']([^"\']+)["\']', html)
+        script_refs = set(re.findall(r'getElementById\(["\']([^"\']+)["\']\)', script))
+        script_created_ids = set(re.findall(r'\.id\s*=\s*["\']([^"\']+)["\']', script))
+
+        self.assertEqual(len(element_ids), len(set(element_ids)))
+        self.assertEqual(script_refs - set(element_ids) - script_created_ids, set())
+
+    def test_ui_assets_and_homepage_are_no_store_and_allowlisted(self):
+        source = (ROOT / "app.py").read_text(encoding="utf-8")
+        self.assertIn('"Cache-Control": "no-store, max-age=0, must-revalidate"', source)
+        self.assertIn('@app.get("/hy3d-assets/{asset_name}"', source)
+        self.assertIn('{"app-ui.js", "gradio-client-2.3.1.js"}', source)
 
     def test_direct_python_dependencies_are_exact(self):
         requirements = (ROOT / "requirements.txt").read_text(encoding="utf-8").splitlines()