├── .env.example
├── .github
    └── workflows
    │   └── django.yml
├── .gitignore
├── README.md
├── app.py
├── app
    ├── __init__.py
    ├── routes.py
    ├── static
    │   ├── icon
    │   │   └── chat-icon.png
    │   └── styles.css
    └── templates
    │   └── index.html
└── requirements.txt


/.env.example:
--------------------------------------------------------------------------------
1 | GOOGLE_AI_API_KEY = <you key>


--------------------------------------------------------------------------------
/.github/workflows/django.yml:
--------------------------------------------------------------------------------
 1 | name: Django CI
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [ "main" ]
 6 |   pull_request:
 7 |     branches: [ "main" ]
 8 | 
 9 | jobs:
10 |   build:
11 | 
12 |     runs-on: ubuntu-latest
13 |     strategy:
14 |       max-parallel: 4
15 |       matrix:
16 |         python-version: [3.7, 3.8, 3.9]
17 | 
18 |     steps:
19 |     - uses: actions/checkout@v4
20 |     - name: Set up Python ${{ matrix.python-version }}
21 |       uses: actions/setup-python@v3
22 |       with:
23 |         python-version: ${{ matrix.python-version }}
24 |     - name: Install Dependencies
25 |       run: |
26 |         python -m pip install --upgrade pip
27 |         pip install -r requirements.txt
28 |     - name: Run Tests
29 |       run: |
30 |         python manage.py test
31 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | __pycache__/
2 | *.pyc
3 | *.pyo
4 | 
5 | env/
6 | venv/
7 | 
8 | .env


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # 🤖 Chatbot - Guia de Configuração
 3 | 
 4 | Bem-vindo ao **Chatbot**! Este projeto foi desenvolvido para facilitar conversas interativas usando inteligência artificial. Siga os passos abaixo para configurar e executar.
 5 | 
 6 | ---
 7 | 
 8 | <div style="text-align: center;">
 9 |   <img src="https://github.com/user-attachments/assets/4005f669-93d8-4892-bca4-e46805eb8d20" alt="Descrição da imagem" width="800">
10 | </div>
11 | 
12 | ## 🔧 Pré-requisitos
13 | 
14 | Antes de começar, certifique-se de ter os seguintes itens instalados:
15 | 
16 | - **Python 3.10+** 🐍
17 | - Gerenciador de pacotes `pip` 📦
18 | 
19 | ---
20 | 
21 | ## 🚀 Como executar o projeto
22 | 
23 | 1. Clone este repositório para sua máquina local:
24 |    
25 |    git clone https://github.com/seu-usuario/seu-repositorio.git
26 | 
27 | 2. Navegue até o diretório do projeto:
28 | 
29 | cd seu-repositorio
30 | 
31 | 
32 | 3. Instale as dependências necessárias:
33 | 
34 | pip install -r requirements.txt
35 | 
36 | 
37 | 4. Configure sua chave de API no arquivo .env.example:
38 | 
39 | Substitua o nome do arquivo para .env e linha abaixo no arquivo .env:
40 | 
41 | API_KEY=SUACHAVEAQUI
42 | 
43 | Importante: Use uma chave válida do Generative AI.
44 | 
45 | 
46 | 
47 | 5. Execute o chatbot:
48 | 
49 | python app.py
50 | 
51 | 
52 | 
53 | 
54 | ---
55 | 
56 | ⚠️ Observações
57 | 
58 | Certifique-se de que sua chave de API está ativa e funcional.
59 | 
60 | Este projeto é compatível apenas com Python 3.10+.
61 | 
62 | Caso encontre problemas, consulte a seção de issues para buscar soluções ou relatar bugs.
63 | 
64 | 
65 | 
66 | ---
67 | 
68 | 🛠️ Funcionalidades
69 | 
70 | Respostas inteligentes usando Generative AI 🧠
71 | 
72 | Configuração simples e rápida ⚡
73 | 
74 | 
75 | 
76 | 
77 | 


