ChatGPT,チュートリアル

前準備

  1. App Inventor日本語版でプロジェクトメニューから「選択したプロジェクトをローカルコンピュータにエクスポート(.aia)」を実行し、ローカルコンピュータに.aiaファイルをダウンロードします。
  2. ローカルコンピュータでダウンロードしたファイルの.aiaを.zipに変更し、このファイルを解凍します。
  3. フォルダーの中にScreen1.bky, Screen1.scm, project.propertiesの三つのファイルがあります。これらをGPT-4に送り込みます。

GPT-4とのやり取り

プロンプト

ソースコードは長いので省略しますが実際はファイル名の後にコピペしています。日本語はあまり得意ではないので英語でやりとりして最後に日本語に翻訳してもらいます。ここで使ったのはChatGPTアプリのファイルです。

Do you understand what the App Inventor project files doing below?

project.properties:

Screen1.scm:

Screen1.bky:

返答

Yes, these project files appear to be part of an app created using the MIT App Inventor, a visual programming environment that allows users to create mobile apps for Android.

Let’s briefly explain what each of the file is doing:

  • project.properties: This is a properties file for the project that contains information about the source code, app name, default file scope, main form, color scheme, sizing, assets location, theme, version name and version code. This file also contains some other properties such as if the app uses the device’s location or not.
  • Screen1.scm: This file defines the components on the “Screen1" of the app. It appears to have one “TextBox" (named TextBox1) for user input, a “Button" (Button1) to submit the input, a “Label" (Label3) to display the inputted prompt, another “Label" (Label2) to display the response, and a “Web" component (Web1) for making web requests to OpenAI’s API.
  • Screen1.bky: This is the logic of the app written in Blockly, a web-based, graphical programming language.
    • When the “Button1" is clicked, it checks if the TextBox is not empty. If it’s not, the program sets the request headers of the Web component, including the Authorization header using a global variable API_KEY. It then makes a POST request to the OpenAI’s API endpoint (https://api.openai.com/v1/chat/completions) with a JSON body including the model to use (“gpt-3.5-turbo") and the user’s input message.
    • When the Web component receives the text from the OpenAI’s API, it parses the JSON response to retrieve the response message from the model and displays it in the “Label2". It also updates the “Label3" to show the user’s inputted prompt and clears the TextBox for the next input.

In summary, this app allows a user to enter a prompt in the TextBox. Upon pressing the Button, the app makes a POST request to the OpenAI’s API, using the GPT-3.5-turbo model, to generate a response to the prompt. The prompt and the response are then displayed on the screen.

正しく理解しているようなので、チュートリアルを書いてもらいます。

プロンプト

Can you write a tutorial to make this App Inventor App?

返答

Sure, here is a step-by-step tutorial on how to recreate this App Inventor App. This app basically acts as a simple interface for the OpenAI GPT-3 API. You type in a prompt in a textbox, press a button, and the GPT-3 API is queried with your prompt. The response is then shown in the app.

Prerequisites

  • You should have an MIT App Inventor account. If you don’t have one, you can create it at: MIT App Inventor.
  • You should have a valid OpenAI API Key.

Step 1: Start a new project

  1. Log into your App Inventor account.
  2. Click on “Start a new project" and give it a name (e.g., “ChatGPT").

Step 2: Set up the screen

  1. Click on “Screen1" in the component section.
  2. In the properties panel on the right, change the Title to “Text2ChatGPT".

Step 3: Add components

In the palette panel on the left, add the following components:

  1. User Interface: TextBox (rename to TextBox1), Button (rename to Button1), and two Labels (rename to Label2 and Label3 respectively).
  2. Connectivity: Web (rename to Web1).

Step 4: Set up the components

  1. TextBox1: Set the “Hint" to “Enter your prompt here".
  2. Button1: Set the “Text" to “Submit".
  3. Label3: Set the “Text" to “Prompt".
  4. Label2: Set the “Text" to “Response".

Step 5: Define variables

  1. In the Blocks panel, click on “Variables" and then on “Initialize global name to".
  2. Name the variable “API_KEY" and set it to your OpenAI API key.

Step 6: Define blocks for Button1.Click event

When the Button1 is clicked, it needs to call the GPT-3 API with the text entered in TextBox1.

  1. Drag and drop the “when Button1.Click do" block.
  2. If TextBox1’s text is not empty, set the Web1’s request headers and make a POST request to the GPT-3 API.
    • Set the “Content-Type" header to “application/json".
    • Set the “Authorization" header to “Bearer " + API_KEY.
    • The body of the POST request should be a JSON string that includes the model, messages, and temperature attributes.

Step 7: Define blocks for Web1.GotText event

When the API returns a response, the “when Web1.GotText do" block is executed.

  1. In this block, parse the JSON response, extract the content of the GPT-3 response, and set it as the text for Label2.
  2. Also, set the text for Label3 to the text of TextBox1 (the initial user prompt).
  3. Lastly, clear the text in TextBox1.

With this, your app is complete. Note that the actual blocks and their configuration may vary depending on your specific requirements and use case. Also, be sure to replace the placeholder “API_KEY" with your actual OpenAI API key. Please handle this key securely, as misuse could lead to charges on your OpenAI account.

Important: Remember to comply with OpenAI’s use case policy while using the API. For any extensive use, you may need to apply for OpenAI’s approval. The app created here is for educational purposes and does not handle errors that might occur during the API call. You may need to handle those scenarios as per your needs.

プロンプト

Translate it into Japanese

返答

もちろんです。以下に、このApp Inventorアプリを作成するためのステップバイステップのチュートリアルを日本語で示します。このアプリは、OpenAI GPT-3 APIのシンプルなインターフェースとして機能します。テキストボックスにプロンプトを入力し、ボタンを押すと、GPT-3 APIにあなたのプロンプトを問い合わせます。その後、応答がアプリに表示されます。

必要条件

  • MIT App Inventorのアカウントを持っていること。持っていない場合は、こちらで作成できます: MIT App Inventor
  • 有効なOpenAI APIキーを持っていること。

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

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

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

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

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

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

  1. ユーザーインターフェース: TextBox(名前をTextBox1に変更)、Button(名前をButton1に変更)、二つのLabels(それぞれ名前をLabel2とLabel3に変更)。
  2. 接続: Web(名前をWeb1に変更)。

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

  1. TextBox1: “Hint"を"ここにプロンプトを入力してください"に設定します。
  2. Button1: “Text"を"送信"に設定します。
  3. Label3: “Text"を"プロンプト"に設定します。
  4. Label2: “Text"を"レスポンス"に設定します。

ステップ5: 変数の定義

  1. ブロックパネルで"Variables"をクリックし、"Initialize global name to"をクリックします。
  2. 変数名を"API_KEY"とし、その値をあなたのOpenAI APIキーに設定します。

ステップ6: Button1.Clickイベントのブロックを定義する

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

  1. “when Button1.Click do"ブロックをドラッグします。
  2. 次に、"set Web1.Url to"ブロックを追加し、その値を"https://api.openai.com/v1/engines/davinci-codex/completions"に設定します。
  3. “set Web1.Headers to"ブロックを追加し、その値を"create empty list"ブロックと"add items to list"ブロックで作成したリストに設定します。リストには"Authorization"と"Bearer “+API_KEY、"Content-Type"と"application/json"を追加します。
  4. “call Web1.PostText"ブロックを追加し、そのテキストを以下のJSON文字列に設定します:{ "prompt": "ここにプロンプト", "max_tokens": 60 }。"ここにプロンプト"はTextBox1のテキストに置き換えます。

ステップ7: Web1.GotTextイベントのブロックを定義する

Web1.GotTextイベントは、Web1.PostTextが完了したときに発生します。このイベントは、APIからのレスポンスを処理するために使用されます。

  1. “when Web1.GotText do"ブロックをドラッグします。
  2. “set Label2.Text to"ブロックを追加し、その値を"get responseContent"ブロックに設定します。

以上で、App InventorでOpenAI GPT-3 APIを使用するためのシンプルなアプリを作成するための手順が終わりです。アプリをテストして、OpenAI GPT-3と対話できることを確認しましょう。

GPTは間違ったことを言うことがあるので、最後に必ず内容を確認してください。

ChatGPT,チュートリアル

GPT-4を使ってApp InventorアプリのチュートリアルページからiPhoneアプリを作ることを試み、既に5種類のiPhoneアプリを作ることに成功しました。しかし、一々チュートリアルページを作るのは面倒なので、App Inventorアプリの情報をチュートリアルページを使う以外でGPT-4に渡すことができないかと検討していましたが、やっと見つかりました。ここではApp Inventor版「 ChatGPTと話そう!(その1)」 に音声入力・出力機能を付け加えて、「ChatGPTと話そう!(その2)」を作ります。ただし英語でGPT-4プロンプトを入力しないとまともな返答をしてくれませんでした。

前準備

  1. App Inventor日本語版でApp Inventor版 ChatGPTと話そう!(その1)プロジェクトを選択してプロジェクトメニューから「選択したプロジェクトをローカルコンピュータにエクスポート(.aia)」を実行し、ローカルコンピュータに.aiaファイルをダウンロードします。
  2. ローカルコンピュータでダウンロードしたファイルの.aiaを.zipに変更し、このファイルを解凍します。
  3. フォルダーの中にScreen1.bky, Screen1.scm, project.propertiesの三つのファイルがあります。これらをGPT-4に送り込みます。

GPT-4とのやり取り

プロンプト

ソースコードは長いので省略しますが実際はファイル名の後にコピペしています。

Do you understand what the App Inventor project files doing below?

project.properties:

Screen1.scm:

Screen1.bky:

返答

