Como criar um chatbot com Python e chatgpt da OpenAI

• Por: Jonas
• 3 de Janeiro de 2024 às 21:13
• Views: 2600

Introdução

No último ano, assistimos a um grande aumento de conteúdo sobre inteligência artificial, impulsionado principalmente pela popularidade do CHATGPT da OpenAI. Com essa tendência em alta, decidimos criar um tutorial sobre como criar um chatbot com Python usando as APIs do ChatGPT da OpenAI. Além disso, vamos mostrar como usar o Flask, um servidor web, para criar uma interface mais amigável que o shell do Python. Uma das integrações mais interessantes com as APIs da OpenAI é a do ChatGPT 3.5 Turbo, que oferece muitas possibilidades para desenvolvedores interessados em linguagem natural avançada. Neste post, explicaremos como criar rapidamente uma aplicação de chat web com o Flask, integrando-a à API do CHATGPT 3.5 Turbo e adaptando o seu chatbot para funcionar como um atendente virtual do seu negócio.

Ao longo deste tutorial, cobriremos os passos essenciais: desde a integração efetiva da API do ChatGPT 3.5 Turbo, a criação de uma aplicação WEB em Flask. Esta abordagem não só proporciona uma compreensão clara de como essas poderosas ferramentas podem trabalhar juntas, mas também oferece um modelo prático que pode ser adaptado e expandido para atender às suas necessidades específicas de desenvolvimento.

Prepare-se para transformar suas ideias em realidade com a combinação eficiente de Python, Flask e ChatGPT 3.5 Turbo, e dê vida a uma aplicação de chat que não só impressiona, mas também oferece uma experiência de usuário fluida e interativa. Vamos começar!

Configurando ambiente e gerando chaves

Primeiro verifique se está tudo certo com seu ambiente de desenvolvimento você precisará do Python e de algum editor de texto da sua preferência, pode ser o vscode, o pycharm ou outro, vamos iniciar criando a sua virtualenv em seguida vamos instalar os dois pacotes que vamos usar no caso o Flask e o openai.

1. pip install Flask
   pip install openai

Agora vamos acessar o site da openia e criar sua conta caso ainda não tenha uma para podermos gerar nossa chave de autenticação.

O link do site é esse : https://openai.com/

Para gerar nossa chave, ao acessar escolha a opção API

E em seguida vá até a aba API Keys e crie a sua chave, para enviar nas suas chamadas de API.

Configurando nossa aplicação Flask

Primeiro vamos criar nosso arquivo app.py e colocar nosso servidor Flask para executar dá forma mais básica possável apenas respondendo o bom e velho Hello, World!

1. from flask import Flask
   
   # Criação da instância da aplicação Flask
   app = Flask(__name__)
   
   # Configuração da chave secreta da aplicação
   app.config['SECRET_KEY'] = 'SECRET_KEY'
   
   # Definição da rota principal e da função associada
   @app.route('/')
   def index():
       return '<p>Hello, World!</p>'
   
   # Inicialização do servidor apenas se este script for executado diretamente
   if __name__ == '__main__':
       app.run(debug=True)
   

Você pode usar o seguinte comando para executar seu servidor Flask:

1. # Para executar
   flask --app app.py --debug run
   

Ao executar o comando acima acesse este endereço no seu navegador http://127.0.0.1:5000 é onde o Flask executa por padrão as aplicações durante o desenvolvimento, se tudo deu certo até aqui hora de respirar pegar o café e vamos aos próximos passos.

Configurando a biblioteca da OpenAI

Agora vamos configurar e instanciar a classe que interage com a API do CHATGPT feito pela OpenAI passando nossa chave gerada, você deve observar que no exemplo abaixo adicionei a chave nas variáveis de ambiente do Sistema Operacional, você pode escrever usa chave diretamente mas recomendo tomar cuidado para não compartilhar seu código com a chave escrita, pois alguém pode usar sua conta e acabar com seus limites de chamadas e créditos na OpenAI.

Esse é o comando para MacOS e Linux para criar a variável de ambiente OPENAI_API_KEY

1. # Para exportar
   export OPENAI_API_KEY=suachaveaqui

