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
• 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

pip install -r requirements_web.txt

2. Démarrer l'interface web

python start_web_interface.py

Ou avec des options personnalisées :

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 :

// 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é

python start_web_interface.py --port 8080

Problèmes de dépendances

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 !