These are MIT App Inventor project files which define an app that interacts with the OpenAI GPT-3 model to provide a chat interface. Let’s break down what each file is doing:

  1. project.properties: This file contains metadata about the project, such as the app name, version, primary and accent colors, location usage, etc. It also defines the main screen of the application and the location of source files, assets, and build files.
  2. Screen1.scm: This file describes the components of Screen1 in the form of a JSON object. It specifies the UI components and their properties such as Text Box, Button, Labels, and Web components.
  3. Screen1.bky: This file is written in Blockly, a visual programming language developed by Google. It defines the functionality of the application. Here’s a high-level overview of what this file is doing:
    • The app takes input text from TextBox1.
    • When Button1 is clicked, if the input text is not empty, a web request is made to the OpenAI API. The headers for this request are set to include the appropriate Content-Type and Authorization (with a global API key). The body of the POST request is formed as per the OpenAI API specifications, including the input text as the message from the user to the GPT-3 model.
    • When the response from the API (Web1.GotText event) is received, it is decoded from JSON and processed. The content field is extracted from the choices array, which contains the GPT-3 model’s generated response. This response text is then displayed in Label2. The original input text is also displayed in Label3, and TextBox1 is cleared.

Please note that these are general interpretations based on the information provided. The precise behavior of the app might vary and is subject to the entire codebase and the runtime environment.

正しく理解しているようなので、音声入力・出力機能を追加してもらいます。

プロンプト

Can you add voice input and voice output functions and generate new project.propertie, Screen1.scm, and Screen1.bky?

返答

To add voice input and output functionality, we will need to add the SpeechRecognizer and TextToSpeech components to our App Inventor project. I will include them in the Screen1.scm file.

As for the Screen1.bky file, you will need to modify your button click event to use the SpeechRecognizer.GetText() method, and in the event where the SpeechRecognizer.AfterGettingText(), send that text to the Web API. Also, we will handle the Web.GotText() event to extract the response, and feed that into the TextToSpeech.Speak() method.

Note that the API key and other critical values in the Blockly file are placeholders and should be replaced with the actual values.

Here is what your modified files might look like:

project.properties:

#
#Wed Jun 07 18:19:49 UTC 2023
source=../src
name=Text2ChatGPTWorking
defaultfilescope=App
main=appinventor.ai_tam0130.Text2ChatGPTWorking.Screen1
color.accent=&HFFFF4081
sizing=Responsive
assets=../assets
theme=Classic
showlistsasjson=True
useslocation=False
aname=Text2ChatGPT
actionbar=False
color.primary=&HFF3F51B5
build=../build
versionname=1.0
versioncode=1
color.primary.dark=&HFF303F9F

Screen1.scm:

#|
$JSON
{"authURL":["ai2.tmsoftwareinc.com"],"YaVersion":"221","Source":"Form","Properties":{"$Name":"Screen1","$Type":"Form","$Version":"30","AppName":"Text2ChatGPT","Title":"Text2ChatGPT","Uuid":"0","$Components":[
{"$Name":"TextBox1","$Type":"TextBox","$Version":"6","Width":"-2","Hint":"\u30d7\u30ed\u30f3\u30d7\u30c8\u3092\u5165\u308c\u3066\u304f\u3060\u3055\u3044","Uuid":"-1671791960"},
{"$Name":"Button1","$Type":"Button","$Version":"7","Text":"\u9001\u4fe1","Uuid":"2041796963"},
{"$Name":"Label3","$Type":"Label","$Version":"5","Text":"\u30d7\u30ed\u30f3\u30d7\u30c8","Uuid":"1877175895"},
{"$Name":"\u30e9\u30d9\u30eb1","$Type":"Label","$Version":"5","Uuid":"1111020969"},
{"$Name":"Label2","$Type":"Label","$Version":"5","Text":"\u8fd4\u7b54","Uuid":"-1790405606"},
{"$Name":"Web1","$Type":"Web","$Version":"8","Url":"https:\/\/api.openai.com\/v1\/chat\/completions","Uuid":"1099905226"},
{"$Name":"SpeechRecognizer1","$Type":"SpeechRecognizer","$Version":"2","Uuid":"1"},
{"$Name":"TextToSpeech1","$Type":"TextToSpeech","$Version":"5","Uuid":"2"}
]}}
|#

Screen1.bky:

This file is too large to show here completely, but here are the key changes you would need to make.

For the Button1.Click event, instead of immediately sending the text from the TextBox1 to the API, you would first call SpeechRecognizer1.GetText(). This will start the speech recognition process.

Next, you will need to handle the SpeechRecognizer1.AfterGettingText event. In this event, you would call the same logic that was originally in the Button1.Click event, except you would replace TextBox1.Text with the result variable from the SpeechRecognizer1.AfterGettingText event.

Finally, in the Web1.GotText event, you would add a line at the end to call TextToSpeech1.Speak(result), where result is the final message string you extracted from the JSON response.

Please remember to replace the placeholders with actual values. Blockly XML format is intricate, so you might want to use the visual interface of MIT App Inventor to make these changes.

この手順に従ってApp Inventor版 ChatGPTと話そう!(その1)を変更すると問題無く動きました。

ChatGPT,チュートリアル

音声入力・出力が動いた「Ionic版 ChatGPTと話そう!(その2)」のソースコードをChatGPTに与えてApp Inventorアプリに変換してもらおうとしました。GPT-4だけで動くものを作るのはApp Inventorの知識不足で難しそうなので、GPT-4の返答を参考にしながら人間が作るのが効率が良さそうです。ここではそのように作りました。

改訂)App Inventor版 ChatGPTと話そう!(その1)の情報をGPT-4に渡すことができないかと検討していましたが、やっと見つかりました。ただし英語でプロンプトを入力しないとまともな返答をしてくれません。詳細はこちらから

GPT-4とのやり取り

プロンプト

ソースコードは長いので省略しますが実際はファイル名の後にコピペしています。

次のIonicプログラムと同じ機能を持つApp Inventorアプリを作る方法をステップ1からステップ3にしたがって教えてください。初心者でもわかるように詳しくお願いします。初心者でもわかるように詳しくお願いします。

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

home.page.html

home.page.ts

返答

提供していただいたIonicプログラムは、ユーザが音声入力を開始・停止し、その音声内容をテキストとしてOpenAIのChatGPT APIに送信し、その結果を音声として再生するというものです。この機能をApp Inventorで実装する方法を以下のステップで説明します。

ただし、App InventorはIonicなどの一部のフレームワークに比べて機能面で制限があるため、全ての機能を再現することは難しいかもしれません。特にOpenAIのChatGPT APIへの直接的な接続はサポートされていないため、代わりの方法を提案します。

ステップ1:細かい機能の説明

まずIonicプログラムがどのような機能を持っているか説明します。

  • ユーザがテキストエリアにテキストを入力できます。
  • 音声入力開始ボタンをクリックすると、音声認識が開始されます。
  • 音声入力停止ボタンをクリックすると、音声認識が停止されます。
  • 送信ボタンをクリックすると、入力されたテキスト(音声認識結果)がOpenAIのChatGPT APIに送信されます。
  • ChatGPT APIからのレスポンスはテキストとして画面に表示され、また音声として再生されます。

ステップ2:作り方の概略

次に、これらの機能をApp Inventorで再現するための概略を説明します。

  1. ユーザインターフェースを設定します。テキストボックス、ボタンなどのコンポーネントを配置します。
  2. 音声認識を開始するためのボタンのイベントハンドラを設定します。App InventorのSpeechRecognizerコンポーネントを利用します。
  3. 音声認識の結果をテキストボックスに表示するように設定します。
  4. 送信ボタンのイベントハンドラを設定します。ここでは、Webコンポーネントを使用して外部APIに接続します。
  5. レスポンスをテキストとして表示し、音声として再生するように設定します。TextToSpeechコンポーネントを使用します。

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

以下に、具体的な手順を詳細に説明します。ただし、OpenAIのAPIを直接使用することができないので、その代わりに任意の外部APIを使用する例を示します。なお、実際にはAPIの利用には適切なキーが必要です。

  1. App Inventorを開き、新しいプロジェクトを作成します。
  2. ユーザインターフェースの設定:
    • Designer画面で、左側のPaletteからTextBoxを選択し、Viewerの任意の位置にドラッグアンドドロップします。これがユーザの入力を受け取るテキストボックスとなります。
    • 同様に、PaletteからButtonを3つ追加します。それぞれのボタンには、"音声入力開始"、"音声入力停止"、"送信"といった適切なテキストを設定します。
    • PaletteからLabelを選択し、Viewerに追加します。これがAPIのレスポンスを表示するためのものです。
  3. 音声認識の設定:
    • PaletteからSpeechRecognizerを選択し、Viewerに追加します。このコンポーネントは非表示です。
    • “音声入力開始"ボタンをクリックした時のイベントハンドラを設定します。Blocks画面で、SpeechRecognizer1.GetTextブロックを追加します。
  4. 音声認識の結果を表示する設定:
    • Blocks画面で、SpeechRecognizer1.AfterGettingTextイベントを選択します。
    • TextBox1のTextに結果を設定するためのブロックを追加します。これにより、音声認識の結果がテキストボックスに表示されます。
  5. 外部APIへの送信設定:
    • PaletteからWebを選択し、Viewerに追加します。このコンポーネントは非表示です。
    • “送信"ボタンをクリックした時のイベントハンドラを設定します。ここでは、Web1.UrlWeb1.Getブロックを使用して外部APIに接続します。
  6. レスポンスの表示と音声再生の設定:
    • PaletteからTextToSpeechを選択し、Viewerに追加します。このコンポーネントは非表示です。
    • Web1.GotTextイベントを設定します。このイベントは、WebコンポーネントがAPIからレスポンスを受け取った時に発生します。
    • Label1のTextにレスポンスを設定し、TextToSpeechコンポーネントを使用してレスポンスを音声として再生します。

以上が、IonicプログラムをApp Inventorで実装する方法です。なお、OpenAIのAPIを直接使用する代わりに、自分で作成した中間サーバーを利用する方法もあります。その中間サーバーでOpenAIのAPIと通信を行い、App Inventorからはその中間サーバーにリクエストを送るという形になります。

この返答だけで作るのは難しそうなので音声入力・出力部分はこの返答を参考にしながら「ChatGPTと話そう!(その1)」に音声入力・出力機能を追加しました。音声入力は自動的に停止するので音声入力停止ボタンは機能していません。

デザイン編集画面
ブロック編集画面

ChatGPT,iPhoneアプリ

