Files
twitchBot-intelligent/README_WEB_INTERFACE.md
T
2025-07-20 01:50:24 +02:00

202 lines
6.9 KiB
Markdown

# 🤖 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 !**