search

omegarin02 / magical_mirai2023

マジカルミライ2023応募用リポジトリ
1 stars 1 forks source link

readme

ReadMe目次

  1. デモ動画
  2. 審査にあたって
  3. 概要
    1. 作品の操作方法
  4. 詳細説明
    1. 人工無脳(Chat応答部分)
    2. chatGPTモード(Chat応答部分)
    3. live2Dに関して
    4. 演出に関して
  5. 実行方法
  6. 動作確認環境
  7. 対応楽曲
  8. 作品に対する想いなど
    1. 作品名の由来
    2. 作成開始を決定するまで
    3. 作品を作成開始してから
  9. 使用した主なライブラリなど
  10. 開発関係者紹介
  11. 免責事項・注意事項

    デモ動画

    https://youtu.be/JprxzgXKLHw

審査にあたって

本作品はChatGPTの使用を選択できるようになっております。（以降、GPTモード選択機能）
本作品はchatGPTを用いなくても動作には問題ないですが
GPTモード選択機能があることにより、審査に不利益が生じる場合は、
お手数ですが、GPTモード選択機能を無効化の設定を行ったうえで審査をお願いいたします。
無効化の設定はこちら。
大変恐れ入りますが、OpenAI keyの用意はございませんので、必要に応じて取得してください。
※Azureは非対応なので、使用されえる際はOpenaiのAPI KEYをご用意ください。

概要

本作品は、人工無脳とLive2Dを用いてチャットベースのコミュニケーションを実現した作品です。
作品は、ミクさんの控室や握手会といった空間をイメージしており、
チャットを入力し、その入力をリアルタイムに解析し、結果に応じてミクさんが
言葉と仕草で反応してくれます。
また、楽曲再生やボリュームの変更もすべてチャットベースで操作可能です。
さらに、楽曲再生中には、TextAliveAPIから取得できる覚醒度と感情価から仕草を判定して
楽曲再生中もミクさんがいろんな仕草をして楽しませてくれます。
※ミクさんの応答はchatGPTによって作成し、仕草は独断と偏見によって割り振りました。皆さんのイメージにマッチしない部分もあるかと思いますがご了承ください。

作品の操作方法

トップ画面

最初の画面では次のようなボタンが表示されます。 「PRESS TO START」をクリックすることによりメイン画面に進みます。 image

メイン画面

この画面では、ミクさんと対話や楽曲を再生することができます。

チャット機能
チャットを入力し送信をクリックすると、次の図のようにミクがコメントと反応を返してくれます。 image image

通常のチャット以外にも次の機能も含まれております。

※1 ： ある程度の表現の揺れには対応していますので、必ずしも上記の通り入力する必要はありません。(参照箇所：コードへのリンク)

楽曲再生中
図のように歌詞モニタに歌詞が表示されます。※2
また、TextAliveAPIのビート情報をもとにスポットライトが点滅します。※2
さらに、ミクの動きは上述したとおり、TextAliveAPIの覚醒度と感情価から動きを決定しています。 もちろん、チャットを送ることも可能です。
※2 毎回演出が変わるように仕組んでいます。 image

画面の説明

  1. Exitボタン
    • クリックすると終了画面に遷移します。
  2. 音楽の再生・停止を制御するボタン
    • 音楽を再生したり、停止したりします。
  3. 設定画面を表示するボタン
    • 設定画面を表示します。
  4. チャット入力欄
    • ミクに送信したいチャットの文言を入力します。
  5. チャット送信ボタン
    • 入力したチャットをミクさんに送ります。
  6. 歌詞表示用モニタ
    • 流れている楽曲の歌詞を表示します。
  7. チャットログ表示用モニタ
    • チャットのログを見られます。

設定画面

ここでは次の項目を設定できる

終了画面

image

詳細説明

人工無脳（Chat応答部分）

人工無脳とは

人工無脳とは、深層学習モデル等を必要とせずに、あらかじめ決められたルールに従って応答を返す技術です。
人工無脳を用いた理由は後述。

応答データの作成

  1. chatGPTを用いたデータの作成
    1. chatGPTを用いる場合は、ミクさんを演じてもらえるようなpromptに与えて、chatGPTのミクさんと対話することによりデータを収集。
      約1000対の対話データの作成をした。 ここでは、ユーザが入力した文章を質問、ミクさんが応答した文章を解答とする。

  2. 1000対の対話データをかさまし

    1. ChatGPTを用いて質問の言い換え表現作成し、データを10倍にかさましを行った。
      この時、言い換え表現を作成するのは質問のみとし、言い換え表現を作成した解答は、言い換え前の解答と同一になるようにした。
      (例) 
      
