こんにちは、つむぎゆりです！
結論からいうと、こういうアプリを今作っています。
#Python と #Django で #ChatGPT に声と絵をつけてみようプロジェクト、UIをLINEふうにして整えてみました〜😆
— つむぎゆり (@26UGI) November 5, 2023
実際に喋ってみたんだけど、設定を忠実に守ってくれるので設定しがいがあるかも🙌
とりあえず大体は完成したので、あとは会員登録可能な本格的なアプリ作りを開始していこうかなと！！！ pic.twitter.com/TfMl0KL0Lr
似たような実装をされている方、AIに興味がある方向けの記事となっているかなと。
また、プログラムがわからない方にとっては、日本語でおｋ状態な内容だと思われますがｗ、なんか適当に英語とかを読み飛ばしてもらえると助かります。
最初にこの記事のまとめ
なぜこのアプリを作ろうと思ったか
JavaScriptで診断テストを作ったので、今度はもっと手のこんだものを作りたいと思ってたんですよ。
で、うちのブログはMBTIという性格診断と、Vtuberの記事、このふたつのジャンルが人気なので、もうひとつはVtuber関連がいかなと。
そして、最近はAIで簡単にクオリティの高いイラストが作れるようになったので、それに声をつけられれば需要が高いかな、と思って着手してみました。
…このときはまさかこんな一大プロジェクトになるなんて予想もしてなかったですはいｗ
運営者のプログラマ歴
htmlとcssを終え、jsならGPTに聞きながら、なんとか簡単なものなら実装できるレベルです。
Pythonも基礎はやったのですが、今回のアプリ実装ではほとんど役に立ちませんでしたｗ
後述しますが、ほとんどGPTがやってくれるのと、ライブラリごとに全然コマンドが違うこと、フロントエンドとバックエンドは全然違うのだなと身をもって学ぶことに笑
テストタイプを作るまでの期間約1ヶ月
テストアプリが完成するまでの流れとしては以下のとおり
- 果たして自分が思い描くことはできるのかというリサーチと、仮想環境構築で１周間ほど経過
- 仮想環境はVSコードとpipenpでとりあえずいくことに
- FastAPIでGPTに声をつけられるようになる
- Pythonの教習本のなかにあったDjangoの使い方を見ながら、Djangoの基本を学ぶ
- そのままFastAPIから簡単に移行できると思いきや、Django環境でまったくうまくいかず地獄を見る
- すべてDjangoで作ることにより、なんとか声とテキストが表示される
- あとは口パクと目パチを実装し、軽くUIを整えてテストタイプ完成
まずChatGPTに声をつけてみた
※動画のミュート解除するとAIの音声が聞けます
— つむぎゆり (@26UGI) October 17, 2023
🎶
今 #ChatGPT に声とアバターつけて、音声入力で動かすアプリ作ってるんだけど、ここまで動かすのに２周間かかったｗ#Python 1ヶ月、プログラミング初めて5ヶ月くらいなんだけど、どうにかなるもんだなと
1年前まで同人作家なのにどうしてこうなった pic.twitter.com/wvPMCwwrxb
それでは、実際にやってきた工程をお話していきます。
この参考サイトさんがなかったら、もしかしたらアプリ作ってないかもしれませんｗ
ここに書いてあることを忠実に実行し、なんとか声をつけることに成功。
ただ、読んでみるとわかるのですが、FastAPIって、main.pyを作らないといけないのですが、参考サイト様ではそれが割愛されてるんですね笑
なのでそこの部分は自分で作らないといけず、何度か挫折しそうになりましたが諦めずにエラーと格闘してたらどうにかなりましたｗ
絶対GPT-4にコードを聞いたほうがいい
ちなみになのですが、FastAPIは、Pythonの中のコードをアプリ化してくれるようなライブラリです。
関連書籍もほとんどなく、参考サイトもあまりないので、実装するにはけっこう大変だと思います。
そのなかで僕はChatGPT3.5という無料のものを途中まで使っていたのですが、のちにおこなうDjangoとの統合で有料の4にし、その違いにマジでびびりｗ、最初っからこれにしておけばどんなに時間が短縮できたかと後悔することに笑
逆をいうと、そこでPythonのライブラリなどの扱いを学べたともいえますが、まだGPT4にしていない方はぜひアップデートをおすすめします（ただしコードを書くような人でなければまだ有料のメリットは少ないと思う）。
Djangoで実際にテストタイプを作る
#Python っていうプログラムの言語で、自分でアプリ作ってみてるんだけど、#chatGPT に声をつけて喋らせてみた🙌
— つむぎゆり (@26UGI) November 2, 2023
ちなみに #Django っていうフレームワークを使用中😆
最終的には、ユーザーが自分でイラストや背景を登録できて、性格も自由に決められて、かつ声もある程度選べるようにしたい！！！！！ pic.twitter.com/m0KJlwY8KF
Djangoというのは、Pythonをベースにした、すごく高機能なウェブサイトを作ってくれるツールです（正確にはフレームワーク）。
InstagramやYouTube、PinterestやNASAもDjangoを採用しているらしく、Pythonがベースだったらコード読みやすいし便利やろ、ってことでDjangoで作ろうと思いたちました。
また、将来的には会員登録なども考えているので、初期設定からデータベースや管理画面がついているのも理由のひとつでしたねｗ
FastAPIの統合で完全に前に進めなくなる
PythonでWebアプリを作るには、FlaskやStreamlitなどほかにも選択肢があるのですが、どちらも簡易的なものなんですね。
なので、先に作っておいたコードをDjango用に書き直す必要性があったんです。
ところが、これがまったくうまくいかないｗ
あとからGPTに聞いたところ、どうやらぜんぶDjangoで作るよりも、ほかのアプリケーション扱いのFastAPIを呼び出すほうが技術的に難しかったらしいです笑
なので、できるだけ参考サイトのものを変えたくはなかったのですが、GPTに「このコードをDjango用に書き換えて」みたいな命令をし、強引にDjango用にしていきましたｗ
Djangoの実装のコツ
この本のなかに、Djangoの説明を軽くしてくれてるところがあり、これを読んで基礎を学びました。
公式チュートリアルか、こういった本でいちど学んでおくだけでだいぶ違うと思います。
GPTに声をつける作業でいちばん苦労したのは、「どんな情報がどこでストップしているかわからない」ことでしたｗ
どういうことかというと、エラーが出ているうちはいいのですが、エラーが出てないのに音声もテキスト（もしくは片方）が表示されない、っていうときがくるんですよ。
このエラーがないのに動いていない、というのが本っ当に困りましたね笑
エラーハンドリング・logging・仮処理でエラー解決
その対抗策なのですが、GPTにエラーハンドリングをしたい、といった命令をしましょう。
すると、理想の処理ができなかった場合、コンソールにエラーが表示できるようにコードを変えてくれます。
また、Pythonにはログを詳しくサーバー内に生成してくれる、loggingというライブラリがあるので、それでどこまで情報が届いているのかを調べるとわかりやすいです。
また、最初からgptの音声を往復で返してくれるようなものではなく、とりあえずユーザーの入力分がサーバーに届いたら「届いてます」といった文章がコンソールに表示されるような、簡易的なものを作るのがおすすめかなと。
最初から複雑なものを作ると、どこを直せばいいか、どこまで成功してるかがわからないんですよね笑
で、僕は以上のことをやったら、「まずクライアント側の設定が間違ってるんだ（jsやhtmlを見直す）」、などとそのときの状態がよくわかりました。
基本的にエラーがないのに動作しないというのは、エンドポイントやディレクトリのURL指定などが間違っている場合が多かったのですが、GPTでも見つけられないものは見つけられないんですよねｗ
ただ、どこでデータの送受信が止まっているかがわかれば、そのあたりのコードを注目すればいいだけなので一気に修正がしやすくなります。
口パクや目パチを実装する
参考サイト：Web Audio APIでリップシンク(もどき)を作ってみた話
主にこのサイト様を参考にしたのですが、実はうまくいかずオリジナルで作りました笑
任意のwavファイルを再生するぶんには上記でも問題なかったと思うのですが、GPTの生成する文章だと難易度が高くなっちゃったんだと思いますｗ
なので、上記の参考サイトさんのようにボリュームの大小で口パク画像をわけるのではなく、音声が再生されている間だけ口パク画像を動かす、といった仕様に妥協してきます。
今回の全体の実装では、返ってくる音声を句読点や改行で区切っているので、この方法だと実際に音声が出ていない間も口が動くので、若干の違和感があるのですが、まあとりあえず動かすのが先かなと笑
ちなみに目パチですが、これはほかと干渉しないので思ったよりは簡単でした。
妥協した点やこれからの改善点
- 音声の生成コードが非同期処理ではなく非同期でおこなわれている
- 音声返答までに3〜7秒くらいはかかるがもっと短くしたい（ただしGPTの返答だけで3秒はかかっている状態）
- Live2Dの実装を当初は考えていたが、ローカルなら可能なもののユーザーが好きに作れるという意味では難易度が高いのでいったん中止に
- 感情分析も導入し表情の変化も考えていたが、すでに力尽きていてこれも後回しに笑
まだまだやりたいことはあるものの、とりあえず実際にアプリをブラウザ上で動かすことが先決なので、いったん見送ることにしましたｗ
Live2Dなのですが、jsでWeb上で動かせるらしく、口パクはできなかったのですが表示まではうまくいきました。（参考サイト：素のJavaScriptだけでLive2Dを使う ～Node.js無し）
ただ、gptの音声をここにつなげるとなると、すでに実装済のコードとは別で作ったほうがいいと思われることなど、さまざまな障壁があるなと思い断念した感じです。
個人的には、近い将来、１枚絵だけで動くようになるようなAIアプリが出てくるのではないかと思っていて（１枚の画像をもとに額や後ろの髪などパーツ分けや差分を書いてくれる）、それに期待したいところかなと（自分で作れ）。
今後の展望：いよいよアプリ化を目指す
軽く本を新しく読んでみて調べたところ、以下のような工程がこれから必要そうです。
- データベースとDjangoを紐付ける
- 管理画面の設定をする
- モデル化をしベースを作る
- ベース部分を完成させる
- 会員登録関係を完成させる
- いよいよデプロイ
…うん、どうすんだこれｗ
あと、ほかのサイトさんをけっこういろいろ見ていたのですが、アプリ化まで説明しているところはなかったんですよ。
まあ調べたキーワードにもよるんでしょうけど、今回思ったのは、ローカルで作るぶんにはわりと聞きかじりの知識でもどうにかなるんだな、と思いましたねｗ
今回のアプリでも、難しいところって結局、ほかの人に使ってもらうための機能を実装するところ、というか。
自分だけのAIを作って動かすぶんにはもうほぼ作業は終わっている（あとはLive2Dにするくらい）ので、これくらいなら趣味でやれそうな範囲な気がします。
余談：複雑なコードでなければもう人間が書く時代ではないかも
ほかにも今回、いろいろと思うことがありました笑
まずはGPTが優秀すぎて、逆にコードを勉強する気が起きなくなるんじゃないかなぁ、と思うことがたびたびｗ
仮に僕にPythonやjsの知識があったとしても、同じことをしてもらうなら圧倒的にGPTのほうが早いんですよ。
なので、これからは本格的に、AIが出してきたものを直していくような時代になっていくんだろうなぁ、と痛感しました。
イラストもなのですが、AIが生成してくれるというのを体験すると、じゃあ絵を描く意味って？ みたいなことになっておかしくないんじゃないかなと。
…話は脱線しましたがｗ、とりあえずテストアプリはできたので、これをなんとかユーザーさんにも使ってもらえるようにしていきたいですね。
今の段階の感触をいうと、絵をゴージャスに動かすことを優先するよりも、もっとプロンプト（GPTへの命令）をしやすいようなインターフェイスにすると、ユーザーさんの没入感が格段に違うような気もしています。
また、かなり先の話になってしまうのですが、このアプリって、１回遊んだらもう満足してしまう可能性もなきにしろあらずなので、ほかのユーザーに自分のモデルを公開したり、長期的に使ってもらえるようなシステムもつけたいところですね。
