-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
200 lines (186 loc) · 14.4 KB
/
index.html
File metadata and controls
200 lines (186 loc) · 14.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Competency Framework for AHM Practice</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #f8f9fa; /* Fallback background */
}
.hero-section {
/* Soothing lavender gradient */
background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
}
.main-content {
background-color: #f1f5f9; /* Slate-100 for subtle contrast */
}
.domain-card {
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
display: flex;
flex-direction: column;
height: 100%;
}
.domain-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.resource-btn {
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.resource-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
</style>
</head>
<body class="text-gray-800">
<header class="bg-white/80 backdrop-blur-md sticky top-0 z-50 shadow-sm">
<div class="container mx-auto px-6 py-4">
<h1 class="text-xl md:text-2xl font-bold text-gray-900">AI in AHM: A Framework for Responsible Practice</h1>
</div>
</header>
<section class="hero-section">
<div class="container mx-auto px-6 py-20 md:py-32 text-center">
<h2 class="text-4xl md:text-6xl font-extrabold text-gray-900 leading-tight mb-4">Guiding the Future of AHM with AI.</h2>
<p class="text-lg md:text-xl text-gray-700 max-w-3xl mx-auto">
To harness the potential of AI while upholding the core values of our profession, this framework provides the essential competencies for practitioners of Acupuncture and Herbal Medicine to engage with AI technologies ethically, responsibly, and effectively.
</p>
</div>
</section>
<main class="main-content">
<div class="container mx-auto px-6 py-16 md:py-24">
<div class="text-center mb-16">
<h3 class="text-3xl md:text-4xl font-bold text-gray-900">Six Core Domains</h3>
<p class="text-md text-gray-600 mt-2">Six pillars for responsible AI engagement in Acupuncture and Herbal Medicine.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="domain-card bg-white rounded-2xl shadow-lg overflow-hidden p-8">
<div class="flex-shrink-0 mb-6 flex items-center">
<div class="p-3 rounded-full bg-sky-100">
<svg class="w-8 h-8 text-sky-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.636-6.364l.707.707M19.071 19.071l-.707-.707M12 21v-1m-6.364-1.636l.707-.707M5.636 5.636l-.707-.707m12.728 12.728l.707.707M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
</div>
<h4 class="text-2xl font-bold text-gray-900 ml-4">AI Literacy & Fundamentals</h4>
</div>
<div class="flex-grow">
<ul class="space-y-4 text-gray-700">
<li class="flex items-start"><span class="font-bold text-sky-500 mr-2 mt-1">✓</span> Explain core AI concepts such as training data, model limits, hallucinations, and inference.</li>
<li class="flex items-start"><span class="font-bold text-sky-500 mr-2 mt-1">✓</span> Identify relevant use cases for AI in clinical or administrative workflows.</li>
<li class="flex items-start"><span class="font-bold text-sky-500 mr-2 mt-1">✓</span> Review AI-generated information for accuracy and relevance before use.</li>
</ul>
</div>
</div>
<div class="domain-card bg-white rounded-2xl shadow-lg overflow-hidden p-8">
<div class="flex-shrink-0 mb-6 flex items-center">
<div class="p-3 rounded-full bg-indigo-100">
<svg class="w-8 h-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
</div>
<h4 class="text-2xl font-bold text-gray-900 ml-4">Transparency & Explainability</h4>
</div>
<div class="flex-grow">
<ul class="space-y-4 text-gray-700">
<li class="flex items-start"><span class="font-bold text-indigo-500 mr-2 mt-1">✓</span> Disclose AI use in patient care or administration within appropriate documentation.</li>
<li class="flex items-start"><span class="font-bold text-indigo-500 mr-2 mt-1">✓</span> Communicate to patients, in plain language, when and how AI informs their care.</li>
<li class="flex items-start"><span class="font-bold text-indigo-500 mr-2 mt-1">✓</span> Select AI tools that provide understandable and explainable outputs where possible.</li>
</ul>
</div>
</div>
<div class="domain-card bg-white rounded-2xl shadow-lg overflow-hidden p-8">
<div class="flex-shrink-0 mb-6 flex items-center">
<div class="p-3 rounded-full bg-teal-100">
<svg class="w-8 h-8 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
</div>
<h4 class="text-2xl font-bold text-gray-900 ml-4">Fairness & Inclusivity</h4>
</div>
<div class="flex-grow">
<ul class="space-y-4 text-gray-700">
<li class="flex items-start"><span class="font-bold text-teal-500 mr-2 mt-1">✓</span> Evaluate AI tools for potential biases that could affect different populations.</li>
<li class="flex items-start"><span class="font-bold text-teal-500 mr-2 mt-1">✓</span> Advocate for representative, diverse datasets in AI development.</li>
<li class="flex items-start"><span class="font-bold text-teal-500 mr-2 mt-1">✓</span> Flag AI outputs that may unintentionally exclude or disadvantage vulnerable groups.</li>
</ul>
</div>
</div>
<div class="domain-card bg-white rounded-2xl shadow-lg overflow-hidden p-8">
<div class="flex-shrink-0 mb-6 flex items-center">
<div class="p-3 rounded-full bg-rose-100">
<svg class="w-8 h-8 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg>
</div>
<h4 class="text-2xl font-bold text-gray-900 ml-4">Accountability & Responsibility</h4>
</div>
<div class="flex-grow">
<ul class="space-y-4 text-gray-700">
<li class="flex items-start"><span class="font-bold text-rose-500 mr-2 mt-1">✓</span> Maintain professional accountability for clinical and operational decisions.</li>
<li class="flex items-start"><span class="font-bold text-rose-500 mr-2 mt-1">✓</span> Differentiate clearly between AI‑generated suggestions and personal clinical judgment.</li>
<li class="flex items-start"><span class="font-bold text-rose-500 mr-2 mt-1">✓</span> Document AI use appropriately within patient records or administrative systems.</li>
<li class="flex items-start"><span class="font-bold text-rose-500 mr-2 mt-1">✓</span> Identify situations where legal or regulatory guidance is needed.</li>
</ul>
</div>
</div>
<div class="domain-card bg-white rounded-2xl shadow-lg overflow-hidden p-8">
<div class="flex-shrink-0 mb-6 flex items-center">
<div class="p-3 rounded-full bg-amber-100">
<svg class="w-8 h-8 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
</div>
<h4 class="text-2xl font-bold text-gray-900 ml-4">Risk Awareness & Mitigation</h4>
</div>
<div class="flex-grow">
<ul class="space-y-4 text-gray-700">
<li class="flex items-start"><span class="font-bold text-amber-500 mr-2 mt-1">✓</span> Use basic risk screening or checklists to evaluate AI tools before adoption.</li>
<li class="flex items-start"><span class="font-bold text-amber-500 mr-2 mt-1">✓</span> Identify and respond to performance, safety, or privacy concerns.</li>
<li class="flex items-start"><span class="font-bold text-amber-500 mr-2 mt-1">✓</span> Recognize that AI does not replace privacy and informed consent requirements.</li>
</ul>
</div>
</div>
<div class="domain-card bg-white rounded-2xl shadow-lg overflow-hidden p-8">
<div class="flex-shrink-0 mb-6 flex items-center">
<div class="p-3 rounded-full bg-purple-100">
<svg class="w-8 h-8 text-purple-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 0 1-1.125-1.125v-3.75ZM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-8.25ZM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-2.25Z" />
</svg>
</div>
<h4 class="text-2xl font-bold text-gray-900 ml-4">Interdisciplinary Collaboration</h4>
</div>
<div class="flex-grow">
<ul class="space-y-4 text-gray-700">
<li class="flex items-start"><span class="font-bold text-purple-500 mr-2 mt-1">✓</span> Collaborate with data scientists, technologists, and ethics experts during AI evaluation.</li>
<li class="flex items-start"><span class="font-bold text-purple-500 mr-2 mt-1">✓</span> Help build or serve on AI oversight committees.</li>
<li class="flex items-start"><span class="font-bold text-purple-500 mr-2 mt-1">✓</span> Escalate technical or ethical issues promptly to the appropriate stakeholder.</li>
</ul>
</div>
</div>
</div>
</div>
</main>
<section class="bg-slate-700">
<div class="container mx-auto px-6 py-12 md:py-16">
<div class="text-center mb-8">
<h3 class="text-3xl font-bold text-white">View Resources</h3>
</div>
<div class="flex flex-col md:flex-row justify-center items-center gap-6">
<a href="checklist.html" class="resource-btn w-full md:w-auto text-center bg-indigo-500 text-white font-bold py-3 px-8 rounded-lg shadow-md hover:bg-indigo-600">
Responsible AI Use Checklist
</a>
<a href="use-cases.html" class="resource-btn w-full md:w-auto text-center bg-teal-500 text-white font-bold py-3 px-8 rounded-lg shadow-md hover:bg-teal-600">
AI Use Case Examples
</a>
<a href="policy-guide.html" class="resource-btn w-full md:w-auto text-center bg-slate-500 text-white font-bold py-3 px-8 rounded-lg shadow-md hover:bg-slate-600">
Institutional Policy Guide
</a>
</div>
</div>
</section>
<footer class="bg-gray-200 border-t border-gray-300">
<div class="container mx-auto px-6 py-12 text-center">
<h4 class="font-semibold text-lg text-gray-800 mb-2">Please Note</h4>
<p class="text-sm text-gray-600 max-w-4xl mx-auto">
This framework provides guidance only and does not constitute direct education, training, or certification. It defines expected practitioner competencies to foster responsible AI awareness and use in Acupuncture and Herbal Medicine, without prescribing specific educational programs.
</p>
</div>
</footer>
</body>
</html>