AIに褒めてもらって自己肯定感を上げるアプリを作った

クソアプリ Advent Calendar 2022 12日目の記事です。

https://qiita.com/advent-calendar/2022/kuso-app

こんにちは！
鹿児島でモバイルアプリエンジニアをしているくすたんです。

今回始めて「クソアプリ Advent Calendar」に参加します。
「こんなのクソアプリじゃないか！」というお声は称賛の言葉と受け取るので、あらかじめご注意ください。

とりあえず遊ぶ

以下のURLから試すことができます。

https://aino-homenobi.kusutan.com/

AIノほめのびくんとは

AIノほめのびくん(あいのほめのびくん)は、OpenAIのGPT-3を親にして生まれたすごい子です。
人間の悩みに寄り添って、人を褒めて伸ばしてくれます。

しかし、ほめのびくんだってAIです(？)
たまに不機嫌になって、AIノスパルタくんになってしまうこともあります。

スマホでもほめのびくんとやり取りできます。
(モザイクかけてますが、結構過激な返事も返ってきます。このレスの仕方はDVくんでは…)

データ自体は「AIノほめのびくん」を動かしているサーバ内には保存していません。
ただし、LocalStorage内には保存しているので、ほめのびくんとのやり取りは見返すことが可能です。

もちろん、ほめのびくんとのやり取りを削除することもできます。

実装について

利用した技術のうち特徴的なものを以下に記載します。

• Flutter Web
• Firebase(Hosting, Functions)
• OpenAI(GPT-3)

Flutter Web

CSSが苦手なので、FlutterでUIを組みました。

https://flutter.dev/multi-platform/web

Flutter製でWeb専用のpackageを使っておらず、Web用にビルドしているだけなので、ネイティブアプリとしてもリリースできます。
しかし、Appleから「4.2 Minimum Functionality」くらいそうなのでやめておきます。
Appleから正式にクソアプリ認定してもらえるならレビュー出す価値あるかも🤔

ネイティブアプリとしてはリリース予定はないですが、そのままでもPWAとしては使えるので、気に入った人はぜひインストールしてみてください！

Firebase(Hosting, Functions)

Flutter Webでビルドしたアプリのホスティング用とOpenAIへのリクエスト用にFunctionsを利用しています。
特段特別な構成はありません。

https://firebase.google.com/

https://firebase.google.com/docs/hosting

https://firebase.google.com/docs/functions

OpenAI(GPT-3)

やっていることはFirebase FunctionsからNodeのpackage経由でOpenAIのapiを呼び出しているだけです。
openai packageありがたや🙏

https://www.npmjs.com/package/openai

https://beta.openai.com/docs/introduction

実際のコード

GitHubにコードをアップしているので、細かい実装が気になる人はそちらをご覧ください。

https://github.com/qst-exe/aino-homenobi

知見

「OpenAIのGPT-3すごい！」というのはみんな知ってると思うので、それ以外のことを書いていきます。
(知らない人はぜひAIノほめのびくんで遊んでみてね)

Shared preferencesのpackageすごく便利

今までもネイティブアプリでローカルに簡単なデータを保存するときには、Shared preferencesのpackageを使っていました。

https://pub.dev/packages/shared_preferences

しかしながら、今回はWeb版なので、LocalStorageに保存したい…。
そう考えて方法を色々調べていたら、Shared preferencesのpackageがWeb版に対応していてLocalStorageに保存できるではないですか！

とても重宝するので、今後も使っていきたいです。

Flutter WebのTextFieldは日本語入力に難がある

改善されたかなと思って使ってみましたが、まだ日本語入力に難があるようです。
可能な限り調整を加えてみましたが、一部端末では日本語入力に不便するかもしれません。

もし、日本語入力をしやすくする実装をご存知の人がいたらぜひコメントで教えていただけると嬉しいです！

アニメーションならAnimated Text Kit

「AIノほめのびくんが返信中…」というアニメーションを作るさいに使ったpackageです。

https://pub.dev/packages/animated_text_kit

Functionsからのレスポンスが返ってくるまでのローディングUIとして活用しました。
サンプルを見たところ、他にも使えそうなアニメーションがたくさんあるので、他プロジェクトでも積極的に使っていきたいです。

おまけ

大本のChatGPTにクソアプリを作ってくれないか質問してみましたが、クソアプリは作ってくれませんでした。

クソアプリは人類の叡智で、AIがクソアプリを作成できるようになったらシンギュラリティが起こったと言えるのでしょう。

単純にクソアプリが公序良俗に反すると受け取られただけで、言い方を変えれば作ってくれるはず

最後に

以上のような方法でAIノほめのびくんを開発しました。
Flutter Webに関する知見が薄いので、気になることがあればぜひ教えて下さい！
元気があればネイティブアプリの対応等もやっていこうと思ってます。

最後まで読んでいただいてありがとうございました！
よろしければ、いいね！やコメントをしていただけるととっても嬉しいです！！