Spaces:

Wavetype
/

Modulrss

Running

App Files Files Community

Wavetype commited on 3 days ago

Commit

53fd259

verified ·

1 Parent(s): b3473a1

Update index.html

Browse files

Files changed (1) hide show

index.html +73 -74

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Wavetype Frequency Grid - AI Edition</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>
@@ -23,6 +23,7 @@
             font-family: "Courier New", Courier, monospace; color: white;
         }
         #sidebar {
             position: fixed; left: 0; top: 0; width: 320px; height: 100vh;
             background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
@@ -44,7 +45,7 @@
         #sidebar.collapsed ~ #sidebar-toggle { left: 0; }
         .auth-section { padding: 15px; border-bottom: 1px solid #333; background: #111; }
-        .social-btn { width: 100%; margin-top: 8px; font-size: 12px; display: flex; align-items: center; justify-content: center; gap: 10px; }
         #grid-container {
             display: grid; width: 100vw; height: 100vh; gap: 4px; padding: 4px;
@@ -57,11 +58,10 @@
             position: relative; background-color: rgba(255, 255, 255, var(--bg-shade));
             border: 2px solid #333; display: flex; flex-direction: column;
             align-items: center; justify-content: center; cursor: pointer;
-            overflow: hidden; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
         }
         .type-ai { border-color: var(--border-ai); }
-        .type-python { border-color: var(--border-python); }
         .block.active {
             position: fixed; top: 0; left: 0; width: 100vw !important;
@@ -87,51 +87,44 @@
             position: absolute; bottom: 8px; right: 8px; width: 28px; height: 28px;
             background: #00ff00; border-radius: 50%; color: #000; border: none; font-weight: bold;
         }
