Hugging Face's logo

Spaces:
maomaobj
/
medai-trustring
Running

App Files Community
maomaobj commited on
Commit
00bbf01
·
verified ·
1 Parent(s): 22c1422

生成一张多层环形信息图，主题为“医疗AI的可解释性、可审计性与质量评估”。

Browse files

画面结构：
- 中心圆：AI大脑图标，文字“可信医疗AI”
- 外层三环：
- 第一环：可解释性（Explainability）→ 图标：放大镜 + 图像热区
- 第二环：可审计性（Auditability）→ 图标：日志文件 + 盾牌
- 第三环：质量评估（Evaluation）→ 图标：评分表 + 仪表盘
- 每个环配说明箭头，展示从内到外的信任机制
- 顶部标题：“医疗AI的可解释性、可审计性与质量评估”
- 底部副标题：“让AI可理解、可追溯、可被信任”
- 背景：深蓝—银灰渐变（#1E3A8A → #CBD5E1）
- 风格：扁平化科技感，带光晕与网格线
- 输出比例：16:9 宽屏，1920×1080 或 3840×2160 分辨率，PNG 或 SVG 格式

Files changed (2) hide show
  1. README.md +7 -4
  2. index.html +142 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Medai Trustring
3
- emoji: 🌍
4
  colorFrom: gray
5
- colorTo: indigo
 
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: MedAI TrustRing
 
3
  colorFrom: gray
4
+ colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,143 @@
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
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <style>
10
+ body {
11
+ background: linear-gradient(to bottom, #1E3A8A, #CBD5E1);
12
+ height: 100vh;
13
+ margin: 0;
14
+ display: flex;
15
+ justify-content: center;
16
+ align-items: center;
17
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
18
+ }
19
+ .ring-container {
20
+ position: relative;
21
+ width: 800px;
22
+ height: 800px;
23
+ }
24
+ .ring {
25
+ position: absolute;
26
+ border-radius: 50%;
27
+ display: flex;
28
+ justify-content: center;
29
+ align-items: center;
30
+ text-align: center;
31
+ box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
32
+ transition: transform 0.3s ease;
33
+ }
34
+ .ring:hover {
35
+ transform: scale(1.05);
36
+ }
37
+ .center-circle {
38
+ background: radial-gradient(circle, #3B82F6, #1E40AF);
39
+ box-shadow: 0 0 40px rgba(59, 130, 246, 0.6);
40
+ }
41
+ .inner-ring {
42
+ background: radial-gradient(circle, #60A5FA, #3B82F6);
43
+ }
44
+ .middle-ring {
45
+ background: radial-gradient(circle, #93C5FD, #60A5FA);
46
+ }
47
+ .outer-ring {
48
+ background: radial-gradient(circle, #BFDBFE, #93C5FD);
49
+ }
50
+ .arrow {
51
+ position: absolute;
52
+ height: 2px;
53
+ background: white;
54
+ transform-origin: left center;
55
+ }
56
+ .grid-line {
57
+ position: absolute;
58
+ background: rgba(255, 255, 255, 0.1);
59
+ }
60
+ .horizontal-line {
61
+ width: 100%;
62
+ height: 1px;
63
+ }
64
+ .vertical-line {
65
+ width: 1px;
66
+ height: 100%;
67
+ }
68
+ </style>
69
+ </head>
70
+ <body>
71
+ <!-- Grid Background -->
72
+ <div class="absolute inset-0 overflow-hidden">
73
+ <!-- Horizontal Lines -->
74
+ <div class="grid-line horizontal-line" style="top: 20%"></div>
75
+ <div class="grid-line horizontal-line" style="top: 40%"></div>
76
+ <div class="grid-line horizontal-line" style="top: 60%"></div>
77
+ <div class="grid-line horizontal-line" style="top: 80%"></div>
78
+
79
+ <!-- Vertical Lines -->
80
+ <div class="grid-line vertical-line" style="left: 20%"></div>
81
+ <div class="grid-line vertical-line" style="left: 40%"></div>
82
+ <div class="grid-line vertical-line" style="left: 60%"></div>
83
+ <div class="grid-line vertical-line" style="left: 80%"></div>
84
+ </div>
85
+
86
+ <div class="text-center z-10">
87
+ <h1 class="text-4xl md:text-5xl font-bold text-white mb-2">医疗AI的可解释性、可审计性与质量评估</h1>
88
+ <p class="text-xl text-blue-100 mb-12">让AI可理解、可追溯、可被信任</p>
89
+
90
+ <div class="ring-container mx-auto">
91
+ <!-- Arrows -->
92
+ <div class="arrow" style="width: 150px; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0deg);"></div>
93
+ <div class="arrow" style="width: 250px; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(120deg);"></div>
94
+ <div class="arrow" style="width: 350px; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(240deg);"></div>
95
+
96
+ <!-- Center Circle -->
97
+ <div class="ring center-circle" style="width: 200px; height: 200px; top: 50%; left: 50%; transform: translate(-50%, -50%);">
98
+ <div>
99
+ <i data-feather="cpu" class="text-white mx-auto mb-2" style="width: 60px; height: 60px;"></i>
100
+ <p class="text-white font-bold text-lg">可信医疗AI</p>
101
+ </div>
102
+ </div>
103
+
104
+ <!-- Inner Ring -->
105
+ <div class="ring inner-ring" style="width: 350px; height: 350px; top: 50%; left: 50%; transform: translate(-50%, -50%);">
106
+ <div class="absolute" style="top: 10px; left: 50%; transform: translateX(-50%);">
107
+ <i data-feather="search" class="text-white mx-auto mb-2" style="width: 40px; height: 40px;"></i>
108
+ <p class="text-white font-semibold">可解释性</p>
109
+ <p class="text-blue-50 text-sm mt-1">Explainability</p>
110
+ </div>
111
+ </div>
112
+
113
+ <!-- Middle Ring -->
114
+ <div class="ring middle-ring" style="width: 500px; height: 500px; top: 50%; left: 50%; transform: translate(-50%, -50%);">
115
+ <div class="absolute" style="bottom: 30px; left: 50%; transform: translateX(-50%);">
116
+ <i data-feather="shield" class="text-white mx-auto mb-2" style="width: 40px; height: 40px;"></i>
117
+ <p class="text-white font-semibold">可审计性</p>
118
+ <p class="text-blue-100 text-sm mt-1">Auditability</p>
119
+ </div>
120
+ </div>
121
+
122
+ <!-- Outer Ring -->
123
+ <div class="ring outer-ring" style="width: 650px; height: 650px; top: 50%; left: 50%; transform: translate(-50%, -50%);">
124
+ <div class="absolute" style="top: 50%; right: 10px; transform: translateY(-50%);">
125
+ <i data-feather="bar-chart-2" class="text-white mx-auto mb-2" style="width: 40px; height: 40px;"></i>
126
+ <p class="text-white font-semibold">质量评估</p>
127
+ <p class="text-blue-200 text-sm mt-1">Evaluation</p>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </div>
132
+
133
+ <script>
134
+ feather.replace();
135
+
136
+ // Add glow effect to center circle
137
+ const centerCircle = document.querySelector('.center-circle');
138
+ setInterval(() => {
139
+ centerCircle.style.boxShadow = `0 0 ${10 + Math.random() * 30}px rgba(59, 130, 246, ${0.4 + Math.random() * 0.3})`;
140
+ }, 1000);
141
+ </script>
142
+ </body>
143
  </html>