Update index.html

index.html

@@ -3,25 +3,42 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Wavetype Frequency Grid - Clean</title>
+    <title>Wavetype Frequency Grid - Flux.1</title>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.1/font/bootstrap-icons.min.css" rel="stylesheet">
     <style>
         :root { --border-ai: #ff00ff; --accent: #00ff00; --bg: #000; }
         body, html { margin: 0; padding: 0; width: 100%; height: 100vh; overflow: hidden; background: var(--bg); color: white; font-family: monospace; }
+        
         #sidebar { position: fixed; left: 0; top: 0; width: 320px; height: 100vh; background: #111; border-right: 1px solid #333; z-index: 2000; transition: transform 0.3s; }
         #sidebar.collapsed { transform: translateX(-320px); }
+        
         #sidebar-toggle { position: fixed; left: 320px; top: 20px; z-index: 2001; cursor: pointer; background: #111; color: var(--accent); border: 1px solid #333; border-left: none; padding: 5px; transition: left 0.3s; }
         #sidebar.collapsed ~ #sidebar-toggle { left: 0; }
+        
         #grid-container { display: grid; width: 100vw; height: 100vh; gap: 4px; padding: 4px 4px 4px 324px; transition: padding 0.3s; }
         #sidebar.collapsed ~ #grid-container { padding-left: 4px; }
-        .block { border: 2px solid #222; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; }
+        
+        .block { border: 2px solid #222; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; transition: 0.3s; }
         .block.active { position: fixed; top: 0; left: 0; width: 100vw!important; height: 100vh!important; z-index: 2500; background: #000; padding: 40px; cursor: default; }
-        .ai-ui { display: none; width: 100%; max-width: 800px; flex-direction: column; gap: 15px; }
+        
+        .ai-ui { display: none; width: 100%; max-width: 800px; flex-direction: column; gap: 15px; position: relative; }
         .block.active .ai-ui { display: flex; }
-        .close-btn { display: none; position: absolute; top: 20px; right: 20px; background: #ff0055; color: #fff; border: none; padding: 5px 15px; }
+        
+        /* Loading Visuals */
+        .loader-overlay {
+            display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+            background: rgba(0,0,0,0.8); z-index: 10; flex-direction: column; align-items: center; justify-content: center;
+            border: 2px solid var(--border-ai); border-radius: 8px; animation: pulse 1.5s infinite;
+        }
+        @keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }
+        
+        .close-btn { display: none; position: absolute; top: 20px; right: 20px; background: #ff0055; color: #fff; border: none; padding: 5px 15px; z-index: 2600; }
         .block.active .close-btn { display: block; }
+        
         .preview-img { width: 100%; max-height: 60vh; object-fit: contain; margin-top: 15px; border: 1px solid var(--border-ai); display: none; }
+        
+        input, textarea { border-radius: 0!important; }
     </style>
 </head>
 <body>
@@ -31,10 +48,10 @@
         HF_AUTH: <span id="authStatus" class="text-danger">MISSING</span>
     </div>
     <div class="p-3">
-        <label class="small text-muted">DENSITY</label>
+        <label class="small text-muted">GRID DENSITY</label>
         <input type="range" class="form-range" id="density" min="1" max="16" value="4" oninput="initGrid()">
         <div class="mt-3">
-            <label class="small text-muted">TOKEN</label>
+            <label class="small text-muted">API TOKEN</label>
             <input type="password" class="form-control form-control-sm bg-dark text-white border-secondary" id="tokenField" placeholder="hf_...">
         </div>
         <button class="btn btn-info btn-sm w-100 mt-4" onclick="save()">SAVE TO CACHE</button>
@@ -53,10 +70,9 @@
         const urlKey = params.get('token');
         const hfInp = document.getElementById('tokenField');
         
-        // Auto-detect token from URL or Cache
         if (urlKey) {
             hfInp.value = urlKey;
-            window.history.replaceState({}, '', window.location.pathname); // Clean URL
+            window.history.replaceState({}, '', window.location.pathname);
             save();
         } else {
             const cache = JSON.parse(localStorage.getItem('flux_cfg') || '{}');
@@ -79,17 +95,21 @@
         const cols = Math.ceil(Math.sqrt(count));
         container.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
         container.innerHTML = '';
-        nodes = Array.from({length: count}, (_, i) => ({ id: i, prompt: '' }));
+        nodes = Array.from({length: count}, (_, i) => ({ id: i }));
         
         nodes.forEach(n => {
             const div = document.createElement('div');
             div.className = 'block';
-            div.onclick = () => div.classList.add('active');
+            div.onclick = () => { if(!div.classList.contains('active')) div.classList.add('active'); };
             div.innerHTML = `
                 <div class="ai-ui">
+                    <div id="loader-${n.id}" class="loader-overlay">
+                        <div class="spinner-border text-info mb-2"></div>
+                        <div class="small">VPS INFERENCE IN PROGRESS...</div>
+                    </div>
                     <h4 class="text-info">NODE_${n.id + 1}</h4>
-                    <textarea class="form-control bg-dark text-white" id="p-${n.id}" placeholder="Prompt..."></textarea>
-                    <button class="btn btn-info mt-2" onclick="gen(${n.id}, this)">GENERATE</button>
+                    <textarea class="form-control bg-dark text-white border-secondary" id="p-${n.id}" rows="4" placeholder="Describe the image..."></textarea>
+                    <button class="btn btn-info mt-2" onclick="gen(${n.id}, this)">GENERATE ON FLUX</button>
                     <img id="img-${n.id}" class="preview-img">
                 </div>
                 <div class="small text-muted">FLUX_NODE_${n.id + 1}</div>
@@ -104,20 +124,33 @@
         const token = document.getElementById('tokenField').value;
         const prompt = document.getElementById(`p-${id}`).value;
         const img = document.getElementById(`img-${id}`);
-        if (!token || !prompt) return alert("Missing Token or Prompt");
+        const loader = document.getElementById(`loader-${id}`);
+        
+        if (!token || !prompt) return alert("Please enter a token in sidebar and a prompt in the node.");
+
+        // Show Loading state
+        loader.style.display = 'flex';
+        img.style.display = 'none';
+        btn.disabled = true;
 
-        btn.disabled = true; btn.innerText = "RUNNING...";
         try {
             const res = await fetch("https://api-inference.huggingface.co/models/Comfy-Org/flux2-klein-9B", {
                 headers: { Authorization: `Bearer ${token}` },
                 method: "POST",
                 body: JSON.stringify({ inputs: prompt })
             });
+
+            if (!res.ok) throw new Error("API Limit or Token Error");
+
             const blob = await res.blob();
             img.src = URL.createObjectURL(blob);
             img.style.display = 'block';
-        } catch (e) { console.error(e); }
-        btn.disabled = false; btn.innerText = "GENERATE";
+        } catch (e) { 
+            alert("Error: " + e.message); 
+        } finally {
+            loader.style.display = 'none';
+            btn.disabled = false;
+        }
     }
 
     function save() {