1. import os
   from flask import Flask
   from openai import OpenAI
   # Você também poderia fazer uma atribuição direta OPENAI_API_KEY=Sua Chave
   # Configuração da chave da API do OpenAI
   OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")
   
   # Inicialização do aplicativo Flask
   app = Flask(__name__)
   app.config['SECRET_KEY'] = "YOUR_SECRET_KEY"
   
   # Criação do cliente OpenAI
   openai_client = OpenAI(api_key=OPENAI_API_KEY)
   
   # Rota principal
   @app.route("/")
   def index():
       return "<h1>Bem-vindo ao meu App Flask!</h1>"
   
   # Executar o aplicativo se este script for o principal
   if __name__ == "__main__":
       app.run(debug=True)
   

Recebendo perguntas do usuário via formulário

O próximo passo é criar o primeiro endpoint do nosso servidor Flask recebendo uma chamada POST através de um formulario HTML com a pergunta feita pelo usuário no em um input com o atributo name="pergunta" , para isso adicionaremos o seguinte código ao arquivo app.py.

1. import os
   from flask import Flask, render_template, request
   from openai import OpenAI
   
   # Configuração da chave da API do OpenAI
   OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")
   
   # Inicialização do aplicativo Flask
   app = Flask(__name__)
   app.config['SECRET_KEY'] = "YOUR_SECRET_KEY"
   
   # Criação do cliente OpenAI
   openai_client = OpenAI(api_key=OPENAI_API_KEY)
   
   # Rota principal com suporte aos métodos GET e POST
   @app.route("/", methods=["GET", "POST"])
   def index():
       if request.method == "POST":
           pergunta = request.form.get("pergunta")
           # Aqui você pode adicionar lógica para lidar com a pergunta
           print(pergunta)
       return render_template("index.html")
   

2. 
   

Vamos criar também a pasta templates na raiz do projeto, que é o local onde o Flask busca seus arquivos html.

---- templates

     ----- index.html   --> nosso arquivo HTML

Agora podemos criar nosso formulário HTML com apenas um campo para o usuário digitar sua pergunta e o botão de enviar para o nosso servidor Flask.

1. <!DOCTYPE html>
   <html>
   <head>
       <title>ChatGPT com OpenAI e Flask</title>
   </head>
   
   <body>
       
       <h1>ChatGpt com OpenAI e Flask</h1>
       
       <div>
           <form method="POST" action="/">
               <input type="text" name="pergunta" placeholder="Digite sua pergunta" />
               <input type="submit" name="submit" value="Enviar" />
           </form>
       </div>
   
   </body>
   </html>
   

Integrando nossas perguntas a API do CHATGPT

Agora vamos fazer a função que envia nossa pergunta recebida através do formulário para a API do chatgpt processar e pegaremos o retorno e salvaremos na sessão do nosso navegador utilizando a lib session do Flask, isso vai nos proporcionar salvar a lista de perguntas e respostas durante todo o tempo que o usuário estiver nessa sessão do navegador.

1. import os
   from flask import Flask, render_template, request, session
   from openai import OpenAI
   
   # Configuração da chave da API do OpenAI
   OPENAI_API_KEY = os.environ.get("OPENAI_API_KEY")
   
   # Inicialização do aplicativo Flask
   app = Flask(__name__)
   app.secret_key = "SECRET_KEY"
   
   # Criação do cliente OpenAI
   openai_client = OpenAI(api_key=OPENAI_API_KEY)
   
   def chatgpt_send_message(question):
       context = "Você é um atendente de SAC"
       completion = openai_client.chat.completions.create(
           model="gpt-3.5-turbo",
           messages=[
               {"role": "system", "content": context},
               {"role": "user", "content": question},
           ],
       )
       print(completion.choices)
       return {"role": "assistant", "content": completion.choices[0].message.content}
   
   @app.route("/", methods=("GET", "POST"))
   def send_messages():
       if request.method == "POST":
           pergunta = request.form["pergunta"]
           user_message = {"role": "user", "content": pergunta}
           # Criação da sessão historico_chat para armazenar a lista de mensagens
           historico_chat = session.get("historico_chat", [])
           historico_chat.append(user_message)
           historico_chat.append(chatgpt_send_message(pergunta))
           session["historico_chat"] = historico_chat
           return render_template("index.html", historico_chat=session["historico_chat"])
       return render_template("index.html")
   
   # Para executar: flask --app app.py --debug run
   

Exibindo todas as mensagens do chat na tela.

