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

开篇

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

近来OpenAI和ChatGPT的热度很高，尤其是最近发布的GPT-4。这类工具的大量使用案例已经涌现出来，但目前人们最常用ChatGPT的方式是通过进行聊天。我一直在使用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的完整参考，其中涉及在
/v1/chat/completions 上执行POST请求。

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

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

Future<String> completeChat(String message) async {



  final chatCompletion = await (



    model: 'gpt-3.5-turbo',



    messages: [



      OpenAIChatCompletionChoiceMessageModel(



        content: message,



        role: 'user',



      ),



    ],



  );



  return ;



}

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

class ChatMessage {



  ChatMessage(, );



 



  final String content;



  final bool isUserMessage;



}



 



Future<String> completeChat(List<ChatMessage> messages) async {



  final chatCompletion = await (



    model: 'gpt-3.5-turbo',



    messages: [



      ...previousMessages.map(



        (e) => OpenAIChatCompletionChoiceMessageModel(



          role:  ? 'user' : 'assistant',



          content: ,



        ),



      ),



    ],



  );



  return ;



}

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

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

// models/chat_message.dart



class ChatMessage {



  ChatMessage(, );



 



  final String content;



  final bool isUserMessage;



}

// api/chat_api.dart




import 'package:chatgpt_client/models/chat_message.dart';




import 'package:chatgpt_client/';




import 'package:dart_openai/';



 



class ChatApi {



static const _model = 'gpt-3.5-turbo'; // 设置模型为"gpt-3.5-turbo"




 



ChatApi() { // 构造函数，设置OpenAI的apiKey和organization




 = openAiApiKey;



 = openAiOrg;



}



 



Future<String> completeChat(List<ChatMessage> messages) async {



// 定义方法completeChat，接收ChatMessage列表类型参数messages，并返回Future<String>类型



final chatCompletion = await ( // 调用OpenAI的方法，获取ChatCompletionModel对象




model: _model, // 传递模型参数




messages: messages // 传递对话历史消息参数，并将ChatMessage列表转换为OpenAIChatCompletionChoiceMessageModel列表




.map((e) => OpenAIChatCompletionChoiceMessageModel(



role:  ? 'user' : 'assistant', // 指定消息发送者角色




content: , // 传递消息文本内容




))



.toList(),



);




return ; // 返回ChatCompletionModel对象中的消息内容




}



}

请注意，在构造函数中，我们设置了API密钥和组织ID。如果没有API密钥，任何请求都将失败。组织ID是可选的，如果您在OpenAI平台上设置了多个组织，可以提供组织ID。

// 




const openAiApiKey = 'YOUR_API_KEY';




const openAiOrg = 'YOUR_ORGANIZATION_ID';

为了避免将敏感信息提交到版本控制中，我们通常会将其存储在 secrets 文件中并在 .gitignore 中添加 secrets 文件，以便在提交时忽略这些文件。在 GitHub 上的项目存储库中，通常会提供一个名为 secrets_example.dart 的文件，其中包含占位符值，供开发人员参考并创建自己的 secrets 文件。

API密钥的注意事项

在本文中，我们正在构建一个客户端应用程序。像这样硬编码API密钥的应用程序不应该发布。由于API使用可能会产生费用，您不希望暴露自己的API密钥。

如果您想发布这样的应用程序，您有两个选择：

1.允许用户提供自己的API密钥开始聊天。用户可以通过应用程序提供他们的密钥，您可以将其安全地存储在本地存储中，以在每个API请求中使用。

2.而不是直接调用聊天API，可以调用一个服务器或边缘函数，然后使用自己的令牌调用聊天API。这样，您就不会暴露自己的API密钥，可以控制流量，并具有其他授权和速率限制要求。如果您选择这种方法，您可能需要考虑赚钱，因为经常使用应用程序的用户将花费您的钱！

构建前端界面

现在 Chat API 已准备好使用，是时候开始构建 UI 了。如果你从零开始，可以使用 "flutter create" 命令初始化一个 Flutter 项目：

flutter create my_chatgpt_client

UI将是相当标准的，包含两个主要的组件：消息编辑器和消息气泡。主屏幕将是聊天中所有消息的列表（作为消息气泡），消息编辑器在底部，我们可以在其中输入消息。

让我们从消息编辑器小部件开始：

// widgets/message_composer.dart



 




import 'package:flutter/';



 



class MessageComposer extends StatelessWidget {



  MessageComposer({



    required , // 回调函数，当用户输入文本提交时调用




    required , // 是否正在等待 Chat API 的响应




    ,



  });



 



  final TextEditingController _messageController = TextEditingController(); // 用于文本输入的控制器




 



  final void Function(String) onSubmitted; // 回调函数，当用户输入文本提交时调用




  final bool awaitingResponse; // 是否正在等待 Chat API 的响应




 



