Spaces:
Running
Running
File size: 12,702 Bytes
f0e2690 1511e63 f0e2690 1511e63 f0e2690 1511e63 f0e2690 1511e63 f0e2690 1511e63 f0e2690 1511e63 e14f25e 1511e63 e14f25e 1511e63 f0e2690 1511e63 f0e2690 1511e63 e14f25e 1511e63 e14f25e 1511e63 e14f25e 1511e63 e14f25e 1511e63 e14f25e 1511e63 f0e2690 1511e63 e14f25e 1511e63 f0e2690 1511e63 f0e2690 1511e63 f0e2690 1511e63 f0e2690 1511e63 f0e2690 1511e63 e14f25e f0e2690 1511e63 e14f25e 1511e63 e14f25e 1511e63 e14f25e 1511e63 e14f25e f0e2690 1511e63 f0e2690 1511e63 e14f25e f0e2690 1511e63 f0e2690 1511e63 e14f25e 1511e63 f0e2690 1511e63 f0e2690 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 | <!DOCTYPE html>
<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 !important; border-color: #334155 !important; }
.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> |