339 lines
7.7 KiB
Markdown
339 lines
7.7 KiB
Markdown
|
# 🤖 AI Code Assistant - Interface Web Complète
|
||
|
|
|
||
|
|
**Interface web locale style Claude avec FastAPI + React pour développement assisté par IA**
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 📦 Contenu du package
|
||
|
|
|
||
|
|
```
|
||
|
|
ai-code-assistant/
|
||
|
|
├── 📖 README.md # Ce fichier
|
||
|
|
├── 📖 QUICKSTART.md # Guide de démarrage rapide
|
||
|
|
├── 📖 IA-Locale-Code-WSL.md # Guide complet d'installation Ollama sur WSL
|
||
|
|
├── 📖 EXAMPLES.md # Exemples d'utilisation avancée
|
||
|
|
│
|
||
|
|
├── 🔧 backend/
|
||
|
|
│ ├── main.py # Serveur FastAPI avec WebSocket
|
||
|
|
│ └── requirements.txt # Dépendances Python
|
||
|
|
│
|
||
|
|
├── 🎨 frontend/
|
||
|
|
│ └── index.html # Interface React complète (SPA)
|
||
|
|
│
|
||
|
|
├── 🚀 start.sh # Script de démarrage automatique
|
||
|
|
└── 🛑 stop.sh # Script d'arrêt
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## ✨ Fonctionnalités principales
|
||
|
|
|
||
|
|
### 💬 Chat IA en temps réel
|
||
|
|
- Communication WebSocket avec streaming
|
||
|
|
- Réponses progressives token par token
|
||
|
|
- Support multi-modèles Ollama
|
||
|
|
- Historique des conversations
|
||
|
|
- Interface moderne style Claude
|
||
|
|
|
||
|
|
### 💻 Éditeur de code intégré
|
||
|
|
- Éditeur Python avec coloration syntaxique
|
||
|
|
- Exécution de code en temps réel
|
||
|
|
- Affichage des résultats et erreurs
|
||
|
|
- Copie facile des blocs de code
|
||
|
|
|
||
|
|
### 🎨 Design moderne
|
||
|
|
- Interface sombre avec effets de glassmorphisme
|
||
|
|
- Animations fluides et micro-interactions
|
||
|
|
- Typographie soignée (Space Grotesk + JetBrains Mono)
|
||
|
|
- Responsive design
|
||
|
|
- Grain texture overlay pour un aspect premium
|
||
|
|
|
||
|
|
### 🔌 API REST complète
|
||
|
|
- Chat synchrone et asynchrone
|
||
|
|
- Exécution de code (Python, JS, Bash)
|
||
|
|
- Analyse de code avec IA
|
||
|
|
- Correction automatique de bugs
|
||
|
|
- Liste des modèles disponibles
|
||
|
|
- Health check endpoint
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 🚀 Installation ultra-rapide
|
||
|
|
|
||
|
|
### Prérequis
|
||
|
|
- **WSL2** avec Ubuntu 22.04+
|
||
|
|
- **Python 3.10+**
|
||
|
|
- **Ollama** installé
|
||
|
|
- **GPU NVIDIA** 8GB+ (optionnel mais recommandé)
|
||
|
|
|
||
|
|
### En 3 commandes
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# 1. Extraire l'archive
|
||
|
|
unzip ai-code-assistant.zip
|
||
|
|
cd ai-code-assistant
|
||
|
|
|
||
|
|
# 2. Télécharger un modèle
|
||
|
|
ollama pull qwen2.5-coder:7b
|
||
|
|
|
||
|
|
# 3. Lancer l'application
|
||
|
|
./start.sh
|
||
|
|
```
|
||
|
|
|
||
|
|
**C'est tout !** Ouvrez http://localhost:9000 dans votre navigateur 🎉
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 📚 Documentation
|
||
|
|
|
||
|
|
### 📖 Guides disponibles
|
||
|
|
|
||
|
|
1. **QUICKSTART.md** - Démarrage en 5 minutes
|
||
|
|
- Installation rapide
|
||
|
|
- Premiers tests
|
||
|
|
- Commandes essentielles
|
||
|
|
- Dépannage rapide
|
||
|
|
|
||
|
|
2. **README.md** (dans le dossier) - Documentation complète
|
||
|
|
- Architecture détaillée
|
||
|
|
- Configuration avancée
|
||
|
|
- API endpoints
|
||
|
|
- Personnalisation
|
||
|
|
|
||
|
|
3. **IA-Locale-Code-WSL.md** - Installation Ollama complète
|
||
|
|
- Configuration WSL2 + GPU
|
||
|
|
- Installation Ollama
|
||
|
|
- Création de modèles personnalisés
|
||
|
|
- Optimisations avancées
|
||
|
|
|
||
|
|
4. **EXAMPLES.md** - Exemples d'intégration
|
||
|
|
- Utilisation de l'API en Python
|
||
|
|
- WebSocket avancé
|
||
|
|
- Scripts utilitaires
|
||
|
|
- Intégration Git hooks
|
||
|
|
- VS Code integration
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 🎯 Utilisation
|
||
|
|
|
||
|
|
### Interface Web
|
||
|
|
|
||
|
|
1. **Lancer**: `./start.sh`
|
||
|
|
2. **Ouvrir**: http://localhost:9000
|
||
|
|
3. **Discuter** avec l'IA dans la zone de chat
|
||
|
|
4. **Cliquer sur "Code"** pour ouvrir l'éditeur
|
||
|
|
5. **Tester du code** directement dans le navigateur
|
||
|
|
|
||
|
|
### API
|
||
|
|
|
||
|
|
```python
|
||
|
|
import requests
|
||
|
|
|
||
|
|
# Chat simple
|
||
|
|
response = requests.post('http://localhost:9001/chat', json={
|
||
|
|
"messages": [{"role": "user", "content": "Écris une fonction de tri"}],
|
||
|
|
"model": "qwen2.5-coder:7b",
|
||
|
|
"stream": False
|
||
|
|
})
|
||
|
|
print(response.json()['response'])
|
||
|
|
|
||
|
|
# Exécuter du code
|
||
|
|
response = requests.post('http://localhost:9001/execute', json={
|
||
|
|
"code": "print('Hello AI!')",
|
||
|
|
"language": "python"
|
||
|
|
})
|
||
|
|
print(response.json()['stdout'])
|
||
|
|
```
|
||
|
|
|
||
|
|
### WebSocket (temps réel)
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
const ws = new WebSocket('ws://localhost:9001/ws/chat');
|
||
|
|
|
||
|
|
ws.onmessage = (event) => {
|
||
|
|
const data = JSON.parse(event.data);
|
||
|
|
if (data.type === 'stream') {
|
||
|
|
console.log(data.content); // Affiche token par token
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
ws.send(JSON.stringify({
|
||
|
|
message: 'Explique les closures',
|
||
|
|
model: 'qwen2.5-coder:7b'
|
||
|
|
}));
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 🎨 Captures d'écran
|
||
|
|
|
||
|
|
L'interface offre:
|
||
|
|
- **Chat fluide** avec réponses en streaming
|
||
|
|
- **Syntaxe highlighting** pour le code
|
||
|
|
- **Boutons d'action** (Copier, Tester) sur les blocs de code
|
||
|
|
- **Éditeur latéral** qui s'ouvre en un clic
|
||
|
|
- **Design dark mode** avec accents violets
|
||
|
|
- **Animations subtiles** et professionnelles
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 🔧 Configuration
|
||
|
|
|
||
|
|
### Changer le modèle par défaut
|
||
|
|
|
||
|
|
Éditer `frontend/index.html`:
|
||
|
|
```javascript
|
||
|
|
const [selectedModel, setSelectedModel] = useState('votre-modele');
|
||
|
|
```
|
||
|
|
|
||
|
|
### Changer les couleurs
|
||
|
|
|
||
|
|
Éditer `frontend/index.html`, section CSS:
|
||
|
|
```css
|
||
|
|
:root {
|
||
|
|
--accent-primary: #7c3aed; /* Couleur principale */
|
||
|
|
--accent-secondary: #a78bfa; /* Couleur secondaire */
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### Ajouter des langages
|
||
|
|
|
||
|
|
Éditer `backend/main.py`, fonction `execute_code`:
|
||
|
|
```python
|
||
|
|
elif request.language == "ruby":
|
||
|
|
result = subprocess.run(['ruby', temp_file], ...)
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 📡 Endpoints API
|
||
|
|
|
||
|
|
| Endpoint | Méthode | Description |
|
||
|
|
|----------|---------|-------------|
|
||
|
|
| `/` | GET | Info API |
|
||
|
|
| `/models` | GET | Liste des modèles |
|
||
|
|
| `/chat` | POST | Chat (streaming ou non) |
|
||
|
|
| `/ws/chat` | WebSocket | Chat temps réel |
|
||
|
|
| `/execute` | POST | Exécuter du code |
|
||
|
|
| `/analyze-code` | POST | Analyser du code |
|
||
|
|
| `/fix-code` | POST | Corriger du code |
|
||
|
|
| `/health` | GET | Health check |
|
||
|
|
|
||
|
|
Voir **EXAMPLES.md** pour des exemples détaillés.
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 🐛 Dépannage
|
||
|
|
|
||
|
|
### Backend ne démarre pas
|
||
|
|
```bash
|
||
|
|
# Vérifier les logs
|
||
|
|
cat /tmp/fastapi.log
|
||
|
|
|
||
|
|
# Vérifier le port
|
||
|
|
lsof -i :8000
|
||
|
|
```
|
||
|
|
|
||
|
|
### Ollama non accessible
|
||
|
|
```bash
|
||
|
|
# Redémarrer Ollama
|
||
|
|
pkill ollama
|
||
|
|
ollama serve &
|
||
|
|
```
|
||
|
|
|
||
|
|
### WebSocket déconnecté
|
||
|
|
```bash
|
||
|
|
# Vérifier la connexion
|
||
|
|
curl http://localhost:9001/health
|
||
|
|
```
|
||
|
|
|
||
|
|
Pour plus de détails, voir **QUICKSTART.md** section Dépannage.
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 🚀 Fonctionnalités à venir
|
||
|
|
|
||
|
|
- [ ] Sauvegarde des conversations
|
||
|
|
- [ ] Export markdown/PDF
|
||
|
|
- [ ] Support multi-langages (JS, Go, Rust)
|
||
|
|
- [ ] Debugger visuel
|
||
|
|
- [ ] Intégration Git
|
||
|
|
- [ ] Génération de tests automatique
|
||
|
|
- [ ] RAG sur votre codebase
|
||
|
|
- [ ] Thèmes personnalisables
|
||
|
|
- [ ] Mode collaboration
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 📊 Performance
|
||
|
|
|
||
|
|
Sur un GPU NVIDIA 8GB:
|
||
|
|
- **Latence**: < 100ms première réponse
|
||
|
|
- **Débit**: 40-60 tokens/sec
|
||
|
|
- **RAM**: ~2-3 GB
|
||
|
|
- **VRAM**: ~5-6 GB (selon le modèle)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 🤝 Contribution
|
||
|
|
|
||
|
|
Suggestions et améliorations bienvenues !
|
||
|
|
|
||
|
|
Structure claire:
|
||
|
|
- **Backend FastAPI** modulaire
|
||
|
|
- **Frontend React** en SPA (single file)
|
||
|
|
- **WebSocket** pour temps réel
|
||
|
|
- **API REST** standard
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 📄 Licence
|
||
|
|
|
||
|
|
Projet open source - Utilisation libre
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 🙏 Crédits
|
||
|
|
|
||
|
|
- **Ollama** - Modèles LLM locaux
|
||
|
|
- **FastAPI** - Framework backend
|
||
|
|
- **React** - Interface utilisateur
|
||
|
|
- **Anthropic Claude** - Inspiration design
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 📞 Support
|
||
|
|
|
||
|
|
Pour toute question:
|
||
|
|
1. Consulter **QUICKSTART.md** pour les problèmes courants
|
||
|
|
2. Vérifier **EXAMPLES.md** pour les cas d'usage
|
||
|
|
3. Lire la doc Ollama: https://ollama.ai/docs
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
**Développé avec ❤️ pour le développement assisté par IA en local**
|
||
|
|
|
||
|
|
🚀 **Commencez maintenant**: `./start.sh` et ouvrez http://localhost:9000
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 📋 Checklist de démarrage
|
||
|
|
|
||
|
|
- [ ] WSL2 installé et fonctionnel
|
||
|
|
- [ ] Python 3.10+ disponible
|
||
|
|
- [ ] Ollama installé (`ollama --version`)
|
||
|
|
- [ ] Modèle téléchargé (`ollama list`)
|
||
|
|
- [ ] GPU NVIDIA détecté (`nvidia-smi`) - optionnel
|
||
|
|
- [ ] Fichiers extraits et scripts exécutables
|
||
|
|
- [ ] Port 8000 et 8080 libres
|
||
|
|
- [ ] `./start.sh` lancé avec succès
|
||
|
|
- [ ] Interface accessible sur http://localhost:9000
|
||
|
|
|
||
|
|
✅ **Tout est OK ?** Profitez de votre assistant IA local !
|