使用Flutter构建ChatGPT客户端：快速入门指南

开篇

在本篇博客文章中，我们将通过OpenAI的API构建一个简单的对话界面，与ChatGPT进行聊天。

近来OpenAI和ChatGPT的热度很高，尤其是最近发布的GPT-4。这类工具的大量使用案例已经涌现出来，但目前人们最常用ChatGPT的方式是通过chat.openai.com进行聊天。我一直在使用ChatGPT来激发灵感、编写一些Flutter代码片段，甚至是撰写这篇博客文章的大纲！当然，它建议的大纲非常乐观，因此我不得不略过一些部分，但它仍然提供了足够的指引，让我能够立即开始。

然而，OpenAI的官方聊天界面体验并不好。它非常有限，聊天历史记录经常无法正常工作。已经有人使用Web技术构建了更好的UI和用户体验的ChatGPT客户端应用程序，例如TypingMind。

作为Flutter开发者，我不禁想到Flutter非常适合作为ChatGPT客户端应用程序的选择！Flutter具有跨平台能力和丰富的UI组件，是这样一个项目的完美选择。我们可以编写一次代码，然后将应用程序发布在Web、iOS、Android以及桌面平台上：Windows、macOS和Linux。

ChatGPT API

要使用OpenAI的任何API，您需要注册并获取API密钥。请注意，API使用可能会产生费用，您需要提供付款详细信息。我们将使用的gpt-3.5-turbo模型相对便宜，除非您经常使用它，否则不应花费太多钱。

具体来说，我们将使用Chat API（聊天完成），该API支持两个OpenAI的模型：gpt-3.5-turbo和gpt-4。我们可以在此处找到Chat API的完整参考，其中涉及在
https://api.openai.com/v1/chat/completions 上执行POST请求。

此时，我们可以使用http库向Chat API发送必需的数据并解析响应。但是，由于Dart和Flutter社区的贡献，已经在pub.dev上提供了一个可用的包：dart_openai。它将为我们进行API请求并返回解析后的响应，因此我们只需获取响应文本并在应用程序中显示即可。

以下是一个接受用户消息并返回ChatGPT响应的方法：

Future<String> completeChat(String message) async {
  final chatCompletion = await OpenAI.instance.chat.create(
    model: 'gpt-3.5-turbo',
    messages: [
      OpenAIChatCompletionChoiceMessageModel(
        content: message,
        role: 'user',
      ),
    ],
  );
  return chatCompletion.choices.first.message.content;
}

由于这将是一次对话，因此我们需要在请求中传递以前的消息，以便ChatGPT具有到目前为止整个对话的上下文，而不仅仅是用户的最后一条消息。

class ChatMessage {
  ChatMessage(this.content, this.isUserMessage);
 
  final String content;
  final bool isUserMessage;
}
 
Future<String> completeChat(List<ChatMessage> messages) async {
  final chatCompletion = await OpenAI.instance.chat.create(
    model: 'gpt-3.5-turbo',
    messages: [
      ...previousMessages.map(
        (e) => OpenAIChatCompletionChoiceMessageModel(
          role: e.isUserMessage ? 'user' : 'assistant',
          content: e.content,
        ),
      ),
    ],
  );
  return chatCompletion.choices.first.message.content;
}

上面的方法接受用户的最后一条消息以及对话中的所有先前消息。请注意，在API请求中，ChatGPT的响应标有助手的角色。

现在，我们把最终版本的completeChat方法放到一个ChatApi类中，以便稍后使用。

// models/chat_message.dart
class ChatMessage {
  ChatMessage(this.content, this.isUserMessage);
 
  final String content;
  final bool isUserMessage;
}

// api/chat_api.dart
import 'package:chatgpt_client/models/chat_message.dart';
import 'package:chatgpt_client/secrets.dart';
import 'package:dart_openai/