🐈

ChatGPTとLIVE2D、Voicevox でaiにしゃべってほしい

2023/05/07に公開

Next.js

こんにちはstdと申します。

個人開発でChatGPTとLIVE2D、Voicevoxを連携させたプロトタイプをNextjsで作りましたのでその話を書いていきます。
音声合成が遅い等課題は結構ありますが開発の参考になりましたら幸いです。
喋り相手がaiになる日も近いですね！

できたもの

使用技術、パッケージ

Next.js
Google Cloud Cloud Run
Voicevox
Mantine
jotai
pixi-live2d-display
patch-package

Voicevox

Google CloudのCloud Runにコンテナをおきます
ここに公式のvoicevox engineがあります。CPU版をそのまま使います。

Cloud Run 設定
コンテナイメージのURL: voicevox/voicevox_engine:cpu-ubuntu20.04-latest
コンテナポート: 50021（voicevoxのデフォルトポート）

{Cloud Runのurl}/docsでapiドキュメントを確認できます。

pixi-live2d-display

このlive2dをReactで簡単に使用できるパッケージです。
表示はできたのですがリップシンクに対応していないらしくlive2dの口を動かすことができませんでした。
プルリクエストにはあったので対応待ちなのですかね。
そこでフォークされているこのリップシンクに対応したリポジトリを使ってpatch-packageでリップシンク分を加えました。

ここからCubism SDK for webをダウンロードしてCoreディレクトリのlive2dcubismcore.min.jsとSamplesの中にあるResourcesディレクトリをNextjsのpublicディレクトリにコピペします。

こちらのlive2d.min.jsをNextjsのpublicディレクトリにコピペします。

publicディレクトリはこのようになります。
public
　-Resources/
　-live2d.min.js
　-live2dcubismcore.min.js

実装

pixi-live2d-displayをそのまま読み込もうとしたらエラーになりましたのでlive2dのコンポーネントはこのようにnext/dynamicを使用してimportしました。

const Live2D = dynamic<{}>(
  () => import("@/components/elements/Live2D").then((module) => module.Live2D),
  { ssr: false }
);

コード

修正、改善ありましたらプルリクエストしていただけるとすごく助かります！

今後

音声合成の速度、音声入力、オリジナルのlive2dのキャラクターを作っていきたいです。

一緒に開発してくれる方募集！

開発したい人、キャクター作りたい方等いらっしゃればtwitterやコメントでお声がけください！

使用技術、パッケージ

Voicevox

pixi-live2d-display

実装

コード

今後

一緒に開発してくれる方募集！

Discussion