Agora vamos pegar nossa lista de mensagens e começar a exibir na nossa página index.html, para isso usaremos o {% for do Flask para percorrermos a lista de menasgens salva na nossa sessão que chamamos de historico_chat.

1. <!DOCTYPE html>
   <html>
   <head>
       <title>Assistente Virtual com OpenAI e Flask</title>
   </head>
   
   <body>
       <h1>ChatGpt com OpenAI e Flask</h1>
       
       {% if historico_chat %}
       <div>
           {% for message in historico_chat %} 
               {% if message.role == 'user' %}
               <div>
                   <span> {{ message.content }} </span>
               </div>
               {% else %}
               <div>
                   <span> {{ message.content }} </span>
               </div>
               {% endif %}
           {% endfor %}
       </div>
       {% endif %}
   
       <div>
           <form method="POST" action="/">
               <input type="text" name="pergunta" placeholder="Digite sua pergunta" />
               <input type="submit" name="submit" value="Enviar" />
           </form>
       </div>
   </body>
   </html>
   

Limpando nosso chat e começando novamente.

Agora vamos adicionar o botão de limpar s sessão historico_chat que usamos para armazenar as mensagens do chat, para que o usuário consiga iniciar um novo chat do a qualquer momento, para isso vamos criar um endpoint no arquivo app.py chamado delete_chat ele será chamado por outro formulário no index.html, assim fica nosso app.py

1. import os
   from flask import Flask, render_template, request, session
   from openai import OpenAI
   
   # Carrega a chave da API do OpenAI a partir das variáveis de ambiente
   OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")
   
   # Inicializa a aplicação Flask
   app = Flask(__name__)
   # Define uma chave secreta para a sessão - substitua com uma chave segura
   app.secret_key = "SUA_CHAVE_SECRETA_AQUI"
   
   # Cria o cliente OpenAI com a chave da API
   openai_client = OpenAI(api_key=OPENAI_API_KEY)
   
   def chatgpt_send_message(question):
       """
       Envia uma mensagem para o ChatGPT e retorna a resposta.
       """
       # Contexto para o ChatGPT
       context = "Você é um atendente de SAC"
       # Realiza o pedido de completamento de texto para o OpenAI
       completion = openai_client.chat.completions.create(
           model="gpt-3.5-turbo",
           messages=[
               {"role": "system", "content": context},
               {"role": "user", "content": question},
           ],
       )
       # Retorna a resposta do assistente
       return {"role": "assistant", "content": completion.choices[0].message.content}
   
   @app.route("/", methods=["GET", "POST"])
   def send_messages():
       """
       Rota principal que trata as mensagens enviadas pelo usuário.
       """
       if request.method == "POST":
           pergunta = request.form["pergunta"]
           user_message = {"role": "user", "content": pergunta}
           # Obtém o histórico de chat da sessão, se disponível
           historico_chat = session.get("historico_chat", [])
           # Adiciona a mensagem do usuário e a resposta ao histórico
           historico_chat.append(user_message)
           historico_chat.append(chatgpt_send_message(pergunta))
           session["historico_chat"] = historico_chat
           return render_template("index.html", historico_chat=historico_chat)
       return render_template("index.html")
   
   @app.route("/delete-chat", methods=["POST"])
   def delete_chat():
       """
       Endpoint para limpar o histórico do chat.
       """
       session.pop("historico_chat", None)
       return render_template("index.html")
   
   if __name__ == "__main__":
       # Executa a aplicação em modo de desenvolvimento
       app.run(debug=True)
   

E assim fica o arquivo index.html

<!DOCTYPE html>
<html>
<head>
    <title>Assistente Virtual com OpenAI e Flask</title>
</head>

<body>
    
    <h1>ChatGpt com OpenAI e Flask</h1>

    <hr>
    <br>
    
    <div>
    {% if historico_chat %}
        <div>
            {% for message in historico_chat %} 
                {% if message.role == 'user' %}
                <div>
                    <span> {{ message.content }} </span>
                </div>
                {% else %}
                <div>
                    <span> {{ message.content }} </span>
                </div>
                {% endif %}
            {% endfor %}
        </div>
    {% endif %}
    </div>

    <hr>
    
    <div>
        <form method="POST" action="/">
            <input type="text" name="pergunta" placeholder="Digite sua pergunta" />
            <input type="submit" name="submit" value="Enviar" />
        </form>
    </div>

    <div>
        <form method="POST" action="/delete-chat">
            <label>Limpar historico de conversa? </label>
            <input type="submit" name="clear" value="Limpar" />
        </form>
    </div>

</body>
</html>

Estilizando nosso chat com css

Agora para finalizar nosso chat, vamos adicionar o estilo utilizando classes do css que vamos colocar entre a tag <style> no <head> do nosso arquivo index.html, vamos adicionar também uma imagem ao lado da listagem das nossas mensagens para que tenhamos uma foto ao lado da imagem, para isso nós vamos criar uma pasta static e dentro dela ima pasta img na raiz do nosso projeto e adicionar duas imagens lá, você pode adicionar as imagens que desejar na pasta que elas aparecerão ao lado da mensagem, no nosso exemplo adicionei uma com nome user.svg e outra com o nome assistente.svg.

<!DOCTYPE html>
<html>
<head>
    <title>Assistente Virtual com ChatGPT e Flask</title>
    <style>
        body {background-color: white;}
        h1   {color: black;}
        .div-centro {
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
            padding: 10px;
            margin: 10px;
            width: 100%;
            float: center;
        }
        .input_chat {
            margin-top: 20px;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ced4da;
            width: 100%;
        }
        .button_chat {
            border-radius: 5px;
            padding: 10px;
            margin: 10px;
            width: 100%;
            float: center;
        }
        .user_message {
            background-color: #e6e6e6;
            border-radius: 5px;
            padding: 10px;
            margin: 10px;
            width: 50%;
            float: right;
            display: flex;
        }
        .assistant_message {
            background-color: #e6e6e6;
            border-radius: 5px;
            padding: 10px;
            margin: 10px;
            width: 50%;
            float: left;
            display: flex;
        }
        .user_logo, .assistant_logo {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 15px;
        }
    </style>
</head>

<body>
    
    <h1>ChatGpt com OpenAI e Flask</h1>

    <hr>
    <br>
    
    <div class=div-centro>
    {% if historico_chat %}
        <div>
            {% for message in historico_chat %} 
                {% if message.role == 'user' %}
                <div class="user_message">
                    <img class="user_logo" src="../static/img/user.svg" alt="Logo do usuário">
                    <span> {{ message.content }} </span>
                </div>
                {% else %}
                <div class="assistant_message">
                    <img class="user_logo" src="../static/img/assistente.svg" alt="Logo do usuário">
                    <span> {{ message.content }} </span>
                </div>
                {% endif %}
            {% endfor %}
        </div>
    {% endif %}
    </div>

    <hr>
    
    <div class=div-centro>
        <form method="POST" action="/">
            <input class="input_chat" type="text" name="pergunta" placeholder="Digite sua pergunta" />
            <input  class="button_chat" type="submit" name="submit" value="Enviar" />
        </form>
    </div>

    <div class=div-centro>
        <form method="POST" action="/delete-chat">
            <label>Limpar historico de conversa? </label>
            <input type="submit" name="clear" value="Limpar" />
        </form>
    </div>

</body>
</html>

Visão final do projeto

Agora que chegamos aqui execute seu projeto e se tudo estiver correto você terá na tela do seu navegador o seguinte resultado

Conclusão

À medida que chegamos ao final deste tutorial sobre como criar um chatbot com Python utilizando a API do ChatGPT 3.5 Turbo, refletimos sobre o universo de possibilidades infinitas que esta tecnologia nos oferece. Demonstramos o poder da combinação entre a linguagem de programação Python e as capacidades avançadas da GPT-3.5 Turbo, abrindo portas para uma nova era de interações digitais automatizadas e inteligentes.

Os chatbots, especialmente aqueles alimentados pela inteligência artificial de ponta, estão redefinindo o modo como interagimos com os sistemas digitais, desde o suporte ao cliente até a automação de tarefas rotineiras. É crucial reconhecer e abordar os desafios técnicos e usa-los ao nosso favor.

Encorajamos você, nosso leitor, a levar adiante o que aprendeu aqui. Experimente, inove e não hesite em adaptar e melhorar o seu chatbot. Lembre-se de que a aprendizagem é um processo contínuo, e a área de inteligência artificial está em constante evolução. Mantenha-se curioso e engajado!

Gostaríamos de convidá-lo a compartilhar suas experiências, dúvidas e sucessos nos comentários abaixo. Sua participação é o que constrói a força de nossa comunidade, transformando este espaço em um ponto de encontro para entusiastas e profissionais da tecnologia.

Por fim, olhamos para o futuro com otimismo e curiosidade. As possibilidades são tão vastas quanto nossa imaginação, e estamos apenas arranhando a superfície do que pode ser alcançado com chatbots e IA. Continuaremos explorando, aprendendo e compartilhando – junte-se a nós nesta jornada inspiradora rumo ao amanhã.

Nos próximos tutoriais abordaremos as demais API`s da OpenAI, como a de geração de imagens através de texto, se inscreva na nossa newsletter e aguardo você no próximo post, obrigado!