Unity OpenAI 教學
Author: Kelvin Huang製作遊戲需要整合 Unity OpenAI API 增加人工智慧功能嗎？本教學將使用以下的資源
文字轉語音 com.rest.elevenlabs [ GitHub ]
對嘴動畫 SALSA LipSync Suite [ AssetStore ]
人物模型與動作 Unity-Chan! Model [ AssetStore ] [ Mixamo ]
麥克風辨識
A. 使用 Google Cloud 服務 - Speech Recognition using Google Cloud Pro [ AssetStore ]
B. 離線語音辨識服務 - Undertone - Offline Whisper AI Voice Recognition [ AssetStore ]
建立 Unity 專案，下載 Unity-Chan! Model + SALSA LipSync Suite + Speech Recognition using Google Cloud Pro 並匯入專案。
依照 com.rest.elevenlabs 的文件，將 Elevenlabs 的套件匯入到專案。
Name = OpenUPM
URL = https://package.openupm.com
Scope(s) = com.rest.elevenlabs
com.utilities
開啟 Package Manager 選擇 My Registries 安裝 ElevenLabs 資源包，相關的套件將一併安裝。
使用 Unity UI 建立場景，如附圖
在場景上加入需要對嘴的 3D 模型 ( 此處使用 Unity Chan )
在 Panel 物件上，增加 Vertical Layout Group 與 Content Size Fitter 元件，讓外框可以依照文字行數來進行拉伸
將 unitychan 物件上的 Idle Changer 與 Face Update 腳本停用或刪除，關閉原本腳本上的 uGUI
人物的 Animator 可以放入自已的動畫控制器，可以在 Mixamo 或資源商店中下載 ( Unity-Chan 的待機動畫不適用 )
目前已將 UI 與人物放置在場景，接著製作與 Open AI 串連的功能。
3. 設定 Open AI API / 進入 Open AI 開發平台 https://platform.openai.com/docs/overview
登入帳號後，到 Dashboard 頁面，此時沒有任何 API Key ，點擊右上角的 Create new secret key 來創建一個密鑰。
例如創建一個 Example 的密鑰 ( 使用預設權限即可 ) ，按下 Create secret key 取得密鑰， 請務必立刻複製這個密鑰並且儲存，這個視窗如果關閉，將無法再取得同一組密鑰
回到Unity 編輯器，建立 OpenAIChat 腳本，程式碼截圖 [ OpenAIChat ]
此時若出現錯誤，請檢查剛才的 ElevenLabs 是否正確安裝。
建立空物件 OpenAIChat ，將 OpenAIChat.cs 腳本拖曳到這個物件中，將場景上的 InputField , Text , Button 物件放入到指定欄位中
開啟 OpenAIChat 腳本，找到 apiKey 變數，將剛剛複製的金鑰取代原本的api key文字
替換原本的文字後，看起來應該會像下圖
這個腳本主要是將問題轉換成Json格式，並傳遞給 Open AI API
以下範例為使用 gpt-3-turbo 模型，
由 system 角色來設定 AI 的回答風格，user 角色詢問 AI 助手問題
最大回應字數為1000，限定字數的好處是提高 AI 回應速度、提高對話精簡
{
"model": "gpt-3-turbo",
"messages": [
{ "role": "system", "content": "請用繁體中文回答問題。" },
{ "role": "user", "content": "今天天氣如何？" }
],
"max_tokens": 1000
}
AI 回應的Json如下，包含本次對話的ID、類型、使用的AI模型、回答等等訊息
{
"id": "chatcmpl-123456789",
"object": "chat.completion",
"created": 1710000000,
"model": "gpt-3.5-turbo",
"choices": [
{
"index": 0,
"message": {
"role": "assistant",
"content": "你好！有什麼我可以幫助你的嗎？"
},
"finish_reason": "stop"
}
],
"usage": {
"prompt_tokens": 15,
"completion_tokens": 10,
"total_tokens": 25
}
}
所以我們在 Unity 傳遞訊息時，需要先將對話轉換成 Json 格式，並且收到的 Json 格式再轉換我們的格式。
目前進度先測試 Unity 可不可以與Open AI APK 連線即可
按下 Play 測試腳本，詢問問題後能不能正常執行
( 按鈕不用給事件，在腳本中已經有指定了 )
如果測試後沒問題，就可以進行下個部份了
4. 製作文字轉語音功能 (Text to speech)
進入
https://elevenlabs.io/
選擇免費試用後，可能需要輸入名稱與生日
以及你要將 ElevenLabs 用在哪些地方 ( 根據情況填選即可，不影響後續操作 )
完成後，選擇左下角的個人訊息
選擇 API Keys 按鈕
第一次使用 ElevenLabs 的話，API Keys 頁面會沒有任何金鑰，按下 Create API Key 建立一個
輸入專案名稱，按下 Create 按鈕
系統會給我們API 金鑰，
請務必按下 Copy to Clipboard 並儲存起來，視窗關閉後無法再取得同一組金鑰
之後可以在左邊按下 Voices 按鈕，進入聲音頁面，免費帳號可以新增三個額外的聲音，可以試聽聲音後按下 + add 按鈕，將指定聲音加入到自己的帳號中
Elevenlabs 的免費帳號，一個月可以轉換 10000 個文字
操作完成後，回到 Unity 編輯器
建立 ElevenLabsTTS.cs 腳本，開啟下列的文件後，將內容複製到 ElevenLabsTTS.cs 腳本中
建立 AudioController.cs 腳本，開啟下列的文件後，將內容複製到 AudioController.cs 腳本中
建立空物件 AudioController 後，再建立子物件 AudioSource_BGM 與 AudioSource_Voice ，將這兩個物件都增加 AudioSource 元件
選擇 AudioController 物件，將兩個 AudioSource 物件放入到適當欄位中
ElevenLabsTTS.cs 為與 Elevenlabs 連線的腳本，AudioController.cs 為播放聲音的腳本 ( 包含背景音樂與人聲 )
需要依照上面步驟，匯入 ElevenLabs 套件才可以使用
在 Project 視窗中，執行 [ 右鍵 > Elevenlabs > ElevenlabsConfiguration ] 建立一個設置檔案
名字修改完成後，會自動被移動到 Resources 資料夾中
選擇新增的設置擋，貼上 API 金鑰
建立 AudioController 空物件，將 AudioController.cs 拖曳放入到此物件中
在 AudioController 物件下再建立兩個空物件，命名為 AudioSource_BGM 與 AudioSource_Voice，並在這兩個物件下方增加 AudioSource 元件
選擇 AudioController 物件，將剛剛建立的 AudioSource 物件拖曳放入到 AudioController.cs 的欄位中
建立 ElevenLabsTTS 空物件，將 ElevenLabsTTS.cs 拖曳放入到此物件中
將剛剛建立的設置檔案放置在 Configuration 欄位中
將剛剛建立的 Audio Controller 物件拖曳放入到 Audio Controller 欄位中
這個腳本有製作試聽語音的功能，在 Inspector 中按下按鈕後可以播放或停止試聽語音
在 ElevenLabsTTS.cs 腳本中，需要執行 TextToSpeech (string ) 來將文字轉換成聲音，腳本內容可以參考範例文件
https://github.com/RageAgainstThePixel/com.rest.elevenlabs
播放試聽功能需使用 OnPreviewButtonClicked() 方法，要從 Voice.PreviewUrl 抓取試聽語音網址，並使用 UnityWebRequest 取得聲音資訊並播放
開啟 OpenAIChat 腳本，之前因為還未建立 ElevenLabsTTS.cs 腳本，先將這部分註解，但是現在已經可以使用 TTS 功能了
找到 public ElevenLabsTTS tts 相關部分，將註解刪除
(61行 67行 137行)
按下 Play 後，測試角色會不會發出聲音
5. 使用麥克風語音辨識功能
麥克風語音辨識功能，使用Speech Recognition using Google Cloud [VR\AR\Mobile\Desktop] Pro套件
如果需要離線方案，可以使用Undertone - Offline Whisper AI Voice Recognition
套件，不過因為要將別人訓練完成的檔案下載到本地專案使用，所以專案與執行檔會很大，而且舊版的手機執行後可能會閃退
這個範例使用 Speech Recognition using Google Cloud [VR\AR\Mobile\Desktop] Pro 套件
需要使用到 Google Cloud 服務
https://console.cloud.google.com/welcome
如果沒使用過，目前應該是沒有專案的，按下選擇專案按鈕
按下右上角的新增專案
給專案一個名稱後，按下建立
建立專案需要一些時間，
開啟 Google Cloud 專案，可能需要綁信用卡
接著進入 Speech-to-Text API 的頁面
https://console.cloud.google.com/apis/library/speech.googleapis.com
點擊啟用
如果之前沒有綁定信用卡，這次會需要你啟用計費功能
如果沒特別啟用計費，將不會從信用卡中扣取費用
確認身分，綁定信用卡
綁定完成後，將會看到 API 已啟用的訊息
到憑證頁面後，按下建立憑證
選擇 API 金鑰
之後會自動建立 API 金鑰
建立完成後，會顯示新的 API 金鑰
Google Cloud 可以直接按下顯示金鑰按鈕來查看金鑰，關閉視窗後不會消失
回到 Unity 編輯器，建立 GoogleSpeechRecognition.cs 腳本後，將下列檔案的內容都複製到新腳本內
建立空物件 SpeechToTextController，將SpeechToTextController.cs 腳本拖曳放入到新物件中，並指定錄製按鈕與顯示結果的欄位
在 [ FrostweepGames > GCSpeechRecognition > V1 > Prefabs ] 資料夾中找到 GCSpeechRecognition 預置物件並拖曳到場景中
選擇場景中的 GCSpeechRecognition 物件，並貼上之前取得的 API KEY ( 複製後會自動轉為星號 )
GoogleSpeechRecognition 腳本主要提供錄製、停止錄製、錄製成功、錄製失敗、辨識成功與辨識失敗的事件，當有連接到麥克風時，將會以電腦的默認麥克風來錄音
例如下圖，我的預設麥克風是 C310，在收音時會使用這一台麥克風
測試按下錄製按鈕後，並進行對話後按下停止按鈕
確認能不能辨識成功
6. 製作Google搜尋功能
根據資料顯示，GPT-3.5 Turbo的數據在 2021 就結束了，所以沒辦法詢問到最新資料，所與需要其他工具來幫忙
這是沒有進行網路搜尋的結果
使用者提問：目前的台灣總統是誰呢
這是有進行網路搜尋的結果
使用者提問：目前的台灣總統是誰呢
如果需要比較對應時事的回答，可能就需要使用搜尋功能
在這個範例中，使用到下列兩種 Google 的服務
Google 搜尋 API
https://console.cloud.google.com/marketplace/product/google/customsearch.googleapis.com
Google 程式化搜尋功能
https://programmablesearchengine.google.com/u/1/controlpanel/all
在目前的專案中，啟用 Custom Search API
在程式化搜尋引擎的頁面中，新增一個自動的搜尋引擎，可以依照需求，客製化搜尋引擎
點擊搜尋引擎的名稱，會進入總覽頁面，有一個搜尋引擎ID的欄位，這是等等會使用到的
我們先撰寫範例腳本，先不與虛擬AI專案合在一起使用
建立腳本 GoogleSearchManager.cs 後，將下列文件複製到新的腳本中
建立腳本 SearchResultItem.cs 後，將下列文件複製到新的腳本中
建立一個新場景，當作Google Search API 的展示範例，設計簡易的顯示UI，如附圖
建立空物件 GoogleSearchManager 後，將 GoogleSearchManager.cs 腳本拖曳放入到新的物件中，將 Google Cloud 的專案 API 與 搜尋引擎的 ID 貼到 Api Key 與 Search Engind id 欄位中
設定搜尋結果的數量，不需要太多，這裡設置為3個就好
UI設置使用文字輸入欄位、搜尋按鈕、放置顯示結果預置物件的容器、結果預置物件與讀取畫面
附註：
Scroll View 的元件設置比起一般的Panel還來的複雜，也可以使用 Panel 來製作這個 UI
SearchResultItem 預置物件的設置如下，使用一個 Panel 下增加兩個 Text 物件
兩個 Text 都增加 Layout Element 元件，設置如下圖
父物件的 Panel 增加 Vertical Layout Group 與 Layout Element 元件，設置如下圖
按下 Play 後測試，在 Panel 會生成剛剛製作的預置物件，顯示 Google 的搜尋結果標題與摘要
在 GoogleSearchManager.cs 腳本中，有 SearchResult 類別來接收搜尋到的訊息，包含標題 title、網址 link與摘要 snippet (不是全部內容)
但如果要抓取網頁所有內容，則需要抓取 link 中的內容，並使用 UnityWebReauest 來抓取所有的文字
7. 將 Google Search API 與 Open AI API 一起使用
使用 Search 協程來依照關鍵字來取得 Google Search API 的搜尋結果
取得搜尋的結果後，讓 Open AI 得到最新的訊息，並幫忙進行整理
在 Unity編輯中，回到虛擬助手的場景
這個步驟會使用到解析網頁內容的工具 HtmlAgilityPack ，我們抓取網頁內容時可能也會抓到網頁程式碼，使用 HtmlAgilityPack 工具，就可以將網頁程式碼清除
需要先下載 NuGetForUnity 工具
https://github.com/GlitchEnzo/NuGetForUnity
在畫面右方找到已經釋出的資源
下載 NuGetForUnity.unitypackage 資源包
匯入資源包
執行 [ NuGet > Manager NuGet Packages ]
開啟 NuGet For Unity 視窗，搜尋 HtmlAgilityPack ，並按下 Install 安裝套件
安裝完成後，就可以使用 HtmlAgilityPack 工具了
這是更新後的 OpenAIChat.cs 腳本，直接取代 OpenAIChat.cs 的所有內容
並重新貼上你的 Open API 金鑰
這是更新後的 GoogleSearchManager.cs 腳本，直接取代 GoogleSearchManager.cs 的所有內容
新的 OpenAIChat.cs 腳本，可以和先前撰寫的 GoogleSearchManager.cs 一起使用，推導出更正確的答案，也可以在 Unity 中輸入提示詞，讓 AI 照著提示詞回答，不過目前還沒製作對應的 UI 介面
建立可以填寫提示詞的 UI 介面，範例如下圖
輸入欄位分別為
一般搜尋 : 如果只使用 Open AI API 來搜尋，並引導 AI 依照你的需求來回答問題 ( 例如 : 請使用英文回答問題 )
全網搜尋 : 如果需要使用 Google Search API 來搜尋，並引導 AI 依照你的需求回答問題
額外選項 : 如果需要請 AI 使用不同的語氣說話，可以嘗試編輯此項目 ( 例如 : 請使用生氣的語氣回答問題 )
最後是核取方塊，如果勾選後，在全網搜尋中就不會依賴
在 Open AI Chat.cs 腳本中，有初始化提示詞的指令
執行後的成果如下
接著先停用設置面板，在畫面的右上角增加 Toggle 核取方塊，讓使用者決定要不要使用全網搜尋 ( 如果不勾選，將只將問題傳遞給 Open AI 來回答 )
在場景上建立空物件 GoogleSearchManager 後，將 GoogleSearchManager.cs 拖曳放入到空物件中
設置 API Key 與搜尋引擎 ID，將 Open AI Chat 物件拖曳放入到適當欄位中
將剛剛建立的 UI 物件，放置到 OpenAIChat 腳中的適當欄位
panel_Config : 設置面板
inputField_OpenAIRole : Open AI 搜尋的角色設定
inputField_GoogleSearchRole : Google 搜尋的角色設定
inputField_Extra : 額外的提示詞
toggle_OnlySnippet : 僅摘要搜尋
keyConfig : 指定需要按下的按鈕，開啟或關閉設置視窗
requiredHoldTime : 如果使用手機，可以使用按壓畫面的動作來開啟設置視窗，這個欄位設置需要按壓多久時間
因為 UI 設置比較麻煩，這裡稍微補充一下
如果要讓 Panel 可以隨著子物件的文字一起變高，需要在 Panel 上增加 Vertical Layout Group 與 Content Size Fitter
Vertical Layout Group 將 Control Child Size 的 Width 與 Height 項目勾選
Child Force Expand 的 Height 取消勾選
Content Size Fitter 的 Vertical Fit 更改為 Preferred Size
如果增加 Text 文字的行數，會發現 Panel 面板會隨著文字行數變多而變高
如果希望 Panel 長高方向是從下到上，可以更改 Panel 的 Rect Transform 中 Pivot 欄位，此處更改為 ( 0.5 , 0 )，並將 Pos Y 更改為 0
因為 Panel 中心位置改變 ( 改成物件最下方 )，所以會從下面往上方變高，看起來就像聊天訊息一樣
UI 與腳本設置好之後，可以按下 Play 測試 AI 是否可以正常回答訊息
如果沒有使用全網搜尋，會查詢到舊的資料
勾選全網搜尋後，會搜尋到較新的資料
Open AI Chat 腳本上面會看到歷史繼續，可以看到之前的提示詞會出現這邊，連同搜尋結果一併送出
GoogleSearchManager 腳本中會看到搜尋紀錄 ( 標題、網址與摘要 )
接著可以測試 F1 設置面板，將一般提示詞更改為 使用英文回答問題
AI 的回答語言會變成英文，代表 AI 可以依照我們的需求來做出回應
8. 人物對嘴動畫
使用 SALSA 套件
將 Unity Chan 放置到適當位置
停用或刪除原本身上的 Idle Chnager 與 Face Update 元件
增加 SALSA 元件
第一次加入腳本，需要設定一些項目
將 AudioSource_Voice 拖曳放入到 AudioSource 欄位中
按下 Add Queue Processor 按鈕
可以不用裡會 Emoter 部分
References 的部分已經完成了，接下來要嘴部動畫的部分
展開 Viseme Configuration 部分
按下 New Viseme 按鈕，增加嘴部動畫
搜尋 Unity Chan 下面的 MTH_DEF 物件，會看到在 Skinned Mesh Renderer 中有 Blender Shapes 欄位，拖曳滑條可以修改人物的嘴部動作
在 Blender Shapes 中，已經知道他有分出A I U E O 嘴型了，直接使用這些參數即可
回到 Unity Chan 上的 SALSA 元件，將 viseme 0 更名為 A，component0 更名為 A
將剛剛找到的 MTH_DEF 物件拖曳到 SkinnedMesh 欄位中
Blendershape Index 選擇 blendShape1.MTH_A ，表示使用 MTH_DEF 模型的 blendShape1.MTH_A 變形參數
Max數值可以依據情況調整，這次先設定成100就行了
如果要瀏覽嘴型，可以按下 Preview Display Mode 按鈕，瀏覽目前的嘴型
依照相同的方法來製作 A I U E O 的嘴型
製作完成後，按下 Trigger Display Mode 按鈕
再按下右邊的 Curve 或 Linear 按鈕，修改動畫的平滑程度 ( 不如果修改，將不會出現動畫效果 )
按下 Play 測試，當 AudioSource 下的 AudioSource_Voice 發出聲音時，人物的嘴巴會不會跟著動
在 SALSA 元件中也可以看到目前的嘴形變化
9. 匯入 VRM 檔案
使用 VRoid Studio 可以快速製作人物
從 Github 中下載 UniVRM 的 UnityPackage
https://github.com/vrm-c/UniVRM
匯入 UniVRM 資源包
此處將 VRM 檔案放入專案中，Unity 會自動製作一個預置物件
將這個預置物件拖曳放入場景中，並移動到適當位置
預置物件上的元件很多，不過先不用進行編輯
設置 SALSA 元件上的 References 項目
VRM 創來的檔案已經附加很多 BlendShapes 了，可以直接使用這些變形來做嘴型
可以直接使用 A I U E O 的參數來製作嘴部表情
按下 Play 測試，測試聲音出來後，人物的嘴巴有沒有跟著動作
OpenAI-20250321.docx / Share
Copyright © 2025 CG Digital Corp. All rights reserved.