Spaces:

Wavetype
/

Modulrss

Running

App Files Files Community

Wavetype commited on 4 days ago

Commit

8209836

verified ·

1 Parent(s): 7922d21

Update index.html

Browse files

Files changed (1) hide show

index.html +289 -55

index.html CHANGED Viewed

@@ -1,57 +1,291 @@
 <!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>Gradio-Lite: Serverless Gradio Running Entirely in Your Browser</title>
-        <meta name="description" content="Gradio-Lite: Serverless Gradio Running Entirely in Your Browser">
-        <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
-        <style>
-            html, body {
-                margin: 0;
-                padding: 0;
-                height: 100%;
             }
-        </style>
-    </head>
-    <body>
-        <gradio-lite>
-            <gradio-file name="app.py" entrypoint>
-import gradio as gr
-from filters import as_gray
-def process(input_image):
-    output_image = as_gray(input_image)
-    return output_image
-demo = gr.Interface(
-    process,
-    "image",
-    "image",
-    examples=["lion.jpg", "logo.png"],
-)
-demo.launch()
-            </gradio-file>
-            <gradio-file name="filters.py">
-from skimage.color import rgb2gray
-def as_gray(image):
-    return rgb2gray(image)
-            </gradio-file>
-            <gradio-file name="lion.jpg" url="https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/test_data/lion.jpg" />
-            <gradio-file name="logo.png" url="https://raw.githubusercontent.com/gradio-app/gradio/main/guides/assets/logo.png" />
-            <gradio-requirements>
-# Same syntax as requirements.txt
-scikit-image
-            </gradio-requirements>
-        </gradio-lite>
-    </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 - 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>
+        :root {
+            --border-html: #ff0000;
+            --border-python: #0000ff;
+            --border-image: #00ff00;
+            --border-video: #800080;
+            --border-3d: #ffa500;
+            --border-txt: #808080;
+            --border-url: #00ffff;
+            --bg-shade: 0.1;
+        }
+        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, #1a1a1a 0%, #0d0d0d 100%);
+            border-right: 2px solid #333; z-index: 2000;
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5); overflow-y: auto;
+        }
+        #sidebar.collapsed { transform: translateX(-320px); }
+        #sidebar-toggle {
+            position: fixed; left: 320px; top: 20px; width: 40px; height: 40px;
+            background: #1a1a1a; border: 2px solid #333; border-left: none;
+            border-radius: 0 8px 8px 0; cursor: pointer; z-index: 2001;
+            display: flex; align-items: center; justify-content: center; color: white;
+            transition: all 0.3s;
+        }
+        #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;
+            padding-left: 324px; transition: padding-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        #sidebar.collapsed ~ #grid-container { padding-left: 4px; }
+        .block {
+            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>
+<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 {
+            updateGrid();
+        }
+    }
+    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>
+</html>