Spaces:
Running
Running
Download guide.html from ILRDF-Lowking/ntcu-tech-course: direct link, hf CLI and curl.
- Browser
- Download file 28.8 kB
-
https://huggingface.co/spaces/ILRDF-Lowking/ntcu-tech-course/resolve/main/guide.html
- Command line
-
hf download hf://spaces/ILRDF-Lowking/ntcu-tech-course/guide.html
-
curl -L -o guide.html https://huggingface.co/spaces/ILRDF-Lowking/ntcu-tech-course/resolve/main/guide.html
28.8 kB
| <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> | |