ntcu-tech-course / guide.html
ILRDF-Lowking's picture
Update guide.html and index.html with 15 QA cards and TTS/ASR/MT Base64 rules
fb6a9c7 verified
Raw History Blame Contribute Delete
28.8 kB
<!doctype html>
<html lang="zh-Hant-TW">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>📖 Antigravity 族語老師自學講義|大字圖文版</title>
<meta name="description" content="不用懂英文、不用會寫程式!4 個步驟做出您專屬族語的 AI 互動教學小遊戲">
<style>
/* CSS_SAFE_PAD_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
:root {
--bg: #fbf7f0;
--card: #ffffff;
--ink: #1f1a14;
--muted: #5a5046;
--line: #e6dccd;
--accent: #b5471b;
--accent-soft: #f7e4d8;
--green: #2f6b3a;
--green-soft: #e3efe2;
--blue: #1f5a8a;
--blue-soft: #e1ecf5;
--gold: #8a5a00;
--gold-soft: #fbefcf;
}
* { box-sizing: border-box; }
html { font-size: 20px; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif;
line-height: 1.65;
}
.top-bar {
background: #1f1a14;
color: #fff;
padding: 12px 18px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
position: sticky;
top: 0;
z-index: 50;
}
.top-bar a, .top-bar button {
background: rgba(255,255,255,0.14);
color: #fff;
text-decoration: none;
border: 1px solid rgba(255,255,255,0.25);
padding: 8px 16px;
border-radius: 999px;
font-size: 0.9rem;
font-weight: 800;
cursor: pointer;
}
.top-bar a:hover, .top-bar button:hover {
background: rgba(255,255,255,0.28);
}
.top-bar .print-btn {
background: #fbefcf;
color: #78350f;
border-color: #f59e0b;
}
.wrap { max-width: 820px; margin: 0 auto; padding: 28px 18px 72px; }
header {
text-align: center;
background: linear-gradient(135deg, #7f1d1d 0%, #b5471b 100%);
color: #fff;
padding: 32px 24px;
border-radius: 24px;
margin-bottom: 28px;
box-shadow: 0 8px 24px rgba(181, 71, 27, 0.2);
}
header .badge {
display: inline-block;
background: rgba(255,255,255,0.2);
color: #fef08a;
padding: 4px 16px;
border-radius: 999px;
font-size: 0.9rem;
font-weight: 800;
margin-bottom: 10px;
}
header h1 { font-size: 1.65rem; line-height: 1.35; margin: 0 0 10px; }
header p { font-size: 1rem; opacity: 0.95; margin: 0; font-weight: 600; }
.motto-box {
background: var(--gold-soft);
border: 3px solid #f59e0b;
border-radius: 20px;
padding: 20px 22px;
margin-bottom: 30px;
text-align: center;
}
.motto-title {
font-size: 1.25rem;
font-weight: 900;
color: #78350f;
margin-bottom: 6px;
}
.motto-sub {
font-size: 1rem;
color: #5a5046;
font-weight: 700;
}
.step-card {
background: var(--card);
border: 2px solid var(--line);
border-radius: 22px;
padding: 24px 22px;
margin-bottom: 24px;
box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}
.step-head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
}
.step-num {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--accent);
color: #fff;
display: grid;
place-items: center;
font-size: 1.25rem;
font-weight: 900;
flex-shrink: 0;
}
.step-card.s2 .step-num { background: var(--green); }
.step-card.s3 .step-num { background: var(--blue); }
.step-card.s4 .step-num { background: var(--gold); }
.step-head h2 {
font-size: 1.3rem;
margin: 0;
line-height: 1.3;
}
.step-body {
font-size: 1.05rem;
color: var(--ink);
}
.step-body ul, .step-body ol {
padding-left: 24px;
margin: 10px 0;
}
.step-body li {
margin-bottom: 8px;
font-weight: 600;
}
.example-box {
background: #f8fafc;
border: 2px dashed #94a3b8;
border-radius: 16px;
padding: 16px 18px;
margin-top: 14px;
font-size: 0.95rem;
}
.example-title {
font-weight: 900;
color: var(--blue);
margin-bottom: 6px;
}
.copy-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin-top: 12px;
padding: 14px 20px;
background: var(--green);
color: #fff;
border: none;
border-radius: 14px;
font-size: 1.05rem;
font-weight: 900;
cursor: pointer;
text-decoration: none;
}
.copy-btn:active { transform: scale(0.99); }
.qa-section {
background: var(--blue-soft);
border: 2px solid #93c5fd;
border-radius: 22px;
padding: 24px 22px;
margin-bottom: 28px;
}
.qa-section h3 {
font-size: 1.3rem;
color: var(--blue);
margin: 0 0 14px;
}
.qa-item {
background: #fff;
border-radius: 14px;
padding: 16px 18px;
margin-bottom: 12px;
}
.qa-q { font-weight: 900; color: #991b1b; font-size: 1.05rem; margin-bottom: 4px; }
.qa-a { font-weight: 600; color: #1e293b; font-size: 0.98rem; }
.portal-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
margin-top: 24px;
}
.portal-btn {
display: flex;
align-items: center;
gap: 12px;
background: #fff;
border: 2px solid var(--line);
border-radius: 16px;
padding: 16px;
text-decoration: none;
color: var(--ink);
font-weight: 800;
}
.portal-btn:hover { border-color: var(--accent); }
footer {
border-top: 2px solid var(--line);
padding-top: 20px;
margin-top: 36px;
text-align: center;
font-size: 0.9rem;
color: var(--muted);
}
@media print {
.top-bar { display: none; }
body { background: #fff; }
.step-card, .qa-section, .motto-box { break-inside: avoid; box-shadow: none; }
}
</style>
</head>
<body>
<div class="top-bar">
<div style="display:flex; gap:8px; flex-wrap:wrap;">
<a href="https://ilrdf-lowking-ntcu-tech-course.static.hf.space/">🏠 返回課程總入口</a>
<a href="https://ilrdf-lowking-truku-classroom.static.hf.space/">🧰 提示詞百寶箱 (20款遊戲)</a>
<a href="https://ilrdf-lowking-ntcu-live-poll.hf.space/wish">🌟 課堂許願單</a>
</div>
<button class="print-btn" onclick="window.print()">🖨️ 列印 / 存成 PDF 講義</button>
</div>
<div class="wrap">
<header>
<div class="badge">課後帶回家的大禮包・大字圖文自學講義</div>
<h1>📖 Antigravity 與 AI 族語教材製作<br>長輩友善 4 步驟自學指南</h1>
<p>編撰:財團法人原住民族語言研究發展基金會 許韋晟 執行長</p>
</header>
<div class="motto-box">
<div class="motto-title">💡 請記住今晚最重要的口訣:「AI 負責快,老師負責準!」</div>
<div class="motto-sub">您完全不需要懂英文、也不需要會寫任何程式碼。<br>只要會「複製、貼上、用中文跟 AI 說話」,3 分鐘就能做出班上孩子最愛的族語遊戲!</div>
</div>
<!-- 步驟 1 -->
<div class="step-card s1">
<div class="step-head">
<div class="step-num">1</div>
<h2>第一步:準備好您今天要教的「族語單字或句子」</h2>
</div>
<div class="step-body">
<p>千萬不要叫 AI 自己憑空亂猜族語!最棒的做法是<strong>由老師提供正確的族語文字</strong>:</p>
<ul>
<li>去 <strong>族語 E 樂園</strong>(學習詞表、九階教材、日常生活會話)複製這堂課要教的 <strong>5~8 個族語單字</strong> 或 <strong>3~6 句對話</strong>。</li>
<li>包含「族語拼寫」和「中文意思」即可。</li>
</ul>
<div class="example-box">
<div class="example-title">📝 準備範例(以排灣語家人稱謂為例):</div>
kama(爸爸)、kina(媽媽)、vuvu(祖父母)、kaka(兄姊)、tiaken(我)
</div>
</div>
</div>
<!-- 步驟 2 -->
<div class="step-card s2">
<div class="step-head">
<div class="step-num">2</div>
<h2>第二步:打開「提示詞百寶箱」,挑一款您喜歡的遊戲</h2>
</div>
<div class="step-body">
<p>我們已經為全台灣族語老師準備好 <strong>20 款現成可試玩的互動遊戲模板</strong>(包含聽音辨圖、翻牌消消樂、單字泡泡龍、句型火車、課堂大轉盤等):</p>
<ol>
<li>點開百寶箱網站,先按 <strong>「🎮 立即試玩這款生成遊戲」</strong> 看看喜不喜歡。</li>
<li>看到喜歡的款式,直接按一下綠色按鈕 <strong>「📋 一鍵複製 Antigravity 提示詞」</strong>!</li>
</ol>
<a class="copy-btn" href="https://ilrdf-lowking-truku-classroom.static.hf.space/" target="_blank">
🧰 點此前往「提示詞百寶箱(含 20 款遊戲試玩)」 ➔
</a>
</div>
</div>
<!-- 步驟 3 -->
<div class="step-card s3">
<div class="step-head">
<div class="step-num">3</div>
<h2>第三步:貼給 AI(Antigravity / ChatGPT / Gemini)並換上您的族語</h2>
</div>
<div class="step-body">
<p>打開您習慣使用的 AI 工具(例如 <strong>Google Antigravity</strong>、<strong>ChatGPT</strong>、<strong>Claude</strong> 或 <strong>Gemini</strong>):</p>
<ul>
<li>在對話框按右鍵選「貼上」,把剛剛複製的提示詞貼進去。</li>
<li>把裡面原本示範的太魯閣語單字,換成您第一步準備好的族語單字,按下送出!</li>
<li><strong>您也可以直接點下方按鈕,複製這段「萬用傻瓜起手式提示詞」來試試看:</strong></li>
</ul>
<div class="example-box" id="starter-prompt">請幫我製作一個單一 HTML 檔案(index.html)的「族語單字翻牌配對小遊戲」,打開瀏覽器就能直接玩。
請嚴格使用我提供的以下太魯閣語 (trv_Truk) 單字與中文意思,一個字母都不要改:
1. mtutuy(起床)
2. mtaqi(睡覺)
3. nhari(快點)
4. uuqun mgrbu(早餐)
5. bubu(媽媽)
⚠️ 【語音與詞彙防呆鐵律】:
1. 嚴禁使用瀏覽器內建的 window.speechSynthesis (Web Speech API) 英語/印尼語假冒族語發音!
2. 請在後台用 Python 呼叫原語會 10/13 最新 TTS API (https://ai-labs.ilrdf.org.tw/kari-seejiq-tnpusu-ai-hmjil/ 的 /to_formosan_languages 與 /synthesize) 合成 .wav 後,轉為 Base64 (data:audio/wav;base64,...) 直接內嵌於 index.html 中播放,並附上「🎙️ 老師現場錄音」備援按鈕。
3. 介面要求:字體要超大、按鈕清楚好點、配對成功時給學生熱情的鼓勵與加分,全部過關後可以再玩一次!</div>
<button class="copy-btn" style="background: var(--blue);" onclick="copyStarterPrompt(this)">
📋 一鍵複製上方「萬用傻瓜起手式提示詞(含防假音保護)」
</button>
</div>
</div>
<!-- 步驟 4 -->
<div class="step-card s4">
<div class="step-head">
<div class="step-num">4</div>
<h2>第四步:覺得哪裡不滿意?用「15 款 QA 急救包(含 TTS / ASR / MT 三大 API 救援)」叫 AI 改到好!</h2>
</div>
<div class="step-body">
<p>AI 做完第一版之後,如果您覺得「字太小」、「發音變成奇怪外國腔」或「想加上正宗族語發音與語音辨識」,<strong>千萬不要自己去改程式碼!</strong>直接像吩咐助教一樣跟它說:</p>
<ul>
<li>🔍 <strong>字太小看不清楚</strong>:貼上 <em>「長輩跟小朋友看不清楚,請把所有族語單字放大到 32px 以上,按鈕加大!」</em></li>
<li>🔤 <strong>族語特殊符號跑掉</strong>:貼上 <em>「請嚴格核對我給你的族語拼寫與喉塞音符號,一個字母都不准自己改!」</em></li>
<li>🔊 <strong>發音變外國腔?一鍵換成原語會 10/13 最新 AI 語音合成/翻譯/辨識 (<code>ai-labs.ilrdf.org.tw</code>)</strong>:點擊下方按鈕複製 <strong>原語會最新 <code>IlrdfTTSClient</code>(含 TTS 轉 Base64 內嵌、MT 雙向翻譯、ASR 語音辨識)指令</strong>貼給 Antigravity,徹底消滅假發音!</li>
</ul>
<textarea id="guide-tts-api-prompt" style="display:none;">⚠️ 【最高優先修正指令】:請立刻移除網頁中所有的 `window.speechSynthesis` / `SpeechSynthesisUtterance` (Web Speech API) 假發音!
請幫我在後台用 Python 串接原語會最新 10/13 正式版 16 族 42 語 AI 語音合成、翻譯與辨識 API (`https://ai-labs.ilrdf.org.tw/`),將遊戲裡所有族語單字與句子合成為 `.wav` 後轉成 Base64 (`data:audio/wav;base64,...`) 直接內嵌進單一 `index.html` 中,並保留「🎙️ 老師現場錄音」按鈕!
請直接使用以下驗證通過之 Python 程式碼:
```python
import base64
from gradio_client import Client, handle_file
class IlrdfAiClient:
def __init__(self):
# 🔊 TTS 語音合成 & 🌐 MT 機器翻譯端點 (10/13 最新版)
self.tts_mt_endpoint = "https://ai-labs.ilrdf.org.tw/kari-seejiq-tnpusu-ai-hmjil/"
self.client = Client(self.tts_mt_endpoint, verbose=False)
self.current_tribe = None
self.code_to_tribe = {
"ami": "阿美", "pwn": "排灣", "tay": "泰雅", "bnn": "布農",
"dru": "魯凱", "pyu": "卑南", "tsu": "鄒", "xsy": "賽夏",
"tao": "雅美", "ssf": "邵", "ckv": "噶瑪蘭", "szy": "撒奇萊雅",
"trv": "太魯閣", "sxr": "拉阿魯哇", "xnb": "卡那卡那富"
}
def switch_tribe_if_needed(self, dialect_code: str):
prefix = dialect_code.split('_')[0]
if dialect_code in ["trv_Delu", "trv_Duda", "trv_Tegu"]:
tribe = "賽德克"
elif dialect_code == "trv_Truk":
tribe = "太魯閣"
else:
tribe = self.code_to_tribe.get(prefix, "阿美")
if self.current_tribe != tribe:
self.client.predict(tribe, api_name="/to_formosan_languages")
self.current_tribe = tribe
def synthesize_to_base64(self, text: str, dialect_code: str) -> str:
"""合成語音並直接回傳可內嵌於單一 HTML 的 data:audio/wav;base64,... 字串"""
self.switch_tribe_if_needed(dialect_code)
wav_path = self.client.predict(text, dialect_code, api_name="/synthesize")
with open(wav_path, "rb") as f:
b64 = base64.b64encode(f.read()).decode("ascii")
return f"data:audio/wav;base64,{b64}"
def translate_zh_to_indigenous(self, zh_text: str, dialect_code: str) -> str:
"""🌐 MT 華語翻族語 (/translate_1)"""
self.switch_tribe_if_needed(dialect_code)
return self.client.predict(zh_text, "zho_Hant", dialect_code, api_name="/translate_1")
def recognize_speech(self, wav_path: str, asr_tribe_code: str = "formosan_trv") -> str:
"""🎤 ASR 族語語音辨識 (https://ai-labs.ilrdf.org.tw/sapolita-kaldi/)"""
asr = Client("https://ai-labs.ilrdf.org.tw/sapolita-kaldi/", verbose=False)
return asr.predict(dialect_id=asr_tribe_code, audio_data=handle_file(wav_path), api_name="/automatic_speech_recognition")
```
📌 16 族 42 方言常用代碼:太魯閣 `trv_Truk`、阿美秀姑巒 `ami_Xiug`、阿美海岸 `ami_Coas`、排灣中 `pwn_Cent`、泰雅賽考利克 `tay_Seko`、布農郡群 `bnn_Junq`、魯凱霧台 `dru_Wuta`、卑南南王 `pyu_Nanw`、鄒 `tsu_Tsou`、賽夏 `xsy_Sais`、雅美 `tao_Yami`、邵 `ssf_Thao`、噶瑪蘭 `ckv_Kava`、撒奇萊雅 `szy_Saki`、賽德克德固達雅 `trv_Tegu`、拉阿魯哇 `sxr_Saar`、卡那卡那富 `xnb_Kana`。</textarea>
<button class="copy-btn" style="background: var(--gold);" onclick="copyGuideTtsPrompt(this)">
🔊 一鍵複製「原語會 10/13 最新 TTS / MT / ASR 語音合成與 Base64 內嵌救援指令」
</button>
<p style="margin-top:10px; font-weight:800; color:var(--gold);">👉 在「提示詞百寶箱」點選最後一個頁籤【🛠️ QA微調急救包】,15 張救援指令卡(含 TTS #13、ASR #14、MT #15)都能一鍵複製!</p>
</div>
</div>
<!-- 常見安心問答 -->
<div class="qa-section">
<h3>❤️ 給族語老師的 3 個安心錦囊</h3>
<div class="qa-item">
<div class="qa-q">Q1:我不小心按錯按鈕,電腦或網頁會不會壞掉?</div>
<div class="qa-a">👉 <strong>絕對不會壞掉!</strong>AI 產生的只是一個網頁檔案(就像一張電子學習單),就算改壞了,重新貼一次提示詞就能在 30 秒內重做一張新的!</div>
</div>
<div class="qa-item">
<div class="qa-q">Q2:AI 生出來的族語例句有錯,或是發音怪怪的怎麼辦?</div>
<div class="qa-a">👉 <strong>這正是各位國寶老師無可取代的價值!</strong>AI 只是幫我們做遊戲外殼的挑夫,若發音用了瀏覽器假音,請貼上百寶箱【#13 TTS 語音合成急救】改接原語會 AI 語音,或直接點畫面上的「🎙️ 老師現場錄音」親自錄下最道地的母語!</div>
</div>
<div class="qa-item">
<div class="qa-q">Q3:我今天還沒決定要做什麼遊戲,可以先用現成的嗎?</div>
<div class="qa-a">👉 <strong>當然可以!</strong>課程總入口網上的「AI 出題小幫手」、「16 族語音辨識闖關遊戲」、「族語圖卡與六格小書產生器」全部都是免費現成工具,明天上課就能直接打開給學生玩!</div>
</div>
</div>
<!-- 快速傳送門 -->
<h3 style="margin-bottom:10px; font-size:1.2rem;">🚀 快速傳送門(點擊立即前往)</h3>
<div class="portal-links">
<a class="portal-btn" href="https://ilrdf-lowking-ntcu-tech-course.static.hf.space/">
<span style="font-size:1.8rem;">🏠</span>
<span>返回課程總入口網<br><small style="color:var(--muted); font-weight:600;">所有課堂連結總整理</small></span>
</a>
<a class="portal-btn" href="https://ilrdf-lowking-truku-classroom.static.hf.space/">
<span style="font-size:1.8rem;">🧰</span>
<span>提示詞百寶箱<br><small style="color:var(--muted); font-weight:600;">20款遊戲試玩+15題急救包</small></span>
</a>
<a class="portal-btn" href="https://ilrdf-lowking-ntcu-live-poll.hf.space/wish">
<span style="font-size:1.8rem;">🌟</span>
<span>第三站:我的許願單<br><small style="color:var(--muted); font-weight:600;">許願您想要的族語教具</small></span>
</a>
</div>
<footer>
<p>國立臺中教育大學 原住民族教育及文化研究中心|36 小時族語與科技線上研習課程</p>
<p>指導單位:原住民族委員會|主講:財團法人原住民族語言研究發展基金會 許韋晟執行長</p>
</footer>
</div>
<script>
function copyStarterPrompt(btn) {
const text = document.getElementById('starter-prompt').innerText;
navigator.clipboard.writeText(text).then(() => {
const orig = btn.innerHTML;
btn.innerHTML = '✅ 已複製成功!現在可以貼給 AI 試試看囉!';
btn.style.background = '#15803d';
setTimeout(() => {
btn.innerHTML = orig;
btn.style.background = 'var(--blue)';
}, 3000);
});
}
function copyGuideTtsPrompt(btn) {
const text = document.getElementById('guide-tts-api-prompt').value;
navigator.clipboard.writeText(text).then(() => {
const orig = btn.innerHTML;
btn.innerHTML = '✅ 已複製原語會 16 族 42 語 AI 語音合成 API 提示詞!';
btn.style.background = '#15803d';
setTimeout(() => {
btn.innerHTML = orig;
btn.style.background = 'var(--gold)';
}, 3000);
});
}
</script>
</body>
</html>