--------------------------------------------------------------------------------
/app.py:
--------------------------------------------------------------------------------
1 | from app import app
2 | 
3 | if __name__ == "__main__":
4 |     app.run(debug=True)


--------------------------------------------------------------------------------
/app/__init__.py:
--------------------------------------------------------------------------------
1 | from flask import Flask
2 | 
3 | app = Flask(__name__)
4 | 
5 | from app import routes


--------------------------------------------------------------------------------
/app/routes.py:
--------------------------------------------------------------------------------
 1 | from flask import render_template, request, jsonify
 2 | import google.generativeai as genai
 3 | import os
 4 | 
 5 | 
 6 | genai.configure(api_key=os.environ["GOOGLE_AI_API_KEY"])
 7 | model = genai.GenerativeModel('gemini-pro')
 8 | 
 9 | from app import app
10 | 
11 | @app.route("/")
12 | def index():
13 |     return render_template("index.html")
14 | 
15 | @app.route("/chat", methods=["POST"])
16 | def chat():
17 |     cmd = "seja normal, não faça textos sem sentido, não faça textos muito longos, caso não souber resonder, responda com 'não sei'."
18 |     model.generate_content(cmd)
19 |     user_input = request.json.get("message")
20 |     if not user_input:
21 |         return jsonify({"response": "Por favor, envie uma mensagem válida."})
22 |     
23 |     try:
24 |         response = model.generate_content(user_input)
25 |         return jsonify({"response": response.text})
26 |     except Exception as e:
27 |         return jsonify({"response": "Erro ao processar a mensagem. Tente novamente mais tarde."})
28 |     


--------------------------------------------------------------------------------
/app/static/icon/chat-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GabrielNat1/Py-Chat-GenerativeIA/d9afdcffc462c70b1e87037c8c4ab2bedff153df/app/static/icon/chat-icon.png


--------------------------------------------------------------------------------
/app/static/styles.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     font-family: Arial, sans-serif;
  3 |     margin: 0;
  4 |     padding: 0;
  5 |     background-color: #f4f4f9;
  6 |     display: flex;
  7 |     justify-content: center;
  8 |     align-items: center;
  9 |     height: 100vh; /* Altura fixa para evitar rolagem na página */
 10 |     overflow: hidden; /* Desativa a rolagem da página */
 11 | }
 12 | 
 13 | .chat-container {
 14 |     width: 100%;
 15 |     max-width: 600px;
 16 |     background: #ffffff;
 17 |     border-radius: 10px;
 18 |     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 19 |     display: flex;
 20 |     flex-direction: column;
 21 |     height: 80vh; /* Define uma altura fixa para o container */
 22 | }
 23 | 
 24 | h1 {
 25 |     background: #4CAF50;
 26 |     color: white;
 27 |     margin: 0;
 28 |     padding: 15px;
 29 |     text-align: center;
 30 | }
 31 | 
 32 | #chat-box {
 33 |     flex: 1;
 34 |     padding: 15px;
 35 |     overflow-y: auto; /* Permite rolagem apenas na área de mensagens */
 36 |     border-bottom: 1px solid #ddd;
 37 |     background-color: #f9f9f9;
 38 |     display: flex;
 39 |     flex-direction: column;
 40 |     gap: 10px; /* Espaçamento entre mensagens */
 41 | }
 42 | 
 43 | .message {
 44 |     margin: 10px 0;
 45 |     padding: 10px;
 46 |     border-radius: 5px;
 47 | }
 48 | 
 49 | .message.user {
 50 |     background: #4CAF50;
 51 |     color: white;
 52 |     text-align: right;
 53 |     align-self: flex-end;
 54 | }
 55 | 
 56 | .message.bot {
 57 |     background: #ddd;
 58 |     color: black;
 59 |     text-align: left;
 60 |     align-self: flex-start;
 61 | }
 62 | 
 63 | #chat-form {
 64 |     display: flex;
 65 |     border-top: 1px solid #ddd;
 66 | }
 67 | 
 68 | #user-input {
 69 |     flex: 1;
 70 |     padding: 10px;
 71 |     border: none;
 72 |     outline: none;
 73 |     font-size: 16px;
 74 | }
 75 | 
 76 | button {
 77 |     background: #4CAF50;
 78 |     color: white;
 79 |     border: none;
 80 |     padding: 10px 20px;
 81 |     cursor: pointer;
 82 |     font-size: 16px;
 83 | }
 84 | /* Estiliza a barra de rolagem para navegadores compatíveis */
 85 | #chat-box::-webkit-scrollbar {
 86 |     width: 10px; /* Largura da barra de rolagem */
 87 | }
 88 | 
 89 | #chat-box::-webkit-scrollbar-track {
 90 |     background: #f4f4f9; /* Cor do trilho */
 91 |     border-radius: 5px; /* Borda arredondada */
 92 | }
 93 | 
 94 | #chat-box::-webkit-scrollbar-thumb {
 95 |     background: #4CAF50; /* Cor do polegar (scroll) */
 96 |     border-radius: 5px; /* Arredondar as extremidades */
 97 |     border: 2px solid #f4f4f9; /* Espaço ao redor do polegar */
 98 | }
 99 | 
