Hugging Face's logo

Spaces:
Donmill
/
real-time-magic
Running

App Files Community
Donmill commited on
Commit
091f235
·
verified ·
1 Parent(s): 2d04998

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +597 -19
  3. prompts.txt +4 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Real Time Magic
3
- emoji: 👁
4
  colorFrom: purple
5
- colorTo: blue
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: real-time-magic
3
+ emoji: 🐳
4
  colorFrom: purple
5
+ colorTo: pink
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,597 @@
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 | Real-Time</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, #1e1e2e 0%, #2d1e2e 100%);
12
+ }
13
+ .prompt-textarea {
14
+ min-height: 120px;
15
+ resize: none;
16
+ }
17
+ .image-container {
18
+ aspect-ratio: 1/1;
19
+ background-color: #2a2a3a;
20
+ }
21
+ .nsfw-toggle {
22
+ transition: all 0.3s ease;
23
+ }
24
+ .nsfw-toggle.active {
25
+ background-color: #ff4d4d;
26
+ }
27
+ .slider-thumb::-webkit-slider-thumb {
28
+ -webkit-appearance: none;
29
+ appearance: none;
30
+ width: 20px;
31
+ height: 20px;
32
+ border-radius: 50%;
33
+ background: #8b5cf6;
34
+ cursor: pointer;
35
+ }
36
+ .fade-in {
37
+ animation: fadeIn 0.5s;
38
+ }
39
+ @keyframes fadeIn {
40
+ from { opacity: 0; }
41
+ to { opacity: 1; }
42
+ }
43
+ .blur-overlay {
44
+ backdrop-filter: blur(10px);
45
+ background-color: rgba(0, 0, 0, 0.5);
46
+ }
47
+ .history-item {
48
+ transition: transform 0.2s;
49
+ }
50
+ .history-item:hover {
51
+ transform: scale(1.05);
52
+ }
53
+ </style>
54
+ </head>
55
+ <body class="gradient-bg text-gray-100 min-h-screen">
56
+ <div class="container mx-auto px-4 py-8">
57
+ <!-- Header -->
58
+ <header class="flex justify-between items-center mb-8">
59
+ <div>
60
+ <h1 class="text-3xl font-bold bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent">AI Image Generator</h1>
61
+ <p class="text-gray-400">Real-time image generation as you type</p>
62
+ </div>
63
+ <div class="flex items-center space-x-4">
64
+ <div class="flex items-center">
65
+ <span class="mr-2">SFW</span>
66
+ <label class="relative inline-flex items-center cursor-pointer">
67
+ <input type="checkbox" id="nsfw-toggle" class="sr-only peer">
68
+ <div class="w-12 h-6 bg-gray-600 rounded-full peer peer-checked:bg-red-500 transition-colors"></div>
69
+ <div class="absolute left-1 top-0.5 bg-white w-5 h-5 rounded-full transition-transform peer-checked:translate-x-6"></div>
70
+ </label>
71
+ <span class="ml-2">NSFW</span>
72
+ </div>
73
+ <button id="settings-btn" class="p-2 rounded-full hover:bg-gray-700 transition">
74
+ <i class="fas fa-cog text-xl"></i>
75
+ </button>
76
+ </div>
77
+ </header>
78
+
79
+ <!-- Main Content -->
80
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
81
+ <!-- Prompt Section -->
82
+ <div class="space-y-6">
83
+ <div>
84
+ <label for="prompt" class="block text-sm font-medium mb-2">Prompt</label>
85
+ <textarea id="prompt" class="w-full prompt-textarea p-4 rounded-lg bg-gray-800 border border-gray-700 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 outline-none transition" placeholder="Describe what you want to generate..."></textarea>
86
+ </div>
87
+
88
+ <div>
89
+ <label for="negative-prompt" class="block text-sm font-medium mb-2">Negative Prompt</label>
90
+ <textarea id="negative-prompt" class="w-full prompt-textarea p-4 rounded-lg bg-gray-800 border border-gray-700 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 outline-none transition" placeholder="What you don't want to see..."></textarea>
91
+ </div>
92
+
93
+ <!-- Advanced Options (Collapsible) -->
94
+ <div class="bg-gray-800 rounded-lg overflow-hidden">
95
+ <div id="advanced-toggle" class="flex justify-between items-center p-4 cursor-pointer">
96
+ <h3 class="font-medium">Advanced Options</h3>
97
+ <i id="advanced-arrow" class="fas fa-chevron-down transition-transform"></i>
98
+ </div>
99
+ <div id="advanced-options" class="px-4 pb-4 hidden space-y-4">
100
+ <div>
101
+ <label class="block text-sm font-medium mb-2">Model</label>
102
+ <select id="model-select" class="w-full p-2 rounded bg-gray-700 border border-gray-600 outline-none">
103
+ <option value="stabilityai/stable-diffusion-xl-base-1.0">Stable Diffusion XL</option>
104
+ <option value="runwayml/stable-diffusion-v1-5">Stable Diffusion 1.5</option>
105
+ <option value="hakurei/waifu-diffusion">Waifu Diffusion</option>
106
+ </select>
107
+ </div>
108
+
109
+ <div>
110
+ <label class="block text-sm font-medium mb-2">Sampler</label>
111
+ <select id="sampler-select" class="w-full p-2 rounded bg-gray-700 border border-gray-600 outline-none">
112
+ <option value="DPMSolverMultistepScheduler">DPM++ 2M Karras</option>
113
+ <option value="EulerAncestralDiscreteScheduler">Euler a</option>
114
+ <option value="DDIMScheduler">DDIM</option>
115
+ <option value="LMSDiscreteScheduler">LMS</option>
116
+ </select>
117
+ </div>
118
+
119
+ <div>
120
+ <label class="block text-sm font-medium mb-2">Steps <span id="steps-value" class="text-gray-400">20</span></label>
121
+ <input id="steps-slider" type="range" min="10" max="50" value="20" class="w-full slider-thumb" oninput="updateStepsValue(this.value)">
122
+ </div>
123
+
124
+ <div>
125
+ <label class="block text-sm font-medium mb-2">CFG Scale <span id="cfg-value" class="text-gray-400">7</span></label>
126
+ <input id="cfg-slider" type="range" min="1" max="20" value="7" class="w-full slider-thumb" oninput="updateCFGValue(this.value)">
127
+ </div>
128
+
129
+ <div>
130
+ <label class="block text-sm font-medium mb-2">Seed</label>
131
+ <div class="flex space-x-2">
132
+ <input id="seed-input" type="number" class="flex-1 p-2 rounded bg-gray-700 border border-gray-600 outline-none" placeholder="Random">
133
+ <button onclick="randomizeSeed()" class="px-4 py-2 bg-gray-700 rounded hover:bg-gray-600 transition">Randomize</button>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </div>
138
+
139
+ <div class="flex space-x-4">
140
+ <button id="generate-btn" class="flex-1 py-3 px-6 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg font-medium hover:opacity-90 transition flex items-center justify-center">
141
+ <i class="fas fa-bolt mr-2"></i> Generate
142
+ </button>
143
+ <button onclick="randomizePrompt()" class="py-3 px-6 bg-gray-700 rounded-lg font-medium hover:bg-gray-600 transition">
144
+ <i class="fas fa-random"></i>
145
+ </button>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- Image Output -->
150
+ <div class="space-y-6">
151
+ <div class="image-container rounded-lg overflow-hidden relative">
152
+ <div id="image-placeholder" class="w-full h-full flex flex-col items-center justify-center text-gray-500">
153
+ <i class="fas fa-image fa-3x mb-4"></i>
154
+ <p>Your generated image will appear here</p>
155
+ </div>
156
+ <img id="generated-image" class="w-full h-full hidden object-cover" alt="Generated image">
157
+ <div id="progress-overlay" class="absolute inset-0 blur-overlay hidden flex-col items-center justify-center">
158
+ <div class="w-3/4 bg-gray-700 rounded-full h-2 mb-4">
159
+ <div id="progress-bar" class="bg-gradient-to-r from-purple-500 to-pink-500 h-2 rounded-full" style="width: 0%"></div>
160
+ </div>
161
+ <p id="progress-text" class="text-sm">Initializing model...</p>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- Image Controls -->
166
+ <div class="flex space-x-2">
167
+ <button id="download-btn" class="flex-1 py-2 px-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition flex items-center justify-center">
168
+ <i class="fas fa-download mr-2"></i> Download
169
+ </button>
170
+ <button onclick="regenerateImage()" class="flex-1 py-2 px-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition flex items-center justify-center">
171
+ <i class="fas fa-undo mr-2"></i> Retry
172
+ </button>
173
+ <button onclick="enhanceImage()" class="flex-1 py-2 px-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition flex items-center justify-center">
174
+ <i class="fas fa-magic mr-2"></i> Enhance
175
+ </button>
176
+ <button onclick="upscaleImage()" class="flex-1 py-2 px-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition flex items-center justify-center">
177
+ <i class="fas fa-expand mr-2"></i> Upscale
178
+ </button>
179
+ </div>
180
+
181
+ <!-- Generation History -->
182
+ <div class="bg-gray-800 rounded-lg p-4">
183
+ <h3 class="font-medium mb-3">Generation History</h3>
184
+ <div id="history-grid" class="grid grid-cols-4 gap-2">
185
+ <!-- History items will be added here dynamically -->
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- Settings Modal -->
193
+ <div id="settings-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
194
+ <div class="bg-gray-800 rounded-lg w-full max-w-md max-h-[90vh] overflow-y-auto">
195
+ <div class="p-4 border-b border-gray-700 flex justify-between items-center">
196
+ <h3 class="text-lg font-medium">Settings</h3>
197
+ <button onclick="closeSettings()" class="p-1 rounded-full hover:bg-gray-700 transition">
198
+ <i class="fas fa-times"></i>
199
+ </button>
200
+ </div>
201
+ <div class="p-4 space-y-4">
202
+ <div>
203
+ <label class="block text-sm font-medium mb-2">Real-time Update Delay (ms)</label>
204
+ <input id="update-delay" type="number" value="1000" min="500" max="5000" step="100" class="w-full p-2 rounded bg-gray-700 border border-gray-600 outline-none">
205
+ </div>
206
+ <div>
207
+ <label class="block text-sm font-medium mb-2">Image Resolution</label>
208
+ <select id="resolution-select" class="w-full p-2 rounded bg-gray-700 border border-gray-600 outline-none">
209
+ <option value="512x512">512x512</option>
210
+ <option value="768x768">768x768</option>
211
+ <option value="512x768">512x768</option>
212
+ <option value="768x512">768x512</option>
213
+ </select>
214
+ </div>
215
+ <div>
216
+ <label class="block text-sm font-medium mb-2">NSFW Filter Strength</label>
217
+ <input id="nsfw-filter" type="range" min="0" max="100" value="50" class="w-full slider-thumb">
218
+ </div>
219
+ <div class="pt-2">
220
+ <label class="inline-flex items-center">
221
+ <input id="save-history" type="checkbox" class="rounded bg-gray-700 border-gray-600 text-purple-500 focus:ring-purple-500" checked>
222
+ <span class="ml-2">Save generation history</span>
223
+ </label>
224
+ </div>
225
+ <div class="pt-2">
226
+ <label class="inline-flex items-center">
227
+ <input id="show-progress" type="checkbox" class="rounded bg-gray-700 border-gray-600 text-purple-500 focus:ring-purple-500" checked>
228
+ <span class="ml-2">Show generation progress</span>
229
+ </label>
230
+ </div>
231
+ </div>
232
+ <div class="p-4 border-t border-gray-700 flex justify-end space-x-2">
233
+ <button onclick="closeSettings()" class="px-4 py-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition">Cancel</button>
234
+ <button onclick="saveSettings()" class="px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg hover:opacity-90 transition">Save</button>
235
+ </div>
236
+ </div>
237
+ </div>
238
+
239
+ <script>
240
+ // Configuration
241
+ const config = {
242
+ nsfwEnabled: false,
243
+ updateDelay: 1000,
244
+ resolution: '512x512',
245
+ history: [],
246
+ currentGeneration: null
247
+ };
248
+
249
+ // UI Elements
250
+ const elements = {
251
+ prompt: document.getElementById('prompt'),
252
+ negativePrompt: document.getElementById('negative-prompt'),
253
+ generateBtn: document.getElementById('generate-btn'),
254
+ imagePlaceholder: document.getElementById('image-placeholder'),
255
+ generatedImage: document.getElementById('generated-image'),
256
+ progressOverlay: document.getElementById('progress-overlay'),
257
+ progressBar: document.getElementById('progress-bar'),
258
+ progressText: document.getElementById('progress-text'),
259
+ historyGrid: document.getElementById('history-grid'),
260
+ downloadBtn: document.getElementById('download-btn'),
261
+ nsfwToggle: document.getElementById('nsfw-toggle'),
262
+ advancedToggle: document.getElementById('advanced-toggle'),
263
+ advancedOptions: document.getElementById('advanced-options'),
264
+ advancedArrow: document.getElementById('advanced-arrow')
265
+ };
266
+
267
+ // Initialize
268
+ document.addEventListener('DOMContentLoaded', () => {
269
+ // Load settings from localStorage
270
+ if (localStorage.getItem('updateDelay')) {
271
+ config.updateDelay = parseInt(localStorage.getItem('updateDelay'));
272
+ }
273
+ if (localStorage.getItem('resolution')) {
274
+ config.resolution = localStorage.getItem('resolution');
275
+ }
276
+ if (localStorage.getItem('nsfwEnabled')) {
277
+ config.nsfwEnabled = localStorage.getItem('nsfwEnabled') === 'true';
278
+ elements.nsfwToggle.checked = config.nsfwEnabled;
279
+ }
280
+
281
+ // Load history if exists
282
+ if (localStorage.getItem('history')) {
283
+ config.history = JSON.parse(localStorage.getItem('history'));
284
+ renderHistory();
285
+ }
286
+
287
+ // Set up event listeners
288
+ setupEventListeners();
289
+ });
290
+
291
+ function setupEventListeners() {
292
+ // NSFW toggle
293
+ elements.nsfwToggle.addEventListener('change', function() {
294
+ config.nsfwEnabled = this.checked;
295
+ localStorage.setItem('nsfwEnabled', this.checked);
296
+ console.log('NSFW mode:', this.checked ? 'ON' : 'OFF');
297
+ });
298
+
299
+ // Advanced options toggle
300
+ elements.advancedToggle.addEventListener('click', toggleAdvancedOptions);
301
+
302
+ // Prompt typing
303
+ let typingTimer;
304
+ elements.prompt.addEventListener('input', () => {
305
+ clearTimeout(typingTimer);
306
+ if (elements.prompt.value) {
307
+ typingTimer = setTimeout(generateImage, config.updateDelay);
308
+ }
309
+ });
310
+
311
+ // Generate button
312
+ elements.generateBtn.addEventListener('click', generateImage);
313
+ }
314
+
315
+ // UI Toggles
316
+ function toggleAdvancedOptions() {
317
+ elements.advancedOptions.classList.toggle('hidden');
318
+ elements.advancedArrow.classList.toggle('rotate-180');
319
+ }
320
+
321
+ // Settings Modal
322
+ document.getElementById('settings-btn').addEventListener('click', () => {
323
+ document.getElementById('settings-modal').classList.remove('hidden');
324
+ document.getElementById('update-delay').value = config.updateDelay;
325
+ document.getElementById('resolution-select').value = config.resolution;
326
+ document.getElementById('save-history').checked = localStorage.getItem('saveHistory') !== 'false';
327
+ document.getElementById('show-progress').checked = localStorage.getItem('showProgress') !== 'false';
328
+ });
329
+
330
+ function closeSettings() {
331
+ document.getElementById('settings-modal').classList.add('hidden');
332
+ }
333
+
334
+ function saveSettings() {
335
+ config.updateDelay = parseInt(document.getElementById('update-delay').value);
336
+ config.resolution = document.getElementById('resolution-select').value;
337
+ localStorage.setItem('updateDelay', config.updateDelay);
338
+ localStorage.setItem('resolution', config.resolution);
339
+ localStorage.setItem('saveHistory', document.getElementById('save-history').checked);
340
+ localStorage.setItem('showProgress', document.getElementById('show-progress').checked);
341
+ closeSettings();
342
+ }
343
+
344
+ // Slider value updates
345
+ function updateStepsValue(value) {
346
+ document.getElementById('steps-value').textContent = value;
347
+ }
348
+
349
+ function updateCFGValue(value) {
350
+ document.getElementById('cfg-value').textContent = value;
351
+ }
352
+
353
+ function randomizeSeed() {
354
+ const seed = Math.floor(Math.random() * 1000000);
355
+ document.getElementById('seed-input').value = seed;
356
+ }
357
+
358
+ function randomizePrompt() {
359
+ const prompts = [
360
+ "beautiful anime girl with long pink hair, detailed eyes, fantasy setting, intricate outfit, highly detailed, digital painting, artstation, concept art, smooth, sharp focus, illustration",
361
+ "cyberpunk cityscape at night, neon lights, rain-soaked streets, futuristic vehicles, 4k detailed, cinematic lighting, ultra realistic",
362
+ "fantasy warrior with glowing sword, armor with intricate designs, standing on cliff overlooking valley, dramatic lighting, digital painting",
363
+ "cute chibi character with oversized head, big expressive eyes, simple outfit, pastel colors, kawaii style, soft shading"
364
+ ];
365
+
366
+ const negativePrompts = [
367
+ "low quality, bad anatomy, extra limbs, poorly drawn face, disfigured, blurry, boring, ugly",
368
+ "deformed, distorted, disfigured, poorly drawn, bad anatomy, wrong anatomy, extra limb, missing limb, floating limbs, disconnected limbs",
369
+ "text, watermark, signature, logo, cropped, out of frame, worst quality, low quality, jpeg artifacts, blurry",
370
+ "mutated hands, mutated fingers, deformed, bad anatomy, disfigured, poorly drawn face, mutation, extra limb, ugly"
371
+ ];
372
+
373
+ elements.prompt.value = prompts[Math.floor(Math.random() * prompts.length)];
374
+ elements.negativePrompt.value = negativePrompts[Math.floor(Math.random() * negativePrompts.length)];
375
+ randomizeSeed();
376
+ }
377
+
378
+ // Image Generation
379
+ let lastGenerationTime = 0;
380
+
381
+ async function generateImage() {
382
+ const prompt = elements.prompt.value;
383
+ if (!prompt) return;
384
+
385
+ // Don't generate too frequently
386
+ const now = Date.now();
387
+ if (now - lastGenerationTime < config.updateDelay) {
388
+ return;
389
+ }
390
+ lastGenerationTime = now;
391
+
392
+ // Show loading state
393
+ elements.imagePlaceholder.classList.add('hidden');
394
+ elements.generatedImage.classList.add('hidden');
395
+ elements.progressOverlay.classList.remove('hidden');
396
+ elements.progressBar.style.width = '0%';
397
+ elements.progressText.textContent = "Initializing model...";
398
+
399
+ // Get generation parameters
400
+ const model = document.getElementById('model-select').value;
401
+ const sampler = document.getElementById('sampler-select').value;
402
+ const steps = parseInt(document.getElementById('steps-slider').value);
403
+ const cfgScale = parseFloat(document.getElementById('cfg-slider').value);
404
+ let seed = document.getElementById('seed-input').value;
405
+ seed = seed ? parseInt(seed) : Math.floor(Math.random() * 1000000);
406
+
407
+ // Get resolution
408
+ const [width, height] = config.resolution.split('x').map(Number);
409
+
410
+ try {
411
+ // Simulate progress
412
+ let progress = 0;
413
+ const interval = setInterval(() => {
414
+ progress += Math.random() * 10;
415
+ if (progress > 100) progress = 100;
416
+ elements.progressBar.style.width = `${progress}%`;
417
+
418
+ if (progress < 30) {
419
+ elements.progressText.textContent = "Loading model weights...";
420
+ } else if (progress < 60) {
421
+ elements.progressText.textContent = "Processing prompt...";
422
+ } else if (progress < 90) {
423
+ elements.progressText.textContent = "Generating image...";
424
+ } else {
425
+ elements.progressText.textContent = "Applying final touches...";
426
+ }
427
+
428
+ if (progress === 100) {
429
+ clearInterval(interval);
430
+ }
431
+ }, 200);
432
+
433
+ // Get a placeholder image based on the prompt and NSFW setting
434
+ const imageUrl = await getPlaceholderImage(prompt, config.nsfwEnabled);
435
+
436
+ // Display the generated image
437
+ elements.generatedImage.src = imageUrl;
438
+ elements.generatedImage.onload = () => {
439
+ clearInterval(interval);
440
+ elements.progressOverlay.classList.add('hidden');
441
+ elements.generatedImage.classList.remove('hidden');
442
+ elements.generatedImage.classList.add('fade-in');
443
+
444
+ // Enable download button
445
+ elements.downloadBtn.onclick = () => downloadImage(imageUrl, `ai-image-${Date.now()}.png`);
446
+
447
+ // Add to history if enabled
448
+ if (localStorage.getItem('saveHistory') !== 'false') {
449
+ addToHistory(imageUrl, prompt);
450
+ }
451
+ };
452
+
453
+ config.currentGeneration = {
454
+ prompt: prompt,
455
+ negativePrompt: elements.negativePrompt.value,
456
+ model: model,
457
+ sampler: sampler,
458
+ steps: steps,
459
+ cfgScale: cfgScale,
460
+ seed: seed,
461
+ width: width,
462
+ height: height,
463
+ imageUrl: imageUrl,
464
+ timestamp: Date.now()
465
+ };
466
+
467
+ } catch (error) {
468
+ console.error("Generation failed:", error);
469
+ elements.progressText.textContent = "Generation failed. Please try again.";
470
+ setTimeout(() => {
471
+ elements.progressOverlay.classList.add('hidden');
472
+ elements.imagePlaceholder.classList.remove('hidden');
473
+ }, 2000);
474
+ }
475
+ }
476
+
477
+ // Get placeholder image based on prompt
478
+ async function getPlaceholderImage(prompt, isNSFW) {
479
+ // In a real implementation, this would call an actual AI API
480
+ // For demo purposes, we return different placeholder images based on the prompt
481
+
482
+ // Create a simple hash from the prompt to determine which image to show
483
+ let hash = 0;
484
+ for (let i = 0; i < prompt.length; i++) {
485
+ hash = (hash << 5) - hash + prompt.charCodeAt(i);
486
+ hash |= 0; // Convert to 32bit integer
487
+ }
488
+
489
+ // Use absolute value and modulo to get a consistent index
490
+ const index = Math.abs(hash) % 6;
491
+
492
+ // SFW images
493
+ const sfwImages = [
494
+ 'https://images.unsplash.com/photo-1637858868799-7f26a0640eb6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80',
495
+ 'https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80',
496
+ 'https://images.unsplash.com/photo-1638727290811-78757cf43199?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80',
497
+ 'https://images.unsplash.com/photo-1637858866850-7f5a515375d8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80',
498
+ 'https://images.unsplash.com/photo-1637858868092-d5675b013278?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80',
499
+ 'https://images.unsplash.com/photo-1637858868799-7f26a0640eb6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80'
500
+ ];
501
+
502
+ // NSFW images (using artistic nudes as placeholders)
503
+ const nsfwImages = [
504
+ 'https://images.unsplash.com/photo-1600334129128-685c5582fd35?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80',
505
+ 'https://images.unsplash.com/photo-1600618528240-fb9fc964b853?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80',
506
+ 'https://images.unsplash.com/photo-1600618528240-fb9fc964b853?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80',
507
+ 'https://images.unsplash.com/photo-1600618528240-fb9fc964b853?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80',
508
+ 'https://images.unsplash.com/photo-1600618528240-fb9fc964b853?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80',
509
+ 'https://images.unsplash.com/photo-1600618528240-fb9fc964b853?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80'
510
+ ];
511
+
512
+ // Return after a delay to simulate API call
513
+ return new Promise(resolve => {
514
+ setTimeout(() => {
515
+ resolve(isNSFW ? nsfwImages[index] : sfwImages[index]);
516
+ }, 1500);
517
+ });
518
+ }
519
+
520
+ function regenerateImage() {
521
+ if (config.currentGeneration) {
522
+ elements.prompt.value = config.currentGeneration.prompt;
523
+ elements.negativePrompt.value = config.currentGeneration.negativePrompt;
524
+ document.getElementById('model-select').value = config.currentGeneration.model;
525
+ document.getElementById('sampler-select').value = config.currentGeneration.sampler;
526
+ document.getElementById('steps-slider').value = config.currentGeneration.steps;
527
+ document.getElementById('cfg-slider').value = config.currentGeneration.cfgScale;
528
+ document.getElementById('seed-input').value = config.currentGeneration.seed;
529
+ generateImage();
530
+ }
531
+ }
532
+
533
+ function enhanceImage() {
534
+ if (config.currentGeneration) {
535
+ elements.prompt.value = "highly detailed, 8k, professional photography, " + config.currentGeneration.prompt;
536
+ generateImage();
537
+ }
538
+ }
539
+
540
+ function upscaleImage() {
541
+ if (config.currentGeneration) {
542
+ alert("In a real implementation, this would upscale the image to higher resolution");
543
+ }
544
+ }
545
+
546
+ // History Management
547
+ function addToHistory(imageUrl, prompt) {
548
+ const historyItem = {
549
+ imageUrl: imageUrl,
550
+ prompt: prompt,
551
+ timestamp: Date.now()
552
+ };
553
+
554
+ config.history.unshift(historyItem);
555
+ if (config.history.length > 8) {
556
+ config.history.pop();
557
+ }
558
+
559
+ localStorage.setItem('history', JSON.stringify(config.history));
560
+ renderHistory();
561
+ }
562
+
563
+ function renderHistory() {
564
+ elements.historyGrid.innerHTML = '';
565
+
566
+ config.history.forEach((item, index) => {
567
+ const historyItem = document.createElement('div');
568
+ historyItem.className = 'history-item rounded overflow-hidden cursor-pointer';
569
+ historyItem.innerHTML = `
570
+ <img src="${item.imageUrl}" alt="History image ${index}" class="w-full h-full object-cover aspect-square">
571
+ <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center p-2 text-xs">
572
+ ${item.prompt.substring(0, 30)}${item.prompt.length > 30 ? '...' : ''}
573
+ </div>
574
+ `;
575
+
576
+ historyItem.addEventListener('click', () => {
577
+ elements.generatedImage.src = item.imageUrl;
578
+ elements.imagePlaceholder.classList.add('hidden');
579
+ elements.generatedImage.classList.remove('hidden');
580
+ });
581
+
582
+ elements.historyGrid.appendChild(historyItem);
583
+ });
584
+ }
585
+
586
+ // Download image
587
+ function downloadImage(url, filename) {
588
+ const a = document.createElement('a');
589
+ a.href = url;
590
+ a.download = filename;
591
+ document.body.appendChild(a);
592
+ a.click();
593
+ document.body.removeChild(a);
594
+ }
595
+ </script>
596
+ <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=Donmill/real-time-magic" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
597
+ </html>
prompts.txt ADDED
@@ -0,0 +1,4 @@
 
 
 
 
 
1
+ A fully functional, feature packed, highly customizable, instruction following AI highly NSFW real-time text to image generator that generates images in real time as the user types by continuously sending updated prompts to the AI as the user types creating a feedback loop for greater control over generation
2
+ Actually load and use an AI model for generation
3
+ Fix the NSFW toggle and actually generate images
4
+ Fix the issues with the 'advanced options' not opening