rrrrrrrr

index.html

@@ -42,6 +42,7 @@
       border-radius:14px;outline:none;font:inherit;transition:.18s ease
     }
     textarea{min-height:168px;resize:vertical;padding:14px;line-height:1.52}
+    textarea.token-pool{min-height:108px;font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace}
     select,input{height:48px;padding:0 13px}
     textarea:focus,select:focus,input:focus{border-color:rgba(139,108,255,.9);box-shadow:0 0 0 4px rgba(139,108,255,.12)}
     .row{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@@ -106,6 +107,11 @@
         </select>
       </div>
 
+      <div class="field">
+        <label for="hfTokens">Hugging Face tokens · one per line · max 50</label>
+        <textarea id="hfTokens" class="token-pool" autocomplete="off" autocapitalize="off" spellcheck="false" placeholder="hf_token_1&#10;hf_token_2&#10;hf_token_3"></textarea>
+      </div>
+
       <div class="field">
         <label for="prompt">Prompt</label>
         <textarea id="prompt" maxlength="5000" placeholder="Describe the subject, environment, camera, lighting, mood and composition..."></textarea>
@@ -150,10 +156,12 @@
       <div class="queuebox">
         <span class="qchip" id="queuedChip">Queued: 0</span>
         <span class="qchip" id="activeChip">Active: none</span>
+        <span class="qchip" id="tokenChip">Token: anonymous</span>
+        <span class="qchip" id="engineChip">Engines: 20</span>
       </div>
 
       <div class="fine">
-        This Static Space keeps its own FIFO queue inside your browser tab. The remote GPU is provided by the connected public Hugging Face generation Space.
+        This Static Space keeps a private FIFO queue in your browser, uses the tokens in order without pre-checking them, switches only after quota/rate-limit/authentication failure, and keeps the existing 20-engine backend failover. Tokens are kept only in this open page.
       </div>
     </div>
 
@@ -181,19 +189,146 @@
 
 <script type="module">
 import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/+esm";
+
 /*
   Static frontend only.
   Change this single constant if you later choose another compatible
   public AIDMA/FLUX LoRA generation Space.
 */
-const BACKEND_SPACE = "multimodalart/flux-lora-the-explorer";
-const BACKEND_ORIGIN = "https://multimodalart-flux-lora-the-explorer.hf.space";
+/*
+  Ordered AIDMA backend failover list.
+  The current backend remains preferred until it fails, then the next one is used.
+  Add more compatible Spaces here later using the same object format.
+*/
+function spaceOrigin(spaceId) {
+  return `https://${spaceId.replace("/", "-").toLowerCase()}.hf.space`;
+}
+
+/*
+  Twenty-slot backend pool.
+  Every candidate is API-checked at runtime. Paused, broken, sleeping,
+  incompatible, or unreachable Spaces are skipped automatically.
+*/
+const BACKEND_SPACES = [
+  {
+    id: "multimodalart/flux-lora-the-explorer",
+    origin: spaceOrigin("multimodalart/flux-lora-the-explorer"),
+    label: "AIDMA Engine 1"
+  },
+  {
+    id: "John6666/flux-lora-the-explorer",
+    origin: spaceOrigin("John6666/flux-lora-the-explorer"),
+    label: "AIDMA Engine 2"
+  },
+  {
+    id: "Svngoku/flux-lora-the-explorer",
+    origin: spaceOrigin("Svngoku/flux-lora-the-explorer"),
+    label: "AIDMA Engine 3"
+  },
+  {
+    id: "Nymbo/flux-lora-the-explorer",
+    origin: spaceOrigin("Nymbo/flux-lora-the-explorer"),
+    label: "AIDMA Engine 4"
+  },
+  {
+    id: "Emuixom/flux-lora-the-explorer",
+    origin: spaceOrigin("Emuixom/flux-lora-the-explorer"),
+    label: "AIDMA Engine 5"
+  },
+  {
+    id: "codermert/flux-lora-the-explorer",
+    origin: spaceOrigin("codermert/flux-lora-the-explorer"),
+    label: "AIDMA Engine 6"
+  },
+  {
+    id: "reza74ii/flux-lora-the-explorer",
+    origin: spaceOrigin("reza74ii/flux-lora-the-explorer"),
+    label: "AIDMA Engine 7"
+  },
+  {
+    id: "x2778/flux-lora-the-explorer-a",
+    origin: spaceOrigin("x2778/flux-lora-the-explorer-a"),
+    label: "AIDMA Engine 8"
+  },
+  {
+    id: "Ckjdjdjf/flux-lora-the-explorer",
+    origin: spaceOrigin("Ckjdjdjf/flux-lora-the-explorer"),
+    label: "AIDMA Engine 9"
+  },
+  {
+    id: "ZENLLC/flux-lora-the-explorer",
+    origin: spaceOrigin("ZENLLC/flux-lora-the-explorer"),
+    label: "AIDMA Engine 10"
+  },
+  {
+    id: "tenet/flux-lora-the-explorer",
+    origin: spaceOrigin("tenet/flux-lora-the-explorer"),
+    label: "AIDMA Engine 11"
+  },
+  {
+    id: "seawolf2357/flxloraexp",
+    origin: spaceOrigin("seawolf2357/flxloraexp"),
+    label: "AIDMA Engine 12"
+  },
+  {
+    id: "ginipick/flxloraexp",
+    origin: spaceOrigin("ginipick/flxloraexp"),
+    label: "AIDMA Engine 13"
+  },
+  {
+    id: "John6666/flux-lora-the-explorer-crash-progress",
+    origin: spaceOrigin("John6666/flux-lora-the-explorer-crash-progress"),
+    label: "AIDMA Engine 14"
+  },
+  {
+    id: "killwithabass/flux-gay-lora-explorer",
+    origin: spaceOrigin("killwithabass/flux-gay-lora-explorer"),
+    label: "AIDMA Engine 15"
+  },
+  {
+    id: "multimodalart/flux-lora-lab",
+    origin: spaceOrigin("multimodalart/flux-lora-lab"),
+    label: "AIDMA Engine 16"
+  },
+  {
+    id: "prithivMLmods/FLUX-LoRA-DLC2",
+    origin: spaceOrigin("prithivMLmods/FLUX-LoRA-DLC2"),
+    label: "AIDMA Engine 17"
+  },
+  {
+    id: "enzostvs/lora-studio",
+    origin: spaceOrigin("enzostvs/lora-studio"),
+    label: "AIDMA Engine 18"
+  },
+  {
+    id: "ovi054/FLUX.Dev-LoRA",
+    origin: spaceOrigin("ovi054/FLUX.Dev-LoRA"),
+    label: "AIDMA Engine 19"
+  },
+  {
+    id: "waloneai/FLUX.Dev-LoRA-Serverless",
+    origin: spaceOrigin("waloneai/FLUX.Dev-LoRA-Serverless"),
+    label: "AIDMA Engine 20"
+  }
+];
+
 const $ = id => document.getElementById(id);
 const localQueue = [];
 let processing = false;
 let client = null;
 let api = null;
+let activeBackend = null;
+let preferredBackendIndex = 0;
 let jobCounter = 0;
+const MAX_HF_TOKENS = 50;
+let hfTokens = [];
+let activeTokenIndex = 0;
+let connectedTokenIndex = -1;
+let tokenPoolSignature = "";
+const backendFailures = new Map();
+const BACKEND_FAILURE_COOLDOWN_MS = 10 * 60 * 1000;
+const BACKEND_CONNECT_TIMEOUT_MS = 18 * 1000;
+
 const STYLES = [
   "No extra style","Photorealistic","Ultra realistic photography","Cinematic",
   "Hollywood blockbuster","IMAX film still","35mm analog film","70mm epic cinema",
@@ -240,6 +375,7 @@ const STYLES = [
   "Clean commercial","Hyper-detailed","Ethereal","Whimsical","Moody","Haunting",
   "Cozy","Playful","Epic"
 ];
+
 const STYLE_DETAIL = {
   "No extra style":"",
   "Photorealistic":"photorealistic, realistic materials, physically accurate lighting, natural texture",
@@ -299,28 +435,73 @@ const STYLE_DETAIL = {
   "Cozy":"cozy atmosphere, warm practical light, tactile materials, inviting detail",
   "Epic":"epic scale, heroic composition, monumental depth, dramatic visual impact"
 };
+
 const PROMPT_BOOST =
   "masterful composition, coherent anatomy, accurate hands and facial structure, " +
   "clear subject separation, refined color harmony, realistic material response, " +
   "controlled detail, intentional lighting, professional visual storytelling";
+
 for (const style of STYLES) {
   const option = document.createElement("option");
   option.value = style;
   $("styles").appendChild(option);
 }
+
 function normalise(value) {
   return String(value || "").toLowerCase().replace(/[^a-z0-9]+/g, "");
 }
+
+function parseHfTokens(value) {
+  const unique = new Set();
+  for (const part of String(value || "").split(/[\s,;]+/)) {
+    const token = part.trim();
+    if (!token || !token.startsWith("hf_") || unique.has(token)) continue;
+    unique.add(token);
+    if (unique.size >= MAX_HF_TOKENS) break;
+  }
+  return [...unique];
+}
+
+function syncTokenPool() {
+  const nextTokens = parseHfTokens($("hfTokens").value);
+  const nextSignature = nextTokens.join("\n");
+
+  if (nextSignature !== tokenPoolSignature) {
+    hfTokens = nextTokens;
+    tokenPoolSignature = nextSignature;
+    activeTokenIndex = 0;
+    resetBackendConnection();
+  }
+
+  updateQueueUI();
+  return hfTokens;
+}
+
+function activeToken() {
+  return hfTokens[activeTokenIndex] || "";
+}
+
 function updateQueueUI() {
   $("queuedChip").textContent = `Queued: ${localQueue.length}`;
-  $("activeChip").textContent = processing ? "Active: generating" : "Active: none";
+  $("tokenChip").textContent = hfTokens.length
+    ? `Token: ${activeTokenIndex + 1}/${hfTokens.length}`
+    : "Token: anonymous";
+
+  if (!processing) {
+    $("activeChip").textContent = "Active: none";
+    return;
+  }
+  const engine = activeBackend?.label || "connecting";
+  $("activeChip").textContent = `Active: ${engine}`;
 }
+
 function setViewer(mode, message = "") {
   $("empty").style.display = mode === "empty" ? "block" : "none";
   $("loading").style.display = mode === "loading" ? "block" : "none";
   $("image").style.display = mode === "image" ? "block" : "none";
   if (message) $("status").textContent = message;
 }
+
 function endpointInfo(names) {
   const named = api?.named_endpoints || {};
   const entries = Object.entries(named);
@@ -334,43 +515,269 @@ function endpointInfo(names) {
   }
   return { endpoint: names[0], spec: null };
 }
+
 function buildPayload(spec, values, fallback) {
   const params = spec?.parameters;
   if (!Array.isArray(params) || !params.length) return fallback;
+
   return params.map(param => {
     const name = normalise(param.parameter_name || param.label || param.name || param.component);
     if (Object.prototype.hasOwnProperty.call(values, name)) return values[name];
+
     for (const [alias, value] of Object.entries(values)) {
       if (alias && name && (name.includes(alias) || alias.includes(name))) return value;
     }
+
     if ("parameter_default" in param) return param.parameter_default;
     return null;
   });
 }
-async function connectBackend() {
-  if (client) return client;
-  $("loadingTitle").textContent = "Connecting to the remote AIDMA engine…";
-  client = await Client.connect(BACKEND_SPACE, {
+
+function withTimeout(promise, milliseconds, message) {
+  let timer;
+  const timeout = new Promise((_, reject) => {
+    timer = setTimeout(() => reject(new Error(message)), milliseconds);
+  });
+  return Promise.race([promise, timeout]).finally(() => clearTimeout(timer));
+}
+
+function backendIsCoolingDown(spaceId) {
+  const failedAt = backendFailures.get(spaceId);
+  if (!failedAt) return false;
+  if (Date.now() - failedAt >= BACKEND_FAILURE_COOLDOWN_MS) {
+    backendFailures.delete(spaceId);
+    return false;
+  }
+  return true;
+}
+
+function markBackendFailed(spaceId) {
+  backendFailures.set(spaceId, Date.now());
+}
+
+function backendSupportsAidmaApi(apiDescription) {
+  const named = apiDescription?.named_endpoints || {};
+  const names = Object.keys(named).map(normalise);
+  const hasAdd = names.some(name => name.includes(normalise("add_custom_lora")));
+  const hasRun = names.some(name => name.includes(normalise("run_lora")));
+  return hasAdd && hasRun;
+}
+
+function resetBackendConnection() {
+  client = null;
+  api = null;
+  activeBackend = null;
+  connectedTokenIndex = -1;
+  updateQueueUI();
+}
+
+async function connectBackend(index) {
+  const backend = BACKEND_SPACES[index];
+  if (!backend) throw new Error("Unknown backend index.");
+
+  if (
+    client &&
+    activeBackend?.id === backend.id &&
+    connectedTokenIndex === activeTokenIndex
+  ) return client;
+
+  resetBackendConnection();
+  activeBackend = backend;
+  updateQueueUI();
+
+  $("loadingTitle").textContent = `Connecting to ${backend.label}…`;
+  $("queueStatus").textContent = backend.id;
+
+  const handleSpaceStatus = status => {
+    if (status?.status && status.status !== "running") {
+      $("queueStatus").textContent = `${backend.label}: ${status.status}`;
+    }
+  };
+
+  const connectOptions = {
     events: ["data", "status"],
-    space_status: status => {
-      if (status?.status && status.status !== "running") {
-        $("queueStatus").textContent = `Remote Space: ${status.status}`;
+    space_status: handleSpaceStatus,
+    status_callback: handleSpaceStatus
+  };
+  const token = activeToken();
+  if (token) connectOptions.token = token;
+
+  const newClient = await withTimeout(
+    Client.connect(backend.id, connectOptions),
+    BACKEND_CONNECT_TIMEOUT_MS,
+    `${backend.label} connection timed out`
+  );
+
+  const newApi = await withTimeout(
+    newClient.view_api(),
+    BACKEND_CONNECT_TIMEOUT_MS,
+    `${backend.label} API check timed out`
+  );
+
+  if (!backendSupportsAidmaApi(newApi)) {
+    throw new Error(`${backend.label} is not compatible with the required AIDMA API`);
+  }
+
+  client = newClient;
+  api = newApi;
+  connectedTokenIndex = activeTokenIndex;
+  return client;
+}
+
+function errorText(error) {
+  return String(error?.message || error || "").replace(/\s+/g, " ").trim();
+}
+
+function isCallerZeroGpuQuotaError(error) {
+  const text = errorText(error).toLowerCase();
+  return (
+    text.includes("exceeded your free zerogpu quota") ||
+    text.includes("zerogpu quota") && text.includes("left") ||
+    text.includes("daily gpu quota") ||
+    text.includes("gpu quota") && text.includes("exceeded") ||
+    text.includes("try again in") && text.includes("quota")
+  );
+}
+
+function isTokenRateLimitError(error) {
+  const text = errorText(error).toLowerCase();
+  return (
+    isCallerZeroGpuQuotaError(error) ||
+    text.includes("too many requests") ||
+    text.includes("rate limit") ||
+    text.includes("rate-limit") ||
+    /(^|\D)429(\D|$)/.test(text)
+  );
+}
+
+function isTokenAuthenticationError(error) {
+  const text = errorText(error).toLowerCase();
+  return (
+    text.includes("invalid token") ||
+    text.includes("token is invalid") ||
+    text.includes("unauthorized") ||
+    text.includes("authentication failed") ||
+    text.includes("invalid credentials") ||
+    /(^|\D)401(\D|$)/.test(text)
+  );
+}
+
+function rotateToNextToken(reason) {
+  if (!hfTokens.length || activeTokenIndex + 1 >= hfTokens.length) return false;
+
+  const previousNumber = activeTokenIndex + 1;
+  activeTokenIndex += 1;
+  resetBackendConnection();
+  $("queueStatus").textContent =
+    `Token ${previousNumber} ${reason}. Switching to token ${activeTokenIndex + 1}/${hfTokens.length}…`;
+  updateQueueUI();
+  return true;
+}
+
+async function generateWithBackendFailover(job) {
+  const errors = [];
+  const remainingTokenAttempts = hfTokens.length
+    ? hfTokens.length - activeTokenIndex
+    : 1;
+  let attemptedTokens = 0;
+
+  while (attemptedTokens < remainingTokenAttempts) {
+    let switchedToken = false;
+
+    for (let offset = 0; offset < BACKEND_SPACES.length; offset++) {
+      const index = (preferredBackendIndex + offset) % BACKEND_SPACES.length;
+      const backend = BACKEND_SPACES[index];
+
+      if (backendIsCoolingDown(backend.id)) {
+        continue;
+      }
+
+      try {
+        await connectBackend(index);
+        $("queueStatus").textContent = `${backend.label}: loading AIDMA LoRA`;
+        const loaded = await loadSelectedLora(job);
+
+        $("queueStatus").textContent =
+          `${backend.label}: waiting for remote GPU and final image`;
+        await runGeneration(job, loaded.selectedIndex, loaded.trigger);
+
+        preferredBackendIndex = index;
+        backendFailures.delete(backend.id);
+        return;
+      } catch (error) {
+        const message = errorText(error);
+        console.error(`${backend.label} failed:`, error);
+
+        const quotaOrRateLimit = isTokenRateLimitError(error);
+        const authenticationFailure = isTokenAuthenticationError(error);
+
+        if (hfTokens.length && (quotaOrRateLimit || authenticationFailure)) {
+          attemptedTokens += 1;
+          errors.push(`Token ${activeTokenIndex + 1}: ${message || "unavailable"}`);
+          const reason = authenticationFailure ? "was rejected" : "reached its quota/rate limit";
+
+          if (attemptedTokens < remainingTokenAttempts && rotateToNextToken(reason)) {
+            switchedToken = true;
+            break;
+          }
+
+          resetBackendConnection();
+          activeTokenIndex = 0;
+          updateQueueUI();
+          throw new Error(
+            "All configured Hugging Face tokens reached quota/rate-limit or were rejected. " +
+            errors.join(" | ")
+          );
+        }
+
+        if (!hfTokens.length && quotaOrRateLimit) {
+          resetBackendConnection();
+          throw new Error(message);
+        }
+
+        errors.push(`${backend.label}: ${message || "unknown error"}`);
+        markBackendFailed(backend.id);
+        resetBackendConnection();
+
+        if (offset + 1 < BACKEND_SPACES.length) {
+          let nextBackend = null;
+          for (let ahead = offset + 1; ahead < BACKEND_SPACES.length; ahead++) {
+            const nextIndex = (preferredBackendIndex + ahead) % BACKEND_SPACES.length;
+            const candidate = BACKEND_SPACES[nextIndex];
+            if (!backendIsCoolingDown(candidate.id)) {
+              nextBackend = candidate;
+              break;
+            }
+          }
+          $("queueStatus").textContent = nextBackend
+            ? `${backend.label} failed. Switching to ${nextBackend.label}…`
+            : `${backend.label} failed. No healthy backend remains.`;
+        }
       }
     }
-  });
-  api = await client.view_api();
-  return client;
+
+    if (switchedToken) continue;
+
+    throw new Error(
+      "All configured AIDMA Spaces failed. " + errors.join(" | ")
+    );
+  }
 }
+
 function snapshotJob() {
+  syncTokenPool();
   const prompt = $("prompt").value.trim();
   if (!prompt) throw new Error("Write a prompt first.");
+
   const modelOption = $("model").selectedOptions[0];
   const [width, height] = $("ratio").value.split("x").map(Number);
   const styleName = $("style").value.trim();
   const styleText = STYLE_DETAIL[styleName] ?? styleName;
+
   const parts = [prompt];
   if (styleText && normalise(styleName) !== normalise("No extra style")) parts.push(styleText);
   if ($("boost").checked) parts.push(PROMPT_BOOST);
+
   return {
     id: ++jobCounter,
     repo: modelOption.value,
@@ -385,44 +792,57 @@ function snapshotJob() {
     loraScale: 0.95
   };
 }
+
 function remoteFileUrl(value) {
   if (typeof value !== "string") return null;
   const text = value.trim();
   if (!text) return null;
+
   // Already usable in the browser.
   if (/^(https?:\/\/|blob:|data:image\/)/i.test(text)) return text;
+
   // Modern Gradio may return a relative file route.
-  if (text.startsWith("/gradio_api/")) return `${BACKEND_ORIGIN}${text}`;
-  if (text.startsWith("gradio_api/")) return `${BACKEND_ORIGIN}/${text}`;
+  if (text.startsWith("/gradio_api/")) return `${activeBackend?.origin || ""}${text}`;
+  if (text.startsWith("gradio_api/")) return `${activeBackend?.origin || ""}/${text}`;
+
   // Some Gradio versions return only the server-side temporary path.
   if (
     text.startsWith("/tmp/") ||
     text.includes("/gradio/") ||
     /\.(png|jpe?g|webp|gif|bmp)(\?|$)/i.test(text)
   ) {
-    return `${BACKEND_ORIGIN}/gradio_api/file=${encodeURI(text)}`;
+    return `${activeBackend?.origin || ""}/gradio_api/file=${encodeURI(text)}`;
   }
+
   return null;
 }
+
 function extractImageUrl(value, seen = new Set()) {
   if (value == null) return null;
+
   if (typeof Blob !== "undefined" && value instanceof Blob) {
     return URL.createObjectURL(value);
   }
+
   if (typeof File !== "undefined" && value instanceof File) {
     return URL.createObjectURL(value);
   }
+
   if (typeof value === "string") {
     const trimmed = value.trim();
+
     // Some component serializers return raw base64 rather than a FileData URL.
     if (/^[A-Za-z0-9+/=\s]{1000,}$/.test(trimmed)) {
       return `data:image/png;base64,${trimmed.replace(/\s+/g, "")}`;
     }
+
     return remoteFileUrl(trimmed);
   }
+
   if (typeof value !== "object") return null;
   if (seen.has(value)) return null;
   seen.add(value);
+
   if (Array.isArray(value)) {
     // The first output of /run_lora is the generated image.
     for (const item of value) {
@@ -431,6 +851,7 @@ function extractImageUrl(value, seen = new Set()) {
     }
     return null;
   }
+
   // Gradio FileData commonly uses url/path/orig_name/name.
   for (const key of ["url", "path", "orig_name", "name", "image", "data"]) {
     if (Object.prototype.hasOwnProperty.call(value, key)) {
@@ -438,12 +859,15 @@ function extractImageUrl(value, seen = new Set()) {
       if (found) return found;
     }
   }
+
   for (const item of Object.values(value)) {
     const found = extractImageUrl(item, seen);
     if (found) return found;
   }
+
   return null;
 }
+
 function showImage(url, job) {
   $("image").src = url;
   $("download").href = url;
@@ -451,6 +875,7 @@ function showImage(url, job) {
   $("download").style.display = "inline-flex";
   setViewer("image", `${job.modelLabel} · seed ${job.seed}`);
 }
+
 async function loadSelectedLora(job) {
   const { endpoint, spec } = endpointInfo(["/add_custom_lora", "add_custom_lora"]);
   const payload = buildPayload(
@@ -462,17 +887,20 @@ async function loadSelectedLora(job) {
     },
     [job.repo]
   );
+
   const result = await client.predict(endpoint, payload);
   const data = result?.data || [];
   const selectedIndex = Number.isFinite(Number(data[4])) ? Number(data[4]) : null;
   const trigger = typeof data[5] === "string" && data[5].trim() ? data[5].trim() : job.trigger;
   return { selectedIndex, trigger };
 }
+
 async function runGeneration(job, selectedIndex, trigger) {
   const { endpoint, spec } = endpointInfo(["/run_lora", "run_lora"]);
   const finalPrompt = normalise(job.prompt).includes(normalise(trigger))
     ? job.prompt
     : `${trigger}, ${job.prompt}`;
+
   const values = {
     prompt: finalPrompt,
     prompttext: finalPrompt,
@@ -493,6 +921,7 @@ async function runGeneration(job, selectedIndex, trigger) {
     lorascale: job.loraScale,
     adapterstrength: job.loraScale
   };
+
   /*
     The explorer's generation function is a Python generator that emits preview
     frames. Using submit() here can leave a Static frontend holding only a
@@ -503,17 +932,22 @@ async function runGeneration(job, selectedIndex, trigger) {
     finalPrompt, null, 0.75, job.cfg, job.steps, false,
     job.seed, job.width, job.height, job.loraScale
   ];
+
   const payload = buildPayload(spec, values, fallbackWithoutState);
+
   $("queueStatus").textContent = "Waiting for the remote GPU and final image";
   const response = await client.predict(endpoint, payload);
+
   // @gradio/client normally returns { type: "data", data: [...] }.
   // Keep compatibility with clients that return the output array directly.
   const outputs = response?.data ?? response;
   console.log("AIDMA final Gradio outputs:", outputs);
+
   // /run_lora outputs: [generated image, final seed, progress component].
   const imageOutput = Array.isArray(outputs) ? outputs[0] : outputs;
   const returnedSeed = Array.isArray(outputs) ? Number(outputs[1]) : NaN;
   const finalUrl = extractImageUrl(imageOutput) || extractImageUrl(outputs);
+
   if (!finalUrl) {
     console.error("Unrecognized final Gradio image payload:", outputs);
     throw new Error(
@@ -521,14 +955,17 @@ async function runGeneration(job, selectedIndex, trigger) {
       "It may have rejected this LoRA or changed its API."
     );
   }
+
   if (Number.isFinite(returnedSeed)) job.seed = returnedSeed;
   showImage(finalUrl, job);
   return finalUrl;
 }
+
 async function processQueue() {
   if (processing || !localQueue.length) return;
   processing = true;
   updateQueueUI();
+
   while (localQueue.length) {
     const job = localQueue.shift();
     updateQueueUI();
@@ -537,11 +974,9 @@ async function processQueue() {
     $("queueStatus").textContent = "Preparing AIDMA LoRA";
     $("status").className = "";
     setViewer("loading", `Job #${job.id} is running.`);
+
     try {
-      await connectBackend();
-      const loaded = await loadSelectedLora(job);
-      $("queueStatus").textContent = "Submitting to remote GPU and waiting for final output";
-      await runGeneration(job, loaded.selectedIndex, loaded.trigger);
+      await generateWithBackendFailover(job);
     } catch (error) {
       console.error(error);
       $("status").className = "error";
@@ -551,18 +986,20 @@ async function processQueue() {
         '<div style="margin-top:8px">' + escapeHtml(error?.message || String(error)) + '</div>';
       setViewer("empty");
       // Force a clean connection for the next queued job.
-      client = null;
-      api = null;
+      resetBackendConnection();
     }
   }
+
   processing = false;
   updateQueueUI();
 }
+
 function escapeHtml(value) {
   return String(value).replace(/[&<>"']/g, char => ({
     "&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#039;"
   })[char]);
 }
+
 $("generate").addEventListener("click", () => {
   try {
     const job = snapshotJob();
@@ -577,13 +1014,22 @@ $("generate").addEventListener("click", () => {
     $("prompt").focus();
   }
 });
+
+$("hfTokens").addEventListener("input", () => {
+  const preview = parseHfTokens($("hfTokens").value);
+  $("tokenChip").textContent = preview.length
+    ? `Tokens entered: ${preview.length}/${MAX_HF_TOKENS}`
+    : "Token: anonymous";
+});
+
 $("prompt").addEventListener("keydown", event => {
   if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
     event.preventDefault();
     $("generate").click();
   }
 });
+
 updateQueueUI();
 </script>
 </body>
-</html>
+</html>