IISR-Lab.github.io/tap.html at main · IISR-Lab/IISR-Lab.github.io · GitHub

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
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- SEO Meta Tags -->
    <title>IISR Lab - Richard Tzong-Han Tsai</title>
    <meta name="description" content="Research Lab at National Central University, Taiwan.">
    <meta name="keywords" content="AI, NLP, Machine Learning">
    <meta name="author" content="Richard Tzong-Han Tsai">

    <!-- Open Graph -->
    <meta property="og:title" content="IISR Lab - Richard Tzong-Han Tsai">
    <meta property="og:description" content="Research Lab at National Central University, Taiwan.">
    <meta property="og:type" content="website">


<style>
    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; margin: 0; padding: 0; background-color: #f9f9f9; }
    .markdown-body { max-width: 100% !important; padding: 0 !important; }
</style>

</head>
<body>
    <style>
/* --- 1. HackMD 專用強制全寬樣式 (必備) --- */
.container-fluid, #doc, .markdown-body {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* 防止出現水平捲軸 */
body {
    overflow-x: hidden;
}

/* --- 2. 網頁視覺樣式 --- */
.custom-body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
    width: 100%;
}

/* 導覽列 */
.nav-bar {
    background: #fff;
    text-align: center;
    padding: 15px 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    font-size: 0.95em;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 9999;
}
.nav-bar a {
    color: #0366d6;
    text-decoration: none;
    margin: 0 10px;
    font-weight: 500;
}
.nav-bar a:hover { text-decoration: underline; }
.nav-sep { color: #ccc; }

/* Hero Banner (滿版) */
.hero-banner {
    background: linear-gradient(135deg, #002A5C 0%, #c0392b 100%);
    color: white;
    padding: 80px 5%;
    text-align: center;
    border-radius: 0 0 20px 20px;
    margin-bottom: 40px;
    width: 100%;
    box-sizing: border-box;
}

/* 內容容器 (限制寬度 + 置中) */
.content-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;    /* 關鍵：讓內容置中 */
    padding: 40px 20px;
    box-sizing: border-box;
    display: block;
}

/* 標題設定 */
.custom-body h1, .custom-body h2, .custom-body h3 {
    color: #2c3e50;
    margin-top: 1em;
    border-bottom: none !important; /* 移除 HackMD 預設底線 */
}
.section-title {
    text-align: center;
    margin-top: 60px;
    margin-bottom: 40px;
    font-size: 2em;
    position: relative;
}
.section-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: #c0392b;
    margin: 10px auto 0;
}

/* Mission Statement 專用樣式 */
.mission-box {
    max-width: 800px;      /* 縮窄寬度以利閱讀 */
    margin: 0 auto 60px auto; /* 區塊本身置中 */
    text-align: left;      /* 文字靠左對齊 */
}

