Hugging Face's logo

Spaces:
tuhbooh
/
FluxStudio
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +290 -19
index.html CHANGED
@@ -1,19 +1,290 @@
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="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>