Flutter聊天机器人插件gpt_chatbot的使用

发布于 1周前 作者 phonegap100 来自 Flutter

Flutter聊天机器人插件gpt_chatbot的使用

gpt_chatbot 是一个高度可定制且易于使用的 Flutter 包,它使开发人员能够将由 OpenAI 的 GPT 模型驱动的智能聊天界面集成到他们的 Flutter 应用程序中。该包提供了现成的聊天用户界面,并处理与 GPT API 的交互,允许您以最小的努力创建智能对话代理。

特性

  • 可定制的聊天界面:可以自定义聊天气泡、应用栏和输入字段,以匹配您的应用程序的主题。
  • 实时流式传输:实时流式传输来自 AI 的消息,模拟自然打字行为。
  • 自动滚动:聊天界面会随着新消息自动滚动,为用户提供无缝体验。
  • 轻松集成:只需少量代码即可将基于 GPT 的聊天集成到您的应用程序中。
  • 支持 GPT-3.5-turbo 和 GPT-4o-mini:默认设计用于与 OpenAI 的 GPT-3.5-turbo 模型配合使用,同时支持其他模型。
  • 灵活的聊天机器人:通过设置特定的系统提示语,您可以创建适用于各种应用的适应性强的聊天机器人。

安装

pubspec.yaml 文件中添加 gpt_chatbot

dependencies:
  gpt_chatbot: ^0.0.3

使用

要开始使用 gpt_chatbot,请使用以下示例代码:

import 'package:flutter/material.dart';
import 'package:gpt_chatbot/gpt_chatbot.dart';

class MyChatScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 创建一个 ChatbotService 实例
    final chatGPTService = ChatbotService(
      apiKey: 'your-openai-api-key', // 替换为您的 OpenAI API 密钥
      systemPrompt: '你是一个乐于助人的营养师。提供有关饮食、食物、锻炼和营养事实的信息。', // 设置系统提示
      temperature: 0.5, // 自定义温度设置
      maxTokens: 6000, // 自定义最大令牌数
      model: 'gpt-4o-mini', // 如有需要,指定不同的模型
    );

    // 返回 ChatbotScreen 组件
    return ChatbotScreen(
      chatGPTService: chatGPTService,
      appBarTitle: '健康聊天机器人', // 设置应用栏标题
      hasBackButton: false, // 隐藏返回按钮
      appBarBackgroundColor: Colors.pink, // 自定义应用栏颜色
      textFieldHint: '问你的问题...', // 设置文本字段的提示文本
      userBubbleDecoration: BoxDecoration(
        color: Colors.pinkAccent, // 自定义用户消息气泡颜色
        borderRadius: BorderRadius.all(Radius.circular(12)),
      ),
      botBubbleDecoration: BoxDecoration(
        color: Color.fromARGB(255, 220, 220, 220), // 自定义机器人消息气泡颜色
        borderRadius: BorderRadius.all(Radius.circular(12)),
      ),
    );
  }
}

示例演示

| 输出 1 | 输出 2 |

API 文档

ChatbotService

ChatbotService 构造函数

ChatbotService({
  required String apiKey, 
  required String systemPrompt, 
  double temperature = 0.5, 
  int maxTokens = 1500, 
  String model = 'gpt-4o-mini'
})

ChatbotService 方法

Stream<String> streamMessages(String message)
  • streamMessages:实时流式传输来自 GPT 模型的消息。

ChatbotScreen

ChatbotScreen 构造函数

ChatbotScreen({
  required ChatbotService chatGPTService, 
  String appBarTitle = 'Chat', 
  String textFieldHint = 'Ask something...', 
  BoxDecoration userBubbleDecoration = const BoxDecoration(), 
  BoxDecoration botBubbleDecoration = const BoxDecoration()
})

更多关于Flutter聊天机器人插件gpt_chatbot的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter聊天机器人插件gpt_chatbot的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter项目中使用gpt_chatbot插件来实现聊天机器人功能的示例代码。这个示例假设你已经创建了一个Flutter项目,并且已经配置好了基本的开发环境。

首先,你需要在pubspec.yaml文件中添加gpt_chatbot依赖。请注意,这里gpt_chatbot是一个假设的包名,因为实际上Flutter社区可能没有直接名为gpt_chatbot的官方插件用于GPT聊天机器人。但你可以根据实际的GPT API封装插件来调整代码。为了示例,我们假设有一个名为gpt_chatbot的插件可用。

dependencies:
  flutter:
    sdk: flutter
  gpt_chatbot: ^x.y.z  # 替换为实际的版本号

然后,运行flutter pub get来安装依赖。

接下来,在你的Flutter项目中,你可以按照以下步骤使用gpt_chatbot插件:

  1. 导入插件

在你的Dart文件中(例如main.dart),导入gpt_chatbot插件:

import 'package:gpt_chatbot/gpt_chatbot.dart';
  1. 初始化GPT Chatbot

在你的应用初始化代码中,配置并初始化GPT Chatbot。这通常涉及到设置API密钥或其他必要的认证信息。由于GPT API可能涉及敏感信息,这里不会直接展示API密钥,但你会在实际应用中需要提供这些信息。

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 假设GPTChatbot有一个初始化方法,需要API密钥
  GPTChatbot chatbot = await GPTChatbot.initialize('YOUR_API_KEY');

  runApp(MyApp(chatbot: chatbot));
}
  1. 创建UI并使用Chatbot

在你的Flutter应用中创建一个简单的UI,用于与聊天机器人进行交互。这里是一个基本的示例:

import 'package:flutter/material.dart';
import 'package:gpt_chatbot/gpt_chatbot.dart';

class MyApp extends StatefulWidget {
  final GPTChatbot chatbot;

  MyApp({required this.chatbot});

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final TextEditingController _controller = TextEditingController();
  final List<String> _messages = [];

  void _sendMessage() async {
    String userMessage = _controller.text;
    if (userMessage.isNotEmpty) {
      // 显示用户消息
      setState(() {
        _messages.add('User: $userMessage');
      });

      // 发送消息给GPT Chatbot并获取回复
      String botResponse = await widget.chatbot.sendMessage(userMessage);

      // 显示机器人回复
      setState(() {
        _messages.add('Bot: $botResponse');
      });

      // 清空输入框
      _controller.clear();
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Chatbot Demo'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Expanded(
                child: ListView.builder(
                  itemCount: _messages.length,
                  itemBuilder: (context, index) {
                    return Padding(
                      padding: const EdgeInsets.symmetric(vertical: 4.0),
                      child: Text(
                        _messages[index],
                        style: TextStyle(
                          color: _messages[index].startsWith('User:')
                              ? Colors.blue
                              : Colors.grey,
                        ),
                      ),
                    );
                  },
                ),
              ),
              TextField(
                controller: _controller,
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'Type a message...',
                  suffixIcon: IconButton(
                    icon: Icon(Icons.send),
                    onPressed: _sendMessage,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中,我们创建了一个简单的聊天界面,用户可以输入消息并通过点击发送按钮与GPT聊天机器人进行交互。聊天机器人的回复会显示在用户界面上。

请注意,由于GPT API的使用可能涉及费用、配额限制和API密钥管理等,因此在实际应用中,你需要仔细处理这些细节,并确保遵守相关的服务条款和使用政策。此外,GPT API的响应时间和可用性也可能影响用户体验,因此在实际部署前应进行充分的测试。

回到顶部