411 lines
8.5 KiB
Markdown
411 lines
8.5 KiB
Markdown
# 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.
|