【個人開発】永遠に何でも話せるお嬢様会話AIを作ってみた（TypeScript,Python）


個人開発で **[会話AIサービス Eveki](https://eveki.net)** を作りました。架空のキャラクター[^1]を再現したAIと自然な会話が楽しめることが特徴のサービスです。今回はその第一号として、**お嬢様AI**の公開を行いました。[まずは実物をお試しください。](https://eveki.net/demo)

![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/713689/dd72101a-5c95-7060-ac49-8cdaa5ae4eff.gif)

# サービスの概要

## AIとの会話

基本的には**メッセージを入力するだけ**です。まるで人間のようにお嬢様言葉で会話を行います。今日の予定から人生の意味まで、どんな話題でも返答[^2]し文脈に沿って話を進めることが可能です。会話の内容は下のボタンからTwitterに共有できます。

## AIの設定

名前は「真流華レイテ」[^3]で、名字の読み方は『まるが』です。趣味などその他のプロフィールは
本人に聞けば答えてくれるはずです。なお今回はイラストもAIが生成したものを使ってみました。

# システム構成

![qiita.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/713689/7e182935-7674-2b32-d572-c514645b33ae.jpeg)

# フロントエンド

## フレームワーク

フレームワークとして **Next.js**と**React**を使用しました。言語は**TypeScript**を中心に使用しています。Web開発はこれが最初で不慣れなところもあったのですが、とにかく新しい技術を取り入れてみたかったのでこのような形にしました。

Next.jsは公式のチュートリアルで勉強しました。TypeScriptにも触れているので、所々わからない点を調べていけばこれだけでもかなりできることは増えると思います。

## 使用ライブラリ

データ処理に[**Axios**](https://axios-http.com)を使用しています。経験の浅い自分でもTypescriptと連携させて使えるほどには情報も充実しているのでおすすめです。

またデザイン面では[**MUI**](https://mui.com)を採用しました。他にも選択肢はあると思うのですが、元々モバイルアプリ開発に慣れていたのもあり、それに近い感覚や見た目を持つこちらを選びました。Material Iconとの連携も簡単なのでデザインにかける時間を大幅に短縮できると思います。

# バックエンド

## 言語・フレームワーク

Python3で動作させています。今回もっとも力を入れたのは**処理の高速化**です。

会話というアプリの名目上、入力に対する返信に時間をかけることはできません。そのためモデルの量子化など[^4]できるだけ工夫を施しています。

```Python
#量子化の例
import torch
model = torch.quantization.quantize_dynamic(model, 
											{torch.nn.Linear}, 
											dtype=torch.qint8)
```


会話の長さや内容にもよりますが、現状ほぼ10秒以内には反応が返ってくるかと思います。

## 使用ライブラリ

今回は[**Gradio**](https://gradio.app)を使用しました。これを使えば簡単に機械学習用のデモやアプリを構築することができます。設定次第では画像など多様なデータを扱うことも可能です。Gradioを用いることでバックエンド側の実装は短時間で完了しました。

これで構築したアプリはそのままiFrameで埋め込みことも可能なので、ブログやポートフォリオに取り入れるのもおすすめです。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="wvjyBPM" data-user="izumo092" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/izumo092/pen/wvjyBPM">
  Gradio-Sample</a> by opopopopop (<a href="https://codepen.io/izumo092">@izumo092</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



# 今後の展望・課題

## デモの追加

まずは最小限でも公開を優先したためデモは現時点では『真流華レイテ』ひとりです。しかし既に準備しているAIもいくつかいるので、そちらも仲間に加えていきたいと思っています。

## カスタマイズ機能

最終的にはユーザーが自ら設定や口調をカスタマイズし、自分だけのAIを持てるようにしたいと考えています。そのためにデータベースや認証の導入を進めています。

## デプロイ先

現在はVercelをデプロイ先に選んでいますが、上のように計画を広げていく上ではもう少し検討する必要があるかもしれません。解析など他との連携も予定しているのでFirebase Hostingなども考えています。

# さいごに

AIは日常生活に普及こそしたものの、人間の作業を肩代わりする存在という側面が強くなってしまい、昔のSF映画の人口知能のような愉快な夢想はかえって難しくなったような気がします。

『真流華レイテ』は株価予測もできませんしイラスト生成もままならないですが、あなたの話を聞くことはできます。このAIがちょっとした楽しみを与えられたら幸いです。

いねやリツイートなど頂けるととても励みになります。もし疑問点や要望などあれば以下のフォームか、SNSのDMなどをお使いください。よろしくお願いいたします。

- [お問い合わせフォーム](https://forms.gle/QPC2vD73Q51otk5T8)
- [Instagram](https://www.instagram.com)
- [note](https://note.com/izumo092)

[^1]: うまく設定すれば歴史上の人物などもある程度再現できますが、それらの例は今後のデモで追加する予定です。

[^2]: 物議を醸すような話題や性的な内容はなるべく避けるようになっています。またそのような内容をユーザー側から入力されても話題を逸らすはずです。

[^3]: 名前の由来は『ファウスト』のマルガレーテです。あちらと同じく、名家のご令嬢というより素朴で敬虔な少女のイメージです。

[^4]: 本来なら速度と精度の関係などをまとめたいところですが、会話に完全な正解などはないため評価がしにくくなっています。あくまで体感としてですが、処理を早くする工夫を行なってもほとんど精度は落ちないように思います。