App Inventor版 ChatGPTと話そう！(その１)

ChatGPT (GPT-4)を使って作ろうとした、ChatGPTに入力したプロンプトを送って返答を画面に表示するApp Inventorアプリ「ChatGPTと話そう！(その１)」です。

ChatGPT (GPT-4)は万能ではありません。間違ったことを教えることもあるので、その都度修正してもらう必要があります。ここでは結局ChatGPT (GPT-4)はApp Inventorアプリを作れなかったので、人間が作りました。どうもGPT-4はApp Inventorの知識はあまりないようですね。

GPT-4とのやり取り

プロンプト　「iPhone版 ChatGPTと話そう！（その１）」とほぼ同じものです

次の機能を持つアンドロイドアプリをApp Inventorで作る方法をステップ１からステップ３にしたがって教えてください。App Inventorの初心者でもわかるように詳しくお願いします。

機能：
1. 入力したテキストをChatGPTに送信。モデルはgpt-3.5-turbo
2. 戻ってきた返信を画面に表示

ステップ１：細かい機能の説明
ステップ２：作り方の概略
ステップ３：初めての人でもわかるような詳しい作り方。ChatGPTとの通信部分はAPIのことを知らない人にもわかるように説明してください

返答

ステップ１：細かい機能の説明 このアンドロイドアプリでは、次の機能があります。

  1. ユーザーがテキストを入力できるテキストボックス

  2. テキストが入力された後、送信ボタンをクリックすると、入力されたテキストがChatGPT（gpt-3.5-turbo）に送信される

  3. ChatGPTから返信を受け取り、画面上に表示する

ステップ２：作り方の概略

  1. MIT App Inventorで新しいプロジェクトを作成

  2. 必要なコンポーネントをデザイナー画面に配置

  3. 各コンポーネントをブロックエディタで関連付ける

  4. ChatGPT APIに接続するための設定

ステップ３：初めての人でもわかるような詳しい作り方

  • MIT App Inventorのウェブサイト（http://appinventor.mit.edu/）にアクセスし、新しいプロジェクトを作成します。

  • デザイナー画面で以下のコンポーネントを配置します。

    • テキストボックス（入力）

    • ボタン（送信ボタン）

    • ラベル（返信の表示）

    • Web コンポーネント（APIと通信）

  • ブロックエディタで以下の手順に従ってブロックを作成します。
    a. 送信ボタンがクリックされたら、入力されたテキストを取得し、Web コンポーネントでOpenAIのAPIに送信するブロックを作成します。
    b. APIからの返信を受け取ったら、返信の内容をラベルに表示するブロックを作成します

  • ChatGPT APIに接続するための設定を行います。
    a. OpenAIのウェブサイト（https://beta.openai.com/signup/）でAPIキーを取得します。
    b. App Inventorのデザイナー画面で、Web コンポーネントを選択し、PropertiesパネルでURLを設定します。URLは「https://api.openai.com/v1/engines/gpt-3.5-turbo/completions」となります。
    c. ブロックエディタで、Web コンポーネントの「set Web.Headers」ブロックを使用して、APIキーを含むヘッダー情報を設定します。ヘッダー情報は次のようになります。

  • “Content-Type": “application/json"

  • “Authorization": “Bearer あなたのAPIキー"
    d. 送信ボタンがクリックされたときのブロックで、入力されたテキストをChatGPT APIに送信するように設定します。具体的には、「set Web.Body」ブロックを使用して、送信するテキストを次のようなJSON形式に設定します。
    – {“prompt": “ここに入力されたテキスト", “max_tokens": 60}
    e. 'Web.GotText’イベントのブロックで、APIからの返信（responseContent）を取得し、ラベルに表示するように設定します。

これらの手順を踏むことで、入力されたテキストをChatGPTに送信し、返信を画面に表示するアンドロイドアプリを作成できます。

ただし、App Inventorは直接的な外部APIとの連携に制限があります。そのため、上記の方法は理想的なシナリオを示していますが、実際にはOpenAIのAPIと直接通信するためには、サーバー側のスクリプト（PHP, Node.js, Pythonなど）が必要となります。そのスクリプトはOpenAIのAPIを呼び出し、結果をApp Inventorに返します。

App Inventorが直接APIを呼び出すことが難しい場合は、Firebaseや他のクラウドサービスを使用して中間サーバーを作成し、そこからOpenAIのAPIを呼び出す方法もあります。このアプローチを取る場合は、その実装は少し複雑になりますが、一般的なプログラミング知識とFirebaseまたは選択したクラウドサービスの基本的な理解があれば実現可能です。

ChatGPTはApp Inventor日本語版のことは知らないようで「」の中が英語になっているので日本語化プロジェクトで言語を英語に切り替えて作ってみます。

3.a.がよくわからないので聞いてみます。

プロンプト

これわからない「Web コンポーネントでOpenAIのAPIに送信するブロックを作成します。」

残りのコンテンツを表示するにはログインする必要がありますどうぞ . 会員ではないですか ? 入会のご案内

ChatGPT,チュートリアル