小編精選 - 技術文章翻譯 · 10月16日

AI Avatar v25（Avatar Run、Voxel Avatar、Muscle Brain）💪

前言

AI Avatar 是一款免費 App，讓你的 VRoid（VRM）虛擬角色全力為你加油打氣。🤗 它會出現在你的 VS Code 側邊欄（會對 Claude Code / Codex / GitHub Copilot 做出反應）或 瀏覽器側邊面板（會對 ChatGPT / Claude 做出反應）。動畫與對話泡泡也都能在沒有 AI 的情況下運作。
這次我有 5 個主要主題：

角色跑酷
肌肉大腦 2D/3D
Voxel Avatar 更新
Jev
Codex 支援

一起來看看吧！😆

角色跑酷

https://www.youtube.com/watch?v=XFJPhHryzYg

角色跑酷 是一款類似彈珠台賽道的遊戲，你要避開陷阱、不要掉出軌道，並抵達終點。最初我加入彈珠台賽道，是為了讓 AI Avatar 更有趣。但等等，我又想讓它更符合 AI Avatar 的世界觀，於是把彈珠改成了虛擬角色。現在跑在軌道上的是虛擬角色，而不是彈珠。不過我也加了一個按鈕，讓你同樣可以享受彈珠版本。也許未來我會加入自動模式，讓你在寫程式時也能像 Voxel Avatar 一樣享受角色跑酷。

肌肉大腦 2D/3D

https://www.youtube.com/watch?v=Fmc6esopt4k

我去年做了一款名為 Muscle Brain 的腦力訓練遊戲，並上架到 Microsoft Store 和 Chrome 擴充功能。這件事我很長一段時間完全忘了，但最近我去看了一下它的狀態，發現它還在持續被下載。所以我決定把它移植到 AI Avatar。

原本它是用 Next.js、React、KendoReact，以及 CSS-in-JS + Tailwind CSS 開發的，但 AI Avatar 大多是用純 TypeScript 製作，所以我必須重寫程式碼。我原本以為這種事 AI 應該很容易做到，結果輸出卻有很多回歸問題。我請 AI 多次修正，但還是有不少回歸問題。後來我發現，總程式碼長度只有原始版本的一半。🤣 這就是為什麼修回歸問題永遠修不完。於是我放棄了，從頭開始做移植。這次我強烈要求 AI 不准刪減任何程式碼，最後總算成功完成移植。

另外，原本的 Muscle Brain 是一款用來記憶數字或字母的腦力訓練遊戲。所以我又新增了一個版本，用來記憶 3D 空間資訊，做出了新的 Muscle Brain 3D。

Voxel Avatar 更新

v22↓
https://www.youtube.com/watch?v=Hm1q03RXCwg

v21↓
https://www.youtube.com/watch?v=iRlw3OASnWI

Voxel Avatar 是一款放置型遊戲，你可以種植花園並放置動物。你可以自動或手動地讓花園持續成長。

這次我新增了更多園藝圖案、動物，以及像是輪廓顯示設定這類的使用者體驗改善。我也加入了雲霄飛車建造功能，讓你可以搭乘並環顧體素世界。

用 AI 建立 3D 模型

我之前就想過要用 AI 來製作 3D 物件模型，並加入 AI Avatar。不過 AI 在處理 3D 方面一直不夠成熟，所以我先把這個想法擱置。終於，AI 追上來了，所以我開始嘗試用 AI 製作 3D 物件。

首先，我先用 ChatGPT 製作圖片。重點不只是正面圖，還要做出側面圖和俯視圖。

接著，我讓 AI 撰寫 Three.js 程式碼來顯示 3D 物件。我做了一個自動化工具，反覆產生 Three.js 3D 物件程式碼，將結果與參考圖片比對，並修正程式碼，使其更接近參考圖片。透過這種方式，我可以讓 AI 自動運作一段時間。

做完這個自動化工具後，我覺得自己不再需要使用最新、最昂貴的 AI，Astra。因此我改用較便宜的 AI 模型 Sonnet 5 來節省成本。不過，它根本做不出 3D 模型。🤣

Image description

我認為做 3D 模型的關鍵在於 AI 模型本身，而不是我的自動化工具。不過最新的 Opus 5.5 和 Sol 6.1 已經推出，所以如果我再次測試，情況也許會改變。

Jev

https://www.youtube.com/watch?v=5gn6hlxRUWY

Jev 是一款新的 AI，特色是執行速度超快而且非常便宜。這之所以可行，是因為它不使用文字，而是只回傳決策與其分數。

我在 AI Avatar 裡已經有正負面檢查器和回饋動畫了。原本它只是用字詞清單來判斷正負向情緒，但準確度不高。所以我改用 Jev 的能力來判斷正負向情緒。

另外，我也新增了開發日誌，可以記錄 Claude Code / Codex 的請求，例如修 bug、新功能、提問等等，並依照日、週或全部時間顯示。我希望這個日誌能激勵開發者更常寫程式。

Codex 支援

我在工作時同時使用 Claude Code 和 Codex。不過在家裡我一直只用 Claude Code。這次我原本想使用 Astra，因為我聽說它很擅長處理 3D，覺得用來在 AI Avatar 中為 Voxel Avatar 新增 3D 物件應該很適合。所以我訂閱了 Codex，並且也決定讓 AI Avatar 能對 Codex 做出反應。

如何使用 AI Avatar 的 VS Code 擴充功能版本（感謝超過 300 次安裝！）

你可以透過兩種方式下載 AI Avatar VS Code 擴充功能。

選項 1：從 VS Code 安裝：左側邊欄的 Extensions 按鈕 > 搜尋 AI Avatar > Install ↓↓
選項 2：從 VS Code Marketplace 安裝：https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar ↓↓

如何使用 AI Avatar 的 Chrome 版本

從 Chrome 線上應用程式商店安裝：↓↓
https://chromewebstore.google.com/detail/ai-avatar/afmcfaeaaojalninahhhjnonhmlmiidi

特別感謝

我的 DEV Community 朋友兼 CCO（Chief Creative Officer，首席創意長）🤣，@annavi11arrea1 在第 17 版中與 Catbot 和 AI Avatar 合作，並持續支持我。非常感謝！
我的朋友兼 CDO（Chief Design Officer，首席設計長）🤣，@rutenveil 幫忙在第 15 版中製作了酷炫的特效，並持續支持我。非常感謝！
我的 DEV Community 朋友兼 CTO（Chief Technology Officer，首席技術長）🤣，@gramli 幫忙在第 2 版更新了 AI Avatar，並持續支持我。非常感謝！
我的 DEV Community 朋友兼 CMO（Chief Marketing Officer，首席行銷長）🤣，@itsugo。我們的虛擬角色合作專案是 AI Avatar 的起點，並持續支持我。非常感謝！
我的同事 Maximum Blue 幫忙在第 6 版製作了獨特的虛擬角色，並持續支持我。非常感謝！