OpenAIのGPT-4を使って新しいiPhoneアプリを作ります。iPhoneアプリを作るにはMacで動くXcodeという開発環境が必要です。ここではmacOS 13.4上でXcode 14.3を使い、動作確認にはiOSシミュレータ(iOS 16.4)を使いました。

音声入力・出力が動いた「Ionic版 ChatGPTと話そう!(その2)」のソースコードをChatGPTに与えてiPhoneアプリに変換してもらいました。

 

GPT-4とのやり取り

プロンプト

ソースコードは長いので省略しますが実際はファイル名の後にコピペしています。

次のIonicプログラムと同じ機能を持つiOSアプリをSwiftUIで作る方法をステップ1からステップ3にしたがって教えてください。Xcode version=14.3, Swift version=5で、 iOS16以上をサポートしてください。初心者でもわかるように詳しくお願いします。

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

home.page.html

home.page.ts

返答

まず、このIonicアプリは次の機能を持っています:

  1. ユーザがテキストフィールドにメッセージを入力できます。
  2. 音声認識を開始・停止するボタンがあります。
  3. メッセージを送信するボタンがあります。これはユーザのメッセージをOpenAIのGPT-3.5-turbo APIに送り、その結果を受け取って表示します。また、結果を音声で出力します。

次に、これをSwiftUIとiOSで実装する方法を説明します。

ステップ1:細かい機能の説明

このプロジェクトには以下のような主要な部分があります。

  1. テキストフィールド: ユーザがテキストを入力できるようにします。この場合、TextFieldというSwiftUIのコンポーネントを使用します。
  2. 音声認識: ユーザが音声をテキストに変換する機能を提供します。iOSでは、この目的のために SFSpeechRecognizerというクラスがあります。
  3. ボタン: SwiftUIでは、Buttonというコンポーネントを使用します。これを使って音声認識の開始・停止とメッセージの送信の機能を実装します。
  4. OpenAI APIとの通信: OpenAI APIにメッセージを送信し、応答を取得します。これには、SwiftのネットワーキングライブラリであるURLSessionを使用します。
  5. 音声出力: OpenAI APIからの応答を音声で出力します。これにはAVSpeechSynthesizerというiOSのクラスを使用します。

ステップ2:作り方の概略

まず、SwiftUIで新しいプロジェクトを作成します。このプロジェクトには以下のファイルが含まれます。

  1. ContentView.swift: これはメインのビューで、テキストフィールドとボタンを含みます。
  2. SpeechRecognizer.swift: これは音声認識の機能を提供するクラスです。
  3. OpenAIManager.swift: これはOpenAI APIとの通信を管理するクラスです。
  4. SpeechSynthesizer.swift: これは音声出力の機能を提供するクラスです。

各クラスはその目的に応じて必要なメソッドを持つべきです。

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

詳細な実装はかなりのコード量となるため、ここでは最初の部分、つまりビューと音声認識の部分だけをカバーします。

  1. 新しいSwiftUIプロジェクトの作成:Xcodeを開き、新しいプロジェクトを作成します。"App"テンプレートを選択し、プロジェクト名(例えば"OpenAIVoiceApp")を入力します。"Interface"として"SwiftUI"、"Life Cycle"として"SwiftUI App"を選択します。最後に、"Language"として"Swift"を選択し、プロジェクトを作成します。
  2. ビューの作成:ContentView.swiftファイルを開き、以下のように変更します。

import SwiftUI

struct ContentView: View {
    @State private var userInput = ""
    @State private var response = ""

    var body: some View {
        VStack {
            TextField("Your message", text: $userInput)
                .padding()

            Button(action: {
                // TODO: Start speech recognition
            }) {
                Text("Start Speech Recognition")
            }
            .padding()

            Button(action: {
                // TODO: Stop speech recognition
            }) {
                Text("Stop Speech Recognition")
            }
            .padding()

            Button(action: {
                // TODO: Send message
            }) {
                Text("Send Message")
            }
            .padding()

            Text(response)
        }
        .padding()
    }
}

これはUIをセットアップするだけで、まだ具体的なアクションは何も実装していません。

3. 音声認識の設定:

まず、音声認識のためにプライバシー設定を追加する必要があります。プロジェクトのInfo.plistファイルを開き、"Privacy – Speech Recognition Usage Description"という新しい項目を追加します。この項目の値は、音声認識を使用する理由をユーザに説明するメッセージです。

次に、新しいSpeechRecognizer.swiftファイルを作成します。このファイルには、音声認識を開始と停止するメソッドと、音声認識の結果を取得するためのデリゲートメソッドが必要です。具体的なコードは次の通りです。



import Foundation
import Speech

class SpeechRecognizer: NSObject, SFSpeechRecognizerDelegate {
    private let speechRecognizer = SFSpeechRecognizer(locale: Locale(identifier: "ja-JP"))!
    private var recognitionRequest: SFSpeechAudioBufferRecognitionRequest?
    private var recognitionTask: SFSpeechRecognitionTask?
    private let audioEngine = AVAudioEngine()

    // 音声認識の結果を返すコールバック
    var onResult: ((String) -> Void)?

    override init() {
        super.init()
        self.speechRecognizer.delegate = self
    }

    func startRecognition() {
        // TODO: Implement this
    }

    func stopRecognition() {
        // TODO: Implement this
    }
}


startRecognitionメソッドとstopRecognitionメソッドは具体的な実装が必要です。その実装は、Appleの公式ドキュメンテーションであるSFSpeechRecognizerを参照してください。

このように、SwiftUIでの基本的なセットアップと音声認識の初期セットアップが完了しました。次にOpenAI APIとの通信と音声出力の設定を行う必要がありますが、その詳細な説明は長くなるためここでは省略します。

OpenAI APIとの通信については、SwiftのURLSessionを使用することが一般的です。音声出力については、AVSpeechSynthesizerクラスを使用します。

以上がIonicアプリをSwiftUIで実装するための基本的なガイドラインです。具体的な実装はアプリの詳細や要件によりますが、上記のガイドラインを参照にして進めてみてください。

プロンプト

OpenAI APIとの通信と音声出力の部分を実装して

返答

もちろんです。それでは、それぞれの詳細なステップを以下に説明します。

OpenAI APIとの通信:

新しいOpenAIManager.swiftファイルを作成します。これはURLSessionを使用してOpenAIのGPT-3.5-turbo APIにリクエストを送信するためのクラスとなります。具体的なコードは次の通りです。



import Foundation

class OpenAIManager {
    private let apiKey = "YOUR_OPENAI_API_KEY"  // OpenAIのAPIキーに書き換えてください
    private let url = URL(string: "https://api.openai.com/v1/chat/completions")!

    func sendMessage(_ message: String, completion: @escaping (Result<String, Error>) -> Void) {
        var request = URLRequest(url: url)
        request.httpMethod = "POST"
        request.addValue("Bearer \(apiKey)", forHTTPHeaderField: "Authorization")
        request.addValue("application/json", forHTTPHeaderField: "Content-Type")
        
        let data = [
            "model": "gpt-3.5-turbo",
            "messages": [
                [
                    "role": "user",
                    "content": message
                ]
            ]
        ]
        
        let jsonData = try! JSONSerialization.data(withJSONObject: data, options: [])
        request.httpBody = jsonData
        
        let task = URLSession.shared.dataTask(with: request) { (data, response, error) in
            if let error = error {
                completion(.failure(error))
                return
            }

            if let data = data {
                let json = try! JSONSerialization.jsonObject(with: data, options: []) as! [String: Any]
                let choices = json["choices"] as! [[String: Any]]
                let message = choices[0]["message"] as! [String: Any]
                let content = message["content"] as! String
                completion(.success(content))
            }
        }
        
        task.resume()
    }
}

音声出力:

新しいSpeechSynthesizer.swiftファイルを作成します。これはAVSpeechSynthesizerを使用してテキストを音声に変換するためのクラスとなります。具体的なコードは次の通りです。


import AVFoundation

class SpeechSynthesizer {
    private let synthesizer = AVSpeechSynthesizer()

    func speak(_ text: String) {
        let utterance = AVSpeechUtterance(string: text)
        utterance.voice = AVSpeechSynthesisVoice(language: "ja-JP")
        synthesizer.speak(utterance)
    }
}


以上がそれぞれの具体的な実装になります。これらのクラスをContentViewで使用して、音声認識、OpenAI APIとの通信、音声出力の各機能を完全に接続することができます。

プロンプト

ContentView.swiftだけで動くように書き直して

返答

それでは、OpenAIManager, SpeechSynthesizer, SpeechRecognizerのすべてをContentViewに統合しましょう。以下のように変更します。


import SwiftUI
import AVFoundation
import Speech

struct ContentView: View {
    @State private var userInput = ""
    @State private var response = ""

    private let openAIManager = OpenAIManager()
    private let speechSynthesizer = SpeechSynthesizer()
    private let speechRecognizer = SpeechRecognizer()

    var body: some View {
        VStack {
            TextField("Your message", text: $userInput)
                .padding()

            Button(action: {
                self.speechRecognizer.startRecognition()
            }) {
                Text("Start Speech Recognition")
            }
            .padding()

            Button(action: {
                self.speechRecognizer.stopRecognition()
            }) {
                Text("Stop Speech Recognition")
            }
            .padding()

            Button(action: {
                self.openAIManager.sendMessage(self.userInput) { result in
                    switch result {
                    case .success(let message):
                        self.response = message
                        self.speechSynthesizer.speak(message)
                    case .failure(let error):
                        print(error)
                    }
                }
            }) {
                Text("Send Message")
            }
            .padding()

            Text(response)
        }
        .padding()
        .onAppear {
            self.speechRecognizer.onResult = { result in
                self.userInput = result
            }
        }
    }
}

class OpenAIManager {
    private let apiKey = "YOUR_OPENAI_API_KEY"
    private let url = URL(string: "https://api.openai.com/v1/chat/completions")!