  @override



  Widget build(BuildContext context) {



    return Container(



      padding: const (12), // 内边距




      color: (context).(0.05), // 颜色




      child: SafeArea(



        child: Row(



          children: [



            Expanded(



              child: !awaitingResponse // 如果没有正在等待 Chat API 的响应




                  ? TextField(



                      controller: _messageController, // 将文本控制器传递给 TextField 组件




                      onSubmitted: onSubmitted, // 当用户提交文本时调用 onSubmitted 回调函数




                      decoration: const InputDecoration(



                        hintText: 'Write your message here...', // 提示文本




                        border: , // 边框




                      ),



                    )



                  : Row(



                      mainAxisAlignment: , // 将子组件水平居中




                      children: const [



                        SizedBox(



                          height: 24,



                          width: 24,



                          child: CircularProgressIndicator(), // 等待指示器




                        ),



                        Padding(



                          padding: (16),



                          child: Text('Fetching response...'), // 正在获取响应




                        ),



                      ],



                    ),



            ),



            IconButton(



              onPressed: !awaitingResponse // 如果没有正在等待 Chat API 的响应




                  ? () => onSubmitted(_messageController.text) // 当用户点击发送按钮时调用 onSubmitted 回调函数




                  : null, // 禁用按钮




              icon: const Icon(), // 发送图标




            ),



          ],



        ),



      ),



    );



  }



}

消息编辑器将在文本字段被提交（例如，按下Enter键）或者我们点击右侧的发送按钮时，调用我们传递给它的onSubmitted方法。我们可以使用awaitingResponse标志隐藏文本字段并禁用发送按钮。当我们等待API的响应时，我们将将此标志设置为true以表示消息正在提交中。

消息气泡小部件是一个简单的容器，根据消息是用户消息还是AI生成的消息，具有不同的背景颜色和发送者名称：

// widgets/message_bubble.dart




import 'package:flutter/';



 



class MessageBubble extends StatelessWidget {



  const MessageBubble({



    required ,



    required ,



    ,



  });



 



  final String content; // 消息内容




  final bool isUserMessage; // 是否为用户消息




 



  @override



  Widget build(BuildContext context) {



    final themeData = (context);



    return Container(



      margin: const (8), // 设置组件的边距




      decoration: BoxDecoration(



        color: isUserMessage // 根据消息类型设置不同的背景颜色




            ? (0.4)



            : (0.4),



        borderRadius: const ((12)), // 设置圆角边框




      ),



      child: Padding(



        padding: const (12), // 设置内边距




        child: Column(



          crossAxisAlignment: ,



          children: [



            Row(



              children: [



                Text(



                  isUserMessage ? 'You' : 'AI', // 根据消息类型显示发送者




                  style: const TextStyle(fontWeight: ),



                ),



              ],



            ),



            const SizedBox(height: 8),



            Text(content), // 显示消息内容




          ],



        ),



      ),



    );



  }



}

现在我们已经准备好了所有必要的小部件，现在让我们将它们全部组合在主页上。下面是主聊天页面的代码:

// chat_page.dart




import 'package:chatgpt_client/api/chat_api.dart';




import 'package:chatgpt_client/models/chat_message.dart';




import 'package:chatgpt_client/widgets/message_bubble.dart';




import 'package:chatgpt_client/widgets/message_composer.dart';




import 'package:flutter/';



 



class ChatPage extends StatefulWidget {



  const ChatPage({



    required ,



    Key? key,



  }) : super(key: key);



 



  final ChatApi chatApi;



 



  @override



  State<ChatPage> createState() => _ChatPageState();



}



 



class _ChatPageState extends State<ChatPage> {



  final _messages = <ChatMessage>[



    ChatMessage('Hello, how can I help?', false),



  ];



  var _awaitingResponse = false;



 



  @override



