🤖

Google Cloud で生成 AI アプリケーションを作ろう!パート 4 : LLM を活用した Web アプリを英語学習に役立てる

2023/08/16に公開

はじめに

このパートでは、大規模言語モデル(LLM)を利用して、自分が書いた英語の文章について、文法の誤りを訂正してもらう、あるいは、より洗練された表現を教えてもらうと言った、英語の学習に役立つアプリケーションを作ります。パート 3 までは、Vertex AI Workbench のノートブックから言語モデルの API を呼び出すだけでしたが、今回は、実際に動作する Web アプリケーションとして実装する例を紹介します。

具体的には、ノートブックで基本的な動作を確認した上で、同じ仕組みを Web アプリケーションとして Google Cloud にデプロイするところまで進めます。Google Cloud に Web アプリケーションをデプロイする際は、フロントエンド部分に Firebase Hosting、バックエンド部分に Cloud Run を使用します。いずれもフルマネージドサービスで、インフラの管理を行う事なく簡単に Web アプリケーションがデプロイできます。

Vertex AI Workbench でプロトタイピング

プロトタイピング環境の準備

まずは、Vertex AI Workbench の環境を用意して、新しいノートブックを開きます。具体的な手順は、「パート 1 : 生成 AI ソリューションを使うための基本的なセットアップ」を参考にしてください。

新しいノートブックを開いたら、コード用のセルを追加しながらコードを順番に実行していきます。

はじめに、クライアントライブラリーのモジュールをインポートして、クライアントオブジェクトを取得します。コード用のセルを追加して、次のコードを実行します。

from vertexai.preview.language_models import TextGenerationModel
generation_model = TextGenerationModel.from_pretrained('text-bison@001')

そして、言語モデルに質問を投げて、回答を得る関数を定義します。

def show_answer(prompt):
    answer = generation_model.predict(
        prompt, temperature=0.2, max_output_tokens=1024,
        top_k=40, top_p=0.8).text
    print(answer)

このあとは、言語モデルにさまざまな質問を投げかけて、今回のゴールである英語の学習に役立つ使い方を探していきます。

文法の誤りを訂正する

自分が書いた英語の文章について、文法の誤りを訂正した正しい文章を教えてもらえれば、英語の勉強に役立ちそうです。そこで、次のような質問をしてみます。

prompt = """
convert the following text into grammatically correct one.
text: I go to school yesterday. I eat apple for lunch. I like to eat apple.
"""
show_answer(prompt)

変数 prompt に入力したテキストの2行目(text: 以降)にある例文には、文法的な誤りがありますが、これを訂正してもらおうというわけです。これを実行すると次の様な回答が得られます。

I went to school yesterday. I ate an apple for lunch. I like to eat apples.

期待通りの結果が得られました。これは実際のアプリケーションとして使えそうです。

より洗練された表現を教えてもらう

先ほどの例では、文法の間違いはなくなりましたが、ネイティブスピーカーが書いた自然な英文とは言えなさそうです。せっかくなので、自然言語モデルに、より洗練された表現も教えてもらいましょう。より自然な英文の例を 3 つ作ってもらうために、次のように質問してみます。

prompt = """
convert the following text into three examples of more sophisticated and grammatically correct texts written by a professional writer.
text: I go to school yesterday. I eat apple for lunch. I like to eat apple.
"""
show_answer(prompt)

実行結果は次の様になります。

1. Yesterday, I went to school and had an apple for lunch. I enjoy eating apples.
2. I enjoyed a delicious apple for lunch yesterday at school.
3. Yesterday, I had the pleasure of enjoying an apple for lunch at school.

こちらも期待通りの結果が得られました。ただし、3 つの例が番号付きのリストとして返ってきた点が少し気になります。この結果をアプリケーションで処理することを考えると、- などの特定の記号を先頭につけた方がよいかも知れません。自然言語モデルから得られる出力のフォーマットを調整するには、出力例を与えるとうまくいきます。質問内容を次の様に変えてみましょう。

