interface web

2025-07-20 01:50:24 +02:00
parent bb743c5722
commit 2041e72342
34 changed files with 2813 additions and 141 deletions
@@ -0,0 +1,202 @@
+# 🤖 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
+- **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
+
+## 🛠️ 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
+
+### 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. **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. **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
+
+## 🔄 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
+
+### 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 !**