-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
276 lines (254 loc) · 18.3 KB
/
index.html
File metadata and controls
276 lines (254 loc) · 18.3 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
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Literacy Paths | A Framework for TCM</title>
<!-- Tailwind CSS for styling -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts: Inter -->
<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&display=swap" rel="stylesheet">
<!-- Lucide Icons for professional icons -->
<script src="https://unpkg.com/lucide@latest"></script>
<style>
/* Use Inter as the default font */
body {
font-family: 'Inter', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Animation for elements fading in on scroll */
.fade-in-section {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.is-visible {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body class="bg-white text-slate-800">
<!-- Header -->
<header class="bg-white/90 backdrop-blur-lg sticky top-0 z-50 border-b border-slate-200">
<div class="mx-auto max-w-7xl p-4 px-6 lg:px-8">
<h1 class="text-xl md:text-2xl font-bold text-slate-900">AI Literacy Paths for TCM</h1>
</div>
</header>
<!-- Main Content -->
<main class="mx-auto max-w-7xl px-6 lg:px-8 py-16 md:py-24 space-y-24">
<!-- Hero Section -->
<section class="text-center fade-in-section">
<h2 class="text-4xl md:text-6xl font-bold text-slate-900 tracking-tighter">Leading the Future of Integrative Medicine</h2>
<p class="mt-6 max-w-4xl mx-auto text-xl text-slate-600">
This initiative provides a strategic framework to ensure every TCM professional can become 'bilingual'—fluent in the principles of Traditional Chinese Medicine and in the application of AI to advance their practice, teaching, and research.
</p>
</section>
<!-- NEW: Guiding Principles Section -->
<section class="fade-in-section">
<div class="text-center">
<h2 class="mt-2 text-4xl md:text-5xl font-bold text-slate-900 tracking-tighter">Guiding Principles</h2>
<p class="mt-4 max-w-3xl mx-auto text-xl text-slate-600">This framework is built on two core philosophies that prioritize human intellect and ethical integrity in the age of AI.</p>
</div>
<div class="mt-16 grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-slate-50 p-8 rounded-2xl border border-slate-200">
<div class="flex items-center space-x-4">
<div class="bg-purple-100 text-purple-700 p-3 rounded-full">
<i data-lucide="brain"></i>
</div>
<h3 class="text-2xl font-semibold text-slate-900">Clarity of Thought</h3>
</div>
<p class="mt-4 text-lg text-slate-700">Effective AI collaboration is not about "prompting tricks"; it is a reflection of our own thinking. We emphasize a <strong class="font-semibold text-slate-800">Critical Thinking Framework</strong>—meta-clarity, systematic deconstruction, and iterative refinement—to use AI as a tool to sharpen our own intellect, not replace it.</p>
</div>
<div class="bg-slate-50 p-8 rounded-2xl border border-slate-200">
<div class="flex items-center space-x-4">
<div class="bg-purple-100 text-purple-700 p-3 rounded-full">
<i data-lucide="user-check"></i>
</div>
<h3 class="text-2xl font-semibold text-slate-900">Meaningful Human Control</h3>
</div>
<p class="mt-4 text-lg text-slate-700">In high-stakes fields like medicine, the human must remain the ultimate clinical reasoner. We are guided by the principles of <strong class="font-semibold text-slate-800">Explainable AI (XAI)</strong>, advocating for systems that allow practitioners to understand, challenge, and take full responsibility for AI-assisted decisions, thereby preserving their epistemological integrity.</p>
</div>
</div>
</section>
<!-- Core Curriculum Section -->
<section class="fade-in-section">
<div class="text-center">
<span class="text-base font-semibold text-indigo-600 tracking-wide uppercase">Starting Point</span>
<h2 class="mt-2 text-4xl md:text-5xl font-bold text-slate-900 tracking-tighter">Core Curriculum for All Paths</h2>
<p class="mt-4 max-w-2xl mx-auto text-xl text-slate-600">Every journey begins with a shared foundation, ensuring a common language and ethical grounding in the principles of artificial intelligence.</p>
</div>
<div class="mt-16 grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-slate-50 p-8 rounded-2xl border border-slate-200">
<div class="flex items-center space-x-4">
<div class="bg-indigo-100 text-indigo-700 p-3 rounded-full">
<i data-lucide="brain-circuit"></i>
</div>
<h3 class="text-2xl font-semibold text-slate-900">Module 1: AI Foundations</h3>
</div>
<p class="mt-4 text-lg text-slate-600 italic">Objective: To build a functional understanding of core AI technologies and their current applications within healthcare and TCM.</p>
<ul class="mt-6 space-y-3 text-lg text-slate-700">
<li class="flex items-start"><span class="bg-indigo-200 text-indigo-800 text-xs font-bold mr-3 px-2 py-1 rounded-full mt-1">L1</span>Differentiate between AI, Machine Learning, and LLMs.</li>
<li class="flex items-start"><span class="bg-indigo-200 text-indigo-800 text-xs font-bold mr-3 px-2 py-1 rounded-full mt-1">L1</span>Apply the Critical Thinking Framework to a simple query.</li>
</ul>
</div>
<div class="bg-slate-50 p-8 rounded-2xl border border-slate-200">
<div class="flex items-center space-x-4">
<div class="bg-indigo-100 text-indigo-700 p-3 rounded-full">
<i data-lucide="shield-half"></i>
</div>
<h3 class="text-2xl font-semibold text-slate-900">Module 2: Responsible AI</h3>
</div>
<p class="mt-4 text-lg text-slate-600 italic">Objective: To instill a deep understanding of the ethical responsibilities associated with using AI in a clinical and academic setting.</p>
<ul class="mt-6 space-y-3 text-lg text-slate-700">
<li class="flex items-start"><span class="bg-indigo-200 text-indigo-800 text-xs font-bold mr-3 px-2 py-1 rounded-full mt-1">L1</span>Articulate the principles of Meaningful Human Control.</li>
<li class="flex items-start"><span class="bg-indigo-200 text-indigo-800 text-xs font-bold mr-3 px-2 py-1 rounded-full mt-1">L2</span>Identify potential ethical risks in a provided case study.</li>
<li class="flex items-start"><span class="bg-indigo-200 text-indigo-800 text-xs font-bold mr-3 px-2 py-1 rounded-full mt-1">L3</span>Analyze a diagnostic AI tool for potential bias and lack of explainability.</li>
</ul>
</div>
</div>
</section>
<!-- Paths Section -->
<section class="fade-in-section">
<div class="text-center">
<span class="text-base font-semibold text-indigo-600 tracking-wide uppercase">Specializations</span>
<h2 class="mt-2 text-4xl md:text-5xl font-bold text-slate-900 tracking-tighter">Role-Based Learning Paths</h2>
<p class="mt-4 max-w-2xl mx-auto text-xl text-slate-600">After the core curriculum, learners choose a path that aligns with their professional goals, turning foundational knowledge into specialized, actionable skills.</p>
</div>
<div class="mt-16 space-y-20">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
<div class="lg:col-span-4 text-center lg:text-left">
<h3 class="text-3xl font-bold text-cyan-600">Practitioner Path</h3>
<p class="mt-2 text-lg text-slate-600">Focus: Augmenting clinical intelligence while maintaining practitioner-led care.</p>
</div>
<div class="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-cyan-50 border border-cyan-200 rounded-2xl p-8 h-full">
<h4 class="font-semibold text-xl text-cyan-800">AI as Reasoning Partner</h4>
<ul class="mt-4 space-y-2 text-base text-cyan-900">
<li class="flex items-start"><span class="bg-cyan-200 text-xs font-bold mr-2 px-2 py-1 rounded-full mt-1">L2</span>Use an AI tool to generate differential diagnoses.</li>
<li class="flex items-start"><span class="bg-cyan-200 text-xs font-bold mr-2 px-2 py-1 rounded-full mt-1">L3</span>Critique AI outputs for clinical accuracy and epistemological soundness.</li>
</ul>
</div>
<div class="bg-cyan-50 border border-cyan-200 rounded-2xl p-8 h-full">
<h4 class="font-semibold text-xl text-cyan-800">Intelligent Practice Mgmt.</h4>
<ul class="mt-4 space-y-2 text-base text-cyan-900">
<li class="flex items-start"><span class="bg-cyan-200 text-xs font-bold mr-2 px-2 py-1 rounded-full mt-1">L2</span>Develop a "human-in-the-loop" workflow for an AI scribe.</li>
<li class="flex items-start"><span class="bg-cyan-200 text-xs font-bold mr-2 px-2 py-1 rounded-full mt-1">L3</span>Design a protocol for an AI-assisted telehealth triage system.</li>
</ul>
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
<div class="lg:col-span-4 text-center lg:text-left">
<h3 class="text-3xl font-bold text-emerald-600">Educator Path</h3>
<p class="mt-2 text-lg text-slate-600">Focus: Pioneering AI-driven pedagogy that fosters critical thinking and digital integrity.</p>
</div>
<div class="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-emerald-50 border border-emerald-200 rounded-2xl p-8 h-full">
<h4 class="font-semibold text-xl text-emerald-800">AI-Infused Course Design</h4>
<ul class="mt-4 space-y-2 text-base text-emerald-900">
<li class="flex items-start"><span class="bg-emerald-200 text-xs font-bold mr-2 px-2 py-1 rounded-full mt-1">L2</span>Teach the Critical Thinking Framework to students.</li>
<li class="flex items-start"><span class="bg-emerald-200 text-xs font-bold mr-2 px-2 py-1 rounded-full mt-1">L3</span>Design an assignment that requires ethical AI use and reflection.</li>
</ul>
</div>
<div class="bg-emerald-50 border border-emerald-200 rounded-2xl p-8 h-full">
<h4 class="font-semibold text-xl text-emerald-800">Pedagogy for MHC</h4>
<ul class="mt-4 space-y-2 text-base text-emerald-900">
<li class="flex items-start"><span class="bg-emerald-200 text-xs font-bold mr-2 px-2 py-1 rounded-full mt-1">L3</span>Create a course AI policy that promotes Meaningful Human Control.</li>
<li class="flex items-start"><span class="bg-emerald-200 text-xs font-bold mr-2 px-2 py-1 rounded-full mt-1">L4</span>Develop a new assessment model that evaluates human-AI collaboration.</li>
</ul>
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
<div class="lg:col-span-4 text-center lg:text-left">
<h3 class="text-3xl font-bold text-amber-600">Student Path</h3>
<p class="mt-2 text-lg text-slate-600">Focus: Building a competitive edge to become a future-ready, critically-minded TCM innovator.</p>
</div>
<div class="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-amber-50 border border-amber-200 rounded-2xl p-8 h-full">
<h4 class="font-semibold text-xl text-amber-800">AI-Powered Research</h4>
<ul class="mt-4 space-y-2 text-base text-amber-900">
<li class="flex items-start"><span class="bg-amber-200 text-xs font-bold mr-2 px-2 py-1 rounded-full mt-1">L2</span>Apply the Critical Thinking Framework to a literature review.</li>
<li class="flex items-start"><span class="bg-amber-200 text-xs font-bold mr-2 px-2 py-1 rounded-full mt-1">L3</span>Evaluate the credibility and potential bias of AI-generated summaries.</li>
</ul>
</div>
<div class="bg-amber-50 border border-amber-200 rounded-2xl p-8 h-full">
<h4 class="font-semibold text-xl text-amber-800">Innovation & Prototyping</h4>
<ul class="mt-4 space-y-2 text-base text-amber-900">
<li class="flex items-start"><span class="bg-amber-200 text-xs font-bold mr-2 px-2 py-1 rounded-full mt-1">L3</span>Analyze the ethical implications of a proposed AI-in-TCM tool.</li>
<li class="flex items-start"><span class="bg-amber-200 text-xs font-bold mr-2 px-2 py-1 rounded-full mt-1">L4</span>Draft a conceptual proposal for a new tool that adheres to MHC principles.</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="fade-in-section">
<div class="mx-auto max-w-4xl">
<div class="text-center">
<h3 class="text-3xl font-bold text-slate-900 tracking-tighter">AI Literacy Levels</h3>
<p class="mt-2 text-lg text-slate-600">The competencies throughout this framework are organized into four distinct levels of cognitive skill.</p>
</div>
<div class="mt-10 bg-slate-50 p-8 rounded-2xl border border-slate-200">
<dl class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-8">
<div>
<dt class="font-semibold text-slate-900"><span class="bg-slate-200 text-slate-700 text-xs font-bold mr-2 px-2 py-1 rounded-full">L1</span>Understand</dt>
<dd class="mt-1 text-slate-700">Recalling facts and basic concepts.</dd>
</div>
<div>
<dt class="font-semibold text-slate-900"><span class="bg-slate-200 text-slate-700 text-xs font-bold mr-2 px-2 py-1 rounded-full">L2</span>Apply</dt>
<dd class="mt-1 text-slate-700">Using concepts and methods in new situations.</dd>
</div>
<div>
<dt class="font-semibold text-slate-900"><span class="bg-slate-200 text-slate-700 text-xs font-bold mr-2 px-2 py-1 rounded-full">L3</span>Analyze & Evaluate</dt>
<dd class="mt-1 text-slate-700">Drawing connections, justifying a stance or decision.</dd>
</div>
<div>
<dt class="font-semibold text-slate-900"><span class="bg-slate-200 text-slate-700 text-xs font-bold mr-2 px-2 py-1 rounded-full">L4</span>Create</dt>
<dd class="mt-1 text-slate-700">Producing new or original work.</dd>
</div>
</dl>
<div class="mt-8 pt-6 border-t border-slate-200">
<p class="text-sm text-slate-500 italic">
Levels adapted from Bloom's Taxonomy and the Framework for AI Literacy | EDUCAUSE Review (June 3, 2024).
</p>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-slate-100 border-t border-slate-200">
<div class="mx-auto max-w-7xl p-6 text-center text-base text-slate-500">
<p>© 2025 Sung Woo. AI Literacy Framework for TCM.</p>
</div>
</footer>
<script>
// Initialize Lucide icons
lucide.createIcons();
// Fade-in animation on scroll
const faders = document.querySelectorAll('.fade-in-section');
const appearOptions = {
threshold: 0.1,
rootMargin: "0px 0px -100px 0px"
};
const appearOnScroll = new IntersectionObserver(function(entries, observer) {
entries.forEach(entry => {
if (!entry.isIntersecting) {
return;
} else {
entry.target.classList.add('is-visible');
observer.unobserve(entry.target);
}
});
}, appearOptions);
faders.forEach(fader => {
appearOnScroll.observe(fader);
});
</script>
</body>
</html>