Spaces:

mo7ammad2012
/

rrgbbb

Running

App Files Files Community

rrgbbb

by mmohaa - opened 17 days ago

base: refs/heads/main

←

from: refs/pr/2

Discussion Files changed

+803

-49

Files changed (1) hide show

index.html +803 -49

index.html CHANGED Viewed

@@ -1,10 +1,10 @@
 <!doctype html>
-<html lang="en">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1" />
   <meta name="color-scheme" content="dark" />
-  <title>AIDMA Studio</title>
   <style>
     :root{
       --bg:#070910;--panel:#111522;--panel2:#0b0e18;--line:rgba(255,255,255,.09);
@@ -20,7 +20,7 @@
         radial-gradient(circle at 90% 12%,rgba(76,230,206,.13),transparent 25%),
         linear-gradient(180deg,#0b0e18 0%,var(--bg) 62%);
     }
-    .shell{width:min(1160px,calc(100% - 28px));margin:auto;padding:28px 0 45px}
     header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}
     .brand{display:flex;align-items:center;gap:13px}
     .logo{
@@ -75,8 +75,100 @@
     .queuebox{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
     .qchip{font-size:11px;border:1px solid var(--line);border-radius:999px;padding:7px 10px;color:#bcc4d5;background:rgba(255,255,255,.025)}
     .error{color:var(--red)!important}
     @media(max-width:900px){.grid{grid-template-columns:1fr}.viewer{min-height:520px}header{align-items:flex-start;flex-direction:column}}
-    @media(max-width:520px){.shell{width:calc(100% - 18px);padding-top:17px}.panel{border-radius:19px}.controls{padding:16px}.viewer{padding:9px}.row{grid-template-columns:1fr}}
   </style>
 </head>
 <body>
@@ -86,7 +178,7 @@
       <div class="logo">A6</div>
       <div>
         <h1>AIDMA Studio</h1>
-        <div class="sub">Static HTML interface · AIDMA-only remote generation</div>
       </div>
     </div>
     <div class="tag">Fresh automatic seed every time</div>
@@ -145,15 +237,49 @@
         <input id="boost" type="checkbox" checked />
       </div>
       <button id="generate">Add to private browser queue</button>
       <div class="queuebox">
         <span class="qchip" id="queuedChip">Queued: 0</span>
         <span class="qchip" id="activeChip">Active: none</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.
       </div>
     </div>
@@ -162,7 +288,7 @@
         <div class="empty" id="empty">
           <div class="orb">✦</div>
           <strong>Your next frame begins here.</strong>
-          <div style="margin-top:8px">Write a prompt and add it to your queue.</div>
         </div>
         <div class="loading" id="loading">
           <div class="spinner"></div>
@@ -181,19 +307,361 @@
 <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";
 const $ = id => document.getElementById(id);
 const localQueue = [];
 let processing = false;
 let client = null;
 let api = null;
 let jobCounter = 0;
 const STYLES = [
   "No extra style","Photorealistic","Ultra realistic photography","Cinematic",
   "Hollywood blockbuster","IMAX film still","35mm analog film","70mm epic cinema",
@@ -240,6 +708,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 +768,43 @@ 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 updateQueueUI() {
   $("queuedChip").textContent = `Queued: ${localQueue.length}`;
-  $("activeChip").textContent = processing ? "Active: generating" : "Active: none";
 }
 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,6 +818,7 @@ 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;
@@ -347,30 +832,242 @@ function buildPayload(spec, values, fallback) {
     return null;
   });
 }
-async function connectBackend() {
-  if (client) return client;
-  $("loadingTitle").textContent = "Connecting to the remote AIDMA engine…";
-  client = await Client.connect(BACKEND_SPACE, {
     events: ["data", "status"],
     space_status: status => {
       if (status?.status && status.status !== "running") {
-        $("queueStatus").textContent = `Remote Space: ${status.status}`;
       }
     }
-  });
-  api = await client.view_api();
   return client;
 }
 function snapshotJob() {
   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,25 +1082,24 @@ 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}`;
-  // 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 null;
 }
 function extractImageUrl(value, seen = new Set()) {
   if (value == null) return null;
   if (typeof Blob !== "undefined" && value instanceof Blob) {
@@ -414,7 +1110,6 @@ function extractImageUrl(value, seen = new Set()) {
   }
   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, "")}`;
     }
@@ -424,14 +1119,12 @@ function extractImageUrl(value, seen = new Set()) {
   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) {
       const found = extractImageUrl(item, seen);
       if (found) return found;
     }
     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)) {
       const found = extractImageUrl(value[key], seen);
@@ -444,6 +1137,7 @@ function extractImageUrl(value, seen = new Set()) {
   }
   return null;
 }
 function showImage(url, job) {
   $("image").src = url;
   $("download").href = url;
@@ -451,6 +1145,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(
@@ -468,11 +1163,13 @@ async function loadSelectedLora(job) {
   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,27 +1190,24 @@ 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
-    progress event. predict() waits until the generator completes and returns
-    the final three outputs: [image, seed, progress].
-  */
   const fallbackWithoutState = [
     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,27 +1215,33 @@ 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();
     $("download").style.display = "none";
     $("loadingTitle").textContent = `Generating job #${job.id}…`;
-    $("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);
     } catch (error) {
       console.error(error);
       $("status").className = "error";
@@ -550,25 +1250,40 @@ async function processQueue() {
         '<div class="orb">!</div><strong>Generation failed.</strong>' +
         '<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;
     }
   }
   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();
     localQueue.push(job);
     $("status").className = "";
-    $("status").textContent = `Job #${job.id} added to your browser queue.`;
     updateQueueUI();
     processQueue();
   } catch (error) {
@@ -577,13 +1292,52 @@ $("generate").addEventListener("click", () => {
     $("prompt").focus();
   }
 });
 $("prompt").addEventListener("keydown", event => {
   if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
     event.preventDefault();
     $("generate").click();
   }
 });
 updateQueueUI();
 </script>
 </body>
 </html>

 <!doctype html>
+<html lang="ar" dir="rtl">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1" />
   <meta name="color-scheme" content="dark" />
+  <title>AIDMA Studio - مع نظام التوكنز</title>
   <style>
     :root{
       --bg:#070910;--panel:#111522;--panel2:#0b0e18;--line:rgba(255,255,255,.09);
         radial-gradient(circle at 90% 12%,rgba(76,230,206,.13),transparent 25%),
         linear-gradient(180deg,#0b0e18 0%,var(--bg) 62%);
     }
+    .shell{width:min(1180px,calc(100% - 28px));margin:auto;padding:28px 0 45px}
     header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}
     .brand{display:flex;align-items:center;gap:13px}
     .logo{
     .queuebox{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
     .qchip{font-size:11px;border:1px solid var(--line);border-radius:999px;padding:7px 10px;color:#bcc4d5;background:rgba(255,255,255,.025)}
     .error{color:var(--red)!important}
+    /* ===== Token System Styles ===== */
+    .tokenSection{
+      margin:18px 0 20px;
+      padding:16px;
+      border:1px solid rgba(139,108,255,.18);
+      border-radius:18px;
+      background: linear-gradient(180deg, rgba(139,108,255,.08), rgba(255,255,255,.02));
+    }
+    .tokenHeader{
+      display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap
+    }
+    .tokenHeader label{margin:0 !important;font-size:13px !important;letter-spacing:0 !important;text-transform:none !important;color:#d8dcf0 !important}
+    .tokenBulkInput{
+      min-height:88px !important;
+      font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
+      font-size:12px !important;
+      direction:ltr;
+    }
+    .btn-secondary{
+      height:42px !important;
+      font-size:13px !important;
+      font-weight:700 !important;
+      background: rgba(255,255,255,.06) !important;
+      color: #d6daea !important;
+      border:1px solid var(--line) !important;
+      box-shadow:none !important;
+    }
+    .btn-secondary:hover{background:rgba(255,255,255,.09) !important}
+    .tokenList{
+      display:flex;flex-direction:column;gap:8px;
+      max-height:320px;overflow:auto;margin-bottom:12px;
+      padding-right:2px;
+    }
+    .tokenList::-webkit-scrollbar{width:6px}
+    .tokenList::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:999px}
+    .tokenCard{
+      border:1px solid var(--line);
+      background: rgba(11,14,24,.85);
+      border-radius:14px;
+      padding:10px 11px;
+      transition:.18s;
+      direction:ltr;
+    }
+    .tokenCard.active{
+      border-color: rgba(76,230,206,.55);
+      background: rgba(76,230,206,.09);
+      box-shadow: 0 0 0 3px rgba(76,230,206,.10);
+    }
+    .tokenCard.exhausted{
+      opacity:.55;
+      border-style:dashed;
+    }
+    .tokenCardTop{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
+    .tokenMask{font-family:ui-monospace,monospace;font-size:12px;font-weight:700;letter-spacing:.2px}
+    .tokenBadge{font-size:10px;padding:4px 8px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);white-space:nowrap}
+    .tokenBadge.active{background:var(--mint);color:#06201b;border-color:var(--mint);font-weight:800}
+    .tokenBadge.exhausted{background:rgba(255,108,130,.15);color:var(--red);border-color:rgba(255,108,130,.25)}
+    .tokenProgress{height:6px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;margin-bottom:7px}
+    .tokenProgressFill{height:100%;border-radius:999px;transition: width .5s ease}
+    .tokenMeta{font-size:11px;color:var(--muted);display:flex;justify-content:space-between;gap:8px}
+    .tokenActions{display:flex;gap:6px;margin-top:8px}
+    .miniBtn{
+      height:28px !important;font-size:11px !important;font-weight:700 !important;
+      border-radius:9px !important;padding:0 10px !important;width:auto !important;flex:1;
+      background:rgba(255,255,255,.06) !important;color:#d0d5e6 !important;border:1px solid var(--line) !important;box-shadow:none !important
+    }
+    .miniBtn.activeBtn{background:var(--mint) !important;color:#06201b !important;border-color:var(--mint) !important}
+    .miniBtn.danger:hover{background:rgba(255,108,130,.15) !important;color:var(--red) !important;border-color:rgba(255,108,130,.3) !important}
+    .tokenGlobalStats{
+      display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px
+    }
+    .statBox{
+      border:1px solid var(--line);border-radius:12px;padding:10px;
+      background:rgba(255,255,255,.02);text-align:center
+    }
+    .statVal{font-size:18px;font-weight:900;letter-spacing:-.5px;color:var(--text)}
+    .statLabel{font-size:10px;color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:.06em}
+    .tokenLive{
+      display:flex;align-items:center;gap:8px;
+      padding:8px 10px;border-radius:11px;
+      background:rgba(76,230,206,.10);border:1px solid rgba(76,230,206,.18);
+      font-size:12px;color:#c7f0e8;margin-bottom:10px;
+      direction:ltr;
+    }
+    .liveDot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(76,230,206,.18);animation:pulse 1.2s infinite}
+    @keyframes pulse{0%{box-shadow:0 0 0 4px rgba(76,230,206,.18)}50%{box-shadow:0 0 0 8px rgba(76,230,206,.08)}100%{box-shadow:0 0 0 4px rgba(76,230,206,.18)}}
+    .emptyTokens{padding:18px;text-align:center;color:var(--muted);font-size:13px;border:1px dashed var(--line);border-radius:12px;background:rgba(255,255,255,.01)}
     @media(max-width:900px){.grid{grid-template-columns:1fr}.viewer{min-height:520px}header{align-items:flex-start;flex-direction:column}}
+    @media(max-width:520px){
+      .shell{width:calc(100% - 18px);padding-top:17px}.panel{border-radius:19px}.controls{padding:16px}.viewer{padding:9px}.row{grid-template-columns:1fr}
+      .tokenGlobalStats{grid-template-columns:1fr 1fr}
+    }
   </style>
 </head>
 <body>
       <div class="logo">A6</div>
       <div>
         <h1>AIDMA Studio</h1>
+        <div class="sub">Static HTML interface · AIDMA-only remote generation · نظام التوكنز الذكي</div>
       </div>
     </div>
     <div class="tag">Fresh automatic seed every time</div>
         <input id="boost" type="checkbox" checked />
       </div>
+      <!-- ========== نظام التوكنز الجديد ========== -->
+      <div class="tokenSection" id="tokenSection">
+        <div class="tokenHeader">
+          <label>🎟️ إدارة التوكنز - كل توكن = 5 دقائق quota</label>
+          <span class="qchip" id="tokenStatsChip">0 توكن</span>
+        </div>
+        <div id="tokenLiveIndicator" style="display:none" class="tokenLive">
+          <div class="liveDot"></div>
+          <span id="tokenLiveText">يتم الاستهلاك من التوكن النشط...</span>
+        </div>
+        <div class="field" style="margin-bottom:10px">
+          <textarea id="tokenBulkInput" class="tokenBulkInput" placeholder="الصق التوكنات هنا، كل توكن في سطر:&#10;hf_xxxxxxxxxxxxxxxxxxxxxxxx&#10;hf_yyyyyyyyyyyyyyyyyyyyyyyy&#10;hf_zzzzzzzzzzzzzzzzzzzzzzzz&#10;&#10;مثال: لو حطيت 30 توكن = 150 دقيقة"></textarea>
+        </div>
+        <div class="row" style="margin-bottom:12px">
+          <button type="button" class="btn-secondary" id="addTokensBtn">+ إضافة التوكنز</button>
+          <button type="button" class="btn-secondary" id="clearTokensBtn">🗑️ مسح الكل</button>
+        </div>
+        <div id="tokenPoolList" class="tokenList"></div>
+        <div id="tokenGlobalStats" class="tokenGlobalStats"></div>
+        <div class="fine" style="margin-top:8px">
+          ⚠️ التوكنز تُحفظ محلياً في متصفحك فقط (localStorage) ولا تُرسل إلا إلى HuggingFace مباشرة.<br>
+          النظام يبدأ بأول توكن، يستهلك 5 دقائق، ثم ينتقل تلقائياً للتالي وهكذا.<br>
+          عند انتهاء quota للتوكن الحالي، يتم التبديل فوراً بدون توقف الطابور.
+        </div>
+      </div>
+      <!-- ========== نهاية نظام التوكنز ========== -->
       <button id="generate">Add to private browser queue</button>
       <div class="queuebox">
         <span class="qchip" id="queuedChip">Queued: 0</span>
         <span class="qchip" id="activeChip">Active: none</span>
+        <span class="qchip" id="engineChip">Engines: 20</span>
       </div>
       <div class="fine">
+        This Static Space keeps a private FIFO queue in your browser and checks up to 20 AIDMA backend candidates, automatically skipping unavailable or incompatible Spaces. With token pool, each token provides 5 min ZeroGPU and auto-rotates.
       </div>
     </div>
         <div class="empty" id="empty">
           <div class="orb">✦</div>
           <strong>Your next frame begins here.</strong>
+          <div style="margin-top:8px">Write a prompt and add it to your queue. أضف توكناتك أولاً للحصول على quota.</div>
         </div>
         <div class="loading" id="loading">
           <div class="spinner"></div>
 <script type="module">
 import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/+esm";
+function spaceOrigin(spaceId) {
+  return `https://${spaceId.replace("/", "-").toLowerCase()}.hf.space`;
+}
+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 backendFailures = new Map();
+const BACKEND_FAILURE_COOLDOWN_MS = 10 * 60 * 1000;
+const BACKEND_CONNECT_TIMEOUT_MS = 18 * 1000;
+// ===================== نظام التوكنز =====================
+const TOKEN_QUOTA_SECONDS = 5 * 60; // كل توكن = 5 دقائق
+const LS_KEY = 'aidma_token_pool_v2';
+let activeGenInterval = null;
+function maskToken(token){
+  if(!token) return 'بدون توكن';
+  const t = token.trim();
+  if(t.length <= 12) return t.slice(0,4)+'***';
+  return t.slice(0,7) + '***' + t.slice(-4);
+}
+function formatTime(sec){
+  sec = Math.max(0, Math.round(sec));
+  const m = Math.floor(sec/60);
+  const s = sec%60;
+  return `${m}:${String(s).padStart(2,'0')}`;
+}
+function formatTimeArabic(sec){
+  sec = Math.max(0, Math.round(sec));
+  const m = Math.floor(sec/60);
+  const s = sec%60;
+  if(m===0) return `${s} ثانية`;
+  if(s===0) return `${m} دقيقة`;
+  return `${m} دقيقة و ${s} ثانية`;
+}
+const tokenManager = {
+  tokens: [],
+  activeId: null,
+  load(){
+    try{
+      const raw = localStorage.getItem(LS_KEY);
+      if(raw){
+        const parsed = JSON.parse(raw);
+        this.tokens = (parsed.tokens||[]).map(t=>({
+          id: t.id || Math.random().toString(36).slice(2),
+          value: t.value,
+          total: TOKEN_QUOTA_SECONDS,
+          remaining: typeof t.remaining === 'number' ? Math.max(0, Math.min(TOKEN_QUOTA_SECONDS, t.remaining)) : TOKEN_QUOTA_SECONDS,
+          used: typeof t.used === 'number' ? t.used : 0,
+          status: t.status || 'ready',
+          addedAt: t.addedAt || Date.now(),
+        }));
+        this.activeId = parsed.activeId || null;
+      }
+    }catch(e){ console.warn('load tokens failed', e); this.tokens=[];}
+    // تنظيف وتصحيح
+    this.tokens = this.tokens.filter(t=>t.value && t.value.trim().length>10);
+    // إذا لا يوجد active أو الحالي منتهي، اختر أول جاهز
+    const activeExists = this.tokens.find(t=>t.id===this.activeId && t.remaining>0);
+    if(!activeExists && this.tokens.length){
+      const firstReady = this.tokens.find(t=>t.remaining>0);
+      if(firstReady){
+        this.activeId = firstReady.id;
+        firstReady.status = 'active';
+      }
+    }
+    // تأكد من حالات
+    this.tokens.forEach(t=>{
+      if(t.remaining<=0){ t.status='exhausted'; t.remaining=0; }
+      else if(t.id===this.activeId){ t.status='active'; }
+      else if(t.status==='active'){ t.status='ready'; }
+    });
+  },
+  save(){
+    try{
+      localStorage.setItem(LS_KEY, JSON.stringify({tokens:this.tokens, activeId:this.activeId}));
+    }catch(e){ console.warn('save failed', e); }
+  },
+  parseBulk(text){
+    if(!text) return [];
+    return text.split(/[\n, \t]+/)
+      .map(s=>s.trim())
+      .filter(s=>s.length>10)
+      .filter(s=>s.startsWith('hf_') || s.length>20) // قبول hf_ أو توكن طويل
+      .map(s=>s.replace(/['\"]/g,'').trim())
+      .filter((v,i,a)=>a.indexOf(v)===i); // unique
+  },
+  addBulk(rawText){
+    const list = this.parseBulk(rawText);
+    if(!list.length) return {added:0, skipped:0};
+    let added=0, skipped=0;
+    const existingValues = new Set(this.tokens.map(t=>t.value));
+    for(const val of list){
+      if(existingValues.has(val)){ skipped++; continue; }
+      const tok = {
+        id: (Date.now()+Math.random()).toString(36).slice(2) + added,
+        value: val,
+        total: TOKEN_QUOTA_SECONDS,
+        remaining: TOKEN_QUOTA_SECONDS,
+        used: 0,
+        status: 'ready',
+        addedAt: Date.now()
+      };
+      this.tokens.push(tok);
+      existingValues.add(val);
+      added++;
+    }
+    if(this.tokens.length && !this.activeId){
+      const first = this.tokens.find(t=>t.remaining>0);
+      if(first){ this.activeId = first.id; first.status='active'; }
+    }
+    this.save();
+    return {added, skipped, total:list.length};
+  },
+  remove(id){
+    const idx = this.tokens.findIndex(t=>t.id===id);
+    if(idx>=0){
+      this.tokens.splice(idx,1);
+      if(this.activeId===id){
+        const next = this.tokens.find(t=>t.remaining>0);
+        this.activeId = next ? next.id : null;
+        if(next) next.status='active';
+      }
+      this.save();
+    }
+  },
+  clear(){
+    this.tokens = [];
+    this.activeId = null;
+    this.save();
+  },
+  getActive(){
+    if(this.activeId){
+      const t = this.tokens.find(x=>x.id===this.activeId);
+      if(t && t.remaining>0) return t;
+    }
+    return this.tokens.find(t=>t.remaining>0) || null;
+  },
+  setActive(id){
+    const tok = this.tokens.find(t=>t.id===id);
+    if(!tok || tok.remaining<=0) return false;
+    this.tokens.forEach(t=>{ if(t.status==='active') t.status='ready'; });
+    tok.status='active';
+    this.activeId = id;
+    this.save();
+    return true;
+  },
+  exhaust(id, reason=''){
+    const t = this.tokens.find(x=>x.id===id);
+    if(!t) return;
+    t.remaining = 0;
+    t.used = t.total;
+    t.status = 'exhausted';
+    t.exhaustedReason = reason;
+    t.exhaustedAt = Date.now();
+    if(this.activeId===id){
+      const next = this.tokens.find(x=>x.remaining>0 && x.id!==id);
+      this.activeId = next ? next.id : null;
+      if(next) next.status='active';
+    }
+    this.save();
+  },
+  getStats(){
+    const total = this.tokens.length;
+    const ready = this.tokens.filter(t=>t.remaining>0).length;
+    const exhausted = total - ready;
+    const totalRemaining = this.tokens.reduce((s,t)=>s+t.remaining,0);
+    const totalUsed = this.tokens.reduce((s,t)=>s+t.used,0);
+    const totalQuota = total * TOKEN_QUOTA_SECONDS;
+    const active = this.getActive();
+    return {total, ready, exhausted, totalRemaining, totalUsed, totalQuota, active};
+  }
+};
+function renderTokens(){
+  const listEl = $("tokenPoolList");
+  const chip = $("tokenStatsChip");
+  const statsEl = $("tokenGlobalStats");
+  const stats = tokenManager.getStats();
+  // Chip
+  if(stats.total===0){
+    chip.textContent = '0 توكن';
+  } else {
+    chip.textContent = `${stats.total} توكن | ${stats.ready} جاهز | ${formatTime(stats.totalRemaining)} متبقي`;
+  }
+  // List
+  if(stats.total===0){
+    listEl.innerHTML = `<div class="emptyTokens">🔑 لا يوجد توكنز<br><span style="font-size:11px">الصق 30 توكن مثلاً = 150 دقيقة quota متواصلة</span></div>`;
+  } else {
+    listEl.innerHTML = tokenManager.tokens.map(t=>{
+      const isActive = t.id===tokenManager.activeId && t.remaining>0;
+      const pct = t.total>0 ? (t.remaining / t.total * 100) : 0;
+      const pctUsed = 100-pct;
+      let color = 'linear-gradient(90deg,var(--mint),var(--purple))';
+      if(t.remaining<=0) color = '#ff6c82';
+      else if(pct<25) color = '#ffbe5c';
+      else if(isActive) color = 'linear-gradient(90deg,var(--mint),#8bffde)';
+      const statusText = t.status==='exhausted' ? 'منتهي' : (isActive ? 'نشط الآن' : 'جاهز');
+      const badgeClass = t.status==='exhausted' ? 'exhausted' : (isActive ? 'active' : '');
+      return `
+        <div class="tokenCard ${t.status} ${isActive?'active':''}">
+          <div class="tokenCardTop">
+            <span class="tokenMask">${maskToken(t.value)}</span>
+            <span class="tokenBadge ${badgeClass}">${statusText}</span>
+          </div>
+          <div class="tokenProgress"><div class="tokenProgressFill" style="width:${pct}%;background:${color}"></div></div>
+          <div class="tokenMeta">
+            <span>⏳ متبقي: ${formatTime(t.remaining)} / ${formatTime(t.total)}</span>
+            <span>🔥 مستهلك: ${formatTime(t.used)}</span>
+          </div>
+          <div class="tokenActions">
+            <button class="miniBtn ${isActive?'activeBtn':''}" data-action="activate" data-id="${t.id}" ${t.remaining<=0?'disabled':''}>${isActive?'✓ نشط':'تفعيل'}</button>
+            <button class="miniBtn danger" data-action="remove" data-id="${t.id}">حذف</button>
+          </div>
+        </div>
+      `;
+    }).join('');
+    // attach listeners via delegation
+    listEl.querySelectorAll('button[data-action]').forEach(btn=>{
+      btn.addEventListener('click', ()=>{
+        const id = btn.getAttribute('data-id');
+        const action = btn.getAttribute('data-action');
+        if(action==='activate'){
+          tokenManager.setActive(id);
+          renderTokens();
+          $("status").textContent = `تم تفعيل التوكن ${maskToken(tokenManager.tokens.find(x=>x.id===id).value)}`;
+        } else if(action==='remove'){
+          if(confirm('حذف هذا التوكن؟')){ tokenManager.remove(id); renderTokens(); }
+        }
+      });
+    });
+  }
+  // Global stats boxes
+  if(stats.total>0){
+    statsEl.innerHTML = `
+      <div class="statBox">
+        <div class="statVal">${stats.total}</div>
+        <div class="statLabel">إجمالي التوكنز</div>
+      </div>
+      <div class="statBox">
+        <div class="statVal" style="color:var(--mint)">${formatTime(stats.totalRemaining)}</div>
+        <div class="statLabel">الوقت المتبقي الكلي (${Math.floor(stats.totalRemaining/60)} دقيقة)</div>
+      </div>
+      <div class="statBox">
+        <div class="statVal">${stats.ready}</div>
+        <div class="statLabel">جاهز للاستخدام</div>
+      </div>
+      <div class="statBox">
+        <div class="statVal" style="color:${stats.exhausted>0?'var(--red)':'var(--muted)'}">${stats.exhausted}</div>
+        <div class="statLabel">منتهي</div>
+      </div>
+    `;
+    statsEl.style.display = 'grid';
+  } else {
+    statsEl.innerHTML = '';
+    statsEl.style.display = 'none';
+  }
+  // update live indicator
+  updateLiveIndicator();
+}
+function updateLiveIndicator(){
+  const ind = $("tokenLiveIndicator");
+  const txt = $("tokenLiveText");
+  const active = tokenManager.getActive();
+  if(processing && active && activeGenInterval){
+    ind.style.display='flex';
+    txt.textContent = `🔴 يستهلك من ${maskToken(active.value)} - متبقي ${formatTime(active.remaining)} - إجمالي متبقي ${formatTime(tokenManager.getStats().totalRemaining)}`;
+  } else {
+    ind.style.display='none';
+  }
+}
+function startTokenCountdown(tokenId){
+  stopTokenCountdown();
+  const start = Date.now();
+  activeGenInterval = setInterval(()=>{
+    const tok = tokenManager.tokens.find(t=>t.id===tokenId);
+    if(!tok || tok.remaining<=0){
+      stopTokenCountdown();
+      renderTokens();
+      return;
+    }
+    // نقص ثانية كل ثانية
+    tok.remaining = Math.max(0, tok.remaining - 1);
+    tok.used = tok.total - tok.remaining;
+    if(tok.remaining<=0){
+      tokenManager.exhaust(tokenId, 'انتهى الوقت المحلي - 5 دقائق');
+      $("queueStatus").textContent = `التوكن ${maskToken(tok.value)} انتهى (5 دقائق). سيتم التبديل تلقائيا...`;
+    }
+    tokenManager.save();
+    // تحديث سريع بدون إعادة رسم كامل كل ثانية لتقليل التقطيع؟ بس نعمل render خفيف
+    const stats = tokenManager.getStats();
+    $("tokenStatsChip").textContent = `${stats.total} توكن | ${stats.ready} جاهز | ${formatTime(stats.totalRemaining)} متبقي`;
+    // تحديث البطاقة النشطة فقط
+    const activeCard = document.querySelector(`.tokenCard.active .tokenMeta`);
+    if(activeCard){
+      activeCard.innerHTML = `<span>⏳ متبقي: ${formatTime(tok.remaining)} / ${formatTime(tok.total)}</span><span>🔥 مستهلك: ${formatTime(tok.used)}</span>`;
+      const fill = document.querySelector(`.tokenCard.active .tokenProgressFill`);
+      if(fill) fill.style.width = `${(tok.remaining/tok.total*100)}%`;
+    }
+    updateLiveIndicator();
+    // تحديث global remaining
+    const remainEl = document.querySelector('#tokenGlobalStats .statBox:nth-child(2) .statVal');
+    if(remainEl) remainEl.textContent = formatTime(stats.totalRemaining);
+  }, 1000);
+}
+function stopTokenCountdown(){
+  if(activeGenInterval){
+    clearInterval(activeGenInterval);
+    activeGenInterval = null;
+  }
+}
+// ===================== نهاية نظام التوكنز =====================
 const STYLES = [
   "No extra style","Photorealistic","Ultra realistic photography","Cinematic",
   "Hollywood blockbuster","IMAX film still","35mm analog film","70mm epic cinema",
   "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",
   "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 updateQueueUI() {
   $("queuedChip").textContent = `Queued: ${localQueue.length}`;
+  if (!processing) {
+    const active = tokenManager.getActive();
+    if(active) $("activeChip").textContent = `Active Token: ${maskToken(active.value)} (${formatTime(active.remaining)})`;
+    else $("activeChip").textContent = tokenManager.tokens.length? "Active: كل التوكنز منتهية" : "Active: none";
+    return;
+  }
+  const engine = activeBackend?.label || "connecting";
+  const activeTok = tokenManager.getActive();
+  if(activeTok) $("activeChip").textContent = `${engine} | ${maskToken(activeTok.value)}`;
+  else $("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);
   }
   return { endpoint: names[0], spec: null };
 }
 function buildPayload(spec, values, fallback) {
   const params = spec?.parameters;
   if (!Array.isArray(params) || !params.length) return fallback;
     return null;
   });
 }
+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;
+  updateQueueUI();
+}
+async function connectBackend(index, hfToken) {
+  const backend = BACKEND_SPACES[index];
+  if (!backend) throw new Error("Unknown backend index.");
+  // إذا لدينا نفس الباكند ونفس التوكن، أعد استخدام العميل
+  if (client && activeBackend?.id === backend.id && activeBackend?.token === (hfToken||null)) return client;
+  resetBackendConnection();
+  activeBackend = {...backend, token: hfToken||null};
+  updateQueueUI();
+  $("loadingTitle").textContent = `Connecting to ${backend.label}…`;
+  const tokenInfo = hfToken ? `باستخدام ${maskToken(hfToken)}` : 'بدون توكن';
+  $("queueStatus").textContent = `${backend.id} | ${tokenInfo}`;
+  const connectOptions = {
     events: ["data", "status"],
     space_status: status => {
       if (status?.status && status.status !== "running") {
+        $("queueStatus").textContent = `${backend.label}: ${status.status} | ${tokenInfo}`;
       }
     }
+  };
+  if(hfToken){
+    connectOptions.hf_token = hfToken;
+  }
+  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;
   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("try again in") && text.includes("quota") ||
+    text.includes("quota exceeded") ||
+    text.includes("no gpu") && text.includes("quota")
+  );
+}
+async function generateWithBackendFailover(job, hfToken) {
+  const errors = [];
+  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, hfToken);
+      $("queueStatus").textContent = `${backend.label}: loading AIDMA LoRA | Token ${hfToken?maskToken(hfToken):'anon'}`;
+      const loaded = await loadSelectedLora(job);
+      $("queueStatus").textContent =
+        `${backend.label}: waiting for remote GPU and final image | ${hfToken?maskToken(hfToken):''}`;
+      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);
+      if (isCallerZeroGpuQuotaError(error)) {
+        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;
+          }
+        }
+        const tokenInfo = hfToken? maskToken(hfToken): '';
+        $("queueStatus").textContent = nextBackend
+          ? `${backend.label} failed. Switching to ${nextBackend.label}… ${tokenInfo}`
+          : `${backend.label} failed. No healthy backend remains.`;
+      }
+    }
+  }
+  throw new Error(
+    "All configured AIDMA Spaces failed. " + errors.join(" | ")
+  );
+}
+async function attemptJobWithTokenRotation(job){
+  while(true){
+    const activeToken = tokenManager.getActive();
+    const hasPool = tokenManager.tokens.length>0;
+    if(hasPool && !activeToken){
+      throw new Error("انتهت جميع التوكنات! كل توكن استهلك 5 دقائق. أضف توكنات جديدة للمتابعة. (لو حطيت 30 توكن = 150 دقيقة كانت متاحة)");
+    }
+    const tokenValue = activeToken ? activeToken.value : null;
+    const tokenId = activeToken ? activeToken.id : null;
+    if(tokenId){
+      tokenManager.setActive(tokenId);
+      renderTokens();
+      $("activeChip").textContent = `Token: ${maskToken(activeToken.value)} | ${formatTime(activeToken.remaining)} left`;
+    }
+    if(tokenId) startTokenCountdown(tokenId);
+    try{
+      const jobStart = Date.now();
+      await generateWithBackendFailover(job, tokenValue);
+      stopTokenCountdown();
+      // إذا كان هناك عداد زمني شغال، فاستهلاكه تم بالفعل عبر الانترفال
+      // لكن لتكون دقيقه نحسب ما تبقى من الانترفال ونزامن
+      renderTokens();
+      const t = tokenId ? tokenManager.tokens.find(x=>x.id===tokenId) : null;
+      if(t){
+        if(t.remaining <= 15 && tokenManager.tokens.filter(x=>x.remaining>0).length>1){
+          const next = tokenManager.tokens.find(x=>x.remaining>0 && x.id!==tokenId);
+          if(next){
+            $("status").textContent = `التوكن ${maskToken(t.value)} أوشك على الانتهاء (${formatTime(t.remaining)} متبقي). التالي سيكون ${maskToken(next.value)} تلقائياً.`;
+          }
+        }
+        if(t.remaining<=0){
+          const next = tokenManager.tokens.find(x=>x.remaining>0);
+          if(next){
+            $("queueStatus").textContent = `انتهى ${maskToken(t.value)} (5 دقائق). الانتقال تلقائياً إلى ${maskToken(next.value)}`;
+          }
+        }
+      }
+      return;
+    }catch(err){
+      stopTokenCountdown();
+      const isQuota = isCallerZeroGpuQuotaError(err);
+      if(isQuota && tokenId){
+        console.warn(`Token exhausted: ${maskToken(tokenManager.tokens.find(x=>x.id===tokenId)?.value)}`);
+        tokenManager.exhaust(tokenId, err.message);
+        renderTokens();
+        const stats = tokenManager.getStats();
+        $("queueStatus").textContent = `🚨 التوكن ${maskToken(activeToken.value)} انتهت حصته (5 دقائق). متبقي ${stats.ready} توكن و ${formatTime(stats.totalRemaining)} - جاري التبديل...`;
+        // انتظر قليلا ثم حاول بالتوكن التالي لنفس الوظيفة
+        await new Promise(r=>setTimeout(r,1200));
+        continue;
+      }else{
+        throw err;
+      }
+    }
+  }
+}
 function snapshotJob() {
   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,
     loraScale: 0.95
   };
 }
 function remoteFileUrl(value) {
   if (typeof value !== "string") return null;
   const text = value.trim();
   if (!text) return null;
   if (/^(https?:\/\/|blob:|data:image\/)/i.test(text)) return text;
+  if (text.startsWith("/gradio_api/")) return `${activeBackend?.origin || ""}${text}`;
+  if (text.startsWith("gradio_api/")) return `${activeBackend?.origin || ""}/${text}`;
   if (
     text.startsWith("/tmp/") ||
     text.includes("/gradio/") ||
     /\.(png|jpe?g|webp|gif|bmp)(\?|$)/i.test(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) {
   }
   if (typeof value === "string") {
     const trimmed = value.trim();
     if (/^[A-Za-z0-9+/=\s]{1000,}$/.test(trimmed)) {
       return `data:image/png;base64,${trimmed.replace(/\s+/g, "")}`;
     }
   if (seen.has(value)) return null;
   seen.add(value);
   if (Array.isArray(value)) {
     for (const item of value) {
       const found = extractImageUrl(item, seen);
       if (found) return found;
     }
     return null;
   }
   for (const key of ["url", "path", "orig_name", "name", "image", "data"]) {
     if (Object.prototype.hasOwnProperty.call(value, key)) {
       const found = extractImageUrl(value[key], seen);
   }
   return null;
 }
 function showImage(url, job) {
   $("image").src = url;
   $("download").href = url;
   $("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(
   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,
     lorascale: job.loraScale,
     adapterstrength: job.loraScale
   };
   const fallbackWithoutState = [
     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);
   const outputs = response?.data ?? response;
   console.log("AIDMA final Gradio outputs:", outputs);
   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(
       "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();
     $("download").style.display = "none";
     $("loadingTitle").textContent = `Generating job #${job.id}…`;
+    const activeTok = tokenManager.getActive();
+    if(activeTok){
+      $("queueStatus").textContent = `Preparing AIDMA LoRA | Token ${maskToken(activeTok.value)} - ${formatTimeArabic(activeTok.remaining)} متبقي`;
+    } else {
+      $("queueStatus").textContent = "Preparing AIDMA LoRA";
+    }
     $("status").className = "";
     setViewer("loading", `Job #${job.id} is running.`);
     try {
+      await attemptJobWithTokenRotation(job);
     } catch (error) {
       console.error(error);
       $("status").className = "error";
         '<div class="orb">!</div><strong>Generation failed.</strong>' +
         '<div style="margin-top:8px">' + escapeHtml(error?.message || String(error)) + '</div>';
       setViewer("empty");
+      resetBackendConnection();
+      stopTokenCountdown();
+    } finally {
+      renderTokens();
     }
   }
   processing = false;
   updateQueueUI();
+  updateLiveIndicator();
 }
 function escapeHtml(value) {
   return String(value).replace(/[&<>"']/g, char => ({
     "&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#039;"
   })[char]);
 }
+// ===== Events =====
 $("generate").addEventListener("click", () => {
   try {
+    if(tokenManager.tokens.length>0 && !tokenManager.getActive()){
+      throw new Error("انتهت جميع التوكنات (5 دقائق لكل توكن). أضف توكنات جديدة.");
+    }
     const job = snapshotJob();
     localQueue.push(job);
     $("status").className = "";
+    const activeTok = tokenManager.getActive();
+    if(activeTok){
+      const stats = tokenManager.getStats();
+      $("status").textContent = `Job #${job.id} أضيف للطابور. سيتم استخدام ${maskToken(activeTok.value)} - متبقي كلي ${formatTime(stats.totalRemaining)}`;
+    } else {
+      $("status").textContent = `Job #${job.id} added to your browser queue.`;
+    }
     updateQueueUI();
     processQueue();
   } catch (error) {
     $("prompt").focus();
   }
 });
 $("prompt").addEventListener("keydown", event => {
   if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
     event.preventDefault();
     $("generate").click();
   }
 });
+// Token Events
+$("addTokensBtn").addEventListener("click", ()=>{
+  const raw = $("tokenBulkInput").value;
+  if(!raw.trim()){
+    $("status").textContent = "الصق توكن واحد على الأقل";
+    $("status").className = "error";
+    return;
+  }
+  const result = tokenManager.addBulk(raw);
+  $("tokenBulkInput").value = "";
+  renderTokens();
+  $("status").className = "";
+  if(result.added>0){
+    $("status").textContent = `✅ تمت إضافة ${result.added} توكن جديد! ${result.skipped>0?`(${result.skipped} مكرر تم تخطيه)` : ''} - إجمالي الوقت: ${formatTimeArabic(result.added*TOKEN_QUOTA_SECONDS)}`;
+    if(result.added>=30){
+      $("status").textContent += ` | 30 توكن = ${30*5}=150 دقيقة كما طلبت!`;
+    }
+  } else {
+    $("status").textContent = result.skipped>0 ? `جميع التوكنات مكررة (${result.skipped})` : "لم يتم العثور على توكنات صالحة";
+    $("status").className = "error";
+  }
+});
+$("clearTokensBtn").addEventListener("click", ()=>{
+  if(tokenManager.tokens.length===0){ $("status").textContent = "لا يوجد توكنات لمسحها"; return; }
+  if(confirm(`هل أنت متأكد من مسح جميع التوكنات (${tokenManager.tokens.length})؟`)){
+    tokenManager.clear();
+    renderTokens();
+    $("status").textContent = "تم مسح جميع التوكنات";
+  }
+});
+// Init
+tokenManager.load();
+renderTokens();
 updateQueueUI();
+console.log(`Token system ready: each token = ${TOKEN_QUOTA_SECONDS}s`);
 </script>
 </body>
 </html>