|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>FLUX LoRA Explorer - Supabase Edition</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/supabase-js"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
'flux-primary': '#6366f1', |
|
|
'flux-secondary': '#a78bfa', |
|
|
'flux-dark': '#1e293b', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style type="text/tailwindcss"> |
|
|
@layer utilities { |
|
|
.scrollbar-hide::-webkit-scrollbar { |
|
|
display: none; |
|
|
} |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #1e293b 0%, #121827 100%); |
|
|
} |
|
|
.lora-card:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
.flux-glow { |
|
|
box-shadow: 0 0 15px rgba(99, 102, 241, 0.5); |
|
|
} |
|
|
} |
|
|
</style> |
|
|
<style> |
|
|
:root { |
|
|
--flux-primary: #6366f1; |
|
|
--flux-secondary: #a78bfa; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
@apply gradient-bg text-slate-100; |
|
|
background-attachment: fixed; |
|
|
} |
|
|
|
|
|
.logo-glow { |
|
|
filter: drop-shadow(0 0 10px rgba(167, 139, 250, 0.7)); |
|
|
} |
|
|
|
|
|
.tabs .active { |
|
|
@apply border-b-4 border-flux-primary; |
|
|
} |
|
|
|
|
|
.form-label { |
|
|
@apply text-slate-300 text-sm font-medium mb-1 block; |
|
|
} |
|
|
|
|
|
.progress-gradient { |
|
|
background: linear-gradient(90deg, #818cf8, #6366f1, #4f46e5); |
|
|
animation: progressPulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes progressPulse { |
|
|
0% { opacity: 0.7; } |
|
|
50% { opacity: 1; } |
|
|
100% { opacity: 0.7; } |
|
|
} |
|
|
|
|
|
.blob { |
|
|
position: absolute; |
|
|
width: 600px; |
|
|
height: 600px; |
|
|
background: radial-gradient(circle at center, rgba(99, 102, 241, 0.1) 0%, rgba(79, 70, 229, 0) 70%); |
|
|
border-radius: 50%; |
|
|
z-index: -1; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen relative overflow-x-hidden"> |
|
|
|
|
|
<div class="blob top-[-300px] left-[-300px] md:top-[-200px] md:left-[-200px]"></div> |
|
|
<div class="blob bottom-[-300px] right-[-300px] md:bottom-[-200px] md:right-[-200px]"></div> |
|
|
|
|
|
<div class="container mx-auto px-4 py-6 max-w-7xl relative"> |
|
|
|
|
|
<header class="flex flex-col items-center mb-8"> |
|
|
<div class="flex items-center gap-3 mb-2 logo-glow"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-flux-secondary" viewBox="0 0 24 24" fill="currentColor"> |
|
|
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path> |
|
|
</svg> |
|
|
<h1 class="text-4xl md:text-5xl font-bold bg-gradient-to-r from-flux-secondary to-flux-primary bg-clip-text text-transparent">FLUX LoRA Explorer</h1> |
|
|
</div> |
|
|
<p class="text-center text-slate-400 mb-6 max-w-2xl"> |
|
|
Revolutionize your image generation experience with the power of AI. Select LoRA models, customize parameters, and create stunning visuals with one click. |
|
|
</p> |
|
|
<div class="flex items-center gap-2 bg-flux-dark px-4 py-2 rounded-full"> |
|
|
<span class="relative flex h-3 w-3"> |
|
|
<span class="animate-ping absolute h-full w-full rounded-full bg-green-400 opacity-75"></span> |
|
|
<span class="h-full w-full rounded-full bg-green-500"></span> |
|
|
</span> |
|
|
<span class="text-sm text-slate-300">Supabase Integrated</span> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="grid grid-cols-1 lg:grid-cols-12 gap-6"> |
|
|
|
|
|
<div class="lg:col-span-8 flex flex-col gap-6"> |
|
|
|
|
|
<div class="bg-slate-800/50 backdrop-blur-sm rounded-xl p-5 border border-slate-700/50"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-semibold">LoRA Gallery</h2> |
|
|
<div class="flex gap-2"> |
|
|
<button class="px-3 py-1.5 text-sm bg-slate-700 hover:bg-slate-600 rounded-md transition">Search Models</button> |
|
|
<button class="px-3 py-1.5 text-sm bg-flux-primary hover:bg-indigo-500 rounded-md transition">Add Custom</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4"> |
|
|
|
|
|
<div class="lora-card bg-slate-700/50 rounded-lg overflow-hidden transition duration-300"> |
|
|
<div class="aspect-square bg-slate-600 flex items-center justify-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-flux-secondary opacity-50" viewBox="0 0 24 24" fill="currentColor"> |
|
|
<path d="M4 4h7v7H4zm9 9h7v7h-7z" /> |
|
|
<path d="M4 20l7-7m3-6 7-7" stroke="currentColor" stroke-width="2" /> |
|
|
</svg> |
|
|
</div> |
|
|
<div class="p-3"> |
|
|
<h3 class="font-medium truncate">Anime Style</h3> |
|
|
<p class="text-xs text-slate-400 truncate">Trigger: anime_style</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="lora-card bg-slate-700/50 rounded-lg overflow-hidden transition duration-300"> |
|
|
<div class="aspect-square bg-indigo-900/30 flex items-center justify-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-flux-secondary opacity-50" viewBox="0 0 24 24" fill="currentColor"> |
|
|
<path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 16H5V5h14v14zm-8-9H8v6h3v-6zm5-3h-3v10h3V7zm-5 7h3v3h-3v-3z" /> |
|
|
</svg> |
|
|
</div> |
|
|
<div class="p-3"> |
|
|
<h3 class="font-medium truncate">Pixel Art</h3> |
|
|
<p class="text-xs text-slate-400 truncate">Trigger: pixel_mode</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="lora-card bg-slate-700/50 rounded-lg overflow-hidden transition duration-300"> |
|
|
<div class="aspect-square bg-amber-900/30 flex items-center justify-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-flux-secondary opacity-50" viewBox="0 0 24 24" fill="currentColor"> |
|
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" /> |
|
|
<circle cx="12" cy="12" r="5" /> |
|
|
</svg> |
|
|
</div> |
|
|
<div class="p-3"> |
|
|
<h3 class="font-medium truncate">Retro VHS</h3> |
|
|
<p class="text-xs text-slate-400 truncate">Trigger: 90s_vhs</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="lora-card bg-slate-700/50 rounded-lg overflow-hidden transition duration-300"> |
|
|
<div class="aspect-square bg-teal-900/30 flex items-center justify-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-flux-secondary opacity-50" viewBox="0 0 24 24" fill="currentColor"> |
|
|
<path d="M21 5V3H3v2l8 9v5H7v2h10v-2h-4v-5l8-9z" /> |
|
|
</svg> |
|
|
</div> |
|
|
<div class="p-3"> |
|
|
<h3 class="font-medium truncate">Watercolor</h3> |
|
|
<p class="text-xs text-slate-400 truncate">Trigger: watercolor</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-slate-800/50 backdrop-blur-sm rounded-xl p-5 border border-slate-700/50"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
|
|
|
<div> |
|
|
<h2 class="text-xl font-semibold mb-4">Create Your Image</h2> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="form-label">Prompt</label> |
|
|
<textarea class="w-full bg-slate-700/50 border border-slate-600 rounded-lg p-3 focus:ring-2 focus:ring-flux-primary focus:outline-none transition" placeholder="Describe what you want to create..." rows="3"></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label class="form-label">Negative Prompt</label> |
|
|
<textarea class="w-full bg-slate-700/50 border border-slate-600 rounded-lg p-2 text-sm focus:ring-2 focus:ring-flux-primary focus:outline-none transition" placeholder="What you want to avoid..." rows="2"></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<label class="form-label">Base Model</label> |
|
|
<select class="w-full bg-slate-700/50 border border-slate-600 rounded-lg p-2 focus:ring-2 focus:ring-flux-primary focus:outline-none transition"> |
|
|
<option>FLUX.1-dev</option> |
|
|
<option>FLUX.1-schnell</option> |
|
|
<option>Stable Diffusion XL</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between items-center pt-2"> |
|
|
<button class="px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg transition"> |
|
|
Enhance Prompt |
|
|
</button> |
|
|
<button id="generateBtn" class="px-6 py-3 bg-gradient-to-r from-flux-primary to-indigo-700 hover:from-indigo-500 hover:to-flux-primary font-medium rounded-lg transition transform hover:scale-[1.03]"> |
|
|
Generate Image |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-semibold">Preview</h2> |
|
|
<div class="text-sm bg-flux-dark px-2 py-1 rounded">Seed: 398401</div> |
|
|
</div> |
|
|
|
|
|
<div class="aspect-square bg-slate-900 rounded-xl border-2 border-dashed border-slate-700 flex flex-col items-center justify-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-slate-500 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /> |
|
|
</svg> |
|
|
<p class="text-slate-500 text-center max-w-xs px-4">Your generated image will appear here. Click "Generate" to create.</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex gap-2 mt-3"> |
|
|
<button class="flex-1 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg transition">Save to Collection</button> |
|
|
<button class="flex-1 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg transition">Download</button> |
|
|
<button class="w-10 h-10 flex items-center justify-center bg-slate-700 hover:bg-slate-600 rounded-lg transition"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47c.325.186.695.305 1.08.348A3.006 3.006 0 0015 8z" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:col-span-4 flex flex-col gap-6"> |
|
|
|
|
|
<div class="bg-slate-800/50 backdrop-blur-sm rounded-xl p-5 border border-slate-700/50"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-semibold">Generation Parameters</h2> |
|
|
<button id="settingsToggle" class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center hover:bg-slate-600 transition"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="settingsContent" class="space-y-4"> |
|
|
<div> |
|
|
<label class="form-label">Steps</label> |
|
|
<input type="range" min="10" max="50" value="28" class="w-full"> |
|
|
<div class="flex justify-between text-xs text-slate-400 px-1"> |
|
|
<span>10</span> |
|
|
<span class="text-flux-primary font-medium">28</span> |
|
|
<span>50</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="form-label">CFG Scale</label> |
|
|
<input type="range" min="1" max="20" step="0.5" value="3.5" class="w-full"> |
|
|
<div class="flex justify-between text-xs text-slate-400 px-1"> |
|
|
< |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Boobs00/loading" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