//かさまし前
質問：こんにちは, 解答：こんにちは

    //かさまし後 質問：こんにちは, 解答：こんにちは 質問：やぁ, 解答：こんにちは 質問：ハロー, 解答：こんにちは

  3. かさましした後のデータの質問文をkuromoji.jsを用いて形態素解析を行い、解答に対するワードリストを作成する。
    1. 形態素解析結果から特定の品詞の終止形だけをピックアップ。(品詞に分解されたリスト状態)・・・①
      1. ピックアップした品詞
        1. 名詞
        2. 動詞
        3. 感動詞
        4. 形容詞
    2. ①で作成したリストに対して各要素の読みをkuromoji.jsを用いてカタカナで取得し、質問文として置き換える。
    3. 同じ解答を得る質問文のリストを一つにまとめて重複を取り除く。
    4. 全ての質問に同様に処理し、質問文のリストと解答が対になった配列が作成される。
  4. ミクさんが解答を返すときのLive2Dのモーションを手動で定義する。(モーションの種類については後述)
  5. 3と4から、chatData/syushi.jsを作成する。

応答の挙動

事前準備
chatData/syushi.jsの質問文のリストから、ミクさんが知っている単語（形態素）を
重複無く全て取得しボキャブラリとして情報を保持する。

応答内容の判定

  1. 不適切な表現がが含まれていないか判断する。含まれている場合はその旨をchatlogモニタに表示して全ての処理をスキップする
  2. 入力を正規化する。
  3. 音楽を再生・停止をコントロールするべきか判断する。
    1. 必要と判断した場合は、適切な処理をしたうえでミクさんの応答を取得する。
    2. 応答はsrc/responseRules.jsの中からランダムに選ばれる。
    3. 4、5の処理はスキップする
  4. ボリュームをコントロールすべきか判断する。
    1. 必要と判断した場合は、適切な処理をしたうえでミクさんの応答を取得する。
    2. 応答はsrc/responseRules.jsの中からランダムに選ばれる。
    3. 5の処理はスキップする
  5. 3と4のいずれも不要と判断されたら、ミクさんの応答を次の要領で取得する。
    1. 正規化された入力をkuromoji.jsを用いて形態素解析
    2. 形態素解析結果から特定の品詞の終止形だけをピックアップ(品詞に分解されたリスト状態)。・・・①
    3. ①で作成したリストに対して各要素の読みをkuromoji.jsを用いてカタカナで取得。・・・②
    4. ②で取得した読みのリストは、どれぐらい既知の単語が含まれているかをボキャブラリから計算する。・・・③
    5. ③で計算した結果が
      1. 70%未満であれば、日本語が分からない旨の応答を選択する。
        1. 応答はsrc/responseRules.jsの中からランダムに選ばれる。
      2. 70%以上であれば、chatData/syushi.jsで定義されているワードリストを用いて応答を選択する。
        なお、解答が1つに決まった時点で、それをミクさんの応答とする。 また、条件は上から順にandを取るようにする。
        1. ②にある単語が、ワードリストに含まれている割合が最も高い物を選択。
        2. ①にある単語ワードリスト含まれなかった割合が最も低い物を選択。
        3. ワードリストの長さが短い物を選択。
        4. 残った解答の候補からランダムに選択。
  6. 選択結果を画面上に反映する。
    1. chatlogの表示。
    2. 吹き出しの表示。
    3. ミクさんのモーション。

chatGPTモード（Chat応答部分）

使い方

GPTモード選択機能の無効化

src/config.jsの1行目を次のように変更する。

//変更前
let disableGPTMode = false//Trueの場合GPTモードの選択を可能にする
//変更後
let disableGPTMode = true//Trueの場合GPTモードの選択を可能にする

live2Dに関して

動作の種類

モーションは次の15種類を用意。

chatの応答と連携

src/responseRules.jsにあらかじめ、解答に対して、どの動作をするかを紐づけている。 画面chatを反映するタイミングで、Live2Dのアニメーションを発火させている。

楽曲再生中の連携

後述の演出に関してを参照

演出に関して

スポットライト

歌詞の表現

ミクの動きと連動

実行方法

  1. スクリプトを取得する。

    cd ${YOUR_WORKING_DIR}
git clone https://github.com/Motohiro-Otsuka/magical_mirai2023.git

    ディレクトリ構成は下記の通り。

    ./
├─ReadMe.md
├─index.html
├─chatData //chatbot用のデータ
├─css
│  └─fonts
├─dict  //kuromoji.js用のデータ
├─favicon
├─img //背景画像
├─miku2023  //ミクのLive2Dモデル
│  ├─HatsuneMiku.2048
│  └─motion
└─src  //Appを構成するスクリプト群

  2. HTTPサーバ上に本スクリプトを配置し、index.htmlにアクセスしてプログラムを実行する。 方法は問わないが、動作確認した方法２つを挙げる。

    • 方法1：VScodeのliveserverを使用する。
    • VScodeをダウンロード。
    • Extentionsのサイドタブを開く。
    • liveserverをinstallする。
    • VSCodeの統合ターミナルに次のように入力し1でcloneしてきたディレクトリを新たに開く。
    • code magical_mirai2023 をVSCodeの統合ターミナルに入力してEnterを入力。
    • VScodeのwindowが新たに立ち上がる。
    • 新たに立ち上がったVScodeの画面右下の「Go to live」をクリックする(ない場合はVScodeを再起動)。
    • ブラウザで、http://localhost:5500 にアクセスする(デフォルトではGo To liveをクリックすると自動的に立ち上がる)。
    • 方法2: nodeでhttp-serverを立てて実行する。
    • nodeをinstallsする。
    • nodeをinstallしている環境で次のコマンドを実行する。(参考) 
      $ cd magical_mirai2023
