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:
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.
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.
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.
OpenAIのGPT-4を使って新しいAndroidアプリをAndroid Studio FlamingoとKotlinを使って作ります。Android StudioはWindowsでもMac, Linux, ChromeOSでも動きますので手元のパソコンが使えます。 ここで作るのはChatGPTと話そう！(その１)として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
User Input: We need to create an interface where users can input text. For this, we will use an EditText view.
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.
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.
Display Response: We will display the response in a TextView.
Step 2: Outline of How to Make It
Create a New Project in Android Studio: Start a new Android Studio project with an Empty Activity.
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.
Networking: Add Retrofit or OkHttp to your project to handle HTTP requests.
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.
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
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.
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.
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:
Click “Sync Now" at the top right corner of the screen to download and integrate these libraries into your project.
API Key: Go to the OpenAI website, create an account, and get your API Key. We will use this key to authorize our requests.
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:
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）を取得し、ラベルに表示するように設定します。
