Spaces:

Wavetype
/

Imagulessss

Running

App Files Files Community

Wavetype commited on 9 days ago

Commit

3507381

verified ·

1 Parent(s): 085cc32

Update index.html

Browse files

Files changed (1) hide show

index.html +86 -228

index.html CHANGED Viewed

@@ -3,274 +3,132 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Wavetype Frequency Grid - Flux.1 Klein 9B</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;
-            --bg-shade: 0.15;
-            --accent: #00ff00;
-        }
-        body, html {
-            margin: 0; padding: 0; width: 100%; height: 100vh;
-            overflow: hidden; background-color: #000;
-            font-family: "Courier New", Courier, monospace; color: white;
-        }
-        #sidebar {
-            position: fixed; left: 0; top: 0; width: 320px; height: 100vh;
-            background: linear-gradient(180deg, #111 0%, #000 100%);
-            border-right: 2px solid #333; z-index: 2000;
-            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        }
         #sidebar.collapsed { transform: translateX(-320px); }
-        #sidebar-toggle {
-            position: fixed; left: 320px; top: 20px; width: 30px; height: 40px;
-            background: #111; border: 1px solid #333; border-left: none;
-            cursor: pointer; z-index: 2001; display: flex; align-items: center;
-            justify-content: center; color: var(--accent); transition: left 0.3s;
-        }
         #sidebar.collapsed ~ #sidebar-toggle { left: 0; }
-        .auth-status {
-            padding: 15px; background: #1a1a1a; border-bottom: 1px solid #333;
-            font-size: 11px; letter-spacing: 1px;
-        }
-        #grid-container {
-            display: grid; width: 100vw; height: 100vh; gap: 4px; padding: 4px;
-            padding-left: 324px; transition: padding-left 0.3s;
-        }
         #sidebar.collapsed ~ #grid-container { padding-left: 4px; }
-        .block {
-            position: relative; background-color: rgba(255, 255, 255, var(--bg-shade));
-            border: 2px solid #222; display: flex; flex-direction: column;
-            align-items: center; justify-content: center; cursor: pointer;
-            overflow: hidden; transition: border-color 0.3s;
-        }
-        .block.active {
-            position: fixed; top: 0; left: 0; width: 100vw !important;
-            height: 100vh !important; z-index: 2500; background: #000; padding: 40px;
-        }
-        .close-btn {
-            display: none; position: absolute; top: 20px; right: 20px;
-            background: #ff0055; color: white; border: none; padding: 8px 16px;
-        }
         .block.active .close-btn { display: block; }
-        .ai-interface { display: none; width: 100%; max-width: 900px; flex-direction: column; gap: 20px; }
-        .block.active .ai-interface { display: flex; }
-        .gen-image-preview {
-            width: 100%; max-height: 60vh; object-fit: contain;
-            border: 1px solid var(--border-ai); display: none; background: #050505;
-        }
-        .loading-bar {
-            height: 2px; width: 0%; background: var(--border-ai);
-            position: absolute; bottom: 0; left: 0; transition: width 0.3s;
-        }
     </style>
 </head>
 <body>
 <div id="sidebar">
-    <div class="auth-status">
-        <div class="d-flex align-items-center justify-content-between">
-            <span>HF_AUTH: <span id="tokenLabel" class="text-danger">MISSING</span></span>
-            <i id="lockIcon" class="bi bi-shield-slash text-danger"></i>
-        </div>
     </div>
     <div class="p-3">
-        <div class="mb-4">
-            <label class="form-label small text-muted">GRID DENSITY</label>
-            <input type="range" class="form-range" id="blockSlider" min="1" max="16" value="4" oninput="updateGrid()">
-            <div class="d-flex justify-content-between small">
-                <span id="countVal">4</span> Instances
-                <span id="saveStatus" class="text-info">Ready</span>
-            </div>
-        </div>
-        <div class="mb-4">
-            <label class="form-label small text-muted">SESSION TOKEN</label>
-            <input type="password" class="form-control form-control-sm bg-dark text-white border-secondary" id="hfToken" placeholder="hf_...">
-            <div class="form-text" style="font-size: 8px; color: #555;">Token is saved to your browser cache only.</div>
         </div>
