Hugging Face's logo

Spaces:
BBbb22
/
deepsite-generated-space
Running

App Files Community
BBbb22 commited on
Commit
60de2c7
·
verified ·
1 Parent(s): 8a5a421

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +382 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Deepsite Generated Space
3
- emoji: ⚡
4
- colorFrom: yellow
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: deepsite-generated-space
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
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,382 @@
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>Text-to-Image Generator | Hugging Face Space</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
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
12
+ }
13
+ .model-card {
14
+ transition: all 0.3s ease;
15
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
16
+ }
17
+ .model-card:hover {
18
+ transform: translateY(-5px);
19
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
20
+ }
21
+ .prompt-textarea {
22
+ min-height: 120px;
23
+ resize: vertical;
24
+ }
25
+ .result-image {
26
+ transition: all 0.3s ease;
27
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
28
+ }
29
+ .result-image:hover {
30
+ transform: scale(1.02);
31
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
32
+ }
33
+ .sampler-option {
34
+ transition: all 0.2s ease;
35
+ }
36
+ .sampler-option:hover {
37
+ background-color: #e2e8f0;
38
+ }
39
+ .sampler-option.selected {
40
+ background-color: #3b82f6;
41
+ color: white;
42
+ }
43
+ .loading-spinner {
44
+ animation: spin 1s linear infinite;
45
+ }
46
+ @keyframes spin {
47
+ 0% { transform: rotate(0deg); }
48
+ 100% { transform: rotate(360deg); }
49
+ }
50
+ </style>
51
+ </head>
52
+ <body class="gradient-bg min-h-screen">
53
+ <div class="container mx-auto px-4 py-8">
54
+ <!-- Header -->
55
+ <header class="flex items-center justify-between mb-8">
56
+ <div class="flex items-center space-x-2">
57
+ <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="Hugging Face" class="h-10">
58
+ <h1 class="text-2xl font-bold text-gray-800">Text-to-Image Generator</h1>
59
+ </div>
60
+ <div class="flex items-center space-x-4">
61
+ <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">
62
+ <i class="fas fa-user mr-2"></i>Sign In
63
+ </button>
64
+ <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition">
65
+ <i class="fas fa-cog mr-2"></i>Settings
66
+ </button>
67
+ </div>
68
+ </header>
69
+
70
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
71
+ <!-- Left Panel - Input Controls -->
72
+ <div class="lg:col-span-1 bg-white rounded-xl shadow-lg p-6">
73
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">Generation Settings</h2>
74
+
75
+ <!-- Model Selection -->
76
+ <div class="mb-6">
77
+ <label class="block text-sm font-medium text-gray-700 mb-2">Model</label>
78
+ <div class="grid grid-cols-2 gap-3">
79
+ <div class="model-card bg-gray-50 p-3 rounded-lg cursor-pointer border border-blue-300">
80
+ <div class="flex items-center space-x-2">
81
+ <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
82
+ <i class="fas fa-paint-brush text-blue-500"></i>
83
+ </div>
84
+ <span class="font-medium">Stable Diffusion</span>
85
+ </div>
86
+ <div class="text-xs text-gray-500 mt-1">v2.1</div>
87
+ </div>
88
+ <div class="model-card bg-gray-50 p-3 rounded-lg cursor-pointer border border-gray-200 hover:border-blue-300">
89
+ <div class="flex items-center space-x-2">
90
+ <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
91
+ <i class="fas fa-magic text-purple-500"></i>
92
+ </div>
93
+ <span class="font-medium">Kandinsky</span>
94
+ </div>
95
+ <div class="text-xs text-gray-500 mt-1">v2.2</div>
96
+ </div>
97
+ </div>
98
+ </div>
99
+
100
+ <!-- Prompt Input -->
101
+ <div class="mb-6">
102
+ <label for="prompt" class="block text-sm font-medium text-gray-700 mb-2">Prompt</label>
103
+ <textarea id="prompt" class="w-full prompt-textarea px-3 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="Describe the image you want to generate..."></textarea>
104
+ </div>
105
+
106
+ <!-- Negative Prompt -->
107
+ <div class="mb-6">
108
+ <label for="negative-prompt" class="block text-sm font-medium text-gray-700 mb-2">Negative Prompt</label>
109
+ <textarea id="negative-prompt" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="What you don't want to see in the image..."></textarea>
110
+ </div>
111
+
112
+ <!-- Sampler Selection -->
113
+ <div class="mb-6">
114
+ <label class="block text-sm font-medium text-gray-700 mb-2">Sampler</label>
115
+ <div class="grid grid-cols-3 gap-2">
116
+ <div class="sampler-option p-2 text-center text-sm rounded cursor-pointer selected" data-sampler="euler_a">
117
+ Euler a
118
+ </div>
119
+ <div class="sampler-option p-2 text-center text-sm rounded cursor-pointer" data-sampler="euler">
120
+ Euler
121
+ </div>
122
+ <div class="sampler-option p-2 text-center text-sm rounded cursor-pointer" data-sampler="lms">
123
+ LMS
124
+ </div>
125
+ <div class="sampler-option p-2 text-center text-sm rounded cursor-pointer" data-sampler="heun">
126
+ Heun
127
+ </div>
128
+ <div class="sampler-option p-2 text-center text-sm rounded cursor-pointer" data-sampler="dpm2">
129
+ DPM2
130
+ </div>
131
+ <div class="sampler-option p-2 text-center text-sm rounded cursor-pointer" data-sampler="ddim">
132
+ DDIM
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Advanced Settings -->
138
+ <div class="mb-6">
139
+ <div class="flex items-center justify-between mb-2">
140
+ <label class="text-sm font-medium text-gray-700">Advanced Settings</label>
141
+ <button id="toggle-advanced" class="text-blue-500 text-sm">
142
+ <i class="fas fa-chevron-down mr-1"></i> Show
143
+ </button>
144
+ </div>
145
+ <div id="advanced-settings" class="hidden space-y-4 pt-2">
146
+ <!-- Steps -->
147
+ <div>
148
+ <label for="steps" class="block text-sm font-medium text-gray-700 mb-1">Steps</label>
149
+ <input type="range" id="steps" min="10" max="100" value="30" class="w-full">
150
+ <div class="flex justify-between text-xs text-gray-500">
151
+ <span>10</span>
152
+ <span id="steps-value">30</span>
153
+ <span>100</span>
154
+ </div>
155
+ </div>
156
+
157
+ <!-- CFG Scale -->
158
+ <div>
159
+ <label for="cfg-scale" class="block text-sm font-medium text-gray-700 mb-1">CFG Scale</label>
160
+ <input type="range" id="cfg-scale" min="1" max="20" value="7" class="w-full">
161
+ <div class="flex justify-between text-xs text-gray-500">
162
+ <span>1</span>
163
+ <span id="cfg-value">7</span>
164
+ <span>20</span>
165
+ </div>
166
+ </div>
167
+
168
+ <!-- Seed -->
169
+ <div>
170
+ <label for="seed" class="block text-sm font-medium text-gray-700 mb-1">Seed</label>
171
+ <div class="flex space-x-2">
172
+ <input type="number" id="seed" class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" value="-1">
173
+ <button class="px-3 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition">
174
+ <i class="fas fa-redo"></i>
175
+ </button>
176
+ </div>
177
+ </div>
178
+
179
+ <!-- Image Size -->
180
+ <div>
181
+ <label class="block text-sm font-medium text-gray-700 mb-1">Image Size</label>
182
+ <div class="grid grid-cols-3 gap-2">
183
+ <button class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-sm">512×512</button>
184
+ <button class="px-2 py-1 bg-gray-100 text-gray-700 rounded text-sm">512×768</button>
185
+ <button class="px-2 py-1 bg-gray-100 text-gray-700 rounded text-sm">768×512</button>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+
191
+ <!-- Generate Button -->
192
+ <button id="generate-btn" class="w-full py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-medium rounded-lg hover:from-blue-600 hover:to-purple-700 transition flex items-center justify-center">
193
+ <i class="fas fa-magic mr-2"></i> Generate Image
194
+ </button>
195
+ </div>
196
+
197
+ <!-- Right Panel - Results -->
198
+ <div class="lg:col-span-2">
199
+ <div class="bg-white rounded-xl shadow-lg p-6 mb-6">
200
+ <div class="flex items-center justify-between mb-4">
201
+ <h2 class="text-xl font-semibold text-gray-800">Generated Images</h2>
202
+ <div class="flex space-x-2">
203
+ <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200 transition">
204
+ <i class="fas fa-download mr-1"></i> Download All
205
+ </button>
206
+ <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200 transition">
207
+ <i class="fas fa-trash-alt mr-1"></i> Clear
208
+ </button>
209
+ </div>
210
+ </div>
211
+
212
+ <!-- Loading State -->
213
+ <div id="loading-state" class="hidden flex-col items-center justify-center py-12">
214
+ <div class="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full loading-spinner mb-4"></div>
215
+ <p class="text-gray-600">Generating your image...</p>
216
+ <p class="text-sm text-gray-500 mt-1">This may take a few moments</p>
217
+ </div>
218
+
219
+ <!-- Results Grid -->
220
+ <div id="results-grid" class="grid grid-cols-1 md:grid-cols-2 gap-4">
221
+ <!-- Placeholder for generated images -->
222
+ <div class="bg-gray-100 rounded-lg p-4 flex items-center justify-center" style="min-height: 300px;">
223
+ <div class="text-center text-gray-500">
224
+ <i class="fas fa-image text-4xl mb-2"></i>
225
+ <p>No images generated yet</p>
226
+ <p class="text-sm mt-1">Enter a prompt and click "Generate"</p>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+
232
+ <!-- Community Showcase -->
233
+ <div class="bg-white rounded-xl shadow-lg p-6">
234
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">Community Showcase</h2>
235
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
236
+ <!-- Sample community images -->
237
+ <div class="result-image bg-gray-100 rounded-lg overflow-hidden cursor-pointer">
238
+ <img src="https://via.placeholder.com/300x300/3b82f6/ffffff?text=Example" alt="Community image" class="w-full h-auto">
239
+ <div class="p-2">
240
+ <p class="text-sm truncate">A beautiful sunset over mountains</p>
241
+ <div class="flex items-center justify-between mt-1">
242
+ <span class="text-xs text-gray-500">@user123</span>
243
+ <div class="flex items-center space-x-1">
244
+ <i class="fas fa-heart text-red-500 text-xs"></i>
245
+ <span class="text-xs">42</span>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ <div class="result-image bg-gray-100 rounded-lg overflow-hidden cursor-pointer">
251
+ <img src="https://via.placeholder.com/300x300/10b981/ffffff?text=Example" alt="Community image" class="w-full h-auto">
252
+ <div class="p-2">
253
+ <p class="text-sm truncate">Cyberpunk city at night</p>
254
+ <div class="flex items-center justify-between mt-1">
255
+ <span class="text-xs text-gray-500">@ai_artist</span>
256
+ <div class="flex items-center space-x-1">
257
+ <i class="fas fa-heart text-red-500 text-xs"></i>
258
+ <span class="text-xs">28</span>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ <div class="result-image bg-gray-100 rounded-lg overflow-hidden cursor-pointer">
264
+ <img src="https://via.placeholder.com/300x300/f59e0b/ffffff?text=Example" alt="Community image" class="w-full h-auto">
265
+ <div class="p-2">
266
+ <p class="text-sm truncate">Portrait of a futuristic robot</p>
267
+ <div class="flex items-center justify-between mt-1">
268
+ <span class="text-xs text-gray-500">@tech_creator</span>
269
+ <div class="flex items-center space-x-1">
270
+ <i class="fas fa-heart text-red-500 text-xs"></i>
271
+ <span class="text-xs">35</span>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ <div class="result-image bg-gray-100 rounded-lg overflow-hidden cursor-pointer">
277
+ <img src="https://via.placeholder.com/300x300/ef4444/ffffff?text=Example" alt="Community image" class="w-full h-auto">
278
+ <div class="p-2">
279
+ <p class="text-sm truncate">Fantasy castle in the clouds</p>
280
+ <div class="flex items-center justify-between mt-1">
281
+ <span class="text-xs text-gray-500">@dreamer</span>
282
+ <div class="flex items-center space-x-1">
283
+ <i class="fas fa-heart text-red-500 text-xs"></i>
284
+ <span class="text-xs">19</span>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </div>
294
+
295
+ <script>
296
+ document.addEventListener('DOMContentLoaded', function() {
297
+ // Sampler selection
298
+ const samplerOptions = document.querySelectorAll('.sampler-option');
299
+ samplerOptions.forEach(option => {
300
+ option.addEventListener('click', function() {
301
+ samplerOptions.forEach(opt => opt.classList.remove('selected'));
302
+ this.classList.add('selected');
303
+ });
304
+ });
305
+
306
+ // Toggle advanced settings
307
+ const toggleAdvanced = document.getElementById('toggle-advanced');
308
+ const advancedSettings = document.getElementById('advanced-settings');
309
+ toggleAdvanced.addEventListener('click', function() {
310
+ const isHidden = advancedSettings.classList.contains('hidden');
311
+ advancedSettings.classList.toggle('hidden');
312
+ this.innerHTML = isHidden
313
+ ? '<i class="fas fa-chevron-up mr-1"></i> Hide'
314
+ : '<i class="fas fa-chevron-down mr-1"></i> Show';
315
+ });
316
+
317
+ // Update slider values
318
+ document.getElementById('steps').addEventListener('input', function() {
319
+ document.getElementById('steps-value').textContent = this.value;
320
+ });
321
+
322
+ document.getElementById('cfg-scale').addEventListener('input', function() {
323
+ document.getElementById('cfg-value').textContent = this.value;
324
+ });
325
+
326
+ // Generate button functionality
327
+ const generateBtn = document.getElementById('generate-btn');
328
+ const loadingState = document.getElementById('loading-state');
329
+ const resultsGrid = document.getElementById('results-grid');
330
+
331
+ generateBtn.addEventListener('click', function() {
332
+ const prompt = document.getElementById('prompt').value.trim();
333
+
334
+ if (!prompt) {
335
+ alert('Please enter a prompt to generate an image');
336
+ return;
337
+ }
338
+
339
+ // Show loading state
340
+ loadingState.classList.remove('hidden');
341
+ resultsGrid.innerHTML = '';
342
+
343
+ // Simulate API call with timeout
344
+ setTimeout(() => {
345
+ // Hide loading state
346
+ loadingState.classList.add('hidden');
347
+
348
+ // Get selected sampler
349
+ const selectedSampler = document.querySelector('.sampler-option.selected').dataset.sampler;
350
+
351
+ // Create result item
352
+ const resultItem = document.createElement('div');
353
+ resultItem.className = 'result-image bg-gray-100 rounded-lg overflow-hidden';
354
+ resultItem.innerHTML = `
355
+ <img src="https://via.placeholder.com/512x512/6366f1/ffffff?text=Generated+Image" alt="Generated image" class="w-full h-auto">
356
+ <div class="p-3">
357
+ <p class="font-medium text-sm mb-1">${prompt}</p>
358
+ <div class="flex justify-between items-center text-xs text-gray-500">
359
+ <span>Sampler: ${selectedSampler}</span>
360
+ <div class="flex space-x-2">
361
+ <button class="text-blue-500 hover:text-blue-700">
362
+ <i class="fas fa-download"></i>
363
+ </button>
364
+ <button class="text-gray-500 hover:text-gray-700">
365
+ <i class="fas fa-share-alt"></i>
366
+ </button>
367
+ </div>
368
+ </div>
369
+ </div>
370
+ `;
371
+
372
+ // Add to results grid
373
+ resultsGrid.appendChild(resultItem);
374
+
375
+ // Scroll to results
376
+ resultsGrid.scrollIntoView({ behavior: 'smooth' });
377
+ }, 3000);
378
+ });
379
+ });
380
+ </script>
381
+ <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=BBbb22/deepsite-generated-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
382
+ </html>