ChatGPTを使うアプリ

MITから2023年6月13日に公開されたnb193には実験中のカテゴリーにChatBotとImageBotという2つのコンポーネントが追加されていて、OpenAIの生成AIにアクセスできるようになっています。日本語化プロジェクトではnb193の日本語版を作る作業をしていましたが、ソースコードを読んだところ、これらのコンポーネントには以下の問題があることがわかりました。

  • これらコンポーネントはMITのサーバー経由でOpenAIのAPIキーを使わなくても生成AIが使えるようになっており（ただしかなりきつい制限あり）MIT以外のApp InventorからはこのMITのサーバーを利用できない
  • これらコンポーネントでは利用者が取得したOpenAIのAPIキーを使用することもできるようになっているが、その場合でもMITのサーバーにアクセスする。利用者はOpenAIのAPIキーをMITに取られる危険性がある。

これらの事実から日本語化プロジェクトはOpenAIのGPT-4を使って独自に開発していたApp Inventor版「ChatGPTと話そう（その１）」アプリの作り方のチュートリアルを公開し、日本の利用者の皆さんがOpenAIの生成AIにアクセスできるようにすることにしました。このコードは直接OpenAIにAPIキーとプロンプトをSSL暗号化を使って送信するのでAPIキーが途中で取られる心配はありません。

せっかくなのでこのチュートリアルの文章はGPT-4に書いてもらってから加筆・修正しました。細かいところまではGPT-4はうまくは書けないですが大筋は良さそうです。チュートリアルの書いてもらい方はこちらです。

OpenAIのAPIキーの取り方は色々なところで説明があります。例えばこちらなど。

このアプリのaiaファイルはこのリンクからダウンロードできます。

ステップ1: 新しいプロジェクトを開始する

  1. App Inventorアカウントにログインします。
  2. “新しいプロジェクトを開始する"をクリックし、名前を付けます（例："ChatGPT"）。

ステップ2: スクリーンの設定

  1. コンポーネントセクションで"Screen1″をクリックします。
  2. 右側のプロパティパネルで、タイトルを"ChatGPT"に変更します。

ステップ3: コンポーネントの追加

左側のパレットパネルから、以下のコンポーネントを追加します：

  1. ユーザーインターフェース: テキストボックス（テキストボックス1）、ボタン（ボタン1）、二つのラベル（それぞれラベル1とラベル2）。
  2. 接続: Web（Web1）。

ステップ4: コンポーネントの設定

  1. テキストボックス1: “ヒント"を"プロンプトを入れてください"に設定し、幅を画面いっぱいに表示にします。
  2. ボタン1: “テキスト"を"送信"に設定します。
  3. ラベル1: “テキスト"を"プロンプト"に設定します。
  4. ラベル2: “テキスト"を"返答"に設定します。

ステップ5: 変数の定義

  1. ブロック編集で"変数"をクリックし、"グローバル変数を次の値で初期化"をクリックします。
  2. 変数名を"API_KEY"とし、その値をあなたのOpenAI APIキーに設定します。ここではダミーのAPIキーを入れてあります。

ステップ6: ボタン1.クリックされたらイベントのブロックを定義する

ボタン1がクリックされると、テキストボックス1に入力されたテキストでGPT-3 APIを呼び出す必要があります。

  1. “いつもボタン１クリックされたら実行する"ブロックをドラッグします。
  2. このブロックに、" 設定Web1.URLを"ブロックを追加し、その値を"https://api.openai.com/v1/engines/davinci-codex/completions"に設定します。
  3. “設定Web1.リクエストヘッダを"ブロックを追加し、その値を"リストを作成"ブロックで作成したリストに設定します。リストには"Authorization"と"Bearer “+API_KEY、"Content-Type"と"application/json"を追加します。詳しくは下の図を見てください。
  4. “呼び出すWeb1.テキストをPost"ブロックを追加し、そのテキストを以下のJSON文字列に設定します。このブロックをいつもボタン１クリックされたら実行する"ブロックに入れます。

ステップ7: いつもWeb1.テキストに受け取ったらイベントのブロックを定義する

“いつもWeb1.テキストに受け取ったら"イベントは、"呼び出すWeb1.テキストをPost"が完了したときに発生します。このイベントは、APIからのレスポンスを処理するために使用されます。

  1. “いつもWeb1.テキストに受け取ったら"ブロックをドラッグします。
  2. “設定ラベル2.テキストを"ブロックを追加し、その値をOpenAIから受け取ったJSONデータを"呼び出すWeb1.Jsonデコード"を使ってdictinaryに変換した後、連想配列(dictionary)にある"ペアの値を取得：キーパス"ブロックを使って返答を取り出します。[と]を空白に置換しないとWeb1.Jsonデコードでうまく処理できませんでした。
  3. “設定ラベル1.テキストを"ブロックを追加しテキストボックス1のテキストを設定します。
  4. “設定テキストボックス1.テキストを"ブロックを追加し空白テキストを設定します。

このアプリはAPIキーを入れればこのままで動きますが、API呼び出しの詳細に興味のある方は以下のページを参考にしてください。

https://platform.openai.com/docs/api-reference/making-requests

チュートリアル