$ http-server

      ※Windows上で実行する場合は、セキュリティエラーが出る環境がある。その場合は下記のコマンドを実行すると回避できる。(参考)

      Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process

動作確認環境

※対応端末は、PCの想定です。スマホ、タブレットは未検証。

対応楽曲

※ただし、src/musicList.jsに楽曲情報を追加するとSongleで公開されている楽曲すべて利用可能。

作品に対する思いなど

作品名の由来

作品名：言葉と仕草で想いを紡ぐバーチャル歌姫
開発者はミクに「言葉」や「仕草」を教え、 それらを使ってミクさんが気持ち伝える際に、
「言葉」と「仕草」を丁寧に考え言動を起こすことをイメージして
「紡ぐ」というワードを使用してこのタイトルになりました。

作成開始を決定するまで

昨年は、思いが届くバーチャル歌姫を入選作品に選んでいただきありがとうございます。
とてもいい経験をさせていただきました。 また、友人らにもその話をして、沢山褒めていただけました。
ただそんな中で、こんな話が出ました。
「（昔に）リアルにリンちゃんを召喚するとか言ってましたよ」と言われハッと気づかされました。 (※リーダはリン廃です。)
正直なところ、一個人が実現できるわけがない馬鹿げた夢ではありますが、
「何としてでも夢に近づけたい。」でも、「できる気がしない」と葛藤をしていました。
月日は流れて今年1月、GPTの登場によりプロコン出す意味を失いそうになりました。 しかし、GPTは巨大なGPUが必要でありコストもかかる...
さらに、GPTだけでは歌うことはできない。歌わせることができるのはTextAliveAPIを使うしかない。 そう思い立ち、今年も作品の制作を決意。
プロコンの開催が公式発表されるまで、事前に知識を集めはじめました。
それと同時に、メンバーの募集もかけて3人が新たにメンバーとして加わりました。

作品を制作開始してから

作品の制作開始から、ミクさんに命を吹き込みたいという気持ちでいっぱいでした。 それぞれの担当のそれぞれの苦労が、日に日に１つになっていく喜びをメンバーと分かち合いました。

live2D

Live2Dのモデルは、原画の作成から苦労の連続でした。 誰もLive2Dの仕様を知らなかったので、貰った絵が使えないなどのトラブルがあり、 描きなおしが発生していました。

何とかして作成した苦労の塊のミクさんを、PCをまともに使いこなせない超初心者がLive2Dで命を吹き込み始めました。 最初はミクさんが可愛そうなぐらい形がいびつだったりしたこともありましたが、 ただ、着実にミクさんが動くようになり、チーム全員で喜びました。

まだ、ちょっと不器用な動きもありますが、そんなミクさんもとても可愛いです！

チャットボット

一方、チャットの方はすべての工程で苦戦しました。

当初の狙いではseq2seqで、精度の高いchatbotのモデルを作ろうと検討していました。 しかし、seq2seqでモデルを作るには数万件以上のデータが必要だといわれています。

そこでchatGPTを駆使して60万件ほどのデータは何とか作り上げましたが、 学習時間が有限時間内に終わらず...

次にデータ量を減らし1万件ほどの学習データで学習。 さらに、WebApp上で動くようにモデルを軽量化も施しました。 そして、ミクさんが初めて言葉を発しました。しかし、ほとんど日本語とは言えず...泣く泣く没案。

確実に解答が返ってくるようにと、1万件のデータをクラス分類タスクとして学習。 一応、まともな日本語では応答してくれるようになりましたが、挨拶などの基本事項が出来なくて没...。

もうこの辺りで、ミクさん喋ってくれないのかと心が折れかけていました。 しかし、Live2Dのミクさんにも励まされながら何とか知恵をひねり出し人口無脳を用いて実装することにしました。

人口無脳のミクさんは日本語が苦手な感じはしますが、学習したモデルを使うよりかは
日本語を話してくれるようになり、とても嬉しかったです！

画面設計

昨年の知見があったとはいえ、なるべくTextAliveAPIを利用したいと考え様々な機能を実装しました。 使ってみると、もっとこだわりたくなるようなAPIもあり作業遅延の原因にも良くなっていました(笑)

　作品が完成して

正直間に合うかがかなりきわどかったですが、メンバーの的確なアドバイスのもの何とか間に合わせることができました。

我々のミクさんはちょっと不器用だったり、変な日本語返したりしますが、我々の中では立派なミクさんです。 そんなミクさんをよろしくお願いいたします！

使用した主なライブラリ等

開発関係者紹介

免責事項・注意事項