-        .type-selector-overlay {
-            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
-            background: rgba(0,0,0,0.9); z-index: 3000; display: none;
-            align-items: center; justify-content: center;
-        }
-        .status-pill { font-size: 10px; padding: 2px 8px; border-radius: 10px; background: #333; margin-top: 5px; }
     </style>
 </head>
 <body>
 <div id="sidebar">
     <div class="auth-section">
-        <div id="user-profile" style="display: none;">
-            <div class="d-flex align-items-center gap-2 mb-2">
-                <i class="bi bi-person-circle fs-4 text-primary"></i>
-                <span id="user-name" class="small fw-bold">User</span>
-            </div>
-            <button class="btn btn-outline-danger btn-sm w-100" onclick="handleLogout()">Logout</button>
         </div>
-        <div id="login-section">
-            <p class="small text-muted mb-2">Sync to Linux VPS</p>
-            <button class="btn btn-outline-light social-btn" onclick="handleLogin('Google')"><i class="bi bi-google"></i> Google</button>
-            <button class="btn btn-outline-light social-btn" onclick="handleLogin('GitHub')"><i class="bi bi-github"></i> GitHub</button>
         </div>
     </div>
     <div class="p-3">
         <div class="mb-4">
-            <label class="form-label small">GRID INTENSITY</label>
             <input type="range" class="form-range" id="blockSlider" min="1" max="25" value="4" oninput="updateGrid()">
             <div class="d-flex justify-content-between small text-muted">
-                <span id="countVal">4</span> Nodes
                 <span id="saveStatus">Synced</span>
             </div>
         </div>
         <div class="mb-4">
-            <label class="form-label small">HUGGINGFACE TOKEN</label>
             <input type="password" class="form-control form-control-sm bg-dark text-white border-secondary" id="hfToken" placeholder="hf_..." onchange="saveToCache()">
         </div>
-        <button class="btn btn-primary btn-sm w-100 mb-2" onclick="saveToCache()">SAVE LAYOUT</button>
-        <button class="btn btn-outline-secondary btn-sm w-100" onclick="clearGrid()">RESET GRID</button>
     </div>
 </div>
@@ -139,25 +132,41 @@
 <div id="grid-container"></div>
-<div class="type-selector-overlay" id="typeSelectorOverlay">
-    <div class="bg-dark p-4 rounded border border-secondary text-center">
-        <h6 class="mb-4">ADD MODULE</h6>
-        <div class="d-flex gap-3 justify-content-center">
-            <button class="btn btn-outline-info" onclick="addNewBlock('ai')"><i class="bi bi-cpu"></i><br>FLUX AI</button>
-            <button class="btn btn-outline-warning" onclick="addNewBlock('python')"><i class="bi bi-terminal"></i><br>PYTHON</button>
-            <button class="btn btn-outline-success" onclick="addNewBlock('url')"><i class="bi bi-globe"></i><br>WEB</button>
-        </div>
-        <button class="btn btn-sm btn-link text-danger mt-4" onclick="closeTypeSelector()">CANCEL</button>
-    </div>
-</div>
 <script>
     const container = document.getElementById("grid-container");
     const countDisplay = document.getElementById("countVal");
     let blocks = [];
     let currentUser = null;
-    // --- Persistence ---
     function saveToCache() {
         const data = {
             blocks,
@@ -165,7 +174,8 @@
             user: currentUser
         };
         localStorage.setItem("wavetype_vps_cache", JSON.stringify(data));
-        showStatus("Saved to Cache");
     }
     function loadFromCache() {
@@ -173,15 +183,15 @@
         if (cache) {
             const data = JSON.parse(cache);
             blocks = data.blocks || [];
-            document.getElementById("hfToken").value = data.token || "";
-            if (data.user) handleLogin(data.user.name.split(' ')[0]);
             renderGrid();
         } else {
             updateGrid();
         }
     }
-    // --- Grid System ---
     function updateGrid() {
         const count = parseInt(document.getElementById("blockSlider").value);
         countDisplay.innerText = count;
@@ -190,6 +200,7 @@
         }
         while (blocks.length > count) blocks.pop();
         renderGrid();
     }
     function renderGrid() {
@@ -204,22 +215,20 @@
             el.innerHTML = `
                 <div class="ai-interface">
-                    <h4 class="text-info">FLUX.1-KLEIN-9B [VPS MODE]</h4>
-                    <textarea class="form-control bg-dark text-white border-info mb-2" id="prompt-${i}" rows="3" placeholder="Describe the image...">${b.prompt || ""}</textarea>
-                    <button class="btn btn-info w-100" onclick="generateFlux(${i}, this)">GENERATE ON VPS</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">
                 </div>
-                <div class="small fw-bold opacity-50">${b.type.toUpperCase()} NODE</div>
-                <div class="status-pill">Ready</div>
-                <button class="close-btn" onclick="event.stopPropagation(); this.parentElement.classList.remove('active')">CLOSE NODE</button>
-                <button class="add-block-btn" onclick="event.stopPropagation(); openTypeSelector()">+</button>
             `;
             container.appendChild(el);
         });
     }
-    // --- AI Logic (Flux2 Klein 9B) ---
     async function generateFlux(index, btn) {
         event.stopPropagation();
         const prompt = document.getElementById(`prompt-${index}`).value;
@@ -227,7 +236,10 @@
         const imgEl = document.getElementById(`img-${index}`);
         const loader = document.getElementById(`loader-${index}`);
-        if (!token) return alert("Please enter Hugging Face Token in sidebar.");
         loader.style.display = "block";
         imgEl.style.display = "none";
@@ -245,41 +257,28 @@
             );
             const blob = await response.blob();
-            const url = URL.createObjectURL(blob);
-            imgEl.src = url;
             imgEl.style.display = "block";
         } catch (err) {
-            alert("Generation failed: Check token or model status");
         } finally {
             loader.style.display = "none";
         }
     }
-    // --- Auth & UI Helpers ---
-    function handleLogin(provider) {
-        currentUser = { name: provider + " Dev", id: Date.now() };
         document.getElementById("login-section").style.display = "none";
         document.getElementById("user-profile").style.display = "block";
-        document.getElementById("user-name").innerText = currentUser.name;
-    }
-    function handleLogout() {
-        currentUser = null;
-        document.getElementById("login-section").style.display = "block";
-        document.getElementById("user-profile").style.display = "none";
     }
     function showStatus(msg) {
-        const s = document.getElementById("saveStatus");
-        s.innerText = msg;
-        setTimeout(() => s.innerText = "Synced", 2000);
     }
     function toggleSidebar() { document.getElementById("sidebar").classList.toggle("collapsed"); }
