Flutter聊天机器人集成插件chat_gpt_sdk的使用

简介

ChatGPT是由OpenAI在2022年11月推出的聊天机器人，基于OpenAI的GPT-3.5大型语言模型，并通过监督学习和强化学习技术进行了微调。本文将介绍如何在Flutter应用中集成chat_gpt_sdk插件，实现与ChatGPT的交互。

安装插件

首先，在pubspec.yaml文件中添加chat_gpt_sdk依赖：

dependencies:
  flutter:
    sdk: flutter
  chat_gpt_sdk: ^3.1.4

运行flutter pub get以安装插件。

创建OpenAI实例

在开始使用之前，需要创建一个OpenAI实例。你需要从OpenAI获取API密钥和组织ID（如果有的话）。

import 'package:chat_gpt_sdk/chat_gpt_sdk.dart';

final openAI = OpenAI.instance.build(
  token: 'your-api-key',
  baseOption: HttpSetup(receiveTimeout: const Duration(seconds: 5)),
  enableLog: true,
);

更改访问令牌

如果你需要更改访问令牌，可以使用以下方法：

openAI.setToken('new-access-token');
// 获取当前令牌
String currentToken = openAI.token;

完成文本请求

使用FutureBuilder完成文本请求

void _translateEngToThai() async {
  final request = CompleteText(
    prompt: 'Translate this text to Thai: Hello World!',
    maxTokens: 200,
    model: TextDavinci3Model(),
  );

  final response = await openAI.onCompletion(request: request);
  print(response?.choices.last.text);
}

// UI代码示例
Future<CompleteResponse?>? _translateFuture;

@override
void initState() {
  super.initState();
  _translateFuture = openAI.onCompletion(request: request);
}

@override
Widget build(BuildContext context) {
  return FutureBuilder<CompleteResponse?>(
    future: _translateFuture,
    builder: (context, snapshot) {
      if (snapshot.connectionState == ConnectionState.done) {
        return Text(snapshot.data?.choices.last.text ?? '');
      } else {
        return CircularProgressIndicator();
      }
    },
  );
}

使用Server-Sent Events (SSE) 完成文本请求

void completeWithSSE() {
  final request = CompleteText(
    prompt: "Hello world",
    maxTokens: 200,
    model: TextDavinci3Model(),
  );

  openAI.onCompletionSSE(request: request).listen((it) {
    debugPrint(it.choices.last.text);
  });
}

聊天完成请求

基本聊天完成请求

void chatComplete() async {
  final request = ChatCompleteText(
    messages: [
      {'role': 'user', 'content': 'Hello!'}
    ],
    maxToken: 200,
    model: Gpt4ChatModel(),
  );

  final response = await openAI.onChatCompletion(request: request);
  for (var element in response!.choices) {
    print("data -> ${element.message?.content}");
  }
}

使用Server-Sent Events (SSE) 进行聊天完成请求

void chatCompleteWithSSE() {
  final request = ChatCompleteText(
    messages: [
      {'role': 'user', 'content': 'Hello!'}
    ],
    maxToken: 200,
    model: Gpt4ChatModel(),
  );

  openAI.onChatCompletionSSE(request: request).listen((it) {
    debugPrint(it.choices.last.message?.content);
  });
}

功能调用与图像输入

功能调用

void gptFunctionCalling() async {
  final request = ChatCompleteText(
    messages: [
      Messages(
        role: Role.user,
        content: "What is the weather like in Boston?",
        name: "get_current_weather"
      ).toJson(),
    ],
    maxToken: 200,
    model: Gpt41106PreviewChatModel(),
    tools: [
      {
        "type": "function",
        "function": {
          "name": "get_current_weather",
          "description": "Get the current weather in a given location",
          "parameters": {
            "type": "object",
            "properties": {
              "location": {
                "type": "string",
                "description": "The city and state, e.g. San Francisco, CA"
              },
              "unit": {
                "type": "string",
                "enum": ["celsius", "fahrenheit"]
              }
            },
            "required": ["location"]
          }
        }
      }
    ],
    toolChoice: 'auto',
  );

  ChatCTResponse? response = await openAI.onChatCompletion(request: request);
  debugPrint("$response");
}

图像输入

void imageInput() async {
  final request = ChatCompleteText(
    messages: [
      {
        "role": "user",
        "content": [
          {"type": "text", "text": "What’s in this image?"},
          {
            "type": "image_url",
            "image_url": {
              "url": "https://example.com/image.jpg"
            }
          }
        ]
      }
    ],
    maxToken: 200,
    model: Gpt4VisionPreviewChatModel(),
  );

  ChatCTResponse? response = await openAI.onChatCompletion(request: request);
  debugPrint("$response");
}

示例Demo

以下是一个简单的Flutter应用示例，展示如何使用chat_gpt_sdk进行文本翻译功能：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TranslateScreen(),
    );
  }
}

class TranslateScreen extends StatefulWidget {
  @override
  _TranslateScreenState createState() => _TranslateScreenState();
}

class _TranslateScreenState extends State<TranslateScreen> {
  final _txtWord = TextEditingController();
  late OpenAI openAI;
  Future<CompleteResponse?>? _translateFuture;

  @override
  void initState() {
    openAI = OpenAI.instance.build(
      token: 'your-api-key',
      baseOption: HttpSetup(receiveTimeout: const Duration(seconds: 20)),
      enableLog: true,
    );
    super.initState();
  }

  void _translateEngToThai() async {
    final request = CompleteText(
      prompt: 'Translate this text to Thai: ${_txtWord.text}',
      maxTokens: 200,
      model: TextDavinci3Model(),
    );

    setState(() {
      _translateFuture = openAI.onCompletion(request: request);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Translate App')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _txtWord,
              decoration: InputDecoration(hintText: 'Enter text to translate'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _translateEngToThai,
              child: Text('Translate'),
            ),
            SizedBox(height: 20),
            FutureBuilder<CompleteResponse?>(
              future: _translateFuture,
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return CircularProgressIndicator();
                } else if (snapshot.hasError) {
                  return Text('Error: ${snapshot.error}');
                } else if (snapshot.hasData) {
                  return Text('Translated Text: ${snapshot.data?.choices.last.text}');
                } else {
                  return Text('No translation yet.');
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}

这个示例展示了如何在Flutter应用中集成chat_gpt_sdk插件，实现简单的文本翻译功能。你可以根据自己的需求扩展这个示例，实现更多复杂的功能。