API ChatGPT é uma ferramenta poderosa que permite gerar mensagens de bate-papo realistas com GPT. Neste tutorial, você aprenderá como usar a API ChatGPT com Flutter para criar um aplicativo de chat com conversas dinâmicas.
Antes de começar, certifique-se de ter:
Comece criando um novo projeto Flutter:
flutter create chat_gpt_app
Vá para o diretório do seu novo projeto:
cd chat_gpt_app
Usaremos http para fazer solicitações HTTP para a API ChatGPT e dotenv para lidar com variáveis de ambiente (como a chave da API OpenAI). Adicione estas dependências ao seu arquivo pubspec.yaml:
dependencies:
flutter:
sdk: flutter
http: ^0.13.3
flutter_dotenv: ^5.0.0
Em seguida, execute flutter pub get para instalar as dependências.
Agora, crie um arquivo .env no diretório raiz do seu projeto e adicione sua chave de API OpenAI:
OPENAI_KEY=your_api_key_here
Certifique-se de carregar as variáveis de ambiente no início do seu aplicativo. Modifique o arquivo main.dart para incluir:
import 'package:flutter_dotenv/flutter_dotenv.dart' as dotenv;
void main() async {
await dotenv.load();
runApp(MyApp());
}
Crie um novo arquivo chamado chat_gpt_service.dart em seu diretório lib e escreva o seguinte código:
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:flutter_dotenv/flutter_dotenv.dart';
class ChatGPTService {
final String _apiUrl = 'https://api.openai.com/v1/engines/davinci-codex/completions';
final String _apiKey = dotenv.env['OPENAI_KEY']!;
Future<String> getResponse(String message) async {
final response = await http.post(
Uri.parse(_apiUrl),
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer $_apiKey'
},
body: jsonEncode({
'prompt': message,
'max_tokens': 60
})
);
if (response.statusCode == 200) {
return jsonDecode(response.body)['choices'][0]['text'];
} else {
throw Exception('Failed to load response');
}
}
}
Este tutorial não se concentra na criação de uma interface de usuário sofisticada. Portanto, para ser breve, criaremos uma interface de bate-papo simples com um TextField para a entrada do usuário e um FloatingActionButton para enviar mensagens.
No arquivo main.dart, substitua o código existente por:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: ChatScreen(),
);
}
}
class ChatScreen extends StatefulWidget {
@override
_ChatScreenState createState() => _ChatScreenState();
}
class _ChatScreenState extends State<ChatScreen> {
final List<String> _messages = [];
final TextEditingController _textController = TextEditingController();
void _handleSubmitted(String text) {
// Logic to send message will go here
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('ChatGPT')),
body: Column(
children: [
Expanded(
child: ListView.builder(
itemCount: _messages.length,
itemBuilder: (context, index) => ListTile(title: Text(_messages[index])),
),
),
Container(
margin: const EdgeInsets.symmetric(horizontal: 8.0),
child: Row(
children: [
Expanded(
child: TextField(
controller: _textController,
decoration: InputDecoration(hintText: 'Send a message'),
),
),
FloatingActionButton(
onPressed: () => _handleSubmitted(_textController.text),
child: Icon(Icons.send),
),
],
),
),
],
),
);
}
}
Finalmente, precisamos conectar nossa interface de chat ao serviço ChatGPT. Modifique a função _handleSubmitted no widget ChatScreen para:
import 'chat_gpt_service.dart';
// ...previous code
void _handleSubmitted(String text) async {
if (text.isEmpty) return;
_textController.clear();
setState(() {
_messages.add('User: $text');
});
final String response = await ChatGPTService().getResponse(text);
setState(() {
_messages.add('ChatGPT: $response');
});
}
É isso! Agora você tem um aplicativo Flutter integrado à API ChatGPT. Para iniciar o aplicativo, execute flutter run no seu terminal.
Lembre-se de manter sua chave de API segura e não a exponha em um aplicativo do mundo real. É recomendado configurar um servidor backend que se comunique com a API OpenAI, e seu aplicativo Flutter deve se comunicar com este servidor.