小編精選 - 技術文章翻譯 · 06月11日

🎥AI 聊天、AI 打氣訊息與動畫編輯器 Hyper（AI Avatar v10：VS Code 與 Chrome 擴充功能）

簡介

AI Avatar 是一款完全免費的應用程式，可讓你的 VRoid（VRM）3D 虛擬人偶隨著 AI 聊天與 VS Code 和 Chrome（Edge）中的 Enter 鍵動起來。自 3 月以來，我一直持續更新 AI Avatar。這次我做了兩個重大更新：新的 AI 功能，以及 Animation Editor 的全面改版。讓我們一起來看看。

1. 新的 AI 功能

1-1. AI 聊天

AI Avatar 透過 Claude Code 和 GitHub Copilot 的聊天功能來觸發 3D 虛擬人偶動畫，作為 AI 功能的一部分。不過，我目前還沒有整合 以 API 為基礎的 AI 或 本地 LLM。我的 DEV.to 朋友 @gramli 在他的文章中使用了本地 LLM，而 @benjamin_nguyen_8ca6ff360 則使用了以 API 為基礎的 AI。受到他們啟發，我也想加入這些功能，於是先從一個簡單的 AI 聊天開始。
https://www.youtube.com/watch?v=WOBhUQAm3HM

我選擇了 Gemini API 作為以 API 為基礎的 AI，因為它有免費方案，使用者可以取得自己的 API 金鑰，並免費輕鬆測試。我將輕量模型 Gemini 3.1 Flash-Lite 設為預設，因為我認為這個使用情境只是簡單的 AI 聊天。使用者可以在設定中更改模型。

在處理本地 LLM 時，我選擇了 Ollama。一開始我先試了 Qwen3.5:2b，因為它是小型模型，而且只需要大約 2GB 記憶體。我的筆電沒有 GPU，只有 8GB 記憶體😓，但我認為這個輕量模型應該可以跑。不過，即使我只送出「hi」作為測試，它還是會在 2 分鐘後逾時。接著我改成更輕量的模型 Qwen3.5:0.8b，但依然逾時。我直接在 Ollama App 中測試這些模型後發現，Qwen3.5 是一個 thinking 模型，所以即使只是簡單的「hi」，它也會過度思考並輸出太多內容。以下是它在背景中思考的內容。↓🤣

"Hello! 👋 How's your day going? Anything I can help you with?"
Or just: "Hi! How are you doing?"
Let's combine friendliness with a call to action.
"Hi! 👋 How's it going? Anything I can help you with today?"
Wait, I need to make sure I don't sound too robotic.
"Hey! 👋 How's your day going? Anything I can help you with?"
Okay, final choice.
"Hi! 👋 How are you doing today? Is there anything I can help you with?"
Or more concise: "Hi! 👋 How can I help you today?"
Let's go with: "Hi! 👋 How's your day going? Is there anything I can help you with?"
Wait, looking at the instruction again, just "hi". Simple is best.
"Hi! 👋 How's your day going? Anything I can help you with?"

接著我改用 Qwen2.5:3b，這不是 thinking 模型，最後聊天功能終於能正常運作，不再有 2 分鐘逾時的問題。使用者可以在設定中切換到其他模型。

本地 LLM 第一次呼叫時通常會比較慢，因為它們需要先載入到記憶體中，但之後就會快很多。因此我加入了 warm-up 功能，讓第一次呼叫更快。

這會依照你的電腦規格而異，但通常來說，本地 LLM 比起以 API 為基礎的 AI 速度更慢、能力也較弱。不過，本地 LLM 是免費的，而且因為直接在你的電腦上執行，所以更安全。因此，請依照你的需求，在以 API 為基礎的 AI 與本地 LLM 之間做選擇。

1-2. AI 打氣訊息

AI Avatar 不只在你按下 Enter 鍵並把提示送給 AI 時觸發動畫，也會顯示打氣訊息。雖然你可以自行客製化訊息，但之前是從已註冊的清單中隨機選擇。由於我剛加入了 Gemini API 與 Ollama 來支援 AI 聊天，所以我也把打氣訊息更新為會依照你的提示，由 AI 產生。AI 打氣訊息讓 AI Avatar 更有活力，也更貼近你。

2. Animation Editor Hyper

