ページが見つかりませんでした | MIT App Inventor 2 日本語化プロジェクト https://appinventor.tmsoftwareinc.com MIT App Inventor 2 Japanese Localization Project Fri, 29 Dec 2023 22:03:59 +0000 ja hourly 1 https://wordpress.org/?v=6.4.3 https://appinventor.tmsoftwareinc.com/wp-content/uploads/2019/05/codi_japanese-75x75.jpg ページが見つかりませんでした | MIT App Inventor 2 日本語化プロジェクト https://appinventor.tmsoftwareinc.com 32 32 2023年の実績と2024年の予定 https://appinventor.tmsoftwareinc.com/archives/4581 https://appinventor.tmsoftwareinc.com/archives/4581#respond Thu, 28 Dec 2023 17:50:18 +0000 https://appinventor.tmsoftwareinc.com/?p=4581 2023年の実績

登録ユーザー

2023年一年間で1868人の新規登録ユーザーを獲得しました(12/29/2023現在)。年初予定の1500人以上の新規登録ユーザー獲得は無事達成できました。累積登録ユーザーは7040人に達しました。

新しく加わった利用高校・大学など

  • 東京大学教育学部附属中学校
  • 鳥取短期大学
  • 春日部高等学校
  • 埼玉県久喜市の中学
  • 広島市の高校

バージョンアップ

nb191から現行のnb195aまで、6回のバージョンアップを実施しました。

日本語チュートリアル

ChatGPTの登場によりプログラミング教育も大きく変わりそうなので、どこまでGPTが使えるのかいろいろ実験を行いその結果を公開しました。1) App InventorアプリチュートリアルからiPhoneアプリを作る実験、2) ChatGPT (GPT-4)を使っていろいろなアプリを作る実験、3) My GPTsで作ったApp Inventor日本語版の知識を持ったアプリを作る時のお助けGPTの作成、です。また、GPTと音声会話を楽しめるアプリをApp Inventorで開発し、MyFriend-GPTとしてGoogle Playで公開しました。MyFriend-GPTの簡易版の作り方は初心者用のチュートリアルとして公開しました。

2024年の予定

状況の変化によって柔軟に変更します

登録ユーザー

一年間で1500人以上の新規登録ユーザー獲得を目指します。

バージョンアップ

引き続きMITのバージョンアップに合わせて日本語版のバージョンアップを継続します。

マネタイズ

GPTがプログラミング教育に大きな変革をもたらすことを踏まえ、若者たちに新しい刺激を与えるために、GPT関連の情報を広く発信する新しいコーナーを設ける予定です。このコーナーは、学生や学校関係者だけでなく、多くの人々が訪れるように工夫し、各ページに広告を掲載して収益化を図ります。将来的には、GPTを使用して容易にソフトウェアを開発できるツールを開発し、販売することを目指しています。

 

MIT App Inventor 2日本語化プロジェクト 代表 宮島 隆

 

]]>
https://appinventor.tmsoftwareinc.com/archives/4581/feed 0
App Inventorアプリの作り方のチュートリアルをGPT-4に書いてもらう https://appinventor.tmsoftwareinc.com/archives/4311 https://appinventor.tmsoftwareinc.com/archives/4311#respond Thu, 22 Jun 2023 18:32:44 +0000 https://appinventor.tmsoftwareinc.com/?p=4311 前準備
  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は間違ったことを言うことがあるので、最後に必ず内容を確認してください。

]]>
https://appinventor.tmsoftwareinc.com/archives/4311/feed 0
ChatGPTを使うアプリ https://appinventor.tmsoftwareinc.com/archives/4305 https://appinventor.tmsoftwareinc.com/archives/4305#respond Thu, 22 Jun 2023 17:51:11 +0000 https://appinventor.tmsoftwareinc.com/?p=4305 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と話そう(その1)」アプリの作り方のチュートリアルを公開し、日本の利用者の皆さんが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. “いつもボタン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文字列に設定します。このブロックをいつもボタン1クリックされたら実行する”ブロックに入れます。

ステップ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

]]>
https://appinventor.tmsoftwareinc.com/archives/4305/feed 0
App Inventor版 ChatGPTと話そう!(その2): (その1)に機能追加 https://appinventor.tmsoftwareinc.com/archives/4272 https://appinventor.tmsoftwareinc.com/archives/4272#respond Wed, 07 Jun 2023 19:37:02 +0000 https://appinventor.tmsoftwareinc.com/?p=4272 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)を変更すると問題無く動きました。

]]>
https://appinventor.tmsoftwareinc.com/archives/4272/feed 0
App Inventor版 ChatGPTと話そう!(その2): Ionic版から作る https://appinventor.tmsoftwareinc.com/archives/4249 https://appinventor.tmsoftwareinc.com/archives/4249#respond Tue, 06 Jun 2023 21:07:15 +0000 https://appinventor.tmsoftwareinc.com/?p=4249 音声入力・出力が動いた「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)」に音声入力・出力機能を追加しました。音声入力は自動的に停止するので音声入力停止ボタンは機能していません。

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

]]>
https://appinventor.tmsoftwareinc.com/archives/4249/feed 0
iPhone版 ChatGPTと話そう!(その2): Ionic版から作る https://appinventor.tmsoftwareinc.com/archives/4212 https://appinventor.tmsoftwareinc.com/archives/4212#respond Sat, 03 Jun 2023 04:18:26 +0000 https://appinventor.tmsoftwareinc.com/?p=4212 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)」と同じです。

 

]]>
https://appinventor.tmsoftwareinc.com/archives/4212/feed 0
Ionic版 ChatGPTと話そう!(その2) https://appinventor.tmsoftwareinc.com/archives/4182 https://appinventor.tmsoftwareinc.com/archives/4182#respond Fri, 19 May 2023 19:59:34 +0000 https://appinventor.tmsoftwareinc.com/?p=4182 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)」と同じです。

]]>
https://appinventor.tmsoftwareinc.com/archives/4182/feed 0
Ionic版 ChatGPTと話そう!(その1) https://appinventor.tmsoftwareinc.com/archives/4161 https://appinventor.tmsoftwareinc.com/archives/4161#respond Thu, 18 May 2023 19:39:13 +0000 https://appinventor.tmsoftwareinc.com/?p=4161 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デモビデオを見てください。

 

 

 

]]>
https://appinventor.tmsoftwareinc.com/archives/4161/feed 0
Python版 ChatGPTと話そう!(その1) https://appinventor.tmsoftwareinc.com/archives/4139 https://appinventor.tmsoftwareinc.com/archives/4139#respond Sun, 14 May 2023 18:06:44 +0000 https://appinventor.tmsoftwareinc.com/?p=4139 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デモビデオを見てください。

 

 

 

]]>
https://appinventor.tmsoftwareinc.com/archives/4139/feed 0
Android Studio版 ChatGPTと話そう!(その1) https://appinventor.tmsoftwareinc.com/archives/4068 https://appinventor.tmsoftwareinc.com/archives/4068#respond Tue, 09 May 2023 03:54:10 +0000 https://appinventor.tmsoftwareinc.com/?p=4068 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デモビデオを見てください。

 

 

 

]]>
https://appinventor.tmsoftwareinc.com/archives/4068/feed 0