poc-chat/
├── backend/
│ ├── venv/ # Ambiente virtual Python
│ ├── __pycache__/
│ ├── .env # Variáveis de ambiente (API Key, etc.)
│ ├── app.py # Aplicação backend Flask/SocketIO
│ ├── requirements.txt # Dependências do backend
│ └── system_instruction.md # Instruções do sistema para o LLM
├── frontend/
│ ├── public/
│ │ ├── index.html # Arquivo HTML principal
│ │ └── manifest.json
│ ├── src/
│ │ ├── App.css # Estilos para o componente App
│ │ ├── App.jsx # Componente principal do React
│ │ ├── index.css # Estilos globais
│ │ └── index.js # Ponto de entrada do frontend
│ ├── .env # Variáveis de ambiente (URL do backend, etc.)
│ └── package.json # Dependências e scripts do frontend
├── .gitignore # Arquivos e diretórios a serem ignorados pelo Git
├── README.md # Este arquivo
├── start.sh # Script para iniciar backend e frontend
└── stop.sh # Script para parar backend e frontend
Este projeto tem como objetivo criar uma aplicação de chat em tempo real que utiliza um Large Language Model (LLM) para gerar respostas, demonstrando a integração entre frontend (React), backend (Flask/SocketIO) e uma API de LLM (Google Gemini).
- Chat em tempo real via WebSocket.
- Respostas geradas por um LLM (Google Gemini).
- Streaming das respostas do LLM para uma experiência de chat mais dinâmica.
- Indicador de digitação do bot.
- Gerenciamento simples da conversa.
Backend:
- Python
- Flask: Microframework web.
- Flask-SocketIO: Integração com WebSockets.
- python-dotenv: Carregar variáveis de ambiente.
- google-generativeai: Interação com a API Google Gemini.
- eventlet: Suporte a assincronicidade para SocketIO.
Frontend:
- React: Biblioteca JavaScript para construir interfaces de usuário.
- Socket.IO Client: Cliente WebSocket para comunicação com o backend.
- react-markdown e remark-gfm: Para renderizar respostas do LLM formatadas em Markdown.
Backend (backend/requirements.txt):
annotated-types==0.7.0
anyio==4.9.0
bidict==0.23.1
blinker==1.9.0
cachetools==5.5.2
certifi==2025.4.26
charset-normalizer==3.4.2
click==8.2.0
dnspython==2.7.0
eventlet==0.40.0
Flask==3.1.1
Flask-SocketIO==5.5.1
google-ai-generativelanguage==0.6.15
google-api-core==2.24.2
google-api-python-client==2.169.0
google-auth==2.40.1
google-auth-httplib2==0.2.0
google-genai==1.15.0
google-generativeai==0.8.5
googleapis-common-protos==1.70.0
greenlet==3.2.2
grpcio==1.71.0
grpcio-status==1.71.0
h11==0.16.0
httpcore==1.0.9
httplib2==0.22.0
httpx==0.28.1
idna==3.10
itsdangerous==2.2.0
Jinja2==3.1.6
MarkupSafe==3.0.2
netifaces==0.10.6
proto-plus==1.26.1
protobuf==5.29.4
pyasn1==0.6.1
pyasn1_modules==0.4.2
pydantic==2.11.4
pydantic_core==2.33.2
pyparsing==3.2.3
python-dotenv==1.1.0
python-engineio==4.12.1
python-socketio==5.13.0
requests==2.32.3
rsa==4.9.1
simple-websocket==1.1.0
sniffio==1.3.1
socketio==0.2.1
tqdm==4.67.1
typing-inspection==0.4.0
typing_extensions==4.13.2
uritemplate==4.1.1
urllib3==2.4.0
websockets==15.0.1
Werkzeug==3.1.3
wsproto==1.2.0
Frontend (frontend/package.json):
{
...
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"socket.io-client": "^4.8.1",
"react-markdown": "^9.0.1",
"remark-gfm": "^4.0.0"
},
...
}- Python 3.6+
- Node.js e npm/yarn
- Uma API Key do Google Gemini.
- Clone o repositório.
- Crie um arquivo
.envna pastabackendcom sua Google API Key:GOOGLE_API_KEY=SUA_API_KEY_AQUI
- Crie um arquivo
.envna pastafrontendcom a URL do backend:REACT_APP_BACKEND_URL=http://localhost:5555
Você pode usar os scripts start.sh e stop.sh na raiz do projeto para gerenciar as aplicações backend e frontend.
Para iniciar a aplicação:
Certifique-se de que você está na raiz do projeto no terminal e execute:
./start.shEste script irá:
- Navegar para o diretório
backend. - Criar e ativar o ambiente virtual Python (
venv) se ele não existir. - Instalar as dependências do backend (
pip install -r requirements.txt). - Iniciar o servidor backend em segundo plano na porta 5555.
- Navegar para o diretório
frontend. - Instalar as dependências do frontend (
npm install) se elas não estiverem instaladas. - Iniciar o servidor de desenvolvimento do frontend na porta 3000.
Para parar a aplicação:
Abra um novo terminal na raiz do projeto e execute:
./stop.shEste script irá tentar encontrar e encerrar os processos do backend (porta 5555) e frontend (porta 3000).
Backend:
- Navegue até o diretório
backend. - Ative o ambiente virtual:
source venv/bin/activate. - Execute a aplicação:
python app.py.
Frontend:
- Navegue até o diretório
frontend. - Instale as dependências (se ainda não o fez):
npm install(ouyarn install). - Inicie o servidor de desenvolvimento:
npm start(ouyarn start).
Certifique-se de que o backend esteja rodando antes de iniciar o frontend.