Spaces:

Wavetype
/

Modulrss

Running

App Files Files Community

Wavetype commited on 4 days ago

Commit

b3473a1

verified ·

1 Parent(s): 8209836

Update index.html

Browse files

Files changed (1) hide show

index.html +131 -135

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 - Pro</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>
@@ -12,8 +12,7 @@
             --border-python: #0000ff;
             --border-image: #00ff00;
             --border-video: #800080;
-            --border-3d: #ffa500;
-            --border-txt: #808080;
             --border-url: #00ffff;
             --bg-shade: 0.1;
         }
@@ -45,11 +44,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;
@@ -62,62 +57,44 @@
             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; animation: liquidPop 0.8s forwards;
         }
-        @keyframes liquidPop {
-            0% { opacity: 0; transform: scale(0.8); }
-            100% { opacity: 1; transform: scale(1); }
-        }
-        .type-html { border-color: var(--border-html); }
         .type-python { border-color: var(--border-python); }
-        .type-image { border-color: var(--border-image); }
-        .type-video { border-color: var(--border-video); }
-        .type-3d { border-color: var(--border-3d); }
-        .type-txt { border-color: var(--border-txt); }
-        .type-url { border-color: var(--border-url); }
         .block.active {
             position: fixed; top: 0; left: 0; width: 100vw !important;
-            height: 100vh !important; z-index: 2500; background: #000; padding: 20px;
         }
         .close-btn {
             display: none; position: absolute; top: 20px; right: 20px;
-            background: #dc3545; color: white; border: none; padding: 8px 16px;
         }
         .block.active .close-btn { display: block; }
-        .preview-content { max-width: 90%; max-height: 80%; display: none; }
-        .block.active .preview-content { display: block; }
-        .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;
-        }
-        .type-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
-        .type-option {
-            width: 80px; height: 80px; border: 2px solid #444; border-radius: 8px;
-            display: flex; flex-direction: column; align-items: center;
-            justify-content: center; cursor: pointer; font-size: 10px;
         }
         .add-block-btn {
-            position: absolute; bottom: 5px; right: 5px; width: 24px; height: 24px;
             background: #00ff00; border-radius: 50%; color: #000; border: none; font-weight: bold;
         }
-        .python-console {
-            width: 100%; height: 60%; background: #000; color: #0f0;
-            font-family: monospace; padding: 10px; border: 1px solid #333;
-            overflow-y: auto; display: none; margin-top: 10px;
         }
-        .block.active .python-console { display: block; }
     </style>
 </head>
 <body>
@@ -125,101 +102,78 @@
 <div id="sidebar">
     <div class="auth-section">
         <div id="user-profile" style="display: none;">
-            <p class="small mb-2">Welcome, <span id="user-name" class="fw-bold">User</span></p>
-            <button class="btn btn-outline-danger btn-sm w-100" onclick="handleLogout()">Sign Out</button>
         </div>
         <div id="login-section">
-            <p class="small text-muted mb-2">Sign in to save layouts</p>
-            <button class="btn btn-light social-btn" onclick="handleLogin('Google')">
-                <i class="bi bi-google"></i> Google
-            </button>
-            <button class="btn btn-primary 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 DENSITY</label>
-            <input type="range" class="form-range" id="blockSlider" min="1" max="64" value="4" oninput="updateGrid()">
-            <div class="d-flex justify-content-between small">
-                <span id="countVal">4</span> Blocks
-                <span id="saveIcon" style="display:none; color:#0f0;">Saved!</span>
             </div>
         </div>
         <div class="mb-4">
-            <label class="form-label small">BACKGROUND SHADE</label>
-            <input type="range" class="form-range" id="shadeRange" min="0" max="0.5" step="0.05" value="0.1" oninput="updateShade()">
         </div>
-        <button class="btn btn-success btn-sm w-100 mb-2" onclick="saveToCache()">MANUAL SAVE</button>
-        <button class="btn btn-outline-secondary btn-sm w-100" onclick="clearGrid()">RESET ALL</button>
     </div>
 </div>
-<button id="sidebar-toggle" onclick="toggleSidebar()">
-    <i class="bi bi-chevron-left"></i>
-</button>
 <div class="type-selector-overlay" id="typeSelectorOverlay">
     <div class="bg-dark p-4 rounded border border-secondary text-center">
-        <h6>SELECT MODULE TYPE</h6>
-        <div class="type-options">
-            <div class="type-option" onclick="addNewBlock('html')"><i class="bi bi-code"></i>HTML</div>
-            <div class="type-option" onclick="addNewBlock('python')"><i class="bi bi-terminal"></i>PY</div>
-            <div class="type-option" onclick="addNewBlock('image')"><i class="bi bi-image"></i>IMG</div>
-            <div class="type-option" onclick="addNewBlock('video')"><i class="bi bi-play-circle"></i>VID</div>
-            <div class="type-option" onclick="addNewBlock('url')"><i class="bi bi-globe"></i>URL</div>
         </div>
-        <button class="btn btn-sm btn-link text-danger mt-3" onclick="closeTypeSelector()">CANCEL</button>
     </div>
 </div>
-<div id="grid-container"></div>
-<script src="https://cdn.jsdelivr.net/pyodide/v0.27.3/full/pyodide.js"></script>
 <script>
     const container = document.getElementById("grid-container");
     const countDisplay = document.getElementById("countVal");
-    const contentTypes = ["html", "python", "image", "video", "url"];
     let blocks = [];
     let currentUser = null;
