Flutter x ChatGPT APIを利用したチャットアプリ開発 ~ その①~

話題のChatGPT APIとFlutterを使って、簡易的なチャットアプリを開発しました。
そのアプリの作り方について紹介していきます！

Introducing ChatGPT and Whisper APIs

アプリの説明

アプリ起動後、ユーザーはチャット入力欄にメッセージを入力します。
メッセージはOpenAIのChatGPTに送信され、GPTからのレスポンスがアプリに表示されようにします。

アプリ画面

今回の記事で紹介するのは、アプリの一部である_getGpt3Response関数です。
この関数はアプリの中心的な機能を担当しており、ユーザーからのメッセージを受け取り、そのメッセージをOpenAIのChatGPTに送信し、GPTからの応答を取得してアプリに返す役割を果たします。

コード

以下が該当のコードです。

void _handleSubmit(String text) async {
    _textController.clear();
    Message message = Message(
      text: text,
      isUser: true,
    );
    setState(() {
      _messages.insert(0, message);
    });

    // Call the OpenAI API here
    var gpt3Response = await _getGpt3Response(text);
    Message botMessage = Message(
      text: gpt3Response,
      isUser: false,
    );
    setState(() {
      _messages.insert(0, botMessage);
    });
  }


Future<String> _getGpt3Response(String message) async {
    String url = 'https://api.openai.com/v1/chat/completions';

    String prompt = _previousResponse + message;
    _previousResponse = prompt;

    var response = await http.post(
      Uri.parse(url),
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer $env',
      },
      body: jsonEncode({
        'model': 'gpt-3.5-turbo',
        'messages': [
          {
            'role': 'system',
            'content': 'You are a helpful assistant.',
          },
          {
            'role': 'user',
            'content': message,
          },
        ]
      }),
    );

    var data = jsonDecode(response.body);
    print(data);

    if (data['choices'] != null &&
        data['choices'].length > 0 &&
        data['choices'][0]['message'] != null) {
      return data['choices'][0]['message']['content'];
    } else {
      return 'I\'m sorry, I didn\'t quite understand that. Could you please clarify?';
    }
  }

Widget _buildTextComposer() {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 8.0),
      child: Row(
        children: <Widget>[
          Flexible(
            child: TextField(
              controller: _textController,
              onSubmitted: _handleSubmit,
              decoration:
                  const InputDecoration.collapsed(hintText: "Send a message"),
            ),
          ),
          Container(
            margin: const EdgeInsets.symmetric(horizontal: 4.0),
            child: IconButton(
              icon: const Icon(Icons.send),
              onPressed: () => _handleSubmit(_textController.text),
            ),
          ),
        ],
      ),
    );
  }

どのように動作するか以下に説明します。

1. ユーザーがチャットウィンドウにメッセージを入力し、送信ボタンを押します。

2. _handleSubmit関数が呼び出されます。この関数は、ユーザーからの新しいメッセージをリストに追加し、そのメッセージを_getGpt3Response関数に渡します。

3. _getGpt3Response関数は、ユーザーからのメッセージを受け取り、そのメッセージをOpenAIのAPIにPOSTリクエストとして送信します。リクエストのボディには、ユーザーからのメッセージとともに、前回のレスポンス（存在する場合）と一部の固定メッセージ（'You are a helpful assistant.'）が含まれます。

4. OpenAIのAPIは、リクエストに基づいてChatGPTモデルを使用してレスポンスを生成し、そのレスポンスをJSON形式で返します。

5. _getGpt3Response関数は、APIからのレスポンスを解析し、GPTからのメッセージを取り出します。

6. GPTからのメッセージは_handleSubmit関数に返され、リストに追加され、アプリのUIに表示されます。

このように、_getGpt3Response関数は、ユーザーとChatGPTとの間のコミュニケーションを仲介する役割を果たしています。
上記のコードを使うと簡単にチャットアプリが作れるので、次の記事で全体像をご説明します。