Hugging Face's logo

Spaces:
KS1983
/
medai01
Running

App Files Community
Yang commited on
Commit
e5177f0
·
verified ·
1 Parent(s): cd07f4d

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +804 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Medai01
3
- emoji: 🚀
4
- colorFrom: red
5
- colorTo: pink
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: medai01
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: gray
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,804 @@
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>MedVision AI - 智能医学影像分析平台</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
+ @keyframes fadeIn {
11
+ from { opacity: 0; transform: translateY(20px); }
12
+ to { opacity: 1; transform: translateY(0); }
13
+ }
14
+ .animate-fade-in {
15
+ animation: fadeIn 1s ease-out forwards;
16
+ }
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
19
+ }
20
+ .feature-card:hover {
21
+ transform: translateY(-10px);
22
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
23
+ }
24
+ .screenshot {
25
+ border-radius: 12px;
26
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
27
+ transition: all 0.3s ease;
28
+ }
29
+ .screenshot:hover {
30
+ transform: scale(1.03);
31
+ }
32
+ .stats-item {
33
+ position: relative;
34
+ }
35
+ .stats-item::after {
36
+ content: '';
37
+ position: absolute;
38
+ right: 0;
39
+ top: 50%;
40
+ transform: translateY(-50%);
41
+ height: 60%;
42
+ width: 1px;
43
+ background-color: rgba(255, 255, 255, 0.2);
44
+ }
45
+ .stats-item:last-child::after {
46
+ display: none;
47
+ }
48
+ </style>
49
+ </head>
50
+ <body class="font-sans antialiased text-gray-800">
51
+ <!-- 导航栏 -->
52
+ <nav class="bg-white shadow-md fixed w-full z-50">
53
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
54
+ <div class="flex justify-between h-16">
55
+ <div class="flex items-center">
56
+ <div class="flex-shrink-0 flex items-center">
57
+ <i class="fas fa-lungs text-blue-600 text-2xl mr-2"></i>
58
+ <span class="text-xl font-bold text-blue-800">MedVision AI</span>
59
+ </div>
60
+ </div>
61
+ <div class="hidden md:flex items-center space-x-8">
62
+ <a href="#features" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">功能</a>
63
+ <a href="#technology" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">技术</a>
64
+ <a href="#solutions" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">解决方案</a>
65
+ <a href="#cases" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">案例</a>
66
+ <a href="#contact" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 transition duration-300">联系我们</a>
67
+ </div>
68
+ <div class="md:hidden flex items-center">
69
+ <button class="text-gray-700 focus:outline-none">
70
+ <i class="fas fa-bars text-xl"></i>
71
+ </button>
72
+ </div>
73
+ </div>
74
+ </div>
75
+ </nav>
76
+
77
+ <!-- 英雄区域 -->
78
+ <header class="gradient-bg pt-24 pb-20 md:pt-32 md:pb-28">
79
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
80
+ <div class="md:flex md:items-center md:justify-between">
81
+ <div class="md:w-1/2 animate-fade-in" style="animation-delay: 0.2s;">
82
+ <h1 class="text-4xl md:text-5xl font-bold text-white leading-tight mb-6">
83
+ 下一代医学影像<br>人工智能分析平台
84
+ </h1>
85
+ <p class="text-lg text-blue-100 mb-8 max-w-lg">
86
+ MedVision AI 提供精准、高效的医学影像分析解决方案，帮助医生更快、更准确地诊断疾病，提高医疗服务质量。
87
+ </p>
88
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
89
+ <a href="#demo" class="bg-white text-blue-600 px-6 py-3 rounded-md text-lg font-semibold hover:bg-gray-100 transition duration-300 text-center">
90
+ 申请演示
91
+ </a>
92
+ <a href="#contact" class="border-2 border-white text-white px-6 py-3 rounded-md text-lg font-semibold hover:bg-white hover:text-blue-600 transition duration-300 text-center">
93
+ 了解更多
94
+ </a>
95
+ </div>
96
+ </div>
97
+ <div class="md:w-1/2 mt-12 md:mt-0 animate-fade-in" style="animation-delay: 0.4s;">
98
+ <div class="relative">
99
+ <img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="AI医学影像分析" class="screenshot w-full max-w-xl mx-auto">
100
+ <div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-lg shadow-lg hidden md:block">
101
+ <div class="flex items-center">
102
+ <div class="bg-blue-100 p-3 rounded-full mr-3">
103
+ <i class="fas fa-check text-blue-600 text-xl"></i>
104
+ </div>
105
+ <div>
106
+ <p class="text-sm text-gray-500">准确率</p>
107
+ <p class="text-xl font-bold text-blue-800">98.7%</p>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ </header>
116
+
117
+ <!-- 统计数据 -->
118
+ <section class="bg-blue-700 py-8">
119
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
120
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center text-white">
121
+ <div class="stats-item py-4">
122
+ <p class="text-3xl font-bold">500+</p>
123
+ <p class="text-sm opacity-80">医疗机构使用</p>
124
+ </div>
125
+ <div class="stats-item py-4">
126
+ <p class="text-3xl font-bold">10M+</p>
127
+ <p class="text-sm opacity-80">影像分析</p>
128
+ </div>
129
+ <div class="stats-item py-4">
130
+ <p class="text-3xl font-bold">30+</p>
131
+ <p class="text-sm opacity-80">疾病类型</p>
132
+ </div>
133
+ <div class="stats-item py-4">
134
+ <p class="text-3xl font-bold">0.5s</p>
135
+ <p class="text-sm opacity-80">平均分析时间</p>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ </section>
140
+
141
+ <!-- 核心功能 -->
142
+ <section id="features" class="py-20 bg-gray-50">
143
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
144
+ <div class="text-center mb-16">
145
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">AI赋能医学影像诊断</h2>
146
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
147
+ MedVision AI 提供全方位的医学影像分析解决方案，覆盖多种影像模态和疾病类型
148
+ </p>
149
+ </div>
150
+
151
+ <div class="grid md:grid-cols-3 gap-8">
152
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
153
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
154
+ <i class="fas fa-brain text-blue-600 text-2xl"></i>
155
+ </div>
156
+ <h3 class="text-xl font-bold text-gray-900 mb-3">智能病灶检测</h3>
157
+ <p class="text-gray-600 mb-4">
158
+ 自动识别CT、MRI等影像中的异常区域，标记可疑病灶，减少漏诊风险。
159
+ </p>
160
+ <ul class="space-y-2">
161
+ <li class="flex items-center">
162
+ <i class="fas fa-check text-blue-500 mr-2"></i>
163
+ <span>支持多器官分析</span>
164
+ </li>
165
+ <li class="flex items-center">
166
+ <i class="fas fa-check text-blue-500 mr-2"></i>
167
+ <span>3D病灶重建</span>
168
+ </li>
169
+ <li class="flex items-center">
170
+ <i class="fas fa-check text-blue-500 mr-2"></i>
171
+ <span>良恶性概率评估</span>
172
+ </li>
173
+ </ul>
174
+ </div>
175
+
176
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
177
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
178
+ <i class="fas fa-chart-line text-blue-600 text-2xl"></i>
179
+ </div>
180
+ <h3 class="text-xl font-bold text-gray-900 mb-3">定量分析报告</h3>
181
+ <p class="text-gray-600 mb-4">
182
+ 自动生成结构化报告，提供病灶大小、体积、密度等定量数据，辅助临床决策。
183
+ </p>
184
+ <ul class="space-y-2">
185
+ <li class="flex items-center">
186
+ <i class="fas fa-check text-blue-500 mr-2"></i>
187
+ <span>多参数测量</span>
188
+ </li>
189
+ <li class="flex items-center">
190
+ <i class="fas fa-check text-blue-500 mr-2"></i>
191
+ <span>历史对比</span>
192
+ </li>
193
+ <li class="flex items-center">
194
+ <i class="fas fa-check text-blue-500 mr-2"></i>
195
+ <span>标准化报告模板</span>
196
+ </li>
197
+ </ul>
198
+ </div>
199
+
200
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
201
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
202
+ <i class="fas fa-user-md text-blue-600 text-2xl"></i>
203
+ </div>
204
+ <h3 class="text-xl font-bold text-gray-900 mb-3">临床决策支持</h3>
205
+ <p class="text-gray-600 mb-4">
206
+ 基于海量临床数据和最新指南，为医生提供个性化治疗建议和随访方案。
207
+ </p>
208
+ <ul class="space-y-2">
209
+ <li class="flex items-center">
210
+ <i class="fas fa-check text-blue-500 mr-2"></i>
211
+ <span>治疗方案推荐</span>
212
+ </li>
213
+ <li class="flex items-center">
214
+ <i class="fas fa-check text-blue-500 mr-2"></i>
215
+ <span>预后评估</span>
216
+ </li>
217
+ <li class="flex items-center">
218
+ <i class="fas fa-check text-blue-500 mr-2"></i>
219
+ <span>多学科会诊支持</span>
220
+ </li>
221
+ </ul>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ </section>
226
+
227
+ <!-- 技术优势 -->
228
+ <section id="technology" class="py-20 bg-white">
229
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
230
+ <div class="md:flex items-center">
231
+ <div class="md:w-1/2 mb-12 md:mb-0">
232
+ <img src="https://images.unsplash.com/photo-1629904853893-c2c8981a1dc5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="AI技术" class="screenshot w-full rounded-lg">
233
+ </div>
234
+ <div class="md:w-1/2 md:pl-12">
235
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">领先的AI技术平台</h2>
236
+ <p class="text-lg text-gray-600 mb-8">
237
+ 我们的深度学习算法基于数百万标注影像训练，结合迁移学习和联邦学习技术，持续优化模型性能。
238
+ </p>
239
+
240
+ <div class="space-y-6">
241
+ <div class="flex">
242
+ <div class="flex-shrink-0">
243
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600">
244
+ <i class="fas fa-robot text-xl"></i>
245
+ </div>
246
+ </div>
247
+ <div class="ml-4">
248
+ <h3 class="text-lg font-medium text-gray-900">多模态深度学习</h3>
249
+ <p class="mt-2 text-gray-600">
250
+ 支持CT、MRI、X光、超声等多种影像模态的联合分析，提高诊断准确性。
251
+ </p>
252
+ </div>
253
+ </div>
254
+
255
+ <div class="flex">
256
+ <div class="flex-shrink-0">
257
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600">
258
+ <i class="fas fa-shield-alt text-xl"></i>
259
+ </div>
260
+ </div>
261
+ <div class="ml-4">
262
+ <h3 class="text-lg font-medium text-gray-900">隐私保护技术</h3>
263
+ <p class="mt-2 text-gray-600">
264
+ 采用联邦学习和差分隐私技术，确保患者数据安全，符合医疗数据合规要求。
265
+ </p>
266
+ </div>
267
+ </div>
268
+
269
+ <div class="flex">
270
+ <div class="flex-shrink-0">
271
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600">
272
+ <i class="fas fa-sync-alt text-xl"></i>
273
+ </div>
274
+ </div>
275
+ <div class="ml-4">
276
+ <h3 class="text-lg font-medium text-gray-900">持续学习系统</h3>
277
+ <p class="mt-2 text-gray-600">
278
+ 模型通过实际使用反馈不断优化，保持诊断能力的持续提升。
279
+ </p>
280
+ </div>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ </section>
287
+
288
+ <!-- 解决方案 -->
289
+ <section id="solutions" class="py-20 bg-gray-50">
290
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
291
+ <div class="text-center mb-16">
292
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">专业领域解决方案</h2>
293
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
294
+ 针对不同临床场景和专科需求，提供定制化AI分析工具
295
+ </p>
296
+ </div>
297
+
298
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
299
+ <div class="bg-white rounded-xl overflow-hidden shadow-md">
300
+ <div class="h-48 bg-blue-600 flex items-center justify-center">
301
+ <i class="fas fa-heartbeat text-white text-6xl"></i>
302
+ </div>
303
+ <div class="p-6">
304
+ <h3 class="text-xl font-bold text-gray-900 mb-3">心血管影像分析</h3>
305
+ <p class="text-gray-600 mb-4">
306
+ 冠状动脉CTA自动分析，斑块检测，狭窄程度评估，心脏功能定量分析。
307
+ </p>
308
+ <a href="#" class="text-blue-600 font-medium inline-flex items-center">
309
+ 了解更多 <i class="fas fa-chevron-right ml-1 text-sm"></i>
310
+ </a>
311
+ </div>
312
+ </div>
313
+
314
+ <div class="bg-white rounded-xl overflow-hidden shadow-md">
315
+ <div class="h-48 bg-green-600 flex items-center justify-center">
316
+ <i class="fas fa-lungs text-white text-6xl"></i>
317
+ </div>
318
+ <div class="p-6">
319
+ <h3 class="text-xl font-bold text-gray-900 mb-3">胸部CT智能筛查</h3>
320
+ <p class="text-gray-600 mb-4">
321
+ 肺结节自动检测与分类，肺癌风险评估，肺炎病灶分析，肺气肿定量评估。
322
+ </p>
323
+ <a href="#" class="text-blue-600 font-medium inline-flex items-center">
324
+ 了解更多 <i class="fas fa-chevron-right ml-1 text-sm"></i>
325
+ </a>
326
+ </div>
327
+ </div>
328
+
329
+ <div class="bg-white rounded-xl overflow-hidden shadow-md">
330
+ <div class="h-48 bg-purple-600 flex items-center justify-center">
331
+ <i class="fas fa-brain text-white text-6xl"></i>
332
+ </div>
333
+ <div class="p-6">
334
+ <h3 class="text-xl font-bold text-gray-900 mb-3">神经影像分析</h3>
335
+ <p class="text-gray-600 mb-4">
336
+ 脑卒中病灶检测，脑肿瘤分割与分级，脑萎缩定量分析，白质病变评估。
337
+ </p>
338
+ <a href="#" class="text-blue-600 font-medium inline-flex items-center">
339
+ 了解更多 <i class="fas fa-chevron-right ml-1 text-sm"></i>
340
+ </a>
341
+ </div>
342
+ </div>
343
+
344
+ <div class="bg-white rounded-xl overflow-hidden shadow-md">
345
+ <div class="h-48 bg-yellow-600 flex items-center justify-center">
346
+ <i class="fas fa-bone text-white text-6xl"></i>
347
+ </div>
348
+ <div class="p-6">
349
+ <h3 class="text-xl font-bold text-gray-900 mb-3">骨肌系统分析</h3>
350
+ <p class="text-gray-600 mb-4">
351
+ 骨折自动检测，骨质疏松评估，关节间隙测量，骨龄评估，肌肉脂肪定量。
352
+ </p>
353
+ <a href="#" class="text-blue-600 font-medium inline-flex items-center">
354
+ 了解更多 <i class="fas fa-chevron-right ml-1 text-sm"></i>
355
+ </a>
356
+ </div>
357
+ </div>
358
+
359
+ <div class="bg-white rounded-xl overflow-hidden shadow-md">
360
+ <div class="h-48 bg-red-600 flex items-center justify-center">
361
+ <i class="fas fa-procedures text-white text-6xl"></i>
362
+ </div>
363
+ <div class="p-6">
364
+ <h3 class="text-xl font-bold text-gray-900 mb-3">腹部影像分析</h3>
365
+ <p class="text-gray-600 mb-4">
366
+ 肝脏病变检测，胰腺肿瘤分析，肾脏囊肿分类，腹腔淋巴结评估。
367
+ </p>
368
+ <a href="#" class="text-blue-600 font-medium inline-flex items-center">
369
+ 了解更多 <i class="fas fa-chevron-right ml-1 text-sm"></i>
370
+ </a>
371
+ </div>
372
+ </div>
373
+
374
+ <div class="bg-white rounded-xl overflow-hidden shadow-md">
375
+ <div class="h-48 bg-pink-600 flex items-center justify-center">
376
+ <i class="fas fa-female text-white text-6xl"></i>
377
+ </div>
378
+ <div class="p-6">
379
+ <h3 class="text-xl font-bold text-gray-900 mb-3">乳腺影像分析</h3>
380
+ <p class="text-gray-600 mb-4">
381
+ 乳腺X线摄影(MG)病灶检测，乳腺超声分析，BI-RADS自动分类，乳腺癌风险评估。
382
+ </p>
383
+ <a href="#" class="text-blue-600 font-medium inline-flex items-center">
384
+ 了解更多 <i class="fas fa-chevron-right ml-1 text-sm"></i>
385
+ </a>
386
+ </div>
387
+ </div>
388
+ </div>
389
+ </div>
390
+ </section>
391
+
392
+ <!-- 客户案例 -->
393
+ <section id="cases" class="py-20 bg-white">
394
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
395
+ <div class="text-center mb-16">
396
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">成功案例</h2>
397
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
398
+ 我们已帮助众多医疗机构提升影像诊断效率和质量
399
+ </p>
400
+ </div>
401
+
402
+ <div class="grid md:grid-cols-3 gap-8">
403
+ <div class="bg-gray-50 p-8 rounded-xl">
404
+ <div class="flex items-center mb-6">
405
+ <div class="h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
406
+ <i class="fas fa-hospital text-blue-600 text-xl"></i>
407
+ </div>
408
+ <div>
409
+ <h4 class="font-bold text-gray-900">北京协和医院</h4>
410
+ <p class="text-sm text-gray-500">三甲综合医院</p>
411
+ </div>
412
+ </div>
413
+ <p class="text-gray-600 mb-6">
414
+ "采用MedVision AI肺结节分析系统后，我们的早期肺癌检出率提高了32%，平均报告时间缩短了65%。"
415
+ </p>
416
+ <div class="flex items-center">
417
+ <div class="h-10 w-10 rounded-full overflow-hidden mr-3">
418
+ <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="张医生" class="h-full w-full object-cover">
419
+ </div>
420
+ <div>
421
+ <p class="text-sm font-medium text-gray-900">张医生</p>
422
+ <p class="text-xs text-gray-500">放射科主任</p>
423
+ </div>
424
+ </div>
425
+ </div>
426
+
427
+ <div class="bg-gray-50 p-8 rounded-xl">
428
+ <div class="flex items-center mb-6">
429
+ <div class="h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
430
+ <i class="fas fa-clinic-medical text-blue-600 text-xl"></i>
431
+ </div>
432
+ <div>
433
+ <h4 class="font-bold text-gray-900">上海瑞金医院</h4>
434
+ <p class="text-sm text-gray-500">三甲专科医院</p>
435
+ </div>
436
+ </div>
437
+ <p class="text-gray-600 mb-6">
438
+ "心血管AI分析工具帮助我们实现了冠状动脉CTA的标准化报告，减少了医生间诊断差异，提高了临床决策一致性。"
439
+ </p>
440
+ <div class="flex items-center">
441
+ <div class="h-10 w-10 rounded-full overflow-hidden mr-3">
442
+ <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="李医生" class="h-full w-full object-cover">
443
+ </div>
444
+ <div>
445
+ <p class="text-sm font-medium text-gray-900">李医生</p>
446
+ <p class="text-xs text-gray-500">心内科副主任</p>
447
+ </div>
448
+ </div>
449
+ </div>
450
+
451
+ <div class="bg-gray-50 p-8 rounded-xl">
452
+ <div class="flex items-center mb-6">
453
+ <div class="h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
454
+ <i class="fas fa-hospital-alt text-blue-600 text-xl"></i>
455
+ </div>
456
+ <div>
457
+ <h4 class="font-bold text-gray-900">广州中山医院</h4>
458
+ <p class="text-sm text-gray-500">区域医疗中心</p>
459
+ </div>
460
+ </div>
461
+ <p class="text-gray-600 mb-6">
462
+ "神经影像AI分析平台显著提升了我们脑卒中患者的早期识别率，为溶栓治疗争取了宝贵时间窗口。"
463
+ </p>
464
+ <div class="flex items-center">
465
+ <div class="h-10 w-10 rounded-full overflow-hidden mr-3">
466
+ <img src="https://randomuser.me/api/portraits/women/56.jpg" alt="王医生" class="h-full w-full object-cover">
467
+ </div>
468
+ <div>
469
+ <p class="text-sm font-medium text-gray-900">王医生</p>
470
+ <p class="text-xs text-gray-500">神经内科主任</p>
471
+ </div>
472
+ </div>
473
+ </div>
474
+ </div>
475
+
476
+ <div class="mt-12 text-center">
477
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-gray-300 shadow-sm text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
478
+ 查看更多案例 <i class="fas fa-arrow-right ml-2"></i>
479
+ </a>
480
+ </div>
481
+ </div>
482
+ </section>
483
+
484
+ <!-- 演示请求 -->
485
+ <section id="demo" class="py-20 gradient-bg">
486
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
487
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
488
+ <div class="mb-12 lg:mb-0">
489
+ <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">体验MedVision AI的强大功能</h2>
490
+ <p class="text-lg text-blue-100 mb-8 max-w-lg">
491
+ 申请产品演示，了解如何将AI医学影像分析集成到您的工作流程中，提升诊断效率和准确性。
492
+ </p>
493
+ <div class="bg-white bg-opacity-10 p-6 rounded-lg border border-white border-opacity-20">
494
+ <div class="flex items-start">
495
+ <div class="flex-shrink-0">
496
+ <div class="h-10 w-10 rounded-full bg-blue-100 bg-opacity-20 flex items-center justify-center">
497
+ <i class="fas fa-check text-white"></i>
498
+ </div>
499
+ </div>
500
+ <div class="ml-4">
501
+ <h3 class="text-lg font-medium text-white">演示包含</h3>
502
+ <ul class="mt-2 space-y-2 text-blue-100">
503
+ <li class="flex items-start">
504
+ <i class="fas fa-check mt-1 mr-2 text-xs text-white"></i>
505
+ <span>实时AI分析展示</span>
506
+ </li>
507
+ <li class="flex items-start">
508
+ <i class="fas fa-check mt-1 mr-2 text-xs text-white"></i>
509
+ <span>系统集成方案咨询</span>
510
+ </li>
511
+ <li class="flex items-start">
512
+ <i class="fas fa-check mt-1 mr-2 text-xs text-white"></i>
513
+ <span>定制化需求讨论</span>
514
+ </li>
515
+ <li class="flex items-start">
516
+ <i class="fas fa-check mt-1 mr-2 text-xs text-white"></i>
517
+ <span>ROI分析报告</span>
518
+ </li>
519
+ </ul>
520
+ </div>
521
+ </div>
522
+ </div>
523
+ </div>
524
+
525
+ <div class="bg-white rounded-xl shadow-xl overflow-hidden">
526
+ <div class="p-8">
527
+ <h3 class="text-2xl font-bold text-gray-900 mb-6">申请产品演示</h3>
528
+ <form>
529
+ <div class="mb-4">
530
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
531
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="请输入您的姓名">
532
+ </div>
533
+ <div class="mb-4">
534
+ <label for="hospital" class="block text-sm font-medium text-gray-700 mb-1">医院/机构</label>
535
+ <input type="text" id="hospital" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="请输入医院或机构名称">
536
+ </div>
537
+ <div class="mb-4">
538
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">电子邮箱</label>
539
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="请输入您的邮箱">
540
+ </div>
541
+ <div class="mb-6">
542
+ <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">联系电话</label>
543
+ <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="请输入您的电话">
544
+ </div>
545
+ <button type="submit" class="w-full bg-blue-600 text-white py-3 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 font-medium transition duration-300">
546
+ 提交申请
547
+ </button>
548
+ </form>
549
+ </div>
550
+ </div>
551
+ </div>
552
+ </div>
553
+ </section>
554
+
555
+ <!-- 合作伙伴 -->
556
+ <section class="py-16 bg-gray-50">
557
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
558
+ <div class="text-center mb-12">
559
+ <h2 class="text-2xl font-bold text-gray-900 mb-4">信任我们的合作伙伴</h2>
560
+ <p class="text-gray-600 max-w-2xl mx-auto">
561
+ 我们与国内外领先的医疗机构、科研院所和技术公司建立了长期合作关系
562
+ </p>
563
+ </div>
564
+
565
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 items-center">
566
+ <div class="flex justify-center">
567
+ <div class="h-16 flex items-center">
568
+ <i class="fas fa-hospital text-4xl text-gray-400"></i>
569
+ <span class="ml-2 text-lg font-semibold text-gray-700">协和</span>
570
+ </div>
571
+ </div>
572
+ <div class="flex justify-center">
573
+ <div class="h-16 flex items-center">
574
+ <i class="fas fa-hospital text-4xl text-gray-400"></i>
575
+ <span class="ml-2 text-lg font-semibold text-gray-700">华西</span>
576
+ </div>
577
+ </div>
578
+ <div class="flex justify-center">
579
+ <div class="h-16 flex items-center">
580
+ <i class="fas fa-hospital text-4xl text-gray-400"></i>
581
+ <span class="ml-2 text-lg font-semibold text-gray-700">301</span>
582
+ </div>
583
+ </div>
584
+ <div class="flex justify-center">
585
+ <div class="h-16 flex items-center">
586
+ <i class="fas fa-hospital text-4xl text-gray-400"></i>
587
+ <span class="ml-2 text-lg font-semibold text-gray-700">瑞金</span>
588
+ </div>
589
+ </div>
590
+ <div class="flex justify-center">
591
+ <div class="h-16 flex items-center">
592
+ <i class="fas fa-hospital text-4xl text-gray-400"></i>
593
+ <span class="ml-2 text-lg font-semibold text-gray-700">中山</span>
594
+ </div>
595
+ </div>
596
+ <div class="flex justify-center">
597
+ <div class="h-16 flex items-center">
598
+ <i class="fas fa-hospital text-4xl text-gray-400"></i>
599
+ <span class="ml-2 text-lg font-semibold text-gray-700">湘雅</span>
600
+ </div>
601
+ </div>
602
+ </div>
603
+ </div>
604
+ </section>
605
+
606
+ <!-- 联系我们 -->
607
+ <section id="contact" class="py-20 bg-white">
608
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
609
+ <div class="lg:grid lg:grid-cols-2 lg:gap-12">
610
+ <div class="mb-12 lg:mb-0">
611
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">联系我们</h2>
612
+ <p class="text-lg text-gray-600 mb-8">
613
+ 我们的团队随时准备为您解答关于MedVision AI产品的任何问题，并提供专业的咨询服务。
614
+ </p>
615
+
616
+ <div class="space-y-6">
617
+ <div class="flex">
618
+ <div class="flex-shrink-0">
619
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600">
620
+ <i class="fas fa-map-marker-alt"></i>
621
+ </div>
622
+ </div>
623
+ <div class="ml-4">
624
+ <h3 class="text-lg font-medium text-gray-900">公司地址</h3>
625
+ <p class="mt-2 text-gray-600">
626
+ 北京市海淀区中关村软件园二期<br>
627
+ 人工智能创新中心A座8层
628
+ </p>
629
+ </div>
630
+ </div>
631
+
632
+ <div class="flex">
633
+ <div class="flex-shrink-0">
634
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600">
635
+ <i class="fas fa-phone-alt"></i>
636
+ </div>
637
+ </div>
638
+ <div class="ml-4">
639
+ <h3 class="text-lg font-medium text-gray-900">联系电话</h3>
640
+ <p class="mt-2 text-gray-600">
641
+ 400-888-8888<br>
642
+ 周一至周五 9:00-18:00
643
+ </p>
644
+ </div>
645
+ </div>
646
+
647
+ <div class="flex">
648
+ <div class="flex-shrink-0">
649
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600">
650
+ <i class="fas fa-envelope"></i>
651
+ </div>
652
+ </div>
653
+ <div class="ml-4">
654
+ <h3 class="text-lg font-medium text-gray-900">电子邮箱</h3>
655
+ <p class="mt-2 text-gray-600">
656
+ contact@medvisionai.com<br>
657
+ 技术支持: support@medvisionai.com
658
+ </p>
659
+ </div>
660
+ </div>
661
+ </div>
662
+ </div>
663
+
664
+ <div>
665
+ <div class="bg-gray-50 p-8 rounded-xl shadow-md">
666
+ <h3 class="text-2xl font-bold text-gray-900 mb-6">发送消息</h3>
667
+ <form>
668
+ <div class="mb-4">
669
+ <label for="contact-name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
670
+ <input type="text" id="contact-name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="请输入您的姓名">
671
+ </div>
672
+ <div class="mb-4">
673
+ <label for="contact-email" class="block text-sm font-medium text-gray-700 mb-1">电子邮箱</label>
674
+ <input type="email" id="contact-email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="请输入您的邮箱">
675
+ </div>
676
+ <div class="mb-4">
677
+ <label for="contact-subject" class="block text-sm font-medium text-gray-700 mb-1">主题</label>
678
+ <input type="text" id="contact-subject" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="请输入主题">
679
+ </div>
680
+ <div class="mb-6">
681
+ <label for="contact-message" class="block text-sm font-medium text-gray-700 mb-1">消息内容</label>
682
+ <textarea id="contact-message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="请输入您的消息"></textarea>
683
+ </div>
684
+ <button type="submit" class="w-full bg-blue-600 text-white py-3 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 font-medium transition duration-300">
685
+ 发送消息
686
+ </button>
687
+ </form>
688
+ </div>
689
+ </div>
690
+ </div>
691
+ </div>
692
+ </section>
693
+
694
+ <!-- 页脚 -->
695
+ <footer class="bg-gray-900 text-white pt-16 pb-8">
696
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
697
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
698
+ <div>
699
+ <h3 class="text-lg font-semibold mb-4">产品</h3>
700
+ <ul class="space-y-2">
701
+ <li><a href="#" class="text-gray-400 hover:text-white transition">功能特性</a></li>
702
+ <li><a href="#" class="text-gray-400 hover:text-white transition">解决方案</a></li>
703
+ <li><a href="#" class="text-gray-400 hover:text-white transition">定价</a></li>
704
+ <li><a href="#" class="text-gray-400 hover:text-white transition">演示申请</a></li>
705
+ </ul>
706
+ </div>
707
+ <div>
708
+ <h3 class="text-lg font-semibold mb-4">资源</h3>
709
+ <ul class="space-y-2">
710
+ <li><a href="#" class="text-gray-400 hover:text-white transition">文档中心</a></li>
711
+ <li><a href="#" class="text-gray-400 hover:text-white transition">API接口</a></li>
712
+ <li><a href="#" class="text-gray-400 hover:text-white transition">技术博客</a></li>
713
+ <li><a href="#" class="text-gray-400 hover:text-white transition">案例研究</a></li>
714
+ </ul>
715
+ </div>
716
+ <div>
717
+ <h3 class="text-lg font-semibold mb-4">公司</h3>
718
+ <ul class="space-y-2">
719
+ <li><a href="#" class="text-gray-400 hover:text-white transition">关于我们</a></li>
720
+ <li><a href="#" class="text-gray-400 hover:text-white transition">团队</a></li>
721
+ <li><a href="#" class="text-gray-400 hover:text-white transition">新闻</a></li>
722
+ <li><a href="#" class="text-gray-400 hover:text-white transition">招聘</a></li>
723
+ </ul>
724
+ </div>
725
+ <div>
726
+ <h3 class="text-lg font-semibold mb-4">法律</h3>
727
+ <ul class="space-y-2">
728
+ <li><a href="#" class="text-gray-400 hover:text-white transition">隐私政策</a></li>
729
+ <li><a href="#" class="text-gray-400 hover:text-white transition">服务条款</a></li>
730
+ <li><a href="#" class="text-gray-400 hover:text-white transition">合规认证</a></li>
731
+ <li><a href="#" class="text-gray-400 hover:text-white transition">数据安全</a></li>
732
+ </ul>
733
+ </div>
734
+ </div>
735
+
736
+ <div class="pt-8 border-t border-gray-800">
737
+ <div class="md:flex md:items-center md:justify-between">
738
+ <div class="flex justify-center md:justify-start mb-4 md:mb-0">
739
+ <div class="flex-shrink-0 flex items-center">
740
+ <i class="fas fa-lungs text-blue-400 text-2xl mr-2"></i>
741
+ <span class="text-xl font-bold text-white">MedVision AI</span>
742
+ </div>
743
+ </div>
744
+ <div class="flex justify-center md:justify-end space-x-6">
745
+ <a href="#" class="text-gray-400 hover:text-white">
746
+ <i class="fab fa-weixin text-xl"></i>
747
+ </a>
748
+ <a href="#" class="text-gray-400 hover:text-white">
749
+ <i class="fab fa-weibo text-xl"></i>
750
+ </a>
751
+ <a href="#" class="text-gray-400 hover:text-white">
752
+ <i class="fab fa-linkedin text-xl"></i>
753
+ </a>
754
+ <a href="#" class="text-gray-400 hover:text-white">
755
+ <i class="fab fa-github text-xl"></i>
756
+ </a>
757
+ </div>
758
+ </div>
759
+ <div class="mt-8 text-center text-gray-400 text-sm">
760
+ <p>© 2023 MedVision AI Technologies. 保留所有权利。</p>
761
+ <p class="mt-2">京ICP备12345678号 | 京公网安备11010802012345号</p>
762
+ </div>
763
+ </div>
764
+ </div>
765
+ </footer>
766
+
767
+ <script>
768
+ // 简单的滚动动画效果
769
+ document.addEventListener('DOMContentLoaded', function() {
770
+ const observer = new IntersectionObserver((entries) => {
771
+ entries.forEach(entry => {
772
+ if (entry.isIntersecting) {
773
+ entry.target.classList.add('animate-fade-in');
774
+ }
775
+ });
776
+ }, {
777
+ threshold: 0.1
778
+ });
779
+
780
+ document.querySelectorAll('section').forEach(section => {
781
+ observer.observe(section);
782
+ });
783
+
784
+ // 平滑滚动
785
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
786
+ anchor.addEventListener('click', function (e) {
787
+ e.preventDefault();
788
+
789
+ const targetId = this.getAttribute('href');
790
+ if (targetId === '#') return;
791
+
792
+ const targetElement = document.querySelector(targetId);
793
+ if (targetElement) {
794
+ window.scrollTo({
795
+ top: targetElement.offsetTop - 80,
796
+ behavior: 'smooth'
797
+ });
798
+ }
799
+ });
800
+ });
801
+ });
802
+ </script>
803
+ <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=Hulking83/medai01" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
804
+ </html>