-        <button class="btn btn-sm btn-outline-info w-100 mb-2" onclick="batchGenerate()">BATCH EXECUTE ALL</button>
-        <button class="btn btn-sm btn-outline-secondary w-100" onclick="saveToCache()">SAVE CONFIG</button>
-        <button class="btn btn-sm btn-outline-danger w-100 mt-2" onclick="clearAll()">LOGOUT / CLEAR</button>
     </div>
 </div>
-<button id="sidebar-toggle" onclick="toggleSidebar()"><i class="bi bi-chevron-left"></i></button>
 <div id="grid-container"></div>
 <script>
-    const container = document.getElementById("grid-container");
-    const countDisplay = document.getElementById("countVal");
-    let blocks = [];
-    // --- Token Auto-Injection Logic ---
-    function handleAutoAuth() {
-        const hfInput = document.getElementById("hfToken");
-        const urlParams = new URLSearchParams(window.location.search);
-        const urlToken = urlParams.get('token');
-        if (urlToken) {
-            hfInput.value = urlToken;
-            saveToCache();
-            // Clean URL so token isn't in history
-            window.history.replaceState({}, document.title, window.location.pathname);
-            updateAuthUI(true);
-        } else {
-            const cache = localStorage.getItem("flux_grid_config");
-            if (cache) {
-                const data = JSON.parse(cache);
-                if (data.token) {
-                    hfInput.value = data.token;
-                    updateAuthUI(true);
-                }
-            }
-        }
-    }
-    function updateAuthUI(active) {
-        const label = document.getElementById("tokenLabel");
-        const icon = document.getElementById("lockIcon");
-        if (active) {
-            label.innerText = "ACTIVE";
-            label.className = "text-success";
-            icon.className = "bi bi-shield-lock-fill text-success";
-        }
-    }
-    function saveToCache() {
-        const data = {
-            blocks,
-            count: document.getElementById("blockSlider").value,
-            token: document.getElementById("hfToken").value
-        };
-        localStorage.setItem("flux_grid_config", JSON.stringify(data));
-        showStatus("Synced");
-    }
-    function loadFromCache() {
-        const cache = localStorage.getItem("flux_grid_config");
-        if (cache) {
-            const data = JSON.parse(cache);
-            blocks = data.blocks || [];
-            document.getElementById("blockSlider").value = data.count || 4;
-            renderGrid();
         } else {
-            updateGrid();
         }
-        handleAutoAuth();
     }
-    function updateGrid() {
-        const count = parseInt(document.getElementById("blockSlider").value);
-        countDisplay.innerText = count;
-        while (blocks.length < count) {
-            blocks.push({ id: Date.now() + Math.random(), prompt: "", lastImg: null });
-        }
-        while (blocks.length > count) blocks.pop();
-        renderGrid();
-        saveToCache();
     }
-    function renderGrid() {
-        const cols = Math.ceil(Math.sqrt(blocks.length)) || 1;
         container.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
-        container.innerHTML = "";
-        blocks.forEach((b, i) => {
-            const el = document.createElement("div");
-            el.className = `block`;
-            el.onclick = () => { if(!el.classList.contains('active')) el.classList.add('active'); };
-            el.innerHTML = `
-                <div class="ai-interface">
-                    <h3 class="text-info">INSTANCE_0${i+1}</h3>
-                    <textarea class="form-control bg-dark text-white border-secondary mb-2" id="prompt-${i}" rows="4" placeholder="Enter prompt...">${b.prompt || ""}</textarea>
-                    <button class="btn btn-info" onclick="generateFlux(${i}, this)">RUN INFERENCE</button>
-                    <div id="loader-${i}" class="text-center mt-2" style="display:none">
-                        <div class="spinner-border spinner-border-sm text-info"></div> PROCESSING...
-                    </div>
-                    <img id="img-${i}" class="gen-image-preview mt-3" src="${b.lastImg || ''}" style="${b.lastImg ? 'display:block' : ''}">
                 </div>
-                <div class="text-muted small fw-bold">FLUX_NODE_${i+1}</div>
-                <div class="loading-bar" id="bar-${i}"></div>
                 <button class="close-btn" onclick="event.stopPropagation(); this.parentElement.classList.remove('active')">EXIT</button>
             `;
-            container.appendChild(el);
         });
     }
