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

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

chat_bot_llm

在您的Flutter应用中添加自己的AI聊天机器人。您只需要在platform.openai.com创建一个助手,并将助手ID添加到代码中。

特性

  • 查看对话线程
  • 向助手发送消息并获取回复
  • 支持语音转文本
  • 您收到的每条消息都会被朗读出来

平台支持

Android iOS MacOS Web Linux Windows
✔️ ✔️

开始使用

pubspec.yaml文件中添加以下依赖:

dependencies:
  chat_bot_llm: ^0.0.7

导入包:

import 'package:chat_bot_llm/chat_bot_llm.dart';

main.dart文件中添加以下代码:

void main() async {
  await ChatBotLlm.initialize(
    "com.chatbotllm.example",
    appName,
    ASSISTANT_ID,
    ASSISTANT_NAME,
  );
  runApp(MyApp());
}

Android

AndroidManifest.xml文件中添加以下权限:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.VIBRATE"/>

iOS

Info.plist文件中添加以下描述:

<key>NSSpeechRecognitionUsageDescription</key>
<string>该应用需要此权限以支持语音转文本</string>
<key>NSMicrophoneUsageDescription</key>
<string>该应用需要此权限以支持语音转文本</string>

使用方法

初始化插件:

await ChatBotLlm.initialize(
  "com.chatbotllm.example",
  "Chatbot LLM Example",
  ASSISTANT_ID,
  ASSISTANT_NAME,
);

启动对话:

String userId = Uuid().v4();
await ChatBotLlm.openConversationScreen(context, userId);

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

1 回复

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


当然,以下是如何在Flutter项目中使用chat_bot_llm插件来实现一个聊天机器人功能的示例代码。请确保您已经安装了Flutter和Dart开发环境,并且已经在您的项目中添加了chat_bot_llm依赖。

首先,在您的pubspec.yaml文件中添加chat_bot_llm依赖:

dependencies:
  flutter:
    sdk: flutter
  chat_bot_llm: ^最新版本号  # 请替换为实际的最新版本号

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

接下来,是一个简单的Flutter应用示例,它展示了如何使用chat_bot_llm插件来创建一个聊天机器人界面。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Chat Bot App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ChatBotScreen(),
    );
  }
}

class ChatBotScreen extends StatefulWidget {
  @override
  _ChatBotScreenState createState() => _ChatBotScreenState();
}

class _ChatBotScreenState extends State<ChatBotScreen> {
  final ChatBotController _chatBotController = ChatBotController();
  final TextEditingController _userInputController = TextEditingController();
  final List<ChatMessage> _messages = [];

  @override
  void dispose() {
    _chatBotController.dispose();
    _userInputController.dispose();
    super.dispose();
  }

  void _sendMessage() async {
    if (_userInputController.text.isNotEmpty) {
      ChatMessage userMessage = ChatMessage(
        text: _userInputController.text,
        isUser: true,
      );
      setState(() {
        _messages.add(userMessage);
      });

      String botResponse = await _chatBotController.sendMessage(_userInputController.text);
      ChatMessage botMessage = ChatMessage(
        text: botResponse,
        isUser: false,
      );
      setState(() {
        _messages.add(botMessage);
        _userInputController.clear();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat Bot'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Expanded(
              child: ListView.builder(
                reverse: true,
                itemCount: _messages.length,
                itemBuilder: (context, index) {
                  ChatMessage message = _messages[index];
                  return Padding(
                    padding: const EdgeInsets.symmetric(vertical: 4.0),
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
                      decoration: BoxDecoration(
                        color: message.isUser ? Colors.white : Colors.grey[300],
                        borderRadius: BorderRadius.circular(16.0),
                      ),
                      child: Text(
                        message.text,
                        style: TextStyle(color: message.isUser ? Colors.black : Colors.black87),
                      ),
                    ),
                  );
                },
              ),
            ),
            Divider(),
            Container(
              decoration: BoxDecoration(
                border: Border(
                  top: BorderSide(color: Colors.grey[300]!, width: 0.5),
                ),
                padding: EdgeInsets.symmetric(horizontal: 16.0),
              ),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Expanded(
                    child: TextField(
                      controller: _userInputController,
                      decoration: InputDecoration(
                        border: InputBorder.none,
                        hintText: 'Type a message...',
                      ),
                    ),
                  ),
                  IconButton(
                    icon: Icon(Icons.send),
                    onPressed: _sendMessage,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class ChatMessage {
  final String text;
  final bool isUser;

  ChatMessage({required this.text, required this.isUser});
}

在这个示例中,我们创建了一个简单的聊天界面,用户可以输入消息,并通过点击发送按钮将消息发送给聊天机器人。聊天机器人的响应会显示在用户的消息下方。

请注意,ChatBotControllersendMessage方法的具体实现取决于chat_bot_llm插件的内部机制。您可能需要参考该插件的文档或源代码来了解如何正确初始化ChatBotController以及sendMessage方法的参数和返回值。

此外,您可能还需要配置聊天机器人的后端服务(如LLM模型),这通常涉及到设置API密钥、配置模型参数等步骤。这些步骤通常会在chat_bot_llm插件的官方文档中有详细说明。

回到顶部