Flutter实时OpenAI交互插件openai_realtime_dart的使用

简介

openai_realtime_dart 是一个非官方的、强类型的Dart客户端，用于与OpenAI的实时API进行交互。该API是一个基于状态和事件的WebSocket API。本指南将详细介绍如何在Flutter应用中使用此插件。

快速开始

安装

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

dependencies:
  openai_realtime_dart: ^latest_version

然后运行flutter pub get来安装包。

示例代码

以下是一个完整的示例，展示了如何初始化客户端、设置会话参数、连接到API并发送消息：

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:openai_realtime_dart/openai_realtime_dart.dart';

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

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

class OpenAIChat extends StatefulWidget {
  @override
  _OpenAIChatState createState() => _OpenAIChatState();
}

class _OpenAIChatState extends State<OpenAIChat> {
  final TextEditingController _controller = TextEditingController();
  final List<String> _messages = [];
  late RealtimeClient _client;

  @override
  void initState() {
    super.initState();
    _initializeClient();
  }

  Future<void> _initializeClient() async {
    _client = RealtimeClient(
      apiKey: Platform.environment['OPENAI_API_KEY'],
    );

    // 设置会话参数
    await _client.updateSession(instructions: 'You are a great, upbeat friend.');
    await _client.updateSession(voice: Voice.alloy);
    await _client.updateSession(
      inputAudioTranscription: const InputAudioTranscriptionConfig(model: 'whisper-1'),
    );

    // 设置事件处理
    _client.on(RealtimeEventType.conversationUpdated, (event) {
      final updatedEvent = event as RealtimeEventConversationUpdated;
      final item = updatedEvent.result.item;
      if (item?.item is ItemMessage) {
        setState(() {
          _messages.add((item!.item as ItemMessage).message.text);
        });
      }
    });

    // 连接到实时API
    await _client.connect();
  }

  Future<void> _sendMessage(String message) async {
    await _client.sendUserMessageContent([
      ContentPart.inputText(text: message),
    ]);
    _controller.clear();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('OpenAI Chat')),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: _messages.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(_messages[index]),
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(hintText: 'Enter your message'),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: () => _sendMessage(_controller.text),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _client.disconnect();
    super.dispose();
  }
}

使用说明

发送消息

你可以通过调用sendUserMessageContent方法向服务器发送文本消息或音频数据：

await client.sendUserMessageContent([
  ContentPart.inputText(text: 'How are you?'),
]);

发送流式音频

要发送流式音频，可以使用appendInputAudio方法：

for (var i = 0; i < 10; i++) {
  final data = Uint8List(2400);
  for (var n = 0; n < 2400; n++) {
    final value = (Random().nextDouble() * 2 - 1) * 0x8000;
    data[n] = value.toInt();
  }
  await client.appendInputAudio(data);
}
await client.createResponse();

添加和使用工具

可以通过addTool方法添加自定义工具，并设置回调函数来处理工具调用：

await client.addTool(
  const ToolDefinition(
    name: 'get_weather',
    description: 'Retrieves the weather for a location given its latitude and longitude coordinate pair.',
    parameters: {
      'type': 'object',
      'properties': {
        'lat': {
          'type': 'number',
          'description': 'Latitude of the location',
        },
        'lng': {
          'type': 'number',
          'description': 'Longitude of the location',
        },
      },
      'required': ['lat', 'lng'],
    },
  ),
  (Map<String, dynamic> params) async {
    final result = await HttpClient()
        .getUrl(
          Uri.parse(
            'https://api.open-meteo.com/v1/forecast?'
            'latitude=${params['lat']}&'
            'longitude=${params['lng']}&'
            'current=temperature_2m,wind_speed_10m',
          ),
        )
        .then((request) => request.close())
        .then((res) => res.transform(const Utf8Decoder()).join())
        .then(jsonDecode);
    return result;
  },
);

中断模型

如果你想手动中断模型生成，可以使用cancelResponse方法：

await client.cancelResponse(id, sampleCount);

处理事件

RealtimeClient提供了多种事件处理机制，可以根据需要监听特定事件：

client.on(RealtimeEventType.conversationUpdated, (event) {
  final updatedEvent = event as RealtimeEventConversationUpdated;
  final item = updatedEvent.result.item;
  if (item?.item is ItemMessage) {
    // Handle new message
  }
});

结论

通过openai_realtime_dart插件，你可以在Flutter应用中轻松实现与OpenAI实时API的交互。以上示例展示了如何初始化客户端、设置会话参数、发送消息、处理事件等基本操作。希望这能帮助你在项目中快速集成实时聊天功能。