/* 卡片與網格 */
.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    width: 100%;
}
.card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    padding: 30px;
    flex: 1 1 350px;
    min-width: 300px;
    border-top: 5px solid #ddd;
    box-sizing: border-box;
}
.card-blue { border-top-color: #002A5C; }
.card-red { border-top-color: #c0392b; }

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    width: 100%;
}
.team-member {
    background: white;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #eee;
    text-decoration: none;
    color: inherit;
    display: block;
    box-sizing: border-box;
    transition: transform 0.2s;
}
.team-member:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-color: #3498db;
}
.role-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
    margin-bottom: 5px;
}
.role-pi { background: #e8f4fd; color: #002A5C; }
.role-coi { background: #fff5f5; color: #c0392b; }
.role-collab { background: #f0fdf4; color: #27ae60; }
.custom-body ul { padding-left: 20px; color: #555; text-align: left; }
</style>

<!-- 內容區開始 -->
<div class="custom-body">

<div class="nav-bar">
<a href="index.html">Home</a> <span class="nav-sep">|</span>
<a href="pi.html">PI</a> <span class="nav-sep">|</span>
<a href="people.html">People</a> <span class="nav-sep">|</span>
<a href="research.html">Research</a> <span class="nav-sep">|</span>
<a href="impact.html">Impact</a> <span class="nav-sep">|</span>
<a href="collaboration.html">Collab</a> <span class="nav-sep">|</span>
<a href="publications.html">Pubs</a> <span class="nav-sep">|</span>
<a href="news.html">News</a> <span class="nav-sep">|</span>
<a href="opportunities.html">Opportunities</a>
</div>

<div class="hero-banner">
<div style="font-weight:bold;letter-spacing:3px;margin-bottom:15px;opacity:0.9;">2025 UAAT TAIWAN-CANADA AFFINITY PROGRAM</div>
<h1 style="margin:0;font-size:3em;color:white;line-height:1.2;">Revitalising Taiwanese Hokkien through <br>Neural Language Technologies</h1>
<p style="font-size:1.5em;margin-top:20px;opacity:0.95;font-weight:300;">A Global Collaborative Approach to Educational Learning and Multimodal AI</p>
<div style="margin-top:30px;">
<span style="background:rgba(255,255,255,0.2);padding:5px 15px;border-radius:20px;font-weight:bold;margin:0 5px;">🇹🇼 Taiwan</span>
<span style="background:rgba(255,255,255,0.2);padding:5px 15px;border-radius:20px;font-weight:bold;margin:0 5px;">🇨🇦 Canada</span>
<span style="background:rgba(255,255,255,0.2);padding:5px 15px;border-radius:20px;font-weight:bold;margin:0 5px;">🤖 GenAI</span>
</div>
</div>

<div class="content-wrapper">

<!-- Mission Statement (修正版：區塊置中，文字靠左) -->
<div class="mission-box">
<h2 style="color:#2c3e50; text-align:center;">Mission Statement</h2>
<p style="font-size:1.1em; color:#555; line-height:1.8;">
This multi-year project is co-led by <b>Prof. Richard Tzong-Han Tsai (Taiwan)</b> and <b>Prof. Annie En-Shiun Lee (Canada)</b> to combat the digital scarcity of low-resource languages. By uniting top institutions across both nations, we bridge the generational linguistic gap through high-quality machine translation resources and AI-powered multimodal learning tools like <b>ATAIGI</b>.
</p>
</div>

<!-- Research Pillars -->
<h2 class="section-title">Core Research Thrusts</h2>
<div class="card-container">
<div class="card card-blue">
<h3 style="margin-top:0;color:#002A5C;">1. Improving Translation Quality</h3>
<p><b>Goal:</b> Overcoming data scarcity and "translationese" errors in Sinitic languages (Hokkien, Cantonese, Wu).</p>
<hr style="border:0;border-top:1px solid #eee;margin:15px 0;">
<ul>
<li><b>Hokkien MT Error Dataset:</b> Creating the first span-level error annotation dataset (MQM-derived) for fine-grained evaluation.</li>
<li><b>Dual Translation Models:</b> Developing models optimized for Hokkien (HAN/POJ) ↔ Mandarin/English using <b>TAIDE-7B</b> and <b>LLaMA</b>.</li>
<li><b>Corpus Standardization:</b> Leveraging orthographic similarities to standardize writing systems (HAN, POJ, HL).</li>
<li><b>Tools:</b> Deployment of <i>TRANSLATIONCORRECT</i> framework for rigorous annotation.</li>
</ul>
</div>
<div class="card card-red">
<h3 style="margin-top:0;color:#c0392b;">2. AI-Powered Language Learning</h3>
<p><b>Goal:</b> Creating an immersive, multimodal educational platform for language revitalization.</p>
<hr style="border:0;border-top:1px solid #eee;margin:15px 0;">
<ul>
<li><b>ATAIGI App:</b> A unified open-source app integrating translation, context generation, and transliteration.</li>
<li><b>Multimodal GenAI:</b> Generating contextual images (DALL-E 3) and audio to enhance vocabulary acquisition.</li>
<li><b>3D Avatar Chatbot:</b> Integrating ASR (Whisper) and TTS for scenario-based roleplay and pronunciation practice.</li>
<li><b>Pedagogical Validation:</b> Rigorous user studies with psycholinguistic measures.</li>
</ul>
</div>
</div>

<!-- Team Section -->
<h2 class="section-title">The Collaborative Team</h2>
<div class="card-container" style="align-items:flex-start;">
<!-- Taiwan Team -->
<div style="flex:1;min-width:300px;">
<h3 style="text-align:center;color:#002A5C;margin-bottom:20px;">🇹🇼 Taiwan Team</h3>
<div class="team-grid">
<!-- Richard Tsai -->
<a href="pi.html" class="team-member">
<span class="role-badge role-pi">Principal Investigator (Taiwan)</span>
<div style="font-weight:bold;font-size:1.1em;margin:5px 0;">Prof. Richard Tzong-Han Tsai</div>
<div style="font-size:0.85em;color:#666;">National Central University / Academia Sinica</div>
<div style="font-size:0.85em;margin-top:5px;"><i>NLP, Code-mixing, TAIDE Technical Lead</i></div>
</a>
<!-- Chia-Lin Lee -->
<a href="https://psychology.ntu.edu.tw/en/faculty_teacher_detail.php?id=38" target="_blank" class="team-member">
<span class="role-badge role-coi">Co-Investigator</span>
<div style="font-weight:bold;font-size:1.1em;margin:5px 0;">Prof. Chia-Lin Lee</div>
<div style="font-size:0.85em;color:#666;">NTU Linguistics/Psychology</div>
</a>
<!-- Shu-Kai Hsieh -->
<a href="https://lope.linguistics.ntu.edu.tw/" target="_blank" class="team-member">
<span class="role-badge role-coi">Co-Investigator</span>
<div style="font-weight:bold;font-size:1.1em;margin:5px 0;">Prof. Shu-Kai Hsieh</div>
<div style="font-size:0.85em;color:#666;">NTU Linguistics</div>
</a>
<!-- Chen-Hao Chiu -->
<a href="https://homepage.ntu.edu.tw/~chenhaochiu/" target="_blank" class="team-member">
<span class="role-badge role-coi">Co-Investigator</span>
<div style="font-weight:bold;font-size:1.1em;margin:5px 0;">Prof. Chen-Hao Chiu</div>
<div style="font-size:0.85em;color:#666;">NTU Linguistics</div>
</a>
<!-- Hung-yi Lee -->
<a href="https://speech.ee.ntu.edu.tw/~hylee/" target="_blank" class="team-member">
<span class="role-badge role-collab">Technical Collaborator</span>
<div style="font-weight:bold;font-size:1.1em;margin:5px 0;">Prof. Hung-yi Lee</div>
<div style="font-size:0.85em;color:#666;">NTU Electrical Engineering</div>
</a>
</div>
</div>
<!-- Canada Team -->
<div style="flex:1;min-width:300px;">
<h3 style="text-align:center;color:#c0392b;margin-bottom:20px;">🇨🇦 Canada Team</h3>
<div class="team-grid">
<!-- Annie Lee -->
<a href="https://www.cs.toronto.edu/~ealee/" target="_blank" class="team-member">
<span class="role-badge role-pi">Principal Investigator (Canada)</span>
<div style="font-weight:bold;font-size:1.1em;margin:5px 0;">Prof. Annie En-Shiun Lee</div>
<div style="font-size:0.85em;color:#666;">University of Toronto / Ontario Tech U</div>
</a>
<!-- Muhammad Usman -->
<a href="https://science.ontariotechu.ca/people/faculty/muhammad-usman.php" target="_blank" class="team-member">
<span class="role-badge role-coi">Co-Investigator</span>
<div style="font-weight:bold;font-size:1.1em;margin:5px 0;">Prof. Muhammad Usman</div>
<div style="font-size:0.85em;color:#666;">Ontario Tech University</div>
</a>
</div>
</div>
</div>

<!-- Milestones -->
<h2 class="section-title">Impact & Milestones</h2>
<div class="card" style="background:#fff8e1;border-top:5px solid #f1c40f;">
<h3 style="margin-top:0;">🚀 Key Achievements</h3>
<ul>
<li><b>NAACL 2025 Demo Paper:</b> <i>"ATAIGI: An AI-Powered Multimodal Learning App Leveraging Generative Models for Low-Resource Taiwanese Hokkien"</i>. <a href="https://aclanthology.org/2025.naacl-demo.2/" target="_blank">View Paper</a></li>
<li><b>LREC-COLING 2024:</b> <i>"Enhancing Taiwanese Hokkien Dual Translation by Exploring and Standardizing of Four Writing Systems"</i>.</li>
<li><b>SINITIC MT ERROR Dataset:</b> Publicly released for the Sinitic NLP research community.</li>
</ul>
</div>

<div style="text-align:center;margin-top:50px;color:#888;font-size:0.9em;">
Supported by the <b>UAAT Taiwan Affinity Program</b> and the <b>National Science and Technology Council (NSTC)</b>.
</div>

<div style="text-align:center;margin-top:40px;padding-bottom:60px;">
<a href="collaboration.html" style="background:#333;color:#fff;padding:12px 30px;border-radius:30px;text-decoration:none;font-weight:bold;box-shadow:0 4px 10px rgba(0,0,0,0.2);">← Back to Collaborations</a>
</div>

</div> <!-- custom-body end -->
</body>
</html>