Initial commit
This commit is contained in:
410
README.md
Normal file
410
README.md
Normal file
@@ -0,0 +1,410 @@
|
||||
# AI Code Assistant - Interface Web Style Claude
|
||||
|
||||
Interface web locale complète avec chat IA et éditeur de code intégré, similaire à Claude.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## ✨ Fonctionnalités
|
||||
|
||||
- 💬 **Chat en temps réel** avec WebSocket
|
||||
- 💻 **Éditeur de code intégré** avec exécution Python
|
||||
- 🎨 **Interface moderne** style Claude avec design soigné
|
||||
- 🤖 **Support multi-modèles** Ollama
|
||||
- 📝 **Syntaxe highlighting** pour code
|
||||
- ⚡ **Streaming des réponses** en temps réel
|
||||
- 🔄 **Historique des conversations**
|
||||
- 🎯 **API REST complète**
|
||||
|
||||
## 🏗️ Architecture
|
||||
|
||||
```
|
||||
ai-code-assistant/
|
||||
├── backend/
|
||||
│ ├── main.py # Backend FastAPI
|
||||
│ └── requirements.txt # Dépendances Python
|
||||
├── frontend/
|
||||
│ └── index.html # Interface React (SPA)
|
||||
├── start.sh # Script de démarrage
|
||||
├── stop.sh # Script d'arrêt
|
||||
└── README.md
|
||||
```
|
||||
|
||||
## 📋 Prérequis
|
||||
|
||||
### Système
|
||||
- **WSL2** sur Windows (Ubuntu 22.04 recommandé)
|
||||
- **Python 3.10+**
|
||||
- **Node.js** (optionnel, pour serveur dev)
|
||||
- **Ollama** installé et configuré
|
||||
|
||||
### GPU
|
||||
- **NVIDIA GPU** avec 8GB+ VRAM
|
||||
- **Drivers NVIDIA** pour WSL
|
||||
- **CUDA** configuré
|
||||
|
||||
### Modèles Ollama requis
|
||||
```bash
|
||||
ollama pull qwen2.5-coder:7b
|
||||
ollama pull code-expert # Si créé précédemment
|
||||
```
|
||||
|
||||
## 🚀 Installation rapide
|
||||
|
||||
### 1. Cloner/Copier les fichiers
|
||||
|
||||
```bash
|
||||
# Créer le dossier projet
|
||||
mkdir -p ~/ai-code-assistant
|
||||
cd ~/ai-code-assistant
|
||||
|
||||
# Copier tous les fichiers fournis dans cette structure:
|
||||
# - backend/main.py
|
||||
# - backend/requirements.txt
|
||||
# - frontend/index.html
|
||||
# - start.sh
|
||||
# - stop.sh
|
||||
```
|
||||
|
||||
### 2. Installer les dépendances
|
||||
|
||||
```bash
|
||||
# Créer l'environnement virtuel Python
|
||||
cd backend
|
||||
python3 -m venv venv
|
||||
source venv/bin/activate
|
||||
|
||||
# Installer les dépendances
|
||||
pip install -r requirements.txt
|
||||
```
|
||||
|
||||
### 3. Vérifier Ollama
|
||||
|
||||
```bash
|
||||
# Vérifier qu'Ollama tourne
|
||||
curl http://localhost:11434/api/tags
|
||||
|
||||
# Si non, démarrer Ollama
|
||||
ollama serve &
|
||||
|
||||
# Vérifier les modèles disponibles
|
||||
ollama list
|
||||
```
|
||||
|
||||
### 4. Démarrer l'application
|
||||
|
||||
```bash
|
||||
# Depuis la racine du projet
|
||||
cd ~/ai-code-assistant
|
||||
./start.sh
|
||||
```
|
||||
|
||||
L'interface sera disponible sur **http://localhost:9000**
|
||||
|
||||
## 🎮 Utilisation
|
||||
|
||||
### Interface Chat
|
||||
|
||||
1. **Écrire un message** dans la zone de texte en bas
|
||||
2. **Appuyer sur Entrée** ou cliquer sur ➤ pour envoyer
|
||||
3. Les réponses s'affichent en **streaming temps réel**
|
||||
4. **Cliquer sur "Copier"** dans les blocs de code pour copier
|
||||
5. **Cliquer sur "Tester"** pour ouvrir le code dans l'éditeur
|
||||
|
||||
### Éditeur de Code
|
||||
|
||||
1. Cliquer sur **💻 Code** en haut à droite
|
||||
2. Écrire du code Python dans l'éditeur
|
||||
3. Cliquer sur **▶ Exécuter** pour lancer
|
||||
4. Voir les résultats dans la zone de sortie
|
||||
|
||||
### Sélection du modèle
|
||||
|
||||
En bas de la sidebar, choisir le modèle à utiliser:
|
||||
- `qwen2.5-coder:7b` - Rapide et performant
|
||||
- `code-expert` - Optimisé pour le code (si créé)
|
||||
- `deepseek-coder-v2:16b` - Meilleure qualité (plus lent)
|
||||
|
||||
## 🔧 Configuration
|
||||
|
||||
### Backend (main.py)
|
||||
|
||||
Modifier les variables selon vos besoins:
|
||||
|
||||
```python
|
||||
# Port du backend
|
||||
uvicorn.run("main:app", host="0.0.0.0", port=8000)
|
||||
|
||||
# Timeout d'exécution de code
|
||||
timeout=10 # secondes
|
||||
```
|
||||
|
||||
### Frontend (index.html)
|
||||
|
||||
Modifier les constantes:
|
||||
|
||||
```javascript
|
||||
// URLs de l'API
|
||||
const API_URL = 'http://localhost:9001';
|
||||
const WS_URL = 'ws://localhost:9001/ws/chat';
|
||||
```
|
||||
|
||||
### Port du frontend
|
||||
|
||||
Le frontend est accessible sur le port **9000** par défaut.
|
||||
|
||||
## 🎨 Personnalisation du design
|
||||
|
||||
L'interface utilise des variables CSS pour faciliter la personnalisation:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--bg-primary: #0a0a0f;
|
||||
--accent-primary: #7c3aed;
|
||||
--accent-secondary: #a78bfa;
|
||||
/* ... autres variables */
|
||||
}
|
||||
```
|
||||
|
||||
Modifiez ces valeurs dans `frontend/index.html` pour changer les couleurs.
|
||||
|
||||
## 📡 API Endpoints
|
||||
|
||||
### Chat
|
||||
|
||||
**POST /chat**
|
||||
```bash
|
||||
curl -X POST http://localhost:9001/chat \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"messages": [{"role": "user", "content": "Bonjour"}],
|
||||
"model": "qwen2.5-coder:7b",
|
||||
"stream": true
|
||||
}'
|
||||
```
|
||||
|
||||
**WebSocket /ws/chat**
|
||||
```javascript
|
||||
const ws = new WebSocket('ws://localhost:9001/ws/chat');
|
||||
ws.send(JSON.stringify({
|
||||
message: "Écris un algorithme de tri",
|
||||
model: "code-expert"
|
||||
}));
|
||||
```
|
||||
|
||||
### Exécution de code
|
||||
|
||||
**POST /execute**
|
||||
```bash
|
||||
curl -X POST http://localhost:9001/execute \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"code": "print(\"Hello World\")",
|
||||
"language": "python"
|
||||
}'
|
||||
```
|
||||
|
||||
### Analyse de code
|
||||
|
||||
**POST /analyze-code**
|
||||
```bash
|
||||
curl -X POST http://localhost:9001/analyze-code \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"code": "def add(a,b): return a+b",
|
||||
"language": "python"
|
||||
}'
|
||||
```
|
||||
|
||||
### Correction de code
|
||||
|
||||
**POST /fix-code**
|
||||
```bash
|
||||
curl -X POST http://localhost:9001/fix-code \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"code": "for i in range(10) print(i)",
|
||||
"error": "SyntaxError: invalid syntax",
|
||||
"language": "python"
|
||||
}'
|
||||
```
|
||||
|
||||
### Liste des modèles
|
||||
|
||||
**GET /models**
|
||||
```bash
|
||||
curl http://localhost:9001/models
|
||||
```
|
||||
|
||||
### Health check
|
||||
|
||||
**GET /health**
|
||||
```bash
|
||||
curl http://localhost:9001/health
|
||||
```
|
||||
|
||||
## 🐛 Dépannage
|
||||
|
||||
### Backend ne démarre pas
|
||||
|
||||
```bash
|
||||
# Vérifier les logs
|
||||
cat /tmp/fastapi.log
|
||||
|
||||
# Vérifier que le port 9001 est libre
|
||||
lsof -i :8000
|
||||
|
||||
# Tuer le processus si nécessaire
|
||||
kill $(lsof -t -i :8000)
|
||||
```
|
||||
|
||||
### WebSocket ne connecte pas
|
||||
|
||||
```bash
|
||||
# Vérifier que le backend est lancé
|
||||
curl http://localhost:9001/health
|
||||
|
||||
# Vérifier les logs WebSocket
|
||||
grep -i websocket /tmp/fastapi.log
|
||||
```
|
||||
|
||||
### Ollama non accessible
|
||||
|
||||
```bash
|
||||
# Vérifier le service
|
||||
curl http://localhost:11434/api/tags
|
||||
|
||||
# Relancer Ollama
|
||||
pkill ollama
|
||||
ollama serve &
|
||||
```
|
||||
|
||||
### Code ne s'exécute pas
|
||||
|
||||
- Vérifier que Python 3 est installé: `python3 --version`
|
||||
- Vérifier les permissions: `ls -la backend/`
|
||||
- Augmenter le timeout dans `main.py` si code lent
|
||||
|
||||
### Frontend affiche une page blanche
|
||||
|
||||
```bash
|
||||
# Vérifier les logs navigateur (F12 → Console)
|
||||
# Vérifier que le serveur frontend tourne
|
||||
curl http://localhost:9000
|
||||
|
||||
# Relancer
|
||||
./stop.sh
|
||||
./start.sh
|
||||
```
|
||||
|
||||
## 🔐 Sécurité
|
||||
|
||||
⚠️ **ATTENTION**: Cette application est conçue pour un usage **local uniquement**.
|
||||
|
||||
**Limitations de sécurité actuelles**:
|
||||
- Exécution de code sans sandbox
|
||||
- Pas d'authentification
|
||||
- CORS ouvert (`allow_origins=["*"]`)
|
||||
|
||||
**Pour une utilisation en production**:
|
||||
1. Ajouter un système d'authentification
|
||||
2. Utiliser un sandbox pour l'exécution de code (Docker, VM)
|
||||
3. Limiter CORS aux origines autorisées
|
||||
4. Ajouter rate limiting
|
||||
5. Valider et sanitiser toutes les entrées
|
||||
6. Utiliser HTTPS/WSS
|
||||
|
||||
## 📊 Monitoring
|
||||
|
||||
### Logs disponibles
|
||||
|
||||
```bash
|
||||
# Backend FastAPI
|
||||
tail -f /tmp/fastapi.log
|
||||
|
||||
# Frontend
|
||||
tail -f /tmp/frontend.log
|
||||
|
||||
# Ollama
|
||||
tail -f /tmp/ollama.log
|
||||
```
|
||||
|
||||
### Surveiller les ressources
|
||||
|
||||
```bash
|
||||
# GPU
|
||||
watch -n 1 nvidia-smi
|
||||
|
||||
# Processus Python
|
||||
ps aux | grep python
|
||||
|
||||
# Ports utilisés
|
||||
netstat -tlnp | grep -E '9001|9000|11434'
|
||||
```
|
||||
|
||||
## 🚀 Améliorations futures
|
||||
|
||||
- [ ] Historique persistant des conversations
|
||||
- [ ] Support multi-langages (JS, Go, Rust, etc.)
|
||||
- [ ] Système de plugins
|
||||
- [ ] Thèmes personnalisables
|
||||
- [ ] Export des conversations
|
||||
- [ ] Intégration Git
|
||||
- [ ] Debugger visuel
|
||||
- [ ] Tests unitaires intégrés
|
||||
- [ ] Support du RAG (documentation personnalisée)
|
||||
- [ ] Mode collaboration (multi-utilisateurs)
|
||||
|
||||
## 📝 Commandes utiles
|
||||
|
||||
```bash
|
||||
# Démarrer
|
||||
./start.sh
|
||||
|
||||
# Arrêter
|
||||
./stop.sh
|
||||
|
||||
# Redémarrer
|
||||
./stop.sh && ./start.sh
|
||||
|
||||
# Voir tous les processus
|
||||
ps aux | grep -E 'ollama|python|http.server'
|
||||
|
||||
# Nettoyer complètement
|
||||
./stop.sh
|
||||
rm /tmp/ai-assistant-*.pid
|
||||
rm /tmp/*.log
|
||||
```
|
||||
|
||||
## 🤝 Contribution
|
||||
|
||||
Structure du code:
|
||||
- **Backend**: FastAPI avec WebSocket pour temps réel
|
||||
- **Frontend**: React 18 avec hooks
|
||||
- **Styling**: CSS pur avec variables
|
||||
- **Communication**: REST + WebSocket
|
||||
|
||||
Pour contribuer:
|
||||
1. Fork le projet
|
||||
2. Créer une branche (`git checkout -b feature/amelioration`)
|
||||
3. Commit (`git commit -m 'Ajout fonctionnalité X'`)
|
||||
4. Push (`git push origin feature/amelioration`)
|
||||
5. Ouvrir une Pull Request
|
||||
|
||||
## 📄 Licence
|
||||
|
||||
Projet personnel - Usage libre
|
||||
|
||||
## 🙏 Remerciements
|
||||
|
||||
- **Ollama** pour les modèles LLM locaux
|
||||
- **FastAPI** pour le backend performant
|
||||
- **React** pour l'interface réactive
|
||||
- **Anthropic** pour l'inspiration du design Claude
|
||||
|
||||
---
|
||||
|
||||
**Créé avec ❤️ pour le développement local d'IA**
|
||||
|
||||
Pour toute question, ouvrez une issue GitHub ou consultez la documentation Ollama.
|
||||
Reference in New Issue
Block a user