-    function openTypeSelector() { document.getElementById("typeSelectorOverlay").style.display = "flex"; }
-    function closeTypeSelector() { document.getElementById("typeSelectorOverlay").style.display = "none"; }
-    function addNewBlock(type) { blocks.push({ id: Date.now(), type, prompt: "" }); updateGrid(); closeTypeSelector(); }
-    function clearGrid() { blocks = []; updateGrid(); localStorage.clear(); }
     window.onload = loadFromCache;
 </script>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Wavetype Frequency Grid - Auto-Auth Edition</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>
             font-family: "Courier New", Courier, monospace; color: white;
         }
+        /* Sidebar */
         #sidebar {
             position: fixed; left: 0; top: 0; width: 320px; height: 100vh;
             background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
         #sidebar.collapsed ~ #sidebar-toggle { left: 0; }
         .auth-section { padding: 15px; border-bottom: 1px solid #333; background: #111; }
+        .token-badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: #28a745; color: white; display: none; }
         #grid-container {
             display: grid; width: 100vw; height: 100vh; gap: 4px; padding: 4px;
             position: relative; background-color: rgba(255, 255, 255, var(--bg-shade));
             border: 2px solid #333; display: flex; flex-direction: column;
             align-items: center; justify-content: center; cursor: pointer;
+            overflow: hidden; transition: all 0.5s;
         }
         .type-ai { border-color: var(--border-ai); }
         .block.active {
             position: fixed; top: 0; left: 0; width: 100vw !important;
             position: absolute; bottom: 8px; right: 8px; width: 28px; height: 28px;
             background: #00ff00; border-radius: 50%; color: #000; border: none; font-weight: bold;
         }
     </style>
 </head>
 <body>
 <div id="sidebar">
     <div class="auth-section">
+        <div class="d-flex justify-content-between align-items-center">
+            <span class="small text-muted">HF AUTH STATUS</span>
+            <span id="tokenStatus" class="token-badge">AUTO-LOADED</span>
+        </div>
+        <div id="login-section" class="mt-2">
+            <button class="btn btn-outline-primary btn-sm w-100" onclick="handleLogin('Cloud')">
+                <i class="bi bi-cloud-arrow-up"></i> Sync VPS Profile
+            </button>
         </div>
+        <div id="user-profile" style="display:none" class="mt-2 text-success small fw-bold">
+            <i class="bi bi-check-circle-fill"></i> Connected to Flux Node
         </div>
     </div>
     <div class="p-3">
         <div class="mb-4">
+            <label class="form-label small">GRID NODES</label>
             <input type="range" class="form-range" id="blockSlider" min="1" max="25" value="4" oninput="updateGrid()">
             <div class="d-flex justify-content-between small text-muted">
+                <span id="countVal">4</span> Instances
                 <span id="saveStatus">Synced</span>
             </div>
         </div>
         <div class="mb-4">
+            <label class="form-label small">HF ACCESS TOKEN</label>
             <input type="password" class="form-control form-control-sm bg-dark text-white border-secondary" id="hfToken" placeholder="hf_..." onchange="saveToCache()">
+            <div class="form-text text-muted" style="font-size: 9px;">Leave empty if using URL ?token=...</div>
         </div>
+        <button class="btn btn-success btn-sm w-100 mb-2" onclick="saveToCache()">PERSIST CONFIG</button>
+        <button class="btn btn-outline-danger btn-sm w-100" onclick="clearGrid()">PURGE CACHE</button>
     </div>
 </div>
 <div id="grid-container"></div>
 <script>
     const container = document.getElementById("grid-container");
     const countDisplay = document.getElementById("countVal");
     let blocks = [];
     let currentUser = null;
