きゃらチャットAIを公開するまでにやったことまとめ
これは「テックキャンプ公式コミュニティ Advent Calendar 2023」の8日目の記事です。
はじめに
近年、生成AIというビックウェーブがやってきました。毎日の生成AIに関する世界的な技術革新に驚くばかりです。
わたしも生成AIトレンドを追っているひとりですが、トレンドを追っている中で「AITuber」という存在を知りました。
AITuberとは、AIを用いたバーチャルYoutuberのことを指します。
3DキャラクターとユーザーがYoutube上でコメント欄を通して交流することができます。
架空のAIキャラクター自身が考えた返答が返ってくるってとても面白いしわくわくしますよね！はじめてこの技術に触れたときは感動しました。
そこでわたしも自分でAITuberを作ってみたい！と思いました。が、Youtube配信には事前準備や環境構築がとても大変なのでブラウザ上でAITuberとお話できるアプリを公開してみました。
ブラウザ版AITuberを公開してみた
今回はYoutube配信ではなくて、ブラウザ版AITuber的なアプリケーション「きゃらチャットAI」を公開してみました。
なんと、ブラウザでAIキャラクターと簡単に話せるアプリケーションはすでにオープンソースで存在しています。ピクシブ社のChatVRMというアプリケーションです。
しかし、このアプリケーションは開発者用の機能が多く一般ユーザーに使ってもらうには少し変更が必要でした。
こんなに素晴らしいアプリなのにみんなに使ってもらえないのは非常にもったいない！！！
一般ユーザーにも届けたい！！！
そこで、このアプリケーションの主機能はそのままで、もう少しだけ誰でも使いやすいようにコードを変更したものが「きゃらチャットAI」です。
目的
きゃらチャットAIの目的は「だれでも手軽にAIキャラクターと話すことができる」ことです。
開発でやったこと
元となるChatVRMは開発者向けの機能がついていたので基本的にはその機能を削除しました。やったことを以下紹介していきます。
1.各種APIキーの固定
開発者にとってAPIキーの取得は慣れていると思いますが、一般ユーザーに「OpenAIのAPIキーをここに入れてね」と言って入れるにはかなりハードルが高いです。
そこで、もともとあったAPIキーの入力欄をなくして、コード内に環境変数としてAPIキーを固定しました。
環境変数はデプロイ先のVercelで簡単に安全に管理することができました。
2.会話内容の保持をリロードでリセット
もとのアプリの機能として会話保持機能がありますが、今回はブラウザごとにリセットして会話を始めたいです。
そのために画面をリロードしたら会話内容をリセットする機能を追加しました。
こちらはAI搭載エディターCursorに聞いてすぐに実装できました。
Cursorでのやりとりはこちら
3.キャラクター設定のシステムプロンプトの固定
もとのアプリの機能としてユーザーがシステムプロンプトを書き換えられてキャラクター設定できる機能がありましたが、誰でもお手軽に話せるという観点からキャラクター設定をデフォルトの設定のものを固定しました。
4.オリジナル3Dキャラクターの作成
AITuberをメインにしたアプリには「この子と話したい！」と思えるような魅力的なキャラクターの存在が不可欠です。
そこで、Vroid Studioというアプリでみんなから愛されるようなキャラクターを作ってみました。
ちょっぴり控えめなお嬢様の設定です。個人的にセーラームーンが大好きなのでちびうさをイメージしました。ハートのくせ毛もかわいい💕
5.Canvaで装飾の差し替え
オリジナル感を出すために背景を変えてみました。この子のお部屋に遊びに来たという設定で選びました。
こちらの背景はCanvaというアプリで作成しました。
いざ公開
アプリケーションはTypescriptという言語で書かれているため、Vercelを使うと環境設定をすることなくGithubと接続するだけでデプロイすることができます。
デプロイはひとつもコケずに超快適でした。Githubへpushすると自動デプロイする設定にしたのでとても更新性が高いです。
Vercelでのデプロイは以下に詳しいです。
きゃらチャットAIの反響
エンジニアではない一般ユーザーの知人にきゃらチャットAIを紹介したらとても喜ばれました！
以下、コメントを紹介します。
かわいいので、これからはこちらでお話ししてみようと思います！笑
その言葉最高に嬉しいです！
レス早くてびっくり
日本語流暢だと思ったんですが、何かいじったんですか？？
システムプロンプトでキャラクター設定できるってもっと普及したいですね！
かわいいいいいいいいいいいい
天才ですね！！！！！
かわいいキャラクター作れて嬉しい！！！
みんな優しい世界😆
まとめ
オープンソースのAIチャットアプリを「少し変えただけ」のアプリケーションを作って公開してみました。
エンジニア目線では「少し変えただけ」のように見えますが、一般ユーザー目線では「なんかすごいアプリ！！！」という反応をいただきました。ChatVRMの素晴らしさが伝わって嬉しいですね！
内部の仕組み的には大したことない変更でも、ユーザーに最高の体験を提供することが一番大切だとアプリの公開を経験して勉強になりました。
ユーザー目線で嬉しいことができるように、今後も個人開発を続けていきたいと思います。
ここまで読んでいただいてありがとうございました！
きゃらチャットAIのGithubはこちら
Discussion