-    async function generateFlux(index, btn) {
-        if(btn) event.stopPropagation();
-        const prompt = document.getElementById(`prompt-${index}`).value;
-        const token = document.getElementById("hfToken").value;
-        const imgEl = document.getElementById(`img-${index}`);
-        const loader = document.getElementById(`loader-${index}`);
-        const bar = document.getElementById(`bar-${index}`);
-        if (!prompt || !token) return;
-        loader.style.display = "block";
-        bar.style.width = "50%";
-        blocks[index].prompt = prompt;
         try {
-            const response = await fetch(
-                "https://api-inference.huggingface.co/models/Comfy-Org/flux2-klein-9B",
-                {
-                    headers: { Authorization: `Bearer ${token}` },
-                    method: "POST",
-                    body: JSON.stringify({ inputs: prompt }),
-                }
-            );
-            const blob = await response.blob();
-            const objectURL = URL.createObjectURL(blob);
-            imgEl.src = objectURL;
-            imgEl.style.display = "block";
-            blocks[index].lastImg = objectURL;
-            bar.style.width = "100%";
-            setTimeout(() => bar.style.width = "0%", 1000);
-            saveToCache();
-        } catch (err) {
-            console.error(err);
-        } finally {
-            loader.style.display = "none";
-        }
-    }
-    async function batchGenerate() {
-        const promises = blocks.map((_, i) => generateFlux(i, null));
-        await Promise.all(promises);
     }
-    function toggleSidebar() { document.getElementById("sidebar").classList.toggle("collapsed"); }
-    function showStatus(msg) {
-        const s = document.getElementById("saveStatus");
-        s.innerText = msg;
-        setTimeout(() => s.innerText = "Synced", 2000);
     }
-    function clearAll() { localStorage.clear(); location.reload(); }
-    window.onload = loadFromCache;
 </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Wavetype Frequency Grid - Clean</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.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; }
+        .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; }
         .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; }
     </style>
 </head>
 <body>
 <div id="sidebar">
+    <div class="p-3 border-bottom border-secondary small">
+        HF_AUTH: <span id="authStatus" class="text-danger">MISSING</span>
     </div>
     <div class="p-3">
+        <label class="small text-muted">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>
+            <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>
+        <button class="btn btn-outline-danger btn-sm w-100 mt-2" onclick="localStorage.clear(); location.reload();">CLEAR ALL</button>
     </div>
 </div>
+<div id="sidebar-toggle" onclick="document.getElementById('sidebar').classList.toggle('collapsed')"><i class="bi bi-list"></i></div>
 <div id="grid-container"></div>
 <script>
+    let nodes = [];
+    function init() {
+        const params = new URLSearchParams(window.location.search);
+        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
+            save();
         } else {
+            const cache = JSON.parse(localStorage.getItem('flux_cfg') || '{}');
+            if (cache.token) hfInp.value = cache.token;
+            if (cache.count) document.getElementById('density').value = cache.count;
         }
+        updateStatus();
+        initGrid();
     }
+    function updateStatus() {
+        const hasToken = document.getElementById('tokenField').value.length > 5;
+        document.getElementById('authStatus').innerText = hasToken ? "ACTIVE" : "MISSING";
+        document.getElementById('authStatus').className = hasToken ? "text-success" : "text-danger";
     }
+    function initGrid() {
+        const count = document.getElementById('density').value;
+        const container = document.getElementById('grid-container');
+        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.forEach(n => {
+            const div = document.createElement('div');
+            div.className = 'block';
+            div.onclick = () => div.classList.add('active');
+            div.innerHTML = `
+                <div class="ai-ui">
+                    <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>
+                    <img id="img-${n.id}" class="preview-img">
                 </div>
+                <div class="small text-muted">FLUX_NODE_${n.id + 1}</div>
                 <button class="close-btn" onclick="event.stopPropagation(); this.parentElement.classList.remove('active')">EXIT</button>
             `;
+            container.appendChild(div);
         });
     }
+    async function gen(id, btn) {
+        event.stopPropagation();
+        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");
+        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 })
+            });
+            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";
     }
+    function save() {
+        localStorage.setItem('flux_cfg', JSON.stringify({
+            token: document.getElementById('tokenField').value,
+            count: document.getElementById('density').value
+        }));
+        updateStatus();
     }
+    window.onload = init;
 </script>
 </body>
 </html>