Spaces:

Wavetype
/

Imagulessss

Running

App Files Files Community

Wavetype commited on Jan 16

Commit

77d2e57

verified ·

1 Parent(s): c0eaf7e

Update index.html

Browse files

Files changed (1) hide show

index.html +200 -149

index.html CHANGED Viewed

@@ -3,165 +3,216 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <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; 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; position: relative; }
-        .block.active .ai-ui { display: flex; }
-        /* 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>
-<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">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">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>
-        <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');
-        if (urlKey) {
-            hfInp.value = urlKey;
-            window.history.replaceState({}, '', window.location.pathname);
-            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 }));
-        nodes.forEach(n => {
-            const div = document.createElement('div');
-            div.className = 'block';
-            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 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>
-                <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}`);
-        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;
-        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) {
-            alert("Error: " + e.message);
-        } finally {
-            loader.style.display = 'none';
-            btn.disabled = false;
-        }
-    }
-    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>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Modular HTML Builder</title>
     <style>
+        :root {
+            --bg: #0a0a0a;
+            --card: #1a1a1a;
+            --accent: #7b2ff7;
+            --text: #e0e0e0;
+            --border: #333;
+        }
+        body {
+            background: var(--bg);
+            color: var(--text);
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            margin: 0;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        #canvas {
+            width: 100%;
+            max-width: 800px;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        .module-box {
+            background: var(--card);
+            border: 2px solid var(--accent);
+            border-radius: 8px;
+            padding: 15px;
+            position: relative;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
+        }
+        .module-header {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 10px;
+            font-size: 0.8rem;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            color: var(--accent);
+        }
+        textarea {
+            width: 100%;
+            height: 100px;
+            background: #000;
+            color: #00ff41;
+            border: 1px solid var(--border);
+            border-radius: 4px;
+            font-family: monospace;
+            padding: 10px;
+            box-sizing: border-box;
+            resize: vertical;
+        }
+        .controls {
+            margin-top: 10px;
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+        }
+        button {
+            background: transparent;
+            color: white;
+            border: 1px solid var(--accent);
+            padding: 8px 15px;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: 0.2s;
+            font-size: 0.8rem;
+        }
+        button:hover {
+            background: var(--accent);
+        }
+        .save-btn {
+            border-color: #00ff41;
+            color: #00ff41;
+        }
+        .save-btn:hover {
+            background: #00ff41;
+            color: black;
+        }
+        #library {
+            width: 100%;
+            max-width: 800px;
+            margin-top: 30px;
+            padding: 15px;
+            background: #111;
+            border-top: 1px solid var(--border);
+        }
+        .library-title {
+            font-size: 0.9rem;
+            margin-bottom: 10px;
+            color: #888;
+        }
+        .library-grid {
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+        }
+        .lib-item {
+            background: #222;
+            border: 1px solid #444;
+            padding: 5px 10px;
+            font-size: 0.75rem;
+            cursor: pointer;
+        }
+        .lib-item:hover {
+            border-color: var(--accent);
+        }
+        .add-module-trigger {
+            margin: 20px;
+            padding: 15px 40px;
+            font-weight: bold;
+            border-width: 2px;
+        }
     </style>
 </head>
 <body>
+    <div id="canvas">
         </div>
+    <button class="add-module-trigger" onclick="createModule()">+ ADD NEW MODULE</button>
+    <div id="library">
+        <div class="library-title">SAVED HTML SNIPPETS (AUTO-SAVED)</div>
+        <div id="library-grid" class="library-grid"></div>
     </div>
+    <script>
+        let library = JSON.parse(localStorage.getItem('html_library')) || [];
+        function init() {
+            renderLibrary();
+            createModule(); // Start with one module
+        }
+        function createModule(initialContent = '') {
+            const canvas = document.getElementById('canvas');
+            const moduleId = 'mod_' + Date.now();
+            const box = document.createElement('div');
+            box.className = 'module-box';
+            box.id = moduleId;
+            box.innerHTML = `
+                <div class="module-header">
+                    <span>HTML NODE</span>
+                    <span style="cursor:pointer" onclick="document.getElementById('${moduleId}').remove()">[EXIT]</span>
                 </div>
+                <textarea placeholder="Paste or type HTML here..." id="text_${moduleId}">${initialContent}</textarea>
+                <div class="controls">
+                    <button onclick="previewModule('${moduleId}')">RENDER PREVIEW</button>
+                    <button class="save-btn" onclick="saveToLibrary('${moduleId}')">SAVE TO LIBRARY</button>
+                </div>
+                <div id="preview_${moduleId}" style="margin-top:15px; display:none; padding:10px; border:1px dashed #444;"></div>
             `;
+            canvas.appendChild(box);
+        }
+        function saveToLibrary(moduleId) {
+            const content = document.getElementById(`text_${moduleId}`).value;
+            if (!content.trim()) return;
+            const name = prompt("Name this snippet:", "Snippet " + (library.length + 1));
+            if (name) {
+                library.push({ name, content });
+                localStorage.setItem('html_library', JSON.stringify(library));
+                renderLibrary();
+            }
+        }
+        function renderLibrary() {
+            const grid = document.getElementById('library-grid');
+            grid.innerHTML = '';
+            library.forEach((item, index) => {
+                const btn = document.createElement('button');
+                btn.className = 'lib-item';
+                btn.innerText = item.name;
+                btn.onclick = () => createModule(item.content);
+                grid.appendChild(btn);
             });
+        }
+        function previewModule(moduleId) {
+            const content = document.getElementById(`text_${moduleId}`).value;
+            const prevDiv = document.getElementById(`preview_${moduleId}`);
+            prevDiv.style.display = 'block';
+            prevDiv.innerHTML = content;
+        }
+        init();
+    </script>
 </body>
 </html>