Hugging Face's logo

Spaces:
chaojie
/
n2v1
Running

App Files Community
chaojie commited on
Commit
74d4271
·
verified ·
1 Parent(s): d4ab4f2

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +509 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: N2v1
3
- emoji: 😻
4
- colorFrom: pink
5
- colorTo: gray
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: n2v1
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,509 @@
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>创意素材生成平台</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#6366f1',
15
+ secondary: '#8b5cf6',
16
+ dark: '#1e293b',
17
+ light: '#f8fafc'
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ <style>
24
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
25
+
26
+ body {
27
+ font-family: 'Noto Sans SC', sans-serif;
28
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
29
+ min-height: 100vh;
30
+ }
31
+
32
+ .card {
33
+ transition: all 0.3s ease;
34
+ transform-style: preserve-3d;
35
+ }
36
+
37
+ .card:hover {
38
+ transform: translateY(-5px) scale(1.02);
39
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
40
+ }
41
+
42
+ .card-front, .card-back {
43
+ backface-visibility: hidden;
44
+ }
45
+
46
+ .card-back {
47
+ transform: rotateY(180deg);
48
+ }
49
+
50
+ .flipped .card-front {
51
+ transform: rotateY(180deg);
52
+ }
53
+
54
+ .flipped .card-back {
55
+ transform: rotateY(0deg);
56
+ }
57
+
58
+ .progress-bar {
59
+ height: 8px;
60
+ border-radius: 4px;
61
+ overflow: hidden;
62
+ }
63
+
64
+ .progress-fill {
65
+ height: 100%;
66
+ transition: width 0.5s ease;
67
+ }
68
+
69
+ .generated-content {
70
+ animation: fadeIn 0.5s ease forwards;
71
+ }
72
+
73
+ @keyframes fadeIn {
74
+ from { opacity: 0; transform: translateY(10px); }
75
+ to { opacity: 1; transform: translateY(0); }
76
+ }
77
+
78
+ .pulse {
79
+ animation: pulse 2s infinite;
80
+ }
81
+
82
+ @keyframes pulse {
83
+ 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); }
84
+ 70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
85
+ 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
86
+ }
87
+
88
+ .editor-container {
89
+ background: linear-gradient(45deg, #1e293b, #0f172a);
90
+ border: 1px solid #334155;
91
+ }
92
+
93
+ .waveform {
94
+ height: 100px;
95
+ background: linear-gradient(90deg, #8b5cf6, #6366f1);
96
+ position: relative;
97
+ overflow: hidden;
98
+ }
99
+
100
+ .waveform::before {
101
+ content: "";
102
+ position: absolute;
103
+ top: 0;
104
+ left: 0;
105
+ right: 0;
106
+ bottom: 0;
107
+ background:
108
+ linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
109
+ animation: wave 1.5s linear infinite;
110
+ }
111
+
112
+ @keyframes wave {
113
+ 0% { transform: translateX(-100%); }
114
+ 100% { transform: translateX(100%); }
115
+ }
116
+ </style>
117
+ </head>
118
+ <body class="text-light">
119
+ <div class="min-h-screen flex flex-col">
120
+ <!-- 头部导航 -->
121
+ <header class="py-4 px-6 bg-dark/80 backdrop-blur-sm border-b border-slate-700 sticky top-0 z-50">
122
+ <div class="max-w-7xl mx-auto flex justify-between items-center">
123
+ <div class="flex items-center space-x-2">
124
+ <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
125
+ <i class="fas fa-magic text-white"></i>
126
+ </div>
127
+ <h1 class="text-2xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">创意素材生成平台</h1>
128
+ </div>
129
+ <div class="flex items-center space-x-4">
130
+ <button class="px-4 py-2 rounded-lg bg-primary hover:bg-primary/90 transition">
131
+ <i class="fas fa-save mr-2"></i>保存项目
132
+ </button>
133
+ <button class="px-4 py-2 rounded-lg bg-secondary hover:bg-secondary/90 transition">
134
+ <i class="fas fa-share-alt mr-2"></i>分享
135
+ </button>
136
+ </div>
137
+ </div>
138
+ </header>
139
+
140
+ <!-- 主内容区 -->
141
+ <main class="flex-grow py-8 px-4">
142
+ <div class="max-w-7xl mx-auto">
143
+ <!-- 步骤进度条 -->
144
+ <div class="mb-10">
145
+ <div class="flex justify-between mb-3">
146
+ <div class="text-sm font-medium">角色设定</div>
147
+ <div class="text-sm font-medium">文字创作</div>
148
+ <div class="text-sm font-medium">声音生成</div>
149
+ <div class="text-sm font-medium">图片生成</div>
150
+ <div class="text-sm font-medium">视频合成</div>
151
+ </div>
152
+ <div class="progress-bar bg-slate-700 w-full">
153
+ <div class="progress-fill bg-gradient-to-r from-primary to-secondary" style="width: 40%"></div>
154
+ </div>
155
+ </div>
156
+
157
+ <!-- 步骤内容 -->
158
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
159
+ <!-- 左侧 - 步骤控制 -->
160
+ <div class="lg:col-span-1">
161
+ <div class="bg-slate-800/50 backdrop-blur rounded-xl p-6 border border-slate-700">
162
+ <h2 class="text-xl font-bold mb-6 text-center">创意生成步骤</h2>
163
+
164
+ <div class="space-y-4">
165
+ <div class="pulse bg-slate-700/50 rounded-lg p-4 border-l-4 border-primary">
166
+ <div class="flex items-center">
167
+ <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center mr-3">
168
+ <span class="text-white font-bold">1</span>
169
+ </div>
170
+ <h3 class="font-semibold">角色设定</h3>
171
+ </div>
172
+ <p class="text-sm text-slate-300 mt-2">创建故事主角的基本信息和背景设定</p>
173
+ </div>
174
+
175
+ <div class="bg-slate-700/50 rounded-lg p-4 opacity-70">
176
+ <div class="flex items-center">
177
+ <div class="w-8 h-8 rounded-full bg-slate-600 flex items-center justify-center mr-3">
178
+ <span class="text-slate-300 font-bold">2</span>
179
+ </div>
180
+ <h3 class="font-semibold text-slate-400">文字创作</h3>
181
+ </div>
182
+ <p class="text-sm text-slate-500 mt-2">基于角色生成故事梗概和关键场景</p>
183
+ </div>
184
+
185
+ <div class="bg-slate-700/50 rounded-lg p-4 opacity-50">
186
+ <div class="flex items-center">
187
+ <div class="w-8 h-8 rounded-full bg-slate-600 flex items-center justify-center mr-3">
188
+ <span class="text-slate-300 font-bold">3</span>
189
+ </div>
190
+ <h3 class="font-semibold text-slate-400">声音生成</h3>
191
+ </div>
192
+ <p class="text-sm text-slate-500 mt-2">为角色和场景生成匹配的语音和音效</p>
193
+ </div>
194
+
195
+ <div class="bg-slate-700/50 rounded-lg p-4 opacity-30">
196
+ <div class="flex items-center">
197
+ <div class="w-8 h-8 rounded-full bg-slate-600 flex items-center justify-center mr-3">
198
+ <span class="text-slate-300 font-bold">4</span>
199
+ </div>
200
+ <h3 class="font-semibold text-slate-400">图片生成</h3>
201
+ </div>
202
+ <p class="text-sm text-slate-500 mt-2">根据文字描述生成角色和场景的视觉图像</p>
203
+ </div>
204
+
205
+ <div class="bg-slate-700/50 rounded-lg p-4 opacity-30">
206
+ <div class="flex items-center">
207
+ <div class="w-8 h-8 rounded-full bg-slate-600 flex items-center justify-center mr-3">
208
+ <span class="text-slate-300 font-bold">5</span>
209
+ </div>
210
+ <h3 class="font-semibold text-slate-400">视频合成</h3>
211
+ </div>
212
+ <p class="text-sm text-slate-500 mt-2">整合所有素材生成完整的视频内容</p>
213
+ </div>
214
+ </div>
215
+
216
+ <div class="mt-8 flex justify-between">
217
+ <button class="px-5 py-2 rounded-lg bg-slate-700 hover:bg-slate-600 transition">
218
+ <i class="fas fa-arrow-left mr-2"></i>上一步
219
+ </button>
220
+ <button class="px-5 py-2 rounded-lg bg-gradient-to-r from-primary to-secondary hover:opacity-90 transition">
221
+ 下一步<i class="fas fa-arrow-right ml-2"></i>
222
+ </button>
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+ <!-- 右侧 - 素材卡片 -->
228
+ <div class="lg:col-span-2">
229
+ <h2 class="text-2xl font-bold mb-6">已生成素材</h2>
230
+
231
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
232
+ <!-- 角色卡片 -->
233
+ <div class="card relative h-80 cursor-pointer">
234
+ <div class="card-front absolute w-full h-full bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl p-6 flex flex-col">
235
+ <div class="flex justify-between items-start mb-4">
236
+ <div>
237
+ <span class="bg-primary text-xs px-2 py-1 rounded-full">角色</span>
238
+ <h3 class="text-xl font-bold mt-2">星际探险家 - 莉娜</h3>
239
+ </div>
240
+ <button class="text-slate-400 hover:text-white">
241
+ <i class="fas fa-ellipsis-v"></i>
242
+ </button>
243
+ </div>
244
+
245
+ <div class="flex-grow flex items-center justify-center">
246
+ <div class="relative">
247
+ <div class="w-24 h-24 rounded-full bg-gradient-to-br from-purple-500 to-indigo-600 mx-auto flex items-center justify-center">
248
+ <i class="fas fa-user-astronaut text-3xl text-white"></i>
249
+ </div>
250
+ <div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-secondary text-xs px-2 py-1 rounded-full whitespace-nowrap">
251
+ 已生成
252
+ </div>
253
+ </div>
254
+ </div>
255
+
256
+ <div class="text-center mt-4">
257
+ <p class="text-slate-300 text-sm">25岁 | 星际探险队队长 | 勇敢机智</p>
258
+ </div>
259
+
260
+ <div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-3">
261
+ <button class="w-10 h-10 rounded-full bg-slate-700 hover:bg-primary transition flex items-center justify-center">
262
+ <i class="fas fa-music"></i>
263
+ </button>
264
+ <button class="w-10 h-10 rounded-full bg-slate-700 hover:bg-primary transition flex items-center justify-center">
265
+ <i class="fas fa-image"></i>
266
+ </button>
267
+ <button class="w-10 h-10 rounded-full bg-slate-700 hover:bg-primary transition flex items-center justify-center">
268
+ <i class="fas fa-film"></i>
269
+ </button>
270
+ <button class="w-10 h-10 rounded-full bg-slate-700 hover:bg-secondary transition flex items-center justify-center">
271
+ <i class="fas fa-pen"></i>
272
+ </button>
273
+ </div>
274
+ </div>
275
+
276
+ <div class="card-back absolute w-full h-full bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl p-6 flex flex-col">
277
+ <div class="flex justify-between items-start mb-4">
278
+ <h3 class="text-xl font-bold">编辑角色</h3>
279
+ <button class="text-slate-400 hover:text-white">
280
+ <i class="fas fa-times"></i>
281
+ </button>
282
+ </div>
283
+
284
+ <div class="flex-grow">
285
+ <div class="mb-4">
286
+ <label class="block text-sm text-slate-400 mb-1">角色名称</label>
287
+ <input type="text" class="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2" value="莉娜">
288
+ </div>
289
+
290
+ <div class="mb-4">
291
+ <label class="block text-sm text-slate-400 mb-1">角色描述</label>
292
+ <textarea class="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2 h-20">25岁的星际探险队队长，勇敢机智，擅长解决危机，对未知充满好奇。</textarea>
293
+ </div>
294
+
295
+ <div class="grid grid-cols-2 gap-4">
296
+ <div>
297
+ <label class="block text-sm text-slate-400 mb-1">年龄</label>
298
+ <input type="text" class="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2" value="25">
299
+ </div>
300
+ <div>
301
+ <label class="block text-sm text-slate-400 mb-1">职业</label>
302
+ <input type="text" class="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2" value="探险队长">
303
+ </div>
304
+ </div>
305
+ </div>
306
+
307
+ <div class="flex justify-end mt-4">
308
+ <button class="px-4 py-2 rounded-lg bg-slate-700 hover:bg-slate-600 mr-2">
309
+ 取消
310
+ </button>
311
+ <button class="px-4 py-2 rounded-lg bg-gradient-to-r from-primary to-secondary hover:opacity-90">
312
+ 保存更改
313
+ </button>
314
+ </div>
315
+ </div>
316
+ </div>
317
+
318
+ <!-- 文字卡片 -->
319
+ <div class="card relative h-80 cursor-pointer">
320
+ <div class="card-front absolute w-full h-full bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl p-6 flex flex-col">
321
+ <div class="flex justify-between items-start mb-4">
322
+ <div>
323
+ <span class="bg-secondary text-xs px-2 py-1 rounded-full">文字</span>
324
+ <h3 class="text-xl font-bold mt-2">星际迷航：新世界</h3>
325
+ </div>
326
+ <button class="text-slate-400 hover:text-white">
327
+ <i class="fas fa-ellipsis-v"></i>
328
+ </button>
329
+ </div>
330
+
331
+ <div class="flex-grow overflow-y-auto">
332
+ <p class="text-slate-300 text-sm">
333
+ 在遥远的未来，莉娜船长带领她的团队探索未知星系。他们发现了一个充满奇异生命形态的星球，但很快意识到这个星球正面临毁灭性灾难。莉娜必须利用她的智慧和勇气，在有限的时间内找到拯救这个外星文明的方法...
334
+ </p>
335
+ </div>
336
+
337
+ <div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-3">
338
+ <button class="w-10 h-10 rounded-full bg-slate-700 hover:bg-primary transition flex items-center justify-center">
339
+ <i class="fas fa-music"></i>
340
+ </button>
341
+ <button class="w-10 h-10 rounded-full bg-slate-700 hover:bg-primary transition flex items-center justify-center">
342
+ <i class="fas fa-image"></i>
343
+ </button>
344
+ <button class="w-10 h-10 rounded-full bg-slate-700 hover:bg-primary transition flex items-center justify-center">
345
+ <i class="fas fa-film"></i>
346
+ </button>
347
+ <button class="w-10 h-10 rounded-full bg-slate-700 hover:bg-secondary transition flex items-center justify-center">
348
+ <i class="fas fa-pen"></i>
349
+ </button>
350
+ </div>
351
+ </div>
352
+ </div>
353
+
354
+ <!-- 声音卡片 -->
355
+ <div class="bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl p-6">
356
+ <div class="flex justify-between items-start mb-4">
357
+ <div>
358
+ <span class="bg-primary text-xs px-2 py-1 rounded-full">声音</span>
359
+ <h3 class="text-xl font-bold mt-2">莉娜角色配音</h3>
360
+ </div>
361
+ <button class="text-slate-400 hover:text-white">
362
+ <i class="fas fa-ellipsis-v"></i>
363
+ </button>
364
+ </div>
365
+
366
+ <div class="waveform rounded-lg mb-4"></div>
367
+
368
+ <div class="flex items-center justify-between">
369
+ <div class="text-sm text-slate-400">00:25 / 01:45</div>
370
+ <div class="flex space-x-3">
371
+ <button class="w-10 h-10 rounded-full bg-slate-700 hover:bg-primary transition flex items-center justify-center">
372
+ <i class="fas fa-play"></i>
373
+ </button>
374
+ <button class="w-10 h-10 rounded-full bg-slate-700 hover:bg-red-500 transition flex items-center justify-center">
375
+ <i class="fas fa-stop"></i>
376
+ </button>
377
+ <button class="w-10 h-10 rounded-full bg-slate-700 hover:bg-secondary transition flex items-center justify-center">
378
+ <i class="fas fa-pen"></i>
379
+ </button>
380
+ </div>
381
+ </div>
382
+ </div>
383
+
384
+ <!-- 图片卡片 -->
385
+ <div class="bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl p-6">
386
+ <div class="flex justify-between items-start mb-4">
387
+ <div>
388
+ <span class="bg-secondary text-xs px-2 py-1 rounded-full">图片</span>
389
+ <h3 class="text-xl font-bold mt-2">外星丛林场景</h3>
390
+ </div>
391
+ <button class="text-slate-400 hover:text-white">
392
+ <i class="fas fa-ellipsis-v"></i>
393
+ </button>
394
+ </div>
395
+
396
+ <div class="bg-gradient-to-br from-purple-900/30 to-indigo-900/30 rounded-xl h-40 mb-4 flex items-center justify-center">
397
+ <div class="text-center">
398
+ <i class="fas fa-mountain-sun text-4xl text-indigo-500 mb-2"></i>
399
+ <p class="text-sm text-slate-400">图片生成中...</p>
400
+ </div>
401
+ </div>
402
+
403
+ <div class="flex justify-end space-x-3">
404
+ <button class="px-4 py-2 rounded-lg bg-slate-700 hover:bg-slate-600 transition">
405
+ 重新生成
406
+ </button>
407
+ <button class="px-4 py-2 rounded-lg bg-gradient-to-r from-primary to-secondary hover:opacity-90 transition">
408
+ 下载图片
409
+ </button>
410
+ </div>
411
+ </div>
412
+ </div>
413
+
414
+ <!-- 生成新素材区域 -->
415
+ <div class="mt-8 bg-slate-800/50 backdrop-blur rounded-xl p-6 border border-slate-700">
416
+ <h3 class="text-xl font-bold mb-4">生成新素材</h3>
417
+
418
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
419
+ <button class="p-4 bg-slate-700/50 hover:bg-slate-700 rounded-lg transition flex flex-col items-center">
420
+ <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center mb-2">
421
+ <i class="fas fa-user text-primary"></i>
422
+ </div>
423
+ <span>生成角色</span>
424
+ </button>
425
+
426
+ <button class="p-4 bg-slate-700/50 hover:bg-slate-700 rounded-lg transition flex flex-col items-center">
427
+ <div class="w-12 h-12 rounded-full bg-secondary/20 flex items-center justify-center mb-2">
428
+ <i class="fas fa-font text-secondary"></i>
429
+ </div>
430
+ <span>生成文字</span>
431
+ </button>
432
+
433
+ <button class="p-4 bg-slate-700/50 hover:bg-slate-700 rounded-lg transition flex flex-col items-center">
434
+ <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center mb-2">
435
+ <i class="fas fa-volume-up text-primary"></i>
436
+ </div>
437
+ <span>生成声音</span>
438
+ </button>
439
+
440
+ <button class="p-4 bg-slate-700/50 hover:bg-slate-700 rounded-lg transition flex flex-col items-center">
441
+ <div class="w-12 h-12 rounded-full bg-secondary/20 flex items-center justify-center mb-2">
442
+ <i class="fas fa-image text-secondary"></i>
443
+ </div>
444
+ <span>生成图片</span>
445
+ </button>
446
+
447
+ <button class="p-4 bg-slate-700/50 hover:bg-slate-700 rounded-lg transition flex flex-col items-center">
448
+ <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center mb-2">
449
+ <i class="fas fa-video text-primary"></i>
450
+ </div>
451
+ <span>生成视频</span>
452
+ </button>
453
+
454
+ <button class="p-4 bg-slate-700/50 hover:bg-slate-700 rounded-lg transition flex flex-col items-center">
455
+ <div class="w-12 h-12 rounded-full bg-secondary/20 flex items-center justify-center mb-2">
456
+ <i class="fas fa-random text-secondary"></i>
457
+ </div>
458
+ <span>随机生成</span>
459
+ </button>
460
+ </div>
461
+ </div>
462
+ </div>
463
+ </div>
464
+ </div>
465
+ </main>
466
+
467
+ <!-- 页脚 -->
468
+ <footer class="py-6 px-4 border-t border-slate-700 mt-8">
469
+ <div class="max-w-7xl mx-auto text-center text-slate-500 text-sm">
470
+ <p>© 2023 创意素材生成平台 | 让创作更简单，让灵感更丰富</p>
471
+ <div class="mt-2 flex justify-center space-x-4">
472
+ <a href="#" class="hover:text-slate-300 transition">使用条款</a>
473
+ <a href="#" class="hover:text-slate-300 transition">隐私政策</a>
474
+ <a href="#" class="hover:text-slate-300 transition">帮助中心</a>
475
+ <a href="#" class="hover:text-slate-300 transition">联系我们</a>
476
+ </div>
477
+ </div>
478
+ </footer>
479
+ </div>
480
+
481
+ <script>
482
+ // 卡片翻转效果
483
+ document.querySelectorAll('.card').forEach(card => {
484
+ card.addEventListener('click', function() {
485
+ this.classList.toggle('flipped');
486
+ });
487
+ });
488
+
489
+ // 模拟进度更新
490
+ let progress = 40;
491
+ const progressBar = document.querySelector('.progress-fill');
492
+
493
+ setInterval(() => {
494
+ if (progress < 100) {
495
+ progress += 0.5;
496
+ progressBar.style.width = `${progress}%`;
497
+ }
498
+ }, 1000);
499
+
500
+ // 生成内容动画
501
+ setTimeout(() => {
502
+ document.querySelectorAll('.generated-content').forEach(el => {
503
+ el.style.opacity = 1;
504
+ el.style.transform = 'translateY(0)';
505
+ });
506
+ }, 500);
507
+ </script>
508
+ <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=chaojie/n2v1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
509
+ </html>