    func sendMessage(_ message: String, completion: @escaping (Result<String, Error>) -> Void) {
        var request = URLRequest(url: url)
        request.httpMethod = "POST"
        request.addValue("Bearer \(apiKey)", forHTTPHeaderField: "Authorization")
        request.addValue("application/json", forHTTPHeaderField: "Content-Type")

        let data = [
            "model": "gpt-3.5-turbo",
            "messages": [
                [
                    "role": "user",
                    "content": message
                ]
            ]
        ]

        let jsonData = try! JSONSerialization.data(withJSONObject: data, options: [])
        request.httpBody = jsonData

        let task = URLSession.shared.dataTask(with: request) { (data, response, error) in
            if let error = error {
                completion(.failure(error))
                return
            }

            if let data = data {
                let json = try! JSONSerialization.jsonObject(with: data, options: []) as! [String: Any]
                let choices = json["choices"] as! [[String: Any]]
                let message = choices[0]["message"] as! [String: Any]
                let content = message["content"] as! String
                DispatchQueue.main.async {
                    completion(.success(content))
                }
            }
        }

        task.resume()
    }
}

class SpeechSynthesizer {
    private let synthesizer = AVSpeechSynthesizer()

    func speak(_ text: String) {
        let utterance = AVSpeechUtterance(string: text)
        utterance.voice = AVSpeechSynthesisVoice(language: "ja-JP")
        synthesizer.speak(utterance)
    }
}

class SpeechRecognizer: NSObject, SFSpeechRecognizerDelegate {
    private let speechRecognizer = SFSpeechRecognizer(locale: Locale(identifier: "ja-JP"))!
    private var recognitionRequest: SFSpeechAudioBufferRecognitionRequest?
    private var recognitionTask: SFSpeechRecognitionTask?
    private let audioEngine = AVAudioEngine()

    var onResult: ((String) -> Void)?

    override init() {
        super.init()
        speechRecognizer.delegate = self
    }

    func startRecognition() {
        if audioEngine.isRunning {
            audioEngine.stop()
            recognitionRequest?.endAudio()
        } else {
            do {
                try startRecording()
            } catch {
                print("Failed to start recording")
            }
        }
    }

    func stopRecognition() {
        if audioEngine.isRunning {
            audioEngine.stop()
            recognitionRequest?.endAudio()
        }
    }

    private func startRecording() throws {
        recognitionTask?.cancel()
        recognitionTask = nil

        recognitionRequest = SFSpeechAudioBufferRecognitionRequest()

        let inputNode = audioEngine.inputNode

        guard let recognitionRequest = recognitionRequest else {
            fatalError("Unable to create a SFSpeechAudioBufferRecognitionRequest object")
        }

        recognitionRequest.shouldReportPartialResults = true

        recognitionTask = speechRecognizer.recognitionTask(with: recognitionRequest) { result, error in
            if let result = result {
                DispatchQueue.main.async {
                    self.onResult?(result.bestTranscription.formattedString)
                }
            }
        }

        let recordingFormat = inputNode.outputFormat(forBus: 0)
        inputNode.installTap(onBus: 0, bufferSize: 1024, format: recordingFormat) { (buffer: AVAudioPCMBuffer, when: AVAudioTime) in
            self.recognitionRequest?.append(buffer)
        }

        audioEngine.prepare()
        try audioEngine.start()
    }
}

このプログラムは、音声認識でユーザー入力を収集し、それをOpenAI APIに送信し、返されたメッセージを音声として出力する一連のプロセスを実行します。ただし、エラーハンドリングやUIの改良は必要に応じて行う必要があります。また、ユーザーのプライバシーを守るため、APIキーはハードコードせず、安全な方法で管理してください。

Xcodeでビルドしたところエラーが出たので、エラーメッセージをそのまま送ってみます

プロンプト

Heterogeneous collection literal could only be inferred to '[String : Any]’; add explicit type annotation if this is intentional

返答

あなたが受け取ったエラーメッセージは、Swiftがコレクションの型推論に問題があると感じたときに表示されるものです。エラーの根本的な原因は、コードの一部がSwiftにとってあいまいであるということです。

この問題は、"messages"キーに対するデータの形式によるものです。現在、これは2つの異なるタイプのデータ(String[[String: Any]])を混在させているため、コンパイラは型推論に問題を抱えています。

エラーメッセージを解消するために、sendMessageメソッド内のデータオブジェクトを次のように変更します:


let data: [String: Any] = [
    "model": "gpt-3.5-turbo",
    "messages": [
        [
            "role": "user",
            "content": message
        ]
    ]
]


これでコンパイラに明示的にデータの型を伝え、混合型のリテラルが意図的であることを示すことができます。

エラーが消えたので、後はプロンプト表示用のTextFieldが複数行表示できるようにしてボタンを日本語に変更します。

最終的なContentView.swiftです。

import SwiftUI
import AVFoundation
import Speech

struct ContentView: View {
    @State private var userInput = ""
    @State private var response = ""

    private let openAIManager = OpenAIManager()
    private let speechSynthesizer = SpeechSynthesizer()
    private let speechRecognizer = SpeechRecognizer()

    var body: some View {
        VStack {
            TextField("プロンプト", text: $userInput, axis:  .vertical)
                .padding()

            Button(action: {
                self.speechRecognizer.startRecognition()
            }) {
                Text("音声入力開始")
            }
            .padding()

            Button(action: {
                self.speechRecognizer.stopRecognition()
            }) {
                Text("音声入力停止")
            }
            .padding()

            Button(action: {
                self.openAIManager.sendMessage(self.userInput) { result in
                    switch result {
                    case .success(let message):
                        self.response = message
                        self.speechSynthesizer.speak(message)
                    case .failure(let error):
                        print(error)
                    }
                }
            }) {
                Text("送信")
            }
            .padding()

            Text(response)
        }
        .padding()
        .onAppear {
            self.speechRecognizer.onResult = { result in
                self.userInput = result
            }
        }
    }
}

class OpenAIManager {
    private let apiKey = "YOUR_OPENAI_API_KEY"
    private let url = URL(string: "https://api.openai.com/v1/chat/completions")!

    func sendMessage(_ message: String, completion: @escaping (Result<String, Error>) -> Void) {
        var request = URLRequest(url: url)
        request.httpMethod = "POST"
        request.addValue("Bearer \(apiKey)", forHTTPHeaderField: "Authorization")
        request.addValue("application/json", forHTTPHeaderField: "Content-Type")

        let data: [String: Any] = [
            "model": "gpt-3.5-turbo",
            "messages": [
                [
                    "role": "user",
                    "content": message
                ]
            ]
        ]


        let jsonData = try! JSONSerialization.data(withJSONObject: data, options: [])
        request.httpBody = jsonData

        let task = URLSession.shared.dataTask(with: request) { (data, response, error) in
            if let error = error {
                completion(.failure(error))
                return
            }

            if let data = data {
                let json = try! JSONSerialization.jsonObject(with: data, options: []) as! [String: Any]
                let choices = json["choices"] as! [[String: Any]]
                let message = choices[0]["message"] as! [String: Any]
                let content = message["content"] as! String
                DispatchQueue.main.async {
                    completion(.success(content))
                }
            }
        }

        task.resume()
    }
}

class SpeechSynthesizer {
    private let synthesizer = AVSpeechSynthesizer()

    func speak(_ text: String) {
        let utterance = AVSpeechUtterance(string: text)
        utterance.voice = AVSpeechSynthesisVoice(language: "ja-JP")
        synthesizer.speak(utterance)
    }
}

class SpeechRecognizer: NSObject, SFSpeechRecognizerDelegate {
    private let speechRecognizer = SFSpeechRecognizer(locale: Locale(identifier: "ja-JP"))!
    private var recognitionRequest: SFSpeechAudioBufferRecognitionRequest?
    private var recognitionTask: SFSpeechRecognitionTask?
    private let audioEngine = AVAudioEngine()

    var onResult: ((String) -> Void)?

    override init() {
        super.init()
        speechRecognizer.delegate = self
    }

    func startRecognition() {
        if audioEngine.isRunning {
            audioEngine.stop()
            recognitionRequest?.endAudio()
        } else {
            do {
                try startRecording()
            } catch {
                print("Failed to start recording")
            }
        }
    }

    func stopRecognition() {
        if audioEngine.isRunning {
            audioEngine.stop()
            recognitionRequest?.endAudio()
        }
    }

    private func startRecording() throws {
        recognitionTask?.cancel()
        recognitionTask = nil

        recognitionRequest = SFSpeechAudioBufferRecognitionRequest()

        let inputNode = audioEngine.inputNode

        guard let recognitionRequest = recognitionRequest else {
            fatalError("Unable to create a SFSpeechAudioBufferRecognitionRequest object")
        }

        recognitionRequest.shouldReportPartialResults = true

        recognitionTask = speechRecognizer.recognitionTask(with: recognitionRequest) { result, error in
            if let result = result {
                DispatchQueue.main.async {
                    self.onResult?(result.bestTranscription.formattedString)
                }
            }
        }

        let recordingFormat = inputNode.outputFormat(forBus: 0)
        inputNode.installTap(onBus: 0, bufferSize: 1024, format: recordingFormat) { (buffer: AVAudioPCMBuffer, when: AVAudioTime) in
            self.recognitionRequest?.append(buffer)
        }

        audioEngine.prepare()
        try audioEngine.start()
    }
}

実行方法は「Ionic版 ChatGPTと話そう!(その1)」と同じです。

 

ChatGPT,Ionicアプリ

OpenAIのGPT-4を使って新しいIonicアプリを作ります。Ionicというのはモバイルデバイス上で動くアプリを開発する環境でJavaScriptを使ってウェブアプリが作れます。JavaScriptフレームワークはいろいろ選べますが、今回はAngularを使いました。動作確認にはChromeを使いました。

ここで作るのは「Ionic版 ChatGPTと話そう!(その2)」としてChatGPTに音声入力したプロンプトを送って返答を画面に表示してから音声出力するアプリです。Ionicではソースを変更すると何もしなくてもブラウザ内のアプリが自動的に更新されるので変更が簡単です。

次の実験はこのソースから他のスマホアプリが作れるかです。SwiftとかKotlinとか。

GPT-4とのやり取り

プロンプト

