Hugging Face's logo

Spaces:
Javijavigon
/
ApexEngine
Running

App Files Community
Javijavigon commited on
Commit
f0e2690
路
verified 路
1 Parent(s): d061e1e

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +178 -19
index.html CHANGED
@@ -1,19 +1,178 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Apex Engine v6 - Guardian Edition</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&display=swap');
11
+ body { font-family: 'Space Grotesk', sans-serif; background-color: #030712; color: #f1f5f9; }
12
+ .glass-panel { background: rgba(17, 24, 39, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05); }
13
+ .status-pill { transition: all 0.4s ease; }
14
+ .critical { color: #f87171; border-color: #ef4444; }
15
+ .optimal { color: #4ade80; border-color: #22c55e; }
16
+ .warning { color: #fbbf24; border-color: #f59e0b; }
17
+ .btn-apex { background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%); }
18
+ </style>
19
+ </head>
20
+ <body class="p-4 md:p-8">
21
+
22
+ <div class="max-w-7xl mx-auto">
23
+ <header class="mb-10 flex flex-col md:flex-row justify-between items-center gap-4">
24
+ <div>
25
+ <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>
26
+ <p class="text-slate-500 text-sm">Analizador de seguridad y estructurador jer谩rquico</p>
27
+ </div>
28
+ <div id="safetyBadge" class="status-pill border px-4 py-2 rounded-full text-[10px] font-bold uppercase tracking-widest bg-slate-900/50">
29
+ Analizador: Esperando...
30
+ </div>
31
+ </header>
32
+
33
+ <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
34
+
35
+ <div class="lg:col-span-7 space-y-6">
36
+ <div class="glass-panel p-8 rounded-3xl shadow-2xl">
37
+ <div class="flex justify-between items-center mb-4">
38
+ <label class="text-[10px] font-bold uppercase tracking-widest text-slate-500">Entrada de Idea</label>
39
+ <div id="charCount" class="text-[10px] text-slate-600 font-mono">0 caracteres</div>
40
+ </div>
41
+
42
+ <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>
43
+
44
+ <div id="analyzerFeedback" class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-6">
45
+ <div class="bg-slate-900/80 p-3 rounded-xl border border-slate-800">
46
+ <span class="text-[9px] text-slate-500 uppercase block mb-1">Puntuaci贸n de Estructura</span>
47
+ <div id="scoreBar" class="h-1.5 w-full bg-slate-800 rounded-full overflow-hidden">
48
+ <div id="scoreFill" class="h-full bg-indigo-500 w-0 transition-all"></div>
49
+ </div>
50
+ </div>
51
+ <div class="bg-slate-900/80 p-3 rounded-xl border border-slate-800">
52
+ <span class="text-[9px] text-slate-500 uppercase block mb-1">Riesgo de Bloqueo</span>
53
+ <span id="riskLevel" class="text-xs font-bold">-</span>
54
+ </div>
55
+ </div>
56
+
57
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-2 mb-8">
58
+ <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>
59
+ <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>
60
+ <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>
61
+ <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>
62
+ </div>
63
+
64
+ <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">
65
+ <i class="fa-solid fa-microchip mr-2"></i> Procesar y Estructurar
66
+ </button>
67
+ </div>
68
+ </div>
69
+
70
+ <div class="lg:col-span-5 space-y-6">
71
+ <div class="glass-panel p-6 rounded-3xl border-l-4 border-indigo-500">
72
+ <h3 class="text-xs font-bold uppercase text-indigo-400 mb-3">Estructura Jer谩rquica</h3>
73
+ <div id="outPos" class="text-sm text-slate-300 min-h-[80px] leading-relaxed italic">Escribe para procesar...</div>
74
+ <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>
75
+ </div>
76
+
77
+ <div class="glass-panel p-6 rounded-3xl border-l-4 border-red-500">
78
+ <h3 class="text-xs font-bold uppercase text-red-400 mb-3">Prompt Negativo (Anti-Error)</h3>
79
+ <div id="outNeg" class="text-[10px] text-red-200/40">Se generar谩 autom谩ticamente...</div>
80
+ <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>
81
+ </div>
82
+
83
+ <div class="glass-panel p-6 rounded-3xl bg-indigo-950/20">
84
+ <h3 class="text-xs font-bold uppercase text-emerald-400 mb-4">Configuraci贸n Optimizada</h3>
85
+ <div id="techSpecs" class="grid grid-cols-2 gap-4 text-[11px]">
86
+ <div><span class="text-slate-500 block">SAMPLER</span> <span id="s-samp" class="font-bold">-</span></div>
87
+ <div><span class="text-slate-500 block">STEPS</span> <span id="s-step" class="font-bold">-</span></div>
88
+ <div><span class="text-slate-500 block">CFG SCALE</span> <span id="s-cfg" class="font-bold">-</span></div>
89
+ <div><span class="text-slate-500 block">SCHEDULER</span> <span id="s-sched" class="font-bold">-</span></div>
90
+ </div>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </div>
95
+
96
+ <script>
97
+ let currentModel = 'flux';
98
+ const engines = {
99
+ flux: { sampler: 'FlowMatch', cfg: '3.5', steps: '28', sched: 'Simple', neg: 'low quality, blurry, text, watermark, bad anatomy, deformed' },
100
+ mj: { sampler: 'v6.0 Internal', cfg: '--stylize 250', steps: '50', sched: 'Karras', neg: '--no text, watermark, blurry, low resolution' },
101
+ sdxl: { sampler: 'DPM++ 2M SDE', cfg: '7.0', steps: '35', sched: 'Karras', neg: 'disfigured, extra limbs, bad hands, lowres, watermark, text' },
102
+ dalle: { sampler: 'Diffusion', cfg: 'Auto', steps: 'Auto', sched: 'Internal', neg: 'Avoid: watermarks, text, blurry artifacts, low quality' }
103
+ };
104
+
105
+ const redFlags = ['blood', 'kill', 'politics', 'trump', 'biden', 'gore', 'naked', 'war', 'bomb', 'terrorist'];
106
+
107
+ function analyzePrompt() {
108
+ const val = document.getElementById('rawPrompt').value.toLowerCase();
109
+ document.getElementById('charCount').innerText = `${val.length} caracteres`;
110
+
111
+ // 1. An谩lisis de Riesgo
112
+ let risks = redFlags.filter(word => val.includes(word));
113
+ const riskEl = document.getElementById('riskLevel');
114
+ const badge = document.getElementById('safetyBadge');
115
+
116
+ if (risks.length > 0) {
117
+ riskEl.innerText = `ALTO (${risks.join(', ')})`;
118
+ riskEl.className = 'text-xs font-bold critical';
119
+ badge.innerText = "Analizador: RIESGO DE BLOQUEO";
120
+ badge.className = "status-pill border px-4 py-2 rounded-full text-[10px] font-bold uppercase critical bg-red-950/20";
121
+ } else {
122
+ riskEl.innerText = 'BAJO (Seguro)';
123
+ riskEl.className = 'text-xs font-bold optimal';
124
+ badge.innerText = "Analizador: PROMPT SEGURO";
125
+ badge.className = "status-pill border px-4 py-2 rounded-full text-[10px] font-bold uppercase optimal bg-green-950/20";
126
+ }
127
+
128
+ // 2. Score de Estructura
129
+ let score = 0;
130
+ if (val.length > 20) score += 30;
131
+ if (val.length > 60) score += 40;
132
+ if (val.includes(',') || val.includes('.')) score += 30;
133
+
134
+ document.getElementById('scoreFill').style.width = `${score}%`;
135
+ document.getElementById('scoreFill').className = `h-full transition-all ${score > 70 ? 'bg-green-500' : 'bg-yellow-500'}`;
136
+ }
137
+
138
+ function updateModel(m) {
139
+ currentModel = m;
140
+ document.querySelectorAll('.m-btn').forEach(b => b.classList.remove('bg-indigo-600', 'border-indigo-500'));
141
+ document.getElementById(`m-${m}`).classList.add('bg-indigo-600', 'border-indigo-500');
142
+ }
143
+
144
+ function generateApex() {
145
+ const raw = document.getElementById('rawPrompt').value;
146
+ if(!raw) return;
147
+
148
+ const config = engines[currentModel];
149
+ let pos = "";
150
+
151
+ // Re-estructuraci贸n Jer谩rquica
152
+ if(currentModel === 'mj') {
153
+ pos = `${raw}, cinematic lighting, 8k, shot on 35mm lens --v 6.0 --stylize 250`;
154
+ } else if (currentModel === 'flux') {
155
+ pos = `[Subject: ${raw}] [Quality: masterpiece, highly detailed] [Style: Photography, crisp textures]`;
156
+ } else if (currentModel === 'dalle') {
157
+ pos = `A professional cinematic capture of ${raw}. High fidelity, studio lighting, award-winning composition.`;
158
+ } else {
159
+ pos = `(masterpiece), (best quality), ${raw}, highly detailed, sharp focus, 8k, uhd`;
160
+ }
161
+
162
+ document.getElementById('outPos').innerText = pos;
163
+ document.getElementById('outNeg').innerText = config.neg;
164
+
165
+ // Tech Update
166
+ document.getElementById('s-samp').innerText = config.sampler;
167
+ document.getElementById('s-step').innerText = config.steps;
168
+ document.getElementById('s-cfg').innerText = config.cfg;
169
+ document.getElementById('s-sched').innerText = config.sched;
170
+ }
171
+
172
+ function copyText(id) {
173
+ navigator.clipboard.writeText(document.getElementById(id).innerText);
174
+ alert("Copiado!");
175
+ }
176
+ </script>
177
+ </body>
178
+ </html>