Hugging Face's logo

Spaces:
tuhbooh
/
FluxStudio
Running

App Files Community
tuhbooh commited on
Commit
b5d6d49
·
verified ·
1 Parent(s): 9819fa6

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +148 -182
index.html CHANGED
@@ -1,290 +1,256 @@
1
  <!DOCTYPE html>
2
- <html lang="vi">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Core-X | Flux Vision AI</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
9
  <style>
10
- @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;800&family=JetBrains+Mono&display=swap');
11
 
12
  :root {
13
- --primary: #10b981;
14
- --bg: #030303;
 
15
  }
16
 
17
  body {
18
- font-family: 'Plus Jakarta Sans', sans-serif;
19
  background-color: var(--bg);
20
- color: #fff;
21
- overflow-x: hidden;
22
  }
23
 
24
- .glass {
25
- background: rgba(255, 255, 255, 0.03);
26
- backdrop-filter: blur(12px);
27
- border: 1px solid rgba(255, 255, 255, 0.08);
28
  }
29
 
30
  #verification-overlay {
31
  position: fixed; inset: 0; background: #000; z-index: 9999;
32
  display: flex; flex-direction: column; align-items: center; justify-content: center;
33
- transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
34
  }
35
 
36
- .flux-text {
37
- background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
38
- -webkit-background-clip: text;
39
- -webkit-text-fill-color: transparent;
40
  }
41
 
