Hugging Face's logo

Spaces:
mistpe
/
showme
Running

App Files Community
mistpe commited on
Commit
1ab3c3e
•
1 Parent(s): c19958c

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +476 -19
index.html CHANGED
@@ -1,19 +1,476 @@
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
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ }
14
+
15
+ body {
16
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
17
+ background: linear-gradient(135deg, #f6f8fc 0%, #e9f0f8 100%);
18
+ color: #2d3748;
19
+ overflow: hidden;
20
+ }
21
+
22
+ .slide {
23
+ display: none;
24
+ height: 100vh;
25
+ padding: 2% 5%;
26
+ animation: fadeIn 0.8s ease-out;
27
+ background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(249,250,251,0.95) 100%);
28
+ }
29
+
30
+ .slide.active {
31
+ display: block;
32
+ }
33
+
34
+ @keyframes fadeIn {
35
+ from {
36
+ opacity: 0;
37
+ transform: translateY(20px);
38
+ }
39
+ to {
40
+ opacity: 1;
41
+ transform: translateY(0);
42
+ }
43
+ }
44
+
45
+ .title {
46
+ font-size: 4.5rem;
47
+ font-weight: 800;
48
+ background: linear-gradient(45deg, #1a365d 0%, #2b6cb0 100%);
49
+ -webkit-background-clip: text;
50
+ -webkit-text-fill-color: transparent;
51
+ margin-bottom: 1rem;
52
+ line-height: 1.2;
53
+ text-align: center;
54
+ }
55
+
56
+ .subtitle {
57
+ font-size: 2.5rem;
58
+ color: #4a5568;
59
+ font-weight: 600;
60
+ margin-bottom: 2rem;
61
+ text-align: center;
62
+ }
63
+
64
+ .section-title {
65
+ font-size: 3.5rem;
66
+ font-weight: 700;
67
+ color: #2c5282;
68
+ margin-bottom: 2rem;
69
+ position: relative;
70
+ padding-bottom: 1rem;
71
+ }
72
+
73
+ .section-title::after {
74
+ content: '';
75
+ position: absolute;
76
+ bottom: 0;
77
+ left: 0;
78
+ width: 100px;
79
+ height: 4px;
80
+ background: linear-gradient(90deg, #4299e1 0%, #90cdf4 100%);
81
+ }
82
+
83
+ .feature-card {
84
+ background: linear-gradient(135deg, #ffffff 0%, #f7fafc 100%);
85
+ padding: 2rem;
86
+ border-radius: 1rem;
87
+ box-shadow: 0 10px 25px rgba(0,0,0,0.05);
88
+ transition: all 0.3s ease;
89
+ height: 100%;
90
+ }
91
+
92
+ .feature-card:hover {
93
+ transform: translateY(-5px);
94
+ box-shadow: 0 15px 35px rgba(0,0,0,0.1);
95
+ }
96
+
97
+ .feature-title {
98
+ font-size: 2rem;
99
+ font-weight: 600;
100
+ color: #2b6cb0;
101
+ margin-bottom: 1rem;
102
+ }
103
+
104
+ .feature-content {
105
+ font-size: 1.5rem;
106
+ line-height: 1.6;
107
+ color: #4a5568;
108
+ }
109
+
110
+ .nav-button {
111
+ position: fixed;
112
+ top: 50%;
113
+ transform: translateY(-50%);
114
+ background: rgba(66, 153, 225, 0.9);
115
+ color: white;
116
+ width: 60px;
117
+ height: 60px;
118
+ border-radius: 50%;
119
+ display: flex;
120
+ align-items: center;
121
+ justify-content: center;
122
+ cursor: pointer;
123
+ font-size: 1.5rem;
124
+ transition: all 0.3s ease;
125
+ border: none;
126
+ z-index: 100;
127
+ }
128
+
129
+ .nav-button:hover {
130
+ background: rgba(66, 153, 225, 1);
131
+ transform: translateY(-50%) scale(1.1);
132
+ }
133
+
134
+ .nav-button.prev {
135
+ left: 40px;
136
+ }
137
+
138
+ .nav-button.next {
139
+ right: 40px;
140
+ }
141
+
142
+ .slide-number {
143
+ position: fixed;
144
+ bottom: 40px;
145
+ right: 40px;
146
+ background: rgba(66, 153, 225, 0.9);
147
+ color: white;
148
+ padding: 0.8rem 1.5rem;
149
+ border-radius: 2rem;
150
+ font-size: 1.2rem;
151
+ font-weight: 500;
152
+ z-index: 100;
153
+ }
154
+
155
+ .grid-container {
156
+ display: grid;
157
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
158
+ gap: 2rem;
159
+ margin-top: 2rem;
160
+ }
161
+
162
+ .content-container {
163
+ height: calc(100vh - 200px);
164
+ overflow-y: auto;
165
+ padding-right: 20px;
166
+ }
167
+
168
+ .slide-image {
169
+ width: 100%;
170
+ height: auto;
171
+ border-radius: 20px;
172
+ box-shadow: 0 10px 25px rgba(0,0,0,0.1);
173
+ transition: transform 0.3s ease, width 0.3s ease;
174
+ }
175
+
176
+ .slide-image:hover {
177
+ transform: scale(1.02);
178
+ }
179
+
180
+ .slide-image.large {
181
+ max-width: 90%;
182
+ margin: 2rem auto;
183
+ }
184
+
185
+ .slide-image.full {
186
+ height: 100%;
187
+ object-fit: contain;
188
+ }
189
+
190
+ .image-container {
191
+ position: relative;
192
+ width: 100%;
193
+ display: flex;
194
+ justify-content: center;
195
+ align-items: center;
196
+ margin: 2rem 0;
197
+ }
198
+
199
+ .image-controls {
200
+ position: absolute;
201
+ left: 50%;
202
+ transform: translateX(-50%);
203
+ background: rgba(66, 153, 225, 0.9);
204
+ padding: 10px 20px;
205
+ border-radius: 20px;
206
+ display: flex;
207
+ align-items: center;
208
+ gap: 10px;
209
+ z-index: 100;
210
+ }
211
+
212
+ #slide2 .image-controls {
213
+ bottom: -60px;
214
+ }
215
+
216
+ #slide3 .image-controls,
217
+ #slide4 .image-controls {
218
+ bottom: 20px;
219
+ }
220
+
221
+ #slide2 .image-container {
222
+ margin-bottom: 4rem;
223
+ }
224
+
225
+ .size-slider {
226
+ width: 200px;
227
+ height: 6px;
228
+ background: #fff;
229
+ border-radius: 3px;
230
+ outline: none;
231
+ -webkit-appearance: none;
232
+ }
233
+
234
+ .size-slider::-webkit-slider-thumb {
235
+ -webkit-appearance: none;
236
+ width: 16px;
237
+ height: 16px;
238
+ background: #fff;
239
+ border-radius: 50%;
240
+ cursor: pointer;
241
+ }
242
+
243
+ .size-label {
244
+ color: white;
245
+ font-size: 14px;
246
+ min-width: 40px;
247
+ text-align: center;
248
+ }
249
+
250
+ .two-column-layout {
251
+ display: grid;
252
+ grid-template-columns: 1fr 1.5fr;
253
+ gap: 2rem;
254
+ height: calc(100vh - 300px);
255
+ align-items: center;
256
+ }
257
+
258
+ .left-column {
259
+ display: flex;
260
+ flex-direction: column;
261
+ gap: 2rem;
262
+ }
263
+
264
+ .right-column {
265
+ height: 100%;
266
+ display: flex;
267
+ align-items: center;
268
+ justify-content: center;
269
+ }
270
+ </style>
271
+ </head>
272
+ <body>
273
+ <!-- 封面页 -->
274
+ <div class="slide active" id="slide1">
275
+ <div class="flex flex-col items-center justify-center h-full">
276
+ <h1 class="title">智言视寻</h1>
277
+ <h2 class="subtitle">融合视觉智能与语言认知的辅助交互系统</h2>
278
+ <div class="feature-content text-center mt-16">
279
+ <p class="mb-2">团队：寻言智探团队</p>
280
+ <p>指导教师：李志刚</p>
281
+ </div>
282
+ </div>
283
+ </div>
284
+
285
+ <!-- 深度融合的智能认知架构 -->
286
+ <div class="slide" id="slide2">
287
+ <h2 class="section-title">深度融合的智能认知架构</h2>
288
+ <div class="content-container">
289
+ <div class="image-container">
290
+ <img src="./architecture.jpg" alt="深度融合的智能认知架构" class="slide-image large" style="width: 50%;">
291
+ <div class="image-controls">
292
+ <span class="size-label">50%</span>
293
+ <input type="range" min="20" max="100" value="50" class="size-slider" onInput="adjustImageSize(this, 2)">
294
+ </div>
295
+ </div>
296
+ <div class="grid-container">
297
+ <div class="feature-card">
298
+ <h3 class="feature-title">视觉感知</h3>
299
+ <p class="feature-content">通过先进的目标检测模型获取视觉原始信息，实现精准识别</p>
300
+ </div>
301
+ <div class="feature-card">
302
+ <h3 class="feature-title">语言理解</h3>
303
+ <p class="feature-content">由大语言模型进行深度场景理解和语境分析，提供智能化解读</p>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ </div>
308
+
309
+ <!-- 自适应智能交互系统 -->
310
+ <div class="slide" id="slide3">
311
+ <h2 class="section-title">自适应智能交互系统</h2>
312
+ <div class="content-container">
313
+ <div class="two-column-layout">
314
+ <div class="left-column">
315
+ <div class="feature-card">
316
+ <h3 class="feature-title">自动巡航模式</h3>
317
+ <p class="feature-content">主动观察环境变化，实时预警潜在风险，提供全方位保护</p>
318
+ </div>
319
+ <div class="feature-card">
320
+ <h3 class="feature-title">多模态交互</h3>
321
+ <p class="feature-content">支持语音、文字等多种自然交互方式，操作便捷直观</p>
322
+ </div>
323
+ </div>
324
+ <div class="right-column">
325
+ <div class="image-container">
326
+ <img src="./interaction.jpg" alt="自适应智能交互系统" class="slide-image full" style="width: 90%;">
327
+ <div class="image-controls">
328
+ <span class="size-label">90%</span>
329
+ <input type="range" min="20" max="100" value="90" class="size-slider" onInput="adjustImageSize(this, 3)">
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </div>
336
+
337
+ <!-- 场景理解与推理能力 -->
338
+ <div class="slide" id="slide4">
339
+ <h2 class="section-title">场景理解与推理能力</h2>
340
+ <div class="content-container">
341
+ <div class="image-container">
342
+ <img src="./understanding.jpg" alt="场景理解与推理能力" class="slide-image large" style="width: 50%;">
343
+ <div class="image-controls">
344
+ <span class="size-label">50%</span>
345
+ <input type="range" min="20" max="100" value="50" class="size-slider" onInput="adjustImageSize(this, 4)">
346
+ </div>
347
+ </div>
348
+ <div class="grid-container">
349
+ <div class="feature-card">
350
+ <h3 class="feature-title">空间关系理解</h3>
351
+ <p class="feature-content">深度识别物体之间的位置和互动关系，构建完整场景认知</p>
352
+ </div>
353
+ <div class="feature-card">
354
+ <h3 class="feature-title">危险预测</h3>
355
+ <p class="feature-content">基于大语言模型的推理能力，提前预判潜在风险，确保安全</p>
356
+ </div>
357
+ </div>
358
+ </div>
359
+ </div>
360
+
361
+ <!-- 社会价值 -->
362
+ <div class="slide" id="slide5">
363
+ <h2 class="section-title">社会价值</h2>
364
+ <div class="content-container">
365
+ <div class="grid-container">
366
+ <div class="feature-card">
367
+ <h3 class="feature-title">助力无障碍社会建设</h3>
368
+ <p class="feature-content">为视障人士提供"智能眼睛"，创造平等的信息获取机会</p>
369
+ </div>
370
+ <div class="feature-card">
371
+ <h3 class="feature-title">推动普惠科技发展</h3>
372
+ <p class="feature-content">让先进技术服务更广泛的人群，促进社会进步</p>
373
+ </div>
374
+ <div class="feature-card">
375
+ <h3 class="feature-title">促进社会包容性</h3>
376
+ <p class="feature-content">帮助特殊群体更好地融入社会生活，创造共融环境</p>
377
+ </div>
378
+ </div>
379
+ </div>
380
+ </div>
381
+
382
+ <!-- 未来展望 -->
383
+ <div class="slide" id="slide6">
384
+ <h2 class="section-title">未来展望</h2>
385
+ <div class="content-container">
386
+ <div class="grid-container">
387
+ <div class="feature-card">
388
+ <h3 class="feature-title">技术层面</h3>
389
+ <ul class="feature-content list-disc list-inside">
390
+ <li>持续优化算法性能</li>
391
+ <li>扩展系统认知范围</li>
392
+ <li>深化多模态融合技术</li>
393
+ </ul>
394
+ </div>
395
+ <div class="feature-card">
396
+ <h3 class="feature-title">应用层面</h3>
397
+ <ul class="feature-content list-disc list-inside">
398
+ <li>拓展应用场景</li>
399
+ <li>开发个性化功能</li>
400
+ <li>探索产业化路径</li>
401
+ </ul>
402
+ </div>
403
+ <div class="feature-card">
404
+ <h3 class="feature-title">社会价值</h3>
405
+ <ul class="feature-content list-disc list-inside">
406
+ <li>推动无障碍建设</li>
407
+ <li>促进科技普惠</li>
408
+ <li>建设包容性社会</li>
409
+ </ul>
410
+ </div>
411
+ </div>
412
+ </div>
413
+ </div>
414
+
415
+ <!-- 结束页 -->
416
+ <div class="slide" id="slide7">
417
+ <div class="flex flex-col items-center justify-center h-full">
418
+ <h2 class="title">谢谢聆听</h2>
419
+ <p class="subtitle">用科技照亮每个人的世界</p>
420
+ <div class="feature-content text-center mt-16">
421
+ </div>
422
+ </div>
423
+ </div>
424
+
425
+ <!-- 导航按钮 -->
426
+ <button class="nav-button prev" onclick="prevSlide()">←</button>
427
+ <button class="nav-button next" onclick="nextSlide()">→</button>
428
+ <div class="slide-number">1 / 7</div>
429
+
430
+ <script>
431
+ let currentSlide = 1;
432
+ const totalSlides = 7;
433
+
434
+ function showSlide(n) {
435
+ document.querySelectorAll('.slide').forEach(slide => {
436
+ slide.classList.remove('active');
437
+ });
438
+
439
+ document.getElementById('slide' + n).classList.add('active');
440
+ document.querySelector('.slide-number').textContent = n + ' / ' + totalSlides;
441
+ }
442
+
443
+ function nextSlide() {
444
+ if (currentSlide < totalSlides) {
445
+ currentSlide++;
446
+ showSlide(currentSlide);
447
+ }
448
+ }
449
+
450
+ function prevSlide() {
451
+ if (currentSlide > 1) {
452
+ currentSlide--;
453
+ showSlide(currentSlide);
454
+ }
455
+ }
456
+
457
+ function adjustImageSize(slider, slideNumber) {
458
+ const size = slider.value;
459
+ const slide = document.getElementById('slide' + slideNumber);
460
+ const image = slide.querySelector('.slide-image');
461
+ const label = slider.parentElement.querySelector('.size-label');
462
+
463
+ image.style.width = size + '%';
464
+ label.textContent = size + '%';
465
+ }
466
+
467
+ document.addEventListener('keydown', function(event) {
468
+ if (event.key === 'ArrowRight') {
469
+ nextSlide();
470
+ } else if (event.key === 'ArrowLeft') {
471
+ prevSlide();
472
+ }
473
+ });
474
+ </script>
475
+ </body>
476
+ </html>