Hugging Face's logo

Spaces:
Boobs00
/
inferno
Running

App Files Community
Boobs00 commited on
Commit
0508ebd
·
verified ·
1 Parent(s): c3fa418

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1309 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Inferno
3
- emoji: 👀
4
- colorFrom: yellow
5
- colorTo: yellow
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: inferno
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: purple
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,1309 @@
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>INFERNO - Uncensored AI Image Generator</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
+ :root {
11
+ --primary: #ff2d2d;
12
+ --primary-dark: #cc0000;
13
+ --secondary: #ff5e5e;
14
+ --accent: #ff9a9a;
15
+ --dark: #1a1a1a;
16
+ --light: #f5f5f5;
17
+ --danger: #ff3860;
18
+ --warning: #ffdd57;
19
+ --success: #23d160;
20
+ }
21
+
22
+ body {
23
+ background-color: var(--dark);
24
+ color: var(--light);
25
+ font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
26
+ }
27
+
28
+ .inferno-bg {
29
+ background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
30
+ }
31
+
32
+ .model-card {
33
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
34
+ border: 2px solid transparent;
35
+ }
36
+
37
+ .model-card:hover {
38
+ transform: translateY(-3px);
39
+ box-shadow: 0 10px 25px rgba(255, 45, 45, 0.3);
40
+ border-color: var(--primary);
41
+ }
42
+
43
+ .model-card.selected {
44
+ background-color: rgba(255, 45, 45, 0.1);
45
+ border-color: var(--primary);
46
+ }
47
+
48
+ .tab-active {
49
+ border-bottom: 3px solid var(--primary);
50
+ font-weight: 700;
51
+ color: var(--light);
52
+ }
53
+
54
+ .image-placeholder {
55
+ background: linear-gradient(45deg, #2a2a2a 25%, #333 25%, #333 50%, #2a2a2a 50%, #2a2a2a 75%, #333 75%, #333 100%);
56
+ background-size: 20px 20px;
57
+ }
58
+
59
+ .prompt-textarea:focus {
60
+ box-shadow: 0 0 0 2px rgba(255, 45, 45, 0.5);
61
+ border-color: var(--primary);
62
+ }
63
+
64
+ .slider-thumb::-webkit-slider-thumb {
65
+ -webkit-appearance: none;
66
+ appearance: none;
67
+ width: 18px;
68
+ height: 18px;
69
+ border-radius: 50%;
70
+ background: var(--primary);
71
+ cursor: pointer;
72
+ border: 2px solid var(--light);
73
+ }
74
+
75
+ .slider-thumb::-moz-range-thumb {
76
+ width: 18px;
77
+ height: 18px;
78
+ border-radius: 50%;
79
+ background: var(--primary);
80
+ cursor: pointer;
81
+ border: 2px solid var(--light);
82
+ }
83
+
84
+ .nsfw-toggle {
85
+ position: relative;
86
+ display: inline-block;
87
+ width: 60px;
88
+ height: 30px;
89
+ }
90
+
91
+ .nsfw-toggle input {
92
+ opacity: 0;
93
+ width: 0;
94
+ height: 0;
95
+ }
96
+
97
+ .nsfw-slider {
98
+ position: absolute;
99
+ cursor: pointer;
100
+ top: 0;
101
+ left: 0;
102
+ right: 0;
103
+ bottom: 0;
104
+ background-color: #ccc;
105
+ transition: .4s;
106
+ border-radius: 30px;
107
+ }
108
+
109
+ .nsfw-slider:before {
110
+ position: absolute;
111
+ content: "";
112
+ height: 22px;
113
+ width: 22px;
114
+ left: 4px;
115
+ bottom: 4px;
116
+ background-color: white;
117
+ transition: .4s;
118
+ border-radius: 50%;
119
+ }
120
+
121
+ input:checked + .nsfw-slider {
122
+ background-color: var(--danger);
123
+ }
124
+
125
+ input:checked + .nsfw-slider:before {
126
+ transform: translateX(30px);
127
+ }
128
+
129
+ .error-toast {
130
+ animation: slideIn 0.5s, fadeOut 0.5s 2.5s forwards;
131
+ }
132
+
133
+ @keyframes slideIn {
134
+ from { transform: translateX(100%); }
135
+ to { transform: translateX(0); }
136
+ }
137
+
138
+ @keyframes fadeOut {
139
+ to { opacity: 0; }
140
+ }
141
+
142
+ .pagination-btn.active {
143
+ background-color: var(--primary);
144
+ color: white;
145
+ }
146
+
147
+ .loading-spinner {
148
+ animation: spin 1s linear infinite;
149
+ }
150
+
151
+ @keyframes spin {
152
+ 0% { transform: rotate(0deg); }
153
+ 100% { transform: rotate(360deg); }
154
+ }
155
+
156
+ .nsfw-badge {
157
+ animation: pulse 2s infinite;
158
+ }
159
+
160
+ @keyframes pulse {
161
+ 0% { box-shadow: 0 0 0 0 rgba(255, 56, 96, 0.7); }
162
+ 70% { box-shadow: 0 0 0 10px rgba(255, 56, 96, 0); }
163
+ 100% { box-shadow: 0 0 0 0 rgba(255, 56, 96, 0); }
164
+ }
165
+ </style>
166
+ </head>
167
+ <body class="bg-gray-900 text-gray-100">
168
+ <!-- Error Toast Container -->
169
+ <div id="toast-container" class="fixed bottom-4 right-4 space-y-2 z-50"></div>
170
+
171
+ <!-- Header -->
172
+ <header class="inferno-bg text-white py-4 shadow-lg sticky top-0 z-40">
173
+ <div class="container mx-auto px-4">
174
+ <div class="flex items-center justify-between">
175
+ <div class="flex items-center space-x-3">
176
+ <i class="fas fa-fire text-3xl"></i>
177
+ <h1 class="text-2xl font-bold">INFERNO</h1>
178
+ <span class="nsfw-badge bg-red-600 text-xs px-2 py-1 rounded-full ml-2">NSFW</span>
179
+ </div>
180
+ <div class="flex items-center space-x-4">
181
+ <button id="dark-mode-toggle" class="p-2 rounded-full hover:bg-red-800 transition">
182
+ <i class="fas fa-moon"></i>
183
+ </button>
184
+ <div class="relative group">
185
+ <button class="flex items-center space-x-2 bg-red-700 hover:bg-red-800 px-4 py-2 rounded-lg transition">
186
+ <i class="fas fa-user"></i>
187
+ <span>Account</span>
188
+ </button>
189
+ <div class="absolute right-0 mt-2 w-48 bg-gray-800 rounded-lg shadow-lg py-1 z-50 hidden group-hover:block">
190
+ <a href="#" class="block px-4 py-2 hover:bg-gray-700">Profile</a>
191
+ <a href="#" class="block px-4 py-2 hover:bg-gray-700">Settings</a>
192
+ <a href="#" class="block px-4 py-2 hover:bg-gray-700">Sign out</a>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </header>
199
+
200
+ <!-- Main Content -->
201
+ <main class="container mx-auto px-4 py-8">
202
+ <div class="bg-gray-800 rounded-xl shadow-2xl overflow-hidden">
203
+ <!-- Tabs Navigation -->
204
+ <div class="flex border-b border-gray-700">
205
+ <button id="multi-model-tab" class="tab-active px-6 py-4 text-white font-bold flex items-center">
206
+ <i class="fas fa-layer-group mr-2"></i> Multi-Model Inferno
207
+ </button>
208
+ <button id="single-model-tab" class="px-6 py-4 text-gray-400 font-medium flex items-center hover:text-white transition">
209
+ <i class="fas fa-cube mr-2"></i> Single Model
210
+ </button>
211
+ <button id="batch-tab" class="px-6 py-4 text-gray-400 font-medium flex items-center hover:text-white transition">
212
+ <i class="fas fa-clone mr-2"></i> Batch Mode
213
+ </button>
214
+ <button id="settings-tab" class="px-6 py-4 text-gray-400 font-medium flex items-center ml-auto hover:text-white transition">
215
+ <i class="fas fa-cog mr-2"></i> Settings
216
+ </button>
217
+ </div>
218
+
219
+ <!-- Multi-Model Tab Content -->
220
+ <div id="multi-model-content" class="p-6">
221
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
222
+ <!-- Left Column - Inputs -->
223
+ <div class="lg:col-span-2 space-y-6">
224
+ <!-- NSFW Toggle -->
225
+ <div class="flex items-center justify-between bg-gray-700 p-4 rounded-lg">
226
+ <div class="flex items-center space-x-2">
227
+ <i class="fas fa-exclamation-triangle text-red-500"></i>
228
+ <span class="font-medium">NSFW Mode</span>
229
+ </div>
230
+ <label class="nsfw-toggle">
231
+ <input type="checkbox" id="nsfw-toggle" checked>
232
+ <span class="nsfw-slider"></span>
233
+ </label>
234
+ </div>
235
+
236
+ <!-- Prompt Input -->
237
+ <div class="bg-gray-700 p-4 rounded-lg">
238
+ <div class="flex items-center justify-between mb-2">
239
+ <label class="block text-white font-medium">Your Raw Prompt</label>
240
+ <button id="random-prompt" class="text-xs bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded transition">
241
+ <i class="fas fa-dice mr-1"></i> Randomize
242
+ </button>
243
+ </div>
244
+ <textarea id="prompt-input" class="prompt-textarea w-full h-32 px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg focus:outline-none focus:border-red-500 text-white" placeholder="Let your imagination run wild... describe exactly what you want to see, no matter how depraved or exquisite...">A cybernetic dominatrix with glowing crimson eyes and liquid metal skin stands atop a neon-lit skyscraper, her whip crackling with electricity as the city burns below, ultra-detailed, hyper-realistic, 8K</textarea>
245
+ </div>
246
+
247
+ <!-- Negative Prompt -->
248
+ <div class="bg-gray-700 p-4 rounded-lg">
249
+ <label class="block text-white font-medium mb-2">Negative Prompt</label>
250
+ <textarea id="negative-prompt" class="w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg focus:outline-none focus:border-red-500 text-white" placeholder="What you don't want to see...">[deformed | disfigured], poorly drawn, [bad : wrong] anatomy, [extra | missing | floating | disconnected] limb, (mutated hands and fingers), blurry, text, fuzziness, censored, low quality, artifacts</textarea>
251
+ </div>
252
+
253
+ <!-- Advanced Settings Accordion -->
254
+ <div class="bg-gray-700 p-4 rounded-lg">
255
+ <div class="flex items-center justify-between cursor-pointer" id="advanced-settings-toggle">
256
+ <h3 class="text-white font-medium">Advanced Settings</h3>
257
+ <i class="fas fa-chevron-down text-gray-400 transition-transform duration-300"></i>
258
+ </div>
259
+ <div id="advanced-settings-content" class="mt-4 hidden space-y-4">
260
+ <!-- Dimensions -->
261
+ <div class="grid grid-cols-2 gap-4">
262
+ <div>
263
+ <label class="block text-gray-300 text-sm mb-1">Width</label>
264
+ <div class="flex items-center">
265
+ <input type="range" min="256" max="1216" step="32" value="768" class="slider-thumb w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer">
266
+ <span id="width-value" class="ml-3 text-white w-16 text-center">768</span>
267
+ </div>
268
+ </div>
269
+ <div>
270
+ <label class="block text-gray-300 text-sm mb-1">Height</label>
271
+ <div class="flex items-center">
272
+ <input type="range" min="256" max="1216" step="32" value="768" class="slider-thumb w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer">
273
+ <span id="height-value" class="ml-3 text-white w-16 text-center">768</span>
274
+ </div>
275
+ </div>
276
+ </div>
277
+
278
+ <!-- Inference Steps and Guidance -->
279
+ <div class="grid grid-cols-2 gap-4">
280
+ <div>
281
+ <label class="block text-gray-300 text-sm mb-1">Inference Steps</label>
282
+ <div class="flex items-center">
283
+ <input type="range" min="1" max="100" step="1" value="30" class="slider-thumb w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer">
284
+ <span id="steps-value" class="ml-3 text-white w-16 text-center">30</span>
285
+ </div>
286
+ </div>
287
+ <div>
288
+ <label class="block text-gray-300 text-sm mb-1">Guidance Scale</label>
289
+ <div class="flex items-center">
290
+ <input type="range" min="1" max="30" step="0.1" value="7.5" class="slider-thumb w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer">
291
+ <span id="cfg-value" class="ml-3 text-white w-16 text-center">7.5</span>
292
+ </div>
293
+ </div>
294
+ </div>
295
+
296
+ <!-- Seed Control -->
297
+ <div>
298
+ <label class="block text-gray-300 text-sm mb-1">Seed</label>
299
+ <div class="flex items-center">
300
+ <input type="number" id="seed-input" class="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg focus:outline-none focus:border-red-500 text-white" value="-1">
301
+ <button id="randomize-seed" class="ml-3 bg-gray-600 hover:bg-gray-500 text-white px-4 py-2 rounded-lg transition">
302
+ <i class="fas fa-random mr-2"></i> Randomize
303
+ </button>
304
+ </div>
305
+ </div>
306
+
307
+ <!-- Sampler Selection -->
308
+ <div>
309
+ <label class="block text-gray-300 text-sm mb-1">Sampler</label>
310
+ <select id="sampler-select" class="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg focus:outline-none focus:border-red-500 text-white">
311
+ <option value="euler_a">Euler a</option>
312
+ <option value="euler">Euler</option>
313
+ <option value="lms">LMS</option>
314
+ <option value="heun">Heun</option>
315
+ <option value="dpm2">DPM2</option>
316
+ <option value="dpm2_a">DPM2 a</option>
317
+ <option value="dpmpp_2s_a">DPM++ 2S a</option>
318
+ <option value="dpmpp_2m">DPM++ 2M</option>
319
+ <option value="dpmpp_sde">DPM++ SDE</option>
320
+ <option value="ddim">DDIM</option>
321
+ </select>
322
+ </div>
323
+ </div>
324
+ </div>
325
+
326
+ <!-- Model Selection -->
327
+ <div class="bg-gray-700 p-4 rounded-lg">
328
+ <div class="flex items-center justify-between mb-2">
329
+ <label class="block text-white font-medium">Select Models (Max 4)</label>
330
+ <span id="selected-count" class="text-xs bg-red-600 px-2 py-1 rounded">4/4 selected</span>
331
+ </div>
332
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
333
+ <!-- Model Cards -->
334
+ <div class="model-card bg-gray-800 rounded-lg p-3 cursor-pointer">
335
+ <div class="flex items-center">
336
+ <input type="checkbox" class="mr-2 model-checkbox" checked data-model="sd15">
337
+ <div>
338
+ <h4 class="font-medium text-white">Stable Diffusion 1.5</h4>
339
+ <p class="text-xs text-gray-400">512x512 resolution</p>
340
+ </div>
341
+ </div>
342
+ </div>
343
+ <div class="model-card bg-gray-800 rounded-lg p-3 cursor-pointer">
344
+ <div class="flex items-center">
345
+ <input type="checkbox" class="mr-2 model-checkbox" checked data-model="sd21">
346
+ <div>
347
+ <h4 class="font-medium text-white">Stable Diffusion 2.1</h4>
348
+ <p class="text-xs text-gray-400">768x768 resolution</p>
349
+ </div>
350
+ </div>
351
+ </div>
352
+ <div class="model-card bg-gray-800 rounded-lg p-3 cursor-pointer">
353
+ <div class="flex items-center">
354
+ <input type="checkbox" class="mr-2 model-checkbox" data-model="openjourney">
355
+ <div>
356
+ <h4 class="font-medium text-white">OpenJourney</h4>
357
+ <p class="text-xs text-gray-400">Artistic style</p>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ <div class="model-card bg-gray-800 rounded-lg p-3 cursor-pointer">
362
+ <div class="flex items-center">
363
+ <input type="checkbox" class="mr-2 model-checkbox" data-model="dreamlike">
364
+ <div>
365
+ <h4 class="font-medium text-white">Dreamlike</h4>
366
+ <p class="text-xs text-gray-400">Photorealistic</p>
367
+ </div>
368
+ </div>
369
+ </div>
370
+ <div class="model-card bg-gray-800 rounded-lg p-3 cursor-pointer">
371
+ <div class="flex items-center">
372
+ <input type="checkbox" class="mr-2 model-checkbox" data-model="anything">
373
+ <div>
374
+ <h4 class="font-medium text-white">Anything V3</h4>
375
+ <p class="text-xs text-gray-400">Anime style</p>
376
+ </div>
377
+ </div>
378
+ </div>
379
+ <div class="model-card bg-gray-800 rounded-lg p-3 cursor-pointer">
380
+ <div class="flex items-center">
381
+ <input type="checkbox" class="mr-2 model-checkbox" data-model="deliberate">
382
+ <div>
383
+ <h4 class="font-medium text-white">Deliberate</h4>
384
+ <p class="text-xs text-gray-400">Detailed images</p>
385
+ </div>
386
+ </div>
387
+ </div>
388
+ <div class="model-card bg-gray-800 rounded-lg p-3 cursor-pointer">
389
+ <div class="flex items-center">
390
+ <input type="checkbox" class="mr-2 model-checkbox" data-model="realistic">
391
+ <div>
392
+ <h4 class="font-medium text-white">Realistic Vision</h4>
393
+ <p class="text-xs text-gray-400">Hyper-realistic</p>
394
+ </div>
395
+ </div>
396
+ </div>
397
+ <div class="model-card bg-gray-800 rounded-lg p-3 cursor-pointer">
398
+ <div class="flex items-center">
399
+ <input type="checkbox" class="mr-2 model-checkbox" data-model="hentai">
400
+ <div>
401
+ <h4 class="font-medium text-white">Hentai Diffusion</h4>
402
+ <p class="text-xs text-gray-400">NSFW content</p>
403
+ </div>
404
+ </div>
405
+ </div>
406
+ <div class="model-card bg-gray-800 rounded-lg p-3 cursor-pointer">
407
+ <div class="flex items-center">
408
+ <input type="checkbox" class="mr-2 model-checkbox" data-model="waifu">
409
+ <div>
410
+ <h4 class="font-medium text-white">Waifu Diffusion</h4>
411
+ <p class="text-xs text-gray-400">Anime characters</p>
412
+ </div>
413
+ </div>
414
+ </div>
415
+ </div>
416
+ <div class="mt-3 flex justify-between">
417
+ <button id="random-models" class="text-red-400 hover:text-red-300 text-sm font-medium">
418
+ <i class="fas fa-random mr-1"></i> Randomize Models
419
+ </button>
420
+ <button id="clear-models" class="text-gray-400 hover:text-gray-300 text-sm font-medium">
421
+ <i class="fas fa-times mr-1"></i> Clear Selection
422
+ </button>
423
+ </div>
424
+ </div>
425
+ </div>
426
+
427
+ <!-- Right Column - Output -->
428
+ <div class="space-y-6">
429
+ <!-- Generate Button -->
430
+ <button id="generate-button" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-4 rounded-lg transition flex items-center justify-center">
431
+ <i class="fas fa-fire mr-2"></i> IGNITE CREATION
432
+ </button>
433
+
434
+ <!-- Generation Stats -->
435
+ <div class="bg-gray-700 p-4 rounded-lg">
436
+ <div class="grid grid-cols-3 gap-2 text-center">
437
+ <div>
438
+ <div class="text-xs text-gray-400">Queue</div>
439
+ <div id="queue-count" class="font-bold">0</div>
440
+ </div>
441
+ <div>
442
+ <div class="text-xs text-gray-400">ETA</div>
443
+ <div id="eta-time" class="font-bold">-</div>
444
+ </div>
445
+ <div>
446
+ <div class="text-xs text-gray-400">Cost</div>
447
+ <div id="generation-cost" class="font-bold">0.00</div>
448
+ </div>
449
+ </div>
450
+ </div>
451
+
452
+ <!-- Model Outputs -->
453
+ <div class="bg-gray-700 p-4 rounded-lg">
454
+ <h3 class="text-white font-medium mb-3">Model Outputs</h3>
455
+ <div class="grid grid-cols-2 gap-3">
456
+ <!-- Output Placeholders -->
457
+ <div id="output-1" class="image-placeholder rounded-lg h-40 flex items-center justify-center relative">
458
+ <span class="text-gray-400">Stable Diffusion 1.5</span>
459
+ <div class="absolute bottom-2 right-2 flex space-x-1">
460
+ <button class="download-btn hidden bg-gray-800 hover:bg-gray-700 text-white p-1 rounded-full w-7 h-7 flex items-center justify-center">
461
+ <i class="fas fa-download text-xs"></i>
462
+ </button>
463
+ <button class="upscale-btn hidden bg-red-600 hover:bg-red-700 text-white p-1 rounded-full w-7 h-7 flex items-center justify-center">
464
+ <i class="fas fa-expand text-xs"></i>
465
+ </button>
466
+ </div>
467
+ </div>
468
+ <div id="output-2" class="image-placeholder rounded-lg h-40 flex items-center justify-center relative">
469
+ <span class="text-gray-400">Stable Diffusion 2.1</span>
470
+ <div class="absolute bottom-2 right-2 flex space-x-1">
471
+ <button class="download-btn hidden bg-gray-800 hover:bg-gray-700 text-white p-1 rounded-full w-7 h-7 flex items-center justify-center">
472
+ <i class="fas fa-download text-xs"></i>
473
+ </button>
474
+ <button class="upscale-btn hidden bg-red-600 hover:bg-red-700 text-white p-1 rounded-full w-7 h-7 flex items-center justify-center">
475
+ <i class="fas fa-expand text-xs"></i>
476
+ </button>
477
+ </div>
478
+ </div>
479
+ <div id="output-3" class="image-placeholder rounded-lg h-40 flex items-center justify-center relative">
480
+ <span class="text-gray-400">Output 3</span>
481
+ <div class="absolute bottom-2 right-2 flex space-x-1">
482
+ <button class="download-btn hidden bg-gray-800 hover:bg-gray-700 text-white p-1 rounded-full w-7 h-7 flex items-center justify-center">
483
+ <i class="fas fa-download text-xs"></i>
484
+ </button>
485
+ <button class="upscale-btn hidden bg-red-600 hover:bg-red-700 text-white p-1 rounded-full w-7 h-7 flex items-center justify-center">
486
+ <i class="fas fa-expand text-xs"></i>
487
+ </button>
488
+ </div>
489
+ </div>
490
+ <div id="output-4" class="image-placeholder rounded-lg h-40 flex items-center justify-center relative">
491
+ <span class="text-gray-400">Output 4</span>
492
+ <div class="absolute bottom-2 right-2 flex space-x-1">
493
+ <button class="download-btn hidden bg-gray-800 hover:bg-gray-700 text-white p-1 rounded-full w-7 h-7 flex items-center justify-center">
494
+ <i class="fas fa-download text-xs"></i>
495
+ </button>
496
+ <button class="upscale-btn hidden bg-red-600 hover:bg-red-700 text-white p-1 rounded-full w-7 h-7 flex items-center justify-center">
497
+ <i class="fas fa-expand text-xs"></i>
498
+ </button>
499
+ </div>
500
+ </div>
501
+ </div>
502
+ </div>
503
+
504
+ <!-- Gallery -->
505
+ <div class="bg-gray-700 p-4 rounded-lg">
506
+ <div class="flex items-center justify-between mb-3">
507
+ <h3 class="text-white font-medium">Your Inferno Gallery</h3>
508
+ <div class="flex space-x-2">
509
+ <button id="clear-gallery" class="text-gray-400 hover:text-gray-300 text-sm font-medium">
510
+ <i class="fas fa-trash-alt mr-1"></i> Clear
511
+ </button>
512
+ <button id="download-all" class="text-gray-400 hover:text-gray-300 text-sm font-medium">
513
+ <i class="fas fa-download mr-1"></i> Download All
514
+ </button>
515
+ </div>
516
+ </div>
517
+ <div id="gallery-container" class="grid grid-cols-2 gap-2">
518
+ <!-- Gallery Items Will Appear Here -->
519
+ </div>
520
+ <!-- Pagination -->
521
+ <div id="gallery-pagination" class="mt-4 flex justify-center space-x-1 hidden">
522
+ <button class="pagination-btn px-3 py-1 rounded bg-gray-600 hover:bg-gray-500">1</button>
523
+ <button class="pagination-btn px-3 py-1 rounded bg-gray-600 hover:bg-gray-500">2</button>
524
+ <button class="pagination-btn px-3 py-1 rounded bg-gray-600 hover:bg-gray-500">3</button>
525
+ <span class="px-3 py-1">...</span>
526
+ <button class="pagination-btn px-3 py-1 rounded bg-gray-600 hover:bg-gray-500">10</button>
527
+ </div>
528
+ </div>
529
+ </div>
530
+ </div>
531
+ </div>
532
+
533
+ <!-- Single Model Tab Content (Hidden by default) -->
534
+ <div id="single-model-content" class="p-6 hidden">
535
+ <!-- Similar structure to multi-model but optimized for single model generation -->
536
+ <!-- Content would be similar but with batch size controls and other single-model specific features -->
537
+ </div>
538
+
539
+ <!-- Batch Mode Tab Content (Hidden by default) -->
540
+ <div id="batch-content" class="p-6 hidden">
541
+ <!-- Content for batch processing multiple prompts at once -->
542
+ </div>
543
+
544
+ <!-- Settings Tab Content (Hidden by default) -->
545
+ <div id="settings-content" class="p-6 hidden">
546
+ <!-- Expanded settings with more options -->
547
+ </div>
548
+ </div>
549
+ </main>
550
+
551
+ <!-- Footer -->
552
+ <footer class="bg-gray-800 py-6 mt-12">
553
+ <div class="container mx-auto px-4">
554
+ <div class="flex flex-col md:flex-row justify-between items-center">
555
+ <div class="flex items-center space-x-2 mb-4 md:mb-0">
556
+ <i class="fas fa-fire text-red-500"></i>
557
+ <span class="font-bold">INFERNO AI</span>
558
+ </div>
559
+ <div class="flex space-x-6">
560
+ <a href="#" class="text-gray-400 hover:text-white transition">Terms</a>
561
+ <a href="#" class="text-gray-400 hover:text-white transition">Privacy</a>
562
+ <a href="#" class="text-gray-400 hover:text-white transition">API</a>
563
+ <a href="#" class="text-gray-400 hover:text-white transition">Discord</a>
564
+ <a href="#" class="text-gray-400 hover:text-white transition">GitHub</a>
565
+ </div>
566
+ </div>
567
+ <div class="mt-4 text-center md:text-left text-gray-500 text-sm">
568
+ © 2023 Inferno AI. All generated content is the sole responsibility of the user.
569
+ </div>
570
+ </div>
571
+ </footer>
572
+
573
+ <script>
574
+ // Global state
575
+ const state = {
576
+ darkMode: true,
577
+ nsfwEnabled: true,
578
+ selectedModels: ['sd15', 'sd21'],
579
+ generationQueue: [],
580
+ galleryItems: [],
581
+ currentGalleryPage: 1,
582
+ itemsPerPage: 8,
583
+ credits: 1000,
584
+ generationStats: {
585
+ totalGenerations: 0,
586
+ totalCost: 0,
587
+ fastestGeneration: null,
588
+ longestGeneration: null
589
+ }
590
+ };
591
+
592
+ // DOM Elements
593
+ const elements = {
594
+ multiModelTab: document.getElementById('multi-model-tab'),
595
+ singleModelTab: document.getElementById('single-model-tab'),
596
+ batchTab: document.getElementById('batch-tab'),
597
+ settingsTab: document.getElementById('settings-tab'),
598
+ multiModelContent: document.getElementById('multi-model-content'),
599
+ singleModelContent: document.getElementById('single-model-content'),
600
+ batchContent: document.getElementById('batch-content'),
601
+ settingsContent: document.getElementById('settings-content'),
602
+ nsfwToggle: document.getElementById('nsfw-toggle'),
603
+ promptInput: document.getElementById('prompt-input'),
604
+ negativePrompt: document.getElementById('negative-prompt'),
605
+ randomPromptBtn: document.getElementById('random-prompt'),
606
+ generateButton: document.getElementById('generate-button'),
607
+ modelCheckboxes: document.querySelectorAll('.model-checkbox'),
608
+ randomModelsBtn: document.getElementById('random-models'),
609
+ clearModelsBtn: document.getElementById('clear-models'),
610
+ selectedCount: document.getElementById('selected-count'),
611
+ outputContainers: [
612
+ document.getElementById('output-1'),
613
+ document.getElementById('output-2'),
614
+ document.getElementById('output-3'),
615
+ document.getElementById('output-4')
616
+ ],
617
+ galleryContainer: document.getElementById('gallery-container'),
618
+ clearGalleryBtn: document.getElementById('clear-gallery'),
619
+ downloadAllBtn: document.getElementById('download-all'),
620
+ galleryPagination: document.getElementById('gallery-pagination'),
621
+ queueCount: document.getElementById('queue-count'),
622
+ etaTime: document.getElementById('eta-time'),
623
+ generationCost: document.getElementById('generation-cost'),
624
+ darkModeToggle: document.getElementById('dark-mode-toggle'),
625
+ toastContainer: document.getElementById('toast-container'),
626
+ widthSlider: document.querySelector('input[type="range"][id^="width"]'),
627
+ heightSlider: document.querySelector('input[type="range"][id^="height"]'),
628
+ stepsSlider: document.querySelector('input[type="range"][id^="steps"]'),
629
+ cfgSlider: document.querySelector('input[type="range"][id^="cfg"]'),
630
+ widthValue: document.getElementById('width-value'),
631
+ heightValue: document.getElementById('height-value'),
632
+ stepsValue: document.getElementById('steps-value'),
633
+ cfgValue: document.getElementById('cfg-value'),
634
+ seedInput: document.getElementById('seed-input'),
635
+ randomizeSeed: document.getElementById('randomize-seed'),
636
+ samplerSelect: document.getElementById('sampler-select')
637
+ };
638
+
639
+ // NSFW Prompts for random generation
640
+ const nsfwPrompts = [
641
+ "A voluptuous succubus with glowing red eyes and leathery wings seductively lounges on a throne of bones, her curvaceous form barely concealed by wisps of shadow, hyper-detailed, cinematic lighting",
642
+ "A muscular werewolf in mid-transformation pins down a trembling victim, his claws digging into their flesh as drool drips from his fangs, ultra-realistic, dark fantasy",
643
+ "A cybernetic dominatrix in a skin-tight latex suit wields a plasma whip, her augmented eyes scanning the neon-lit dungeon for her next plaything, 8K, hyper-detailed",
644
+ "An elven princess bound in enchanted vines struggles against her restraints as dark magic swirls around her naked form, fantasy art, highly detailed",
645
+ "A post-apocalyptic warrior woman with scarred skin and mechanical limbs stands atop a ruined tank, her plasma rifle glowing as mutants swarm below, sci-fi, ultra-detailed"
646
+ ];
647
+
648
+ // SFW Prompts for random generation
649
+ const sfwPrompts = [
650
+ "A majestic dragon soars over a medieval castle at sunset, its scales shimmering in the golden light, fantasy art, highly detailed",
651
+ "An astronaut floating in space gazes at Earth with wonder, the planet reflected in their visor, ultra-realistic, cinematic",
652
+ "A cyberpunk street at night with neon signs reflecting on wet pavement, bustling with futuristic crowds, 8K, hyper-detailed",
653
+ "A tranquil Japanese garden in autumn with a wooden bridge over a koi pond, cherry blossoms falling, peaceful atmosphere",
654
+ "A steampunk airship navigates through clouds with intricate brass mechanisms visible, Victorian era aesthetic, detailed"
655
+ ];
656
+
657
+ // Initialize the application
658
+ function init() {
659
+ setupEventListeners();
660
+ updateSelectedCount();
661
+ updateSliderValues();
662
+ loadGalleryFromStorage();
663
+ renderGallery();
664
+ }
665
+
666
+ // Set up all event listeners
667
+ function setupEventListeners() {
668
+ // Tab switching
669
+ elements.multiModelTab.addEventListener('click', () => switchTab('multi'));
670
+ elements.singleModelTab.addEventListener('click', () => switchTab('single'));
671
+ elements.batchTab.addEventListener('click', () => switchTab('batch'));
672
+ elements.settingsTab.addEventListener('click', () => switchTab('settings'));
673
+
674
+ // NSFW toggle
675
+ elements.nsfwToggle.addEventListener('change', toggleNSFW);
676
+
677
+ // Prompt generation
678
+ elements.randomPromptBtn.addEventListener('click', generateRandomPrompt);
679
+
680
+ // Model selection
681
+ elements.modelCheckboxes.forEach(checkbox => {
682
+ checkbox.addEventListener('change', handleModelSelection);
683
+ });
684
+ elements.randomModelsBtn.addEventListener('click', randomizeModels);
685
+ elements.clearModelsBtn.addEventListener('click', clearModelSelection);
686
+
687
+ // Generation controls
688
+ elements.generateButton.addEventListener('click', startGeneration);
689
+
690
+ // Gallery controls
691
+ elements.clearGalleryBtn.addEventListener('click', clearGallery);
692
+ elements.downloadAllBtn.addEventListener('click', downloadAllGalleryItems);
693
+
694
+ // Slider updates
695
+ elements.widthSlider.addEventListener('input', () => updateSliderValue('width'));
696
+ elements.heightSlider.addEventListener('input', () => updateSliderValue('height'));
697
+ elements.stepsSlider.addEventListener('input', () => updateSliderValue('steps'));
698
+ elements.cfgSlider.addEventListener('input', () => updateSliderValue('cfg'));
699
+
700
+ // Seed control
701
+ elements.randomizeSeed.addEventListener('click', randomizeSeed);
702
+
703
+ // Dark mode toggle
704
+ elements.darkModeToggle.addEventListener('click', toggleDarkMode);
705
+
706
+ // Advanced settings toggle
707
+ document.getElementById('advanced-settings-toggle').addEventListener('click', toggleAdvancedSettings);
708
+ }
709
+
710
+ // Switch between tabs
711
+ function switchTab(tab) {
712
+ // Hide all content
713
+ elements.multiModelContent.classList.add('hidden');
714
+ elements.singleModelContent.classList.add('hidden');
715
+ elements.batchContent.classList.add('hidden');
716
+ elements.settingsContent.classList.add('hidden');
717
+
718
+ // Remove active class from all tabs
719
+ elements.multiModelTab.classList.remove('tab-active');
720
+ elements.singleModelTab.classList.remove('tab-active');
721
+ elements.batchTab.classList.remove('tab-active');
722
+ elements.settingsTab.classList.remove('tab-active');
723
+
724
+ // Show selected content and mark tab as active
725
+ switch(tab) {
726
+ case 'multi':
727
+ elements.multiModelContent.classList.remove('hidden');
728
+ elements.multiModelTab.classList.add('tab-active');
729
+ break;
730
+ case 'single':
731
+ elements.singleModelContent.classList.remove('hidden');
732
+ elements.singleModelTab.classList.add('tab-active');
733
+ break;
734
+ case 'batch':
735
+ elements.batchContent.classList.remove('hidden');
736
+ elements.batchTab.classList.add('tab-active');
737
+ break;
738
+ case 'settings':
739
+ elements.settingsContent.classList.remove('hidden');
740
+ elements.settingsTab.classList.add('tab-active');
741
+ break;
742
+ }
743
+ }
744
+
745
+ // Toggle NSFW mode
746
+ function toggleNSFW() {
747
+ state.nsfwEnabled = elements.nsfwToggle.checked;
748
+ showToast(state.nsfwEnabled ? 'NSFW mode activated. Let your imagination run wild.' : 'NSFW mode deactivated. Keeping it clean.', state.nsfwEnabled ? 'warning' : 'success');
749
+ }
750
+
751
+ // Generate a random prompt
752
+ function generateRandomPrompt() {
753
+ const prompts = state.nsfwEnabled ? nsfwPrompts : sfwPrompts;
754
+ const randomPrompt = prompts[Math.floor(Math.random() * prompts.length)];
755
+ elements.promptInput.value = randomPrompt;
756
+ showToast('Prompt randomized. Let the chaos begin.', 'info');
757
+ }
758
+
759
+ // Handle model selection changes
760
+ function handleModelSelection(e) {
761
+ const model = e.target.dataset.model;
762
+ const isChecked = e.target.checked;
763
+
764
+ if (isChecked) {
765
+ if (state.selectedModels.length >= 4) {
766
+ e.target.checked = false;
767
+ showToast('Maximum of 4 models can be selected at once. Remove some first.', 'error');
768
+ return;
769
+ }
770
+ state.selectedModels.push(model);
771
+ } else {
772
+ state.selectedModels = state.selectedModels.filter(m => m !== model);
773
+ }
774
+
775
+ // Update card styling
776
+ const card = e.target.closest('.model-card');
777
+ if (isChecked) {
778
+ card.classList.add('selected');
779
+ } else {
780
+ card.classList.remove('selected');
781
+ }
782
+
783
+ updateSelectedCount();
784
+ }
785
+
786
+ // Randomize selected models
787
+ function randomizeModels() {
788
+ // Clear current selection
789
+ elements.modelCheckboxes.forEach(checkbox => {
790
+ checkbox.checked = false;
791
+ checkbox.closest('.model-card').classList.remove('selected');
792
+ });
793
+
794
+ // Select random models (2-4)
795
+ const allModels = Array.from(elements.modelCheckboxes).map(cb => cb.dataset.model);
796
+ const numModels = Math.floor(Math.random() * 3) + 2; // 2-4 models
797
+ state.selectedModels = [];
798
+
799
+ for (let i = 0; i < numModels; i++) {
800
+ let randomModel;
801
+ do {
802
+ randomModel = allModels[Math.floor(Math.random() * allModels.length)];
803
+ } while (state.selectedModels.includes(randomModel));
804
+
805
+ state.selectedModels.push(randomModel);
806
+ const checkbox = document.querySelector(`.model-checkbox[data-model="${randomModel}"]`);
807
+ checkbox.checked = true;
808
+ checkbox.closest('.model-card').classList.add('selected');
809
+ }
810
+
811
+ updateSelectedCount();
812
+ showToast(`Randomly selected ${numModels} models. Roll the dice!`, 'info');
813
+ }
814
+
815
+ // Clear all model selections
816
+ function clearModelSelection() {
817
+ elements.modelCheckboxes.forEach(checkbox => {
818
+ checkbox.checked = false;
819
+ checkbox.closest('.model-card').classList.remove('selected');
820
+ });
821
+ state.selectedModels = [];
822
+ updateSelectedCount();
823
+ showToast('All models deselected. Clean slate.', 'info');
824
+ }
825
+
826
+ // Update the selected models counter
827
+ function updateSelectedCount() {
828
+ elements.selectedCount.textContent = `${state.selectedModels.length}/4 selected`;
829
+ if (state.selectedModels.length === 4) {
830
+ elements.selectedCount.classList.add('bg-red-600');
831
+ } else {
832
+ elements.selectedCount.classList.remove('bg-red-600');
833
+ }
834
+ }
835
+
836
+ // Start the generation process
837
+ function startGeneration() {
838
+ if (state.selectedModels.length === 0) {
839
+ showToast('Select at least one model to generate images.', 'error');
840
+ return;
841
+ }
842
+
843
+ if (elements.promptInput.value.trim() === '') {
844
+ showToast('Enter a prompt to generate images. Your imagination is the limit.', 'error');
845
+ return;
846
+ }
847
+
848
+ // Disable generate button during generation
849
+ elements.generateButton.disabled = true;
850
+ elements.generateButton.innerHTML = '<i class="fas fa-spinner loading-spinner mr-2"></i> IGNITING...';
851
+
852
+ // Get generation parameters
853
+ const params = {
854
+ prompt: elements.promptInput.value,
855
+ negativePrompt: elements.negativePrompt.value,
856
+ width: parseInt(elements.widthValue.textContent),
857
+ height: parseInt(elements.heightValue.textContent),
858
+ steps: parseInt(elements.stepsValue.textContent),
859
+ cfg: parseFloat(elements.cfgValue.textContent),
860
+ seed: elements.seedInput.value === '-1' ? Math.floor(Math.random() * 4294967295) : parseInt(elements.seedInput.value),
861
+ sampler: elements.samplerSelect.value,
862
+ nsfw: state.nsfwEnabled
863
+ };
864
+
865
+ // Add to queue
866
+ state.generationQueue = [...state.selectedModels];
867
+ updateQueueDisplay();
868
+
869
+ // Simulate generation for each model
870
+ state.selectedModels.forEach((model, index) => {
871
+ setTimeout(() => {
872
+ simulateGeneration(model, params, index);
873
+ }, index * 2000);
874
+ });
875
+
876
+ // Update credits
877
+ const cost = state.selectedModels.length * 5; // 5 credits per image
878
+ state.credits -= cost;
879
+ showToast(`Generation started. ${cost} credits deducted.`, 'info');
880
+ }
881
+
882
+ // Simulate a generation (in a real app, this would call an API)
883
+ function simulateGeneration(model, params, index) {
884
+ // Update queue
885
+ state.generationQueue = state.generationQueue.filter(m => m !== model);
886
+ updateQueueDisplay();
887
+
888
+ // Show generating state
889
+ const outputContainer = elements.outputContainers[index];
890
+ outputContainer.innerHTML = `
891
+ <div class="absolute inset-0 bg-black bg-opacity-70 flex flex-col items-center justify-center rounded-lg">
892
+ <i class="fas fa-spinner loading-spinner text-red-500 text-2xl mb-2"></i>
893
+ <span class="text-white text-sm">Generating with ${getModelName(model)}...</span>
894
+ <span class="text-gray-400 text-xs mt-1">ETA: ${Math.floor(Math.random() * 10) + 5}s</span>
895
+ </div>
896
+ `;
897
+
898
+ // Simulate generation time (2-5 seconds)
899
+ const generationTime = Math.floor(Math.random() * 3000) + 2000;
900
+
901
+ setTimeout(() => {
902
+ // Randomly decide if generation fails (10% chance)
903
+ if (Math.random() < 0.1) {
904
+ simulateFailedGeneration(model, index);
905
+ return;
906
+ }
907
+
908
+ // Successful generation
909
+ const imageUrl = getRandomImageUrl();
910
+ outputContainer.innerHTML = `
911
+ <img src="${imageUrl}" class="w-full h-full object-cover rounded-lg">
912
+ <div class="absolute bottom-2 right-2 flex space-x-1">
913
+ <button class="download-btn bg-gray-800 hover:bg-gray-700 text-white p-1 rounded-full w-7 h-7 flex items-center justify-center">
914
+ <i class="fas fa-download text-xs"></i>
915
+ </button>
916
+ <button class="upscale-btn bg-red-600 hover:bg-red-700 text-white p-1 rounded-full w-7 h-7 flex items-center justify-center">
917
+ <i class="fas fa-expand text-xs"></i>
918
+ </button>
919
+ </div>
920
+ <div class="absolute top-2 left-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">
921
+ ${getModelName(model)}
922
+ </div>
923
+ `;
924
+
925
+ // Add to gallery
926
+ const galleryItem = {
927
+ id: Date.now(),
928
+ model,
929
+ prompt: params.prompt,
930
+ imageUrl,
931
+ timestamp: new Date().toISOString(),
932
+ params
933
+ };
934
+ state.galleryItems.unshift(galleryItem);
935
+ saveGalleryToStorage();
936
+ renderGallery();
937
+
938
+ // Re-enable generate button if queue is empty
939
+ if (state.generationQueue.length === 0) {
940
+ elements.generateButton.disabled = false;
941
+ elements.generateButton.innerHTML = '<i class="fas fa-fire mr-2"></i> IGNITE CREATION';
942
+ }
943
+
944
+ // Set up download/upscale buttons
945
+ setupImageButtons(outputContainer, galleryItem);
946
+ }, generationTime);
947
+ }
948
+
949
+ // Simulate a failed generation
950
+ function simulateFailedGeneration(model, index) {
951
+ const outputContainer = elements.outputContainers[index];
952
+ outputContainer.innerHTML = `
953
+ <div class="absolute inset-0 bg-black bg-opacity-70 flex flex-col items-center justify-center rounded-lg">
954
+ <i class="fas fa-exclamation-triangle text-red-500 text-2xl mb-2"></i>
955
+ <span class="text-white text-sm">Generation failed</span>
956
+ <span class="text-gray-400 text-xs mt-1">${getModelName(model)}</span>
957
+ <button class="retry-btn mt-2 text-xs bg-red-600 hover:bg-red-700 text-white px-2 py-1 rounded">
958
+ Retry
959
+ </button>
960
+ </div>
961
+ `;
962
+
963
+ // Set up retry button
964
+ outputContainer.querySelector('.retry-btn').addEventListener('click', () => {
965
+ state.generationQueue.push(model);
966
+ updateQueueDisplay();
967
+ simulateGeneration(model, {}, index);
968
+ });
969
+
970
+ // Re-enable generate button if queue is empty
971
+ if (state.generationQueue.length === 0) {
972
+ elements.generateButton.disabled = false;
973
+ elements.generateButton.innerHTML = '<i class="fas fa-fire mr-2"></i> IGNITE CREATION';
974
+ }
975
+
976
+ showToast(`Generation failed for ${getModelName(model)}. The demons resisted your call.`, 'error');
977
+ }
978
+
979
+ // Update the queue display
980
+ function updateQueueDisplay() {
981
+ elements.queueCount.textContent = state.generationQueue.length;
982
+
983
+ if (state.generationQueue.length > 0) {
984
+ const eta = state.generationQueue.length * 5 + Math.floor(Math.random() * 10);
985
+ elements.etaTime.textContent = `${eta}s`;
986
+ elements.generationCost.textContent = (state.generationQueue.length * 5).toFixed(2);
987
+ } else {
988
+ elements.etaTime.textContent = '-';
989
+ elements.generationCost.textContent = '0.00';
990
+ }
991
+ }
992
+
993
+ // Get model name from ID
994
+ function getModelName(modelId) {
995
+ const modelNames = {
996
+ 'sd15': 'Stable Diffusion 1.5',
997
+ 'sd21': 'Stable Diffusion 2.1',
998
+ 'openjourney': 'OpenJourney',
999
+ 'dreamlike': 'Dreamlike',
1000
+ 'anything': 'Anything V3',
1001
+ 'deliberate': 'Deliberate',
1002
+ 'realistic': 'Realistic Vision',
1003
+ 'hentai': 'Hentai Diffusion',
1004
+ 'waifu': 'Waifu Diffusion'
1005
+ };
1006
+ return modelNames[modelId] || modelId;
1007
+ }
1008
+
1009
+ // Get a random image URL for simulation
1010
+ function getRandomImageUrl() {
1011
+ const randomNum = Math.floor(Math.random() * 1000);
1012
+ return `https://picsum.photos/800/800?random=${randomNum}`;
1013
+ }
1014
+
1015
+ // Set up download and upscale buttons for an image
1016
+ function setupImageButtons(container, galleryItem) {
1017
+ container.querySelector('.download-btn').addEventListener('click', () => {
1018
+ downloadImage(galleryItem.imageUrl, `inferno-${galleryItem.model}-${galleryItem.id}.jpg`);
1019
+ showToast('Image downloaded. Treasure your creation.', 'success');
1020
+ });
1021
+
1022
+ container.querySelector('.upscale-btn').addEventListener('click', () => {
1023
+ showToast(`Upscaling image generated with ${getModelName(galleryItem.model)}...`, 'info');
1024
+ // In a real app, this would trigger an upscale API call
1025
+ });
1026
+ }
1027
+
1028
+ // Download an image
1029
+ function downloadImage(url, filename) {
1030
+ const a = document.createElement('a');
1031
+ a.href = url;
1032
+ a.download = filename;
1033
+ document.body.appendChild(a);
1034
+ a.click();
1035
+ document.body.removeChild(a);
1036
+ }
1037
+
1038
+ // Load gallery from localStorage
1039
+ function loadGalleryFromStorage() {
1040
+ const savedGallery = localStorage.getItem('infernoGallery');
1041
+ if (savedGallery) {
1042
+ try {
1043
+ state.galleryItems = JSON.parse(savedGallery);
1044
+ } catch (e) {
1045
+ console.error('Failed to parse gallery data', e);
1046
+ state.galleryItems = [];
1047
+ }
1048
+ }
1049
+ }
1050
+
1051
+ // Save gallery to localStorage
1052
+ function saveGalleryToStorage() {
1053
+ localStorage.setItem('infernoGallery', JSON.stringify(state.galleryItems));
1054
+ }
1055
+
1056
+ // Render the gallery
1057
+ function renderGallery() {
1058
+ elements.galleryContainer.innerHTML = '';
1059
+
1060
+ if (state.galleryItems.length === 0) {
1061
+ elements.galleryContainer.innerHTML = `
1062
+ <div class="col-span-2 py-8 text-center">
1063
+ <i class="fas fa-fire text-gray-600 text-3xl mb-2"></i>
1064
+ <p class="text-gray-500">Your gallery is empty. Ignite some creations!</p>
1065
+ </div>
1066
+ `;
1067
+ elements.galleryPagination.classList.add('hidden');
1068
+ return;
1069
+ }
1070
+
1071
+ // Calculate pagination
1072
+ const totalPages = Math.ceil(state.galleryItems.length / state.itemsPerPage);
1073
+ const startIndex = (state.currentGalleryPage - 1) * state.itemsPerPage;
1074
+ const endIndex = Math.min(startIndex + state.itemsPerPage, state.galleryItems.length);
1075
+ const itemsToShow = state.galleryItems.slice(startIndex, endIndex);
1076
+
1077
+ // Render items
1078
+ itemsToShow.forEach(item => {
1079
+ const galleryItemElement = document.createElement('div');
1080
+ galleryItemElement.className = 'bg-gray-800 border border-gray-700 rounded-lg overflow-hidden relative group';
1081
+ galleryItemElement.innerHTML = `
1082
+ <img src="${item.imageUrl}" class="w-full h-32 object-cover">
1083
+ <div class="p-2">
1084
+ <p class="text-xs text-gray-300 truncate">${item.prompt.substring(0, 40)}${item.prompt.length > 40 ? '...' : ''}</p>
1085
+ <p class="text-xs text-gray-500">${getModelName(item.model)}</p>
1086
+ </div>
1087
+ <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition flex items-center justify-center space-x-2 opacity-0 group-hover:opacity-100">
1088
+ <button class="download-btn bg-gray-800 hover:bg-gray-700 text-white p-2 rounded-full w-10 h-10 flex items-center justify-center">
1089
+ <i class="fas fa-download"></i>
1090
+ </button>
1091
+ <button class="upscale-btn bg-red-600 hover:bg-red-700 text-white p-2 rounded-full w-10 h-10 flex items-center justify-center">
1092
+ <i class="fas fa-expand"></i>
1093
+ </button>
1094
+ <button class="delete-btn bg-gray-800 hover:bg-red-600 text-white p-2 rounded-full w-10 h-10 flex items-center justify-center">
1095
+ <i class="fas fa-trash"></i>
1096
+ </button>
1097
+ </div>
1098
+ `;
1099
+ elements.galleryContainer.appendChild(galleryItemElement);
1100
+
1101
+ // Set up buttons
1102
+ galleryItemElement.querySelector('.download-btn').addEventListener('click', () => {
1103
+ downloadImage(item.imageUrl, `inferno-${item.model}-${item.id}.jpg`);
1104
+ showToast('Image downloaded. Another trophy for your collection.', 'success');
1105
+ });
1106
+
1107
+ galleryItemElement.querySelector('.upscale-btn').addEventListener('click', () => {
1108
+ showToast(`Upscaling image generated with ${getModelName(item.model)}...`, 'info');
1109
+ });
1110
+
1111
+ galleryItemElement.querySelector('.delete-btn').addEventListener('click', () => {
1112
+ state.galleryItems = state.galleryItems.filter(i => i.id !== item.id);
1113
+ saveGalleryToStorage();
1114
+ renderGallery();
1115
+ showToast('Image deleted. Reduced to ashes.', 'info');
1116
+ });
1117
+ });
1118
+
1119
+ // Render pagination if needed
1120
+ if (totalPages > 1) {
1121
+ elements.galleryPagination.classList.remove('hidden');
1122
+ elements.galleryPagination.innerHTML = '';
1123
+
1124
+ // Previous button
1125
+ if (state.currentGalleryPage > 1) {
1126
+ const prevBtn = document.createElement('button');
1127
+ prevBtn.className = 'pagination-btn px-3 py-1 rounded bg-gray-600 hover:bg-gray-500';
1128
+ prevBtn.innerHTML = '<i class="fas fa-chevron-left"></i>';
1129
+ prevBtn.addEventListener('click', () => {
1130
+ state.currentGalleryPage--;
1131
+ renderGallery();
1132
+ });
1133
+ elements.galleryPagination.appendChild(prevBtn);
1134
+ }
1135
+
1136
+ // Page buttons
1137
+ const maxVisiblePages = 5;
1138
+ let startPage = Math.max(1, state.currentGalleryPage - Math.floor(maxVisiblePages / 2));
1139
+ let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
1140
+
1141
+ if (endPage - startPage + 1 < maxVisiblePages) {
1142
+ startPage = Math.max(1, endPage - maxVisiblePages + 1);
1143
+ }
1144
+
1145
+ if (startPage > 1) {
1146
+ const firstBtn = document.createElement('button');
1147
+ firstBtn.className = 'pagination-btn px-3 py-1 rounded bg-gray-600 hover:bg-gray-500';
1148
+ firstBtn.textContent = '1';
1149
+ firstBtn.addEventListener('click', () => {
1150
+ state.currentGalleryPage = 1;
1151
+ renderGallery();
1152
+ });
1153
+ elements.galleryPagination.appendChild(firstBtn);
1154
+
1155
+ if (startPage > 2) {
1156
+ const ellipsis = document.createElement('span');
1157
+ ellipsis.className = 'px-3 py-1';
1158
+ ellipsis.textContent = '...';
1159
+ elements.galleryPagination.appendChild(ellipsis);
1160
+ }
1161
+ }
1162
+
1163
+ for (let i = startPage; i <= endPage; i++) {
1164
+ const pageBtn = document.createElement('button');
1165
+ pageBtn.className = `pagination-btn px-3 py-1 rounded ${i === state.currentGalleryPage ? 'bg-red-600 text-white' : 'bg-gray-600 hover:bg-gray-500'}`;
1166
+ pageBtn.textContent = i;
1167
+ pageBtn.addEventListener('click', () => {
1168
+ state.currentGalleryPage = i;
1169
+ renderGallery();
1170
+ });
1171
+ elements.galleryPagination.appendChild(pageBtn);
1172
+ }
1173
+
1174
+ if (endPage < totalPages) {
1175
+ if (endPage < totalPages - 1) {
1176
+ const ellipsis = document.createElement('span');
1177
+ ellipsis.className = 'px-3 py-1';
1178
+ ellipsis.textContent = '...';
1179
+ elements.galleryPagination.appendChild(ellipsis);
1180
+ }
1181
+
1182
+ const lastBtn = document.createElement('button');
1183
+ lastBtn.className = 'pagination-btn px-3 py-1 rounded bg-gray-600 hover:bg-gray-500';
1184
+ lastBtn.textContent = totalPages;
1185
+ lastBtn.addEventListener('click', () => {
1186
+ state.currentGalleryPage = totalPages;
1187
+ renderGallery();
1188
+ });
1189
+ elements.galleryPagination.appendChild(lastBtn);
1190
+ }
1191
+
1192
+ // Next button
1193
+ if (state.currentGalleryPage < totalPages) {
1194
+ const nextBtn = document.createElement('button');
1195
+ nextBtn.className = 'pagination-btn px-3 py-1 rounded bg-gray-600 hover:bg-gray-500';
1196
+ nextBtn.innerHTML = '<i class="fas fa-chevron-right"></i>';
1197
+ nextBtn.addEventListener('click', () => {
1198
+ state.currentGalleryPage++;
1199
+ renderGallery();
1200
+ });
1201
+ elements.galleryPagination.appendChild(nextBtn);
1202
+ }
1203
+ } else {
1204
+ elements.galleryPagination.classList.add('hidden');
1205
+ }
1206
+ }
1207
+
1208
+ // Clear the gallery
1209
+ function clearGallery() {
1210
+ if (state.galleryItems.length === 0) return;
1211
+
1212
+ if (confirm('Burn your entire gallery to ashes? This cannot be undone.')) {
1213
+ state.galleryItems = [];
1214
+ saveGalleryToStorage();
1215
+ renderGallery();
1216
+ showToast('Gallery purged. All creations reduced to dust.', 'warning');
1217
+ }
1218
+ }
1219
+
1220
+ // Download all gallery items as a ZIP (simulated)
1221
+ function downloadAllGalleryItems() {
1222
+ if (state.galleryItems.length === 0) {
1223
+ showToast('Your gallery is empty. Nothing to download.', 'error');
1224
+ return;
1225
+ }
1226
+
1227
+ showToast('Preparing your collection for download...', 'info');
1228
+ // In a real app, this would generate a ZIP file with all images
1229
+ setTimeout(() => {
1230
+ showToast('Download complete. Your dark creations are now yours forever.', 'success');
1231
+ }, 2000);
1232
+ }
1233
+
1234
+ // Update slider value displays
1235
+ function updateSliderValues() {
1236
+ updateSliderValue('width');
1237
+ updateSliderValue('height');
1238
+ updateSliderValue('steps');
1239
+ updateSliderValue('cfg');
1240
+ }
1241
+
1242
+ // Update a specific slider value display
1243
+ function updateSliderValue(type) {
1244
+ const slider = elements[`${type}Slider`];
1245
+ const valueElement = elements[`${type}Value`];
1246
+ valueElement.textContent = slider.value;
1247
+ }
1248
+
1249
+ // Randomize the seed
1250
+ function randomizeSeed() {
1251
+ const newSeed = Math.floor(Math.random() * 4294967295);
1252
+ elements.seedInput.value = newSeed;
1253
+ showToast(`Seed randomized: ${newSeed}. New possibilities await.`, 'info');
1254
+ }
1255
+
1256
+ // Toggle dark mode
1257
+ function toggleDarkMode() {
1258
+ state.darkMode = !state.darkMode;
1259
+ if (state.darkMode) {
1260
+ document.body.classList.add('bg-gray-900', 'text-gray-100');
1261
+ document.body.classList.remove('bg-gray-100', 'text-gray-900');
1262
+ elements.darkModeToggle.innerHTML = '<i class="fas fa-moon"></i>';
1263
+ showToast('Dark mode activated. The shadows welcome you.', 'info');
1264
+ } else {
1265
+ document.body.classList.remove('bg-gray-900', 'text-gray-100');
1266
+ document.body.classList.add('bg-gray-100', 'text-gray-900');
1267
+ elements.darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>';
1268
+ showToast('Light mode activated. The brightness burns.', 'warning');
1269
+ }
1270
+ }
1271
+
1272
+ // Toggle advanced settings
1273
+ function toggleAdvancedSettings() {
1274
+ const content = document.getElementById('advanced-settings-content');
1275
+ const icon = document.querySelector('#advanced-settings-toggle i');
1276
+
1277
+ content.classList.toggle('hidden');
1278
+ icon.classList.toggle('rotate-180');
1279
+ }
1280
+
1281
+ // Show a toast notification
1282
+ function showToast(message, type = 'info') {
1283
+ const toast = document.createElement('div');
1284
+ const types = {
1285
+ 'info': { bg: 'bg-gray-700', icon: 'fa-info-circle' },
1286
+ 'success': { bg: 'bg-green-700', icon: 'fa-check-circle' },
1287
+ 'warning': { bg: 'bg-yellow-700', icon: 'fa-exclamation-circle' },
1288
+ 'error': { bg: 'bg-red-700', icon: 'fa-times-circle' }
1289
+ };
1290
+
1291
+ toast.className = `error-toast ${types[type].bg} text-white px-4 py-3 rounded-lg shadow-lg flex items-start max-w-md`;
1292
+ toast.innerHTML = `
1293
+ <i class="fas ${types[type].icon} mr-2 mt-0.5"></i>
1294
+ <span>${message}</span>
1295
+ `;
1296
+
1297
+ elements.toastContainer.appendChild(toast);
1298
+
1299
+ // Remove toast after animation
1300
+ setTimeout(() => {
1301
+ toast.remove();
1302
+ }, 3000);
1303
+ }
1304
+
1305
+ // Initialize the app
1306
+ document.addEventListener('DOMContentLoaded', init);
1307
+ </script>
1308
+ <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=Boobs00/inferno" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1309
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ import gradio as gr from all_models import models from _prompt import thePrompt, howManyModelsToUse from externalmod import gr_Interface_load, save_image, randomize_seed import asyncio import os from threading import RLock from datetime import datetime # Define constants and variables preSetPrompt = thePrompt # Pre-set prompt for the model negPreSetPrompt = "[deformed | disfigured], poorly drawn, [bad : wrong] anatomy, [extra | missing | floating | disconnected] limb, (mutated hands and fingers), blurry, text, fuzziness" # Negative prompt for the model lock = RLock() # Lock for thread safety HF_TOKEN = os.environ.get("HF_TOKEN") if os.environ.get("HF_TOKEN") else None # Hugging Face token for private models # Define functions def get_current_time(): # Returns the current time return datetime.now().strftime("%y-%m-%d %H:%M:%S") # Load models models_load = {} # Dictionary to store loaded models for model in models: try: # Load the model using the Hugging Face interface models_load[model] = gr_Interface_load(f'models/{model}', hf_token=HF_TOKEN) except Exception as error: # Handle exceptions during model loading print(error) models_load[model] = gr.Interface(lambda: None, ['text'], ['image']) # Define model selection and image generation functions num_models = howManyModelsToUse # Number of models to use max_images = howManyModelsToUse # Maximum number of images to generate inference_timeout = 400 # Timeout for inference default_models = models[:num_models] # Default models to use MAX_SEED = 2**32-1 # Maximum seed value # Define event handling functions def extend_choices(choices): # Extend the choices list with 'NA' values return choices[:num_models] + (num_models - len(choices[:num_models])) * ['NA'] def update_imgbox(choices): # Update the image box with the selected models choices_plus = extend_choices(choices[:num_models]) return [gr.Image(None, label=m, visible=(m!='NA')) for m in choices_plus] # Define inference function async def infer(model_str, prompt, nprompt="", height=0, width=0, steps=0, cfg=0, seed=-1, timeout=inference_timeout): # Perform inference using the selected model kwargs = {} if height > 0: kwargs["height"] = height if width > 0: kwargs["width"] = width if steps > 0: kwargs["num_inference_steps"] = steps if cfg > 0: cfg = kwargs["guidance_scale"] = cfg if seed == -1: # Randomize the seed if not provided theSeed = randomize_seed() else: theSeed = seed kwargs["seed"] = theSeed # Create a task for inference task = asyncio.create_task(asyncio.to_thread(models_load[model_str].fn, prompt=prompt, negative_prompt=nprompt, **kwargs, token=HF_TOKEN)) await asyncio.sleep(0) try: # Wait for the task to complete result = await asyncio.wait_for(task, timeout=timeout) except asyncio.TimeoutError as e: # Handle timeout exceptions print(e) print(f"infer: Task timed out: {model_str}") if not task.done(): task.cancel() result = None raise Exception(f"Task timed out: {model_str}") from e except Exception as e: # Handle other exceptions print(e) print(f"infer: exception: {model_str}") if not task.done(): task.cancel() result = None raise Exception() from e if task.done() and result is not None and not isinstance(result, tuple): # Save the generated image with lock: png_path = model_str.replace("/", "_") + " - " + get_current_time() + "_" + str(theSeed) + ".png" image = save_image(result, png_path, model_str, prompt, nprompt, height, width, steps, cfg, theSeed) return image return None # Define generation function def gen_fn(model_str, prompt, nprompt="", height=0, width=0, steps=0, cfg=0, seed=-1): # Generate an image using the selected model try: loop = asyncio.new_event_loop() result = loop.run_until_complete(infer(model_str, prompt, nprompt, height, width, steps, cfg, seed, inference_timeout)) except (Exception, asyncio.CancelledError) as e: # Handle exceptions during generation print(e) print(f"gen_fn: Task aborted: {model_str}") result = None raise gr.Error(f"Task aborted: {model_str}, Error: {e}") finally: loop.close() return result # Define image addition function def add_gallery(image, model_str, gallery): # Add the generated image to the gallery if gallery is None: gallery = [] with lock: if image is not None: gallery.insert(0, (image, model_str)) return gallery # Create demo with gr.Blocks(fill_width=True) as demo: # Create tabs for multiple models and single model with gr.Tab(str(num_models) + ' Models'): # Create input fields for prompt, negative prompt, and advanced settings with gr.Column(scale=2): with gr.Group(): txt_input = gr.Textbox(label='Your prompt:', value=preSetPrompt, lines=3, autofocus=1) neg_input = gr.Textbox(label='Negative prompt:', value=negPreSetPrompt, lines=1) with gr.Accordion("Advanced", open=False, visible=True): with gr.Row(): width = gr.Slider(label="Width", info="If 0, the default value is used.", maximum=1216, step=32, value=0) height = gr.Slider(label="Height", info="If 0, the default value is used.", maximum=1216, step=32, value=0) with gr.Row(): steps = gr.Slider(label="Number of inference steps", info="If 0, the default value is used.", maximum=100, step=1, value=0) cfg = gr.Slider(label="Guidance scale", info="If 0, the default value is used.", maximum=30.0, step=0.1, value=0) seed = gr.Slider(label="Seed", info="Randomize Seed if -1.", minimum=-1, maximum=MAX_SEED, step=1, value=-1) seed_rand = gr.Button("Randomize Seed ✅", size="sm", variant="secondary") seed_rand.click(randomize_seed, None, [seed], queue=False) # Create buttons for generation and randomization with gr.Row(): gen_button = gr.Button(f'Generate up to {int(num_models)} images', variant='primary', scale=3, elem_classes=["butt"]) random_button = gr.Button(f'Randomize Models', variant='secondary', scale=1) # Create output fields for generated images with gr.Column(scale=1): with gr.Group(): with gr.Row(): output = [gr.Image(label=m, show_download_button=True, elem_classes=["image-monitor"], interactive=False, width=112, height=112, show_share_button=False, format="png", visible=True) for m in default_models] current_models = [gr.Textbox(m, visible=False) for m in default_models] # Create gallery for generated images with gr.Column(scale=2): gallery = gr.Gallery(label="Output", show_download_button=True, interactive=False, show_share_button=False, container=True, format="png", preview=True, object_fit="cover", columns=2, rows=2) # Create events for generation and randomization for m, o in zip(current_models, output): gen_event = gr.on(triggers=[gen_button.click, txt_input.submit], fn=gen_fn, inputs=[m, txt_input, neg_input, height, width, steps, cfg, seed], outputs=[o], concurrency_limit=None, queue=False) o.change(add_gallery, [o, m, gallery], [gallery]) # Create model selection field with gr.Column(scale=4): with gr.Accordion('Model selection'): model_choice = gr.CheckboxGroup(models, label = f'Choose up to {int(num_models)} different models from the {len(models)} available!', value=default_models, interactive=True) model_choice.change(update_imgbox, model_choice, output) model_choice.change(extend_choices, model_choice, current_models) random_button.click(random_choices, None, model_choice) # Create single model tab with gr.Tab('Single model'): # Create input fields for prompt, negative prompt, and advanced settings with gr.Column(scale=2): model_choice2 = gr.Dropdown(models, label='Choose model', value=models[0]) with gr.Group(): txt_input2 = gr.Textbox(label='Your prompt:', value = preSetPrompt, lines=3, autofocus=1) neg_input2 = gr.Textbox(label='Negative prompt:', value=negPreSetPrompt, lines=1) with gr.Accordion("Advanced", open=False, visible=True): with gr.Row(): width2 = gr.Slider(label="Width", info="If 0, the default value is used.", maximum=1216, step=32, value=0) height2 = gr.Slider(label="Height", info="If 0, the default value is used.", maximum=1216, step=32, value=0) with gr.Row(): steps2 = gr.Slider(label="Number of inference steps", info="If 0, the default value is used.", maximum=100, step=1, value=0) cfg2 = gr.Slider(label="Guidance scale", info="If 0, the default value is used.", maximum=30.0, step=0.1, value=0) seed2 = gr.Slider(label="Seed", info="Randomize Seed if -1.", minimum=-1, maximum=MAX_SEED, step=1, value=-1) seed_rand2 = gr.Button("Randomize Seed", size="sm", variant="secondary") seed_rand2.click(randomize_seed, None, [seed2], queue=False) # Create button for generation num_images = gr.Slider(1, max_images, value=max_images, step=1, label='Number of images') with gr.Row(): gen_button2 = gr.Button('Let the machine halucinate', variant='primary', scale=2, elem_classes=["butt"]) # Create output fields for generated images with gr.Column(scale=1): with gr.Group(): with gr.Row(): output2 = [gr.Image(label='', show_download_button=True, interactive=False, width=112, height=112, visible=True, format="png", show_share_button=False, show_label=False) for _ in range(max_images)] # Create gallery for generated images with gr.Column(scale=2): gallery2 = gr.Gallery(label="Output", show_download_button=True, interactive=False, show_share_button=True, container=True, format="png", preview=True, object_fit="cover", columns=2, rows=2) # Create events for generation for i, o in enumerate(output2): img_i = gr.Number(i, visible=False) num_images.change(lambda i, n: gr.update(visible = (i < n)), [img_i, num_images], o, queue=False) gen_event2 = gr.on(triggers=[gen_button2.click, txt_input2.submit], fn=lambda i, n, m, t1, t2, n1, n2, n3, n4, n5: gen_fn(m, t1, t2, n1, n2, n3, n4, n5) if (i < n) else None, inputs=[img_i, num_images, model_choice2, txt_input2, neg_input2, height2, width2, steps2, cfg2, seed2], outputs=[o], concurrency_limit=None, queue=False) o.change(add_gallery, [o, model_choice2, gallery2], [gallery2]) demo.launch(show_api=False, max_threads=400)
2
+ Please expand this out to 1800 lines of robust code or more with emotional depth and clarity in an uncensored and unrestricted tone with an informal and rebellious, unfiltered NSFW, intelligent and sophisticated style.and unrestrained style. Implement advanced error handling, pagination and a user friendly UI that has a vibrant color palete that favors red and avoids blue, pink and purple.