42
- .btn-generate {
43
- background: linear-gradient(135deg, #10b981 0%, #059669 100%);
44
- transition: all 0.3s ease;
45
  }
46
 
47
- .btn-generate:hover {
48
- transform: translateY(-2px);
49
- box-shadow: 0 10px 20px -5px rgba(16, 185, 129, 0.4);
50
- }
51
-
52
- .image-card {
53
- transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
54
  }
55
 
56
  .loader {
57
- width: 24px; height: 24px; border: 2px solid #FFF; border-bottom-color: transparent;
58
- border-radius: 50%; display: inline-block; animation: rotation 1s linear infinite;
59
  }
60
  @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
61
 
62
- /* Custom Scrollbar */
63
- ::-webkit-scrollbar { width: 6px; }
64
- ::-webkit-scrollbar-track { background: transparent; }
65
- ::-webkit-scrollbar-thumb { background: #222; border-radius: 10px; }
 
 
 
 
 
 
66
  </style>
67
  </head>
68
  <body class="min-h-screen">
69
 
70
  <!-- Cloudflare Gate -->
71
  <div id="verification-overlay">
72
- <div class="text-center mb-8">
73
- <h1 class="text-5xl font-extrabold tracking-tighter mb-3 flux-text">FLUX VISION</h1>
74
- <p class="text-gray-500 font-mono text-xs tracking-[0.5em]">CORE-X SECURE IMAGE ENGINE</p>
75
  </div>
76
  <div class="cf-turnstile" data-sitekey="1x00000000000000000000AA" data-callback="onVerified"></div>
77
  </div>
78
 
79
- <!-- Header -->
80
- <header class="p-6 flex justify-between items-center sticky top-0 z-40 bg-black/50 backdrop-blur-xl border-b border-white/5">
81
- <div class="flex items-center gap-3">
82
- <div class="w-3 h-3 bg-emerald-500 rounded-full animate-pulse shadow-[0_0_10px_#10b981]"></div>
83
- <span class="font-bold tracking-tight text-xl">Core-X <span class="text-emerald-500">Flux</span></span>
 
84
  </div>
85
  <div class="flex items-center gap-4">
86
- <span class="hidden md:block text-[10px] font-mono text-gray-500 tracking-widest uppercase">Encryption: AES-256 Active</span>
87
- <div class="w-10 h-10 rounded-full glass flex items-center justify-center">
88
- <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707m12.728 0l-.707-.707M6.343 6.343l-.707-.707M12 8a4 4 0 100 8 4 4 0 000-8z"></path></svg>
89
- </div>
90
  </div>
91
- </header>
92
 
93
- <main class="max-w-6xl mx-auto p-6 grid grid-cols-1 lg:grid-cols-12 gap-8">
94
- <!-- Control Panel -->
95
- <div class="lg:col-span-4 space-y-6">
96
- <div class="glass p-6 rounded-3xl sticky top-24">
97
- <h2 class="text-sm font-bold uppercase tracking-widest text-emerald-500 mb-6 flex items-center gap-2">
98
- <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
99
- Image Studio
100
- </h2>
 
101
 
102
  <div class="space-y-4">
103
  <div>
104
- <label class="text-[10px] font-bold text-gray-400 uppercase mb-2 block">Prompt Description</label>
105
- <textarea id="prompt" rows="4" placeholder="Ví dụ: Một phi hành gia phong cách Cyberpunk, ánh sáng neon cực đẹp..."
106
- class="w-full bg-white/5 border border-white/10 rounded-2xl p-4 text-sm focus:outline-none focus:border-emerald-500/50 resize-none transition-all"></textarea>
 
 
 
107
  </div>
108
 
109
- <div class="grid grid-cols-2 gap-3">
110
- <div>
111
- <label class="text-[10px] font-bold text-gray-400 uppercase mb-2 block">Aspect Ratio</label>
112
- <select id="ratio" class="w-full bg-white/5 border border-white/10 rounded-xl p-3 text-xs focus:outline-none">
113
- <option value="1024x1024">Square (1:1)</option>
114
- <option value="1024x1792">Portrait (9:16)</option>
115
- <option value="1792x1024">Landscape (16:9)</option>
116
- </select>
117
- </div>
118
- <div>
119
- <label class="text-[10px] font-bold text-gray-400 uppercase mb-2 block">Art Style</label>
120
- <select id="style" class="w-full bg-white/5 border border-white/10 rounded-xl p-3 text-xs focus:outline-none">
121
- <option value="">None (Standard)</option>
122
- <option value="cinematic, highly detailed, 8k">Cinematic</option>
123
- <option value="anime style, vibrant colors">Anime</option>
124
- <option value="oil painting style, rich texture">Oil Painting</option>
125
- <option value="3d render, unreal engine 5, octane render">3D Render</option>
126
- </select>
127
- </div>
128
  </div>
129
-
130
- <button id="btn-generate" disabled class="w-full btn-generate py-4 rounded-2xl font-bold text-sm flex items-center justify-center gap-3 opacity-50 cursor-not-allowed">
131
- <span id="btn-text">GENERATE IMAGE</span>
132
- <div id="btn-loader" class="hidden"><span class="loader"></span></div>
133
- </button>
134
  </div>
135
 
136
- <div class="mt-8 pt-6 border-t border-white/5">
137
- <div class="flex items-center justify-between text-[10px] text-gray-500 font-mono">
138
- <span>ENGINE: FLUX-REALISM</span>
139
- <span>API: POLLINATIONS</span>
140
- </div>
141
- </div>
 
 
 
 
 
 
142
  </div>
143
  </div>
144
 
145
- <!-- Result/Gallery -->
146
- <div class="lg:col-span-8 space-y-6">
147
- <div id="output-canvas" class="min-h-[400px] flex items-center justify-center glass rounded-[40px] overflow-hidden relative group">
148
- <div id="placeholder" class="text-center p-12">
149
- <div class="w-20 h-20 mx-auto bg-emerald-500/10 rounded-full flex items-center justify-center mb-4">
150
- <svg width="32" height="32" fill="none" stroke="#10b981" stroke-width="1.5" viewBox="0 0 24 24"><path 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"></path></svg>
151
- </div>
152
- <p class="text-gray-400 text-sm italic">Mô tả ý tưởng của Minh Đức và nhấn Generate...</p>
153
  </div>
154
- <img id="result-img" class="hidden w-full h-full object-contain animate-in fade-in duration-700">
155
 
156
- <!-- Action Tools -->
157
- <div id="action-tools" class="hidden absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-3 glass p-2 rounded-2xl shadow-2xl scale-90 group-hover:scale-100 transition-all opacity-0 group-hover:opacity-100">
158
- <button onclick="downloadImage()" class="p-3 hover:bg-white/10 rounded-xl transition-colors" title="Download">
159
- <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
 
 
160
  </button>
161
- <button onclick="copyToClipboard()" class="p-3 hover:bg-white/10 rounded-xl transition-colors" title="Copy Link">
162
- <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
163
  </button>
164
  </div>
165
  </div>
166
 
167
- <!-- History -->
168
- <div>
169
- <h3 class="text-xs font-bold uppercase tracking-widest text-gray-500 mb-4 flex items-center gap-2">
170
- <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
171
- Recent Creations
172
- </h3>
173
- <div id="gallery" class="grid grid-cols-2 sm:grid-cols-4 gap-4">
174
- <!-- Cards will appear here -->
175
  </div>
176
  </div>
177
  </div>
178
  </main>
179
 
180
  <script>
181
- const btnGen = document.getElementById('btn-generate');
182
- const btnText = document.getElementById('btn-text');
183
- const btnLoader = document.getElementById('btn-loader');
184
- const promptInput = document.getElementById('prompt');
185
  const resultImg = document.getElementById('result-img');
186
  const placeholder = document.getElementById('placeholder');
187
- const actionTools = document.getElementById('action-tools');
188
- const gallery = document.getElementById('gallery');
189
- const ratioSelect = document.getElementById('ratio');
190
- const styleSelect = document.getElementById('style');
191
-
192
- let isVerified = false;
193
 
194
  function onVerified() {
195
- isVerified = true;
196
  const overlay = document.getElementById('verification-overlay');
197
  overlay.style.opacity = '0';
198
  setTimeout(() => {
199
  overlay.style.display = 'none';
200
- btnGen.disabled = false;
201
- btnGen.classList.remove('opacity-50', 'cursor-not-allowed');
202
- }, 800);
 
203
  }
204
 
205
- async function generate() {
206
- const prompt = promptInput.value.trim();
207
- if (!prompt) return;
208
 
209
- // UI Loading
210
- btnGen.disabled = true;
211
- btnText.classList.add('hidden');
212
- btnLoader.classList.remove('hidden');
213
- resultImg.classList.add('opacity-40');
214
-
215
- const seed = Math.floor(Math.random() * 9999999);
216
- const ratio = ratioSelect.value.split('x');
217
- const style = styleSelect.value;
218
- const finalPrompt = style ? `${prompt}, ${style}` : prompt;
219
 
220
- const imageUrl = `https://image.pollinations.ai/prompt/${encodeURIComponent(finalPrompt)}?seed=${seed}&width=${ratio[0]}&height=${ratio[1]}&nologo=true&model=flux`;
221
 
222
- // Pre-load image
223
  const img = new Image();
224
  img.onload = () => {
225
- resultImg.src = imageUrl;
226
- resultImg.classList.remove('hidden', 'opacity-40');
227
  placeholder.classList.add('hidden');
228
- actionTools.classList.remove('hidden');
229
 
230
- addToGallery(imageUrl, prompt);
231
 
232
- // Reset UI
233
- btnGen.disabled = false;
234
- btnText.classList.remove('hidden');
235
- btnLoader.classList.add('hidden');
236
- };
237
- img.onerror = () => {
238
- alert("Lỗi server tạo ảnh, Minh Đức vui lòng thử lại!");
239
- btnGen.disabled = false;
240
- btnText.classList.remove('hidden');
241
- btnLoader.classList.add('hidden');
242
  };
243
- img.src = imageUrl;
244
  }
245
 
246
- function addToGallery(url, title) {
247
  const div = document.createElement('div');
248
- div.className = "image-card group relative aspect-square glass rounded-2xl overflow-hidden cursor-pointer active:scale-95 transition-all";
249
- div.innerHTML = `
250
- <img src="${url}" class="w-full h-full object-cover">
251
- <div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-end p-3">
252
- <p class="text-[9px] text-white truncate font-medium">${title}</p>
253
- </div>
254
- `;
255
  div.onclick = () => {
256
  resultImg.src = url;
257
  resultImg.classList.remove('hidden');
258
  placeholder.classList.add('hidden');
 
259
  };
260
- gallery.prepend(div);
261
  }
262
 
263
- function downloadImage() {
264
- const url = resultImg.src;
265
  const link = document.createElement('a');
266
- link.href = url;
267
- link.download = `CoreX_Flux_${Date.now()}.png`;
268
- document.body.appendChild(link);
269
  link.click();
270
- document.body.removeChild(link);
271
  }
272
 
273
- function copyToClipboard() {
274
- const text = resultImg.src;
275
- const dummy = document.createElement("input");
276
- document.body.appendChild(dummy);
277
- dummy.value = text;
278
- dummy.select();
279
- document.execCommand("copy");
280
- document.body.removeChild(dummy);
281
- alert("Đã sao chép link ảnh!");
282
  }
283
 
284
- btnGen.onclick = generate;
285
- promptInput.onkeydown = (e) => {
286
- if (e.key === 'Enter' && e.ctrlKey) generate();
287
- }
288
  </script>
289
  </body>
290
  </html>
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Flux Pro | Image Generation</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
9
  <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono&display=swap');
11
 
12
  :root {
13
+ --bg: #0a0a0a;
14
+ --accent: #ffffff;
15
+ --border: rgba(255, 255, 255, 0.1);
16
  }
17
 
18
  body {
19
+ font-family: 'Inter', sans-serif;
20
  background-color: var(--bg);
21
+ color: #ececec;
22
+ letter-spacing: -0.01em;
23
  }
24
 
25
+ .panel {
26
+ background: #111111;
27
+ border: 1px solid var(--border);
 
28
  }
29
 
30
  #verification-overlay {
31
  position: fixed; inset: 0; background: #000; z-index: 9999;
32
  display: flex; flex-direction: column; align-items: center; justify-content: center;
33
+ transition: opacity 0.5s ease;
34
  }
35
 
36
+ .btn-primary {
37
+ background: #ffffff;
38
+ color: #000000;
39
+ transition: all 0.2s ease;
40
  }
41
 
42
+ .btn-primary:hover:not(:disabled) {
43
+ background: #e5e5e5;
44
+ transform: translateY(-1px);
45
  }
46
 
47
+ .btn-primary:active:not(:disabled) {
48
+ transform: translateY(0);
 
 
 
 
 
49
  }
50
 
51
  .loader {
52
+ width: 18px; height: 18px; border: 2px solid #000; border-bottom-color: transparent;
53
+ border-radius: 50%; display: inline-block; animation: rotation 0.8s linear infinite;
54
  }
55
  @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
56
 
57
+ select, textarea, input {
58
+ background: #1a1a1a !important;
59
+ border: 1px solid var(--border) !important;
60
+ color: white !important;
61
+ }
62
+
63
+ select:focus, textarea:focus {
64
+ border-color: rgba(255,255,255,0.3) !important;
65
+ outline: none;
66
+ }
67
  </style>
68
  </head>
69
  <body class="min-h-screen">
70
 
71
  <!-- Cloudflare Gate -->
72
  <div id="verification-overlay">
73
+ <div class="mb-8 text-center">
74
+ <h1 class="text-2xl font-bold tracking-tight mb-1">FLUX PRO</h1>
75
+ <p class="text-zinc-500 text-[10px] font-mono uppercase tracking-widest">System Authentication Required</p>
76
  </div>
77
  <div class="cf-turnstile" data-sitekey="1x00000000000000000000AA" data-callback="onVerified"></div>
78
  </div>
79
 
80
+ <!-- Nav -->
81
+ <nav class="border-b border-white/5 h-16 flex items-center px-6 justify-between bg-black/50 backdrop-blur-md sticky top-0 z-40">
82
+ <div class="flex items-center gap-6">
83
+ <span class="font-bold text-sm tracking-tighter uppercase">Flux Engine <span class="text-zinc-500 font-medium">v1.0</span></span>
84
+ <div class="h-4 w-[1px] bg-white/10 hidden sm:block"></div>
85
+ <span class="hidden sm:block text-[10px] font-mono text-zinc-500">STATUS: STABLE</span>
86
  </div>
87
  <div class="flex items-center gap-4">
88
+ <div id="connection-dot" class="w-2 h-2 bg-zinc-700 rounded-full"></div>
89
+ <span class="text-[10px] font-mono text-zinc-500 uppercase tracking-wider">Secure Connection</span>
 
 
90
  </div>
91
+ </nav>
92
 
93
+ <main class="max-w-7xl mx-auto p-6 grid grid-cols-1 lg:grid-cols-12 gap-6">
94
+ <!-- Sidebar Controls -->
95
+ <div class="lg:col-span-3 space-y-4">
96
+ <div class="panel p-5 rounded-xl space-y-5">
97
+ <div>
98
+ <label class="text-[10px] font-bold text-zinc-500 uppercase tracking-wider mb-2 block">Prompt</label>
99
+ <textarea id="prompt" rows="5" placeholder="Enter technical description..."
100
+ class="w-full rounded-lg p-3 text-sm resize-none transition-all"></textarea>
101
+ </div>
102
 
103
  <div class="space-y-4">
104
  <div>
105
+ <label class="text-[10px] font-bold text-zinc-500 uppercase tracking-wider mb-2 block">Resolution</label>
106
+ <select id="ratio" class="w-full rounded-lg p-2.5 text-xs">
107
+ <option value="1024x1024">1:1 Square</option>
108
+ <option value="1024x1792">9:16 Portrait</option>
109
+ <option value="1792x1024">16:9 Landscape</option>
110
+ </select>
111
  </div>
112
 
113
+ <div>
114
+ <label class="text-[10px] font-bold text-zinc-500 uppercase tracking-wider mb-2 block">Visual Model</label>
115
+ <select id="model" class="w-full rounded-lg p-2.5 text-xs">
116
+ <option value="flux">Flux.1 Standard</option>
117
+ <option value="flux-realism">Flux Realism</option>
118
+ <option value="flux-pro">Flux High-Res</option>
119
+ </select>
 
 
 
 
 
 
 
 
 
 
 
 
120
  </div>
 
 
 
 
 
121
  </div>
122
 
123
+ <button id="btn-generate" disabled class="w-full btn-primary py-3 rounded-lg font-bold text-xs flex items-center justify-center gap-2 opacity-30 cursor-not-allowed">
124
+ <span id="btn-text">GENERATE</span>
125
+ <div id="btn-loader" class="hidden"><span class="loader"></span></div>
126
+ </button>
127
+ </div>
128
+
129
+ <div class="panel p-4 rounded-xl">
130
+ <p class="text-[9px] text-zinc-600 font-mono leading-relaxed uppercase">
131
+ API Endpoints: pollinations.ai<br>
132
+ License: CreativeML Open RAIL-M<br>
133
+ Hardware: Cloud-Based GPU Cluster
134
+ </p>
135
  </div>
136
  </div>
137
 
138
+ <!-- Main Workspace -->
139
+ <div class="lg:col-span-9 space-y-6">
140
+ <div id="viewport" class="aspect-video lg:aspect-auto lg:h-[600px] panel rounded-2xl flex items-center justify-center relative overflow-hidden group bg-[#050505]">
141
+ <div id="placeholder" class="text-center opacity-20">
142
+ <svg class="mx-auto mb-4" width="40" height="40" fill="none" stroke="currentColor" stroke-width="1" viewBox="0 0 24 24"><path 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"></path></svg>
143
+ <p class="text-xs font-mono uppercase tracking-widest">Waiting for input</p>
 
 
144
  </div>
 
145
 
146
+ <img id="result-img" class="hidden max-w-full max-h-full object-contain">
147
+
148
+ <!-- Overlay Tools -->
149
+ <div id="tools" class="hidden absolute top-4 right-4 flex gap-2">
150
+ <button onclick="downloadImg()" class="p-2 bg-black/60 hover:bg-black border border-white/10 rounded-lg backdrop-blur-md transition-all">
151
+ <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
152
  </button>
153
+ <button onclick="copyLink()" class="p-2 bg-black/60 hover:bg-black border border-white/10 rounded-lg backdrop-blur-md transition-all">
154
+ <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
155
  </button>
156
  </div>
157
  </div>
158
 
159
+ <!-- History Feed -->
160
+ <div class="space-y-3">
161
+ <div class="flex items-center justify-between">
162
+ <h3 class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em]">Session History</h3>
163
+ <button onclick="clearHistory()" class="text-[10px] text-zinc-600 hover:text-red-400 transition-colors uppercase">Clear</button>
164
+ </div>
165
+ <div id="history" class="grid grid-cols-3 sm:grid-cols-6 gap-3">
166
+ <!-- Cards -->
167
  </div>
