|
|
<!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 - 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> |
|
|
:root { |
|
|
--border-html: #ff0000; |
|
|
--border-python: #0000ff; |
|
|
--border-image: #00ff00; |
|
|
--border-video: #800080; |
|
|
--border-ai: #ff00ff; |
|
|
--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; } |
|
|
.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; |
|
|
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; transition: all 0.5s; |
|
|
} |
|
|
|
|
|
.type-ai { border-color: var(--border-ai); } |
|
|
|
|
|
.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; |
|
|
} |
|
|
</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> |
|
|
|
|
|
<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 = []; |
|
|
let currentUser = null; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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."); |
|
|
|
|
|
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, |
|
|
token: document.getElementById("hfToken").value, |
|
|
user: currentUser |
|
|
}; |
|
|
localStorage.setItem("wavetype_vps_cache", JSON.stringify(data)); |
|
|
showStatus("Saved"); |
|
|
if(data.token) document.getElementById("tokenStatus").style.display = "inline"; |
|
|
} |
|
|
|
|
|
function loadFromCache() { |
|
|
const cache = localStorage.getItem("wavetype_vps_cache"); |
|
|
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.push({ id: Date.now() + Math.random(), type: 'ai', prompt: "" }); |
|
|
} |
|
|
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 type-${b.type}`; |
|
|
el.onclick = () => { if(!el.classList.contains('active')) el.classList.add('active'); }; |
|
|
|
|
|
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 token = document.getElementById("hfToken").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"; |
|
|
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(); |
|
|
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> |
|
|
</body> |
|
|
</html> |
|
|
|
