202 lines
6.9 KiB
Markdown
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 !** |