  Widget build(BuildContext context) {



    return Scaffold(



      appBar: AppBar(title: const Text('Chat')),



      body: Column(



        children: [



          Expanded(



            child: ListView(



              children: [



                // 使用_spread_操作符将每个聊天消息转换为MessageBubble widget




                ..._messages.map(



                  (msg) => MessageBubble(



                    content: ,



                    isUserMessage: ,



                  ),



                ),



              ],



            ),



          ),



          // 使用MessageComposer widget显示用户输入




          MessageComposer(



            onSubmitted: _onSubmitted,



            awaitingResponse: _awaitingResponse,



          ),



        ],



      ),



    );



  }

这是一个有状态的widget，它开始时显示消息"How can I help?"，这样我们就不会从空白聊天开始了。

最后一部分是_onSubmitted方法，当用户提交一条消息时，它会通过消息编辑器被调用。

// _onSubmitted方法将会在用户输入一条新的聊天消息后被调用



Future<void> _onSubmitted(String message) async {



  setState(() {



    // 在UI中显示用户刚刚输入的消息




    _messages.add(ChatMessage(message, true));



    // 等待服务器的回复




    _awaitingResponse = true;



  });



  // 发送用户的消息到API，等待API返回回复




  final response = await (_messages);



  setState(() {



    // 在UI中显示API的回复




    _messages.add(ChatMessage(response, false));



    // 回复已经接收完成，不再等待




    _awaitingResponse = false;



  });



}

当用户提交一条新的消息时，我们会在 setState 中将该消息添加到聊天消息中，并将 _awaitingResponse 设置为 true。这将在对话中显示用户的消息，并禁用消息编辑器。

接下来，我们将所有消息传递给聊天 API，并等待响应。一旦我们得到了响应，我们会在 _messages 中添加它作为聊天消息，并在第二个 setState 调用中将 _awaitingResponse 设置回 false。

至此，对话流程就完成了！现在让我们看看它的实际效果：

这是应用程序的代码和主要方法：

import 'package:chatgpt_client/api/chat_api.dart';




import 'package:chatgpt_client/chat_page.dart';




import 'package:flutter/';



 



void main() {



  // 运行ChatApp




  runApp(ChatApp(chatApi: ChatApi()));



}



 



class ChatApp extends StatelessWidget {



  // 带有chatApi参数的构造函数




  const ChatApp({required , Key? key}) : super(key: key);



 



  final ChatApi chatApi; // chatApi属性




 



  @override



  Widget build(BuildContext context) {



    return MaterialApp(



      // MaterialApp，包含了应用的所有基本元素




      title: 'ChatGPT Client', // 应用的标题




      theme: ThemeData(



        // 设置应用的主题色




        colorScheme: (



          seedColor: , // 主色调




          secondary: , // 次要色调




        ),



      ),



      home: ChatPage(chatApi: chatApi), // ChatPage是这个应用的首页




    );



  }



}

解析markdown

在我们之前与ChatGPT的对话中，我们问了一个跟进问题“给我展示代码”。

我们在回复中得到了相当数量的Flutter代码，但它们都是以markdown格式呈现的！我们将使用markdown_widget包来解决这个问题。

flutter pub add markdown_widget

在MessageBubble组件中，用MarkdownWidget替换包含消息内容的Text组件：

MarkdownWidget(



  data: content,



  shrinkWrap: true,



)

经过一次热重载，我们可以看到代码现在已经被正确解析了。这很容易！

错误处理

如果我们从OpenAI得到了错误响应怎么办？在测试中，我遇到了一些429（Too Many Requests）异常。如果你调用API太频繁，也可能出现这种错误，但也可能是因为OpenAI API总共接收到了太多的请求。

我们至少要处理这个错误并显示一个有用的消息。下面是修改后的_onSubmitted方法：

Future<void> _onSubmitted(String message) async {



  setState(() {



    _messages.add(ChatMessage(message, true)); // 将输入的消息添加到对话列表




    _awaitingResponse = true; // 设置正在等待响应标志




  });



  try {



    final response = await (_messages); // 调用 ChatApi 的 completeChat 方法来获取 OpenAI 的响应




    setState(() {



      _messages.add(ChatMessage(response, false)); // 将响应添加到对话列表




      _awaitingResponse = false; // 取消等待响应标志




    });



  } catch (err) {



    (context).showSnackBar(



      const SnackBar(content: Text('An error occurred. Please try again.')), // 显示错误信息提示条




    );



    setState(() {



      _awaitingResponse = false; // 取消等待响应标志




    });



  }



}

当然，这还可以进一步改进。我们可以提供一个选项，在不需要发送新消息的情况下重试响应，但也可以在 ChatApi 中自动重试请求而不显示错误。

结束

总结一下，现在我们已经有一个完全可用的聊天应用程序，可以随时在任何平台上与ChatGPT聊天了！

在这篇文章中，我们展示了如何构建一个基本的聊天应用程序，通过OpenAI的聊天API与ChatGPT进行对话。我们还添加了一些附加功能，如markdown解析和错误处理。

这些功能相当基础，但是我们可以通过这样的应用程序实现更多有用的功能，比如能够复制和/或共享响应。此外，我们可以使用本地或云数据库来存储对话，以便随时访问它们。

您可以在这里找到源代码。

/dartling/chatgpt_client

今天的分享就到这里，感谢你的阅读，希望能够帮助到你，文章创作不易，如果你喜欢我的分享，别忘了点赞转发，让更多有需要的人看到，最后别忘记关注「前端达人」，你的支持将是我分享最大的动力，后续我会持续输出更多内容，敬请期待。

原文：
/building-a-chatgpt-client-app-with-flutter

作者：Christos

直接翻译，有自行改编和添加部分，翻译水平有限，难免有疏漏，欢迎指正