# AI Code Assistant - Interface Web Style Claude

Interface web locale complète avec chat IA et éditeur de code intégré, similaire à Claude.

![AI Code Assistant](https://img.shields.io/badge/AI-Code%20Assistant-7c3aed)
![FastAPI](https://img.shields.io/badge/FastAPI-0.109-009688)
![React](https://img.shields.io/badge/React-18-61dafb)

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