my-ia/README.md

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

ollama pull qwen2.5-coder:7b
ollama pull code-expert  # Si créé précédemment

🚀 Installation rapide

1. Cloner/Copier les fichiers

# 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

# 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

# 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

# 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:

# 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:

// 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:

: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

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

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

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

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

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

curl http://localhost:9001/models

Health check

GET /health

curl http://localhost:9001/health

🐛 Dépannage

Backend ne démarre pas

# 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

# 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

# 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

# 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

# Backend FastAPI
tail -f /tmp/fastapi.log

# Frontend
tail -f /tmp/frontend.log

# Ollama
tail -f /tmp/ollama.log

Surveiller les ressources

# 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

# 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.