OpenAIのAPIとのやり取りは「Ionic版 ChatGPTと話そう!(その1)」で動いているので、音声入力・出力を追加するように頼んでみます。ソースコードは長いので省略しますが実際はファイル名の後にコピペしています。cordova、capacitorというのはモバイルデバイス特有のセンサーなどをIonicでサポートするためのものですが、cordovaは2022年4月でサポートが終わったので、capacitorをしています。実際のところこのアプリでは使いませんでしたが。

次のIonicプログラムに音声入力と音声出力の機能を追加したGUIアプリを作る方法をステップ1からステップ3にしたがって教えてください。cordovaでは無くcapacitorを使ってください。

ステップ1:細かい機能の説明
ステップ2:作り方の概略
ステップ3:初めての人でもわかるような詳しい作り方とソースコード

home.page.html

home.page.ts

返答

音声入力と音声出力の機能を追加するためには、ブラウザのWeb Speech APIを利用します。これは音声認識(音声をテキストに変換)と音声合成(テキストを音声に変換)の両方をサポートしています。

ステップ1:細かい機能の説明

  1. 音声入力:Web Speech APIの音声認識機能を利用します。これにより、ユーザーが話した内容をテキストとして取得できます。このテキストはそのままGPT-3.5に送信されます。
  2. 音声出力:Web Speech APIの音声合成機能を利用します。これにより、GPT-3.5からのレスポンスを音声として出力できます。

ステップ2:作り方の概略

  1. 音声認識を初期化し、音声入力を開始するためのボタンを追加します。
  2. 音声認識が結果を得るたびに、それをuserInputに設定します。
  3. sendMessageメソッド内で、音声合成を使ってGPT-3.5からのレスポンスを読み上げます。

ステップ3:初めての人でもわかるような詳しい作り方とソースコード

まず、ボタンと音声入力結果表示エリアをHTMLに追加します。そして音声入力と音声出力を処理するためのメソッドをTypeScriptファイルに追加します。

home.page.html:

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label position="floating"></ion-label>
      <ion-textarea [(ngModel)]="userInput"></ion-textarea>
    </ion-item>
  </ion-list>
  <ion-button expand="full" (click)="startSpeechRecognition()">音声入力開始</ion-button>
  <ion-button expand="full" (click)="sendMessage()">送信</ion-button>
  <p>{{response}}</p>
</ion-content>

home.page.ts:


