Flutter ChatGPT API客户端插件chatgpt_api_client的使用
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
更多关于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
插件。根据你的需求,你可以进一步扩展这个示例。