twitchBot-intelligent/README_WEB_INTERFACE.md

# 🤖 TwitchBot Controller - Interface Web

Une interface web moderne en dark mode pour contrôler votre bot Twitch intelligent.

## 🚀 Fonctionnalités

### 📊 Tableau de Bord
- **Statut en temps réel** : Nombre de flux actifs, enregistrements, connexions chat
- **Mises à jour automatiques** : Interface qui se met à jour toutes les 5-10 secondes
- **Indicateur de connexion** : Statut de connexion au serveur en temps réel

### 🎥 Gestion des Flux
- **Ajout de flux** : Ajouter des canaux Twitch à surveiller
- **Contrôle audio** : Choisir d'enregistrer ou non l'audio du stream
- **Options par flux** :
  - Autoriser l’envoi de messages sur ce stream
  - Activer / désactiver la génération TGPT (IA) à partir des sous-titres
- **Surveillance chat** : Connexion automatique au chat de chaque flux
- **Gestion dynamique** : Ajouter/supprimer des flux sans redémarrer

### 💬 Gestion des Messages
- **Prochain message** : Voir le message généré par l'IA qui sera envoyé
- **Envoi manuel** : Envoyer le prochain message ou un message personnalisé
- **Historique** : Voir les derniers messages envoyés avec horodatage
- **Actions rapides** : Boutons pour envoyer rapidement la dernière génération

### 🎯 Configuration des Prompts IA
- **Édition en direct** : Modifier les prompts de génération IA directement
- **Ajout/suppression** : Gérer dynamiquement la liste des prompts
- **Sauvegarde** : Sauvegarder les modifications en temps réel
- **Interface intuitive** : Textareas redimensionnables pour chaque prompt

### 🎙️ Sous-titres et Transcription
- **Dernier texte détecté** : Affichage du dernier sous-titre généré
- **Historique complet** : Liste des 10 derniers sous-titres avec timestamps
- **Génération automatique** : Bouton pour générer une réponse IA à partir du texte
- **Mise à jour temps réel** : Nouveaux sous-titres affichés automatiquement
- **Multi-flux** : Sélection du flux dans l’onglet Sous-titres (stockage séparé par flux)
- **Règles sur sous-titres** : Déclencher des actions (clip / message) quand un sous-titre contient un mot/texte

### 🎬 Clips
- **Création manuelle** : Page “Clips” pour créer un clip Helix (retourne URL + edit_url)
- **Actions via règles** : “Créer un clip” possible depuis Interaction chat et depuis les règles Sous-titres

## 🛠️ Installation

### 1. Installer les dépendances
```bash
pip install -r requirements_web.txt
```

### 2. Démarrer l'interface web
```bash
python start_web_interface.py
```

Ou avec des options personnalisées :
```bash
python start_web_interface.py --host 0.0.0.0 --port 8080 --debug
```

### 3. Accéder à l'interface
Ouvrez votre navigateur et allez à : `http://localhost:5000`

## ⚙️ Configuration

### Fichiers de configuration
L'interface web utilise les mêmes fichiers de configuration que votre bot :

- `config/config.json` : Configuration principale
- `config/user.json` : Comptes Twitch pour l'envoi de messages

Pour Helix Clips :
- Ajoutez `twitch_client_id` dans `config/config.json`
- Tokens OAuth avec scope `clips:edit` (et pour chat : `chat:edit` / `chat:read`)

### Configuration automatique
Au premier démarrage, des fichiers de configuration par défaut sont créés. Modifiez-les avec vos paramètres :

```json
// config/config.json
{
    "twitchname": "votre_channel",
    "language": "fr",
    "list_prompt": [
        "Réponds en 8 mots max avec humour : ",
        "Réagis comme un viewer twitch en 6 mots : "
    ]
}

// config/user.json
[
    {
        "tw_acc_pseudo": "votre_pseudo",
        "tw_acc_token": "oauth:votre_token",
        "charactere": "😊"
    }
]
```

## 🎨 Interface Dark Mode

L'interface utilise un thème dark moderne avec :
- **Couleurs adaptées** : Palette sombre pour réduire la fatigue oculaire
- **Animations fluides** : Transitions et effets visuels
- **Design responsive** : Compatible mobile et desktop
- **Icons FontAwesome** : Interface moderne et intuitive

### Couleurs principales
- Background principal : `#1a1a1a`
- Background secondaire : `#2d2d2d`
- Accent : `#007bff`
- Succès : `#28a745`
- Avertissement : `#ffc107`

