🌍

[個人開発]英語学習アプリをChatGPT×YouTubeで作った話(技術編)

2023/02/14に公開

Firebase

はじめまして、アプリやWebのエンジニアをしているやまし(@yamashi_jp)と申します。
開発した『langTube』という言語学習アプリを先日iOS・Androidストアで公開することができました！

言語学習アプリのlangTubeについて

スマホやiPadで動画を見ながら英語学習できるアプリを目指して開発しました。
YouTube動画を字幕付きプレイヤーで視聴し、単語や文章をフラッシュカードで保存できます。
結果としてシャドーイングやリスニングなどの勉強に最適な言語学習アプリが完成しました！

機能などの紹介はnoteの方に書いたので、そちらをご覧頂ければと思います！

今回は個人開発の経験や使用技術について書きたいと思います。

OpenAIのAPIを利用しているので、サービス開発する際にどのようにAIを取り入れたのか参考にできるような記事を書きたいと思いました！

技術


言語	Flutter 3.7
状態管理	Riverpod 2系
データベース	FireStore
認証	Firebase Auth
課金	RevenueCat
CI	Codemagic
AIのAPI	OpenAI

OpenAI API

langTubeアプリで単語の例文生成時にはText completionのAPIを単語の画像生成時にはImage generationのAPIを叩いています。

Text completionにはawesome-chatgpt-promptsで他のユーザーがどのようにしてプロンプトと上手く利用するのか思考錯誤の結果がまとまっているので、開発の際に参考にしました。

Image generationのAPIはまだβですが、今回は利用することに決めました。Stable DiffusionのWebAPIはなく、自力でWebサーバーを立てる必要があったからです。

OpenAIを処理しているコードはこちらです。こんなに簡単にAIのパワーを自分のアプリに入れられるのは感動したし、今後の個人開発のサービスにもどんどん取り入れていきたいと感じました。
そしてパラメータをチューニングしたり、promptの文章をチューニングしていく必要があると感じました。

Future<String> getAnswerFromGPT3(String prompt) async {
  final response = await Dio().post(
    "https://api.openai.com/v1/completions",
    data: {
      "model": "text-davinci-003",
      "prompt": prompt,
      "temperature": 0.7,
      "max_tokens": 450,
      "n": 1,
      "stream": false,
      "frequency_penalty": 2.0,
      "presence_penalty": 1.0,
    },
    options: Options(
      headers: {
        "Content-Type": "application/json",
        "Authorization": "Bearer ApiKey_DUMMY",
        "OpenAI-Organization": "org-DUMMY"
      },
    ),
  );
  return response.data["choices"][0]["text"];
}

パラメーター理解にはこの記事が参考になりました。

Text completionのAPIのテスト利用にはChatGPTを
Image generationのAPIのテスト利用にはDALL·Eを利用しました。

AIにかかるお金の問題

AIの利用に関しては利用に他以上にお金がかかります。画像生成に関しては512×512のイメージを生成するのに$0.018(2.3円)、文章生成に関しては1,000文字を生成するのに$0.0200(2.6円) かかってしまいます。料金表はこちら。
個人開発では予算が多く見込めないので、しっかりとUsage limitsを掛けておくことを強くおすすめします。またlangTubeアプリでは利用回数制限をユーザーあたりに1日何回までとかの処理を入れてあります。

どのAIを使うか

OpenAIのGPT-3の中でも「Davinci」「Curie」などのモデルの選択は最新のDavinciを選びましたが、より早い処理を求めたり、価格を抑えたい場合にはCurieでも問題ないかなと思いました。

しかしOpenAIのモデルは2021年までのデータからしか作られていないので、個人的にはGoogleのBardに価格/性能面で期待しています。

また、エンジニアであればOpenAIを使わずにHugging FaceからAIモデルを見つけて自分でAPIを実装するというやり方もあります。

Hugging Faceとは自然言語処理に関連したライブラリの開発や人工知能のコミュニティを運営している企業で、学習済みの機械学習モデルやデータセットが見つけやすいです。

そしてHugging Faceが開発しているtransformersというライブラリを利用し、任意の学習モデルをインポートすることで下記のような学習済みモデルを利用したサービスが開発できます。

from transformers import pipeline

trans = pipeline("translation", model="staka/fugumt-en-ja")
text = """The ChatGPT model is a large language model trained by OpenAI that is capable of generating human-like text."""
trans(text)

Codemagic

アプリストアへのリリースはCodemagicが無料枠で問題ないくらいに使い勝手が良かったです。
去年からアプリのビルドにM1を利用できるようになってから**ビルド時間が50%**になったという記事を見て導入を決めました。

langTubeアプリでもビルド時間が25分→12分に劇的に短くなりました。
そして500分/月の無料枠は変わらないので、かなり魅力的なサービスだと思います。
目測的にはiOSとAndroidのアプリを月に20回以上アプリストアにアップロードしなければ無料枠で運用できます。(2023/2月時点)

RevenueCat

RevenueCatは月額課金の実装で有名なプラットフォームだと思います。月$10,000までは無料できるので、個人開発の場合には到底達しそうにない範囲で利用できます。
また、firebase-integrationの利用も考えましたが、Starterプランからのみ(通常はBasicプラン)のサービスだっため今回は採用を見送りました。

この記事ではRevenuecatの公式ブログでサンプルアプリを使いながらサブスクの実装を解説してくれているので、実装の際には参考になると思います。

Riverpod

アプリの状態の管理には Riverpodを使用しており、ProviderはStateNotifierProviderを利用しています。
また、Riverpod2.0リリース時に合わせて出たriverpod_generatorや今後はNotifierが推奨されているので、今から実装するならばこちらを利用したほうがいいと思います。

これから

今後の開発は最新の言語モデルやAI SaaSをサービスに取り入れていく方針です。
先ほど紹介したHugging Faceから良いライブラリを見つけて、ユーザーとAIが一緒に言語学習に寄り添えるようなアプリを開発していきたいと思います。

せっかく作ったので、よかったらアプリを一度使ってみてください！

今後のリリースや動向はTwitterで報告していきたいと思います。
よければフォローお願いいたします！