Spaces:

Wavetype
/

Imagulessss

Running

App Files Files Community

Wavetype commited on 4 days ago

Commit

085cc32

verified ·

1 Parent(s): e7045db

Update index.html

Browse files

Files changed (1) hide show

index.html +275 -18

index.html CHANGED Viewed

@@ -1,19 +1,276 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<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>