Hugging Face's logo

Spaces:
XXXMARK
/
anycoder-e1e4a867
Running

App Files Community
XXXMARK commited on
Commit
6a37da6
·
verified ·
1 Parent(s): ac91872

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +642 -19
index.html CHANGED
@@ -1,19 +1,642 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>FLUX KLEIN | Next-Gen Generative Interface</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
9
+ <style>
10
+ :root {
11
+ --neon-cyan: #00f3ff;
12
+ --neon-pink: #ff00aa;
13
+ --neon-purple: #bc13fe;
14
+ --glass-bg: rgba(10, 10, 15, 0.7);
15
+ --glass-border: rgba(255, 255, 255, 0.1);
16
+ }
17
+
18
+ body {
19
+ font-family: 'Inter', sans-serif;
20
+ background-color: #050505;
21
+ color: #e0e0e0;
22
+ overflow: hidden;
23
+ }
24
+
25
+ h1, h2, h3, .brand-font {
26
+ font-family: 'Space Grotesk', sans-serif;
27
+ }
28
+
29
+ /* Custom Scrollbar */
30
+ ::-webkit-scrollbar {
31
+ width: 6px;
32
+ }
33
+ ::-webkit-scrollbar-track {
34
+ background: #0a0a0a;
35
+ }
36
+ ::-webkit-scrollbar-thumb {
37
+ background: #333;
38
+ border-radius: 3px;
39
+ }
40
+ ::-webkit-scrollbar-thumb:hover {
41
+ background: var(--neon-cyan);
42
+ }
43
+
44
+ /* Glassmorphism Utilities */
45
+ .glass-panel {
46
+ background: var(--glass-bg);
47
+ backdrop-filter: blur(12px);
48
+ -webkit-backdrop-filter: blur(12px);
49
+ border: 1px solid var(--glass-border);
50
+ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
51
+ }
52
+
53
+ .glass-input {
54
+ background: rgba(0, 0, 0, 0.4);
55
+ border: 1px solid rgba(255, 255, 255, 0.1);
56
+ transition: all 0.3s ease;
57
+ }
58
+ .glass-input:focus {
59
+ border-color: var(--neon-cyan);
60
+ box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
61
+ outline: none;
62
+ }
63
+
64
+ /* Animations */
65
+ @keyframes pulse-glow {
66
+ 0%, 100% { box-shadow: 0 0 10px rgba(0, 243, 255, 0.2); }
67
+ 50% { box-shadow: 0 0 25px rgba(0, 243, 255, 0.6); }
68
+ }
69
+
70
+ @keyframes scanline {
71
+ 0% { transform: translateY(-100%); }
72
+ 100% { transform: translateY(100%); }
73
+ }
74
+
75
+ .scanline-overlay {
76
+ position: absolute;
77
+ top: 0;
78
+ left: 0;
79
+ width: 100%;
80
+ height: 100%;
81
+ background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.3) 51%);
82
+ background-size: 100% 4px;
83
+ pointer-events: none;
84
+ z-index: 10;
85
+ }
86
+
87
+ .crt-flicker {
88
+ animation: flicker 0.15s infinite;
89
+ }
90
+
91
+ @keyframes flicker {
92
+ 0% { opacity: 0.97; }
93
+ 50% { opacity: 1; }
94
+ 100% { opacity: 0.98; }
95
+ }
96
+
97
+ /* Loader */
98
+ .loader-ring {
99
+ display: inline-block;
100
+ position: relative;
101
+ width: 24px;
102
+ height: 24px;
103
+ }
104
+ .loader-ring div {
105
+ box-sizing: border-box;
106
+ display: block;
107
+ position: absolute;
108
+ width: 20px;
109
+ height: 20px;
110
+ margin: 2px;
111
+ border: 2px solid var(--neon-cyan);
112
+ border-radius: 50%;
113
+ animation: loader-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
114
+ border-color: var(--neon-cyan) transparent transparent transparent;
115
+ }
116
+ .loader-ring div:nth-child(1) { animation-delay: -0.45s; }
117
+ .loader-ring div:nth-child(2) { animation-delay: -0.3s; }
118
+ .loader-ring div:nth-child(3) { animation-delay: -0.15s; }
119
+ @keyframes loader-ring {
120
+ 0% { transform: rotate(0deg); }
121
+ 100% { transform: rotate(360deg); }
122
+ }
123
+
124
+ /* Range Slider Styling */
125
+ input[type=range] {
126
+ -webkit-appearance: none;
127
+ width: 100%;
128
+ background: transparent;
129
+ }
130
+ input[type=range]::-webkit-slider-thumb {
131
+ -webkit-appearance: none;
132
+ height: 16px;
133
+ width: 16px;
134
+ border-radius: 50%;
135
+ background: var(--neon-cyan);
136
+ cursor: pointer;
137
+ margin-top: -6px;
138
+ box-shadow: 0 0 10px var(--neon-cyan);
139
+ }
140
+ input[type=range]::-webkit-slider-runnable-track {
141
+ width: 100%;
142
+ height: 4px;
143
+ cursor: pointer;
144
+ background: #333;
145
+ border-radius: 2px;
146
+ }
147
+
148
+ /* Grid Background */
149
+ .bg-grid {
150
+ background-size: 40px 40px;
151
+ background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
152
+ linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
153
+ mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
154
+ }
155
+
156
+ .layer-active {
157
+ border-color: var(--neon-cyan);
158
+ background: rgba(0, 243, 255, 0.1);
159
+ }
160
+ </style>
161
+ </head>
162
+ <body class="h-screen w-screen flex flex-col text-sm selection:bg-cyan-500 selection:text-black">
163
+
164
+ <!-- Background Canvas for Particles -->
165
+ <canvas id="bgCanvas" class="fixed top-0 left-0 w-full h-full -z-10"></canvas>
166
+ <div class="fixed top-0 left-0 w-full h-full bg-grid -z-10 pointer-events-none"></div>
167
+
168
+ <!-- Header -->
169
+ <header class="h-16 glass-panel border-b border-white/10 flex items-center justify-between px-6 z-20 shrink-0">
170
+ <div class="flex items-center gap-3">
171
+ <div class="w-8 h-8 rounded bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center shadow-[0_0_15px_rgba(0,243,255,0.5)]">
172
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
173
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
174
+ </svg>
175
+ </div>
176
+ <div>
177
+ <h1 class="text-xl font-bold tracking-wider text-white">FLUX <span class="text-cyan-400">KLEIN</span></h1>
178
+ <p class="text-[10px] text-gray-400 uppercase tracking-[0.2em]">Generative Synthesis Core v4.2</p>
179
+ </div>
180
+ </div>
181
+
182
+ <div class="hidden md:flex items-center gap-6">
183
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-xs text-gray-400 hover:text-cyan-400 transition-colors border border-gray-700 px-3 py-1 rounded-full hover:border-cyan-400">
184
+ Built with anycoder
185
+ </a>
186
+ <div class="flex items-center gap-2 text-xs text-gray-400">
187
+ <span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
188
+ SYSTEM ONLINE
189
+ </div>
190
+ </div>
191
+ </header>
192
+
193
+ <!-- Main Workspace -->
194
+ <main class="flex-1 flex overflow-hidden relative z-10">
195
+
196
+ <!-- Left Control Panel -->
197
+ <aside class="w-80 glass-panel border-r border-white/10 flex flex-col overflow-y-auto shrink-0 transition-all duration-300" id="sidebar">
198
+
199
+ <!-- Prompt Section -->
200
+ <div class="p-5 border-b border-white/5">
201
+ <label class="flex justify-between text-xs font-semibold text-cyan-400 mb-2 uppercase tracking-wider">
202
+ <span>Input Prompt</span>
203
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
204
+ </label>
205
+ <textarea id="promptInput" class="w-full h-24 glass-input rounded p-3 text-gray-200 placeholder-gray-600 resize-none focus:ring-1 focus:ring-cyan-500" placeholder="Describe your vision here... (e.g., Cyberpunk city in neon rain)"></textarea>
206
+
207
+ <div class="mt-3 flex gap-2">
208
+ <button onclick="randomizePrompt()" class="flex-1 py-1.5 text-xs border border-white/10 rounded hover:bg-white/5 text-gray-400 transition-colors">Randomize</button>
209
+ <button onclick="clearPrompt()" class="flex-1 py-1.5 text-xs border border-white/10 rounded hover:bg-white/5 text-gray-400 transition-colors">Clear</button>
210
+ </div>
211
+ </div>
212
+
213
+ <!-- Reference Layers -->
214
+ <div class="p-5 border-b border-white/5">
215
+ <label class="text-xs font-semibold text-purple-400 mb-3 uppercase tracking-wider block">Reference Layers</label>
216
+
217
+ <div class="space-y-3">
218
+ <!-- Layer Main -->
219
+ <div class="group relative">
220
+ <div class="flex items-center justify-between mb-1">
221
+ <span class="text-xs text-gray-300">Main Structure</span>
222
+ <span class="text-[10px] text-gray-500" id="main-val">80%</span>
223
+ </div>
224
+ <input type="range" min="0" max="100" value="80" class="w-full" oninput="updateLayer('main', this.value)">
225
+ <div class="h-1 w-full bg-gray-800 rounded mt-1 overflow-hidden">
226
+ <div id="bar-main" class="h-full bg-purple-500 transition-all duration-100" style="width: 80%"></div>
227
+ </div>
228
+ </div>
229
+
230
+ <!-- Layer Aux A -->
231
+ <div class="group relative">
232
+ <div class="flex items-center justify-between mb-1">
233
+ <span class="text-xs text-gray-300">Auxiliary A (Texture)</span>
234
+ <span class="text-[10px] text-gray-500" id="auxa-val">45%</span>
235
+ </div>
236
+ <input type="range" min="0" max="100" value="45" class="w-full" oninput="updateLayer('auxa', this.value)">
237
+ <div class="h-1 w-full bg-gray-800 rounded mt-1 overflow-hidden">
238
+ <div id="bar-auxa" class="h-full bg-pink-500 transition-all duration-100" style="width: 45%"></div>
239
+ </div>
240
+ </div>
241
+
242
+ <!-- Layer Aux B -->
243
+ <div class="group relative">
244
+ <div class="flex items-center justify-between mb-1">
245
+ <span class="text-xs text-gray-300">Auxiliary B (Lighting)</span>
246
+ <span class="text-[10px] text-gray-500" id="auxb-val">60%</span>
247
+ </div>
248
+ <input type="range" min="0" max="100" value="60" class="w-full" oninput="updateLayer('auxb', this.value)">
249
+ <div class="h-1 w-full bg-gray-800 rounded mt-1 overflow-hidden">
250
+ <div id="bar-auxb" class="h-full bg-cyan-500 transition-all duration-100" style="width: 60%"></div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </div>
255
+
256
+ <!-- Advanced Params -->
257
+ <div class="p-5">
258
+ <label class="text-xs font-semibold text-gray-400 mb-3 uppercase tracking-wider block">Synthesis Parameters</label>
259
+ <div class="grid grid-cols-2 gap-3">
260
+ <div>
261
+ <label class="text-[10px] text-gray-500 block mb-1">Seed</label>
262
+ <input type="number" id="seedInput" class="w-full glass-input rounded px-2 py-1 text-xs text-gray-300" value="10294">
263
+ </div>
264
+ <div>
265
+ <label class="text-[10px] text-gray-500 block mb-1">Guidance</label>
266
+ <select class="w-full glass-input rounded px-2 py-1 text-xs text-gray-300 bg-black">
267
+ <option>Standard</option>
268
+ <option>High Fidelity</option>
269
+ <option>Abstract</option>
270
+ </select>
271
+ </div>
272
+ </div>
273
+ </div>
274
+
275
+ <div class="mt-auto p-5">
276
+ <button id="generateBtn" onclick="startGeneration()" class="w-full group relative overflow-hidden rounded bg-gradient-to-r from-cyan-600 to-blue-600 p-3 text-white font-bold tracking-widest uppercase transition-all hover:shadow-[0_0_20px_rgba(0,243,255,0.4)] active:scale-95">
277
+ <span class="relative z-10 flex items-center justify-center gap-2">
278
+ Execute Synthesis
279
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" /></svg>
280
+ </span>
281
+ <div class="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
282
+ </button>
283
+ </div>
284
+ </aside>
285
+
286
+ <!-- Center Canvas Area -->
287
+ <section class="flex-1 relative bg-black/40 flex flex-col">
288
+ <!-- Toolbar -->
289
+ <div class="h-10 border-b border-white/5 flex items-center justify-between px-4 bg-black/20">
290
+ <div class="flex items-center gap-4">
291
+ <span class="text-xs text-gray-500">CANVAS: <span class="text-gray-300">1024x1024</span></span>
292
+ <span class="text-xs text-gray-500">MODE: <span class="text-cyan-400">REALTIME</span></span>
293
+ </div>
294
+ <div class="flex items-center gap-2">
295
+ <button onclick="downloadImage()" class="p-1.5 rounded hover:bg-white/10 text-gray-400 hover:text-white transition-colors" title="Download">
296
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
297
+ </button>
298
+ <button onclick="resetCanvas()" class="p-1.5 rounded hover:bg-white/10 text-gray-400 hover:text-white transition-colors" title="Reset">
299
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
300
+ </button>
301
+ </div>
302
+ </div>
303
+
304
+ <!-- The Canvas -->
305
+ <div class="flex-1 relative flex items-center justify-center p-8 overflow-hidden" id="canvasContainer">
306
+ <div class="relative w-full max-w-3xl aspect-square shadow-2xl border border-white/10 bg-black group">
307
+ <!-- Scanlines -->
308
+ <div class="scanline-overlay opacity-20"></div>
309
+
310
+ <!-- Actual Drawing Canvas -->
311
+ <canvas id="artCanvas" width="1024" height="1024" class="w-full h-full object-contain crt-flicker"></canvas>
312
+
313
+ <!-- Overlay UI -->
314
+ <div id="canvasOverlay" class="absolute inset-0 flex flex-col items-center justify-center bg-black/80 backdrop-blur-sm transition-opacity duration-500 z-20">
315
+ <div class="text-cyan-400 font-mono text-xs mb-2 tracking-widest">READY TO INITIALIZE</div>
316
+ <div class="text-gray-500 text-xs">Awaiting Input Stream...</div>
317
+ </div>
318
+
319
+ <!-- Loading State -->
320
+ <div id="loadingState" class="absolute inset-0 flex flex-col items-center justify-center bg-black/90 z-30 hidden">
321
+ <div class="loader-ring mb-4"><div></div><div></div><div></div><div></div></div>
322
+ <div class="text-cyan-400 font-mono text-xs tracking-widest animate-pulse">SYNTHESIZING NEURAL PATHWAYS...</div>
323
+ <div class="w-64 h-1 bg-gray-800 mt-4 rounded overflow-hidden">
324
+ <div id="progressBar" class="h-full bg-cyan-500 w-0 transition-all duration-100"></div>
325
+ </div>
326
+ <div id="statusText" class="text-[10px] text-gray-500 mt-2 font-mono">Initializing tensors...</div>
327
+ </div>
328
+ </div>
329
+ </div>
330
+ </section>
331
+
332
+ <!-- Right Archives Panel -->
333
+ <aside class="w-64 glass-panel border-l border-white/10 flex flex-col shrink-0 hidden lg:flex">
334
+ <div class="p-4 border-b border-white/10 flex justify-between items-center">
335
+ <h3 class="text-xs font-bold text-gray-300 uppercase tracking-wider">Archives</h3>
336
+ <span class="text-[10px] bg-white/10 px-2 py-0.5 rounded text-gray-400">12 Items</span>
337
+ </div>
338
+
339
+ <div class="flex-1 overflow-y-auto p-3 space-y-3" id="archiveList">
340
+ <!-- Archive Item Template -->
341
+ <div class="group relative aspect-square rounded border border-white/5 bg-black/40 overflow-hidden cursor-pointer hover:border-cyan-500/50 transition-all">
342
+ <img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=400&auto=format&fit=crop" class="w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0">
343
+ <div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black to-transparent p-2">
344
+ <div class="text-[10px] text-white truncate">Neon Genesis</div>
345
+ <div class="text-[9px] text-gray-500">02:14 PM</div>
346
+ </div>
347
+ </div>
348
+ <div class="group relative aspect-square rounded border border-white/5 bg-black/40 overflow-hidden cursor-pointer hover:border-cyan-500/50 transition-all">
349
+ <img src="https://images.unsplash.com/photo-1633167606207-d840b5070fc2?q=80&w=400&auto=format&fit=crop" class="w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0">
350
+ <div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black to-transparent p-2">
351
+ <div class="text-[10px] text-white truncate">Quantum Flux</div>
352
+ <div class="text-[9px] text-gray-500">Yesterday</div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </aside>
357
+
358
+ </main>
359
+
360
+ <script>
361
+ // --- Configuration & State ---
362
+ const canvas = document.getElementById('artCanvas');
363
+ const ctx = canvas.getContext('2d');
364
+ const bgCanvas = document.getElementById('bgCanvas');
365
+ const bgCtx = bgCanvas.getContext('2d');
366
+
367
+ let state = {
368
+ prompt: '',
369
+ layers: {
370
+ main: 80,
371
+ auxa: 45,
372
+ auxb: 60
373
+ },
374
+ seed: 10294,
375
+ isGenerating: false
376
+ };
377
+
378
+ const prompts = [
379
+ "Cybernetic organism in a rain-soaked metropolis",
380
+ "Abstract geometric landscape floating in void",
381
+ "Bioluminescent forest at midnight",
382
+ "Retro-futuristic car speeding through neon tunnel",
383
+ "Crystalline structure reflecting aurora borealis"
384
+ ];
385
+
386
+ // --- Initialization ---
387
+ function resizeCanvases() {
388
+ bgCanvas.width = window.innerWidth;
389
+ bgCanvas.height = window.innerHeight;
390
+ // Art canvas stays fixed logical size but scales via CSS
391
+ }
392
+ window.addEventListener('resize', resizeCanvases);
393
+ resizeCanvases();
394
+
395
+ // --- Particle System for Background ---
396
+ const particles = [];
397
+ class Particle {
398
+ constructor() {
399
+ this.x = Math.random() * bgCanvas.width;
400
+ this.y = Math.random() * bgCanvas.height;
401
+ this.vx = (Math.random() - 0.5) * 0.5;
402
+ this.vy = (Math.random() - 0.5) * 0.5;
403
+ this.size = Math.random() * 2;
404
+ this.color = Math.random() > 0.5 ? 'rgba(0, 243, 255, ' : 'rgba(188, 19, 254, ';
405
+ }
406
+ update() {
407
+ this.x += this.vx;
408
+ this.y += this.vy;
409
+ if (this.x < 0 || this.x > bgCanvas.width) this.vx *= -1;
410
+ if (this.y < 0 || this.y > bgCanvas.height) this.vy *= -1;
411
+ }
412
+ draw() {
413
+ bgCtx.beginPath();
414
+ bgCtx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
415
+ bgCtx.fillStyle = this.color + (Math.random() * 0.5 + 0.1) + ')';
416
+ bgCtx.fill();
417
+ }
418
+ }
419
+
420
+ for (let i = 0; i < 50; i++) particles.push(new Particle());
421
+
422
+ function animateBg() {
423
+ bgCtx.clearRect(0, 0, bgCanvas.width, bgCanvas.height);
424
+ particles.forEach(p => {
425
+ p.update();
426
+ p.draw();
427
+ });
428
+
429
+ // Draw connecting lines
430
+ bgCtx.strokeStyle = 'rgba(255,255,255,0.03)';
431
+ bgCtx.lineWidth = 1;
432
+ for(let i=0; i<particles.length; i++) {
433
+ for(let j=i; j<particles.length; j++) {
434
+ const dx = particles[i].x - particles[j].x;
435
+ const dy = particles[i].y - particles[j].y;
436
+ const dist = Math.sqrt(dx*dx + dy*dy);
437
+ if(dist < 150) {
438
+ bgCtx.beginPath();
439
+ bgCtx.moveTo(particles[i].x, particles[i].y);
440
+ bgCtx.lineTo(particles[j].x, particles[j].y);
441
+ bgCtx.stroke();
442
+ }
443
+ }
444
+ }
445
+ requestAnimationFrame(animateBg);
446
+ }
447
+ animateBg();
448
+
449
+ // --- UI Logic ---
450
+ function randomizePrompt() {
451
+ const r = Math.floor(Math.random() * prompts.length);
452
+ document.getElementById('promptInput').value = prompts[r];
453
+ }
454
+
455
+ function clearPrompt() {
456
+ document.getElementById('promptInput').value = '';
457
+ }
458
+
459
+ function updateLayer(id, val) {
460
+ state.layers[id] = parseInt(val);
461
+ document.getElementById(`${id}-val`).innerText = val + '%';
462
+ document.getElementById(`bar-${id}`).style.width = val + '%';
463
+ }
464
+
465
+ // --- Generative Art Engine (The Core) ---
466
+
467
+ // Seeded Random Number Generator
468
+ function seededRandom(seed) {
469
+ var x = Math.sin(seed++) * 10000;
470
+ return x - Math.floor(x);
471
+ }
472
+
473
+ function generateArt() {
474
+ const width = canvas.width;
475
+ const height = canvas.height;
476
+ const seed = parseInt(document.getElementById('seedInput').value) || 1234;
477
+
478
+ // Clear
479
+ ctx.fillStyle = '#000000';
480
+ ctx.fillRect(0, 0, width, height);
481
+
482
+ // 1. Base Noise / Gradient (Main Layer)
483
+ if (state.layers.main > 0) {
484
+ const opacity = state.layers.main / 100;
485
+ for (let i = 0; i < 400; i++) {
486
+ const x = seededRandom(seed + i) * width;
487
+ const y = seededRandom(seed + i + 1000) * height;
488
+ const r = seededRandom(seed + i + 2000) * (state.layers.main * 3);
489
+
490
+ const hue = seededRandom(seed + i + 3000) * 360;
491
+ ctx.beginPath();
492
+ ctx.arc(x, y, r, 0, Math.PI * 2);
493
+ ctx.fillStyle = `hsla(${hue}, 70%, 50%, ${opacity * 0.05})`;
494
+ ctx.fill();
495
+ }
496
+ }
497
+
498
+ // 2. Geometric Structures (Aux A - Texture)
499
+ if (state.layers.auxa > 0) {
500
+ const count = state.layers.auxa * 2;
501
+ ctx.lineWidth = 2;
502
+ for (let i = 0; i < count; i++) {
503
+ const x = seededRandom(seed + i + 4000) * width;
504
+ const y = seededRandom(seed + i + 5000) * height;
505
+ const s = seededRandom(seed + i + 6000) * 200;
506
+
507
+ ctx.strokeStyle = `rgba(255, 0, 170, ${state.layers.auxa/200})`;
508
+ ctx.beginPath();
509
+ if (seededRandom(seed + i + 7000) > 0.5) {
510
+ ctx.rect(x, y, s, s);
511
+ } else {
512
+ ctx.moveTo(x, y);
513
+ ctx.lineTo(x + s, y + s);
514
+ ctx.lineTo(x - s, y + s);
515
+ ctx.closePath();
516
+ }
517
+ ctx.stroke();
518
+ }
519
+ }
520
+
521
+ // 3. Light Beams / Flow Fields (Aux B - Lighting)
522
+ if (state.layers.auxb > 0) {
523
+ ctx.globalCompositeOperation = 'screen';
524
+ const beams = state.layers.auxb / 2;
525
+ for (let i = 0; i < beams; i++) {
526
+ const x = seededRandom(seed + i + 8000) * width;
527
+ const y = seededRandom(seed + i + 9000) * height;
528
+ const angle = seededRandom(seed + i + 10000) * Math.PI * 2;
529
+ const len = seededRandom(seed + i + 11000) * 500 + 200;
530
+
531
+ const grad = ctx.createLinearGradient(x, y, x + Math.cos(angle)*len, y + Math.sin(angle)*len);
532
+ grad.addColorStop(0, `rgba(0, 243, 255, 0)`);
533
+ grad.addColorStop(0.5, `rgba(0, 243, 255, ${state.layers.auxb/150})`);
534
+ grad.addColorStop(1, `rgba(0, 243, 255, 0)`);
535
+
536
+ ctx.strokeStyle = grad;
537
+ ctx.lineWidth = seededRandom(seed + i + 12000) * 20 + 5;
538
+ ctx.beginPath();
539
+ ctx.moveTo(x, y);
540
+ ctx.lineTo(x + Math.cos(angle)*len, y + Math.sin(angle)*len);
541
+ ctx.stroke();
542
+ }
543
+ ctx.globalCompositeOperation = 'source-over';
544
+ }
545
+
546
+ // 4. Glitch / Digital Artifact Overlay
547
+ if (Math.random() > 0.7) {
548
+ for(let i=0; i<10; i++) {
549
+ const y = Math.random() * height;
550
+ const h = Math.random() * 20 + 2;
551
+ ctx.fillStyle = `rgba(255, 255, 255, ${Math.random() * 0.1})`;
552
+ ctx.fillRect(0, y, width, h);
553
+ }
554
+ }
555
+ }
556
+
557
+ // --- Execution Logic ---
558
+ async function startGeneration() {
559
+ if (state.isGenerating) return;
560
+
561
+ const btn = document.getElementById('generateBtn');
562
+ const overlay = document.getElementById('canvasOverlay');
563
+ const loader = document.getElementById('loadingState');
564
+ const progressBar = document.getElementById('progressBar');
565
+ const statusText = document.getElementById('statusText');
566
+
567
+ // UI Updates
568
+ state.isGenerating = true;
569
+ btn.disabled = true;
570
+ btn.classList.add('opacity-50', 'cursor-not-allowed');
571
+ overlay.style.opacity = '0';
572
+ setTimeout(() => overlay.style.display = 'none', 500);
573
+
574
+ loader.classList.remove('hidden');
575
+
576
+ // Simulation Steps
577
+ const steps = [
578
+ { pct: '10%', msg: 'Parsing semantic tokens...' },
579
+ { pct: '35%', msg: 'Allocating GPU tensors...' },
580
+ { pct: '60%', msg: 'Diffusing latent space...' },
581
+ { pct: '85%', msg: 'Refining edges...' },
582
+ { pct: '100%', msg: 'Finalizing render...' }
583
+ ];
584
+
585
+ for (let step of steps) {
586
+ await new Promise(r => setTimeout(r, 600 + Math.random() * 800));
587
+ progressBar.style.width = step.pct;
588
+ statusText.innerText = step.msg;
589
+ }
590
+
591
+ // Render Actual Image
592
+ generateArt();
593
+ addToArchive();
594
+
595
+ // Cleanup
596
+ await new Promise(r => setTimeout(r, 500));
597
+ loader.classList.add('hidden');
598
+ progressBar.style.width = '0';
599
+
600
+ btn.disabled = false;
601
+ btn.classList.remove('opacity-50', 'cursor-not-allowed');
602
+ state.isGenerating = false;
603
+ }
604
+
605
+ function resetCanvas() {
606
+ ctx.fillStyle = '#000000';
607
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
608
+ document.getElementById('canvasOverlay').style.display = 'flex';
609
+ document.getElementById('canvasOverlay').style.opacity = '1';
610
+ }
611
+
612
+ function downloadImage() {
613
+ const link = document.createElement('a');
614
+ link.download = `flux-klein-gen-${Date.now()}.png`;
615
+ link.href = canvas.toDataURL();
616
+ link.click();
617
+ }
618
+
619
+ function addToArchive() {
620
+ const list = document.getElementById('archiveList');
621
+ const dataUrl = canvas.toDataURL();
622
+ const promptText = document.getElementById('promptInput').value || "Untitled Generation";
623
+
624
+ const div = document.createElement('div');
625
+ div.className = "group relative aspect-square rounded border border-white/5 bg-black/40 overflow-hidden cursor-pointer hover:border-cyan-500/50 transition-all animate-[pulse-glow_0.5s_ease-out]";
626
+ div.innerHTML = `
627
+ <img src="${dataUrl}" class="w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0">
628
+ <div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black to-transparent p-2">
629
+ <div class="text-[10px] text-white truncate">${promptText.substring(0, 15)}...</div>
630
+ <div class="text-[9px] text-gray-500">Just now</div>
631
+ </div>
632
+ `;
633
+
634
+ list.insertBefore(div, list.firstChild);
635
+ }
636
+
637
+ // Initial random prompt
638
+ randomizePrompt();
639
+
640
+ </script>
641
+ </body>
642
+ </html>