100 | #chat-box::-webkit-scrollbar-thumb:hover {
101 |     background: #45a049; /* Cor do polegar ao passar o mouse */
102 | }
103 | 


--------------------------------------------------------------------------------
/app/templates/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Chatbot</title>
 7 |     <link rel="stylesheet" href="/static/styles.css">
 8 | </head>
 9 | <body>
10 |     <div class="chat-container">
11 |         <h1>Chatbot</h1>
12 |         <div id="chat-box"></div>
13 |         <form id="chat-form">
14 |             <input type="text" id="user-input" placeholder="Digite sua mensagem..." autocomplete="off">
15 |             <button type="button" id="send-button">Enviar</button>
16 |         </form>
17 |     </div>
18 | 
19 |     <script>
20 |         const chatBox = document.getElementById("chat-box");
21 |         const userInput = document.getElementById("user-input");
22 |         const sendButton = document.getElementById("send-button");
23 | 
24 |         sendButton.addEventListener("click", sendMessage);
25 |         userInput.addEventListener("keydown", (e) => {
26 |             if (e.key === "Enter") {
27 |                 e.preventDefault();
28 |                 sendMessage();
29 |             }
30 |         });
31 | 
32 |         async function sendMessage() {
33 |             const message = userInput.value.trim();
34 |             if (!message) return;
35 | 
36 |             const userMessage = document.createElement("div");
37 |             userMessage.className = "message user";
38 |             userMessage.textContent = "Você: " + message;
39 |             chatBox.appendChild(userMessage);
40 | 
41 |             userInput.value = "";
42 |             const botMessage = document.createElement("div");
43 |             botMessage.className = "message bot";
44 |             botMessage.textContent = "Chatbot está digitando...";
45 |             chatBox.appendChild(botMessage);
46 | 
47 |             try {
48 |                 const response = await fetch("/chat", {
49 |                     method: "POST",
50 |                     headers: { "Content-Type": "application/json" },
51 |                     body: JSON.stringify({ message }),
52 |                 });
53 | 
54 |                 const data = await response.json();
55 |                 botMessage.textContent = "Chatbot: " + data.response;
56 |             } catch (error) {
57 |                 botMessage.textContent = "Erro ao processar a mensagem.";
58 |             }
59 |         }
60 |     </script>
61 | </body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/requirements.txt:
--------------------------------------------------------------------------------
1 | Flask==2.3.2
2 | google-generativeai==0.2.2


--------------------------------------------------------------------------------