Agent Skill 練習 - 寫個中英對照好讀版產生器

手邊有堆英文研討會影片要消化，我想先看逐字稿，對議題有興趣再看影片深入，省點時間。

有先試了 NotebookLM 整理重點，AI 的濃縮重點有些跟我觀注方向不同，需要反覆追問挖掘，次數一多，Interative Tax 人機互動稅開始高到不如自己看原文。嫌直接看原文太吃力，我想要有中文翻譯，最好還能順便學英語，索性來做個想很久的小工具，一勞永逸解決類似問題。

當代 AI 模型翻譯英文完全不是問題，不管 GPT、Gemini，貼文按 Enter 就搞定了，但遇到文章太長會有點小麻煩。實測就算在提示千交代萬交代不准刪減內容，我發現只要文章長到某個程度，模型輸出時便會簡化省略部分內容。所以，想用 LLM 處理長文章，分塊 Chunking 是躲不掉的課題。當然，若數量不多，人工先把長文拆段分次貼給 AI 翻譯也就好了，但一來大家都知我性急沒耐心，人稱現代王藍田，沾不了這種重複手工；二則這根本是學習開發 AI 應用的絕佳機會，解決自己工作生活所需，永遠是動機最強成效最好的練習題。

先拆解問題，AI 工作流程自動化可分為 Workflow 及 AI Agent (二者異差推龍哥這篇 Workflow、AI Agent，傻傻分不清楚？)，嚴格來說，逐字稿處理步驟固定比較適合用 Workflow，.NET 的話有 MS Agent Framework Workflow 框架可用。不過，此刻我比較想找機會練習 Agent Skill，上回在 認識 AI 關鍵術語：Agent / Tool / Skill 練習只寫了無關痛癢的查硬碟大小、產 Excel 的 Skill，這次的題目有趣且實用多了。就寫成 Agent Skill 吧~

跟 Github Copilot 討論，請它幫我生成框架，經過一番修調打磨，最後 Skill 檔案架構定調如下：

.github/skills/bilingual-sxs/
├── SKILL.md                            ← 本檔案（主 Orchestrator）
├── translate-chunk/
│   └── SKILL.md                        ← 子 Agent Skill（單一 chunk 翻譯）
├── prompts/
│   └── translate-instruction.md       ← LLM System Prompt（子 Agent 使用）
└── scripts/
    ├── chunk.ps1                       ← 文章切割腳本
    ├── merge.ps1                       ← HTML 合併腳本
    └── reader.html                     ← HTML 範本

練習心得整理如下：

• LLM 模型比我懂怎麼寫 Agent Skill，所以我先跟 AI 說想做什麼，請它生成 SKILL.md，我再依自己的想法調整細節，最後再請 AI 幫忙 Review，提供建議以及解惑，讓整個學習歷程更完整
• 除了翻譯階段，其餘部分要避免 Agent 讀入文章內文佔用上下文，故我將分割區塊、合併翻譯結果轉成網頁的過程寫成 PowerShell 腳本，Agent 只需知道檔名去呼叫工具，不需要知道內容
• 翻譯時模型一定得讀入文章內容，但每次只聚焦當次要處理的區塊就好，其他區塊的內文不該混入交談歷史佔用上下文。一個簡單解法是將翻譯工作變成 Subagent (子 Agent)，每個 Sugagent 的記憶是獨立的，也不會被納入 Skill 的上下文，可避免混入不必要的內容。
  AI 教我的小技巧是建一個 translate-chunk 目錄，放入 SKILL.md 交待如何接收文字檔路徑，英翻中，將結果轉為指定 JSON 格式寫入同目錄 (只傳回檔案，不要輸出結果)，而在主 SKILL.md 中，明確告知以 Sugagent 方式呼叫 translate-chunk：

  ### 步驟二：逐 Chunk 翻譯
  
  對專案目錄**每個** `chunk_NNN.txt`，依序以 **Subagent** 處理：
  
  1. 讀取 `translate-chunk/SKILL.md` 作為 Subagent 的 Skill 指令
  2. 傳入參數：`chunk_file = 專案目錄/chunk_NNN.txt`
  3. Subagent 完成後會在專案目錄產生 `chunk_NNN.json`
  4. 確認結果檔存在後，繼續處理下一個 chunk
  
  > 每個子 Agent 調用的 context 完全隔離，主 Agent 只需追蹤「下一個待處理 chunk 編號」。    
  

• 我做了自己想要的中英對照好讀版，可以做到英文跟中文逐句對應，能英文一段中文一段對照顯示，也能英文接著中文穿插顯示，並加上 AI 覺得值得介紹的詞彙、文法、片語、慣用說法... 的說明
• 網頁部分我用自己偏好的輕前端寫法，以 <script src=> 引用 Vue.js，用 MVVM 生成檢視內容。過程中我開始學著，就算自己會寫也先叫 Copilot 寫給我看，從中學到不少我從沒想過的精妙寫法，但也開始覺得自己好孤陋寡聞... Orz
• 從 Copilot Chat 區模型的內心戲 (Thinking 內容)能發現 Skill 可改良的地方，AI 很聰明，提示或腳本寫得不好，他會自己配合調整繞過去，但這會浪費時間與 Token，若在其中發現 AI 先碰壁再前進，可以試著調成一次成功
  

我隨便抓了一段英文訪談影片的逐字稿來當範例：

中英對照顯示，滑鼠移動到中文或英文上方時顯示該句所對應的原文或翻譯：

另外也可改為一句原文一句翻譯的穿插式排列：

下方有 AI 評選的學習重點提示，滑鼠經過時會顯示其在原文中的位置：

另外，也可只顯示原文或翻譯，滑鼠停在英文時瀏覽器會浮現存在 title Attribute 的翻譯內容。

就醬，我跟 AI 一起寫了一個 Agent Skill，做出我想了很久的中英對照功能 (線上範例)，把學新知與學英文摻在一起做成瀨尿牛丸。

若大家有興趣參考 Agent Skill 寫法或想實際玩玩，我把程式放上 Github 了，若有 Github Copilot 可 Clone 回去用 VSCode 開啟，用一句提示 use bilingual-sxs skill to translate sample.txt 即可將範例文字檔翻譯成中英對照好讀版。操作說明 (註：README.md 是我請 Copilot 生成的，坦白說寫得真好，我絕對沒耐心與時間寫出此等友善的說明文件)

前輩先進們如發現 Skill 寫法有可再改良優化之處，也歡迎不吝分享。