|
|
<!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 Klein | 极简一体化终端</title>
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
|
<style>
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;800&display=swap');
|
|
|
|
|
|
:root {
|
|
|
--accent: #111827;
|
|
|
--bg: #f9fafb;
|
|
|
--card: #ffffff;
|
|
|
--easing: cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
}
|
|
|
|
|
|
|
|
|
*::-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);
|
|
|
font-family: 'Inter', -apple-system, sans-serif;
|
|
|
color: var(--accent);
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
}
|
|
|
|
|
|
.container-box {
|
|
|
max-width: 1280px;
|
|
|
margin: 0 auto;
|
|
|
padding: 0 40px;
|
|
|
margin-top: 50px;
|
|
|
}
|
|
|
|
|
|
|
|
|
.nano-input {
|
|
|
background: var(--card);
|
|
|
border: 1px solid #eef0f2;
|
|
|
transition: all 0.3s var(--easing);
|
|
|
}
|
|
|
|
|
|
.nano-input:focus {
|
|
|
border-color: #000;
|
|
|
box-shadow: 0 0 0 1px #000;
|
|
|
}
|
|
|
|
|
|
|
|
|
.upload-item {
|
|
|
background: var(--card);
|
|
|
border: 1px dashed #e2e8f0;
|
|
|
transition: all 0.4s var(--easing);
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.upload-item:hover {
|
|
|
border-color: #000;
|
|
|
background: #fff;
|
|
|
transform: translateY(-2px);
|
|
|
}
|
|
|
|
|
|
.upload-item.drag-over {
|
|
|
border-style: solid;
|
|
|
border-color: #000;
|
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
|
|
|
}
|
|
|
|
|
|
.preview-img {
|
|
|
position: absolute;
|
|
|
inset: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
object-fit: cover;
|
|
|
animation: fadeIn 0.5s var(--easing);
|
|
|
}
|
|
|
|
|
|
|
|
|
.glass-btn {
|
|
|
background: #111827;
|
|
|
transition: all 0.3s var(--easing);
|
|
|
}
|
|
|
|
|
|
.glass-btn:hover {
|
|
|
background: #000;
|
|
|
transform: translateY(-1px);
|
|
|
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
.glass-btn:active {
|
|
|
transform: scale(0.98);
|
|
|
}
|
|
|
|
|
|
|
|
|
.result-frame {
|
|
|
background: #ffffff;
|
|
|
border-radius: 32px;
|
|
|
border: 1px solid #f1f5f9;
|
|
|
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.02);
|
|
|
}
|
|
|
|
|
|
|
|
|
.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: #fff;
|
|
|
border: 1px solid #f1f5f9;
|
|
|
transition: all 0.5s var(--easing);
|
|
|
}
|
|
|
|
|
|
.masonry-item:hover {
|
|
|
transform: translateY(-6px);
|
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
|
|
|
}
|
|
|
|
|
|
@keyframes fadeIn {
|
|
|
from {
|
|
|
opacity: 0;
|
|
|
}
|
|
|
|
|
|
to {
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
<body class="antialiased transition-colors duration-300">
|
|
|
|
|
|
<div class="container-box min-h-screen flex flex-col">
|
|
|
<header class="flex justify-between items-end mb-16">
|
|
|
<div class="space-y-1">
|
|
|
<h1 class="text-4xl font-extrabold tracking-tighter italic">FLUX KLEIN</h1>
|
|
|
<p class="text-[10px] font-bold uppercase tracking-[0.4em] text-gray-400">Next-Gen Generative Interface
|
|
|
</p>
|
|
|
</div>
|
|
|
<nav class="hidden md:flex gap-8 text-[11px] font-bold uppercase tracking-widest text-gray-400">
|
|
|
<span class="text-black border-b-2 border-black pb-1">Create</span>
|
|
|
</nav>
|
|
|
</header>
|
|
|
|
|
|
<main class="grid grid-cols-1 lg:grid-cols-12 gap-12">
|
|
|
<div class="lg:col-span-5 space-y-10">
|
|
|
<section class="space-y-4">
|
|
|
<div class="flex items-center gap-2 text-gray-400">
|
|
|
<i data-lucide="terminal" class="w-3.5 h-3.5"></i>
|
|
|
<span class="text-[10px] font-black uppercase tracking-widest">Input Prompt</span>
|
|
|
</div>
|
|
|
<textarea id="promptInput" rows="5"
|
|
|
class="nano-input w-full p-6 rounded-3xl text-sm outline-none resize-none placeholder-gray-300"
|
|
|
placeholder="Describe your vision here..."></textarea>
|
|
|
</section>
|
|
|
|
|
|
<section class="space-y-4">
|
|
|
<div class="flex items-center gap-2 text-gray-400">
|
|
|
<i data-lucide="image" class="w-3.5 h-3.5"></i>
|
|
|
<span class="text-[10px] font-black uppercase tracking-widest">Reference Layers</span>
|
|
|
</div>
|
|
|
<div class="grid grid-cols-3 gap-4">
|
|
|
<div id="drop-zone-1" onclick="document.getElementById('file1').click()"
|
|
|
class="upload-item group aspect-square rounded-2xl flex flex-col items-center justify-center cursor-pointer">
|
|
|
<input type="file" id="file1" class="hidden" onchange="handleFile(this.files[0], 1)">
|
|
|
<i data-lucide="plus"
|
|
|
class="w-5 h-5 text-gray-300 group-hover:text-black transition-colors"></i>
|
|
|
<span class="text-[9px] mt-2 font-bold text-gray-400 uppercase">Main</span>
|
|
|
<img id="prev1" class="preview-img hidden">
|
|
|
<button id="del1" onclick="clearSlot(1, event)"
|
|
|
class="hidden absolute top-2 right-2 w-6 h-6 bg-white/90 rounded-full shadow-sm z-10 flex items-center justify-center text-xs">×</button>
|
|
|
</div>
|
|
|
<div id="drop-zone-2" onclick="document.getElementById('file2').click()"
|
|
|
class="upload-item group aspect-square rounded-2xl flex flex-col items-center justify-center cursor-pointer">
|
|
|
<input type="file" id="file2" class="hidden" onchange="handleFile(this.files[0], 2)">
|
|
|
<i data-lucide="plus"
|
|
|
class="w-5 h-5 text-gray-300 group-hover:text-black transition-colors"></i>
|
|
|
<span class="text-[9px] mt-2 font-bold text-gray-400 uppercase">Aux A</span>
|
|
|
<img id="prev2" class="preview-img hidden">
|
|
|
<button id="del2" onclick="clearSlot(2, event)"
|
|
|
class="hidden absolute top-2 right-2 w-6 h-6 bg-white/90 rounded-full shadow-sm z-10 flex items-center justify-center text-xs">×</button>
|
|
|
</div>
|
|
|
<div id="drop-zone-3" onclick="document.getElementById('file3').click()"
|
|
|
class="upload-item group aspect-square rounded-2xl flex flex-col items-center justify-center cursor-pointer">
|
|
|
<input type="file" id="file3" class="hidden" onchange="handleFile(this.files[0], 3)">
|
|
|
<i data-lucide="plus"
|
|
|
class="w-5 h-5 text-gray-300 group-hover:text-black transition-colors"></i>
|
|
|
<span class="text-[9px] mt-2 font-bold text-gray-400 uppercase">Aux B</span>
|
|
|
<img id="prev3" class="preview-img hidden">
|
|
|
<button id="del3" onclick="clearSlot(3, event)"
|
|
|
class="hidden absolute top-2 right-2 w-6 h-6 bg-white/90 rounded-full shadow-sm z-10 flex items-center justify-center text-xs">×</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<button id="genBtn" onclick="submitWorkflow()"
|
|
|
class="glass-btn w-full py-5 text-white rounded-xl font-bold flex items-center justify-center gap-3 shadow-lg">
|
|
|
<i data-lucide="zap" id="btnIcon" class="w-4 h-4 text-yellow-400"></i>
|
|
|
<span id="btnText" class="tracking-[0.3em] text-[11px] uppercase">Execute Synthesis</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
|
|
|
<div class="lg:col-span-7">
|
|
|
<div id="resultBox"
|
|
|
class="result-frame min-h-[500px] lg:h-full flex items-center justify-center relative overflow-hidden group">
|
|
|
<div id="placeholder" class="text-center space-y-4 opacity-20">
|
|
|
<i data-lucide="layout" class="w-12 h-12 mx-auto stroke-[1px]"></i>
|
|
|
<p class="text-[10px] font-black tracking-[0.5em] uppercase">Canvas Ready</p>
|
|
|
</div>
|
|
|
|
|
|
<div id="loader" class="hidden text-center space-y-4">
|
|
|
<div
|
|
|
class="w-8 h-8 border-2 border-black border-t-transparent rounded-full animate-spin mx-auto">
|
|
|
</div>
|
|
|
<p class="text-[10px] font-black tracking-[0.5em] uppercase">Synthesizing</p>
|
|
|
</div>
|
|
|
|
|
|
<img id="outputImg"
|
|
|
class="hidden w-full h-full object-contain p-8 cursor-zoom-in transition-all duration-700"
|
|
|
onclick="zoomImage()">
|
|
|
|
|
|
<a id="downloadBtn" href="#" download
|
|
|
class="hidden absolute top-8 right-8 w-12 h-12 bg-white/90 backdrop-blur-md shadow-2xl rounded-2xl flex items-center justify-center hover:bg-black hover:text-white active:scale-95 transition-all">
|
|
|
<i data-lucide="download" class="w-4 h-4"></i>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</main>
|
|
|
|
|
|
<section class="mt-32">
|
|
|
<div class="flex items-center gap-6 mb-12">
|
|
|
<h2 class="text-[11px] font-black uppercase tracking-[0.5em]">Archives</h2>
|
|
|
<div class="h-px flex-1 bg-gray-100"></div>
|
|
|
</div>
|
|
|
<div id="masonry" class="masonry-grid"></div>
|
|
|
<div id="loadMoreTrigger"
|
|
|
class="py-20 text-center text-gray-300 text-[10px] font-bold uppercase tracking-widest cursor-pointer hover:text-black transition-colors">
|
|
|
Load More Archive
|
|
|
</div>
|
|
|
</section>
|
|
|
</div>
|
|
|
|
|
|
<div id="lightbox" onclick="handleOutsideClick(event)"
|
|
|
class="hidden fixed inset-0 z-50 flex items-center justify-center p-6 bg-white/95 backdrop-blur-3xl">
|
|
|
<div class="max-w-6xl w-full flex flex-col items-center relative">
|
|
|
|
|
|
<div class="relative w-full flex justify-center mb-8">
|
|
|
<div id="compareContainer"
|
|
|
class="hidden relative w-full h-[75vh] rounded-[2.5rem] overflow-hidden shadow-2xl bg-[#fafafa]">
|
|
|
<img id="compareGenerated" class="absolute inset-0 w-full h-full object-contain">
|
|
|
<div id="compareOriginalWrapper"
|
|
|
class="absolute inset-0 w-full h-full overflow-hidden border-r-2 border-white/50">
|
|
|
<img id="compareOriginal" class="absolute inset-0 w-full h-full object-contain">
|
|
|
</div>
|
|
|
<div id="compareSlider" class="absolute inset-y-0 left-1/2 w-0.5 bg-white z-20 cursor-ew-resize">
|
|
|
<div
|
|
|
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-10 h-10 bg-white shadow-2xl rounded-full flex items-center justify-center border border-gray-100">
|
|
|
<i data-lucide="move-horizontal" class="w-4 h-4 text-black"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<img id="lightboxImg" src="" class="hidden max-h-[75vh] rounded-[2.5rem] shadow-2xl object-contain">
|
|
|
|
|
|
<div id="lightboxRes"
|
|
|
class="absolute top-6 left-6 bg-black/30 backdrop-blur-md border border-white/20 text-white px-3 py-1.5 rounded-full text-[10px] font-medium tracking-wider opacity-0 transition-opacity duration-300 pointer-events-none z-30">
|
|
|
</div>
|
|
|
|
|
|
<button onclick="downloadLightboxImage()"
|
|
|
class="absolute top-6 right-6 bg-black text-white w-12 h-12 rounded-2xl flex items-center justify-center shadow-2xl z-30 hover:scale-105 transition-transform">
|
|
|
<i data-lucide="download" class="w-5 h-5"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
class="w-full 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"></p>
|
|
|
</div>
|
|
|
<button id="sameStyleBtn" onclick="applySameStyle()"
|
|
|
class="hidden whitespace-nowrap bg-black text-white px-8 py-3.5 rounded-2xl text-[10px] font-black uppercase tracking-widest hover:bg-gray-800 transition-all active:scale-95 flex items-center gap-2">
|
|
|
<i data-lucide="copy" class="w-4 h-4"></i> Replicate
|
|
|
</button>
|
|
|
</div>
|
|
|
|
|
|
<button onclick="closeLightbox()"
|
|
|
class="absolute -top-12 -right-12 p-4 text-gray-400 hover:text-black transition-colors">
|
|
|
<i data-lucide="x" class="w-8 h-8"></i>
|
|
|
</button>
|
|
|
</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_KEY = "client_id";
|
|
|
let CLIENT_ID = localStorage.getItem(CLIENT_ID_KEY) || generateUUID();
|
|
|
localStorage.setItem(CLIENT_ID_KEY, CLIENT_ID);
|
|
|
|
|
|
let uploadedNames = { 1: "", 2: "", 3: "" };
|
|
|
let allHistory = [];
|
|
|
let currentResult = null;
|
|
|
let currentLightboxData = null;
|
|
|
let currentIndex = 0;
|
|
|
const PAGE_SIZE = 24;
|
|
|
let isLoading = false;
|
|
|
|
|
|
|
|
|
let hoveredSlot = null;
|
|
|
[1, 2, 3].forEach(id => {
|
|
|
const zone = document.getElementById(`drop-zone-${id}`);
|
|
|
if (!zone) return;
|
|
|
zone.ondragover = (e) => { e.preventDefault(); zone.classList.add('drag-over'); };
|
|
|
zone.ondragleave = () => { zone.classList.remove('drag-over'); };
|
|
|
zone.ondrop = (e) => { e.preventDefault(); zone.classList.remove('drag-over'); handleFile(e.dataTransfer.files[0], id); };
|
|
|
|
|
|
|
|
|
zone.addEventListener('mouseenter', () => hoveredSlot = id);
|
|
|
zone.addEventListener('mouseleave', () => { if (hoveredSlot === id) hoveredSlot = null; });
|
|
|
});
|
|
|
|
|
|
window.addEventListener('paste', (e) => {
|
|
|
if (!hoveredSlot) return;
|
|
|
const items = (e.clipboardData || e.originalEvent.clipboardData).items;
|
|
|
for (let item of items) {
|
|
|
if (item.kind === 'file' && item.type.startsWith('image/')) {
|
|
|
const file = item.getAsFile();
|
|
|
handleFile(file, hoveredSlot);
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
async function handleFile(file, index) {
|
|
|
if (!file) return;
|
|
|
const reader = new FileReader();
|
|
|
reader.onload = (e) => {
|
|
|
const prev = document.getElementById(`prev${index}`);
|
|
|
prev.src = e.target.result;
|
|
|
prev.classList.remove('hidden');
|
|
|
document.getElementById(`del${index}`).classList.remove('hidden');
|
|
|
};
|
|
|
reader.readAsDataURL(file);
|
|
|
|
|
|
const formData = new FormData();
|
|
|
formData.append('files', file);
|
|
|
try {
|
|
|
const res = await fetch('/api/upload', { method: 'POST', body: formData });
|
|
|
const data = await res.json();
|
|
|
uploadedNames[index] = data.files[0].comfy_name;
|
|
|
} catch (e) { uploadedNames[index] = file.name; }
|
|
|
}
|
|
|
|
|
|
function clearSlot(index, ev) {
|
|
|
if (ev) ev.stopPropagation();
|
|
|
const prev = document.getElementById(`prev${index}`);
|
|
|
prev.src = ""; prev.classList.add("hidden");
|
|
|
document.getElementById(`del${index}`).classList.add("hidden");
|
|
|
uploadedNames[index] = "";
|
|
|
}
|
|
|
|
|
|
async function submitWorkflow() {
|
|
|
if (!uploadedNames[1]) { alert("Please upload Main Image (Slot 1)"); return; }
|
|
|
const btn = document.getElementById('genBtn');
|
|
|
const loader = document.getElementById('loader');
|
|
|
const placeholder = document.getElementById('placeholder');
|
|
|
const outputImg = document.getElementById('outputImg');
|
|
|
const downloadBtn = document.getElementById('downloadBtn');
|
|
|
|
|
|
btn.disabled = true;
|
|
|
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 class="tracking-[0.3em] text-[11px] uppercase">Synthesizing...</span>`;
|
|
|
lucide.createIcons();
|
|
|
|
|
|
placeholder.classList.add('hidden');
|
|
|
|
|
|
const payload = {
|
|
|
prompt: document.getElementById('promptInput').value,
|
|
|
workflow_json: "Flux2-Klein.json",
|
|
|
type: "klein",
|
|
|
params: {
|
|
|
"168": { "text": document.getElementById('promptInput').value },
|
|
|
"158": { "noise_seed": Math.floor(Math.random() * 1000000) },
|
|
|
"278": { "image": uploadedNames[1] },
|
|
|
"270": { "image": uploadedNames[2] || "" },
|
|
|
"292": { "image": uploadedNames[3] || "" },
|
|
|
"313": { "value": uploadedNames[2] !== "" },
|
|
|
"314": { "value": uploadedNames[3] !== "" }
|
|
|
}
|
|
|
};
|
|
|
|
|
|
try {
|
|
|
const response = await fetch('/api/generate', {
|
|
|
method: 'POST',
|
|
|
headers: { 'Content-Type': 'application/json' },
|
|
|
body: JSON.stringify({ ...payload, client_id: CLIENT_ID })
|
|
|
});
|
|
|
const result = await response.json();
|
|
|
if (result.images?.[0]) {
|
|
|
currentResult = result;
|
|
|
outputImg.src = result.images[0];
|
|
|
outputImg.classList.remove('hidden');
|
|
|
downloadBtn.classList.remove('hidden');
|
|
|
downloadBtn.href = result.images[0];
|
|
|
renderImageCard(result, true);
|
|
|
}
|
|
|
} catch (err) {
|
|
|
alert("Generation failed");
|
|
|
placeholder.classList.remove('hidden');
|
|
|
} finally {
|
|
|
loader.classList.add('hidden');
|
|
|
btn.disabled = false;
|
|
|
btn.style.backgroundColor = '';
|
|
|
btn.innerHTML = `<i data-lucide="zap" class="w-4 h-4 text-yellow-400"></i><span class="tracking-[0.3em] text-[11px] uppercase">Execute Synthesis</span>`;
|
|
|
lucide.createIcons();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
function initCompareSlider() {
|
|
|
const container = document.getElementById('compareContainer');
|
|
|
const wrapper = document.getElementById('compareOriginalWrapper');
|
|
|
const slider = document.getElementById('compareSlider');
|
|
|
let isDragging = false;
|
|
|
|
|
|
const updateSlider = (clientX) => {
|
|
|
const rect = container.getBoundingClientRect();
|
|
|
let x = clientX - rect.left;
|
|
|
let percent = (x / rect.width) * 100;
|
|
|
percent = Math.max(0, Math.min(100, percent));
|
|
|
wrapper.style.clipPath = `inset(0 ${100 - percent}% 0 0)`;
|
|
|
slider.style.left = `${percent}%`;
|
|
|
};
|
|
|
|
|
|
const start = (e) => { isDragging = true; e.preventDefault(); };
|
|
|
const end = () => isDragging = false;
|
|
|
const move = (e) => {
|
|
|
if (!isDragging) return;
|
|
|
const clientX = e.touches ? e.touches[0].clientX : e.clientX;
|
|
|
updateSlider(clientX);
|
|
|
};
|
|
|
|
|
|
container.addEventListener('mousedown', (e) => { if (e.target === slider) return; updateSlider(e.clientX); start(e); });
|
|
|
slider.addEventListener('mousedown', start);
|
|
|
window.addEventListener('mouseup', end);
|
|
|
window.addEventListener('mousemove', move);
|
|
|
slider.addEventListener('touchstart', start, { passive: false });
|
|
|
window.addEventListener('touchend', end);
|
|
|
window.addEventListener('touchmove', move, { passive: false });
|
|
|
}
|
|
|
initCompareSlider();
|
|
|
|
|
|
function openLightbox(dataOrUrl) {
|
|
|
const lb = document.getElementById('lightbox');
|
|
|
const img = document.getElementById('lightboxImg');
|
|
|
const comp = document.getElementById('compareContainer');
|
|
|
const promptEl = document.getElementById('lightboxPrompt');
|
|
|
const sameStyleBtn = document.getElementById('sameStyleBtn');
|
|
|
const resPill = document.getElementById('lightboxRes');
|
|
|
|
|
|
let data = (typeof dataOrUrl === 'string') ? { images: [dataOrUrl] } : dataOrUrl;
|
|
|
currentLightboxData = data;
|
|
|
promptEl.textContent = data.prompt || "No prompt metadata found";
|
|
|
|
|
|
resPill.style.opacity = '0';
|
|
|
const updateRes = (target) => {
|
|
|
if (target.naturalWidth) {
|
|
|
resPill.innerText = `${target.naturalWidth} x ${target.naturalHeight}`;
|
|
|
resPill.style.opacity = '1';
|
|
|
}
|
|
|
};
|
|
|
|
|
|
if (data.params?.["278"]?.image) {
|
|
|
img.classList.add('hidden');
|
|
|
comp.classList.remove('hidden');
|
|
|
const genImg = document.getElementById('compareGenerated');
|
|
|
genImg.src = data.images[0];
|
|
|
document.getElementById('compareOriginal').src = `/api/view?filename=${encodeURIComponent(data.params["278"].image)}&type=input`;
|
|
|
document.getElementById('compareOriginalWrapper').style.clipPath = 'inset(0 50% 0 0)';
|
|
|
document.getElementById('compareSlider').style.left = '50%';
|
|
|
|
|
|
genImg.onload = () => updateRes(genImg);
|
|
|
if (genImg.complete) updateRes(genImg);
|
|
|
} else {
|
|
|
comp.classList.add('hidden');
|
|
|
img.classList.remove('hidden');
|
|
|
img.src = data.images[0];
|
|
|
|
|
|
img.onload = () => updateRes(img);
|
|
|
if (img.complete) updateRes(img);
|
|
|
}
|
|
|
|
|
|
sameStyleBtn.classList.toggle('hidden', !data.params);
|
|
|
lb.classList.replace('hidden', 'flex');
|
|
|
document.body.style.overflow = 'hidden';
|
|
|
}
|
|
|
|
|
|
function closeLightbox() {
|
|
|
document.getElementById('lightbox').classList.replace('flex', 'hidden');
|
|
|
document.body.style.overflow = 'auto';
|
|
|
}
|
|
|
|
|
|
function handleOutsideClick(e) { if (e.target.id === 'lightbox') closeLightbox(); }
|
|
|
|
|
|
function renderImageCard(data, isNew = false) {
|
|
|
const masonry = document.getElementById('masonry');
|
|
|
if (document.getElementById(`history-${data.timestamp}`)) return;
|
|
|
|
|
|
const card = document.createElement('div');
|
|
|
card.id = `history-${data.timestamp}`;
|
|
|
card.className = 'masonry-item group relative cursor-zoom-in';
|
|
|
card.onclick = () => openLightbox(data);
|
|
|
|
|
|
card.innerHTML = `
|
|
|
<img src="${data.images[0]}" class="w-full h-full object-cover block transform group-hover:scale-105 transition-transform duration-1000" loading="lazy">
|
|
|
<button onclick="deleteHistoryItem('${data.timestamp}', event)" class="absolute top-4 right-4 text-white hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity z-10">
|
|
|
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
|
|
</button>
|
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-all p-6 flex flex-col justify-end">
|
|
|
<p class="text-white text-[10px] font-medium line-clamp-2 uppercase tracking-wider">${data.prompt || "Klein Archive"}</p>
|
|
|
</div>
|
|
|
`;
|
|
|
isNew ? masonry.prepend(card) : masonry.appendChild(card);
|
|
|
lucide.createIcons();
|
|
|
}
|
|
|
|
|
|
async function applySameStyle() {
|
|
|
if (!currentLightboxData?.params) return;
|
|
|
document.getElementById('promptInput').value = currentLightboxData.prompt || "";
|
|
|
const params = currentLightboxData.params;
|
|
|
|
|
|
const setSlot = (slotId, nodeId) => {
|
|
|
if (params[nodeId]?.image) {
|
|
|
const fname = params[nodeId].image;
|
|
|
uploadedNames[slotId] = fname;
|
|
|
const prev = document.getElementById(`prev${slotId}`);
|
|
|
prev.src = `/api/view?filename=${encodeURIComponent(fname)}&type=input`;
|
|
|
prev.classList.remove('hidden');
|
|
|
document.getElementById(`del${slotId}`).classList.remove('hidden');
|
|
|
} else { clearSlot(slotId); }
|
|
|
};
|
|
|
|
|
|
setSlot(1, "278"); setSlot(2, "270"); setSlot(3, "292");
|
|
|
closeLightbox();
|
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
|
}
|
|
|
|
|
|
async function loadHistory(page = 0) {
|
|
|
if (isLoading) return;
|
|
|
const loader = document.getElementById('loadMoreTrigger');
|
|
|
|
|
|
try {
|
|
|
isLoading = true;
|
|
|
if (page === 0) {
|
|
|
loader.classList.remove('hidden');
|
|
|
loader.innerText = "Loading Archives...";
|
|
|
|
|
|
const res = await fetch('/api/history?type=klein');
|
|
|
allHistory = await res.json();
|
|
|
document.getElementById('masonry').innerHTML = '';
|
|
|
currentIndex = 0;
|
|
|
} else {
|
|
|
loader.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) {
|
|
|
loader.classList.add('hidden');
|
|
|
} else {
|
|
|
loader.classList.remove('hidden');
|
|
|
loader.innerText = "Load More Archive";
|
|
|
}
|
|
|
} catch (e) {
|
|
|
console.error(e);
|
|
|
loader.textContent = "Error loading history";
|
|
|
} finally {
|
|
|
isLoading = false;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function zoomImage() {
|
|
|
if (currentResult) openLightbox(currentResult);
|
|
|
}
|
|
|
|
|
|
function downloadLightboxImage() {
|
|
|
const url = currentLightboxData?.images[0];
|
|
|
if (!url) return;
|
|
|
const link = document.createElement('a');
|
|
|
link.href = url;
|
|
|
link.download = `Klein-${Date.now()}.png`;
|
|
|
link.click();
|
|
|
}
|
|
|
|
|
|
async function deleteHistoryItem(ts, ev) {
|
|
|
ev.stopPropagation();
|
|
|
if (!confirm("Delete this archive?")) return;
|
|
|
try {
|
|
|
const res = await fetch('/api/history/delete', {
|
|
|
method: 'POST',
|
|
|
headers: { 'Content-Type': 'application/json' },
|
|
|
body: JSON.stringify({ timestamp: ts })
|
|
|
});
|
|
|
if ((await res.json()).success) {
|
|
|
document.getElementById(`history-${ts}`).remove();
|
|
|
}
|
|
|
} catch (e) { alert("Delete failed"); }
|
|
|
}
|
|
|
|
|
|
|
|
|
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);
|
|
|
}
|
|
|
});
|
|
|
};
|
|
|
</script>
|
|
|
</body>
|
|
|
|
|
|
</html> |
