gpatruno
447 lines
25 KiB
HTML
447 lines
25 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>TwitchBot Controller - Interface de Contrôle</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
<link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
|
|
</head>
|
|
<body class="bg-dark text-light">
|
|
<!-- Navigation -->
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="#">
|
|
<i class="fas fa-robot me-2"></i>TwitchBot Controller
|
|
</a>
|
|
<div class="navbar-nav ms-auto">
|
|
<span class="navbar-text">
|
|
<i class="fas fa-circle text-success pulse"></i>
|
|
<span id="connection-status">Connecté</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container-fluid mt-4">
|
|
<div class="row">
|
|
<!-- Sidebar -->
|
|
<div class="col-md-2">
|
|
<div class="card bg-secondary">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-tachometer-alt me-2"></i>Tableau de Bord</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="status-item">
|
|
<span class="badge bg-info">Flux Actifs</span>
|
|
<span class="float-end" id="flux-count">0</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="badge bg-warning">Enregistrements</span>
|
|
<span class="float-end" id="recording-count">0</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="badge bg-success">Connexions Chat</span>
|
|
<span class="float-end" id="chat-count">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="card bg-secondary mt-3">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-bolt me-2"></i>Actions Rapides</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<button class="btn btn-success btn-sm w-100 mb-2" onclick="generateResponse()">
|
|
<i class="fas fa-magic me-2"></i>Générer Réponse
|
|
</button>
|
|
<button class="btn btn-primary btn-sm w-100 mb-2" onclick="sendLastGeneration()">
|
|
<i class="fas fa-paper-plane me-2"></i>Envoyer Dernière Génération
|
|
</button>
|
|
<button class="btn btn-info btn-sm w-100 mb-2" onclick="refreshData()">
|
|
<i class="fas fa-sync me-2"></i>Actualiser
|
|
</button>
|
|
|
|
<!-- Auto Subtitle Generation Toggle -->
|
|
<div class="mt-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span class="small text-muted">Génération Auto Sous-titres</span>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="autoSubtitleToggle" onchange="toggleAutoSubtitle()">
|
|
<label class="form-check-label small" for="autoSubtitleToggle"></label>
|
|
</div>
|
|
</div>
|
|
<div class="mt-2">
|
|
<small class="text-muted" id="autoSubtitleStatus">Arrêté</small>
|
|
</div>
|
|
<div class="mt-2">
|
|
<button class="btn btn-warning btn-sm w-100" onclick="forceStopAutoSubtitle()" title="Forcer l'arrêt en cas de problème">
|
|
<i class="fas fa-stop-circle me-1"></i>Force Stop
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Auto Message Sending Toggle -->
|
|
<div class="mt-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span class="small text-muted">Envoi Auto Messages</span>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="autoMessageToggle" onchange="toggleAutoMessage()">
|
|
<label class="form-check-label small" for="autoMessageToggle"></label>
|
|
</div>
|
|
</div>
|
|
<div class="mt-2">
|
|
<small class="text-muted" id="autoMessageStatus">Arrêté</small>
|
|
</div>
|
|
<div class="mt-2">
|
|
<button class="btn btn-warning btn-sm w-100" onclick="forceStopAutoMessage()" title="Forcer l'arrêt en cas de problème">
|
|
<i class="fas fa-stop-circle me-1"></i>Force Stop
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat Message Toggle -->
|
|
<div class="mt-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span class="small text-muted">Envoi Messages Chat</span>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="chatMessageToggle" onchange="toggleChatMessage()">
|
|
<label class="form-check-label small" for="chatMessageToggle"></label>
|
|
</div>
|
|
</div>
|
|
<div class="mt-2">
|
|
<small class="text-muted" id="chatMessageStatus">Désactivé</small>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- IA Generator Control -->
|
|
<div class="mt-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span class="small text-muted">Générateur IA</span>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="iaGeneratorToggle" onchange="toggleIAGenerator()">
|
|
<label class="form-check-label small" for="iaGeneratorToggle"></label>
|
|
</div>
|
|
</div>
|
|
<div class="mt-2">
|
|
<small class="text-muted" id="iaGeneratorStatus">Arrêté</small>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Control Twitch Control -->
|
|
<div class="mt-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span class="small text-muted">Contrôleur Twitch</span>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="controlTwitchToggle" onchange="toggleControlTwitch()">
|
|
<label class="form-check-label small" for="controlTwitchToggle"></label>
|
|
</div>
|
|
</div>
|
|
<div class="mt-2">
|
|
<small class="text-muted" id="controlTwitchStatus">Arrêté</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="col-md-7">
|
|
<!-- Tabs Navigation -->
|
|
<ul class="nav nav-tabs" id="mainTabs" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="flux-tab" data-bs-toggle="tab" data-bs-target="#flux" type="button">
|
|
<i class="fas fa-stream me-2"></i>Flux
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button">
|
|
<i class="fas fa-comments me-2"></i>Messages
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="users-tab" data-bs-toggle="tab" data-bs-target="#users" type="button">
|
|
<i class="fas fa-users me-2"></i>Utilisateurs
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="prompts-tab" data-bs-toggle="tab" data-bs-target="#prompts" type="button">
|
|
<i class="fas fa-cogs me-2"></i>Prompts IA
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="subtitles-tab" data-bs-toggle="tab" data-bs-target="#subtitles" type="button">
|
|
<i class="fas fa-closed-captioning me-2"></i>Sous-titres
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content mt-3" id="mainTabContent">
|
|
<!-- Flux Tab -->
|
|
<div class="tab-pane fade show active" id="flux" role="tabpanel">
|
|
<div class="card bg-secondary">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5><i class="fas fa-stream me-2"></i>Gestion des Flux</h5>
|
|
<button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#addFluxModal">
|
|
<i class="fas fa-plus me-2"></i>Ajouter Flux
|
|
</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="flux-list">
|
|
<!-- Flux list will be populated here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Messages Tab -->
|
|
<div class="tab-pane fade" id="messages" role="tabpanel">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card bg-secondary">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-eye me-2"></i>Prochain Message</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="alert alert-info" id="next-message">
|
|
Aucun message en attente
|
|
</div>
|
|
<button class="btn btn-primary" onclick="sendNextMessage()">
|
|
<i class="fas fa-paper-plane me-2"></i>Envoyer ce Message
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card bg-secondary mt-3">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-keyboard me-2"></i>Envoyer Message Personnalisé</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="custom-message-user" class="form-label">Utilisateur</label>
|
|
<select class="form-select user-selector" id="custom-message-user">
|
|
<option value="-1">Sélectionner un utilisateur...</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<textarea class="form-control" id="custom-message" rows="3" placeholder="Tapez votre message ici..."></textarea>
|
|
</div>
|
|
<button class="btn btn-success" onclick="sendCustomMessage()">
|
|
<i class="fas fa-send me-2"></i>Envoyer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card bg-secondary">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-history me-2"></i>Messages Récents</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="recent-messages" class="message-history">
|
|
<!-- Recent messages will be populated here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Users Tab -->
|
|
<div class="tab-pane fade" id="users" role="tabpanel">
|
|
<div class="card bg-secondary">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5><i class="fas fa-users me-2"></i>Gestion des Utilisateurs</h5>
|
|
<button class="btn btn-success btn-sm" onclick="openAddUserModal()">
|
|
<i class="fas fa-plus me-2"></i>Ajouter Utilisateur
|
|
</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="users-list">
|
|
<!-- Users list will be populated here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Prompts Tab -->
|
|
<div class="tab-pane fade" id="prompts" role="tabpanel">
|
|
<div class="card bg-secondary">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5><i class="fas fa-cogs me-2"></i>Configuration des Prompts IA</h5>
|
|
<button class="btn btn-success btn-sm" onclick="addPrompt()">
|
|
<i class="fas fa-plus me-2"></i>Ajouter Prompt
|
|
</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="prompts-list">
|
|
<!-- Prompts will be populated here -->
|
|
</div>
|
|
<button class="btn btn-primary mt-3" onclick="savePrompts()">
|
|
<i class="fas fa-save me-2"></i>Sauvegarder les Prompts
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Subtitles Tab -->
|
|
<div class="tab-pane fade" id="subtitles" role="tabpanel">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card bg-secondary">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-microphone me-2"></i>Dernier Texte Détecté</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="alert alert-warning" id="last-subtitle">
|
|
Aucun texte détecté pour le moment
|
|
</div>
|
|
|
|
<!-- Indicateur de fichier en cours -->
|
|
<div class="alert alert-info d-none" id="processing-file">
|
|
<i class="fas fa-spinner fa-spin me-2"></i>
|
|
<span id="current-file-name">Traitement en cours...</span>
|
|
</div>
|
|
|
|
<div class="d-flex gap-2">
|
|
<button class="btn btn-success" onclick="generateFromSubtitle()">
|
|
<i class="fas fa-robot me-2"></i>Générer Réponse IA
|
|
</button>
|
|
<button class="btn btn-primary" onclick="processSubtitles()">
|
|
<i class="fas fa-cogs me-2"></i>Traitement Manuel
|
|
</button>
|
|
<button class="btn btn-danger" onclick="clearSubtitlesHistory()">
|
|
<i class="fas fa-trash me-2"></i>Nettoyer Historique
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card bg-secondary">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-list me-2"></i>Historique des Sous-titres</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="subtitles-history" class="subtitle-history">
|
|
<!-- Subtitles history will be populated here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat Column -->
|
|
<div class="col-md-3">
|
|
<div class="card bg-secondary chat-container">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5><i class="fas fa-comments me-2"></i>Chat du Stream</h5>
|
|
<div class="chat-controls">
|
|
<button class="btn btn-sm btn-outline-light" onclick="clearChat()">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-light" onclick="toggleChat()">
|
|
<i class="fas fa-pause" id="chat-toggle-icon"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div id="chat-messages" class="chat-messages">
|
|
<div class="chat-welcome">
|
|
<i class="fas fa-comments text-muted"></i>
|
|
<p class="text-muted">Le chat apparaîtra ici quand un flux sera actif</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="mb-2">
|
|
<label for="chat-user-select" class="form-label small">Utilisateur</label>
|
|
<select class="form-select form-select-sm user-selector" id="chat-user-select">
|
|
<option value="-1">Sélectionner un utilisateur...</option>
|
|
</select>
|
|
</div>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="chat-input" placeholder="Tapez un message..." disabled>
|
|
<button class="btn btn-primary" type="button" onclick="sendChatMessage()" disabled>
|
|
<i class="fas fa-paper-plane"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Flux Modal -->
|
|
<div class="modal fade" id="addFluxModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content bg-dark">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Ajouter un Nouveau Flux</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label for="channel-name" class="form-label">Nom du Canal</label>
|
|
<input type="text" class="form-control" id="channel-name" placeholder="Ex: ocelothfoufure">
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="record-audio" checked>
|
|
<label class="form-check-label" for="record-audio">
|
|
Enregistrer l'audio du stream
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
|
|
<button type="button" class="btn btn-primary" onclick="addFlux()">Ajouter</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add/Edit User Modal -->
|
|
<div class="modal fade" id="addUserModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content bg-dark">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="userModalTitle">Ajouter un Utilisateur</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input type="hidden" id="user-edit-id" value="">
|
|
<div class="mb-3">
|
|
<label for="user-pseudo" class="form-label">Pseudo Twitch</label>
|
|
<input type="text" class="form-control" id="user-pseudo" placeholder="Ex: mon_pseudo">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="user-token" class="form-label">Token OAuth</label>
|
|
<input type="password" class="form-control" id="user-token" placeholder="oauth:token_ici">
|
|
<div class="form-text text-muted">Format: oauth:token_ici</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="user-charactere" class="form-label">Caractère</label>
|
|
<input type="text" class="form-control" id="user-charactere" placeholder="😊" value="😊">
|
|
<div class="form-text text-muted">Emoji ou texte à ajouter avant les messages</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
|
|
<button type="button" class="btn btn-primary" onclick="saveUser()">Sauvegarder</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
|
|
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
|
|
</body>
|
|
</html> |