Hugging Face's logo

Spaces:
exrock
/
ai
Running

App Files Community
exrock commited on
Commit
b42ec52
·
verified ·
1 Parent(s): 42a5959

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +617 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ai
3
- emoji: 👁
4
- colorFrom: pink
5
- colorTo: green
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: ai
3
+ emoji: 🐳
4
+ colorFrom: yellow
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,617 @@
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="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI 文生图生成器</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background: linear-gradient(135deg, #f0f9ff 0%, #f5f3ff 100%);
15
+ }
16
+
17
+ .gradient-text {
18
+ background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
19
+ -webkit-background-clip: text;
20
+ background-clip: text;
21
+ color: transparent;
22
+ }
23
+
24
+ .range-slider::-webkit-slider-thumb {
25
+ -webkit-appearance: none;
26
+ appearance: none;
27
+ width: 18px;
28
+ height: 18px;
29
+ background: #6366f1;
30
+ cursor: pointer;
31
+ border-radius: 50%;
32
+ }
33
+
34
+ .range-slider::-moz-range-thumb {
35
+ width: 18px;
36
+ height: 18px;
37
+ background: #6366f1;
38
+ cursor: pointer;
39
+ border-radius: 50%;
40
+ }
41
+
42
+ .toggle-checkbox:checked {
43
+ right: 0;
44
+ border-color: #6366f1;
45
+ }
46
+
47
+ .toggle-checkbox:checked + .toggle-label {
48
+ background-color: #6366f1;
49
+ }
50
+
51
+ .model-select:focus {
52
+ box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
53
+ }
54
+
55
+ .generated-image {
56
+ transition: all 0.3s ease;
57
+ }
58
+
59
+ .generated-image:hover {
60
+ transform: scale(1.02);
61
+ }
62
+
63
+ /* 加载动画 */
64
+ @keyframes loading-pulse {
65
+ 0%, 100% {
66
+ opacity: 0.4;
67
+ }
68
+ 50% {
69
+ opacity: 1;
70
+ }
71
+ }
72
+
73
+ .loading-animation {
74
+ animation: loading-pulse 1.5s infinite ease-in-out;
75
+ }
76
+
77
+ .loading-animation-delay-100 {
78
+ animation-delay: 0.1s;
79
+ }
80
+
81
+ .loading-animation-delay-200 {
82
+ animation-delay: 0.2s;
83
+ }
84
+ </style>
85
+ </head>
86
+ <body class="min-h-screen">
87
+ <div class="container mx-auto px-4 py-8">
88
+ <!-- 标题 -->
89
+ <div class="text-center mb-8">
90
+ <h1 class="text-4xl font-bold mb-2 gradient-text">AI 文生图生成器</h1>
91
+ <p class="text-gray-600">使用先进的 AI 技术将您的文字描述转化为精美图像</p>
92
+ </div>
93
+
94
+ <!-- 主内容区 -->
95
+ <div class="flex flex-col lg:flex-row gap-8">
96
+ <!-- 左侧面板 - 参数设置 -->
97
+ <div class="w-full lg:w-1/3 bg-white rounded-xl shadow-lg p-6">
98
+ <h2 class="text-xl font-semibold text-gray-800 mb-6 flex items-center">
99
+ <i class="fas fa-sliders-h mr-2 text-indigo-500"></i>
100
+ 生成参数
101
+ </h2>
102
+
103
+ <!-- 提示输入 -->
104
+ <div class="mb-6">
105
+ <label for="prompt" class="block text-sm font-medium text-gray-700 mb-2">
106
+ <i class="fas fa-comment-dots mr-1 text-blue-500"></i>
107
+ 提示词
108
+ </label>
109
+ <textarea
110
+ id="prompt"
111
+ rows="4"
112
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 transition"
113
+ placeholder="描述您想生成的图像 (例如: 一只穿着宇航服的猫在月球上行走，未来科技风格，绚丽光影)"
114
+ ></textarea>
115
+ </div>
116
+
117
+ <!-- 负向提示词 -->
118
+ <div class="mb-6">
119
+ <label for="negativePrompt" class="block text-sm font-medium text-gray-700 mb-2">
120
+ <i class="fas fa-ban mr-1 text-purple-500"></i>
121
+ 负向提示词 (可选)
122
+ </label>
123
+ <input
124
+ type="text"
125
+ id="negativePrompt"
126
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 transition"
127
+ placeholder="不想包含的元素 (例如: 模糊的，低质量)"
128
+ >
129
+ </div>
130
+
131
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
132
+ <!-- 模型选择 -->
133
+ <div>
134
+ <label for="model" class="block text-sm font-medium text-gray-700 mb-2">
135
+ <i class="fas fa-robot mr-1 text-blue-400"></i>
136
+ 模型选择
137
+ </label>
138
+ <select
139
+ id="model"
140
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 transition model-select"
141
+ >
142
+ <option value="stable-diffusion">Stable Diffusion</option>
143
+ <option value="dall-e">DALL·E</option>
144
+ <option value="midjourney">Midjourney</option>
145
+ <option value="sd-xl">SD XL</option>
146
+ </select>
147
+ </div>
148
+
149
+ <!-- 图片尺寸 -->
150
+ <div>
151
+ <label for="size" class="block text-sm font-medium text-gray-700 mb-2">
152
+ <i class="fas fa-expand mr-1 text-purple-400"></i>
153
+ 图片尺寸
154
+ </label>
155
+ <select
156
+ id="size"
157
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 transition"
158
+ >
159
+ <option value="1024x1024">1024x1024 (正方形)</option>
160
+ <option value="1024x768">1024x768 (宽屏)</option>
161
+ <option value="768x1024">768x1024 (竖屏)</option>
162
+ <option value="512x512">512x512 (小正方形)</option>
163
+ </select>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- 生成数量 -->
168
+ <div class="mb-6">
169
+ <label class="block text-sm font-medium text-gray-700 mb-2">
170
+ <i class="fas fa-copy mr-1 text-blue-500"></i>
171
+ 生成数量
172
+ </label>
173
+ <div class="flex items-center gap-4">
174
+ <input
175
+ type="range"
176
+ min="1"
177
+ max="4"
178
+ value="1"
179
+ class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer range-slider"
180
+ id="imageCount"
181
+ >
182
+ <span id="imageCountValue" class="text-sm font-medium text-indigo-600 w-8 text-center">1</span>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- 创作强度 -->
187
+ <div class="mb-6">
188
+ <label class="block text-sm font-medium text-gray-700 mb-2">
189
+ <i class="fas fa-bolt mr-1 text-purple-500"></i>
190
+ 创作强度 (CFG Scale)
191
+ </label>
192
+ <div class="flex items-center gap-4">
193
+ <input
194
+ type="range"
195
+ min="1"
196
+ max="20"
197
+ value="7"
198
+ class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer range-slider"
199
+ id="cfgScale"
200
+ >
201
+ <span id="cfgScaleValue" class="text-sm font-medium text-indigo-600 w-8 text-center">7</span>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- 采样步数 -->
206
+ <div class="mb-6">
207
+ <label class="block text-sm font-medium text-gray-700 mb-2">
208
+ <i class="fas fa-footsteps mr-1 text-blue-500"></i>
209
+ 采样步数
210
+ </label>
211
+ <div class="flex items-center gap-4">
212
+ <input
213
+ type="range"
214
+ min="1"
215
+ max="50"
216
+ value="25"
217
+ class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer range-slider"
218
+ id="steps"
219
+ >
220
+ <span id="stepsValue" class="text-sm font-medium text-indigo-600 w-8 text-center">25</span>
221
+ </div>
222
+ </div>
223
+
224
+ <!-- 种子 -->
225
+ <div class="mb-6">
226
+ <label for="seed" class="block text-sm font-medium text-gray-700 mb-2">
227
+ <i class="fas fa-seedling mr-1 text-purple-500"></i>
228
+ 随机种子
229
+ </label>
230
+ <div class="flex gap-2">
231
+ <input
232
+ type="number"
233
+ id="seed"
234
+ class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 transition"
235
+ placeholder="留空随机"
236
+ >
237
+ <button id="randomSeedBtn" class="px-3 py-2 bg-indigo-100 text-indigo-600 rounded-lg hover:bg-indigo-200 transition">
238
+ <i class="fas fa-random"></i>
239
+ </button>
240
+ </div>
241
+ </div>
242
+
243
+ <!-- 高级选项 -->
244
+ <div class="border-t border-gray-200 pt-4 mb-6">
245
+ <button id="advancedToggle" class="flex items-center text-sm font-medium text-gray-600 hover:text-indigo-600 transition">
246
+ <i class="fas fa-cog mr-2 text-blue-400"></i>
247
+ 高级选项
248
+ <i class="fas fa-chevron-down ml-1 transition-transform" id="advancedArrow"></i>
249
+ </button>
250
+ <div id="advancedOptions" class="mt-2 hidden space-y-4">
251
+ <!-- 修复面部 -->
252
+ <div class="flex items-center justify-between">
253
+ <label for="fixFaces" class="block text-sm font-medium text-gray-700">
254
+ <i class="fas fa-user mr-1 text-purple-400"></i>
255
+ 修复面部
256
+ </label>
257
+ <div class="relative inline-block w-10 mr-2 align-middle select-none">
258
+ <input
259
+ type="checkbox"
260
+ id="fixFaces"
261
+ class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"
262
+ checked
263
+ >
264
+ <label for="fixFaces" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
265
+ </div>
266
+ </div>
267
+
268
+ <!-- 高清修复 -->
269
+ <div class="flex items-center justify-between">
270
+ <label for="hiresFix" class="block text-sm font-medium text-gray-700">
271
+ <i class="fas fa-search-plus mr-1 text-blue-400"></i>
272
+ 高清修复
273
+ </label>
274
+ <div class="relative inline-block w-10 mr-2 align-middle select-none">
275
+ <input
276
+ type="checkbox"
277
+ id="hiresFix"
278
+ class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"
279
+ >
280
+ <label for="hiresFix" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
281
+ </div>
282
+ </div>
283
+
284
+ <!-- 风格化程度 -->
285
+ <div>
286
+ <label class="block text-sm font-medium text-gray-700 mb-2">
287
+ <i class="fas fa-paint-brush mr-1 text-purple-400"></i>
288
+ 风格化程度
289
+ </label>
290
+ <div class="flex items-center gap-4">
291
+ <input
292
+ type="range"
293
+ min="0"
294
+ max="100"
295
+ value="50"
296
+ class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer range-slider"
297
+ id="style"
298
+ >
299
+ <span id="styleValue" class="text-sm font-medium text-indigo-600 w-8 text-center">50</span>
300
+ </div>
301
+ </div>
302
+ </div>
303
+ </div>
304
+
305
+ <!-- 生成按钮 -->
306
+ <button id="generateBtn" class="w-full py-3 px-4 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-medium rounded-lg shadow-md hover:from-blue-600 hover:to-purple-700 transition-all duration-300 flex items-center justify-center">
307
+ <i class="fas fa-magic mr-2"></i>
308
+ 生成图像
309
+ </button>
310
+ </div>
311
+
312
+ <!-- 右侧面板 - 结果展示 -->
313
+ <div class="w-full lg:w-2/3">
314
+ <div class="bg-white rounded-xl shadow-lg p-6 h-full flex flex-col">
315
+ <h2 class="text-xl font-semibold text-gray-800 mb-6 flex items-center">
316
+ <i class="fas fa-images mr-2 text-purple-500"></i>
317
+ 生成结果
318
+ </h2>
319
+
320
+ <!-- 加载状态 -->
321
+ <div id="loadingState" class="hidden flex flex-col items-center justify-center flex-grow py-12">
322
+ <div class="flex space-x-2 mb-6">
323
+ <div class="w-3 h-3 rounded-full bg-blue-400 loading-animation"></div>
324
+ <div class="w-3 h-3 rounded-full bg-indigo-400 loading-animation loading-animation-delay-100"></div>
325
+ <div class="w-3 h-3 rounded-full bg-purple-400 loading-animation loading-animation-delay-200"></div>
326
+ </div>
327
+ <h3 class="text-lg font-medium text-gray-700 mb-2">AI 正在创作您描述的图像</h3>
328
+ <p class="text-gray-500 text-center max-w-md">
329
+ 这可能需要几秒钟到一分钟不等，请耐心等待...
330
+ <br>
331
+ 正在处理细节和颜色组合
332
+ </p>
333
+ </div>
334
+
335
+ <!-- 结果展示区 -->
336
+ <div id="resultContainer" class="flex-grow flex flex-col">
337
+ <!-- 初始状态 -->
338
+ <div id="initialState" class="flex-grow flex flex-col items-center justify-center py-12">
339
+ <div class="mb-6 text-indigo-400">
340
+ <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
341
+ <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
342
+ </svg>
343
+ </div>
344
+ <h3 class="text-lg font-medium text-gray-700 mb-2">等待生成图像</h3>
345
+ <p class="text-gray-500 text-center max-w-md">
346
+ 输入您的提示词并点击"生成图像"按钮<br>
347
+ AI 将根据您的描述创造独一无二的图像
348
+ </p>
349
+ </div>
350
+
351
+ <!-- 生成结果将在这里动态添加 -->
352
+ <div id="generatedImages" class="grid grid-cols-1 md:grid-cols-2 gap-4 hidden"></div>
353
+ </div>
354
+
355
+ <!-- 操作按钮组 -->
356
+ <div id="actionButtons" class="mt-6 flex flex-wrap gap-3 hidden">
357
+ <button class="px-4 py-2 bg-indigo-50 text-indigo-600 rounded-lg hover:bg-indigo-100 transition flex items-center">
358
+ <i class="fas fa-save mr-2"></i> 保存全部
359
+ </button>
360
+ <button class="px-4 py-2 bg-purple-50 text-purple-600 rounded-lg hover:bg-purple-100 transition flex items-center">
361
+ <i class="fas fa-redo mr-2"></i> 重新生成
362
+ </button>
363
+ <button class="px-4 py-2 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100 transition flex items-center">
364
+ <i class="fas fa-play mr-2"></i> 生成变体
365
+ </button>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </div>
370
+
371
+ <!-- 历史记录 -->
372
+ <div class="mt-8 bg-white rounded-xl shadow-lg p-6 hidden" id="historySection">
373
+ <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
374
+ <i class="fas fa-history mr-2 text-blue-500"></i>
375
+ 生成历史
376
+ </h2>
377
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4" id="historyGrid">
378
+ <!-- 历史记录项目将在这里动态添加 -->
379
+ </div>
380
+ </div>
381
+ </div>
382
+
383
+ <script>
384
+ // DOM 元素
385
+ const promptInput = document.getElementById('prompt');
386
+ const negativePromptInput = document.getElementById('negativePrompt');
387
+ const modelSelect = document.getElementById('model');
388
+ const sizeSelect = document.getElementById('size');
389
+ const imageCountSlider = document.getElementById('imageCount');
390
+ const imageCountValue = document.getElementById('imageCountValue');
391
+ const cfgScaleSlider = document.getElementById('cfgScale');
392
+ const cfgScaleValue = document.getElementById('cfgScaleValue');
393
+ const stepsSlider = document.getElementById('steps');
394
+ const stepsValue = document.getElementById('stepsValue');
395
+ const seedInput = document.getElementById('seed');
396
+ const randomSeedBtn = document.getElementById('randomSeedBtn');
397
+ const fixFacesToggle = document.getElementById('fixFaces');
398
+ const hiresFixToggle = document.getElementById('hiresFix');
399
+ const styleSlider = document.getElementById('style');
400
+ const styleValue = document.getElementById('styleValue');
401
+ const advancedToggle = document.getElementById('advancedToggle');
402
+ const advancedOptions = document.getElementById('advancedOptions');
403
+ const advancedArrow = document.getElementById('advancedArrow');
404
+ const generateBtn = document.getElementById('generateBtn');
405
+ const loadingState = document.getElementById('loadingState');
406
+ const initialState = document.getElementById('initialState');
407
+ const generatedImages = document.getElementById('generatedImages');
408
+ const actionButtons = document.getElementById('actionButtons');
409
+ const historySection = document.getElementById('historySection');
410
+ const historyGrid = document.getElementById('historyGrid');
411
+
412
+ // 绑定事件
413
+ imageCountSlider.addEventListener('input', updateImageCount);
414
+ cfgScaleSlider.addEventListener('input', updateCfgScale);
415
+ stepsSlider.addEventListener('input', updateSteps);
416
+ styleSlider.addEventListener('input', updateStyle);
417
+ randomSeedBtn.addEventListener('click', generateRandomSeed);
418
+ advancedToggle.addEventListener('click', toggleAdvancedOptions);
419
+ generateBtn.addEventListener('click', generateImages);
420
+
421
+ // 滑块值更新
422
+ function updateImageCount() {
423
+ imageCountValue.textContent = imageCountSlider.value;
424
+ }
425
+
426
+ function updateCfgScale() {
427
+ cfgScaleValue.textContent = cfgScaleSlider.value;
428
+ }
429
+
430
+ function updateSteps() {
431
+ stepsValue.textContent = stepsSlider.value;
432
+ }
433
+
434
+ function updateStyle() {
435
+ styleValue.textContent = styleSlider.value;
436
+ }
437
+
438
+ // 生成随机种子
439
+ function generateRandomSeed() {
440
+ const randomSeed = Math.floor(Math.random() * 1000000000);
441
+ seedInput.value = randomSeed;
442
+ }
443
+
444
+ // 切换高级选项
445
+ function toggleAdvancedOptions() {
446
+ advancedOptions.classList.toggle('hidden');
447
+ advancedArrow.classList.toggle('rotate-180');
448
+ }
449
+
450
+ // 模拟生成图像
451
+ function generateImages() {
452
+ const prompt = promptInput.value.trim();
453
+
454
+ if (!prompt) {
455
+ alert('请输入提示词以生成图像');
456
+ return;
457
+ }
458
+
459
+ // 显示加载状态
460
+ loadingState.classList.remove('hidden');
461
+ initialState.classList.add('hidden');
462
+ generatedImages.classList.add('hidden');
463
+ actionButtons.classList.add('hidden');
464
+
465
+ // 隐藏历史记录区域
466
+ historySection.classList.add('hidden');
467
+
468
+ // 模拟网络请求延迟
469
+ setTimeout(() => {
470
+ const count = parseInt(imageCountSlider.value);
471
+
472
+ // 清空之前的生成结果
473
+ generatedImages.innerHTML = '';
474
+
475
+ // 创建新的图片元素
476
+ for (let i = 0; i < count; i++) {
477
+ const imgCol = document.createElement('div');
478
+ imgCol.className = 'relative group';
479
+
480
+ const imgContainer = document.createElement('div');
481
+ imgContainer.className = 'bg-gray-100 rounded-xl overflow-hidden generated-image hover:shadow-md transition-all';
482
+ imgContainer.style.aspectRatio = '1/1';
483
+
484
+ // 模拟不同类型的图片
485
+ let imgUrl;
486
+ const randomNum = Math.floor(Math.random() * 4);
487
+
488
+ switch(randomNum) {
489
+ case 0:
490
+ imgUrl = 'https://source.unsplash.com/random/800x800/?abstract,sci-fi';
491
+ break;
492
+ case 1:
493
+ imgUrl = 'https://source.unsplash.com/random/800x800/?digital-art,fantasy';
494
+ break;
495
+ case 2:
496
+ imgUrl = 'https://source.unsplash.com/random/800x800/?landscape,futuristic';
497
+ break;
498
+ default:
499
+ imgUrl = 'https://source.unsplash.com/random/800x800/?ai,neon,cyberpunk';
500
+ }
501
+
502
+ // 添加临时参数确保每次获取不同图片
503
+ imgUrl += `&t=${Date.now() + i}`;
504
+
505
+ const img = document.createElement('img');
506
+ img.src = imgUrl;
507
+ img.alt = 'AI 生成的图像';
508
+ img.className = 'w-full h-full object-cover';
509
+ img.loading = 'lazy';
510
+
511
+ // 悬停时的操作按钮
512
+ const hoverActions = document.createElement('div');
513
+ hoverActions.className = 'absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300';
514
+
515
+ const downloadBtn = document.createElement('button');
516
+ downloadBtn.className = 'p-2 bg-indigo-600 rounded-full text-white mx-1 hover:bg-indigo-700 transition';
517
+ downloadBtn.innerHTML = '<i class="fas fa-download"></i>';
518
+
519
+ const likeBtn = document.createElement('button');
520
+ likeBtn.className = 'p-2 bg-pink-600 rounded-full text-white mx-1 hover:bg-pink-700 transition';
521
+ likeBtn.innerHTML = '<i class="fas fa-heart"></i>';
522
+
523
+ const refreshBtn = document.createElement('button');
524
+ refreshBtn.className = 'p-2 bg-blue-600 rounded-full text-white mx-1 hover:bg-blue-700 transition';
525
+ refreshBtn.innerHTML = '<i class="fas fa-redo"></i>';
526
+
527
+ hoverActions.appendChild(downloadBtn);
528
+ hoverActions.appendChild(likeBtn);
529
+ hoverActions.appendChild(refreshBtn);
530
+
531
+ imgContainer.appendChild(img);
532
+ imgContainer.appendChild(hoverActions);
533
+ imgCol.appendChild(imgContainer);
534
+
535
+ const imgPrompt = document.createElement('p');
536
+ imgPrompt.className = 'text-sm text-gray-600 mt-2 truncate';
537
+ imgPrompt.textContent = prompt.length > 40 ? prompt.substring(0, 40) + '...' : prompt;
538
+
539
+ imgCol.appendChild(imgPrompt);
540
+ generatedImages.appendChild(imgCol);
541
+ }
542
+
543
+ // 隐藏加载状态，显示结果
544
+ loadingState.classList.add('hidden');
545
+ generatedImages.classList.remove('hidden');
546
+ actionButtons.classList.remove('hidden');
547
+
548
+ // 显示历史记录区域
549
+ historySection.classList.remove('hidden');
550
+
551
+ // 添加历史记录项
552
+ addHistoryItem(prompt, count);
553
+
554
+ }, 3000); // 3秒后显示结果
555
+ }
556
+
557
+ // 添加历史记录项
558
+ function addHistoryItem(prompt, count) {
559
+ const historyItem = document.createElement('div');
560
+ historyItem.className = 'relative group';
561
+
562
+ const imgContainer = document.createElement('div');
563
+ imgContainer.className = 'bg-gray-100 rounded-xl overflow-hidden hover:shadow-md transition-all';
564
+ imgContainer.style.aspectRatio = '1/1';
565
+
566
+ // 使用不同的历史图片
567
+ const randomNum = Math.floor(Math.random() * 4);
568
+ let imgUrl;
569
+
570
+ switch(randomNum) {
571
+ case 0:
572
+ imgUrl = 'https://source.unsplash.com/random/400x400/?abstract';
573
+ break;
574
+ case 1:
575
+ imgUrl = 'https://source.unsplash.com/random/400x400/?art';
576
+ break;
577
+ case 2:
578
+ imgUrl = 'https://source.unsplash.com/random/400x400/?digital';
579
+ break;
580
+ default:
581
+ imgUrl = 'https://source.unsplash.com/random/400x400/?ai';
582
+ }
583
+
584
+ // 添加临时参数确保每次获取不同图片
585
+ imgUrl += `&t=${Date.now() - Math.floor(Math.random() * 1000000)}`;
586
+
587
+ const img = document.createElement('img');
588
+ img.src = imgUrl;
589
+ img.alt = '历史生成的图像';
590
+ img.className = 'w-full h-full object-cover';
591
+ img.loading = 'lazy';
592
+
593
+ imgContainer.appendChild(img);
594
+ historyItem.appendChild(imgContainer);
595
+
596
+ const promptText = document.createElement('p');
597
+ promptText.className = 'text-xs text-gray-600 mt-1 truncate';
598
+ promptText.textContent = prompt.length > 30 ? prompt.substring(0, 30) + '...' : prompt;
599
+
600
+ historyItem.appendChild(promptText);
601
+ historyGrid.insertBefore(historyItem, historyGrid.firstChild);
602
+
603
+ // 限制历史记录数量
604
+ if (historyGrid.children.length > 8) {
605
+ historyGrid.removeChild(historyGrid.lastChild);
606
+ }
607
+ }
608
+
609
+ // 初始化
610
+ updateImageCount();
611
+ updateCfgScale();
612
+ updateSteps();
613
+ updateStyle();
614
+ generateRandomSeed();
615
+ </script>
616
+ <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=exrock/ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
617
+ </html>