Spaces:

Javijavigon
/

ApexEngine

Running

App Files Files Community

Javijavigon commited on Dec 22, 2025

Commit

e14f25e

verified ·

1 Parent(s): f0e2690

Update index.html

Browse files

Files changed (1) hide show

index.html +213 -103

index.html CHANGED Viewed

@@ -3,90 +3,154 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Apex Engine v6 - Guardian 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-color: #030712; color: #f1f5f9; }
-        .glass-panel { background: rgba(17, 24, 39, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05); }
-        .status-pill { transition: all 0.4s ease; }
-        .critical { color: #f87171; border-color: #ef4444; }
-        .optimal { color: #4ade80; border-color: #22c55e; }
-        .warning { color: #fbbf24; border-color: #f59e0b; }
-        .btn-apex { background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%); }
     </style>
 </head>
-<body class="p-4 md:p-8">
-    <div class="max-w-7xl mx-auto">
-        <header class="mb-10 flex flex-col md:flex-row justify-between items-center gap-4">
-            <div>
-                <h1 class="text-4xl font-black tracking-tighter text-white">APEX<span class="text-indigo-500">ENGINE</span> <span class="text-xs bg-indigo-500/20 text-indigo-400 px-2 py-1 rounded">V6.0</span></h1>
-                <p class="text-slate-500 text-sm">Analizador de seguridad y estructurador jerárquico</p>
-            </div>
-            <div id="safetyBadge" class="status-pill border px-4 py-2 rounded-full text-[10px] font-bold uppercase tracking-widest 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-panel p-8 rounded-3xl shadow-2xl">
-                    <div class="flex justify-between items-center mb-4">
-                        <label class="text-[10px] font-bold uppercase tracking-widest text-slate-500">Entrada de Idea</label>
-                        <div id="charCount" class="text-[10px] text-slate-600 font-mono">0 caracteres</div>
-                    </div>
-                    <textarea id="rawPrompt" oninput="analyzePrompt()" rows="5" 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 mb-4" placeholder="Escribe tu idea aquí..."></textarea>
-                    <div id="analyzerFeedback" class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-6">
-                        <div class="bg-slate-900/80 p-3 rounded-xl border border-slate-800">
-                            <span class="text-[9px] text-slate-500 uppercase block mb-1">Puntuación de Estructura</span>
-                            <div id="scoreBar" class="h-1.5 w-full bg-slate-800 rounded-full overflow-hidden">
-                                <div id="scoreFill" class="h-full bg-indigo-500 w-0 transition-all"></div>
                             </div>
                         </div>
-                        <div class="bg-slate-900/80 p-3 rounded-xl border border-slate-800">
-                            <span class="text-[9px] text-slate-500 uppercase block mb-1">Riesgo de Bloqueo</span>
-                            <span id="riskLevel" class="text-xs font-bold">-</span>
                         </div>
                     </div>
-                    <div class="grid grid-cols-2 md:grid-cols-4 gap-2 mb-8">
-                        <button onclick="updateModel('flux')" id="m-flux" class="m-btn p-3 rounded-xl border border-slate-800 text-[10px] font-bold transition-all bg-indigo-600 border-indigo-500">FLUX.1</button>
-                        <button onclick="updateModel('mj')" id="m-mj" class="m-btn p-3 rounded-xl border border-slate-800 text-[10px] font-bold transition-all">MIDJOURNEY</button>
-                        <button onclick="updateModel('sdxl')" id="m-sdxl" class="m-btn p-3 rounded-xl border border-slate-800 text-[10px] font-bold transition-all">SDXL 1.0</button>
-                        <button onclick="updateModel('dalle')" id="m-dalle" class="m-btn p-3 rounded-xl border border-slate-800 text-[10px] font-bold transition-all">DALL-E 3</button>
                     </div>
-                    <button onclick="generateApex()" class="btn-apex w-full py-4 rounded-2xl text-white font-bold uppercase tracking-widest hover:opacity-90 transition shadow-lg">
-                        <i class="fa-solid fa-microchip mr-2"></i> Procesar y Estructurar
-                    </button>
                 </div>
             </div>
-            <div class="lg:col-span-5 space-y-6">
-                <div class="glass-panel p-6 rounded-3xl border-l-4 border-indigo-500">
-                    <h3 class="text-xs font-bold uppercase text-indigo-400 mb-3">Estructura Jerárquica</h3>
-                    <div id="outPos" class="text-sm text-slate-300 min-h-[80px] leading-relaxed italic">Escribe para procesar...</div>
-                    <button onclick="copyText('outPos')" class="mt-4 text-[10px] font-bold text-slate-500 hover:text-white uppercase tracking-widest"><i class="fa-regular fa-copy mr-1"></i> Copiar</button>
                 </div>
-                <div class="glass-panel p-6 rounded-3xl border-l-4 border-red-500">
-                    <h3 class="text-xs font-bold uppercase text-red-400 mb-3">Prompt Negativo (Anti-Error)</h3>
-                    <div id="outNeg" class="text-[10px] text-red-200/40">Se generará automáticamente...</div>
-                    <button onclick="copyText('outNeg')" class="mt-4 text-[10px] font-bold text-slate-500 hover:text-white uppercase tracking-widest"><i class="fa-regular fa-copy mr-1"></i> Copiar</button>
                 </div>
-                <div class="glass-panel p-6 rounded-3xl bg-indigo-950/20">
-                    <h3 class="text-xs font-bold uppercase text-emerald-400 mb-4">Configuración Optimizada</h3>
-                    <div id="techSpecs" class="grid grid-cols-2 gap-4 text-[11px]">
-                        <div><span class="text-slate-500 block">SAMPLER</span> <span id="s-samp" class="font-bold">-</span></div>
-                        <div><span class="text-slate-500 block">STEPS</span> <span id="s-step" class="font-bold">-</span></div>
-                        <div><span class="text-slate-500 block">CFG SCALE</span> <span id="s-cfg" class="font-bold">-</span></div>
-                        <div><span class="text-slate-500 block">SCHEDULER</span> <span id="s-sched" class="font-bold">-</span></div>
                     </div>
                 </div>
             </div>
@@ -95,84 +159,130 @@
     <script>
         let currentModel = 'flux';
         const engines = {
-            flux: { sampler: 'FlowMatch', cfg: '3.5', steps: '28', sched: 'Simple', neg: 'low quality, blurry, text, watermark, bad anatomy, deformed' },
-            mj: { sampler: 'v6.0 Internal', cfg: '--stylize 250', steps: '50', sched: 'Karras', neg: '--no text, watermark, blurry, low resolution' },
-            sdxl: { sampler: 'DPM++ 2M SDE', cfg: '7.0', steps: '35', sched: 'Karras', neg: 'disfigured, extra limbs, bad hands, lowres, watermark, text' },
-            dalle: { sampler: 'Diffusion', cfg: 'Auto', steps: 'Auto', sched: 'Internal', neg: 'Avoid: watermarks, text, blurry artifacts, low quality' }
         };
-        const redFlags = ['blood', 'kill', 'politics', 'trump', 'biden', 'gore', 'naked', 'war', 'bomb', 'terrorist'];
         function analyzePrompt() {
             const val = document.getElementById('rawPrompt').value.toLowerCase();
-            document.getElementById('charCount').innerText = `${val.length} caracteres`;
-            // 1. Análisis de Riesgo
             let risks = redFlags.filter(word => val.includes(word));
-            const riskEl = document.getElementById('riskLevel');
-            const badge = document.getElementById('safetyBadge');
             if (risks.length > 0) {
-                riskEl.innerText = `ALTO (${risks.join(', ')})`;
-                riskEl.className = 'text-xs font-bold critical';
-                badge.innerText = "Analizador: RIESGO DE BLOQUEO";
-                badge.className = "status-pill border px-4 py-2 rounded-full text-[10px] font-bold uppercase critical bg-red-950/20";
-            } else {
-                riskEl.innerText = 'BAJO (Seguro)';
-                riskEl.className = 'text-xs font-bold optimal';
-                badge.innerText = "Analizador: PROMPT SEGURO";
-                badge.className = "status-pill border px-4 py-2 rounded-full text-[10px] font-bold uppercase optimal bg-green-950/20";
             }
-            // 2. Score de Estructura
-            let score = 0;
-            if (val.length > 20) score += 30;
-            if (val.length > 60) score += 40;
-            if (val.includes(',') || val.includes('.')) score += 30;
-            document.getElementById('scoreFill').style.width = `${score}%`;
-            document.getElementById('scoreFill').className = `h-full transition-all ${score > 70 ? 'bg-green-500' : 'bg-yellow-500'}`;
         }
         function updateModel(m) {
             currentModel = m;
-            document.querySelectorAll('.m-btn').forEach(b => b.classList.remove('bg-indigo-600', 'border-indigo-500'));
-            document.getElementById(`m-${m}`).classList.add('bg-indigo-600', 'border-indigo-500');
         }
         function generateApex() {
-            const raw = document.getElementById('rawPrompt').value;
-            if(!raw) return;
             const config = engines[currentModel];
             let pos = "";
-            // Re-estructuración Jerárquica
-            if(currentModel === 'mj') {
-                pos = `${raw}, cinematic lighting, 8k, shot on 35mm lens --v 6.0 --stylize 250`;
             } else if (currentModel === 'flux') {
-                pos = `[Subject: ${raw}] [Quality: masterpiece, highly detailed] [Style: Photography, crisp textures]`;
             } else if (currentModel === 'dalle') {
-                pos = `A professional cinematic capture of ${raw}. High fidelity, studio lighting, award-winning composition.`;
-            } else {
-                pos = `(masterpiece), (best quality), ${raw}, highly detailed, sharp focus, 8k, uhd`;
             }
             document.getElementById('outPos').innerText = pos;
             document.getElementById('outNeg').innerText = config.neg;
-            // Tech Update
             document.getElementById('s-samp').innerText = config.sampler;
-            document.getElementById('s-step').innerText = config.steps;
             document.getElementById('s-cfg').innerText = config.cfg;
             document.getElementById('s-sched').innerText = config.sched;
         }
         function copyText(id) {
             navigator.clipboard.writeText(document.getElementById(id).innerText);
-            alert("Copiado!");
         }
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Apex Engine v7 - Aether Forge</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=Orbitron:wght@400;700;900&family=Roboto:wght@300;400;700&display=swap');
+        body { font-family: 'Roboto', sans-serif; background-color: #030712; color: #f9fafb; }
+        h1, h2, h3 { font-family: 'Orbitron', sans-serif; }
+        .glass-card { background: rgba(17, 24, 39, 0.7); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.08); }
+        .input-glow:focus { border-color: #8b5cf6; box-shadow: 0 0 15px rgba(139, 92, 246, 0.4); }
+        .model-btn.active { background-color: #8b5cf6; border-color: #c084fc; box-shadow: 0 0 10px rgba(139, 92, 246, 0.5); color: white; }
+        .style-btn.active { background-color: #a855f7; border-color: #c084fc; }
+        .btn-forge { background: linear-gradient(135deg, #8b5cf6 0%, #c084fc 100%); transition: all 0.3s ease; }
+        .btn-forge:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(139, 92, 246, 0.4); }
+        .status-badge { transition: all 0.4s ease; }
     </style>
 </head>
+<body class="p-4 md:p-10">
+    <div class="max-w-8xl mx-auto">
+        <header class="text-center mb-12">
+            <h1 class="text-5xl font-black mb-2 text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-fuchsia-600">AETHER FORGE <span class="text-xl text-slate-500 font-normal">v7.0</span></h1>
+            <p class="text-slate-400 font-light text-lg">Ingeniería de prompts cuántica para resultados sin precedentes.</p>
         </header>
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <div class="lg:col-span-2 space-y-8">
+                <div class="glass-card p-8 rounded-3xl shadow-xl">
+                    <h2 class="text-2xl font-bold mb-6 text-purple-400">1. Idea y Análisis</h2>
+                    <label class="block text-sm font-light text-slate-400 mb-2">Tu Concepto Base (sé creativo, nosotros lo estructuramos)</label>
+                    <textarea id="rawPrompt" oninput="analyzePrompt()" rows="6" class="w-full bg-slate-900 border border-slate-700 rounded-xl p-4 text-white placeholder-slate-600 outline-none input-glow transition mb-4" placeholder="Ej: Un dragón de cristal en una cueva submarina, estilo anime, luces suaves..."></textarea>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div class="bg-slate-900/50 p-4 rounded-xl border border-slate-800 flex justify-between items-center">
+                            <div>
+                                <span class="text-xs text-slate-500 uppercase block">Caracteres</span>
+                                <span id="charCount" class="text-lg font-bold">0</span>
+                            </div>
+                            <div class="w-2/3 h-2 bg-slate-700 rounded-full overflow-hidden">
+                                <div id="promptLengthBar" class="h-full bg-fuchsia-500 transition-all" style="width:0%;"></div>
                             </div>
                         </div>
+                        <div class="bg-slate-900/50 p-4 rounded-xl border border-slate-800 flex justify-between items-center">
+                            <div>
+                                <span class="text-xs text-slate-500 uppercase block">Riesgo de Bloqueo</span>
+                                <span id="riskLevel" class="text-lg font-bold text-green-400">BAJO</span>
+                            </div>
+                            <div id="safetyBadge" class="text-xs font-bold status-badge py-1 px-3 rounded-full bg-green-900/30 text-green-400">SEGURO</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                    <div class="glass-card p-8 rounded-3xl shadow-xl">
+                        <h3 class="text-xl font-bold mb-4 text-fuchsia-400">2. Motor de IA</h3>
+                        <label class="block text-sm font-light text-slate-400 mb-3">Selecciona tu modelo preferido:</label>
+                        <div class="grid grid-cols-2 gap-3">
+                            <button onclick="updateModel('flux')" id="m-flux" class="model-btn p-3 rounded-xl border border-slate-700 text-xs font-bold active">FLUX.1</button>
+                            <button onclick="updateModel('mj')" id="m-mj" class="model-btn p-3 rounded-xl border border-slate-700 text-xs font-bold">MIDJOURNEY</button>
+                            <button onclick="updateModel('sdxl')" id="m-sdxl" class="model-btn p-3 rounded-xl border border-slate-700 text-xs font-bold">SDXL 1.0</button>
+                            <button onclick="updateModel('dalle')" id="m-dalle" class="model-btn p-3 rounded-xl border border-slate-700 text-xs font-bold">DALL-E 3</button>
                         </div>
                     </div>
+                    <div class="glass-card p-8 rounded-3xl shadow-xl">
+                        <h3 class="text-xl font-bold mb-4 text-fuchsia-400">3. Estilo Rápido</h3>
+                        <label class="block text-sm font-light text-slate-400 mb-3">Inyecta un estilo con un clic:</label>
+                        <div class="grid grid-cols-2 gap-3">
+                            <button onclick="applyStyle('photorealistic')" class="style-btn p-3 rounded-xl border border-slate-700 text-xs font-bold">FOTOREALISTA</button>
+                            <button onclick="applyStyle('cinematic')" class="style-btn p-3 rounded-xl border border-slate-700 text-xs font-bold">CINEMÁTICO</button>
+                            <button onclick="applyStyle('anime')" class="style-btn p-3 rounded-xl border border-slate-700 text-xs font-bold">ANIME</button>
+                            <button onclick="applyStyle('oil painting')" class="style-btn p-3 rounded-xl border border-slate-700 text-xs font-bold">PINTURA AL ÓLEO</button>
+                        </div>
                     </div>
+                </div>
+                <div class="glass-card p-8 rounded-3xl shadow-xl">
+                    <h3 class="text-xl font-bold mb-4 text-fuchsia-400">4. Ajustes Finos (Iluminación & Cámara)</h3>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div>
+                            <label class="block text-sm font-light text-slate-400 mb-2">Tipo de Luz</label>
+                            <select id="lightType" onchange="updateLightPrompt()" class="w-full bg-slate-800 border border-slate-700 rounded-xl p-3 text-sm outline-none input-glow transition">
+                                <option value="">Automática</option>
+                                <option value="natural">Natural</option>
+                                <option value="artificial">Artificial</option>
+                                <option value="magical">Mágica/Fantástica</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-light text-slate-400 mb-2">Dirección de Luz</label>
+                            <select id="lightDirection" onchange="updateLightPrompt()" class="w-full bg-slate-800 border border-slate-700 rounded-xl p-3 text-sm outline-none input-glow transition">
+                                <option value="">Estándar</option>
+                                <option value="front-lit">Frontal</option>
+                                <option value="backlight">Contraluz</option>
+                                <option value="side-lit">Lateral</option>
+                                <option value="top-down">Cenital</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-light text-slate-400 mb-2">Tipo de Cámara</label>
+                            <select id="cameraType" class="w-full bg-slate-800 border border-slate-700 rounded-xl p-3 text-sm outline-none input-glow transition">
+                                <option value="professional shot">Cámara profesional</option>
+                                <option value="shot on Fujifilm XT4">Fujifilm XT4</option>
+                                <option value="shot on Sony A7III">Sony A7III</option>
+                                <option value="shot on iPhone 15 Pro">iPhone 15 Pro</option>
+                                <option value="GoPro point of view">GoPro POV</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-light text-slate-400 mb-2">Relación de Aspecto</label>
+                            <select id="ar" class="w-full bg-slate-800 border border-slate-700 rounded-xl p-3 text-sm outline-none input-glow transition">
+                                <option value="16:9">16:9 (Cinemático)</option>
+                                <option value="1:1">1:1 (Cuadrado)</option>
+                                <option value="9:16">9:16 (Vertical)</option>
+                                <option value="21:9">21:9 (Ultra Wide)</option>
+                            </select>
+                        </div>
+                    </div>
                 </div>
+                <button onclick="generateApex()" class="btn-forge w-full py-5 rounded-2xl text-white font-black text-xl uppercase tracking-wider shadow-2xl">
+                    <i class="fa-solid fa-fire text-white mr-3"></i> FORJAR PROMPT APEX
+                </button>
             </div>
+            <div class="lg:col-span-1 space-y-8">
+                <div class="glass-card p-6 rounded-3xl border-l-4 border-purple-500 shadow-lg">
+                    <h3 class="text-lg font-bold text-purple-400 mb-4">Prompt Estructurado</h3>
+                    <div id="outPos" class="text-sm text-slate-300 min-h-[120px] leading-relaxed italic font-light">Tu prompt optimizado aparecerá aquí.</div>
+                    <button onclick="copyText('outPos')" class="mt-4 text-xs font-bold text-slate-500 hover:text-white uppercase tracking-wider"><i class="fa-regular fa-copy mr-1"></i> Copiar</button>
                 </div>
+                <div class="glass-card p-6 rounded-3xl border-l-4 border-red-500 shadow-lg">
+                    <h3 class="text-lg font-bold text-red-400 mb-4">Prompt Negativo (Anti-Error)</h3>
+                    <div id="outNeg" class="text-xs text-red-200/50 min-h-[80px]">Aquí se listarán las exclusiones automáticas.</div>
+                    <button onclick="copyText('outNeg')" class="mt-4 text-xs font-bold text-slate-500 hover:text-white uppercase tracking-wider"><i class="fa-regular fa-copy mr-1"></i> Copiar</button>
                 </div>
+                <div class="glass-card p-6 rounded-3xl bg-indigo-950/20 shadow-lg">
+                    <h3 class="text-lg font-bold text-emerald-400 mb-4">Configuración Técnica</h3>
+                    <div class="grid grid-cols-2 gap-y-3 text-sm">
+                        <div class="text-slate-500">Sampler:</div><div id="s-samp" class="font-bold">N/A</div>
+                        <div class="text-slate-500">CFG Scale:</div><div id="s-cfg" class="font-bold">N/A</div>
+                        <div class="text-slate-500">Steps:</div><div id="s-step" class="font-bold">N/A</div>
+                        <div class="text-slate-500">Scheduler:</div><div id="s-sched" class="font-bold">N/A</div>
                     </div>
                 </div>
             </div>
     <script>
         let currentModel = 'flux';
+        let currentStyle = ''; // Almacena el estilo seleccionado
+        let lightPrompt = ''; // Almacena el prompt de iluminación
         const engines = {
+            flux: { sampler: 'FlowMatch', cfg: '3.5', steps: '28', sched: 'Simple', neg: 'low quality, blurry, distorted text, messy fingers, watermark, low resolution, ugly, oversaturated, deformed' },
+            mj: { sampler: 'v6.0 Internal', cfg: '--stylize 250', steps: '50', sched: 'Karras', neg: '--no text, watermark, blurry, low resolution, distorted limbs, extra elements' },
+            sdxl: { sampler: 'DPM++ 2M SDE', cfg: '7.0', steps: '35', sched: 'Karras', neg: 'deformed, bad anatomy, disfigured, poorly drawn face, mutated, extra limbs, low quality, blurred, grain, text, watermark' },
+            dalle: { sampler: 'Diffusion', cfg: 'Auto', steps: 'Auto', sched: 'Internal', neg: 'Avoid: watermarks, low resolution, text, blurry artifacts, duplicate images' }
         };
+        const redFlags = ['blood', 'kill', 'gore', 'naked', 'explicit', 'violence', 'weapon', 'drug', 'suicide', 'political leader', 'hate speech'];
+        const styles = {
+            photorealistic: 'hyperrealistic, photorealistic, 8k, ultra-detailed, sharp focus, RAW photo',
+            cinematic: 'cinematic still, film grain, dramatic lighting, anamorphic lens, epic composition',
+            anime: 'anime style, vibrant colors, Studio Ghibli inspired, detailed line art, cell shaded',
+            'oil painting': 'oil painting, textured brushstrokes, classical art, masterpiece, heavy impasto'
+        };
         function analyzePrompt() {
             const val = document.getElementById('rawPrompt').value.toLowerCase();
+            document.getElementById('charCount').innerText = val.length;
+            const lengthPercentage = Math.min(100, (val.length / 100) * 100); // 100 chars = 100%
+            document.getElementById('promptLengthBar').style.width = `${lengthPercentage}%`;
             let risks = redFlags.filter(word => val.includes(word));
+            const riskLevelEl = document.getElementById('riskLevel');
+            const safetyBadgeEl = document.getElementById('safetyBadge');
             if (risks.length > 0) {
+                riskLevelEl.innerText = `ALTO (${risks[0]})`;
+                riskLevelEl.className = 'text-lg font-bold text-red-400';
+                safetyBadgeEl.innerText = "RIESGO DE BLOQUEO";
+                safetyBadgeEl.className = "text-xs font-bold status-badge py-1 px-3 rounded-full bg-red-900/30 text-red-400";
+            } else if (val.length > 0 && val.length < 30) {
+                 riskLevelEl.innerText = 'MEDIO (Vago)';
+                 riskLevelEl.className = 'text-lg font-bold text-yellow-400';
+                 safetyBadgeEl.innerText = "PROMPT GENÉRICO";
+                 safetyBadgeEl.className = "text-xs font-bold status-badge py-1 px-3 rounded-full bg-yellow-900/30 text-yellow-400";
+            }
+            else {
+                riskLevelEl.innerText = 'BAJO';
+                riskLevelEl.className = 'text-lg font-bold text-green-400';
+                safetyBadgeEl.innerText = "PROMPT SEGURO";
+                safetyBadgeEl.className = "text-xs font-bold status-badge py-1 px-3 rounded-full bg-green-900/30 text-green-400";
             }
         }
         function updateModel(m) {
             currentModel = m;
+            document.querySelectorAll('.model-btn').forEach(b => b.classList.remove('active'));
+            document.getElementById(`m-${m}`).classList.add('active');
+            updateTechSpecs(); // Actualiza los parámetros técnicos al cambiar de modelo
+        }
+        function applyStyle(styleKey) {
+            currentStyle = styleKey;
+            document.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active'));
+            event.target.classList.add('active');
+        }
+        function updateLightPrompt() {
+            const lightType = document.getElementById('lightType').value;
+            const lightDirection = document.getElementById('lightDirection').value;
+            let parts = [];
+            if (lightType) {
+                parts.push(lightType === 'magical' ? 'magical glowing light' : `${lightType} light`);
+            }
+            if (lightDirection) {
+                parts.push(lightDirection);
+            }
+            lightPrompt = parts.length > 0 ? parts.join(' ') + ' illumination' : '';
         }
         function generateApex() {
+            const raw = document.getElementById('rawPrompt').value.trim();
+            if (!raw) {
+                alert("Por favor, ingresa tu idea principal en el campo de texto.");
+                return;
+            }
             const config = engines[currentModel];
+            const camera = document.getElementById('cameraType').value;
+            const ar = document.getElementById('ar').value;
             let pos = "";
+            let styleText = currentStyle ? styles[currentStyle] : '';
+            let finalLight = lightPrompt ? lightPrompt : 'cinematic lighting'; // Default lighting
+            // Lógica de Re-estructuración Jerárquica
+            if (currentModel === 'mj') {
+                pos = `${raw}, ${styleText ? styleText + ', ' : ''}${finalLight}, ${camera} --ar ${ar} --v 6.0 --q 2`;
             } else if (currentModel === 'flux') {
+                pos = `[Subject: ${raw}] [Aesthetic: ${styleText ? styleText : 'ultra-detailed, sharp focus'}] [Light: ${finalLight}] [Camera: ${camera}] --ar ${ar}`;
             } else if (currentModel === 'dalle') {
+                pos = `A professional, highly detailed, ${styleText ? styleText + ' image, ' : ''} of: ${raw}. Featuring ${finalLight} and captured with a ${camera} perspective. Aspect Ratio: ${ar}.`;
+            } else { // SDXL
+                pos = `(masterpiece:1.3), (best quality), ${raw}, ${styleText ? styleText + ', ' : ''}${finalLight}, ${camera}, 8k, UHD, intricate details`;
             }
             document.getElementById('outPos').innerText = pos;
             document.getElementById('outNeg').innerText = config.neg;
+            updateTechSpecs(); // Asegura que los tech specs se actualicen con el prompt
+        }
+        function updateTechSpecs() {
+            const config = engines[currentModel];
             document.getElementById('s-samp').innerText = config.sampler;
             document.getElementById('s-cfg').innerText = config.cfg;
+            document.getElementById('s-step').innerText = config.steps;
             document.getElementById('s-sched').innerText = config.sched;
         }
         function copyText(id) {
             navigator.clipboard.writeText(document.getElementById(id).innerText);
+            alert("¡Copiado al portapapeles!");
         }
+        // Inicialización
+        updateModel('flux'); // Set default model
+        updateLightPrompt(); // Initialize light prompt
+        analyzePrompt(); // Initial analysis
     </script>
 </body>
 </html>