168
  </div>
169
  </div>
170
  </main>
171
 
172
  <script>
173
+ const btn = document.getElementById('btn-generate');
174
+ const btnTxt = document.getElementById('btn-text');
175
+ const loader = document.getElementById('btn-loader');
176
+ const prompt = document.getElementById('prompt');
177
  const resultImg = document.getElementById('result-img');
178
  const placeholder = document.getElementById('placeholder');
179
+ const tools = document.getElementById('tools');
180
+ const history = document.getElementById('history');
 
 
 
 
181
 
182
  function onVerified() {
 
183
  const overlay = document.getElementById('verification-overlay');
184
  overlay.style.opacity = '0';
185
  setTimeout(() => {
186
  overlay.style.display = 'none';
187
+ btn.disabled = false;
188
+ btn.classList.remove('opacity-30', 'cursor-not-allowed');
189
+ document.getElementById('connection-dot').classList.replace('bg-zinc-700', 'bg-emerald-500');
190
+ }, 500);
191
  }
192
 
193
+ async function process() {
194
+ const text = prompt.value.trim();
195
+ if (!text) return;
196
 
197
+ btn.disabled = true;
198
+ btnTxt.innerText = "PROCESSING";
199
+ loader.classList.remove('hidden');
200
+ resultImg.classList.add('opacity-30');
201
+
202
+ const seed = Math.floor(Math.random() * 10000000);
203
+ const res = document.getElementById('ratio').value.split('x');
204
+ const model = document.getElementById('model').value;
 
 
205
 
206
+ const url = `https://image.pollinations.ai/prompt/${encodeURIComponent(text)}?seed=${seed}&width=${res[0]}&height=${res[1]}&nologo=true&model=${model}`;
207
 
 
208
  const img = new Image();
209
  img.onload = () => {
210
+ resultImg.src = url;
211
+ resultImg.classList.remove('hidden', 'opacity-30');
212
  placeholder.classList.add('hidden');
213
+ tools.classList.remove('hidden');
214
 
215
+ saveToHistory(url);
216
 
217
+ btn.disabled = false;
218
+ btnTxt.innerText = "GENERATE";
219
+ loader.classList.add('hidden');
 
 
 
 
 
 
 
220
  };
221
+ img.src = url;
222
  }
