Flutter ChatGPT API客户端插件chatgpt_api_client的使用

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

Flutter ChatGPT API客户端插件chatgpt_api_client的使用

标题

Flutter ChatGPT API客户端插件chatgpt_api_client的使用

内容

你可以通过OpenAI API请求ChatGPT。

更多关于OpenAI API的详细信息:comletions

特性

  • 询问ChatGPT问题
  • 支持完整的模型选项,参数详情:comletions
  • 支持提示(prompt)
  • 支持普通请求和流式请求

开始使用

TODO: 列出先决条件并提供或指向如何开始使用该包的信息。

使用

完整的示例可以在看到./example

/// 初始化实例与模型选项
ChatGptApiClient client =
    ChatGptApiClient(api_key, ChatGptModelOption(stream: false));

/// 发送消息到ChatGPT
client.sendMessage(text,
    onData: (ChatGptApiResponse response) {
      print(response);
    },
    onStreamData: (ChatGptApiResponse response) {
      print(response);
    },
    onStreamEnd: () {
      print('end');
    });

示例代码

import 'package:example/api_key.dart';
import 'package:flutter/material.dart';
import 'package:chatgpt_api_client/chatgpt_api_client.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个包是你的应用程序的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> chatList = [];
  bool sendBtnDisabled = false;

  /// 初始化客户端
  ChatGptApiClient client = ChatGptApiClient(
      api_key, ChatGptModelOption(stream: false, maxPropmtStack: 3));

  TextEditingController textController = TextEditingController();

  void _incrementCounter() {
    // 忽略apiKey.dart以提交,仅为OpenAI API密钥字符串
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.max,
          children: [
            Expanded(
              child: Container(
                color: Colors.grey.shade100,
                child: ListView.builder(
                  reverse: true,
                  itemCount: chatList.length,
                  itemBuilder: (context, index) {
                    return Container(
                      decoration: BoxDecoration(
                          border: Border.all(color: Colors.black)),
                      child: Text(chatList[chatList.length - index - 1]),
                    );
                  },
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.all(5),
              alignment: Alignment.bottomLeft,
              height: 60,
              color: Colors.green,
              child: Row(children: [
                SizedBox(
                    width: 300,
                    child: TextField(
                      style: const TextStyle(fontSize: 20),
                      controller: textController,
                    )),
                IconButton(
                  icon: const Icon(Icons.send),
                  onPressed: sendBtnDisabled
                      ? null
                      : () {
                          String text = textController.text;
                          textController.clear();
                          setState(() {
                            chatList.add('Me:\n $text');
                            sendBtnDisabled = true;
                          });
                          // 发送消息
                          client.sendMessage(text,
                              onData: (ChatGptApiResponse response) {
                            print(response);
                            setState(() {
                              chatList.add(
                                  'ChatGpt:\n ${response.choices[0].text}');
                              sendBtnDisabled = false;
                            });
                          }, onStreamData: (ChatGptApiResponse response) {
                            // print(response);
                          }, onStreamEnd: () {
                            // print('end');
                          });
                          // print(textController.text);
                        },
                )
              ]),
            ),
            // Positioned(
            //   child: Row(children: [Text('23'), Text('444')]),
            //   bottom: 0,
            //   left: 0,
            // )
          ],
        ),
      ),
    );
  }
}

更多关于Flutter ChatGPT API客户端插件chatgpt_api_client的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter ChatGPT API客户端插件chatgpt_api_client的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter项目中使用chatgpt_api_client插件的示例代码。这个插件允许你与ChatGPT API进行交互。请注意,你需要有一个ChatGPT API的访问令牌(API Key)来使用这个插件。

首先,确保你已经在pubspec.yaml文件中添加了chatgpt_api_client依赖:

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

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

接下来,在你的Flutter项目中,你可以创建一个服务类来处理与ChatGPT API的交互。下面是一个示例:

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

class ChatGPTService {
  final ChatGPTApiClient chatGPTApiClient;

  ChatGPTService({required String apiKey})
      : chatGPTApiClient = ChatGPTApiClient(apiKey: apiKey);

  Future<String?> getMessage(String prompt) async {
    try {
      final response = await chatGPTApiClient.sendMessage(
        model: 'gpt-3.5-turbo',  // 或者使用其他可用的模型
        messages: [
          ChatMessage(role: 'user', content: prompt),
        ],
      );
      return response.choices!.first.message.content;
    } catch (e) {
      print('Error fetching message: $e');
      return null;
    }
  }
}

在这个服务类中,我们创建了一个ChatGPTApiClient实例,并定义了一个getMessage方法来发送消息到ChatGPT API并获取回复。

现在,让我们创建一个简单的Flutter界面来使用这个服务:

void main() {
  final chatGPTService = ChatGPTService(apiKey: '你的ChatGPT API Key');  // 请替换为你的API Key
  runApp(MyApp(chatGPTService: chatGPTService));
}

class MyApp extends StatelessWidget {
  final ChatGPTService chatGPTService;

  MyApp({required this.chatGPTService});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ChatScreen(chatGPTService: chatGPTService),
    );
  }
}

class ChatScreen extends StatefulWidget {
  final ChatGPTService chatGPTService;

  ChatScreen({required this.chatGPTService});

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

class _ChatScreenState extends State<ChatScreen> {
  final TextEditingController _controller = TextEditingController();
  String? _responseText;

  void _sendMessage() async {
    final prompt = _controller.text;
    if (prompt.isNotEmpty) {
      setState(() {
        _responseText = 'Loading...';
      });
      final response = await widget.chatGPTService.getMessage(prompt);
      setState(() {
        _responseText = response;
        _controller.clear();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ChatGPT Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextField(
              controller: _controller,
              decoration: InputDecoration(
                labelText: 'Your message',
              ),
              maxLines: 4,
              keyboardType: TextInputType.multiline,
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: _sendMessage,
              child: Text('Send'),
            ),
            SizedBox(height: 16),
            if (_responseText != null)
              Text(
                _responseText!,
                style: TextStyle(fontSize: 18),
              ),
          ],
        ),
      ),
    );
  }
}

在这个示例中,我们创建了一个简单的聊天界面,用户可以在文本框中输入消息,然后点击“Send”按钮发送消息到ChatGPT API并显示回复。

请注意,在实际应用中,你不应该在客户端代码中硬编码API Key。考虑使用环境变量或安全存储来管理敏感信息。

这个示例应该能够帮助你开始在Flutter项目中使用chatgpt_api_client插件。根据你的需求,你可以进一步扩展这个示例。

回到顶部