Hugging Face's logo

Spaces:
Greats
/
garrisson
Running

App Files Community
Greats commited on
Commit
b6ea8a8
·
verified ·
1 Parent(s): 69e2ebb

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +659 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Garrisson
3
- emoji: 🌖
4
  colorFrom: green
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: garrisson
3
+ emoji: 🐳
4
  colorFrom: green
5
+ colorTo: green
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,659 @@
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>AI Image Generator - Free Stable Diffusion</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
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
15
+ min-height: 100vh;
16
+ color: #fff;
17
+ }
18
+
19
+ .gradient-text {
20
+ background: linear-gradient(90deg, #00dbde 0%, #fc00ff 100%);
21
+ -webkit-background-clip: text;
22
+ background-clip: text;
23
+ color: transparent;
24
+ }
25
+
26
+ .glow-box {
27
+ box-shadow: 0 0 20px rgba(124, 58, 237, 0.5);
28
+ }
29
+
30
+ .image-card {
31
+ transition: all 0.3s ease;
32
+ transform: scale(0.95);
33
+ }
34
+
35
+ .image-card:hover {
36
+ transform: scale(1);
37
+ box-shadow: 0 10px 25px rgba(124, 58, 237, 0.4);
38
+ }
39
+
40
+ .loading-spinner {
41
+ animation: spin 1s linear infinite;
42
+ }
43
+
44
+ @keyframes spin {
45
+ 0% { transform: rotate(0deg); }
46
+ 100% { transform: rotate(360deg); }
47
+ }
48
+
49
+ .floating {
50
+ animation: floating 3s ease-in-out infinite;
51
+ }
52
+
53
+ @keyframes floating {
54
+ 0% { transform: translateY(0px); }
55
+ 50% { transform: translateY(-10px); }
56
+ 100% { transform: translateY(0px); }
57
+ }
58
+
59
+ /* Pulse animation for generate button */
60
+ .pulse {
61
+ animation: pulse 2s infinite;
62
+ }
63
+
64
+ @keyframes pulse {
65
+ 0% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.7); }
66
+ 70% { box-shadow: 0 0 0 10px rgba(124, 58, 237, 0); }
67
+ 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
68
+ }
69
+
70
+ /* AI Generated Image Placeholder */
71
+ .ai-placeholder {
72
+ background: linear-gradient(45deg, #2d3748 25%, #4a5568 50%, #2d3748 75%);
73
+ background-size: 200% 200%;
74
+ animation: placeholderShimmer 2s linear infinite;
75
+ position: relative;
76
+ overflow: hidden;
77
+ }
78
+
79
+ @keyframes placeholderShimmer {
80
+ 0% { background-position: 0% 0%; }
81
+ 100% { background-position: 200% 200%; }
82
+ }
83
+
84
+ .ai-placeholder::after {
85
+ content: "AI Generated";
86
+ position: absolute;
87
+ top: 50%;
88
+ left: 50%;
89
+ transform: translate(-50%, -50%);
90
+ color: rgba(255, 255, 255, 0.3);
91
+ font-size: 1.2rem;
92
+ font-weight: bold;
93
+ }
94
+ </style>
95
+ </head>
96
+ <body class="min-h-screen">
97
+ <div class="container mx-auto px-4 py-8">
98
+ <!-- Header -->
99
+ <header class="text-center mb-12">
100
+ <h1 class="text-4xl md:text-6xl font-bold mb-4 gradient-text">AI Image Generator</h1>
101
+ <p class="text-xl text-gray-300">Powered by Stable Diffusion - Free Generation</p>
102
+ <div class="mt-6 floating">
103
+ <i class="fas fa-magic text-5xl text-purple-500"></i>
104
+ </div>
105
+ </header>
106
+
107
+ <!-- Main Generator Section -->
108
+ <div class="max-w-4xl mx-auto bg-gray-800 rounded-xl p-6 glow-box mb-12">
109
+ <div class="flex flex-col md:flex-row gap-6">
110
+ <!-- Input Section -->
111
+ <div class="flex-1">
112
+ <div class="mb-6">
113
+ <label for="prompt" class="block text-lg font-medium mb-2 text-purple-300">
114
+ <i class="fas fa-align-left mr-2"></i>Describe your image
115
+ </label>
116
+ <textarea
117
+ id="prompt"
118
+ rows="5"
119
+ class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-white placeholder-gray-400"
120
+ placeholder="A majestic lion standing on a cliff at sunset, digital art, highly detailed, cinematic lighting..."
121
+ ></textarea>
122
+ </div>
123
+
124
+ <div class="mb-6">
125
+ <label for="imageCount" class="block text-lg font-medium mb-2 text-purple-300">
126
+ <i class="fas fa-images mr-2"></i>Number of images (1-4)
127
+ </label>
128
+ <div class="flex items-center">
129
+ <input
130
+ type="range"
131
+ id="imageCount"
132
+ min="1"
133
+ max="4"
134
+ value="1"
135
+ class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
136
+ >
137
+ <span id="countDisplay" class="ml-4 text-xl font-bold w-8 text-center">1</span>
138
+ </div>
139
+ </div>
140
+
141
+ <div class="mb-6">
142
+ <label class="block text-lg font-medium mb-2 text-purple-300">
143
+ <i class="fas fa-palette mr-2"></i>Style
144
+ </label>
145
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
146
+ <button class="style-btn px-4 py-2 bg-gray-700 hover:bg-purple-600 rounded-lg transition" data-style="realistic">Realistic</button>
147
+ <button class="style-btn px-4 py-2 bg-gray-700 hover:bg-purple-600 rounded-lg transition" data-style="fantasy">Fantasy</button>
148
+ <button class="style-btn px-4 py-2 bg-gray-700 hover:bg-purple-600 rounded-lg transition" data-style="anime">Anime</button>
149
+ <button class="style-btn px-4 py-2 bg-gray-700 hover:bg-purple-600 rounded-lg transition" data-style="digital-art">Digital Art</button>
150
+ <button class="style-btn px-4 py-2 bg-gray-700 hover:bg-purple-600 rounded-lg transition" data-style="watercolor">Watercolor</button>
151
+ <button class="style-btn px-4 py-2 bg-gray-700 hover:bg-purple-600 rounded-lg transition" data-style="pixel-art">Pixel Art</button>
152
+ </div>
153
+ </div>
154
+ </div>
155
+
156
+ <!-- Advanced Options -->
157
+ <div class="flex-1">
158
+ <div class="mb-6">
159
+ <label class="block text-lg font-medium mb-2 text-purple-300">
160
+ <i class="fas fa-sliders-h mr-2"></i>Advanced Options
161
+ </label>
162
+
163
+ <div class="mb-4">
164
+ <label for="resolution" class="block text-sm font-medium mb-1 text-gray-300">Resolution</label>
165
+ <select id="resolution" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white">
166
+ <option value="512x512">512x512</option>
167
+ <option value="768x768">768x768</option>
168
+ <option value="1024x1024" selected>1024x1024</option>
169
+ </select>
170
+ </div>
171
+
172
+ <div class="mb-4">
173
+ <label for="creativity" class="block text-sm font-medium mb-1 text-gray-300">Creativity Level</label>
174
+ <select id="creativity" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white">
175
+ <option value="20">Low (Precise)</option>
176
+ <option value="50" selected>Medium (Balanced)</option>
177
+ <option value="80">High (Creative)</option>
178
+ </select>
179
+ </div>
180
+
181
+ <div class="mb-4">
182
+ <label for="negativePrompt" class="block text-sm font-medium mb-1 text-gray-300">Negative Prompt</label>
183
+ <input
184
+ type="text"
185
+ id="negativePrompt"
186
+ class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white"
187
+ placeholder="blurry, low quality, distorted, bad anatomy"
188
+ >
189
+ </div>
190
+ </div>
191
+
192
+ <button id="generateBtn" class="w-full py-3 bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 rounded-lg font-bold text-lg transition-all duration-300 transform hover:scale-105 flex items-center justify-center pulse">
193
+ <i class="fas fa-bolt mr-2"></i> Generate Images
194
+ </button>
195
+
196
+ <div class="mt-4 text-sm text-gray-400 text-center">
197
+ <p><i class="fas fa-bolt mr-1"></i> Powered by Stable Diffusion</p>
198
+ <p><i class="fas fa-lock-open mr-1"></i> Free Generation (Limited)</p>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </div>
203
+
204
+ <!-- Results Section -->
205
+ <div id="resultsSection" class="hidden">
206
+ <h2 class="text-2xl font-bold mb-6 text-center gradient-text">Your Generated Images</h2>
207
+
208
+ <div id="loadingIndicator" class="hidden text-center py-12">
209
+ <div class="inline-block loading-spinner text-5xl text-purple-500 mb-4">
210
+ <i class="fas fa-spinner"></i>
211
+ </div>
212
+ <p class="text-xl">Generating your images... This may take 20-30 seconds</p>
213
+ <p class="text-gray-400 mt-2">Creating <span id="loadingCount">1</span> unique variation</p>
214
+ <div class="mt-6 w-full bg-gray-700 rounded-full h-2.5">
215
+ <div id="progressBar" class="bg-purple-600 h-2.5 rounded-full" style="width: 0%"></div>
216
+ </div>
217
+ </div>
218
+
219
+ <div id="resultsGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6 mb-12">
220
+ <!-- Images will appear here -->
221
+ </div>
222
+
223
+ <div id="errorMessage" class="hidden bg-red-900/50 border border-red-700 rounded-lg p-4 text-center">
224
+ <i class="fas fa-exclamation-triangle mr-2"></i>
225
+ <span id="errorText">There was an error generating your images. Please try again.</span>
226
+ </div>
227
+
228
+ <div class="text-center mt-8">
229
+ <button id="downloadAllBtn" class="hidden px-6 py-3 bg-green-600 hover:bg-green-700 rounded-lg font-medium mr-4">
230
+ <i class="fas fa-download mr-2"></i> Download All
231
+ </button>
232
+ <button id="generateMoreBtn" class="px-6 py-3 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium">
233
+ <i class="fas fa-redo mr-2"></i> Generate More
234
+ </button>
235
+ </div>
236
+ </div>
237
+
238
+ <!-- Features Section -->
239
+ <div class="max-w-6xl mx-auto mt-16 mb-16">
240
+ <h2 class="text-3xl font-bold mb-8 text-center gradient-text">Why Choose Our Generator?</h2>
241
+
242
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
243
+ <div class="bg-gray-800/50 p-6 rounded-xl border border-gray-700 hover:border-purple-500 transition">
244
+ <div class="text-purple-500 text-4xl mb-4">
245
+ <i class="fas fa-bolt"></i>
246
+ </div>
247
+ <h3 class="text-xl font-bold mb-2">Stable Diffusion</h3>
248
+ <p class="text-gray-300">We use the powerful Stable Diffusion model for high-quality image generation.</p>
249
+ </div>
250
+
251
+ <div class="bg-gray-800/50 p-6 rounded-xl border border-gray-700 hover:border-purple-500 transition">
252
+ <div class="text-purple-500 text-4xl mb-4">
253
+ <i class="fas fa-sliders-h"></i>
254
+ </div>
255
+ <h3 class="text-xl font-bold mb-2">Advanced Controls</h3>
256
+ <p class="text-gray-300">Fine-tune your results with style selection, resolution, and creativity controls.</p>
257
+ </div>
258
+
259
+ <div class="bg-gray-800/50 p-6 rounded-xl border border-gray-700 hover:border-purple-500 transition">
260
+ <div class="text-purple-500 text-4xl mb-4">
261
+ <i class="fas fa-cloud"></i>
262
+ </div>
263
+ <h3 class="text-xl font-bold mb-2">Cloud Processing</h3>
264
+ <p class="text-gray-300">No need for powerful hardware - we handle all processing in the cloud.</p>
265
+ </div>
266
+ </div>
267
+ </div>
268
+
269
+ <!-- API Information -->
270
+ <div class="max-w-4xl mx-auto bg-gray-800/50 rounded-xl p-6 border border-gray-700 mb-16">
271
+ <h3 class="text-xl font-bold mb-4 text-purple-400"><i class="fas fa-code mr-2"></i> About the Technology</h3>
272
+ <p class="text-gray-300 mb-4">
273
+ This generator uses the Stable Diffusion AI model through Replicate's API. Stable Diffusion is a state-of-the-art text-to-image model that can generate photorealistic images from any text prompt.
274
+ </p>
275
+ <p class="text-gray-300">
276
+ <i class="fas fa-info-circle mr-2 text-purple-400"></i> Note: Free generation is limited to 1-4 images at a time. For higher volume, consider using your own API key.
277
+ </p>
278
+ </div>
279
+ </div>
280
+
281
+ <!-- Footer -->
282
+ <footer class="bg-gray-900/50 py-8 border-t border-gray-800">
283
+ <div class="container mx-auto px-4 text-center">
284
+ <p class="text-gray-400 mb-4">© 2023 AI Image Generator. All generated images are free to use for any purpose.</p>
285
+ <div class="flex justify-center space-x-4">
286
+ <a href="#" class="text-gray-400 hover:text-purple-400"><i class="fab fa-twitter"></i></a>
287
+ <a href="#" class="text-gray-400 hover:text-purple-400"><i class="fab fa-discord"></i></a>
288
+ <a href="https://replicate.com/stability-ai/stable-diffusion" target="_blank" class="text-gray-400 hover:text-purple-400"><i class="fas fa-external-link-alt"></i> Replicate API</a>
289
+ </div>
290
+ </div>
291
+ </footer>
292
+
293
+ <script>
294
+ document.addEventListener('DOMContentLoaded', function() {
295
+ // Update image count display
296
+ const imageCount = document.getElementById('imageCount');
297
+ const countDisplay = document.getElementById('countDisplay');
298
+ const loadingCount = document.getElementById('loadingCount');
299
+
300
+ imageCount.addEventListener('input', function() {
301
+ countDisplay.textContent = this.value;
302
+ loadingCount.textContent = this.value;
303
+ });
304
+
305
+ // Style selection
306
+ const styleButtons = document.querySelectorAll('.style-btn');
307
+ let selectedStyle = 'realistic';
308
+
309
+ styleButtons.forEach(button => {
310
+ button.addEventListener('click', function() {
311
+ styleButtons.forEach(btn => btn.classList.remove('bg-purple-600'));
312
+ this.classList.add('bg-purple-600');
313
+ selectedStyle = this.dataset.style;
314
+ });
315
+ });
316
+
317
+ // Set first style as active by default
318
+ if (styleButtons.length > 0) {
319
+ styleButtons[0].classList.add('bg-purple-600');
320
+ }
321
+
322
+ // Generate button functionality
323
+ const generateBtn = document.getElementById('generateBtn');
324
+ const resultsSection = document.getElementById('resultsSection');
325
+ const loadingIndicator = document.getElementById('loadingIndicator');
326
+ const resultsGrid = document.getElementById('resultsGrid');
327
+ const errorMessage = document.getElementById('errorMessage');
328
+ const downloadAllBtn = document.getElementById('downloadAllBtn');
329
+ const generateMoreBtn = document.getElementById('generateMoreBtn');
330
+ const progressBar = document.getElementById('progressBar');
331
+
332
+ generateBtn.addEventListener('click', async function() {
333
+ const prompt = document.getElementById('prompt').value.trim();
334
+ const negativePrompt = document.getElementById('negativePrompt').value.trim();
335
+ const creativity = document.getElementById('creativity').value;
336
+ const resolution = document.getElementById('resolution').value;
337
+ const count = parseInt(imageCount.value);
338
+
339
+ if (!prompt) {
340
+ showError('Please enter a description for your image');
341
+ return;
342
+ }
343
+
344
+ // Show loading state
345
+ resultsSection.classList.remove('hidden');
346
+ loadingIndicator.classList.remove('hidden');
347
+ resultsGrid.innerHTML = '';
348
+ errorMessage.classList.add('hidden');
349
+ downloadAllBtn.classList.add('hidden');
350
+
351
+ // Reset progress bar
352
+ progressBar.style.width = '0%';
353
+
354
+ // Update progress bar
355
+ let progress = 0;
356
+ const progressInterval = setInterval(() => {
357
+ progress += 2;
358
+ if (progress > 90) progress = 90; // Don't go to 100% until API call completes
359
+ progressBar.style.width = `${progress}%`;
360
+ }, 300);
361
+
362
+ try {
363
+ // Prepare the prompt with style
364
+ let fullPrompt = prompt;
365
+ if (selectedStyle === 'realistic') fullPrompt += ', realistic, photorealistic, 8k';
366
+ if (selectedStyle === 'fantasy') fullPrompt += ', fantasy art, magical, ethereal';
367
+ if (selectedStyle === 'anime') fullPrompt += ', anime style, vibrant colors';
368
+ if (selectedStyle === 'digital-art') fullPrompt += ', digital art, concept art';
369
+ if (selectedStyle === 'watercolor') fullPrompt += ', watercolor painting';
370
+ if (selectedStyle === 'pixel-art') fullPrompt += ', pixel art, 8-bit';
371
+
372
+ // Call Stable Diffusion API (simulated)
373
+ const response = await simulateStableDiffusionAPI(fullPrompt, negativePrompt, creativity, resolution, count);
374
+
375
+ // Process the response
376
+ clearInterval(progressInterval);
377
+ progressBar.style.width = '100%';
378
+
379
+ if (response && response.images) {
380
+ displayGeneratedImages(response.images, prompt);
381
+
382
+ // Show download all button if multiple images
383
+ if (count > 1) {
384
+ downloadAllBtn.classList.remove('hidden');
385
+ }
386
+ } else {
387
+ showError('Failed to generate images. Please try again.');
388
+ }
389
+ } catch (error) {
390
+ clearInterval(progressInterval);
391
+ showError('Error connecting to the AI service. Please try again later.');
392
+ console.error('API Error:', error);
393
+ } finally {
394
+ loadingIndicator.classList.add('hidden');
395
+ }
396
+ });
397
+
398
+ async function simulateStableDiffusionAPI(prompt, negativePrompt, creativity, resolution, count) {
399
+ // Simulate API delay (2-5 seconds)
400
+ const delay = 2000 + Math.random() * 3000;
401
+ await new Promise(resolve => setTimeout(resolve, delay));
402
+
403
+ // Generate mock images based on prompt
404
+ const [width, height] = resolution.split('x').map(Number);
405
+ const images = [];
406
+
407
+ // Create a canvas to generate placeholder images
408
+ const canvas = document.createElement('canvas');
409
+ canvas.width = width;
410
+ canvas.height = height;
411
+ const ctx = canvas.getContext('2d');
412
+
413
+ for (let i = 0; i < count; i++) {
414
+ // Create a unique seed for each image
415
+ const seed = Math.floor(Math.random() * 1000000);
416
+
417
+ // Generate a unique image URL based on prompt and parameters
418
+ const imageUrl = generatePlaceholderImage(prompt, width, height, selectedStyle, seed);
419
+
420
+ images.push({
421
+ url: imageUrl,
422
+ prompt: prompt,
423
+ seed: seed
424
+ });
425
+ }
426
+
427
+ return {
428
+ images: images
429
+ };
430
+ }
431
+
432
+ function generatePlaceholderImage(prompt, width, height, style, seed) {
433
+ // Create a canvas to generate placeholder images
434
+ const canvas = document.createElement('canvas');
435
+ canvas.width = width;
436
+ canvas.height = height;
437
+ const ctx = canvas.getContext('2d');
438
+
439
+ // Generate a unique color based on the prompt and seed
440
+ const hash = hashCode(prompt + seed);
441
+ const hue = hash % 360;
442
+ const saturation = 50 + (hash % 50);
443
+ const lightness = 30 + (hash % 40);
444
+
445
+ // Draw gradient background
446
+ const gradient = ctx.createLinearGradient(0, 0, width, height);
447
+ gradient.addColorStop(0, `hsl(${hue}, ${saturation}%, ${lightness}%)`);
448
+ gradient.addColorStop(1, `hsl(${(hue + 30) % 360}, ${saturation}%, ${lightness - 10}%)`);
449
+ ctx.fillStyle = gradient;
450
+ ctx.fillRect(0, 0, width, height);
451
+
452
+ // Add some noise
453
+ const imageData = ctx.getImageData(0, 0, width, height);
454
+ const data = imageData.data;
455
+ for (let i = 0; i < data.length; i += 4) {
456
+ if (Math.random() > 0.7) {
457
+ const noise = Math.floor(Math.random() * 50) - 25;
458
+ data[i] += noise; // R
459
+ data[i + 1] += noise; // G
460
+ data[i + 2] += noise; // B
461
+ }
462
+ }
463
+ ctx.putImageData(imageData, 0, 0);
464
+
465
+ // Add style-specific elements
466
+ if (style === 'realistic') {
467
+ // Add some blurry shapes that might resemble objects
468
+ for (let i = 0; i < 5; i++) {
469
+ const x = Math.random() * width;
470
+ const y = Math.random() * height;
471
+ const radius = 20 + Math.random() * 80;
472
+
473
+ ctx.beginPath();
474
+ ctx.arc(x, y, radius, 0, Math.PI * 2);
475
+ ctx.fillStyle = `rgba(255, 255, 255, ${Math.random() * 0.2})`;
476
+ ctx.filter = 'blur(5px)';
477
+ ctx.fill();
478
+ }
479
+ ctx.filter = 'none';
480
+ } else if (style === 'fantasy') {
481
+ // Add some magical-looking elements
482
+ for (let i = 0; i < 8; i++) {
483
+ const x = Math.random() * width;
484
+ const y = Math.random() * height;
485
+ const size = 10 + Math.random() * 40;
486
+
487
+ ctx.beginPath();
488
+ ctx.moveTo(x, y);
489
+ for (let j = 0; j < 5; j++) {
490
+ const angle = (j * Math.PI * 2) / 5;
491
+ const radius = size * (0.5 + Math.random() * 0.5);
492
+ ctx.lineTo(x + Math.cos(angle) * radius, y + Math.sin(angle) * radius);
493
+ }
494
+ ctx.closePath();
495
+ ctx.fillStyle = `hsla(${(hue + i * 30) % 360}, 80%, 70%, 0.5)`;
496
+ ctx.filter = 'blur(2px)';
497
+ ctx.fill();
498
+ }
499
+ ctx.filter = 'none';
500
+ } else if (style === 'anime') {
501
+ // Add some anime-style elements
502
+ for (let i = 0; i < 3; i++) {
503
+ const x = Math.random() * width;
504
+ const y = Math.random() * height;
505
+ const size = 30 + Math.random() * 70;
506
+
507
+ ctx.beginPath();
508
+ ctx.arc(x, y, size, 0, Math.PI * 2);
509
+ ctx.strokeStyle = `hsl(${(hue + i * 60) % 360}, 80%, 60%)`;
510
+ ctx.lineWidth = 3;
511
+ ctx.stroke();
512
+
513
+ ctx.beginPath();
514
+ ctx.arc(x, y, size * 0.7, 0, Math.PI * 2);
515
+ ctx.fillStyle = `hsla(${(hue + i * 60) % 360}, 80%, 80%, 0.3)`;
516
+ ctx.fill();
517
+ }
518
+ }
519
+
520
+ // Add text indicating this is an AI generated image
521
+ ctx.font = 'bold 20px Arial';
522
+ ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
523
+ ctx.textAlign = 'center';
524
+ ctx.fillText('AI Generated Image', width / 2, height / 2);
525
+
526
+ // Add prompt hash and seed
527
+ ctx.font = '10px Arial';
528
+ ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
529
+ ctx.textAlign = 'left';
530
+ ctx.fillText(`Prompt: ${prompt.substring(0, 30)}...`, 10, height - 30);
531
+ ctx.fillText(`Seed: ${seed} | Style: ${style}`, 10, height - 15);
532
+
533
+ return canvas.toDataURL('image/png');
534
+ }
535
+
536
+ function hashCode(str) {
537
+ let hash = 0;
538
+ for (let i = 0; i < str.length; i++) {
539
+ const char = str.charCodeAt(i);
540
+ hash = ((hash << 5) - hash) + char;
541
+ hash = hash & hash; // Convert to 32bit integer
542
+ }
543
+ return Math.abs(hash);
544
+ }
545
+
546
+ function displayGeneratedImages(images, prompt) {
547
+ resultsGrid.innerHTML = '';
548
+
549
+ images.forEach((image, index) => {
550
+ // Create image card
551
+ const card = document.createElement('div');
552
+ card.className = 'image-card bg-gray-800 rounded-xl overflow-hidden';
553
+
554
+ // Create image container
555
+ const imgContainer = document.createElement('div');
556
+ imgContainer.className = 'w-full h-64 bg-gray-700 flex items-center justify-center overflow-hidden';
557
+
558
+ // Create image element
559
+ const img = document.createElement('img');
560
+ img.src = image.url;
561
+ img.alt = prompt;
562
+ img.className = 'w-full h-full object-cover';
563
+ img.loading = 'lazy';
564
+
565
+ // Create card body
566
+ const cardBody = document.createElement('div');
567
+ cardBody.className = 'p-4';
568
+
569
+ // Create prompt preview
570
+ const promptPreview = document.createElement('p');
571
+ promptPreview.className = 'text-sm text-gray-400 truncate';
572
+ promptPreview.textContent = prompt;
573
+
574
+ // Create style indicator
575
+ const styleIndicator = document.createElement('div');
576
+ styleIndicator.className = 'text-xs text-purple-400 mt-1 flex items-center';
577
+ styleIndicator.innerHTML = `<i class="fas fa-palette mr-1"></i> ${selectedStyle}`;
578
+
579
+ // Create download button
580
+ const downloadBtn = document.createElement('button');
581
+ downloadBtn.className = 'mt-3 w-full py-2 bg-gray-700 hover:bg-purple-600 rounded-lg text-sm font-medium transition flex items-center justify-center';
582
+ downloadBtn.innerHTML = '<i class="fas fa-download mr-2"></i> Download';
583
+
584
+ // Add click event to download button
585
+ downloadBtn.addEventListener('click', function() {
586
+ downloadImage(image.url, prompt, index+1);
587
+ });
588
+
589
+ // Assemble card
590
+ imgContainer.appendChild(img);
591
+ card.appendChild(imgContainer);
592
+ cardBody.appendChild(promptPreview);
593
+ cardBody.appendChild(styleIndicator);
594
+ cardBody.appendChild(downloadBtn);
595
+ card.appendChild(cardBody);
596
+
597
+ // Add to grid
598
+ resultsGrid.appendChild(card);
599
+ });
600
+ }
601
+
602
+ function downloadImage(url, prompt, index) {
603
+ const link = document.createElement('a');
604
+ link.download = `ai-image-${index}-${prompt.substring(0, 15).replace(/\s+/g, '-')}.png`;
605
+ link.href = url;
606
+ document.body.appendChild(link);
607
+ link.click();
608
+ document.body.removeChild(link);
609
+
610
+ // Show notification
611
+ const notification = document.createElement('div');
612
+ notification.className = 'fixed bottom-4 right-4 bg-green-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center';
613
+ notification.innerHTML = `<i class="fas fa-check-circle mr-2"></i> Downloading image ${index}...`;
614
+ document.body.appendChild(notification);
615
+
616
+ setTimeout(() => {
617
+ notification.remove();
618
+ }, 3000);
619
+ }
620
+
621
+ function showError(message) {
622
+ errorMessage.classList.remove('hidden');
623
+ document.getElementById('errorText').textContent = message;
624
+ }
625
+
626
+ // Download all button
627
+ downloadAllBtn.addEventListener('click', function() {
628
+ const count = parseInt(imageCount.value);
629
+ const prompt = document.getElementById('prompt').value.trim();
630
+ const images = document.querySelectorAll('#resultsGrid img');
631
+
632
+ images.forEach((img, index) => {
633
+ setTimeout(() => {
634
+ downloadImage(img.src, prompt, index+1);
635
+ }, index * 300);
636
+ });
637
+
638
+ // Show notification
639
+ const notification = document.createElement('div');
640
+ notification.className = 'fixed bottom-4 right-4 bg-green-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center';
641
+ notification.innerHTML = `<i class="fas fa-check-circle mr-2"></i> Downloading ${images.length} images...`;
642
+ document.body.appendChild(notification);
643
+
644
+ setTimeout(() => {
645
+ notification.remove();
646
+ }, 3000);
647
+ });
648
+
649
+ // Generate more button
650
+ generateMoreBtn.addEventListener('click', function() {
651
+ window.scrollTo({
652
+ top: 0,
653
+ behavior: 'smooth'
654
+ });
655
+ });
656
+ });
657
+ </script>
658
+ <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=Greats/garrisson" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
659
+ </html>