|
|
<!DOCTYPE html>
|
|
|
<html lang="zh-CN">
|
|
|
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<link rel="icon" href="/static/logo.png" type="image/png">
|
|
|
<title>Flux Modern Gallery | Unified Console</title>
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
|
<style>
|
|
|
:root {
|
|
|
--bg-base: #f8f8f8;
|
|
|
--text-main: #1a1a1a;
|
|
|
--max-w: 1280px;
|
|
|
--easing: cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
--accent: #000000;
|
|
|
}
|
|
|
|
|
|
|
|
|
*::-webkit-scrollbar {
|
|
|
width: 10px !important;
|
|
|
height: 10px !important;
|
|
|
background: transparent !important;
|
|
|
}
|
|
|
|
|
|
*::-webkit-scrollbar-track {
|
|
|
background: transparent !important;
|
|
|
border: none !important;
|
|
|
}
|
|
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
|
background-color: #d8d8d8 !important;
|
|
|
border: 3px solid transparent !important;
|
|
|
border-right-width: 5px !important;
|
|
|
|
|
|
background-clip: padding-box !important;
|
|
|
border-radius: 10px !important;
|
|
|
}
|
|
|
|
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
|
background-color: #c0c0c0 !important;
|
|
|
}
|
|
|
|
|
|
*::-webkit-scrollbar-corner {
|
|
|
background: transparent !important;
|
|
|
}
|
|
|
|
|
|
* {
|
|
|
scrollbar-width: thin !important;
|
|
|
scrollbar-color: #d8d8d8 transparent !important;
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
background-color: var(--bg-base);
|
|
|
font-family: "Inter", -apple-system, "PingFang SC", sans-serif;
|
|
|
color: var(--text-main);
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
}
|
|
|
|
|
|
.layout-container {
|
|
|
max-width: var(--max-w);
|
|
|
margin: 0 auto;
|
|
|
padding: 0 40px;
|
|
|
}
|
|
|
|
|
|
.console-card {
|
|
|
background: #ffffff;
|
|
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
|
|
|
}
|
|
|
|
|
|
|
|
|
.mode-switcher {
|
|
|
position: relative;
|
|
|
background: #f1f1f1;
|
|
|
padding: 4px;
|
|
|
border-radius: 14px;
|
|
|
display: flex;
|
|
|
width: 220px;
|
|
|
}
|
|
|
|
|
|
.mode-btn {
|
|
|
position: relative;
|
|
|
z-index: 10;
|
|
|
flex: 1;
|
|
|
padding: 8px 0;
|
|
|
text-align: center;
|
|
|
font-size: 11px;
|
|
|
font-weight: 800;
|
|
|
text-transform: uppercase;
|
|
|
color: #999;
|
|
|
transition: color 0.3s ease;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.mode-btn.active {
|
|
|
color: #000;
|
|
|
}
|
|
|
|
|
|
.mode-glider {
|
|
|
position: absolute;
|
|
|
height: calc(100% - 8px);
|
|
|
width: calc(50% - 4px);
|
|
|
background: #fff;
|
|
|
border-radius: 11px;
|
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
|
|
|
transition: transform 0.3s var(--easing);
|
|
|
z-index: 1;
|
|
|
}
|
|
|
|
|
|
.masonry-grid {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(2, 1fr);
|
|
|
gap: 20px;
|
|
|
}
|
|
|
|
|
|
@media (min-width: 768px) {
|
|
|
.masonry-grid {
|
|
|
grid-template-columns: repeat(4, 1fr);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.masonry-item {
|
|
|
aspect-ratio: 1 / 1;
|
|
|
border-radius: 24px;
|
|
|
overflow: hidden;
|
|
|
background: #eee;
|
|
|
border: 1px solid #f1f5f9;
|
|
|
transition: all 0.5s var(--easing);
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.masonry-item:hover {
|
|
|
transform: translateY(-6px);
|
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
|
|
|
}
|
|
|
|
|
|
.gallery-lightbox {
|
|
|
background: rgba(255, 255, 255, 0.99);
|
|
|
}
|
|
|
|
|
|
.btn-render {
|
|
|
background: #000;
|
|
|
color: #fff;
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.btn-render:hover {
|
|
|
transform: translateY(-1px);
|
|
|
background: #222;
|
|
|
}
|
|
|
|
|
|
.btn-render:disabled {
|
|
|
background: #ccc;
|
|
|
cursor: not-allowed;
|
|
|
}
|
|
|
|
|
|
input::-webkit-inner-spin-button {
|
|
|
display: none;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
<body class="antialiased">
|
|
|
|
|
|
<header class="pt-20 pb-12">
|
|
|
<div class="layout-container">
|
|
|
<div class="console-card rounded-3xl p-1.5">
|
|
|
<div class="bg-gray-50/50 rounded-[22px] p-8">
|
|
|
<div class="flex justify-between items-center mb-6">
|
|
|
<span class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Unified Art
|
|
|
Console</span>
|
|
|
<div id="statusDot" class="flex items-center gap-2">
|
|
|
<span id="statusText" class="text-[9px] font-bold text-gray-500 uppercase">System
|
|
|
Ready</span>
|
|
|
<div id="dotColor" class="w-1.5 h-1.5 bg-black rounded-full"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<textarea id="prompt" rows="2"
|
|
|
class="w-full bg-transparent text-2xl font-medium outline-none placeholder:text-gray-200 text-black resize-none leading-relaxed"
|
|
|
placeholder="Describe your vision..."></textarea>
|
|
|
</div>
|
|
|
|
|
|
<div class="flex flex-col md:flex-row items-center justify-between p-4 px-6 gap-6">
|
|
|
<div class="flex items-center gap-8">
|
|
|
<div class="flex flex-col">
|
|
|
<span class="text-[9px] font-bold text-gray-400 uppercase mb-1">Engine Source</span>
|
|
|
<div class="mode-switcher">
|
|
|
<div id="modeLocal" class="mode-btn active flex items-center justify-center gap-1.5"
|
|
|
onclick="switchEngine('local')">
|
|
|
<i data-lucide="monitor" class="w-3 h-3"></i>
|
|
|
<span>Local</span>
|
|
|
</div>
|
|
|
<div id="modeCloud" class="mode-btn flex items-center justify-center"
|
|
|
onclick="switchEngine('cloud')">
|
|
|
<img src="/static/modelscope.gif"
|
|
|
class="h-4 object-contain opacity-50 transition-opacity group-hover:opacity-100"
|
|
|
style="filter: grayscale(100%);" id="msLogo">
|
|
|
</div>
|
|
|
<div id="glider" class="mode-glider"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="h-8 w-px bg-gray-100"></div>
|
|
|
|
|
|
<div class="flex flex-col">
|
|
|
<span class="text-[9px] font-bold text-gray-400 uppercase mb-1">Dimensions</span>
|
|
|
<div class="flex items-center gap-2 text-xs font-bold">
|
|
|
<input id="width" type="number" value="1024"
|
|
|
class="w-10 bg-transparent outline-none border-b border-transparent focus:border-black">
|
|
|
<span class="text-gray-200">×</span>
|
|
|
<input id="height" type="number" value="1024"
|
|
|
class="w-10 bg-transparent outline-none border-b border-transparent focus:border-black">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<button id="mainGenBtn" onclick="handleRender()"
|
|
|
class="w-full md:w-56 h-12 btn-render rounded-xl font-bold text-[11px] uppercase flex items-center justify-center gap-3">
|
|
|
<i data-lucide="zap" id="btnIcon" class="w-4 h-4 text-yellow-400"></i>
|
|
|
<span id="btnText">Render Art</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</header>
|
|
|
|
|
|
<main class="pb-24">
|
|
|
<div class="layout-container">
|
|
|
<div id="masonry" class="masonry-grid"></div>
|
|
|
<div id="loadMoreTrigger"
|
|
|
class="py-12 text-center text-gray-300 text-[10px] font-bold uppercase tracking-widest cursor-pointer hidden">
|
|
|
Load More Archive
|
|
|
</div>
|
|
|
</div>
|
|
|
</main>
|
|
|
|
|
|
<div id="lightbox" onclick="handleOutsideClick(event)"
|
|
|
class="hidden fixed inset-0 z-50 gallery-lightbox flex flex-col items-center justify-center p-8">
|
|
|
<button onclick="closeLightbox()" class="absolute top-10 right-10 text-gray-400 hover:text-black"><i
|
|
|
data-lucide="x" class="w-8 h-8"></i></button>
|
|
|
<div class="max-w-5xl w-full flex flex-col items-center pointer-events-none">
|
|
|
<div class="relative pointer-events-auto">
|
|
|
<img id="lightboxImg" src="" class="max-h-[60vh] rounded-lg shadow-xl">
|
|
|
<div
|
|
|
class="absolute top-6 left-6 bg-black/50 backdrop-blur-md text-white px-3 py-1.5 rounded-xl text-[10px] font-black tracking-widest shadow-2xl">
|
|
|
<span id="lightboxRes">0x0</span>
|
|
|
</div>
|
|
|
<button onclick="downloadImage()"
|
|
|
class="absolute top-6 right-6 bg-black text-white w-12 h-12 rounded-2xl flex items-center justify-center shadow-2xl hover:scale-105 transition-transform">
|
|
|
<i data-lucide="download" class="w-5 h-5"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div id="lightboxCard"
|
|
|
class="w-full mt-16 pointer-events-auto bg-white border border-gray-100 rounded-[2rem] p-8 shadow-sm flex justify-between items-center gap-8">
|
|
|
<div class="flex-1">
|
|
|
<span class="text-[9px] font-black text-gray-300 uppercase tracking-widest block mb-2">Prompt
|
|
|
Execution</span>
|
|
|
<p id="lightboxPrompt" class="text-gray-700 text-sm leading-relaxed max-h-32 overflow-y-auto pr-2">
|
|
|
</p>
|
|
|
</div>
|
|
|
<button onclick="applySameStyle()"
|
|
|
class="bg-black text-white px-8 py-3.5 rounded-2xl text-[10px] font-black uppercase tracking-widest flex items-center gap-2">
|
|
|
<i data-lucide="copy" class="w-3 h-3"></i>
|
|
|
<span>Replicate</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
lucide.createIcons();
|
|
|
|
|
|
function generateUUID() {
|
|
|
if (typeof crypto !== 'undefined' && crypto.randomUUID) {
|
|
|
try { return crypto.randomUUID(); } catch (e) { }
|
|
|
}
|
|
|
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
|
|
|
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
|
|
|
return v.toString(16);
|
|
|
});
|
|
|
}
|
|
|
const CLIENT_ID = localStorage.getItem("client_id") || generateUUID();
|
|
|
localStorage.setItem("client_id", CLIENT_ID);
|
|
|
|
|
|
let allHistory = [];
|
|
|
let currentIndex = 0;
|
|
|
const PAGE_SIZE = 15;
|
|
|
let isLoading = false;
|
|
|
|
|
|
|
|
|
const socket = new WebSocket(`${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/ws/stats`);
|
|
|
socket.onmessage = (e) => {
|
|
|
try {
|
|
|
const msg = JSON.parse(e.data);
|
|
|
if (msg.type === 'new_image' && msg.data?.type === 'zimage') {
|
|
|
if (!document.getElementById(`history-${msg.data.timestamp}`)) {
|
|
|
allHistory.unshift(msg.data);
|
|
|
renderImageCard(msg.data, true);
|
|
|
currentIndex++;
|
|
|
}
|
|
|
}
|
|
|
} catch (err) { }
|
|
|
};
|
|
|
|
|
|
let currentEngine = 'local';
|
|
|
const MS_TOKEN_KEY = 'modelscope_api_token';
|
|
|
const ENGINE_MODE_KEY = 'zimage_engine_mode';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function switchEngine(mode) {
|
|
|
currentEngine = mode;
|
|
|
localStorage.setItem(ENGINE_MODE_KEY, mode);
|
|
|
|
|
|
const glider = document.getElementById('glider');
|
|
|
const localBtn = document.getElementById('modeLocal');
|
|
|
const cloudBtn = document.getElementById('modeCloud');
|
|
|
const btnText = document.getElementById('btnText');
|
|
|
const msLogo = document.getElementById('msLogo');
|
|
|
|
|
|
if (mode === 'local') {
|
|
|
glider.style.transform = 'translateX(0)';
|
|
|
localBtn.classList.add('active');
|
|
|
cloudBtn.classList.remove('active');
|
|
|
btnText.innerText = 'Render Art (Local)';
|
|
|
|
|
|
if (msLogo) {
|
|
|
msLogo.classList.add('opacity-50');
|
|
|
msLogo.style.filter = 'grayscale(100%)';
|
|
|
}
|
|
|
} else {
|
|
|
glider.style.transform = 'translateX(100%)';
|
|
|
cloudBtn.classList.add('active');
|
|
|
localBtn.classList.remove('active');
|
|
|
btnText.innerText = 'Render Art (Cloud)';
|
|
|
|
|
|
if (msLogo) {
|
|
|
msLogo.classList.remove('opacity-50');
|
|
|
msLogo.style.filter = 'none';
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
const savedEngine = localStorage.getItem(ENGINE_MODE_KEY);
|
|
|
if (savedEngine && savedEngine !== 'local') {
|
|
|
switchEngine(savedEngine);
|
|
|
}
|
|
|
|
|
|
|
|
|
async function handleRender() {
|
|
|
const prompt = document.getElementById('prompt').value.trim();
|
|
|
if (!prompt) return alert("Please enter a prompt");
|
|
|
|
|
|
if (currentEngine === 'local') {
|
|
|
runLocalTask(prompt);
|
|
|
} else {
|
|
|
runCloudTask(prompt);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
async function runCloudTask(prompt) {
|
|
|
let apiKey = localStorage.getItem(MS_TOKEN_KEY);
|
|
|
if (!apiKey) {
|
|
|
try {
|
|
|
const res = await fetch('/api/config/token');
|
|
|
const data = await res.json();
|
|
|
if (data.token) apiKey = data.token;
|
|
|
} catch (e) { }
|
|
|
}
|
|
|
if (!apiKey) return alert("ModelScope Token Required. Please set it in the sidebar (API Token).");
|
|
|
|
|
|
const btn = document.getElementById('mainGenBtn');
|
|
|
setLoading(true);
|
|
|
|
|
|
const placeholder = createPlaceholder("ModelScope Rendering");
|
|
|
document.getElementById('masonry').prepend(placeholder);
|
|
|
|
|
|
try {
|
|
|
const res = await fetch('/generate', {
|
|
|
method: 'POST',
|
|
|
headers: { 'Content-Type': 'application/json' },
|
|
|
body: JSON.stringify({
|
|
|
prompt: prompt,
|
|
|
api_key: apiKey,
|
|
|
resolution: `${document.getElementById('width').value}x${document.getElementById('height').value}`
|
|
|
})
|
|
|
});
|
|
|
const data = await res.json();
|
|
|
placeholder.remove();
|
|
|
if (res.ok && data.url) {
|
|
|
renderImageCard({ timestamp: Date.now(), prompt, images: [data.url], type: 'cloud' }, true);
|
|
|
} else {
|
|
|
throw new Error(data.detail?.errors?.message || data.detail || "Cloud Error");
|
|
|
}
|
|
|
} catch (e) {
|
|
|
placeholder.remove();
|
|
|
alert(e.message);
|
|
|
} finally {
|
|
|
setLoading(false);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
async function runLocalTask(prompt) {
|
|
|
setLoading(true);
|
|
|
const placeholder = createPlaceholder("Local Rendering");
|
|
|
document.getElementById('masonry').prepend(placeholder);
|
|
|
|
|
|
try {
|
|
|
const res = await fetch('/api/generate', {
|
|
|
method: 'POST',
|
|
|
headers: { 'Content-Type': 'application/json' },
|
|
|
body: JSON.stringify({
|
|
|
prompt,
|
|
|
width: parseInt(document.getElementById('width').value),
|
|
|
height: parseInt(document.getElementById('height').value),
|
|
|
type: "zimage",
|
|
|
client_id: CLIENT_ID
|
|
|
})
|
|
|
});
|
|
|
const data = await res.json();
|
|
|
placeholder.remove();
|
|
|
if (data.images?.length > 0) renderImageCard(data, true);
|
|
|
} catch (e) {
|
|
|
placeholder.remove();
|
|
|
alert("Local render failed");
|
|
|
} finally {
|
|
|
setLoading(false);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
function setLoading(isLoading) {
|
|
|
const btn = document.getElementById('mainGenBtn');
|
|
|
btn.disabled = isLoading;
|
|
|
|
|
|
if (isLoading) {
|
|
|
|
|
|
btn.style.backgroundColor = '#333';
|
|
|
btn.innerHTML = `<i data-lucide="zap" class="w-4 h-4 text-yellow-400 fill-yellow-400 animate-pulse"></i><span>Processing...</span>`;
|
|
|
} else {
|
|
|
|
|
|
btn.style.backgroundColor = '';
|
|
|
btn.innerHTML = `<i data-lucide="zap" class="w-4 h-4 text-yellow-400"></i><span id="btnText">Render Art (${currentEngine.toUpperCase()})</span>`;
|
|
|
}
|
|
|
lucide.createIcons();
|
|
|
}
|
|
|
|
|
|
function createPlaceholder(text) {
|
|
|
const div = document.createElement('div');
|
|
|
div.className = 'masonry-item bg-gray-50 flex flex-col items-center justify-center border-dashed border-2 border-gray-200';
|
|
|
div.innerHTML = `<div class="w-6 h-6 border-2 border-gray-100 border-t-black rounded-full animate-spin mb-3"></div><span class="text-[8px] font-bold text-gray-400 uppercase tracking-tighter">${text}</span>`;
|
|
|
return div;
|
|
|
}
|
|
|
|
|
|
function renderImageCard(data, isNew = false) {
|
|
|
if (document.getElementById(`history-${data.timestamp}`)) return;
|
|
|
const masonry = document.getElementById('masonry');
|
|
|
const card = document.createElement('div');
|
|
|
card.id = `history-${data.timestamp}`;
|
|
|
card.className = 'masonry-item group cursor-zoom-in animate-in fade-in duration-700';
|
|
|
card.onclick = () => openLightbox(data.images[0], data.prompt);
|
|
|
card.innerHTML = `
|
|
|
<img src="${data.images[0]}" class="w-full h-full object-cover" loading="lazy">
|
|
|
${data.type === 'cloud' ? '<div class="absolute top-3 left-3 z-10"><img src="/static/modelscope.gif" class="h-4 w-auto object-contain bg-white/90 rounded-full p-0.5 shadow-sm"></div>' : ''}
|
|
|
<div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity z-10">
|
|
|
<button onclick="deleteHistoryItem('${data.timestamp}', event)" class="w-8 h-8 bg-white/90 backdrop-blur text-black hover:bg-black hover:text-white rounded-lg flex items-center justify-center transition-colors">
|
|
|
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
`;
|
|
|
isNew ? masonry.prepend(card) : masonry.appendChild(card);
|
|
|
lucide.createIcons();
|
|
|
}
|
|
|
|
|
|
async function loadHistory(page = 0) {
|
|
|
if (isLoading) return;
|
|
|
const trigger = document.getElementById('loadMoreTrigger');
|
|
|
|
|
|
try {
|
|
|
isLoading = true;
|
|
|
if (page === 0) {
|
|
|
allHistory = [];
|
|
|
document.getElementById('masonry').innerHTML = '';
|
|
|
currentIndex = 0;
|
|
|
|
|
|
trigger.classList.remove('hidden');
|
|
|
trigger.innerText = "Loading Archives...";
|
|
|
|
|
|
const res = await fetch('/api/history?type=zimage');
|
|
|
allHistory = await res.json();
|
|
|
} else {
|
|
|
trigger.innerText = "Loading...";
|
|
|
await new Promise(r => setTimeout(r, 400));
|
|
|
}
|
|
|
|
|
|
const nextData = allHistory.slice(currentIndex, currentIndex + PAGE_SIZE);
|
|
|
nextData.forEach(item => renderImageCard(item));
|
|
|
currentIndex += nextData.length;
|
|
|
|
|
|
if (currentIndex >= allHistory.length) {
|
|
|
trigger.classList.add('hidden');
|
|
|
} else {
|
|
|
trigger.classList.remove('hidden');
|
|
|
trigger.innerText = "Load More Archive";
|
|
|
}
|
|
|
|
|
|
} catch (e) {
|
|
|
console.error(e);
|
|
|
trigger.innerText = "Error Loading History";
|
|
|
} finally {
|
|
|
isLoading = false;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function deleteHistoryItem(timestamp, event) {
|
|
|
event.stopPropagation();
|
|
|
const res = await fetch('/api/history/delete', {
|
|
|
method: 'POST',
|
|
|
headers: { 'Content-Type': 'application/json' },
|
|
|
body: JSON.stringify({ timestamp })
|
|
|
});
|
|
|
if ((await res.json()).success) document.getElementById(`history-${timestamp}`).remove();
|
|
|
}
|
|
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
|
if (entries[0].isIntersecting && !isLoading && currentIndex < allHistory.length) {
|
|
|
loadHistory(1);
|
|
|
}
|
|
|
}, { threshold: 0.1 });
|
|
|
|
|
|
window.onload = () => {
|
|
|
loadHistory(0).then(() => {
|
|
|
const trigger = document.getElementById('loadMoreTrigger');
|
|
|
if (trigger) {
|
|
|
observer.observe(trigger);
|
|
|
trigger.onclick = () => loadHistory(1);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
setInterval(async () => {
|
|
|
try {
|
|
|
const res = await fetch("/api/queue_status?client_id=" + encodeURIComponent(CLIENT_ID));
|
|
|
const data = await res.json();
|
|
|
const statusText = document.getElementById("statusText");
|
|
|
const dotColor = document.getElementById("dotColor");
|
|
|
if (statusText && dotColor) {
|
|
|
if (data.total > 0) {
|
|
|
statusText.innerText = `Queueing ${data.position}/${data.total}`;
|
|
|
statusText.className = "text-[9px] font-bold text-orange-500 uppercase";
|
|
|
dotColor.className = "w-1.5 h-1.5 bg-orange-500 rounded-full animate-pulse";
|
|
|
} else {
|
|
|
statusText.innerText = "System Ready";
|
|
|
statusText.className = "text-[9px] font-bold text-gray-500 uppercase";
|
|
|
dotColor.className = "w-1.5 h-1.5 bg-black rounded-full";
|
|
|
}
|
|
|
}
|
|
|
} catch (e) { }
|
|
|
}, 3000);
|
|
|
};
|
|
|
|
|
|
|
|
|
function openLightbox(url, prompt) {
|
|
|
const img = document.getElementById('lightboxImg');
|
|
|
const resDisplay = document.getElementById('lightboxRes');
|
|
|
resDisplay.innerText = "...";
|
|
|
img.src = url;
|
|
|
img.onload = () => {
|
|
|
resDisplay.innerText = `${img.naturalWidth} x ${img.naturalHeight}`;
|
|
|
};
|
|
|
document.getElementById('lightboxPrompt').innerText = prompt;
|
|
|
document.getElementById('lightbox').classList.remove('hidden');
|
|
|
document.body.style.overflow = 'hidden';
|
|
|
}
|
|
|
function closeLightbox() { document.getElementById('lightbox').classList.add('hidden'); document.body.style.overflow = 'auto'; }
|
|
|
function handleOutsideClick(e) { if (e.target.id === 'lightbox') closeLightbox(); }
|
|
|
function downloadImage() {
|
|
|
const a = document.createElement('a'); a.href = document.getElementById('lightboxImg').src;
|
|
|
a.download = `Art-${Date.now()}.png`; a.click();
|
|
|
}
|
|
|
function applySameStyle() {
|
|
|
document.getElementById('prompt').value = document.getElementById('lightboxPrompt').innerText;
|
|
|
closeLightbox();
|
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
|
}
|
|
|
</script>
|
|
|
</body>
|
|
|
|
|
|
</html> |
