Hugging Face's logo

Spaces:
maomaobj
/
medifuture-vision
Running

App Files Community
maomaobj commited on
Commit
04a27b6
·
verified ·
1 Parent(s): 154dbdd

生成一张横向信息图，主题为“医学发展的三个阶段：经验医学 → 证据医学 → 智能医学”。

Browse files

视觉布局：
- 三个阶段依次从左到右排列（箭头连接），呈现演进关系。
- 左侧：经验医学（暖黄色，图标为医生与病人对话/古书）
- 中间：证据医学（蓝色，图标为数据图表/统计图）
- 右侧：智能医学（科技蓝或青色，图标为AI大脑/数字医生）
- 每个阶段下方简短描述一行关键词：
- 经验医学：以经验为主，依赖医生直觉
- 证据医学：以数据为据，循证与规范
- 智能医学：以智能为核，预测与精准
风格：扁平化科技风，背景为浅灰或白，带轻微渐变，居中标题“医学发展的三个阶段”。

输出格式：16:9，分辨率1920x1080，PNG。

Files changed (2) hide show
  1. index.html +7 -3
  2. medical_evolution.html +147 -0
index.html CHANGED
@@ -4,7 +4,7 @@
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
  <script src="https://unpkg.com/feather-icons"></script>
9
  <style>