import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  userInput = '';
  response = '';
  private apiKey = 'YOUR_OPENAI_API_KEY'; // OpenAIのAPIキーに書き換えてください
  private speechRecognition: SpeechRecognition;
  private speechSynthesis: SpeechSynthesis;

  constructor(private http: HttpClient) {
    this.speechRecognition = new SpeechRecognition();
    this.speechSynthesis = window.speechSynthesis;
    this.speechRecognition.onresult = (event) => {
      this.userInput = event.results[0][0].transcript;
    };
  }

  startSpeechRecognition() {
    this.speechRecognition.start();
  }

  async sendMessage() {
    const url = `https://api.openai.com/v1/chat/completions`;
    const headers = {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${this.apiKey}`
    };
    const data = {
      'model': 'gpt-3.5-turbo',
      'messages': [
        {
          'role': 'user',
          'content': this.userInput
        }
      ]
    };
    try {
      const res: any = await this.http.post(url, data, { headers }).toPromise();
      this.response = res.choices[0].message.content.trim();
      const utterance = new SpeechSynthesisUtterance(this.response);
      this.speechSynthesis.speak(utterance);
    } catch (error) {
      console.error(error);
    }
  }
}

注意: Web Speech APIは現在のところ実験的なAPIであり、すべてのブラウザで完全にはサポートされていません。また、これらの音声認識と音声合成機能は一部のプラットフォームでは動作しない可能性があります。そのため、この機能を本番環境で使用する場合は、ブラウザの互換性と対応状況を十分に確認してから実装してください。

このソースをこのままコピペしたところ、いくつかコンパイルエラーが出ましたが、エラーメッセージをそのまま送ると修正版のソースを返してくれました。後は音声入力の終了タイミングがわかりにくかったので入力停止ボタンの追加と、日本語の音声入力ができるように変更してもらって、最終的なソースはこのようになりました。これで動きました。

home.page.html:

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label position="floating"></ion-label>
      <ion-textarea [(ngModel)]="userInput"></ion-textarea>
    </ion-item>
  </ion-list>
  <ion-button expand="full" (click)="startSpeechRecognition()">音声入力開始</ion-button>
  <ion-button expand="full" (click)="stopSpeechRecognition()">音声入力停止</ion-button>
  <ion-button expand="full" (click)="sendMessage()">送信</ion-button>
  <p>{{response}}</p>
</ion-content>

home.page.ts:


import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

declare var window: any;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  userInput = '';
  response = '';
  private apiKey = 'YOUR_OPENAI_API_KEY'; // OpenAIのAPIキーに書き換えてください
  private speechRecognition: any;
  private speechSynthesis: SpeechSynthesis;

  constructor(private http: HttpClient) {
    this.speechRecognition = new (window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.msSpeechRecognition)();
    this.speechRecognition.lang = 'ja-JP'; // 言語を日本語に設定
    this.speechSynthesis = window.speechSynthesis;
    this.speechRecognition.onresult = (event: any) => {
      this.userInput = event.results[0][0].transcript;
    };
  }

  startSpeechRecognition() {
    this.speechRecognition.start();
  }

  stopSpeechRecognition() {
    this.speechRecognition.stop();
  }

  async sendMessage() {
    const url = `https://api.openai.com/v1/chat/completions`;
    const headers = {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${this.apiKey}`
    };
    const data = {
      'model': 'gpt-3.5-turbo',
      'messages': [
        {
          'role': 'user',
          'content': this.userInput
        }
      ]
    };
    try {
      const res: any = await this.http.post(url, data, { headers }).toPromise();
      this.response = res.choices[0].message.content.trim();
      const utterance = new SpeechSynthesisUtterance(this.response);
      utterance.lang = 'ja-JP'; // 言語を日本語に設定
      this.speechSynthesis.speak(utterance);
    } catch (error) {
      console.error(error);
    }
  }
}

実行方法は「Ionic版 ChatGPTと話そう!(その1)」と同じです。

ChatGPT,Ionicアプリ

OpenAIのGPT-4を使って新しいIonicアプリを作ります。Ionicというのはモバイルデバイス上で動くアプリを開発する環境でJavaScriptを使ってウェブアプリが作れます。JavaScriptフレームワークはいろいろ選べますが、今回はAngularを使いました。動作確認にはSafariを使いました。

ここで作るのはChatGPTと話そう!(その1)としてChatGPTに入力したプロンプトを送って返答を画面に表示するアプリです。

 

GPT-4とのやり取り

プロンプト

次の機能を持つGUIアプリをIonicで作る方法をステップ1からステップ3にしたがって教えてください。初心者でもわかるように詳しくお願いします。

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

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

返答

前提として、このアプリケーションを作るには以下のものが必要です:

  1. OpenAIのAPIキー(https://beta.openai.com/signup/ から取得可能)
  2. Node.jsのインストール
  3. Ionicのインストール(npm install -g @ionic/cli)
  4. 基本的なJavaScriptやTypeScriptの知識
  5. 基本的なHTMLとCSSの知識

ステップ1:細かい機能の説明

このアプリケーションは大きく分けて以下のような動作を行います:

  1. ユーザーからテキスト入力を受け付けるUI(ユーザインターフェース)を提供します。ここではテキストエリアと送信ボタンがあります。
  2. ユーザーが送信ボタンを押すと、そのテキストはChatGPTに送信されます。この送信にはOpenAIのAPIを使用します。
  3. ChatGPTからの返答が取得できたら、それをアプリケーションのUIに表示します。

ステップ2:作り方の概略

  1. Ionicを使って新しいアプリケーションを作成します。アプリケーションにはテキスト入力と送信ボタンがあります。
  2. TypeScriptでAPIとの通信部分を実装します。具体的には、ユーザーが送信ボタンを押したときにAPIにテキストを送信し、結果を取得する関数を作ります。
  3. 取得した結果を画面に表示します。これにはAngularのバインディング機能を使用します。

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

新しいIonicアプリケーションを作成します:

ionic start myChatApp blank --type=angular

ここで"myChatApp"は作成するアプリケーションの名前です。

アプリケーションのディレクトリに移動します:

cd myChatApp

テキストエリアと送信ボタンを作成します。src/app/home/home.page.htmlファイルを開き、以下のように編集します:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Chat with GPT-3.5
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label position="floating">Your message</ion-label>
      <ion-textarea [(ngModel)]="userInput"></ion-textarea>
    </ion-item>
  </ion-list>
  <ion-button expand="full" (click)="sendMessage()">Send</ion-button>
 <p>{{response}}</p>
</ion-content>

ここで[(ngModel)]はAngularの双方向データバインディングを使用しています。これにより、ユーザーが入力したテキストは"userInput"変数に自動的に格納されます。

TypeScriptでAPIとの通信部分を実装します。src/app/home/home.page.tsファイルを開き、以下のように編集します:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  userInput = '';
  response = '';
  private apiKey = 'YOUR_OPENAI_API_KEY'; // OpenAIのAPIキーに書き換えてください

  constructor(private http: HttpClient) {}

  async sendMessage() {
    const prompt = this.userInput;
    const url = `https://api.openai.com/v1/engines/davinci-codex/completions`;
    const headers = {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${this.apiKey}`
    };
    const data = {
      'prompt': prompt,
      'max_tokens': 60
    };
    try {
      const res: any = await this.http.post(url, data, { headers }).toPromise();
      this.response = res.choices[0].text;
    } catch (error) {
      console.error(error);
    }
  }
}

ここではsendMessage関数がAPIとの通信を行います。この関数は非同期処理として実装され、ユーザーが送信ボタンを押すと実行されます。

アプリケーションを実行します:

ionic serve

API呼び出し部分が明らかに間違っているのでここを修正してもらって、後はHttpClientMduleを登録してからボタンを日本語に変更します。

最終的なコードです。

home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Chat with GPT-3.5
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label position="floating"></ion-label>
      <ion-textarea [(ngModel)]="userInput"></ion-textarea>
    </ion-item>
  </ion-list>
  <ion-button expand="full" (click)="sendMessage()">送信</ion-button>
 <p>{{response}}</p>
</ion-content>

home.page.ts


import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  userInput = '';
  response = '';
  private apiKey = 'YOUR_OPENAI_API_KEY'; // OpenAIのAPIキーに書き換えてください

  constructor(private http: HttpClient) {}

  async sendMessage() {
    const url = `https://api.openai.com/v1/chat/completions`;
    const headers = {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${this.apiKey}`
    };
    const data = {
      'model': 'gpt-3.5-turbo',
      'messages': [
        {
          'role': 'user',
          'content': this.userInput
        }
      ]
    };
    try {
      const res: any = await this.http.post(url, data, { headers }).toPromise();
      this.response = res.choices[0].message.content.trim();
    } catch (error) {
      console.error(error);
    }
  }
}

実行

OpenAI APIキーの取得

いろいろなところで説明されているので参考にしてAPIキーを取得してください。

コードの貼り付け

GPT-4が作ってくれたコードをhome.page.htmlとhome.page.tsに貼り付けます。コードの中のYOUR_OPENAI_API_KEYをあなたのAPIキーと置き換えてください。

実行結果

実行結果はこの通り。下の画像をクリックしてYouTubeデモビデオを見てください。

 

 

 

ChatGPT,Pythonアプリ

OpenAIのGPT-4を使って新しいPythonアプリを作ります。動作確認にはJupyter Notebookを使いました。

ここで作るのはChatGPTと話そう!(その1)としてChatGPTに入力したプロンプトを送って返答を画面に表示するアプリです。1回で動きました。GPT-4はPythonが得意みたいですね。

GPT-4とのやり取り

プロンプト

次の機能を持つGUIアプリをPythonで作る方法をステップ1からステップ3にしたがって教えてください。初心者でもわかるように詳しくお願いします。

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

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

返答

この説明では、Pythonの基本的な知識と、OpenAIのAPIへのアクセス方法を既に知っていることを前提とします。また、GUIライブラリとしてtkinterを使用します。OpenAIのAPIキーを取得するためにはOpenAIのウェブサイトで登録する必要があります。

ステップ1:細かい機能の説明

このGUIアプリには以下の機能が含まれます:

  1. テキスト入力フィールド:ユーザーがChatGPTに送信するメッセージを入力するための場所です。
  2. 送信ボタン:このボタンをクリックすると、入力フィールドのテキストがChatGPTに送信されます。
  3. テキスト表示エリア:ChatGPTからの応答が表示される場所です。

ステップ2:作り方の概略

  1. GUIを構築するために、Pythonの組み込みライブラリであるtkinterを使用します。
  2. テキストフィールド、送信ボタン、テキスト表示エリアを含むウィンドウを作成します。
  3. 送信ボタンがクリックされたときに実行される関数を作成します。この関数では、テキストフィールドの内容を取得し、ChatGPTに送信します。また、ChatGPTからの応答を取得し、テキスト表示エリアに表示します。

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

最初に必要なモジュールをインポートします。

import tkinter as tk
import openai

次に、OpenAIのAPIキーを設定します。

openai.api_key = 'your-api-key'

tkinterでウィンドウを作成します。

window = tk.Tk()
window.title("Chat with GPT-3.5-turbo")

入力フィールド、送信ボタン、テキスト表示エリアを作成します。

entry_field = tk.Entry(window, width=50)
entry_field.pack()

response_area = tk.Text(window, height=10, width=50)
response_area.pack()

send_button = tk.Button(window, text="Send", command=send_message_to_gpt)
send_button.pack()

ここで、send_message_to_gpt関数を定義します。


def send_message_to_gpt():
    message = entry_field.get()
    entry_field.delete(0, tk.END)

    response = openai.ChatCompletion.create(
        model="gpt-3.5-turbo",
        messages=[
            {"role": "system", "content": "You are a helpful assistant."},
            {"role": "user", "content": message}
        ]
    )

    response_area.insert(tk.END, "User: " + message + "\n")

この関数では、まずユーザーからのメッセージをテキストフィールドから取得します。そして、そのメッセージをChatGPTに送信します。応答が戻ってきたら、それをテキスト表示エリアに表示します。

最後に、GUIを表示するためにメインループを実行します。

window.mainloop()

以上で、指定された機能を持つ基本的なGUIアプリが作成できます。ただし、このコードはあくまで基本的なものであり、エラーハンドリングなどは含まれていません。また、APIキーはソースコード中にハードコーディングしない方が安全です。実際のアプリケーションでは、環境変数などからAPIキーを読み込むようにすることをお勧めします。

また、このコードはgpt-3.5-turboモデルの使用方法を示すものであり、モデルの詳細な設定やパラメータの調整についてはOpenAIの公式ドキュメンテーションを参照してください。

プロンプト

コードを全部表示して

返答

もちろんです。以下に全てのコードを示します:



import tkinter as tk
import openai

# OpenAI APIキーの設定
openai.api_key = 'your-api-key'

# メッセージをGPT-3.5-turboに送信する関数
def send_message_to_gpt():
    message = entry_field.get()
    entry_field.delete(0, tk.END)

    response = openai.ChatCompletion.create(
        model="gpt-3.5-turbo",
        messages=[
            {"role": "system", "content": "You are a helpful assistant."},
            {"role": "user", "content": message}
        ]
    )

    response_area.insert(tk.END, "User: " + message + "\n")
    response_area.insert(tk.END, "GPT: " + response['choices'][0]['message']['content'] + "\n")

# tkinterでウィンドウを作成
window = tk.Tk()
window.title("Chat with GPT-3.5-turbo")

# 入力フィールドの作成
entry_field = tk.Entry(window, width=50)
entry_field.pack()

# テキスト表示エリアの作成
response_area = tk.Text(window, height=10, width=50)
response_area.pack()

# 送信ボタンの作成
send_button = tk.Button(window, text="Send", command=send_message_to_gpt)
send_button.pack()

# GUIを表示するためのメインループ
window.mainloop()

このコードは基本的なものであり、エラーハンドリングなどは含まれていません。また、APIキーはソースコード中にハードコーディングしない方が安全です。実際のアプリケーションでは、環境変数などからAPIキーを読み込むようにすることをお勧めします。

これでうまく動いたので、返答表示エリアのサイズを変更し、送信ボタンの表示テキストを「送信」に変更して入力フィールドの下に移動しました。

実行

OpenAI APIキーの取得

いろいろなところで説明されているので参考にしてAPIキーを取得してください。

コードの貼り付け

GPT-4が作ってくれたコードをJupyter Notebookに貼り付けます。コードの中のyour-api-keyをあなたのAPIキーと置き換えてください。

実行結果

実行結果はこの通り。下の画像をクリックしてYouTubeデモビデオを見てください。

 

 

 

Androidアプリ,ChatGPT

OpenAIのGPT-4を使って新しいAndroidアプリをAndroid Studio FlamingoとKotlinを使って作ります。Android StudioはWindowsでもMac, Linux, ChromeOSでも動きますので手元のパソコンが使えます。
ここで作るのはChatGPTと話そう!(その1)としてChatGPTに入力したプロンプトを送って返答を画面に表示するアプリです。いろいろ試してみましたが、GPT-4はAndroidアプリはうまく作れなかったので、もしやと思い、英語でプロンプトを入れたら動くコードをくれました。日本語のKotlinのコードはあまり入っていないようですね。

 

 

GPT-4とのやり取り

プロンプト

Please tell me how to create an android app with the following features with Android Studio and kotlin according to step 1 to step 3. Please be detailed so that even a beginner can understand.

Features:
1. send the entered text to ChatGPT. The model is gpt-3.5-turbo
2. display the returned reply on the screen

Step 1: Explanation of detailed functions
Step 2: Outline of how to make it
Step 3: Explain in detail so that even a newcomer can understand. the communication part with ChatGPT should

返答

This is a simple guide to create an Android application in Kotlin using Android Studio that can communicate with the ChatGPT-3.5-turbo API.

This guide assumes you have Android Studio installed on your machine and basic knowledge of Kotlin. If you need to install Android Studio, please refer to the official Android Studio website.

Here are the steps you need to follow to create the Android Application:

Step 1: Explanation of Detailed Functions

  1. User Input: We need to create an interface where users can input text. For this, we will use an EditText view.
  2. Send Request: When users have entered the text, we need to send it to the OpenAI server via a POST request. This can be done using a library like Retrofit or OkHttp.
  3. Receive Response: Once we have sent the request, we will receive a response from the server. This response needs to be handled and displayed to the user.
  4. Display Response: We will display the response in a TextView.

Step 2: Outline of How to Make It

  1. Create a New Project in Android Studio: Start a new Android Studio project with an Empty Activity.
  2. Layout Design: Design the layout of your application using the XML file in the 'res/layout’ directory. You should have an EditText for input and a Button to send the request, and a TextView to display the response.
  3. Networking: Add Retrofit or OkHttp to your project to handle HTTP requests.
  4. API Key: Register on the OpenAI website and get an API Key. This key will be used to authorize your requests to the OpenAI server.
  5. Request and Response: Create a function to handle the request and response. This function will take the text from the EditText, send it as a request to the OpenAI server, receive the response, and display it in the TextView.

Step 3: Detailed Explanation for Beginners

  1. Project Setup: Open Android Studio, click on “New Project", select “Empty Activity", and click “Next". Give your application a name, select “Kotlin" as the language, and finish.
  2. Layout Design: Open the 'activity_main.xml’ file from the 'res/layout’ directory. Remove any existing code and paste the following:

This will create an EditText for input, a Button for sending the request, and a TextView to display the response.

  1. Adding Dependencies: Now we need to add Retrofit and Gson dependencies to our project. Open your 'build.gradle’ (Module) file and add these lines inside dependencies:
implementation 'com.squareup.retrofit2:retrofit:2.9.0'
implementation 'com.squareup.retrofit2:converter-gson:2.9.0'

Click “Sync Now" at the top right corner of the screen to download and integrate these libraries into your project.

  1. API Key: Go to the OpenAI website, create an account, and get your API Key. We will use this key to authorize our requests.
  2. Setting up Retrofit: Now, we will setup Retrofit to handle HTTP requests.
    Creating a Data Class: First, we need to create a data class that represents the request payload and the response payload. The request payload for GPT-3.5-turbo is a JSON that looks like this:

So, our data classes will look like this:

延々と説明が続きます。

プロンプト

Give whole MainActivity.kt source

返答

Here’s a complete example of a MainActivity.kt file based on the instructions above:

import android.os.Bundle
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import retrofit2.Call
import retrofit2.Callback
import retrofit2.Response
import retrofit2.http.Body
import retrofit2.http.Headers
import retrofit2.http.POST
import retrofit2.Retrofit
import retrofit2.converter.gson.GsonConverterFactory

data class Message(val role: String, val content: String)
data class OpenAIRequest(val messages: List)
data class OpenAIResponse(val choices: List)
data class Choice(val message: Message)

interface OpenAIApi {
    @Headers("Content-Type: application/json", "Authorization: Bearer YOUR_API_KEY")
    @POST("v1/engines/davinci-codex/completions")
    fun getCompletion(@Body body: OpenAIRequest): Call
}

object RetrofitInstance {
    private val retrofit by lazy {
        Retrofit.Builder()
            .baseUrl("https://api.openai.com/")
            .addConverterFactory(GsonConverterFactory.create())
            .build()
    }

    val api: OpenAIApi by lazy {
        retrofit.create(OpenAIApi::class.java)
    }
}

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val editText = findViewById<edittext>(R.id.editText)
        val button = findViewById<button>(R.id.button)
        val textView = findViewById<textview>(R.id.textView)

        button.setOnClickListener {
            val message = Message("user", editText.text.toString())
            val request = OpenAIRequest(listOf(Message("system", "You are a helpful assistant."), message))

            RetrofitInstance.api.getCompletion(request).enqueue(object: Callback {
                override fun onResponse(call: Call, response: Response) {
                    if (response.isSuccessful) {
                        val reply = response.body()?.choices?.get(0)?.message?.content
                        textView.text = reply
                    } else {
                        textView.text = "Error: ${response.code()}"
                    }
                }

                override fun onFailure(call: Call, t: Throwable) {
                    textView.text = "Failure: ${t.message}"
                }
            })
        }
    }
}

Please note that you need to replace “YOUR_API_KEY" with your actual API key from OpenAI. Also, make sure to handle error and edge cases properly in a real-world app. This example is simple and intended for learning purposes. For production-grade applications, consider handling potential errors more thoroughly and take steps to secure the API key.

この状態で実行するとプログラムがクラッシュしました。聞いてみます。

プロンプト

When I click Send button, it crashed

返答

If your app is crashing when you click the “Send" button, it could be due to a number of reasons. Here are a few potential issues and solutions:

  1. Network Permission: Android requires explicit permission for network access in the manifest file. Ensure you’ve added the following line in your AndroidManifest.xml file within the <manifest> tag:

<uses-permission android:name="android.permission.INTERNET" />

これでクラッシュしなくなりました。後はAPI関係の微調整をGPT-4にしてもらいました。

最終的なソースコードは次のとおりです。

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

    <EditText

android:id="@+id/editText"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:hint="テキストを入力してください"/>

    <Button

android:id="@+id/button"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="送信"

android:layout_below="@+id/editText"/>

    <TextView

android:id="@+id/textView"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="返答はここに表示されます"

android:layout_below="@+id/button"/>

</RelativeLayout>
MainActivity.kt
package com.example.text2chatgpten

import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import okhttp3.OkHttpClient
import retrofit2.Call
import retrofit2.Callback
import retrofit2.Response
import retrofit2.Retrofit
import retrofit2.converter.gson.GsonConverterFactory
import retrofit2.http.Body
import retrofit2.http.Headers
import retrofit2.http.POST

import java.util.concurrent.TimeUnit


data class Message(val role: String, val content: String)
data class OpenAIRequest(val model: String, val messages: List<Message>)
data class OpenAIResponse(val choices: List<Choice>)
data class Choice(val message: Message)

interface OpenAIApi {
    @Headers("Content-Type: application/json", "Authorization: Bearer APIKEY")
    @POST("v1/chat/completions")
    fun getCompletion(@Body body: OpenAIRequest): Call<OpenAIResponse>
}

object RetrofitInstance {
    var okHttpClient = OkHttpClient.Builder()
        .connectTimeout(1, TimeUnit.MINUTES)
        .readTimeout(1, TimeUnit.MINUTES)
        .writeTimeout(1, TimeUnit.MINUTES)
        .build()
    private val retrofit by lazy {

Retrofit.Builder()
            .baseUrl("https://api.openai.com/")
            .client(okHttpClient)
            .addConverterFactory(GsonConverterFactory.create())
            .build()
    }


val api: OpenAIApi by lazy {

retrofit.create(OpenAIApi::class.java)
    }
}

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val editText = findViewById<EditText>(R.id.editText)
        val button = findViewById<Button>(R.id.button)
        val textView = findViewById<TextView>(R.id.textView)

        button.setOnClickListener {

val message = Message("user", editText.text.toString())
            val request = OpenAIRequest("gpt-3.5-turbo", listOf(Message("system", "You are a helpful assistant."), message))

            RetrofitInstance.api.getCompletion(request).enqueue(object: Callback<OpenAIResponse> {
                override fun onResponse(call: Call<OpenAIResponse>, response: Response<OpenAIResponse>) {
                    if (response.isSuccessful) {
                        val reply = response.body()?.choices?.get(0)?.message?.content

textView.text = reply

} else {
                        textView.text = "Error: ${response.code()}"

}
                }

                override fun onFailure(call: Call<OpenAIResponse>, t: Throwable) {
                    textView.text = "Failure: ${t.message}"

}
            })
        }

}
}

Android StudioでAndroidアプリを作る

OpenAI APIキーの取得

いろいろなところで説明されているので参考にしてAPIキーを取得してください。

プロジェクトの作成

Android Studioを起動してTalk2ChatGPTという名前のプロジェクトを作ります。Empty Views AcitivityでAPIは33にします。

XMLとKotlinコードの貼り付け

GPT-4が作ってくれたactivity_main.xmlとMainActivity.ktコードを貼り付けます。MainActivity.ktの中のAPIKEYをあなたのAPIキーと置き換えてください。

実行

実行結果はこの通り。下の画像をクリックしてYouTubeデモビデオを見てください。

 

 

 

ChatGPT,iPhoneアプリ

OpenAIのGPT-4を使って新しいiPhoneアプリを作ります。iPhoneアプリを作るにはMacで動くXcodeという開発環境が必要です。ここではmacOS 10.15.7上でXcode 12.2を使い、動作確認にはiOSシミュレータ(iOS 14.2)を使いました。

ここで作るのはChatGPTと話そう!(その1)としてChatGPTに入力したプロンプトを送って返答を画面に表示するアプリです。1時間以内で動きました。

 

GPT-4とのやり取り

プロンプト

次の機能を持つiOSアプリをXcodeとSwiftUIで作る方法をステップ1からステップ3にしたがって教えてください。初心者でもわかるように詳しくお願いします。

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

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

返答

ステップ1:細かい機能の説明 このアプリでは、以下の機能を実装します。

  1. テキスト入力フィールドを提供し、ユーザーが入力したテキストを受け取る。
  2. 入力されたテキストをOpenAIのChatGPT API(gpt-3.5-turboモデル)に送信する。
  3. APIから受け取った返信を画面上に表示する。

ステップ2:作り方の概略

  1. XcodeとSwiftUIを使って、UI(ユーザーインターフェース)を作成します。テキスト入力フィールドと送信ボタン、表示エリアを含む。
  2. ChatGPT APIと通信するためのコードを実装します。HTTPリクエストを使ってテキストをAPIに送信し、返信を受け取ります。
  3. APIから受け取った返信を画面上に表示する処理を実装します。

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

  1. UIの作成
  • Xcodeをインストールし、新しいプロジェクトを作成します。プロジェクト名を決めて、User InterfaceにSwiftUIを選択してください。
  • ContentView.swiftファイルを開き、以下のUI要素を追加します。
    • テキスト入力フィールド:ユーザーがテキストを入力できるようにする。
    • 送信ボタン:入力されたテキストをChatGPT APIに送信するためのボタン。
    • 表示エリア:APIから受け取った返信を表示するための領域。
  1. APIとの通信
  • OpenAIのAPIキーを取得します。アカウントを作成し、APIキーをメモしておきます。
  • プロジェクトにAlamofireというライブラリを追加して、簡単にHTTPリクエストを扱えるようにします。Swift Package Managerを使ってインストールすることができます。
  • APIと通信するための関数を作成します。この関数では、入力されたテキストをAPIに送信し、返信を受け取ります。APIキーと入力テキストを使って、HTTP POSTリクエストを作成し、Alamofireを使って送信します。
  1. 返信の表示
  • APIからの返信を受け取ったら、表示エリアにそのテキストを表示します。SwiftUIのTextビューを使って、返信を画面上に表示するコードを追加します。
  • 送信ボタンをタップしたときに、APIとの通信を行い、返信を表示する処理
    1. 返信の表示(続き)
    • 送信ボタンをタップしたときに、APIとの通信を行い、返信を表示する処理を実装します。これには、SwiftUIの@Stateプロパティラッパーを使って、表示用の変数を宣言し、APIから受け取った返信を格納します。

    以下に、実装のサンプルコードを示します。


import SwiftUI
import Alamofire

struct ContentView: View {
    @State private var inputText: String = ""
    @State private var responseText: String = ""

    var body: some View {
        VStack {
            TextField("テキストを入力してください", text: $inputText)
                .padding()
                .textFieldStyle(RoundedBorderTextFieldStyle())
            
            Button(action: {
                sendToChatGPT(text: inputText)
            }) {
                Text("送信")
                    .padding()
            }
            
            Text(responseText)
                .padding()
        }
    }

    func sendToChatGPT(text: String) {
        let headers: HTTPHeaders = [
            "Content-Type": "application/json",
            "Authorization": "Bearer YOUR_API_KEY"
        ]
        
        let parameters: [String: Any] = [
            "model": "gpt-3.5-turbo",
            "messages": [["role": "system", "content": "iOSアプリのテスト"], ["role": "user", "content": text]]
        ]

        AF.request("https://api.openai.com/v1/engines/gpt-3.5-turbo/completions",
                   method: .post,
                   parameters: parameters,
                   encoding: JSONEncoding.default,
                   headers: headers)
            .responseJSON { response in
                switch response.result {
                case .success(let value):
                    if let jsonResponse = value as? [String: Any],
                       let choices = jsonResponse["choices"] as? [[String: Any]],
                       let message = choices.first?["message"] as? [String: Any],
                       let content = message["content"] as? String {
                        DispatchQueue.main.async {
                            self.responseText = content
                        }
                    }
                case .failure(let error):
                    print(error)
                }
            }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

このサンプルコードでは、テキスト入力フィールド、送信ボタン、表示エリアが含まれています。送信ボタンをタップすると、sendToChatGPT関数が呼び出され、APIとの通信が行われます。APIから受け取った返信は、responseText変数に格納され、画面上に表示されます。

注意:このコードでは"YOUR_API_KEY"となっている部分を、取得したOpenAIのAPIキーに置き換えてください。

これで、初心者でもわかるような詳しい手順を提供しました。これを参考にして、XcodeとSwiftUIを使って、ChatGPTと通信するiOSアプリを作成してみてください。

プロンプト

何も表示されないのでデバッグしたいんだけど受け取ったJSONを表示するにはどうしたらいい?

返答

デバッグを行い、受け取ったJSONを表示するためには、responseJSON内でデバッグプリントを追加して、受け取ったJSONデータをコンソールに表示させることができます。

sendToChatGPT関数内のresponseJSONブロックにprint文を追加して、JSONデータを表示させてみましょう。


AF.request("https://api.openai.com/v1/engines/gpt-3.5-turbo/completions",
           method: .post,
           parameters: parameters,
           encoding: JSONEncoding.default,
           headers: headers)
    .responseJSON { response in
        switch response.result {
        case .success(let value):
            // 受け取ったJSONをコンソールに表示
            print("JSON Response: \(value)")
            
            if let jsonResponse = value as? [String: Any],
               let choices = jsonResponse["choices"] as? [[String: Any]],
               let message = choices.first?["message"] as? [String: Any],
               let content = message["content"] as? String {
                DispatchQueue.main.async {
                    self.responseText = content
                }
            }
        case .failure(let error):
            print(error)
        }
    }

このprint("JSON Response: \(value)")の部分が、受け取ったJSONデータをコンソールに表示するためのデバッグプリントです。アプリを実行し、送信ボタンをタップした後、Xcodeのコンソールを確認して、受け取ったJSONデータが表示されているか確認してください。

これにより、デバッグを行いながら受け取ったJSONデータを確認できます。これを使って、アプリの動作が正しいかどうかを検証してみてください。

どうもAPI呼び出しのURLが間違っていたようです。"https://api.openai.com/v1/engines/gpt-3.5-turbo/completions"を"https://api.openai.com/v1/chat/completions"に変更したところ動きました。

XcodeでiPhoneアプリを作る

OpenAI APIキーの取得

いろいろなところで説明されているので参考にしてAPIキーを取得してください。

プロジェクトの作成

Xcodeを起動してTalk2ChatGPT-1という名前のiOS Appプロジェクトを作ります。InterfaceはSwiftUIでLanguageはSwiftにします。

swiftコードの貼り付け

GPT-4が作ってくれたswiftのコードをContentView.swiftに貼り付けます。File > Swift PackageメニューからAlamofireを追加します。コードの中の
YOUR_API_KEYをあなたのAPIキーと置き換えてください。

実行

実行結果はこの通り。下の画像をクリックしてYouTubeデモビデオを見てください。

 

 

 

ChatGPT,チュートリアル

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

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

クリックして動いているところを見てください

GPT-4とのやり取り

プロンプト 「iPhone版 ChatGPTと話そう!(その1)」とほぼ同じものです

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

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

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

返答

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

  1. ユーザーがテキストを入力できるテキストボックス
  2. テキストが入力された後、送信ボタンをクリックすると、入力されたテキストがChatGPT(gpt-3.5-turbo)に送信される
  3. ChatGPTから返信を受け取り、画面上に表示する

ステップ2:作り方の概略

  1. MIT App Inventorで新しいプロジェクトを作成
  2. 必要なコンポーネントをデザイナー画面に配置
  3. 各コンポーネントをブロックエディタで関連付ける
  4. ChatGPT APIに接続するための設定

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

  • 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に送信するブロックを作成します。」

返答

App Inventorでは、Webコンポーネントを使用して外部のWebサービスと通信することができます。しかし、直接的な外部APIとの連携には制限があり、WebコンポーネントはHTTP GETとPOSTリクエストをサポートしていますが、必要なヘッダーやボディの詳細な設定など、複雑なAPIリクエストの制御が難しいです。

OpenAIのAPIに接続するためには、通常はHTTP POSTリクエストを使用し、リクエストヘッダーにAPIキーを含め、リクエストボディにパラメータをJSON形式で含めます。しかし、App InventorのWebコンポーネントではこれが直接的には難しいため、ここでは簡略化した説明をしています。

理想的なシナリオでは、Webコンポーネントの「.Web1.PostText」ブロックを使用してAPIにテキストデータを送信し、「when Web1.GotText」ブロックを使用してAPIからの応答を受け取ります。

しかし、実際にはこの直接的な方法ではOpenAIのAPIと通信することが難しいため、通常は中間のサーバー(バックエンド)を使用してApp InventorとOpenAIのAPIとの間の通信を橋渡しします。このバックエンドはPHP、Node.js、Pythonなどのサーバーサイドのプログラミング言語で書かれ、OpenAIのAPIを呼び出し、その結果をApp Inventorに返します。

このようなバックエンドを使用する場合、App Inventorはそのバックエンドに対してリクエストを送り、バックエンドがそのリクエストを受け取ってOpenAIのAPIに転送し、APIからの応答をApp Inventorに返します。この方法では、App Inventorから直接OpenAIのAPIに接続する必要はなく、バックエンドがその役割を果たします。これは、App Inventorの制限を回避する一般的な方法です。

なお、この方法を使用するためには、サーバーサイドのプログラミングに関する基本的な知識が必要になります。また、バックエンドをホストするためのサーバーも必要となります。

どうもGPT-4はWebコンポーネントのことをよく知らないようですね。確認してみましょう。

プロンプト

Webコンポーネントにset RequestHeadersがあるんじゃないの?これ使えないの?

返答

申し訳ありません、誤解を与えてしまいました。あなたの指摘は正しいです。App InventorのWebコンポーネントは、確かにset RequestHeadersを使ってリクエストヘッダーを設定することが可能です。これにより、"Content-Type"と"Authorization"などのヘッダー情報を設定できます。ただし、"Authorization"にはあなたのOpenAI APIキーを含める必要があります。

以下に具体的なブロックの作成手順を示します。

  1. 「set Web1.Url」ブロックにOpenAIのAPIのURL(https://api.openai.com/v1/engines/davinci-codex/completions)を設定します。
  2. 「set Web1.RequestHeaders」ブロックを使ってヘッダーを設定します。このブロックは、リストからマップ(キーと値のペア)に変換する「make a dictionary」ブロックと組み合わせて使用します。"Content-Type"は “application/json"、"Authorization"は “Bearer {あなたのAPIキー}"とします。
  3. 「set Web1.PostText」ブロックを使ってリクエストボディを設定し、その後APIにPOSTリクエストを送信します。リクエストボディはJSON形式で、"prompt"にユーザーが入力したテキストを、"max_tokens"に返答の最大トークン数(例えば60)を設定します。
  4. 「when Web1.GotText」ブロックを使ってAPIからの応答を受け取ります。応答はJSON形式なので、「get value for key “choices" of dictionary」ブロックを使って"choices"キーの値を取り出し、さらにその中の最初の要素の"text"キーの値を取り出して表示します。

なお、OpenAIのAPIは2021年9月時点の情報であり、最新のAPIの仕様についてはOpenAIの公式ドキュメンテーションをご覧ください。

3の「set Web1.PostText」ブロックがありませんので聞いてみます。

プロンプト

「set Web1.PostText」ブロックなんて無いよ

返答

申し訳ありません、誤りがありました。App InventorのWebコンポーネントには「set Web1.PostText」ブロックは存在しません。正確には、「Web1.PostText」ブロックを使用してAPIへのPOSTリクエストを送信します。

また、POSTリクエストのボディにJSON形式のデータを含めるためには、「join」ブロックを使用してJSON形式の文字列を作成し、それを「Web1.PostText」ブロックの引数として渡します。

以下に、具体的な手順を修正して示します。

  1. 「set Web1.Url」ブロックにOpenAIのAPIのURL(https://api.openai.com/v1/engines/davinci-codex/completions)を設定します。
  2. 「set Web1.RequestHeaders」ブロックを使ってヘッダーを設定します。このブロックは、リストからマップ(キーと値のペア)に変換する「make a dictionary」ブロックと組み合わせて使用します。"Content-Type"は “application/json"、"Authorization"は “Bearer {あなたのAPIキー}"とします。
  3. 「join」ブロックを使ってリクエストボディをJSON形式の文字列として作成します。"prompt"にユーザーが入力したテキストを、"max_tokens"に返答の最大トークン数(例えば60)を設定します。そして、「Web1.PostText」ブロックを使ってこのJSON形式の文字列をPOSTリクエストのボディとしてAPIに送信します。
  4. 「when Web1.GotText」ブロックを使ってAPIからの応答を受け取ります。応答はJSON形式なので、「get value for key “choices" of dictionary」ブロックを使って"choices"キーの値を取り出し、さらにその中の最初の要素の"text"キーの値を取り出して表示します。

再度、この情報があなたのApp Inventorプロジェクトに役立つことを願っています。

前に行っていることと違うことを言い出したり、混乱してきたみたいなのでこの辺りでやめにします。どうもGPT-4はApp Inventorの知識はあまりないようですね。
仕方無いのでアプリは私が作りました。
デザイン編集画面
ブロック編集画面