## 📱 Utilisation

### Onglet Flux
1. **Ajouter un flux** : Cliquez sur "Ajouter Flux"
2. **Nom du canal** : Entrez le nom du canal Twitch
3. **Options audio** : Cochez pour enregistrer l'audio
4. **Options messages / IA** : Cochez/décochez l’envoi de messages et la génération TGPT par flux
4. **Gestion** : Utilisez les boutons pause/play et supprimer

### Onglet Messages
1. **Prochain message** : Voir le message généré par l'IA
2. **Envoyer** : Cliquer pour envoyer le message dans le chat
3. **Message personnalisé** : Taper et envoyer vos propres messages
4. **Historique** : Consulter les messages récents envoyés

### Onglet Prompts IA
1. **Modifier** : Cliquer dans les textareas pour éditer
2. **Ajouter** : Bouton "Ajouter Prompt" pour de nouveaux prompts
3. **Supprimer** : Bouton ❌ sur chaque prompt
4. **Sauvegarder** : Bouton "Sauvegarder" pour appliquer les changements

### Onglet Sous-titres
1. **Choisir un flux** : Sélectionner le flux (multi-flux)
2. **Texte actuel** : Voir le dernier texte détecté du stream
2. **Générer réponse** : Cliquer pour lancer la génération IA
3. **Historique** : Consulter les derniers sous-titres générés
4. **Règles** : Déclencher une action quand un sous-titre contient un mot/texte

## 🔄 Actions Rapides

### Sidebar - Actions Rapides
- **Générer Réponse** : Lance la génération IA sur le dernier sous-titre
- **Envoyer Dernière Génération** : Envoie immédiatement la dernière réponse générée
- **Actualiser** : Recharge toutes les données de l'interface

## 🔌 API REST

L'interface expose une API REST pour l'intégration :

### Endpoints principaux
- `GET /api/status` : Statut général du bot
- `GET /api/flux` : Liste des flux actifs
- `POST /api/flux` : Ajouter un nouveau flux
- `DELETE /api/flux/<id>` : Supprimer un flux
- `GET/POST /api/config/prompts` : Gérer les prompts
- `POST /api/send-message` : Envoyer un message
- `POST /api/generate-response` : Lancer une génération IA
- `POST /api/clips/create` : Créer un clip Helix
- `GET/POST /api/subtitles/rules/config` : Config des règles sous-titres
- `GET /api/subtitles/rules/log` : Logs des règles sous-titres

### WebSocket
- Connexion temps réel sur le même port
- Événements : `status_update`, `new_subtitle`, `new_generation`

## 🚨 Dépannage

### Port déjà utilisé
```bash
python start_web_interface.py --port 8080
```

### Problèmes de dépendances
```bash
pip install --upgrade -r requirements_web.txt
```

### Fichiers de configuration manquants
Les fichiers sont créés automatiquement au premier démarrage. Vérifiez le dossier `config/`.

### Connexion WebSocket
Si les mises à jour temps réel ne fonctionnent pas, vérifiez que le port n'est pas bloqué par un firewall.

## 🔐 Sécurité

- **Accès local** : Par défaut, accessible uniquement en local
- **Configuration tokens** : Stockage sécurisé des tokens dans les fichiers config
- **Validation** : Validation des entrées côté serveur
- **CORS** : Configuration CORS pour les connexions WebSocket

## 🆕 Nouveautés vs Version Console

### Avantages de l'interface web
- ✅ **Interface graphique moderne** vs commandes clavier
- ✅ **Gestion multi-flux** vs flux unique
- ✅ **Modification prompts en direct** vs redémarrage requis
- ✅ **Historique visuel** vs logs console
- ✅ **Contrôle à distance** vs accès local uniquement
- ✅ **Statut temps réel** vs statut sur demande

### Compatibilité
L'interface web peut fonctionner :
- **Indépendamment** : Comme contrôleur principal
- **En parallèle** : Avec votre script console existant
- **Migration** : Remplacement progressif de l'interface console

## 📈 Performance

- **Mises à jour optimisées** : Seulement les données modifiées
- **WebSocket efficace** : Communication bidirectionnelle légère
- **Cache intelligent** : Réduction des appels API
- **Interface responsive** : Adaptation automatique à la taille d'écran

---

**🎉 Profitez de votre nouvelle interface web pour contrôler votre bot Twitch !**