Hugging Face's logo

Spaces:
SIMCEEHALO
/
less-steep-learning-curve
Running

App Files Community
SIMCEEHALO commited on
Commit
ea54bb7
·
verified ·
1 Parent(s): 56e8378

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +706 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Less Steep Learning Curve
3
- emoji: ⚡
4
- colorFrom: gray
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: less-steep-learning-curve
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,706 @@
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>CPU-Powered ImgGen Hub</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.18.0/dist/tf.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-wasm@3.18.0/dist/tf-backend-wasm.min.js"></script>
11
+ <style>
12
+ .model-card {
13
+ transition: all 0.3s ease;
14
+ }
15
+ .model-card:hover {
16
+ transform: translateY(-2px);
17
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
18
+ }
19
+ .tab-content {
20
+ display: none;
21
+ }
22
+ .tab-content.active {
23
+ display: block;
24
+ }
25
+ .tab-button.active {
26
+ border-bottom: 2px solid #8b5cf6;
27
+ color: #8b5cf6;
28
+ }
29
+ .gallery-container {
30
+ display: grid;
31
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
32
+ gap: 1rem;
33
+ }
34
+ .gallery-image {
35
+ max-height: 300px;
36
+ object-fit: contain;
37
+ border-radius: 0.5rem;
38
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
39
+ }
40
+ .loading-spinner {
41
+ animation: spin 1s linear infinite;
42
+ }
43
+ @keyframes spin {
44
+ 0% { transform: rotate(0deg); }
45
+ 100% { transform: rotate(360deg); }
46
+ }
47
+ .accordion-content {
48
+ max-height: 0;
49
+ overflow: hidden;
50
+ transition: max-height 0.3s ease-out;
51
+ }
52
+ .accordion-content.open {
53
+ max-height: 1000px;
54
+ }
55
+ .progress-bar {
56
+ height: 6px;
57
+ background-color: #e5e7eb;
58
+ border-radius: 3px;
59
+ overflow: hidden;
60
+ }
61
+ .progress-bar-fill {
62
+ height: 100%;
63
+ background: linear-gradient(90deg, #ec4899, #8b5cf6);
64
+ transition: width 0.3s ease;
65
+ }
66
+ .performance-meter {
67
+ background: linear-gradient(90deg, #ec4899, #8b5cf6);
68
+ -webkit-background-clip: text;
69
+ background-clip: text;
70
+ color: transparent;
71
+ font-weight: bold;
72
+ }
73
+ </style>
74
+ </head>
75
+ <body class="bg-gray-100 text-gray-800">
76
+ <div class="container mx-auto px-4 py-8 max-w-6xl">
77
+ <!-- Header -->
78
+ <header class="mb-8 text-center">
79
+ <h1 class="text-4xl font-bold bg-gradient-to-r from-pink-500 to-purple-600 bg-clip-text text-transparent">
80
+ CPU-Powered ImgGen Hub
81
+ </h1>
82
+ <p class="mt-2 text-gray-600">Browser-based AI image generation using TensorFlow.js and WebAssembly</p>
83
+ <div class="mt-4 flex justify-center items-center space-x-4">
84
+ <div class="text-center">
85
+ <div class="text-sm text-gray-500">CPU Performance</div>
86
+ <div id="cpu-performance" class="performance-meter text-xl">Initializing...</div>
87
+ </div>
88
+ <div class="text-center">
89
+ <div class="text-sm text-gray-500">TF.js Backend</div>
90
+ <div id="tf-backend" class="performance-meter text-xl">Loading...</div>
91
+ </div>
92
+ </div>
93
+ </header>
94
+
95
+ <!-- Main App Container -->
96
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
97
+ <!-- Tabs Navigation -->
98
+ <div class="flex border-b border-gray-200">
99
+ <button class="tab-button px-4 py-3 font-medium active" data-tab="basic">Basic Settings</button>
100
+ <button class="tab-button px-4 py-3 font-medium" data-tab="advanced">Advanced Settings</button>
101
+ <button class="tab-button px-4 py-3 font-medium" data-tab="editor">Image Editor</button>
102
+ <button class="tab-button px-4 py-3 font-medium" data-tab="info">Information</button>
103
+ </div>
104
+
105
+ <!-- Tab Contents -->
106
+ <div class="p-6">
107
+ <!-- Basic Settings Tab -->
108
+ <div id="basic" class="tab-content active">
109
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
110
+ <!-- Prompt Section -->
111
+ <div class="md:col-span-2">
112
+ <div class="mb-4">
113
+ <label for="prompt" class="block text-sm font-medium text-gray-700 mb-1">Prompt</label>
114
+ <textarea id="prompt" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="Enter a prompt here"></textarea>
115
+ </div>
116
+
117
+ <div class="mb-4">
118
+ <label for="style-preset" class="block text-sm font-medium text-gray-700 mb-1">Style Preset</label>
119
+ <select id="style-preset" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
120
+ <option value="none">None</option>
121
+ <option value="digital-art">Digital Art</option>
122
+ <option value="photographic">Photographic</option>
123
+ <option value="anime">Anime</option>
124
+ <option value="fantasy-art">Fantasy Art</option>
125
+ <option value="3d-model">3D Model</option>
126
+ <option value="pixel-art">Pixel Art</option>
127
+ </select>
128
+ </div>
129
+
130
+ <div class="mb-4">
131
+ <label for="batch-count" class="block text-sm font-medium text-gray-700 mb-1">Number of Images</label>
132
+ <select id="batch-count" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
133
+ <option value="1">1</option>
134
+ <option value="2">2</option>
135
+ <option value="3">3</option>
136
+ <option value="4" selected>4</option>
137
+ </select>
138
+ </div>
139
+ </div>
140
+
141
+ <!-- Model Selection -->
142
+ <div>
143
+ <div class="mb-4">
144
+ <div class="flex justify-between items-center mb-2">
145
+ <label class="block text-sm font-medium text-gray-700">Select Model</label>
146
+ <button id="model-accordion" class="text-sm text-purple-600 hover:text-purple-800">
147
+ <i class="fas fa-chevron-down"></i> Show Models
148
+ </button>
149
+ </div>
150
+
151
+ <div class="mb-3">
152
+ <input type="text" id="model-search" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="Search models...">
153
+ </div>
154
+
155
+ <div id="model-list-container" class="h-96 overflow-y-auto border border-gray-200 rounded-md p-2 hidden">
156
+ <div id="model-list" class="space-y-2">
157
+ <!-- Models will be populated here by JavaScript -->
158
+ </div>
159
+ </div>
160
+
161
+ <div id="selected-model-display" class="p-3 bg-gray-50 rounded-md border border-gray-200">
162
+ <p class="text-sm font-medium">Selected Model:</p>
163
+ <p id="selected-model" class="font-semibold text-purple-600">CPU Diffusion Lite</p>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </div>
169
+
170
+ <!-- Advanced Settings Tab -->
171
+ <div id="advanced" class="tab-content">
172
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
173
+ <div>
174
+ <div class="mb-4">
175
+ <label for="negative-prompt" class="block text-sm font-medium text-gray-700 mb-1">Negative Prompt</label>
176
+ <textarea id="negative-prompt" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="What should not be in the image">(deformed, distorted, disfigured), poorly drawn, bad anatomy, wrong anatomy, extra limb, missing limb, floating limbs, (mutated hands and fingers), disconnected limbs, mutation, mutated, ugly, disgusting, blurry, amputation, misspellings, typos</textarea>
177
+ </div>
178
+
179
+ <div class="mb-4">
180
+ <label for="sampling-method" class="block text-sm font-medium text-gray-700 mb-1">Sampling Method</label>
181
+ <select id="sampling-method" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
182
+ <option value="DPM++ 2M Karras" selected>DPM++ 2M Karras</option>
183
+ <option value="DPM++ SDE Karras">DPM++ SDE Karras</option>
184
+ <option value="Euler">Euler</option>
185
+ <option value="Euler a">Euler a</option>
186
+ </select>
187
+ </div>
188
+ </div>
189
+
190
+ <div>
191
+ <div class="grid grid-cols-2 gap-4 mb-4">
192
+ <div>
193
+ <label for="width" class="block text-sm font-medium text-gray-700 mb-1">Width</label>
194
+ <input type="range" id="width" min="128" max="512" step="64" value="256" class="w-full">
195
+ <div class="flex justify-between text-xs text-gray-500">
196
+ <span>128</span>
197
+ <span id="width-value">256</span>
198
+ <span>512</span>
199
+ </div>
200
+ </div>
201
+
202
+ <div>
203
+ <label for="height" class="block text-sm font-medium text-gray-700 mb-1">Height</label>
204
+ <input type="range" id="height" min="128" max="512" step="64" value="256" class="w-full">
205
+ <div class="flex justify-between text-xs text-gray-500">
206
+ <span>128</span>
207
+ <span id="height-value">256</span>
208
+ <span>512</span>
209
+ </div>
210
+ </div>
211
+ </div>
212
+
213
+ <div class="grid grid-cols-2 gap-4">
214
+ <div>
215
+ <label for="steps" class="block text-sm font-medium text-gray-700 mb-1">Sampling Steps</label>
216
+ <input type="range" id="steps" min="10" max="30" value="15" class="w-full">
217
+ <div class="flex justify-between text-xs text-gray-500">
218
+ <span>10</span>
219
+ <span id="steps-value">15</span>
220
+ <span>30</span>
221
+ </div>
222
+ </div>
223
+
224
+ <div>
225
+ <label for="cfg" class="block text-sm font-medium text-gray-700 mb-1">CFG Scale</label>
226
+ <input type="range" id="cfg" min="5" max="15" value="7" class="w-full">
227
+ <div class="flex justify-between text-xs text-gray-500">
228
+ <span>5</span>
229
+ <span id="cfg-value">7</span>
230
+ <span>15</span>
231
+ </div>
232
+ </div>
233
+ </div>
234
+
235
+ <div class="grid grid-cols-2 gap-4 mt-4">
236
+ <div>
237
+ <label for="seed" class="block text-sm font-medium text-gray-700 mb-1">Seed</label>
238
+ <input type="number" id="seed" min="-1" max="1000000000" value="-1" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
239
+ </div>
240
+
241
+ <div>
242
+ <label for="quality" class="block text-sm font-medium text-gray-700 mb-1">Quality</label>
243
+ <select id="quality" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
244
+ <option value="low">Low (faster)</option>
245
+ <option value="medium" selected>Medium</option>
246
+ <option value="high">High (slower)</option>
247
+ </select>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </div>
253
+
254
+ <!-- Image Editor Tab -->
255
+ <div id="editor" class="tab-content">
256
+ <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 min-h-64 flex items-center justify-center">
257
+ <p class="text-gray-500">Image editor will be displayed here after generation</p>
258
+ </div>
259
+ <div class="mt-4 flex space-x-2">
260
+ <button class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300">Crop</button>
261
+ <button class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300">Adjust</button>
262
+ <button class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300">Filters</button>
263
+ </div>
264
+ </div>
265
+
266
+ <!-- Information Tab -->
267
+ <div id="info" class="tab-content">
268
+ <div class="mb-6">
269
+ <label class="block text-sm font-medium text-gray-700 mb-1">Sample prompt</label>
270
+ <div class="p-3 bg-gray-50 rounded-md border border-gray-200">
271
+ <code>{prompt} | ultra detail, ultra elaboration, ultra quality, perfect.</code>
272
+ </div>
273
+ </div>
274
+
275
+ <div class="mb-6">
276
+ <button id="featured-models-accordion" class="flex items-center justify-between w-full py-2 text-left font-medium text-purple-600 hover:text-purple-800">
277
+ <span>CPU Optimization Tips</span>
278
+ <i class="fas fa-chevron-down"></i>
279
+ </button>
280
+ <div id="featured-models-content" class="accordion-content">
281
+ <div class="mt-2 p-4 bg-gray-50 rounded-md">
282
+ <h3 class="text-lg font-semibold mb-2">For Best Performance:</h3>
283
+ <ul class="list-disc pl-5 space-y-2 text-sm">
284
+ <li>Use smaller image sizes (256x256 or 320x320)</li>
285
+ <li>Keep sampling steps between 10-20</li>
286
+ <li>Close other CPU-intensive applications</li>
287
+ <li>Use Chrome or Edge for best WebAssembly performance</li>
288
+ <li>Lower quality setting for faster generation</li>
289
+ </ul>
290
+
291
+ <h3 class="text-lg font-semibold mt-4 mb-2">Technical Details:</h3>
292
+ <p class="text-sm mb-2">This application uses TensorFlow.js with a WebAssembly backend for CPU-optimized image generation. The models are lightweight versions specifically designed for browser-based inference.</p>
293
+ <p class="text-sm">Generation speed depends on your device's CPU performance. A modern desktop CPU can generate a 256x256 image in about 15-30 seconds.</p>
294
+ </div>
295
+ </div>
296
+ </div>
297
+
298
+ <div>
299
+ <button id="advanced-settings-accordion" class="flex items-center justify-between w-full py-2 text-left font-medium text-purple-600 hover:text-purple-800">
300
+ <span>Advanced Settings Overview</span>
301
+ <i class="fas fa-chevron-down"></i>
302
+ </button>
303
+ <div id="advanced-settings-content" class="accordion-content">
304
+ <div class="mt-2 p-4 bg-gray-50 rounded-md">
305
+ <h3 class="text-lg font-semibold mb-2">Batch Generation</h3>
306
+ <p class="mb-4 text-sm">You can generate multiple images at once (up to 4). Each image will be generated sequentially to avoid overloading your CPU.</p>
307
+
308
+ <h3 class="text-lg font-semibold mb-2">Negative Prompt</h3>
309
+ <p class="mb-4 text-sm">This box is for telling the AI what you don't want in your images. Think of it as a way to avoid certain elements.</p>
310
+
311
+ <h3 class="text-lg font-semibold mb-2">Width & Height</h3>
312
+ <p class="mb-4 text-sm">These sliders allow you to specify the resolution of your image. Larger sizes will take significantly longer to generate.</p>
313
+
314
+ <h3 class="text-lg font-semibold mb-2">Sampling Steps</h3>
315
+ <p class="mb-4 text-sm">Fewer steps will generate images faster but with potentially lower quality. More steps will take longer but may produce better results.</p>
316
+
317
+ <h3 class="text-lg font-semibold mb-2">CFG Scale</h3>
318
+ <p class="mb-4 text-sm">Controls how closely the AI follows your prompt. Higher values make the AI follow your prompt more strictly.</p>
319
+
320
+ <p class="mt-4 text-sm font-medium">Remember, these settings are all about balancing quality with generation time on your CPU.</p>
321
+ </div>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ </div>
326
+
327
+ <!-- Generate Button and Output -->
328
+ <div class="px-6 pb-6">
329
+ <div class="mb-4 hidden" id="generation-progress">
330
+ <div class="flex justify-between text-sm mb-1">
331
+ <span id="progress-status">Initializing model...</span>
332
+ <span id="progress-percent">0%</span>
333
+ </div>
334
+ <div class="progress-bar">
335
+ <div id="progress-bar-fill" class="progress-bar-fill" style="width: 0%"></div>
336
+ </div>
337
+ <div class="text-xs text-gray-500 mt-1" id="time-remaining">Estimated time: calculating...</div>
338
+ </div>
339
+
340
+ <button id="generate-btn" class="w-full py-3 px-4 bg-gradient-to-r from-pink-500 to-purple-600 text-white font-medium rounded-md hover:from-pink-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 flex items-center justify-center">
341
+ <span id="generate-text">Generate Image</span>
342
+ <span id="loading-spinner" class="ml-2 hidden">
343
+ <i class="fas fa-circle-notch loading-spinner"></i>
344
+ </span>
345
+ </button>
346
+
347
+ <div id="error-message" class="mt-4 hidden p-3 bg-red-100 border border-red-400 text-red-700 rounded"></div>
348
+
349
+ <div class="mt-6">
350
+ <div class="flex justify-between items-center mb-2">
351
+ <h3 class="text-lg font-medium text-gray-900">Output</h3>
352
+ <button id="download-all" class="hidden px-3 py-1 bg-gray-200 text-gray-800 rounded-md text-sm hover:bg-gray-300">
353
+ <i class="fas fa-download mr-1"></i> Download All
354
+ </button>
355
+ </div>
356
+ <div id="gallery-container" class="border border-gray-200 rounded-md p-4 min-h-64">
357
+ <div id="placeholder-text" class="flex items-center justify-center h-full text-gray-500">
358
+ <p>Your generated images will appear here</p>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </div>
365
+
366
+ <script>
367
+ // Initialize TensorFlow.js
368
+ async function initializeTFJS() {
369
+ try {
370
+ // Set WebAssembly backend for better CPU performance
371
+ await tf.setBackend('wasm');
372
+ document.getElementById('tf-backend').textContent = 'WebAssembly';
373
+
374
+ // Test CPU performance
375
+ const startTime = performance.now();
376
+ const a = tf.tensor2d([1, 2, 3, 4], [2, 2]);
377
+ const b = tf.tensor2d([5, 6, 7, 8], [2, 2]);
378
+ const result = a.matMul(b);
379
+ await result.data();
380
+ const endTime = performance.now();
381
+
382
+ const opsTime = endTime - startTime;
383
+ let performanceRating;
384
+
385
+ if (opsTime < 10) {
386
+ performanceRating = 'Excellent';
387
+ } else if (opsTime < 30) {
388
+ performanceRating = 'Good';
389
+ } else if (opsTime < 100) {
390
+ performanceRating = 'Average';
391
+ } else {
392
+ performanceRating = 'Slow';
393
+ }
394
+
395
+ document.getElementById('cpu-performance').textContent = performanceRating;
396
+
397
+ // Clean up
398
+ a.dispose();
399
+ b.dispose();
400
+ result.dispose();
401
+
402
+ console.log('TensorFlow.js initialized with WebAssembly backend');
403
+ } catch (error) {
404
+ console.error('Failed to initialize WebAssembly backend:', error);
405
+ // Fallback to CPU backend
406
+ await tf.setBackend('cpu');
407
+ document.getElementById('tf-backend').textContent = 'CPU';
408
+ document.getElementById('cpu-performance').textContent = 'Standard';
409
+ }
410
+ }
411
+
412
+ // Initialize when page loads
413
+ document.addEventListener('DOMContentLoaded', async () => {
414
+ await initializeTFJS();
415
+
416
+ // Load the lightweight model (simulated in this demo)
417
+ setTimeout(() => {
418
+ document.getElementById('progress-status').textContent = 'Model loaded and ready';
419
+ document.getElementById('progress-bar-fill').style.width = '100%';
420
+ document.getElementById('progress-percent').textContent = '100%';
421
+ }, 1000);
422
+ });
423
+
424
+ // Tab functionality
425
+ document.querySelectorAll('.tab-button').forEach(button => {
426
+ button.addEventListener('click', () => {
427
+ // Remove active class from all tabs and buttons
428
+ document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
429
+ document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
430
+
431
+ // Add active class to clicked button and corresponding content
432
+ button.classList.add('active');
433
+ const tabId = button.getAttribute('data-tab');
434
+ document.getElementById(tabId).classList.add('active');
435
+ });
436
+ });
437
+
438
+ // Accordion functionality
439
+ function setupAccordion(buttonId, contentId) {
440
+ const button = document.getElementById(buttonId);
441
+ const content = document.getElementById(contentId);
442
+
443
+ button.addEventListener('click', () => {
444
+ content.classList.toggle('open');
445
+ const icon = button.querySelector('i');
446
+ icon.classList.toggle('fa-chevron-down');
447
+ icon.classList.toggle('fa-chevron-up');
448
+ });
449
+ }
450
+
451
+ setupAccordion('model-accordion', 'model-list-container');
452
+ setupAccordion('featured-models-accordion', 'featured-models-content');
453
+ setupAccordion('advanced-settings-accordion', 'advanced-settings-content');
454
+
455
+ // List of CPU-optimized models
456
+ const cpuModels = [
457
+ "CPU Diffusion Lite",
458
+ "Mini Diffusion 256",
459
+ "Fast CPU Diffusion",
460
+ "Tiny Diffusion",
461
+ "QuickDraw CPU"
462
+ ];
463
+
464
+ // Populate model list
465
+ const modelListContainer = document.getElementById('model-list');
466
+
467
+ function populateModelList(models) {
468
+ modelListContainer.innerHTML = '';
469
+
470
+ models.forEach(model => {
471
+ const modelCard = document.createElement('div');
472
+ modelCard.className = `model-card p-3 rounded-md cursor-pointer bg-green-50 border border-green-200`;
473
+ modelCard.innerHTML = `
474
+ <div class="flex items-center justify-between">
475
+ <span class="font-medium">${model}</span>
476
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">CPU Optimized</span>
477
+ </div>
478
+ `;
479
+
480
+ modelCard.addEventListener('click', () => {
481
+ document.getElementById('selected-model').textContent = model;
482
+ document.getElementById('model-list-container').classList.add('hidden');
483
+ });
484
+
485
+ modelListContainer.appendChild(modelCard);
486
+ });
487
+ }
488
+
489
+ // Initial population with CPU models
490
+ populateModelList(cpuModels);
491
+
492
+ // Model search functionality
493
+ document.getElementById('model-search').addEventListener('input', (e) => {
494
+ const searchTerm = e.target.value.toLowerCase();
495
+ const filteredModels = cpuModels.filter(model =>
496
+ model.toLowerCase().includes(searchTerm)
497
+ );
498
+ populateModelList(filteredModels);
499
+ });
500
+
501
+ // Toggle model list visibility
502
+ document.getElementById('model-accordion').addEventListener('click', () => {
503
+ const container = document.getElementById('model-list-container');
504
+ container.classList.toggle('hidden');
505
+ });
506
+
507
+ // Update slider value displays
508
+ function updateSliderValue(sliderId, displayId) {
509
+ const slider = document.getElementById(sliderId);
510
+ const display = document.getElementById(displayId);
511
+ display.textContent = slider.value;
512
+
513
+ slider.addEventListener('input', () => {
514
+ display.textContent = slider.value;
515
+ });
516
+ }
517
+
518
+ updateSliderValue('width', 'width-value');
519
+ updateSliderValue('height', 'height-value');
520
+ updateSliderValue('steps', 'steps-value');
521
+ updateSliderValue('cfg', 'cfg-value');
522
+
523
+ // Generate button functionality
524
+ document.getElementById('generate-btn').addEventListener('click', async () => {
525
+ const prompt = document.getElementById('prompt').value.trim();
526
+ const selectedModel = document.getElementById('selected-model').textContent;
527
+ const batchCount = parseInt(document.getElementById('batch-count').value);
528
+
529
+ if (!prompt) {
530
+ showError('Please enter a prompt');
531
+ return;
532
+ }
533
+
534
+ // Show loading state
535
+ const generateBtn = document.getElementById('generate-btn');
536
+ const generateText = document.getElementById('generate-text');
537
+ const loadingSpinner = document.getElementById('loading-spinner');
538
+ const progressContainer = document.getElementById('generation-progress');
539
+
540
+ generateText.textContent = 'Generating...';
541
+ loadingSpinner.classList.remove('hidden');
542
+ generateBtn.disabled = true;
543
+ progressContainer.classList.remove('hidden');
544
+
545
+ // Hide any previous error
546
+ document.getElementById('error-message').classList.add('hidden');
547
+
548
+ try {
549
+ // Clear previous results
550
+ clearGallery();
551
+
552
+ // Show progress bar
553
+ updateProgress(0, 'Initializing model...');
554
+
555
+ // Simulate model loading (in a real app, this would be actual model loading)
556
+ await new Promise(resolve => setTimeout(resolve, 500));
557
+
558
+ // Generate images sequentially to avoid overloading CPU
559
+ for (let i = 0; i < batchCount; i++) {
560
+ await generateSingleImage(prompt, selectedModel, i, batchCount);
561
+ }
562
+
563
+ } catch (error) {
564
+ showError(error.message);
565
+ } finally {
566
+ // Reset button state
567
+ generateText.textContent = 'Generate Image';
568
+ loadingSpinner.classList.add('hidden');
569
+ generateBtn.disabled = false;
570
+ }
571
+ });
572
+
573
+ function showError(message) {
574
+ const errorElement = document.getElementById('error-message');
575
+ errorElement.textContent = message;
576
+ errorElement.classList.remove('hidden');
577
+ }
578
+
579
+ function clearGallery() {
580
+ const galleryContainer = document.getElementById('gallery-container');
581
+ galleryContainer.innerHTML = '<div id="placeholder-text" class="flex items-center justify-center h-full text-gray-500"><p>Your generated images will appear here</p></div>';
582
+ document.getElementById('download-all').classList.add('hidden');
583
+ }
584
+
585
+ // Update progress bar
586
+ function updateProgress(percent, status) {
587
+ const progressBar = document.getElementById('progress-bar-fill');
588
+ const progressPercent = document.getElementById('progress-percent');
589
+ const progressStatus = document.getElementById('progress-status');
590
+
591
+ progressBar.style.width = `${percent}%`;
592
+ progressPercent.textContent = `${percent}%`;
593
+ progressStatus.textContent = status;
594
+
595
+ // Estimate time remaining (simplified for demo)
596
+ if (percent < 100) {
597
+ const estimatedTime = Math.round((100 - percent) * 0.3); // 0.3 seconds per percent
598
+ document.getElementById('time-remaining').textContent = `Estimated time: ${estimatedTime} seconds`;
599
+ } else {
600
+ document.getElementById('time-remaining').textContent = 'Completed';
601
+ }
602
+ }
603
+
604
+ // Generate a single image (simulated in this demo)
605
+ async function generateSingleImage(prompt, model, index, total) {
606
+ try {
607
+ // Get all parameters from the form
608
+ const width = parseInt(document.getElementById('width').value);
609
+ const height = parseInt(document.getElementById('height').value);
610
+ const steps = parseInt(document.getElementById('steps').value);
611
+ const seed = parseInt(document.getElementById('seed').value);
612
+ const stylePreset = document.getElementById('style-preset').value;
613
+
614
+ // Show loading placeholder
615
+ const galleryContainer = document.getElementById('gallery-container');
616
+ if (index === 0) {
617
+ galleryContainer.innerHTML = '<div class="grid grid-cols-1 sm:grid-cols-2 gap-4" id="gallery-grid"></div>';
618
+ }
619
+
620
+ const galleryGrid = document.getElementById('gallery-grid');
621
+ const imageContainer = document.createElement('div');
622
+ imageContainer.className = 'relative';
623
+ imageContainer.innerHTML = `
624
+ <div class="bg-gray-100 rounded-md w-full h-64 flex items-center justify-center">
625
+ <div class="text-center">
626
+ <i class="fas fa-circle-notch fa-spin text-purple-500 mb-2"></i>
627
+ <p class="text-xs text-gray-600">Generating image ${index + 1} of ${total}</p>
628
+ </div>
629
+ </div>
630
+ `;
631
+ galleryGrid.appendChild(imageContainer);
632
+
633
+ // Simulate generation progress
634
+ for (let p = 0; p <= 100; p += 5) {
635
+ updateProgress(p, `Generating image ${index + 1}/${total} (${steps} steps)`);
636
+ await new Promise(resolve => setTimeout(resolve, 100));
637
+ }
638
+
639
+ // In a real implementation, this would use TensorFlow.js to generate the image
640
+ // For this demo, we'll use a placeholder image with the prompt as alt text
641
+ const placeholderImages = [
642
+ 'https://placehold.co/600x400/8b5cf6/FFFFFF?text=CPU+Generated+Image',
643
+ 'https://placehold.co/600x400/ec4899/FFFFFF?text=AI+Art',
644
+ 'https://placehold.co/600x400/6366f1/FFFFFF?text=Neural+Network',
645
+ 'https://placehold.co/600x400/10b981/FFFFFF?text=Diffusion+Model'
646
+ ];
647
+
648
+ const randomPlaceholder = placeholderImages[Math.floor(Math.random() * placeholderImages.length)];
649
+ const imageUrl = `${randomPlaceholder}&width=${width}&height=${height}`;
650
+
651
+ // Display the "generated" image
652
+ imageContainer.innerHTML = `
653
+ <img src="${imageUrl}" alt="Generated image: ${prompt}" class="gallery-image w-full h-64 object-cover rounded-md">
654
+ <div class="absolute bottom-2 right-2">
655
+ <button class="download-btn px-2 py-1 bg-white bg-opacity-80 rounded text-xs hover:bg-opacity-100" data-url="${imageUrl}">
656
+ <i class="fas fa-download"></i>
657
+ </button>
658
+ </div>
659
+ `;
660
+
661
+ // Add download event listener
662
+ imageContainer.querySelector('.download-btn').addEventListener('click', (e) => {
663
+ e.stopPropagation();
664
+ downloadImage(e.target.closest('button').getAttribute('data-url'), `generated-image-${index + 1}.jpg`);
665
+ });
666
+
667
+ // Show download all button if generating more than 1 image
668
+ if (total > 1) {
669
+ document.getElementById('download-all').classList.remove('hidden');
670
+ document.getElementById('download-all').addEventListener('click', downloadAllImages);
671
+ }
672
+
673
+ } catch (error) {
674
+ console.error(`Error generating image ${index + 1}:`, error);
675
+ // Show error placeholder
676
+ const galleryGrid = document.getElementById('gallery-grid');
677
+ const errorContainer = document.createElement('div');
678
+ errorContainer.className = 'bg-red-50 rounded-md w-full h-64 flex items-center justify-center p-4';
679
+ errorContainer.innerHTML = `
680
+ <div class="text-center">
681
+ <i class="fas fa-exclamation-triangle text-red-500 mb-2"></i>
682
+ <p class="text-xs text-red-600">Failed to generate image ${index + 1}</p>
683
+ <p class="text-xs text-red-600">${error.message}</p>
684
+ </div>
685
+ `;
686
+ galleryGrid.appendChild(errorContainer);
687
+ }
688
+ }
689
+
690
+ // Download single image
691
+ function downloadImage(url, filename) {
692
+ const a = document.createElement('a');
693
+ a.href = url;
694
+ a.download = filename;
695
+ document.body.appendChild(a);
696
+ a.click();
697
+ document.body.removeChild(a);
698
+ }
699
+
700
+ // Download all images as zip
701
+ function downloadAllImages() {
702
+ alert('In a real implementation, this would download all images as a ZIP file.\nFor this demo, please download images individually.');
703
+ }
704
+ </script>
705
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=SIMCEEHALO/less-steep-learning-curve" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
706
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ i want this to run with the cpu upgrade processor and not be static