10
  body {
@@ -43,13 +43,17 @@
43
  </style>
44
  </head>
45
  <body class="flex flex-col items-center justify-center p-4">
 
 
 
 
 
46
  <!-- 标题区域 -->
47
  <div class="text-center mb-8 z-10">
48
  <h1 class="text-4xl md:text-5xl font-bold text-white mb-2">智慧医院与数字医生的形态</h1>
49
  <p class="text-xl text-blue-100">让AI成为医学体系的智能中枢</p>
50
  </div>
51
-
52
- <!-- 主要信息图容器 -->
53
  <div class="relative w-full max-w-6xl h-[70vh] bg-opacity-20 rounded-3xl overflow-hidden border border-blue-300 shadow-2xl">
54
  <svg width="100%" height="100%" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid meet">
55
  <defs>
 
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
  <script src="https://unpkg.com/feather-icons"></script>
9
  <style>
10
  body {
 
43
  </style>
44
  </head>
45
  <body class="flex flex-col items-center justify-center p-4">
46
+ <!-- 导航 -->
47
+ <div class="absolute top-4 right-4 z-20">
48
+ <a href="medical_evolution.html" class="bg-white bg-opacity-20 hover:bg-opacity-30 text-white px-4 py-2 rounded-lg transition">医学发展阶段</a>
49
+ </div>
50
+
51
  <!-- 标题区域 -->
52
  <div class="text-center mb-8 z-10">
53
  <h1 class="text-4xl md:text-5xl font-bold text-white mb-2">智慧医院与数字医生的形态</h1>
54
  <p class="text-xl text-blue-100">让AI成为医学体系的智能中枢</p>
55
  </div>
56
+ <!-- 主要信息图容器 -->
 
57
  <div class="relative w-full max-w-6xl h-[70vh] bg-opacity-20 rounded-3xl overflow-hidden border border-blue-300 shadow-2xl">
58
  <svg width="100%" height="100%" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid meet">
59
  <defs>
medical_evolution.html ADDED
@@ -0,0 +1,147 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <style>
10
+ body {
11
+ background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
12
+ height: 100vh;
13
+ overflow: hidden;
14
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
15
+ }
16
+ .stage-card {
17
+ transition: all 0.3s ease;
18
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
19
+ }
20
+ .stage-card:hover {
21
+ transform: translateY(-5px);
22
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
23
+ }
24
+ .arrow {
25
+ stroke: #9CA3AF;
26
+ stroke-width: 3;
27
+ marker-end: url(#arrowhead);
28
+ }
29
+ .icon-container {
30
+ transition: all 0.3s ease;
31
+ }
32
+ .icon-container:hover {
33
+ transform: scale(1.1);
34
+ }
35
+ </style>
36
+ </head>
37
+ <body class="flex flex-col items-center justify-center p-8">
38
+ <!-- 标题区域 -->
39
+ <div class="text-center mb-12 z-10">
40
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">医学发展的三个阶段</h1>
41
+ <div class="w-32 h-1 bg-blue-500 mx-auto rounded-full"></div>
42
+ </div>
43
+
44
+ <!-- 信息图容器 -->
45
+ <div class="relative w-full max-w-6xl h-[70vh]">
46
+ <svg width="100%" height="100%" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid meet">
47
+ <defs>
48
+ <!-- 箭头标记 -->
49
+ <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
50
+ <polygon points="0 0, 10 3.5, 0 7" fill="#9CA3AF" />
51
+ </marker>
52
+ </defs>
53
+
54
+ <!-- 经验医学阶段 -->
55
+ <g transform="translate(300, 300)">
56
+ <rect x="-150" y="-200" width="300" height="400" rx="20" fill="#FEF3C7" class="stage-card" />
57
+ <text x="0" y="-150" text-anchor="middle" fill="#92400E" font-size="28" font-weight="bold">经验医学</text>
58
+
59
+ <!-- 图标 -->
60
+ <g class="icon-container" transform="translate(-50, -80)">
61
+ <circle cx="50" cy="50" r="40" fill="#F59E0B" />
62
+ <text x="50" y="60" text-anchor="middle" fill="white" font-size="30">👨‍⚕️</text>
63
+ </g>
64
+
65
+ <!-- 描述 -->
66
+ <text x="0" y="40" text-anchor="middle" fill="#92400E" font-size="20">以经验为主，依赖医生直觉</text>
67
+
68
+ <!-- 装饰元素 -->
69
+ <g transform="translate(-100, 100)">
70
+ <rect x="0" y="0" width="40" height="50" fill="#FBBF24" rx="5" />
71
+ <rect x="50" y="10" width="40" height="50" fill="#FBBF24" rx="5" />
72
+ <text x="20" y="30" text-anchor="middle" fill="white" font-size="20">📚</text>
73
+ <text x="70" y="40" text-anchor="middle" fill="white" font-size="20">📝</text>
74
+ </g>
75
+ </g>
76
+
77
+ <!-- 连接箭头1 -->
78
+ <line x1="450" y1="540" x2="750" y2="540" class="arrow" />
79
+
80
+ <!-- 证据医学阶段 -->
81
+ <g transform="translate(960, 300)">
82
+ <rect x="-150" y="-200" width="300" height="400" rx="20" fill="#DBEAFE" class="stage-card" />
83
+ <text x="0" y="-150" text-anchor="middle" fill="#1E40AF" font-size="28" font-weight="bold">证据医学</text>
84
+
85
+ <!-- 图标 -->
86
+ <g class="icon-container" transform="translate(-50, -80)">
87
+ <circle cx="50" cy="50" r="40" fill="#3B82F6" />
88
+ <text x="50" y="65" text-anchor="middle" fill="white" font-size="30">📊</text>
89
+ </g>
90
+
91
+ <!-- 描述 -->
92
+ <text x="0" y="40" text-anchor="middle" fill="#1E40AF" font-size="20">以数据为据，循证与规范</text>
93
+
94
+ <!-- 装饰元素 -->
95
+ <g transform="translate(-100, 100)">
96
+ <rect x="0" y="0" width="50" height="30" fill="#60A5FA" rx="5" />
97
+ <rect x="60" y="0" width="50" height="40" fill="#60A5FA" rx="5" />
98
+ <rect x="120" y="0" width="50" height="20" fill="#60A5FA" rx="5" />
99
+ <text x="25" y="22" text-anchor="middle" fill="white" font-size="16">75%</text>
100
+ <text x="85" y="27" text-anchor="middle" fill="white" font-size="16">82%</text>
101
+ <text x="145" y="17" text-anchor="middle" fill="white" font-size="16">91%</text>
102
+ </g>
103
+ </g>
104
+
105
+ <!-- 连接箭头2 -->
106
+ <line x1="1110" y1="540" x2="1410" y2="540" class="arrow" />
107
+
108
+ <!-- 智能医学阶段 -->
109
+ <g transform="translate(1620, 300)">
110
+ <rect x="-150" y="-200" width="300" height="400" rx="20" fill="#D1FAE5" class="stage-card" />
111
+ <text x="0" y="-150" text-anchor="middle" fill="#065F46" font-size="28" font-weight="bold">智能医学</text>
112
+
113
+ <!-- 图标 -->
114
+ <g class="icon-container" transform="translate(-50, -80)">
115
+ <circle cx="50" cy="50" r="40" fill="#10B981" />
116
+ <text x="50" y="65" text-anchor="middle" fill="white" font-size="30">🧠</text>
117
+ </g>
118
+
119
+ <!-- 描述 -->
120
+ <text x="0" y="40" text-anchor="middle" fill="#065F46" font-size="20">以智能为核，预测与精准</text>
121
+
122
+ <!-- 装饰元素 -->
123
+ <g transform="translate(-100, 100)">
124
+ <circle cx="20" cy="20" r="15" fill="#34D399" />
125
+ <circle cx="60" cy="20" r="15" fill="#34D399" />
126
+ <circle cx="100" cy="20" r="15" fill="#34D399" />
127
+ <circle cx="140" cy="20" r="15" fill="#34D399" />
128
+ <text x="20" y="27" text-anchor="middle" fill="white" font-size="12">AI</text>
129
+ <text x="60" y="27" text-anchor="middle" fill="white" font-size="12">ML</text>
130
+ <text x="100" y="27" text-anchor="middle" fill="white" font-size="12">DL</text>
131
+ <text x="140" y="27" text-anchor="middle" fill="white" font-size="12">NN</text>
132
+ </g>
133
+ </g>
134
+ </svg>
135
+ </div>
136
+
137
+ <!-- 底部说明 -->
138
+ <div class="mt-8 text-center text-gray-600">
139
+ <p class="text-lg">从经验到数据再到智能，医学不断演进以更好地服务人类健康</p>
140
+ </div>
141
+
142
+ <script>
143
+ // 初始化Feather图标
144
+ feather.replace();
145
+ </script>
146
+ </body>
147
+ </html>