7.7 KiB
🤖 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
# 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
-
QUICKSTART.md - Démarrage en 5 minutes
- Installation rapide
- Premiers tests
- Commandes essentielles
- Dépannage rapide
-
README.md (dans le dossier) - Documentation complète
- Architecture détaillée
- Configuration avancée
- API endpoints
- Personnalisation
-
IA-Locale-Code-WSL.md - Installation Ollama complète
- Configuration WSL2 + GPU
- Installation Ollama
- Création de modèles personnalisés
- Optimisations avancées
-
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
- Lancer:
./start.sh - Ouvrir: http://localhost:9000
- Discuter avec l'IA dans la zone de chat
- Cliquer sur "Code" pour ouvrir l'éditeur
- Tester du code directement dans le navigateur
API
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)
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:
const [selectedModel, setSelectedModel] = useState('votre-modele');
Changer les couleurs
Éditer frontend/index.html, section CSS:
:root {
--accent-primary: #7c3aed; /* Couleur principale */
--accent-secondary: #a78bfa; /* Couleur secondaire */
}
Ajouter des langages
Éditer backend/main.py, fonction execute_code:
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
# Vérifier les logs
cat /tmp/fastapi.log
# Vérifier le port
lsof -i :8000
Ollama non accessible
# Redémarrer Ollama
pkill ollama
ollama serve &
WebSocket déconnecté
# 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:
- Consulter QUICKSTART.md pour les problèmes courants
- Vérifier EXAMPLES.md pour les cas d'usage
- 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.shlancé avec succès- Interface accessible sur http://localhost:9000
✅ Tout est OK ? Profitez de votre assistant IA local !