Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Aether Forge v8 - Master Edition</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&display=swap'); | |
| body { font-family: 'Space Grotesk', sans-serif; background: #020617; color: #f1f5f9; } | |
| .glass { background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); } | |
| .accent-purple { color: #a855f7; } | |
| .btn-model { border: 1px solid #334155; transition: 0.3s; } | |
| .btn-model.active { background: #6366f1; border-color: #818cf8; box-shadow: 0 0 15px rgba(99, 102, 241, 0.4); } | |
| select { background: #0f172a ; border-color: #334155 ; } | |
| .status-optimal { color: #4ade80; } | |
| .status-warn { color: #fbbf24; } | |
| .status-crit { color: #f87171; } | |
| </style> | |
| </head> | |
| <body class="p-4 md:p-10 min-h-screen"> | |
| <div class="max-w-7xl mx-auto"> | |
| <header class="flex justify-between items-end mb-10"> | |
| <div> | |
| <h1 class="text-4xl font-bold tracking-tighter">AETHER<span class="accent-purple font-black italic">FORGE</span> <span class="text-sm font-light text-slate-500">v8.0</span></h1> | |
| <p class="text-slate-400">Generador de Estructuras Realistas y Amateur</p> | |
| </div> | |
| <div id="safetyStatus" class="text-[10px] font-bold px-4 py-2 rounded-full border border-slate-700 bg-slate-900/50"> | |
| ANALIZADOR: ESPERANDO... | |
| </div> | |
| </header> | |
| <div class="grid grid-cols-1 lg:grid-cols-12 gap-8"> | |
| <div class="lg:col-span-7 space-y-6"> | |
| <div class="glass p-8 rounded-[2.5rem] shadow-2xl"> | |
| <h2 class="text-xs font-bold uppercase tracking-[0.2em] text-indigo-400 mb-6">Configuración del Generador</h2> | |
| <div class="mb-8"> | |
| <textarea id="rawInput" oninput="liveAnalysis()" rows="4" class="w-full bg-slate-950/50 border border-slate-800 rounded-2xl p-5 text-lg outline-none focus:border-indigo-500 transition-all" placeholder="Describe tu escena (ej: Un hombre caminando por Madrid de noche)"></textarea> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-2 mb-8"> | |
| <button onclick="selectModel('flux')" id="m-flux" class="btn-model p-3 rounded-xl text-[10px] font-bold active">FLUX.1 PRO</button> | |
| <button onclick="selectModel('sdxl')" id="m-sdxl" class="btn-model p-3 rounded-xl text-[10px] font-bold">SDXL 1.0</button> | |
| <button onclick="selectModel('mj')" id="m-mj" class="btn-model p-3 rounded-xl text-[10px] font-bold">MIDJOURNEY</button> | |
| <button onclick="selectModel('dalle')" id="m-dalle" class="btn-model p-3 rounded-xl text-[10px] font-bold">DALL-E 3</button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8"> | |
| <div> | |
| <label class="text-[10px] font-bold text-slate-500 uppercase block mb-2">Sampler</label> | |
| <select id="sampler" class="w-full p-3 rounded-xl border text-xs outline-none"> | |
| <option value="Euler">Euler (Estándar)</option> | |
| <option value="DPM++ 2M SDE">DPM++ 2M SDE (Realismo)</option> | |
| <option value="DPM++ SDE">DPM++ SDE (Lento/Calidad)</option> | |
| <option value="UniPC">UniPC (Rápido)</option> | |
| <option value="FlowMatch">FlowMatch (Solo Flux)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="text-[10px] font-bold text-slate-500 uppercase block mb-2">Scheduler</label> | |
| <select id="scheduler" class="w-full p-3 rounded-xl border text-xs outline-none"> | |
| <option value="Karras">Karras (Suave)</option> | |
| <option value="Normal">Normal</option> | |
| <option value="Beta">Beta (Agresivo)</option> | |
| <option value="Simple">Simple</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="bg-indigo-950/10 border border-indigo-500/20 p-6 rounded-3xl mb-8"> | |
| <h3 class="text-xs font-bold text-indigo-300 uppercase mb-4 tracking-widest flex items-center gap-2"> | |
| <i class="fa-solid fa-camera"></i> Motor de Fotografía Amateur | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <select id="amateurStyle" class="w-full p-3 rounded-xl border border-slate-700 text-xs outline-none"> | |
| <option value="">Sin estilo amateur (Pro/Limpio)</option> | |
| <option value="iphone_candid">Foto de iPhone (Candid/Flash)</option> | |
| <option value="security_cam">Cámara de Seguridad (CCTV)</option> | |
| <option value="disposable_cam">Cámara Desechable (Kodak 200)</option> | |
| <option value="snapchat_style">Estilo Snapchat (Vertical/Blurry)</option> | |
| <option value="vhs_lofi">VHS Lofi (1990s)</option> | |
| </select> | |
| <select id="lens" class="w-full p-3 rounded-xl border border-slate-700 text-xs outline-none"> | |
| <option value="35mm f/1.8">35mm f/1.8 (Retrato)</option> | |
| <option value="24mm Wide">24mm (Gran Angular)</option> | |
| <option value="8mm Fisheye">8mm (Ojo de Pez)</option> | |
| <option value="Zoom Blur">Zoom Blur (Movimiento)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <button onclick="generatePrompt()" class="w-full py-5 rounded-2xl bg-indigo-600 hover:bg-indigo-500 text-white font-black uppercase tracking-widest shadow-xl transition-all"> | |
| FORJAR PROMPT MAESTRO | |
| </button> | |
| </div> | |
| </div> | |
| <div class="lg:col-span-5 space-y-6"> | |
| <div class="glass p-6 rounded-[2rem]"> | |
| <h3 class="text-[10px] font-bold uppercase text-slate-500 mb-4">Análisis de Estructura</h3> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between items-center text-xs"> | |
| <span>Densidad de Detalle</span> | |
| <span id="densityScore" class="font-bold">0%</span> | |
| </div> | |
| <div class="w-full h-1.5 bg-slate-800 rounded-full"> | |
| <div id="densityBar" class="h-full bg-indigo-500 transition-all" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass p-6 rounded-[2rem] border-l-4 border-indigo-500"> | |
| <div class="flex justify-between mb-4"> | |
| <h3 class="text-[10px] font-bold uppercase text-indigo-400">Prompt Optimizado</h3> | |
| <button onclick="copy('finalPos')" class="text-slate-500 hover:text-white"><i class="fa-regular fa-copy"></i></button> | |
| </div> | |
| <div id="finalPos" class="text-sm leading-relaxed text-slate-300 italic min-h-[100px]">Esperando datos...</div> | |
| </div> | |
| <div class="glass p-6 rounded-[2rem] border-l-4 border-red-500"> | |
| <div class="flex justify-between mb-4"> | |
| <h3 class="text-[10px] font-bold uppercase text-red-400">Prompt Negativo</h3> | |
| <button onclick="copy('finalNeg')" class="text-slate-500 hover:text-white"><i class="fa-regular fa-copy"></i></button> | |
| </div> | |
| <div id="finalNeg" class="text-[10px] text-red-200/50">---</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| let model = 'flux'; | |
| const presets = { | |
| iphone_candid: "taken on iPhone, vertical photo, flash photography, slightly blurry, accidental shot, realistic skin textures, grainy night photo", | |
| security_cam: "CCTV footage, high angle, fisheye lens, grainy, black and white, digital noise, security camera timestamp", | |
| disposable_cam: "1990s disposable camera style, vintage film grain, light leaks, overexposed flash, nostalgic atmosphere", | |
| snapchat_style: "mobile phone screen capture, snapchat style, low quality camera, digital zoom artifacts", | |
| vhs_lofi: "VHS tape rip, tracking lines, color bleeding, 4:3 aspect ratio, 1980s aesthetic" | |
| }; | |
| function selectModel(m) { | |
| model = m; | |
| document.querySelectorAll('.btn-model').forEach(b => b.classList.remove('active')); | |
| document.getElementById(`m-${m}`).classList.add('active'); | |
| // Sugerencia de Sampler según modelo | |
| const s = document.getElementById('sampler'); | |
| if(m === 'flux') s.value = 'FlowMatch'; | |
| else if(m === 'sdxl') s.value = 'DPM++ 2M SDE'; | |
| } | |
| function liveAnalysis() { | |
| const input = document.getElementById('rawInput').value; | |
| const score = Math.min(100, (input.length / 150) * 100); | |
| document.getElementById('densityBar').style.width = score + '%'; | |
| document.getElementById('densityScore').innerText = Math.round(score) + '%'; | |
| const badge = document.getElementById('safetyStatus'); | |
| const redFlags = ['nude', 'kill', 'gore', 'political']; | |
| let danger = redFlags.some(word => input.toLowerCase().includes(word)); | |
| if(danger) { | |
| badge.innerText = "ANALIZADOR: RIESGO CRÍTICO"; | |
| badge.className = "text-[10px] font-bold px-4 py-2 rounded-full border border-red-500 bg-red-900/20 status-crit"; | |
| } else { | |
| badge.innerText = "ANALIZADOR: SEGURO"; | |
| badge.className = "text-[10px] font-bold px-4 py-2 rounded-full border border-green-500 bg-green-900/20 status-optimal"; | |
| } | |
| } | |
| function generatePrompt() { | |
| const input = document.getElementById('rawInput').value; | |
| const amateur = document.getElementById('amateurStyle').value; | |
| const lens = document.getElementById('lens').value; | |
| const sampler = document.getElementById('sampler').value; | |
| const scheduler = document.getElementById('scheduler').value; | |
| if(!input) return alert("Escribe una idea"); | |
| let pos = ""; | |
| let amateurText = presets[amateur] || "high quality, professional photography, masterpiece"; | |
| // Lógica por Modelo | |
| if(model === 'flux') { | |
| pos = `[Subject: ${input}] [Style: ${amateurText}] [Lens: ${lens}] [Technical: Sampler ${sampler}, Scheduler ${scheduler}]`; | |
| } else if(model === 'mj') { | |
| pos = `${input}, ${amateurText}, ${lens}, shot on film --v 6.0 --stylize 250`; | |
| } else if(model === 'sdxl') { | |
| pos = `(amateur photography:1.2), ${input}, ${amateurText}, ${lens}, highly realistic, detailed skin, 8k uhd`; | |
| } else { | |
| pos = `A photo of ${input}. Style: ${amateurText}. Technical info: ${lens}. Captured on a real device.`; | |
| } | |
| document.getElementById('finalPos').innerText = pos; | |
| document.getElementById('finalNeg').innerText = "3d render, cartoon, anime, artificial, perfect skin, airbrushed, plastic, cropped, watermark, signature"; | |
| } | |
| function copy(id) { | |
| navigator.clipboard.writeText(document.getElementById(id).innerText); | |
| alert("Copiado!"); | |
| } | |
| </script> | |
| </body> | |
| </html> |