Como usar a API ChatGPT com Flutter para aplicativos de bate-papo

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.

Pré-requisitos

Antes de começar, certifique-se de ter:

1. Flutter e Dart instalados em seu sistema. Caso contrário, você pode baixá-los e instalá-los aqui.
2. Um IDE instalado, como VS Code ou Android Studio.
3. Conhecimento básico de Flutter e Dart.
4. Uma chave de API OpenAI. Você pode obter um no painel da OpenAI.

Configurando seu projeto Flutter

Comece criando um novo projeto Flutter:

flutter create chat_gpt_app

Vá para o diretório do seu novo projeto:

cd chat_gpt_app

Adicionando Dependências

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());
}

Criando o serviço API ChatGPT

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');
    }
  }
}

Construindo a interface de bate-papo

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),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Conectando a interface ao serviço ChatGPT

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.

#chatgpt  #flutter #openai