Spaces:
Running
Running
| <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); | |
| --text:#f6f7fb;--muted:#9aa3b8;--purple:#8b6cff;--mint:#4ce6ce;--red:#ff6c82; | |
| --shadow:0 30px 90px rgba(0,0,0,.42) | |
| } | |
| *{box-sizing:border-box} | |
| body{ | |
| margin:0;min-height:100vh;color:var(--text); | |
| font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif; | |
| background: | |
| radial-gradient(circle at 12% 5%,rgba(139,108,255,.20),transparent 29%), | |
| 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{ | |
| width:48px;height:48px;border-radius:16px;display:grid;place-items:center; | |
| font-weight:950;color:#060910;background:linear-gradient(135deg,var(--purple),var(--mint)); | |
| box-shadow:0 16px 38px rgba(139,108,255,.28) | |
| } | |
| h1{font-size:clamp(25px,4vw,37px);letter-spacing:-1.3px;margin:0} | |
| .sub{font-size:13px;color:var(--muted);margin-top:4px} | |
| .tag{font-size:12px;color:#cfd4e4;border:1px solid var(--line);border-radius:999px;padding:8px 11px;background:rgba(255,255,255,.035)} | |
| .grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:19px} | |
| .panel{background:rgba(17,21,34,.83);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);backdrop-filter:blur(18px)} | |
| .controls{padding:21px} | |
| .viewer{padding:13px;min-height:625px;display:flex;flex-direction:column} | |
| label{display:block;margin:0 0 8px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#bcc3d4} | |
| .field{margin-bottom:16px} | |
| textarea,select,input{ | |
| width:100%;border:1px solid var(--line);background:var(--panel2);color:var(--text); | |
| border-radius:14px;outline:none;font:inherit;transition:.18s ease | |
| } | |
| textarea{min-height:168px;resize:vertical;padding:14px;line-height:1.52} | |
| 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} | |
| .boost{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 1px 17px;color:#d4d9e7;font-size:13px} | |
| .boost input{width:18px;height:18px;accent-color:var(--purple)} | |
| button{ | |
| width:100%;height:53px;border:0;border-radius:16px;cursor:pointer;color:#07100e; | |
| font:850 15px Inter,system-ui;background:linear-gradient(135deg,var(--purple),var(--mint)); | |
| box-shadow:0 17px 38px rgba(139,108,255,.24);transition:.18s ease | |
| } | |
| button:hover{transform:translateY(-1px);filter:brightness(1.05)} | |
| button:disabled{cursor:not-allowed;opacity:.58;transform:none} | |
| .fine{font-size:11px;line-height:1.5;color:#757f95;margin:13px 2px 0} | |
| .canvas{ | |
| position:relative;display:grid;place-items:center;flex:1;min-height:520px;overflow:hidden; | |
| border-radius:18px;border:1px solid var(--line); | |
| background: | |
| linear-gradient(45deg,rgba(255,255,255,.026) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.026) 75%), | |
| linear-gradient(45deg,rgba(255,255,255,.026) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.026) 75%),#090c15; | |
| background-position:0 0,14px 14px;background-size:28px 28px | |
| } | |
| #image{display:none;width:100%;height:100%;object-fit:contain;background:#080a10} | |
| .empty,.loading{text-align:center;color:var(--muted);padding:30px;max-width:470px} | |
| .orb{width:73px;height:73px;margin:0 auto 17px;border-radius:25px;display:grid;place-items:center;font-size:29px;background:linear-gradient(135deg,rgba(139,108,255,.28),rgba(76,230,206,.19));border:1px solid rgba(255,255,255,.1)} | |
| .loading{display:none} | |
| .spinner{width:43px;height:43px;margin:0 auto 14px;border-radius:50%;border:3px solid rgba(255,255,255,.1);border-top-color:var(--mint);animation:spin .8s linear infinite} | |
| @keyframes spin{to{transform:rotate(360deg)}} | |
| .bar{display:flex;align-items:center;justify-content:space-between;gap:13px;padding:13px 4px 1px;min-height:48px;color:var(--muted);font-size:13px} | |
| #status{overflow-wrap:anywhere} | |
| #download{display:none;text-decoration:none;color:#06110e;background:var(--mint);border-radius:11px;padding:9px 13px;font-weight:850;white-space:nowrap} | |
| .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> | |
| <main class="shell"> | |
| <header> | |
| <div class="brand"> | |
| <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> | |
| </header> | |
| <section class="grid"> | |
| <div class="panel controls"> | |
| <div class="field"> | |
| <label for="model">AIDMA model</label> | |
| <select id="model"> | |
| <option value="Keltezaa/midjourney-v6-1-meets-flux-sdxl" data-trigger="(aidmaMJ6.1)"> | |
| AIDMA MJ6.1 · FLUX v0.4 | |
| </option> | |
| <option value="demo001s/MidjourneyMeetsFlux" data-trigger="aidmaMJ6.1"> | |
| AIDMA MJ6.1 · FLUX v0.5 Experimental | |
| </option> | |
| </select> | |
| </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> | |
| </div> | |
| <div class="field"> | |
| <label for="style">Style</label> | |
| <input id="style" list="styles" value="Cinematic" maxlength="300" placeholder="Choose or type any style" /> | |
| <datalist id="styles"></datalist> | |
| </div> | |
| <div class="row"> | |
| <div class="field"> | |
| <label for="ratio">Aspect ratio</label> | |
| <select id="ratio"> | |
| <option value="1024x1024">1:1</option> | |
| <option value="1280x720" selected>16:9</option> | |
| <option value="720x1280">9:16</option> | |
| <option value="1152x864">4:3</option> | |
| <option value="864x1152">3:4</option> | |
| <option value="1216x832">3:2</option> | |
| <option value="832x1216">2:3</option> | |
| </select> | |
| </div> | |
| <div class="field"> | |
| <label for="quality">Quality</label> | |
| <select id="quality"> | |
| <option value="20">Fast</option> | |
| <option value="28" selected>Balanced</option> | |
| <option value="40">Ultra</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="boost"> | |
| <span>Professional prompt boost</span> | |
| <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> | |
| <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. | |
| </div> | |
| </div> | |
| <div class="panel viewer"> | |
| <div class="canvas"> | |
| <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> | |
| <strong id="loadingTitle">Connecting to the AIDMA engine…</strong> | |
| <div id="queueStatus" style="margin-top:8px">Preparing request</div> | |
| </div> | |
| <img id="image" alt="Generated image" /> | |
| </div> | |
| <div class="bar"> | |
| <div id="status">Ready.</div> | |
| <a id="download" download="aidma-image.png">Download</a> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <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. | |
| */ | |
| /* | |
| 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 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", | |
| "Documentary photography","Fashion editorial","Luxury fashion campaign", | |
| "Studio portrait","Environmental portrait","Street photography","Sports photography", | |
| "Wildlife photography","Macro photography","Aerial photography","Drone photography", | |
| "Underwater photography","Astrophotography","Architectural photography", | |
| "Interior design photography","Product photography","Luxury product advertising", | |
| "Food photography","Automotive photography","Concert photography","Wedding photography", | |
| "Photojournalism","Vintage photography","Polaroid","Kodachrome","Technicolor", | |
| "Film noir","Neo-noir","Black and white fine art","High-key lighting","Low-key lighting", | |
| "Golden hour","Blue hour","Soft diffused light","Dramatic chiaroscuro", | |
| "Volumetric lighting","Neon lighting","Bioluminescent lighting","Cyberpunk", | |
| "Solarpunk","Steampunk","Dieselpunk","Atompunk","Cassette futurism","Retro futurism", | |
| "Y2K futurism","Sci-fi concept art","Space opera","Hard science fiction","Alien world", | |
| "Dystopian","Utopian","Post-apocalyptic","Fantasy concept art","Dark fantasy", | |
| "High fantasy","Epic fantasy","Mythological","Medieval","Renaissance","Baroque", | |
| "Rococo","Victorian","Art Nouveau","Art Deco","Bauhaus","Brutalism","Minimalism", | |
| "Maximalism","Surrealism","Dreamlike surrealism","Magical realism","Expressionism", | |
| "Impressionism","Post-impressionism","Romanticism","Symbolism","Cubism","Futurism", | |
| "Dada","Pop art","Op art","Abstract art","Geometric abstraction","Psychedelic art", | |
| "Visionary art","Graffiti","Street art","Ink illustration","Pen and ink", | |
| "Graphite drawing","Charcoal drawing","Colored pencil","Pastel drawing","Watercolor", | |
| "Gouache","Oil painting","Acrylic painting","Impasto painting","Digital painting", | |
| "Matte painting","Concept art","Key art","Book cover illustration", | |
| "Editorial illustration","Children's book illustration","Comic book art", | |
| "Graphic novel","Manga","Anime","90s anime","Retro anime","Cel animation", | |
| "Stop motion","Claymation","Paper cutout","Origami art","Low-poly 3D", | |
| "Stylized 3D","Photorealistic 3D render","Unreal Engine cinematic","Octane render", | |
| "Ray-traced CGI","Isometric 3D","Voxel art","Pixel art","16-bit game art", | |
| "8-bit game art","PS1 game aesthetic","Retro arcade","Game concept art", | |
| "Fantasy game splash art","Trading card art","Holographic art","Chrome metallic", | |
| "Liquid metal","Crystal sculpture","Porcelain sculpture","Marble sculpture", | |
| "Bronze sculpture","Wood carving","Embroidery","Tapestry","Mosaic","Stained glass", | |
| "Paper collage","Mixed media","Blueprint","Technical drawing","Scientific illustration", | |
| "Botanical illustration","Anatomical illustration","Logo design","Poster design", | |
| "Album cover","Magazine cover","Movie poster","Luxury branding","Minimalist advertising", | |
| "Japanese ukiyo-e","Chinese ink wash","Persian miniature","Islamic geometric art", | |
| "Ancient Egyptian mural","Greek pottery art","Roman mosaic","Celtic art", | |
| "Nordic folk art","Mexican folk art","Indian miniature painting","Arabesque ornament", | |
| "Gothic cathedral art","Dark academia","Light academia","Cottagecore","Fairycore", | |
| "Royalcore","Dreamcore","Weirdcore","Liminal space","Vaporwave","Synthwave", | |
| "Retrowave","Lo-fi aesthetic","Grunge","Heavy metal album art","Elegant luxury", | |
| "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", | |
| "Ultra realistic photography":"ultra realistic professional photography, true-to-life optics, natural micro-texture", | |
| "Cinematic":"cinematic composition, dramatic motivated lighting, filmic depth, refined color grading", | |
| "Hollywood blockbuster":"large-scale blockbuster frame, premium production design, dynamic cinematic staging", | |
| "IMAX film still":"IMAX film still, monumental scale, crisp cinematic detail, natural film contrast", | |
| "35mm analog film":"35mm analog film, organic grain, subtle halation, authentic lens character", | |
| "Fashion editorial":"high-fashion editorial, deliberate styling, premium magazine art direction", | |
| "Luxury fashion campaign":"luxury fashion campaign, immaculate art direction, expensive materials", | |
| "Studio portrait":"professional studio portrait, controlled key and fill lighting, clean separation", | |
| "Product photography":"premium product photography, precise reflections, clean geometry, commercial detail", | |
| "Luxury product advertising":"luxury advertising campaign, sculpted highlights, polished surfaces, elegant negative space", | |
| "Film noir":"film noir, hard directional light, deep shadows, smoky suspenseful atmosphere", | |
| "Neo-noir":"neo-noir, modern darkness, colored practical lights, tense cinematic mood", | |
| "Volumetric lighting":"volumetric light shafts, atmospheric depth, visible light diffusion", | |
| "Cyberpunk":"cyberpunk city aesthetic, neon infrastructure, rain-slick surfaces, dense futuristic detail", | |
| "Solarpunk":"solarpunk, optimistic ecological technology, lush greenery, sustainable architecture", | |
| "Steampunk":"steampunk, intricate brass machinery, Victorian engineering, warm industrial atmosphere", | |
| "Sci-fi concept art":"high-end science-fiction concept art, believable technology, cinematic scale", | |
| "Space opera":"epic space opera, colossal celestial scale, ornate futuristic design", | |
| "Fantasy concept art":"premium fantasy concept art, rich worldbuilding, dramatic atmosphere", | |
| "Dark fantasy":"dark fantasy, ominous mythology, textured shadows, ancient atmosphere", | |
| "High fantasy":"high fantasy, majestic worldbuilding, luminous magic, heroic composition", | |
| "Oil painting":"museum-quality oil painting, layered brushwork, rich pigments, painterly light", | |
| "Watercolor":"expressive watercolor, translucent washes, granulation, soft edge variation", | |
| "Digital painting":"high-end digital painting, confident brushwork, cinematic rendering", | |
| "Anime":"premium anime illustration, expressive character design, clean linework, cinematic cel shading", | |
| "Manga":"detailed manga artwork, confident ink lines, dynamic composition", | |
| "90s anime":"1990s anime aesthetic, hand-painted cel look, nostalgic color palette", | |
| "Photorealistic 3D render":"photorealistic 3D render, physically based materials, ray-traced lighting", | |
| "Unreal Engine cinematic":"Unreal Engine cinematic frame, detailed assets, global illumination", | |
| "Pixel art":"carefully designed pixel art, readable silhouettes, deliberate limited palette", | |
| "PS1 game aesthetic":"PlayStation 1 aesthetic, low-poly geometry, retro affine texture character", | |
| "Japanese ukiyo-e":"Japanese ukiyo-e woodblock print, elegant flat shapes, carved line rhythm", | |
| "Islamic geometric art":"intricate Islamic geometric design, precise tessellation, balanced ornament", | |
| "Surrealism":"surrealist visual logic, uncanny symbolism, dreamlike spatial relationships", | |
| "Magical realism":"magical realism, believable everyday world touched by subtle wonder", | |
| "Art Nouveau":"Art Nouveau, flowing organic ornament, elegant curves, botanical detail", | |
| "Art Deco":"Art Deco, geometric luxury, symmetrical glamour, polished metallic accents", | |
| "Brutalism":"brutalist design, monumental concrete geometry, severe structural rhythm", | |
| "Minimalism":"minimalist composition, disciplined negative space, simple forms", | |
| "Maximalism":"maximalist visual abundance, layered ornament, rich color and detail", | |
| "Movie poster":"premium theatrical movie poster, iconic focal point, dramatic visual hierarchy", | |
| "Album cover":"memorable album cover artwork, bold identity, strong central concept", | |
| "Dark academia":"dark academia, old libraries, scholarly atmosphere, warm shadowed interiors", | |
| "Dreamcore":"dreamcore, nostalgic uncanny spaces, soft surreal atmosphere", | |
| "Vaporwave":"vaporwave, retro digital nostalgia, surreal neon geometry, glossy gradients", | |
| "Synthwave":"synthwave, retro-futurist neon, dramatic horizon glow, 1980s electronic atmosphere", | |
| "Elegant luxury":"elegant luxury aesthetic, refined materials, tasteful restraint, premium finish", | |
| "Clean commercial":"clean commercial image, polished lighting, clear subject, advertising-ready composition", | |
| "Hyper-detailed":"hyper-detailed, intricate micro-texture, crisp controlled complexity", | |
| "Ethereal":"ethereal atmosphere, luminous haze, delicate light, graceful visual softness", | |
| "Whimsical":"whimsical visual storytelling, imaginative forms, charming unexpected details", | |
| "Moody":"moody atmosphere, controlled contrast, emotionally charged lighting", | |
| "Haunting":"haunting beauty, restrained unease, atmospheric depth, memorable silhouette", | |
| "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) { | |
| $("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); | |
| for (const name of names) { | |
| const exact = entries.find(([key]) => normalise(key) === normalise(name)); | |
| if (exact) return { endpoint: exact[0], spec: exact[1] }; | |
| } | |
| for (const name of names) { | |
| const partial = entries.find(([key]) => normalise(key).includes(normalise(name))); | |
| if (partial) return { endpoint: partial[0], spec: partial[1] }; | |
| } | |
| 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; | |
| }); | |
| } | |
| 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) { | |
| const backend = BACKEND_SPACES[index]; | |
| if (!backend) throw new Error("Unknown backend index."); | |
| if (client && activeBackend?.id === backend.id) return client; | |
| resetBackendConnection(); | |
| activeBackend = backend; | |
| updateQueueUI(); | |
| $("loadingTitle").textContent = `Connecting to ${backend.label}…`; | |
| $("queueStatus").textContent = backend.id; | |
| const newClient = await withTimeout( | |
| Client.connect(backend.id, { | |
| events: ["data", "status"], | |
| space_status: status => { | |
| if (status?.status && status.status !== "running") { | |
| $("queueStatus").textContent = `${backend.label}: ${status.status}`; | |
| } | |
| } | |
| }), | |
| 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") | |
| ); | |
| } | |
| async function generateWithBackendFailover(job) { | |
| 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); | |
| $("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); | |
| /* | |
| ZeroGPU usage quota belongs to the caller, not to this individual Space. | |
| Trying another ZeroGPU Space would return the same caller-quota failure, | |
| so this specific error is surfaced immediately. | |
| */ | |
| 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; | |
| } | |
| } | |
| $("queueStatus").textContent = nextBackend | |
| ? `${backend.label} failed. Switching to ${nextBackend.label}…` | |
| : `${backend.label} failed. No healthy backend remains.`; | |
| } | |
| } | |
| } | |
| throw new Error( | |
| "All configured AIDMA Spaces failed. " + errors.join(" | ") | |
| ); | |
| } | |
| 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, | |
| trigger: modelOption.dataset.trigger || "aidmaMJ6.1", | |
| modelLabel: modelOption.textContent.trim(), | |
| prompt: parts.join(", "), | |
| width, | |
| height, | |
| steps: Number($("quality").value), | |
| seed: crypto.getRandomValues(new Uint32Array(1))[0], | |
| cfg: 3.5, | |
| 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 `${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 `${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) { | |
| 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); | |
| 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; | |
| $("download").download = `aidma-${job.seed}.png`; | |
| $("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( | |
| spec, | |
| { | |
| customlora: job.repo, | |
| lorarepository: job.repo, | |
| huggingfacepath: job.repo | |
| }, | |
| [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, | |
| imageinput: null, | |
| inputimage: null, | |
| image: null, | |
| imagestrength: 0.75, | |
| denoisestrength: 0.75, | |
| cfgscale: job.cfg, | |
| guidancescale: job.cfg, | |
| steps: job.steps, | |
| numinferencesteps: job.steps, | |
| selectedindex: selectedIndex, | |
| randomizeseed: false, | |
| seed: job.seed, | |
| width: job.width, | |
| height: job.height, | |
| 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( | |
| "The remote Space did not provide a usable final image. " + | |
| "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 generateWithBackendFailover(job); | |
| } catch (error) { | |
| console.error(error); | |
| $("status").className = "error"; | |
| $("status").textContent = error?.message || String(error); | |
| $("empty").innerHTML = | |
| '<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. | |
| resetBackendConnection(); | |
| } | |
| } | |
| processing = false; | |
| updateQueueUI(); | |
| } | |
| function escapeHtml(value) { | |
| return String(value).replace(/[&<>"']/g, char => ({ | |
| "&":"&","<":"<",">":">",'"':""","'":"'" | |
| })[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) { | |
| $("status").className = "error"; | |
| $("status").textContent = error.message; | |
| $("prompt").focus(); | |
| } | |
| }); | |
| $("prompt").addEventListener("keydown", event => { | |
| if ((event.ctrlKey || event.metaKey) && event.key === "Enter") { | |
| event.preventDefault(); | |
| $("generate").click(); | |
| } | |
| }); | |
| updateQueueUI(); | |
| </script> | |
| </body> | |
| </html> | |