注意事項
この記事は、Notion AIに対して
- 問題と解決策の概要
- 例示用のコード
を渡して生成した実験的な記事になります。
作ったサービス
入力した情報を元に、ブログのアウトラインと要点を生成してプレビューしてくれるサービスです。
かなり雑に作っているので、使い勝手がいいとは思いませんが、元々の目的は達成できたので問題ありません。
モチベーション
- Open AIのAPIと連携させて、ほぼ100%でJSONを吐かせる
- Firestore触ってみたい
- Firebase AuthenticationとCloud FunctionsでAPIを楽に作れるのかを確認したい
- Flutter触ってWeb, Mobileのアプリをどれだけ楽に作れるかを試したい
- 他にいくつかのOpen AIのAPIと連携させるサービスを進めているので、それまでにアップしておきたい
概要
このサービスは、入力された「読者像」に対して入力された情報を元にしたブログのアウトラインと要点を生成します。
トップページ
トップページには、最新の投稿一覧、記事投稿フォームの2つ機能があります。
最新の投稿一覧は、自分を含め他の人が投稿した内容の中から最新の投稿を10件取得して表示しています。
記事投稿フォームは、Googleログイン後に使える機能になっています。
想定した読者像と、書きたい内容について入力して、Generateを押してしばらく経過すると生成後の画面に飛びます。
記事詳細
記事詳細では、OpenAIのAPIに問い合わせて出力された情報を元にして、記事のプレビュー、入力情報のMarkdown、出力情報Markdownを表示しています。
Flutterの都合上、本文をうまく選択できないのでテキストフィールドにある情報をコピーできるようにしています。
ハマりどころ
FlutterのUIの組み方について知らないことが多くてUIが作るのが大変
慣れの問題かもしれないですが、結構UIを作るのに手間がかかりました。
正確に言えば、「モックアップ」はあるもののそれをFlutterに落とし込むのに時間がかかったというのが正確です。
Cloud Functionsでの実行時のみにエラーになるケースのデバッグが少し面倒
Cloud Functions上でしか発生しなかったエラーもあり、動作確認が少し面倒でした。
また、修正版をデプロイして動作確認するにもデプロイに少し時間がかかっていたので、少しだけ面倒に感じました。
OpenAIのAPIが遅い
最近は障害などもあった影響もあり、APIのレイテンシがかなり不安定です。
OpenAIのAPIの料金がそこそこ高い
ブログのアウトラインを生成する都合上、消費トークンが多く、割とすぐに料金がかさみます。
OpenAIのAPIが期待している出力形式にならない場合がある
ほぼ100%意図した形式で出力できるようにしているものの、稀に謎の形式で返してくる場合があり困ります。
まとめ
ChatGPT、Flutter、Firebaseを使用してWebサービスを作成しました。
いくつか課題はあるものの、今後も積極的に活用していきたいと思います。
また、今回作ったサービスの仕組みの解説については別の記事に書こうかと思います。