-    let pyodide = null;
-    async function initPython() {
-        if (!pyodide) {
-            pyodide = await loadPyodide();
-            await pyodide.loadPackage("micropip");
-        }
-    }
-    function handleLogin(provider) {
-        currentUser = { name: provider + " User", id: Date.now() };
-        document.getElementById("login-section").style.display = "none";
-        document.getElementById("user-profile").style.display = "block";
-        document.getElementById("user-name").innerText = currentUser.name;
-        saveToCache();
-    }
-    function handleLogout() {
-        currentUser = null;
-        document.getElementById("login-section").style.display = "block";
-        document.getElementById("user-profile").style.display = "none";
-    }
     function saveToCache() {
-        const data = { blocks, shade: document.getElementById("shadeRange").value, user: currentUser };
-        localStorage.setItem("wave_grid_cache", JSON.stringify(data));
-        document.getElementById("saveIcon").style.display = "inline";
-        setTimeout(() => { document.getElementById("saveIcon").style.display = "none"; }, 1500);
     }
     function loadFromCache() {
-        const cache = localStorage.getItem("wave_grid_cache");
         if (cache) {
             const data = JSON.parse(cache);
-            blocks = data.blocks;
-            document.getElementById("shadeRange").value = data.shade;
             if (data.user) handleLogin(data.user.name.split(' ')[0]);
             renderGrid();
         } else {
@@ -227,64 +181,106 @@
         }
     }
-    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 updateGrid() {
         const count = parseInt(document.getElementById("blockSlider").value);
         countDisplay.innerText = count;
         while (blocks.length < count) {
-            blocks.push({ id: Date.now() + Math.random(), type: contentTypes[Math.floor(Math.random() * contentTypes.length)], data: "" });
         }
         while (blocks.length > count) blocks.pop();
         renderGrid();
-        saveToCache();
-    }
-    function addNewBlock(type) {
-        blocks.push({ id: Date.now(), type, data: "" });
-        closeTypeSelector();
-        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 type-${b.type}`;
             el.onclick = () => { if(!el.classList.contains('active')) el.classList.add('active'); };
-            let content = `<span class="small fw-bold opacity-50">${b.type.toUpperCase()}</span>`;
-            if(b.type === 'python') {
-                content += `<textarea class="form-control form-control-sm m-2 w-75 bg-dark text-white" style="display:none" placeholder="print('hello')"></textarea>
-                            <button class="btn btn-sm btn-primary m-1" style="display:none" onclick="runPython(${i}, this)">RUN</button>
-                            <div class="python-console" id="console-${i}">Ready...</div>`;
-            }
-            content += `<button class="close-btn" onclick="event.stopPropagation(); this.parentElement.classList.remove('active')">EXIT</button>
-                        <button class="add-block-btn" onclick="event.stopPropagation(); openTypeSelector()">+</button>`;
-            el.innerHTML = content;
             container.appendChild(el);
         });
     }
-    async function runPython(index, btn) {
         event.stopPropagation();
-        const code = btn.previousElementSibling.value;
-        const consoleEl = document.getElementById(`console-${index}`);
-        consoleEl.innerText = "Executing...";
         try {
-            await initPython();
-            let result = await pyodide.runPythonAsync(code);
-            consoleEl.innerText = result || "Success (no output)";
         } catch (err) {
-            consoleEl.innerText = "Error: " + err.message;
         }
     }
     window.onload = loadFromCache;
 </script>
 </body>

 <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>
             --border-python: #0000ff;
             --border-image: #00ff00;
             --border-video: #800080;
+            --border-ai: #ff00ff;
             --border-url: #00ffff;
             --bg-shade: 0.1;
         }
         #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;
             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;
+            height: 100vh !important; z-index: 2500; background: #000; padding: 40px;
+            cursor: default;
         }
         .close-btn {
             display: none; position: absolute; top: 20px; right: 20px;
+            background: #dc3545; color: white; border: none; padding: 8px 16px; border-radius: 4px;
         }
         .block.active .close-btn { display: block; }
+        .ai-interface { display: none; width: 100%; max-width: 800px; flex-direction: column; gap: 15px; }
+        .block.active .ai-interface { display: flex; }
+        .gen-image-preview {
+            width: 100%; max-height: 50vh; object-fit: contain;
+            border: 2px solid var(--border-ai); display: none; background: #111;
         }
         .add-block-btn {
+            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>
+<button id="sidebar-toggle" onclick="toggleSidebar()"><i class="bi bi-chevron-left"></i></button>
+<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,
+            token: document.getElementById("hfToken").value,
+            user: currentUser
+        };
+        localStorage.setItem("wavetype_vps_cache", JSON.stringify(data));
+        showStatus("Saved to Cache");
     }
     function loadFromCache() {
+        const cache = localStorage.getItem("wavetype_vps_cache");
         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 {
         }
     }
+    // --- Grid System ---
     function updateGrid() {
         const count = parseInt(document.getElementById("blockSlider").value);
         countDisplay.innerText = count;
         while (blocks.length < count) {
+            blocks.push({ id: Date.now() + Math.random(), type: 'ai', prompt: "" });
         }
         while (blocks.length > count) blocks.pop();
         renderGrid();
     }
     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 type-${b.type}`;
             el.onclick = () => { if(!el.classList.contains('active')) el.classList.add('active'); };
+            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;
+        const token = document.getElementById("hfToken").value;
+        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";
+        blocks[index].prompt = prompt;
+        saveToCache();
         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 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>
 </body>