prompt = """
convert the following text into three examples of more sophisticated and grammatically correct texts written by a professional writer. Here's an example.

text: I went to school yesterday. I ate an apple for lunch. I like to eat apples.
answer:
- Yesterday, I went to school and had an apple for lunch. I enjoy eating apples.
- I enjoyed a delicious apple for lunch yesterday at school.
- Yesterday, I had the pleasure of enjoying an apple for lunch at school.

Here's the text I want your answer to.

text: Hi, how are you? I send picture us yesterday. I think you like it.
answer:
"""
show_answer(prompt)

ここでは、英文(text: 以下)と回答(answer: 以下)の具体例を先に与えて、その後、さらに新しい英文を示しています。「パート 3 : PaLM API の利用例 2 〜 メールを分類する」で紹介した Few-shot プロンプティングのテクニックです。

これにより、2 つ目の英文に対する回答が最初の例と同じフォーマットで得られます。

- Hello, how are you doing? I sent you a picture of us yesterday. I hope you enjoyed it.
- Greetings, I hope you are doing well. I sent you a picture of us yesterday. I believe you will find it enjoyable.
- Hello, I hope this message finds you well. I sent you a picture of us yesterday. I believe you will find it to your liking.

英文の改善について、この他にもいろいろなアドバイスを自然言語モデルからもらえそうですが、プロトタイピングはいったんここまでにします。文法の訂正と、より洗練された例文を教えてもらう機能を Web アプリケーションとして実装することにしましょう。

完成済みのコードを GitHub に用意してありますので、これを利用して、実際に動作する Web アプリケーションとしてデプロイしていきます。

Web アプリケーションのデプロイ

この作業は、Cloud Shell のコマンドターミナルから実施します。クラウドコンソールの右上にある下図のボタンを押して、Cloud Shell のコマンドターミナルを開きます。

バックエンドサービスのデプロイ

はじめに、自然言語モデルを呼び出すバックエンドサービスを Cloud Run にデプロイします。Cloud Shell のコマンドターミナルから次のコマンドを実行します。[Project ID] の部分は、実際に使用しているプロジェクト ID に置き換えてください。

PROJECT_ID=[Project ID]
gcloud config set project $PROJECT_ID
gcloud services enable cloudbuild.googleapis.com run.googleapis.com
cd $HOME
git clone https://github.com/google-cloud-japan/sa-ml-workshop

ここでは、Cloud Run へのデプロイに必要となる、Cloud Build と Cloud Run の API を有効化した後、アプリケーションのソースを GitHub からクローンしています。バックエンドサービス実装のメインパートは、ファイル grammar_service_app/backend/main.py になりますが、さきほどノートブックで実装した内容を REST API から呼び出せる様に作ってあります。

次のコマンドでコンテナイメージをビルドして、Cloud Run の環境にデプロイします。

cd $HOME/sa-ml-workshop/blog/LLM-Grammar-Service-APP/backend
gcloud builds submit --tag gcr.io/$PROJECT_ID/grammar-service
gcloud run deploy grammar-service \
  --image gcr.io/$PROJECT_ID/grammar-service \
  --platform=managed --region=us-central1 \
  --allow-unauthenticated

動作確認のために、Cloud Shell から直接 API を呼び出してみます。

SERVICE_NAME="grammar-service"
SERVICE_URL=$(gcloud run services list --platform managed \
  --format="table[no-heading](URL)" --filter="metadata.name:${SERVICE_NAME}")
curl -X POST -H "Authorization: Bearer $(gcloud auth print-identity-token)" \
  -H "Content-Type: application/json" \
  -d '{"text":"I go to school yesterday. I eat apple for lunch. I like to eat apple."}' \
  -s ${SERVICE_URL}/grammar-service/api/v1/correction | jq .

次の様な結果が返れば、バックエンドサービスは正しく動作しています。

{
  "corrected": "I went to school yesterday. I ate an apple for lunch. I like to eat apples.",
  "samples": "- Yesterday, I went to school and had an apple for lunch. I enjoy eating apples.\n- I enjoyed a delicious apple for lunch yesterday at school.\n- Yesterday, I had the pleasure of enjoying an apple for lunch at school."
}