+    /**
+     * AUTO-TOKEN DETECTION LOGIC
+     * 1. Check URL parameters (?token=hf_...)
+     * 2. Check localStorage
+     * 3. (Optional) Define a hardcoded fallback for private VPS use
+     */
+    function detectToken() {
+        const urlParams = new URLSearchParams(window.location.search);
+        const urlToken = urlParams.get('token');
+        const hfInput = document.getElementById("hfToken");
+        if (urlToken) {
+            hfInput.value = urlToken;
+            document.getElementById("tokenStatus").style.display = "inline";
+            console.log("Token auto-loaded from URL.");
+            // Clean URL to prevent token leaking in screenshots
+            window.history.replaceState({}, document.title, window.location.pathname);
+        } else {
+            const cache = localStorage.getItem("wavetype_vps_cache");
+            if (cache) {
+                const data = JSON.parse(cache);
+                if (data.token) {
+                    hfInput.value = data.token;
+                    document.getElementById("tokenStatus").style.display = "inline";
+                }
+            }
+        }
+    }
     function saveToCache() {
         const data = {
             blocks,
             user: currentUser
         };
         localStorage.setItem("wavetype_vps_cache", JSON.stringify(data));
+        showStatus("Saved");
+        if(data.token) document.getElementById("tokenStatus").style.display = "inline";
     }
     function loadFromCache() {
         if (cache) {
             const data = JSON.parse(cache);
             blocks = data.blocks || [];
+            document.getElementById("blockSlider").value = blocks.length || 4;
+            if (data.user) handleLogin('Cloud');
             renderGrid();
         } else {
             updateGrid();
         }
+        detectToken();
     }
     function updateGrid() {
         const count = parseInt(document.getElementById("blockSlider").value);
         countDisplay.innerText = count;
         }
         while (blocks.length > count) blocks.pop();
         renderGrid();
+        saveToCache();
     }
     function renderGrid() {
             el.innerHTML = `
                 <div class="ai-interface">
+                    <h4 style="color:var(--border-ai)">FLUX.1 [KLEIN-9B]</h4>
+                    <textarea class="form-control bg-dark text-white border-secondary mb-2" id="prompt-${i}" rows="3" placeholder="Enter prompt...">${b.prompt || ""}</textarea>
+                    <button class="btn btn-primary w-100" onclick="generateFlux(${i}, this)">EXECUTE VPS INFERENCE</button>
+                    <div id="loader-${i}" class="text-center mt-2" style="display:none"><div class="spinner-grow spinner-grow-sm text-info"></div> GEN IN PROGRESS...</div>
                     <img id="img-${i}" class="gen-image-preview mt-3">
                 </div>
+                <div class="small fw-bold opacity-50">NODE_0${i+1}</div>
+                <button class="close-btn" onclick="event.stopPropagation(); this.parentElement.classList.remove('active')">DISCONNECT</button>
+                <button class="add-block-btn" onclick="event.stopPropagation(); updateGrid()">+</button>
             `;
             container.appendChild(el);
         });
     }
     async function generateFlux(index, btn) {
         event.stopPropagation();
         const prompt = document.getElementById(`prompt-${index}`).value;
         const imgEl = document.getElementById(`img-${index}`);
         const loader = document.getElementById(`loader-${index}`);
+        if (!token) {
+            alert("Auth Error: HuggingFace Token Missing.");
+            return;
+        }
         loader.style.display = "block";
         imgEl.style.display = "none";
             );
             const blob = await response.blob();
+            imgEl.src = URL.createObjectURL(blob);
             imgEl.style.display = "block";
         } catch (err) {
+            console.error(err);
         } finally {
             loader.style.display = "none";
         }
     }
+    function handleLogin(type) {
+        currentUser = { name: "VPS_ADMIN" };
         document.getElementById("login-section").style.display = "none";
         document.getElementById("user-profile").style.display = "block";
     }
     function showStatus(msg) {
+        document.getElementById("saveStatus").innerText = msg;
+        setTimeout(() => document.getElementById("saveStatus").innerText = "Synced", 2000);
     }
     function toggleSidebar() { document.getElementById("sidebar").classList.toggle("collapsed"); }
+    function clearGrid() { localStorage.clear(); location.reload(); }
     window.onload = loadFromCache;
 </script>