AI Avatar 有一個用來製作虛擬人偶動畫的 Animation Editor。不過，對初學者來說，做動畫可能有點複雜。因此這次我將 Animation Editor 更新了 8 項改進，讓每個人，包括初學者和小朋友，都能享受動畫創作。這就是一站式的 Animation Editor Hyper！我認為它比在 Blender 製作動畫還簡單。讓我們快速看看這個新的 Animation Editor Hyper 如何變得更適合初學者。
https://www.youtube.com/watch?v=igydSW2kMAI

2-1. 全頁籤顯示

Image description

	詳細說明
之前	編輯器位於一個小小的側邊面板中。使用者每次編輯時，都需要在按鈕、滑桿和輸入欄位之間切換。編輯需要很多次點擊。
之後	我新增了一個專門用來編輯動畫的全頁籤。所有按鈕、滑桿和輸入欄位都集中在同一個畫面上。編輯所需的點擊次數和移動量都更少。

2-2. 三側顯示

Image description

	詳細說明
之前	編輯器只會從正面顯示虛擬人偶。使用者需要自行旋轉才能看到側面。
之後	編輯器在同一個頁籤中同時顯示右側、正面和左側視角。使用者不需要旋轉，就能一次看到所有視角。

2-3. 圖片放置區

Image description

	詳細說明
之前	編輯器沒有圖片放置區。使用者需要在另一個視窗打開參考圖片。
之後	編輯器在虛擬人偶旁邊新增了圖片放置區。使用者可以很方便地參考範例姿勢圖片。

2-4. 骨骼軌跡

Image description

	詳細說明
之前	編輯器沒有骨骼軌跡。初學者很難理解骨骼是如何移動的。
之後	編輯器加入了骨骼軌跡。初學者可以透過骨骼軌跡更容易理解每個骨骼的移動方式。

2-5. 姿勢預設

Image description

	詳細說明
之前	編輯器沒有預設值。使用者必須從頭開始製作動畫。
之後	編輯器加入了預設值。使用者可以從預設姿勢開始製作動畫，加快動畫製作流程。

2-6. 動畫的 VRMA 匯出

Image description

	詳細說明
之前	編輯器只會將動畫儲存為 JSON。使用者只能在這個應用程式中使用 JSON。
之後	編輯器可將動畫儲存為 JSON 和 VRMA。使用者可以在其他應用程式中使用 VRMA。

2-7. 隨機動畫自訂模式

Image description

	詳細說明
之前	應用程式只有預設的隨機動畫。雖然有 256 種組合，但使用者可能很快就會膩。
之後	應用程式加入了自訂隨機動畫。使用者可以依照自己的喜好設定自訂檔案，享受隨機動畫。

2-8. 隨機動畫編輯器

Image description

	詳細說明
之前	編輯器中沒有實作這個功能。使用者只能使用預設的隨機動畫。
之後	這個功能已包含在編輯器中。使用者可以在編輯器內輕鬆建立隨機動畫。

AI Avatar VS Code 擴充功能版的使用方式（感謝 100+ 次安裝！）

你可以透過兩種方式下載 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 Web Store 安裝：↓↓
https://chromewebstore.google.com/detail/ai-avatar/afmcfaeaaojalninahhhjnonhmlmiidi

特別感謝

我的 DEV Community 朋友兼 CTO🤣，@gramli 在第 2 版協助更新 AI Avatar，並持續支持我。非常感謝！
我的 DEV Community 朋友兼 CMO🤣，@itsugo。我們的虛擬人偶合作專案是 AI Avatar 的起點，並且一直持續支持我。非常感謝！
我的同事 Maximum Blue 在第 6 版協助製作獨特的虛擬人偶，並持續支持我。非常感謝！

第 11 版更新

我已經在進行第 11 版更新了。還會有更多有趣的更新，敬請期待！

結語

這只是 AI 功能的開始，我未來也在考慮加入更多有趣的 AI 功能！此外，我也把我能想到的一切都加進去，讓 Animation Editor Hyper 的動畫製作更簡單。我希望它的 使用者體驗 能比以前更好。請盡情為你最喜歡的虛擬人偶創作有趣的動畫。感謝你的閱讀，祝你擁有美好的 AI Avatar 生活。