あとは、エンドユーザーが入力したテキストをこのバックエンドに送信する Web フロントエンドを用意すれば、Web アプリケーションが完成します。

フロントエンド・アプリケーションのデプロイ

先ほどのバックエンドサービスを利用した Web アプリケーションを Firebase Hosting の環境にデプロイします。

はじめに、次の手順で、Firebase Hosting に使用中のプロジェクトを登録します。

  • Firebase コンソールにブラウザからアクセスします。

  • [プロジェクトを作成]をクリックします。

  • 「プロジェクトの作成 (手順 1/3)」では、「プロジェクト名を入力」のところから使用中のプロジェクトを選択して、[続行]をクリックします。(はじめて Firebase を使用する場合は、「規約への同意」と「利用目的」のチェックボックスが表示されるので、これらをチェックしてください。)

  • 料金確認画面が表示された場合は、[プランを確認]をクリックします。

  • 「プロジェクトの作成 (手順 2/4)」では、そのまま、[続行]をクリックします。

  • 「プロジェクトの作成 (手順 3/3)」では、「このプロジェクトで Google アナリティクスを有効にする」をオフにし、[Firebase を追加]をクリックします。

  • 「新しいプロジェクトの準備ができました」と表示されたら、[続行]をクリックします。

以上で登録は完了です。

続いて、Cloud Shell のコマンドターミナルに戻って、次のコマンドで、Firebase Hosting の初期設定を行います。

cd $HOME/sa-ml-workshop/blog/LLM-Grammar-Service-APP
firebase init hosting -P $PROJECT_ID

このコマンドを実行すると、いくつかの質問が表示されるので、次のように回答していきます。はじめの質問には、build と入力する点に注意してください。

What do you want to use as your public directory? (public) build
Configure as a single-page app (rewrite all urls to /index.html)? N
Set up automatic builds and deploys with GitHub? N

カレントディレクトリーにできた設定ファイル firebase.json の内容を次のように書き換えます。

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "/grammar-service/**",
        "run": {
          "serviceId": "grammar-service",
          "region": "us-central1"
        }
      }
    ]
  }
}

この設定により、Firebase Hosting のゲートウェイが URL https://[Project ID].web.app/grammar-service/api/v1/correction で受信したリクエストを Cloud Run のバックエンドに転送するようになります。

また、ファイル src/App.js の先頭付近にある、下記の行の [Project ID] の部分を実際のプロジェクト ID に書き換えます。

const projectId = "[Project ID]";

最後に、次のコマンドでアプリケーションをビルドして、Firebase Hosting の環境にデプロイします。

cd $HOME/sa-ml-workshop/blog/LLM-Grammar-Service-APP
yarn install
yarn build
firebase deploy

Web アプリケーションの動作確認

デプロイしたアプリケーションは、URL https://[Project ID].web.app/ からアクセスします。([Project ID] の部分は実際のプロジェクト ID に置き換えます。)次の例の様に、テキストボックスに英語の文章を入力して、[Correct me!]のボタンをクリックすると、文法の誤りを訂正した結果と、より洗練された表現の例が画面に表示されます。

なお、この Web アプリケーションは、インターネットに公開された状態になっており、誰でも自由にアクセスできます。安全のため、動作確認が終わったら、次のコマンドでアプリケーションの公開を停止しておいてください。

cd $HOME/sa-ml-workshop/blog/LLM-Grammar-Service-APP
firebase hosting:disable

まとめ

今回は、大規模言語モデル(LLM)を利用して、英語学習に役立つ Web アプリケーションをデプロイしました。Google Cloud を利用すると、アプリケーションのアイデアを試すプロトタイピングから、実際に Web アプリケーションとしてデプロイするまでの作業が簡単にできることがわかりました。実際の業務で利用する場合は、ユーザー認証などの機能を付け加える必要がありますが、それらも Firebase Hosting の機能で実現できます。

Google Cloud Japan

Discussion