Foufure/twitchBot-intelligent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
b1f3d6e190557d65c76af5b0794091b199478c38
twitchBot-intelligent/README_WEB_INTERFACE.md
T
gpatruno b4254c9e06 update update
2026-04-28 21:06:26 +02:00

8.0 KiB
Raw Blame History

🤖 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

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

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 :

// 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
  5. 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
  3. Générer réponse : Cliquer pour lancer la génération IA
  4. Historique : Consulter les derniers sous-titres générés
  5. 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é

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 !

Reference in New Issue View Git Blame Copy Permalink