ChatdollKitとChatGPTで対話アバターを作成する

# 概要
ChatdollKitとChatGPTを使って、好きなアバターと対話するプログラムを作る

※事前に、VRoidStudioなどでVRMモデルを作成する（VRMモデルは拡張子が.vrmになっているもの）

# 開発環境
- Unity (2021.3.6f1)
- ChatdollKit (v0.6.1)
- VRoidStudio (1.22.1)

## 依存ライブラリ

- UniTask (Ver.2.3.1)
非同期処理をしてくれるライブラリ
- uLipSync (v2.6.1)
アバターが発話する時に口を動かすためのライブラリ
- UniVRM (v0.89.0)
- VRM Extension (v0.6.1)

## Unity Package Manager
- Burst from Unity Package Manager (1.6.6)
uLipSyncの依存ライブラリ
- JSON.NET For Unity from Package Manager (3.0.1)
- Anime Girl Idle Animations Free (1.0.2)

## API
- ChatGPT API
- Azure / Google / Watson いずれかの Text to Speech API と Speech to Text API
※事前にAPI Keyを取得しておく

# ChatdollKitとライブラリのダウンロード
・[ChatdollKit](https://github.com/uezo/ChatdollKit/releases)のv0.6.1から「ChatdollKit_0.6.1.unitypackage」と「ChatdollKit_VRMExtension_0.6.1.unitypackage」をダウンロード

・[UniTask](https://github.com/Cysharp/UniTask/releases)のVer.2.3.1から「UniTask.2.3.1.unitypackage」をダウンロード

・[uLipSync](https://github.com/hecomi/uLipSync/releases)のv2.6.1から「uLipSync-v2.6.1.unitypackage」をダウンロード

・[UniVRM](https://github.com/vrm-c/UniVRM/releases/tag/v0.89.0)から「UniVRM-0.89.0_9470.unitypackage」をダウンロード

・[Anime Girl Idle Animations Free](https://assetstore.unity.com/packages/3d/animations/anime-girl-idle-animations-free-150406)から「Add to My Assets」をクリックして、UnityのMyAssetsにダウンロード

# 作成手順
Unity(Version 2021.3.6f1)でProjectを作成する

※「burstの追加」以降の手順は、下記の動画を参考にしています
[ChatGPTとChatdollKitで作る！3Dバーチャルアシスタント開発RTA](https://www.youtube.com/watch?v=RFpgYLe2t4o)

## パッケージの追加
Window > Package Managerを開く

### JSON.NETの追加
1. 左上の＋マークから、Add package by nameをクリック
1. Name:com.unity.nuget.newtonsoft-json Version:3.0.1 と入力
1. addをクリック
    <img width="600" alt="Add JSON.NET.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784580/96b89b96-fd7e-d679-8b0a-df7dad512e26.png">


### burstの追加
1. Packages:Unity Registryに変更
1. burstと検索
1. Installをクリック
    <img width="600" alt="Add burst.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784580/b636ef76-7c71-de68-4b9c-8bf25e1c6cce.png">

### Anime Girl Idle Animations Freeの追加
1. Packages:My Assetsに変更
1. Anime Girl ldle Animations Freeを選択
1. Importをクリック
    <img width="600" alt="Import Animation Girl.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784580/c2e7357c-c588-df7c-c329-393f4849580f.png">

1. 1番上のチェックを外し、Animationsフォルダにチェックを入れる
1. Importをクリック
    <img width="600" alt="Import Select Animation Girl.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784580/9f0f73f3-51db-6d43-0e7f-9b4ac0d6a111.png">


## Unityパッケージのインポート

### ChatdollKitの追加
1. 1. ダウンロードした「ChatdollKit_0.6.1.unitypackage」のフォルダを開く
1. Importをクリック
    <img width="600" alt="ChatdollKit.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784580/c2969217-dae9-0e3f-ef84-0c92b3e2e52c.png">

1. ダウンロードした「ChatdollKit_VRMExtension_0.6.1.unitypackage」のフォルダを開く
1. Importをクリック

### uniTaskの追加
1. ダウンロードした「UniTask.2.3.1.unitypackage」のフォルダを開く
1. Importをクリック

### uLipSyncの追加
1. ダウンロードした「uLipSync-v2.6.1.unitypackage」のフォルダを開く
1. Importをクリック

### UniVRMの追加
1. ダウンロードした「UniVRM-0.89.0_9470.unitypackage」のフォルダを開く
1. Importをクリック
1. ファイルをアップデートするか聞かれるので、「Yes, for these and other files that might be bound later」をクリック
    <img width="600" alt="UniVRM2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784580/3c98ccf2-3938-15c5-83e6-44c8abb7722e.png">

1. 「Accept All」をクリック
1. 「Close」をクリック

### 3Dモデルの配置
1. ProjectのAssetsを右クリック
1. create > Folder をクリック
    <img width="600" alt="3Dmodel_folder.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784580/4c14f2be-8299-9c87-d2f3-8f93394d83c6.png">

1. フォルダ名を「character」にする
1. 使用する3Dモデルのファイル（拡張子が.vrm）を（３）で作成したcharacterフォルダにドラッグして入れる
1. （３）で作成したcharacterフォルダ内のオブジェクト（Prefab Asset）を、ヒエラルキーのSample Scene内にドラッグ
1. Directional Lightを設定する
    アバターにライトを正面から当てたい場合は、
    - Position Y：３
    - Rotation X：130
    - Rotation Y：0
    - color：白
    <img width="600" alt="Light.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784580/88ca0141-f3dc-2637-21e2-038835e5a73c.png">

1. Main Cameraでカメラの位置を調整する（下の画像は正面から映すときの例）
    <img width="600" alt="Main Camera.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784580/75d60a12-98cc-305a-9094-897fcef55fea.png">

### ChatdollKit VRMの追加
1. ProjectのAssets > ChatdollKit > Extension > VRM のChatdollKitVRM.PrefabをヒエラルキーのSample Scene内にドラッグ
    <img width="600" alt="ChatdollKit VRM.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784580/99dec59f-5c55-3ffa-2c5f-c29eeb3fb351.png">

1. ヒエラルキー内で右クリック
1. UI > Event System をクリック
    <img width="600" alt="EventSystem.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784580/c2cacb07-f451-1e93-a741-825da4456b90.png">

## アイドルモーションの設定
1. ヒエラルキーのChatdollKitVRMをクリック
1. インスペクター内のModel Controller(Script)のメニューバー（右のアイコン）からSetup ModelControllerをクリック
    <img width="600" alt="setup Model Controller.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784580/1e12f318-2677-10a2-239c-5b7f5c33a075.png">

1. インスペクター内のModel Controller(Script)のメニューバー（右のアイコン）からSetup Animatorをクリック
1. AnimeGirlIdleAnimations_free > Animations を選択
    <img width="600" alt="setup Animator.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784580/ca38c728-753f-dad1-a409-16936e1c12b5.png">

1. 01_LayersはBase Layerを選択
※01_Layersはメインのアニメーション
1. 02_LayersはAdditive Layerを選択
1. 03_LayersはBase layerを選択
1. ヒエラルキーをキャラクターのオブジェクトに変更して、インスペクターのAnimator > Controller をダブルクリック
    <img width="600" alt="Animator Controller.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784580/22086d0f-5f5e-b79b-86c9-2231de5b2712.png"> 

1. LayersのAdditive Layerの設定をクリックし、Weightを1、BlendingをAdditiveに変更する
    <img width="600" alt="Active Layer.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784580/e282955f-a8cd-2bd6-83e9-9629ecd4b217.png">

1. LayersのBase Layerを選択し、自分が設定したいアイドルモーションにつながっている矢印のうち、左側の矢印をクリック
ここで設定するアイドルモーションは、待機時間、ユーザの発話時間のアバター動作になる
選択できるアイドルモーションは、[Anime Girl Idle Animations FreeのUnity Asset Store](https://assetstore.unity.com/packages/3d/animations/anime-girl-idle-animations-free-150406)にある動画で確認できる
※今回はconcernを使用
1. インスペクター内のConditionsの数字を確認
この数字を使って、アイドルモーションを設定する
    <img width="600" alt="Idle Motion.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784580/e97ec343-b6df-77db-d9fd-0d714d481627.png">

1. ヒエラルキーをChatdollKitVRMに変更し、インスペクターのModel Controller(Script)のIdle Animation Valueに、（１１）で確認した数字を入力する
    <img width="600" alt="Idle Animation Value.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784580/03f85d90-5827-3025-1448-5b09e094ae26.png">

## 対話の設定
1. Dialog Controller(Script)で、Wake Word / Cancel Word / Prompt Voice を設定する
    - Wake Word：初めに話しかける言葉
    - Cancel Word：終了する言葉
    - Prompt Voice：アバターが初めに話す言葉（Wake Wordに対する応答）
    ※今回はデフォルトのまま
1. ChatdollKit(Script)で、文字起こしと読み上げをするAPIの設定
    1. Speech ServiceをAzure / Google / Watson から自分が使用するAPIを選択する
    選択するとAPI Keyを入力する場所が表示される
    1. Api Keyを入力
1. ChatGPTのファイルを追加する
    1. Project内の Assets > ChatdollKit > Examples > ChatGPT を選択
        <img width="600" alt="select ChatGPT.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784580/d46b8f75-04e1-e992-0af0-0840f5c2f865.png">

    1. 追加したいファイルをChatdollKitのインスペクターの一番下にドラッグ
        - ChatGPTSkill
        デフォルトのChatGPT
        - ChatGPTStreamSkill
        ChatGPTの返答を1文ごとに出力するので、デフォルトより返答が早い
        - ChatGPTEmotionSkill
        感情シミュレーターを用いたもの
    ※今回はChatGPTStreamSkillを使用
    ※ChatGPTSkillをChatGPTStreamSkillに変えるときは、インスペクターからChatGPTSkillを消去して、ChatGPTStreamSkillを追加する。（インスペクターに両方追加したら動かなかったので）
    1. 追加したChatGPTのファイルを設定
        1. Api KeyにChatGPTのApy Keyを入力
        1. Chat Conditionにアバターの設定を入力
            ex)アバターとユーザの関係性、アバターの言葉遣いなど
            <img width="600" alt="ChatGPT config.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784580/e19a4471-f472-ac61-c2fb-228f6fce7a9a.png">

# 実行
作成手順がすべて完了したら、上部の実行ボタンをクリックする

アバターがアイドルモーションになってから、Wake Wordを話しかけると、アバターがPrompt Voiceの内容を応答する
その後、「Listening…」と表示されたら、会話がスタート！

何も会話しないと、「Listening…」は消えるので、会話したいときは、もう一度Wake Wordで話しかける

# 参考
- ChatdollKit github
https://github.com/uezo/ChatdollKit/blob/master/README.ja.md
- UniTask guthub
https://github.com/Cysharp/UniTask
- uLipSync github
https://github.com/hecomi/uLipSync
- UniVRM github
https://github.com/vrm-c/UniVRM
- Json.NET github
https://github.com/jilleJr/Newtonsoft.Json-for-Unity
- anime girl idle animations free Unity Asset Store
https://assetstore.unity.com/packages/3d/animations/anime-girl-idle-animations-free-150406