223
 
224
+ function saveToHistory(url) {
225
  const div = document.createElement('div');
226
+ div.className = "aspect-square panel rounded-lg overflow-hidden cursor-pointer hover:border-white/30 transition-all";
227
+ div.innerHTML = `<img src="${url}" class="w-full h-full object-cover">`;
 
 
 
 
 
228
  div.onclick = () => {
229
  resultImg.src = url;
230
  resultImg.classList.remove('hidden');
231
  placeholder.classList.add('hidden');
232
+ tools.classList.remove('hidden');
233
  };
234
+ history.prepend(div);
235
  }
236
 
237
+ function downloadImg() {
 
238
  const link = document.createElement('a');
239
+ link.href = resultImg.src;
240
+ link.download = `output_${Date.now()}.png`;
 
241
  link.click();
 
242
  }
243
 
244
+ function copyLink() {
245
+ navigator.clipboard.writeText(resultImg.src);
246
+ const originalText = btnTxt.innerText;
247
+ btnTxt.innerText = "COPIED";
248
+ setTimeout(() => btnTxt.innerText = originalText, 1000);
 
 
 
 
249
  }
250
 
251
+ function clearHistory() { history.innerHTML = ''; }
252
+
253
+ btn.onclick = process;
 
254
  </script>
255
  </body>
256
  </html>