Dom/rpa_vision_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: chat unifié, GestureCatalog, Copilot, Léa UI, extraction données, vérification replay

Browse Source 
Refonte majeure du système Agent Chat et ajout de nombreux modules :

- Chat unifié : suppression du dual Workflows/Agent Libre, tout passe par /api/chat
  avec résolution en 3 niveaux (workflow → geste → "montre-moi")
- GestureCatalog : 38 raccourcis clavier universels Windows avec matching sémantique,
  substitution automatique dans les replays, et endpoint /api/gestures
- Mode Copilot : exécution pas-à-pas des workflows avec validation humaine via WebSocket
  (approve/skip/abort) avant chaque action
- Léa UI (agent_v0/lea_ui/) : interface PyQt5 pour Windows avec overlay transparent
  pour feedback visuel pendant le replay
- Data Extraction (core/extraction/) : moteur d'extraction visuelle de données
  (OCR + VLM → SQLite), avec schémas YAML et export CSV/Excel
- ReplayVerifier (agent_v0/server_v1/) : vérification post-action par comparaison
  de screenshots, avec logique de retry (max 3)
- IntentParser durci : meilleur fallback regex, type GREETING, patterns améliorés
- Dashboard : nouvelles pages gestures, streaming, extractions
- Tests : 63 tests GestureCatalog, 47 tests extraction, corrections tests existants
- Dépréciation : /api/agent/plan et /api/agent/execute retournent HTTP 410,
  suppression du code hardcodé _plan_to_replay_actions

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dom
2026-03-15 10:02:09 +01:00
parent 74a1cb4e03
commit cf495dd82f
93 changed files with 12463 additions and 1080 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
web_dashboard/templates/extractions.html Normal file
View File

@@ -0,0 +1,214 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RPA Vision V3 - Extractions</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; }
.header { background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); color: white; padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; }
.header h1 { font-size: 24px; display: flex; align-items: center; gap: 10px; }
.header .nav-links { display: flex; gap: 15px; align-items: center; }
.header .nav-links a { color: rgba(255,255,255,0.8); text-decoration: none; font-size: 14px; padding: 8px 16px; border-radius: 8px; transition: all 0.2s; }
.header .nav-links a:hover { background: rgba(255,255,255,0.15); color: white; }
.header .nav-links a.active { background: rgba(255,255,255,0.2); color: white; font-weight: 600; }
.container { max-width: 1600px; margin: 0 auto; padding: 20px; }
.page-intro { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); border-radius: 12px; padding: 25px; border: 1px solid #334155; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.page-intro div:first-child h2 { color: #e2e8f0; margin-bottom: 8px; font-size: 20px; }
.page-intro div:first-child p { color: #64748b; font-size: 14px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 20px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card { background: #1e293b; border-radius: 12px; padding: 20px; border: 1px solid #334155; }
.card h2 { font-size: 16px; margin-bottom: 15px; color: #94a3b8; display: flex; align-items: center; gap: 8px; }
.card h2 .icon { font-size: 20px; }
.stat-card { text-align: center; }
.stat-value { font-size: 36px; font-weight: bold; color: #3b82f6; }
.stat-label { font-size: 12px; color: #64748b; margin-top: 5px; text-transform: uppercase; }
.btn { padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.2s; }
.btn-primary { background: #3b82f6; color: white; }
.btn-primary:hover { background: #2563eb; }
.btn-success { background: #22c55e; color: white; }
.btn-success:hover { background: #16a34a; }
.btn-warning { background: #f59e0b; color: white; }
.btn-warning:hover { background: #d97706; }
.btn-small { padding: 8px 16px; font-size: 12px; }
.extraction-list { display: flex; flex-direction: column; gap: 12px; }
.extraction-item { display: flex; justify-content: space-between; align-items: center; padding: 20px; background: #0f172a; border-radius: 10px; border: 1px solid #334155; transition: all 0.2s; }
.extraction-item:hover { border-color: #3b82f6; }
.extraction-main { display: flex; align-items: center; gap: 15px; flex: 1; }
.extraction-icon { font-size: 32px; }
.extraction-details h4 { color: #e2e8f0; margin-bottom: 5px; }
.extraction-details p { color: #64748b; font-size: 12px; }
.extraction-stats { display: flex; gap: 20px; }
.extraction-stat { text-align: center; }
.extraction-stat .value { font-size: 18px; font-weight: bold; color: #3b82f6; }
.extraction-stat .label { font-size: 10px; color: #64748b; text-transform: uppercase; }
.extraction-actions { display: flex; gap: 8px; margin-left: 20px; }
.unavailable-msg { text-align: center; padding: 60px 20px; color: #64748b; }
.unavailable-msg .msg-icon { font-size: 48px; margin-bottom: 15px; }
.unavailable-msg h3 { color: #94a3b8; margin-bottom: 10px; }
.unavailable-msg p { font-size: 14px; max-width: 500px; margin: 0 auto; }
.empty-state { text-align: center; padding: 60px 20px; }
.empty-state .empty-icon { font-size: 64px; margin-bottom: 15px; opacity: 0.5; }
.empty-state h3 { color: #94a3b8; margin-bottom: 10px; font-size: 18px; }
.empty-state p { color: #64748b; font-size: 14px; max-width: 400px; margin: 0 auto; }
.status-badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.status-badge.completed { background: #052e16; color: #22c55e; }
.status-badge.running { background: #172554; color: #3b82f6; }
.status-badge.failed { background: #450a0a; color: #ef4444; }
@media (max-width: 768px) {
.grid-4 { grid-template-columns: 1fr 1fr; }
.grid-2 { grid-template-columns: 1fr; }
.header { flex-direction: column; gap: 15px; }
.extraction-item { flex-direction: column; gap: 15px; align-items: flex-start; }
}
</style>
</head>
<body>
<div class="header">
<h1>RPA Vision V3 - Extractions</h1>
<div class="nav-links">
<a href="/">Dashboard</a>
<a href="/gestures">Gestes</a>
<a href="/streaming">Streaming</a>
<a href="/extractions" class="active">Extractions</a>
</div>
</div>
<div class="container">
<div class="page-intro">
<div>
<h2>Extractions de donnees</h2>
<p>Visualisation des donnees extraites par le moteur RPA depuis les ecrans des applications (scraping visuel).</p>
</div>
<div>
<button class="btn btn-primary" onclick="refreshExtractions()">Actualiser</button>
</div>
</div>
{% if not available %}
<div class="card">
<div class="unavailable-msg">
<div class="msg-icon">&#9888;&#65039;</div>
<h3>Module non disponible</h3>
<p>Le module <code>core.extraction</code> n'est pas encore installe. Cette fonctionnalite sera disponible dans une prochaine version.</p>
</div>
</div>
{% else %}
<!-- Stats -->
<div class="grid grid-4">
<div class="card stat-card">
<div class="stat-value" id="statTotalExtractions">{{ stats.total }}</div>
<div class="stat-label">Extractions</div>
</div>
<div class="card stat-card">
<div class="stat-value" id="statTotalRecords">{{ stats.total_records }}</div>
<div class="stat-label">Enregistrements</div>
</div>
<div class="card stat-card">
<div class="stat-value" id="statSchemas">{{ stats.schemas }}</div>
<div class="stat-label">Schemas</div>
</div>
<div class="card stat-card">
<div class="stat-value" id="statLastExtraction">{{ stats.last_extraction or '-' }}</div>
<div class="stat-label">Derniere extraction</div>
</div>
</div>
<!-- Liste des extractions -->
<div class="card">
<h2><span class="icon">&#128203;</span> Extractions passees</h2>
<div class="extraction-list" id="extractionList">
{% if extractions %}
{% for ext in extractions %}
<div class="extraction-item">
<div class="extraction-main">
<div class="extraction-icon">&#128196;</div>
<div class="extraction-details">
<h4>{{ ext.schema_name or ext.name or 'Extraction' }}</h4>
<p>{{ ext.description or '' }} | {{ ext.date or '' }}</p>
</div>
</div>
<div class="extraction-stats">
<div class="extraction-stat">
<div class="value">{{ ext.records_count or 0 }}</div>
<div class="label">Enregistrements</div>
</div>
<div class="extraction-stat">
<div class="value">{{ ext.fields_count or 0 }}</div>
<div class="label">Champs</div>
</div>
</div>
<div class="extraction-actions">
<span class="status-badge {{ ext.status or 'completed' }}">{{ ext.status or 'completed' }}</span>
{% if ext.id %}
<button class="btn btn-success btn-small" onclick="exportCSV('{{ ext.id }}')">Export CSV</button>
{% endif %}
</div>
</div>
{% endfor %}
{% else %}
<div class="empty-state">
<div class="empty-icon">&#128269;</div>
<h3>Aucune extraction</h3>
<p>Les extractions apparaitront ici lorsque le moteur RPA aura extrait des donnees depuis les ecrans des applications.</p>
</div>
{% endif %}
</div>
</div>
{% endif %}
</div>
<script>
async function fetchJSON(url) {
const response = await fetch(url);
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.json();
}
async function refreshExtractions() {
try {
const data = await fetchJSON('/api/extractions');
// Recharger la page pour afficher les nouvelles donnees
// (plus simple que de mettre a jour le DOM Jinja)
window.location.reload();
} catch (e) {
console.error('Erreur refresh:', e);
}
}
async function exportCSV(extractionId) {
try {
const response = await fetch(`/api/extractions/${extractionId}/export?format=csv`);
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const blob = await response.blob();
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `extraction_${extractionId}.csv`;
document.body.appendChild(a);
a.click();
a.remove();
window.URL.revokeObjectURL(url);
} catch (e) {
alert('Erreur export: ' + e.message);
}
}
</script>
</body>
</html>

175
web_dashboard/templates/gestures.html Normal file
View File

@@ -0,0 +1,175 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RPA Vision V3 - Gestes Primitifs</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; }
.header { background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); color: white; padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; }
.header h1 { font-size: 24px; display: flex; align-items: center; gap: 10px; }
.header .nav-links { display: flex; gap: 15px; align-items: center; }
.header .nav-links a { color: rgba(255,255,255,0.8); text-decoration: none; font-size: 14px; padding: 8px 16px; border-radius: 8px; transition: all 0.2s; }
.header .nav-links a:hover { background: rgba(255,255,255,0.15); color: white; }
.header .nav-links a.active { background: rgba(255,255,255,0.2); color: white; font-weight: 600; }
.container { max-width: 1600px; margin: 0 auto; padding: 20px; }
.page-intro { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); border-radius: 12px; padding: 25px; border: 1px solid #334155; margin-bottom: 20px; }
.page-intro h2 { color: #e2e8f0; margin-bottom: 8px; font-size: 20px; }
.page-intro p { color: #64748b; font-size: 14px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 20px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card { background: #1e293b; border-radius: 12px; padding: 20px; border: 1px solid #334155; }
.card h2 { font-size: 16px; margin-bottom: 15px; color: #94a3b8; display: flex; align-items: center; gap: 8px; }
.card h2 .icon { font-size: 20px; }
.stat-card { text-align: center; }
.stat-value { font-size: 36px; font-weight: bold; color: #3b82f6; }
.stat-label { font-size: 12px; color: #64748b; margin-top: 5px; text-transform: uppercase; }
.category-section { margin-bottom: 30px; }
.category-title { font-size: 18px; color: #e2e8f0; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #334155; }
.category-title .cat-icon { font-size: 24px; }
.category-title .count { font-size: 12px; color: #64748b; background: #334155; padding: 3px 10px; border-radius: 12px; margin-left: 10px; }
.gesture-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; }
.gesture-card { background: #0f172a; border: 1px solid #334155; border-radius: 10px; padding: 18px; transition: all 0.2s; cursor: default; }
.gesture-card:hover { border-color: #3b82f6; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(59, 130, 246, 0.1); }
.gesture-card .gesture-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.gesture-card .gesture-name { font-size: 15px; font-weight: 600; color: #e2e8f0; }
.gesture-card .gesture-shortcut { display: inline-flex; align-items: center; gap: 4px; }
.gesture-card .gesture-shortcut kbd { background: #334155; color: #94a3b8; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-family: 'Segoe UI', monospace; border: 1px solid #475569; }
.gesture-card .gesture-description { color: #64748b; font-size: 13px; line-height: 1.5; }
.gesture-card .gesture-icon { font-size: 28px; margin-bottom: 8px; }
.unavailable-msg { text-align: center; padding: 60px 20px; color: #64748b; }
.unavailable-msg .msg-icon { font-size: 48px; margin-bottom: 15px; }
.unavailable-msg h3 { color: #94a3b8; margin-bottom: 10px; }
.unavailable-msg p { font-size: 14px; max-width: 500px; margin: 0 auto; }
.filter-bar { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
.filter-bar input { padding: 10px 15px; background: #0f172a; border: 1px solid #334155; border-radius: 8px; color: #e2e8f0; font-size: 14px; min-width: 300px; }
.filter-bar input:focus { outline: none; border-color: #3b82f6; }
.filter-bar .filter-count { color: #64748b; font-size: 13px; margin-left: auto; }
@media (max-width: 768px) {
.grid-4 { grid-template-columns: 1fr 1fr; }
.gesture-grid { grid-template-columns: 1fr; }
.header { flex-direction: column; gap: 15px; }
}
</style>
</head>
<body>
<div class="header">
<h1>RPA Vision V3 - Gestes Primitifs</h1>
<div class="nav-links">
<a href="/">Dashboard</a>
<a href="/gestures" class="active">Gestes</a>
<a href="/streaming">Streaming</a>
<a href="/extractions">Extractions</a>
</div>
</div>
<div class="container">
<div class="page-intro">
<h2>Catalogue des gestes primitifs</h2>
<p>Liste de tous les gestes (raccourcis clavier, actions systeme) connus par le moteur RPA. Ces gestes sont utilisables dans les workflows pour interagir avec les applications.</p>
</div>
<!-- Stats -->
<div class="grid grid-4">
<div class="card stat-card">
<div class="stat-value" id="statTotal">{{ stats.total }}</div>
<div class="stat-label">Total gestes</div>
</div>
<div class="card stat-card">
<div class="stat-value" id="statCategories">{{ stats.categories }}</div>
<div class="stat-label">Categories</div>
</div>
<div class="card stat-card">
<div class="stat-value" id="statWithShortcut">{{ stats.with_shortcut }}</div>
<div class="stat-label">Avec raccourci</div>
</div>
<div class="card stat-card">
<div class="stat-value">{{ stats.source }}</div>
<div class="stat-label">Source</div>
</div>
</div>
{% if not available %}
<div class="card">
<div class="unavailable-msg">
<div class="msg-icon">&#9888;&#65039;</div>
<h3>Module non disponible</h3>
<p>Le module <code>agent_chat.gesture_catalog</code> n'est pas installe ou accessible. Les gestes ci-dessous sont le catalogue integre par defaut.</p>
</div>
</div>
{% endif %}
<!-- Filtre -->
<div class="filter-bar">
<input type="text" id="searchGestures" placeholder="Rechercher un geste (nom, raccourci, description)..." oninput="filterGestures()">
<span class="filter-count" id="filterCount">{{ stats.total }} geste(s) affiche(s)</span>
</div>
<!-- Gestes par categorie -->
<div id="gesturesContainer">
{% for category in categories %}
<div class="category-section" data-category="{{ category.id }}">
<div class="category-title">
<span class="cat-icon">{{ category.icon }}</span>
{{ category.name }}
<span class="count">{{ category.gestures | length }}</span>
</div>
<div class="gesture-grid">
{% for gesture in category.gestures %}
<div class="gesture-card" data-search="{{ gesture.name|lower }} {{ gesture.description|lower }} {{ gesture.shortcut|lower if gesture.shortcut else '' }}">
<div class="gesture-icon">{{ gesture.icon }}</div>
<div class="gesture-header">
<span class="gesture-name">{{ gesture.name }}</span>
{% if gesture.shortcut %}
<span class="gesture-shortcut">
{% for key in gesture.shortcut.split('+') %}
<kbd>{{ key }}</kbd>{% if not loop.last %}<span style="color:#475569;">+</span>{% endif %}
{% endfor %}
</span>
{% endif %}
</div>
<div class="gesture-description">{{ gesture.description }}</div>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
<script>
function filterGestures() {
const query = document.getElementById('searchGestures').value.toLowerCase().trim();
const cards = document.querySelectorAll('.gesture-card');
const sections = document.querySelectorAll('.category-section');
let visible = 0;
cards.forEach(card => {
const searchText = card.getAttribute('data-search') || '';
const match = !query || searchText.includes(query);
card.style.display = match ? '' : 'none';
if (match) visible++;
});
// Masquer les categories vides
sections.forEach(section => {
const visibleCards = section.querySelectorAll('.gesture-card:not([style*="display: none"])');
section.style.display = visibleCards.length > 0 ? '' : 'none';
});
document.getElementById('filterCount').textContent = `${visible} geste(s) affiche(s)`;
}
</script>
</body>
</html>

13
web_dashboard/templates/index.html
View File

@@ -42,9 +42,16 @@
<body>
<div class="header">
<h1>🚀 RPA Vision V3 Dashboard</h1>
<div class="status">
<div class="status-dot" id="statusDot"></div>
<span id="statusText">Connecté</span>
<div style="display:flex;align-items:center;gap:20px;">
<nav style="display:flex;gap:8px;">
<a href="/gestures" style="color:rgba(255,255,255,0.8);text-decoration:none;font-size:13px;padding:6px 14px;border-radius:6px;transition:all 0.2s;background:rgba(255,255,255,0.1);" onmouseover="this.style.background='rgba(255,255,255,0.2)'" onmouseout="this.style.background='rgba(255,255,255,0.1)'">🤲 Gestes</a>
<a href="/streaming" style="color:rgba(255,255,255,0.8);text-decoration:none;font-size:13px;padding:6px 14px;border-radius:6px;transition:all 0.2s;background:rgba(255,255,255,0.1);" onmouseover="this.style.background='rgba(255,255,255,0.2)'" onmouseout="this.style.background='rgba(255,255,255,0.1)'">📡 Streaming</a>
<a href="/extractions" style="color:rgba(255,255,255,0.8);text-decoration:none;font-size:13px;padding:6px 14px;border-radius:6px;transition:all 0.2s;background:rgba(255,255,255,0.1);" onmouseover="this.style.background='rgba(255,255,255,0.2)'" onmouseout="this.style.background='rgba(255,255,255,0.1)'">📊 Extractions</a>
</nav>
<div class="status">
<div class="status-dot" id="statusDot"></div>
<span id="statusText">Connecté</span>
</div>
</div>
</div>

360
web_dashboard/templates/streaming.html Normal file
View File

@@ -0,0 +1,360 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RPA Vision V3 - Streaming</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; }
.header { background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); color: white; padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; }
.header h1 { font-size: 24px; display: flex; align-items: center; gap: 10px; }
.header .nav-links { display: flex; gap: 15px; align-items: center; }
.header .nav-links a { color: rgba(255,255,255,0.8); text-decoration: none; font-size: 14px; padding: 8px 16px; border-radius: 8px; transition: all 0.2s; }
.header .nav-links a:hover { background: rgba(255,255,255,0.15); color: white; }
.header .nav-links a.active { background: rgba(255,255,255,0.2); color: white; font-weight: 600; }
.container { max-width: 1600px; margin: 0 auto; padding: 20px; }
.page-intro { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); border-radius: 12px; padding: 25px; border: 1px solid #334155; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.page-intro div:first-child h2 { color: #e2e8f0; margin-bottom: 8px; font-size: 20px; }
.page-intro div:first-child p { color: #64748b; font-size: 14px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 20px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card { background: #1e293b; border-radius: 12px; padding: 20px; border: 1px solid #334155; }
.card h2 { font-size: 16px; margin-bottom: 15px; color: #94a3b8; display: flex; align-items: center; gap: 8px; }
.card h2 .icon { font-size: 20px; }
.stat-card { text-align: center; }
.stat-value { font-size: 36px; font-weight: bold; color: #3b82f6; }
.stat-label { font-size: 12px; color: #64748b; margin-top: 5px; text-transform: uppercase; }
.btn { padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.2s; }
.btn-primary { background: #3b82f6; color: white; }
.btn-primary:hover { background: #2563eb; }
.btn-success { background: #22c55e; color: white; }
.btn-success:hover { background: #16a34a; }
.btn-small { padding: 8px 16px; font-size: 12px; }
.live-stats { display: flex; flex-direction: column; gap: 12px; }
.stat-row { display: flex; justify-content: space-between; padding: 10px; background: #0f172a; border-radius: 6px; }
.stat-row span:first-child { color: #64748b; }
.stat-row span:last-child { font-weight: 600; color: #3b82f6; }
.session-list { max-height: 500px; overflow-y: auto; }
.session-item { display: flex; justify-content: space-between; align-items: center; padding: 15px; border-bottom: 1px solid #334155; transition: background 0.2s; }
.session-item:hover { background: #334155; }
.session-info h4 { color: #e2e8f0; margin-bottom: 5px; }
.session-info .meta { color: #64748b; font-size: 12px; }
.session-actions { display: flex; gap: 8px; }
.loading { text-align: center; padding: 40px; color: #64748b; }
.spinner { border: 3px solid #334155; border-top: 3px solid #3b82f6; border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 0 auto 10px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.auto-refresh-indicator { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #64748b; }
.auto-refresh-indicator .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.replay-progress { margin-top: 15px; }
.progress-bar { height: 10px; background: #334155; border-radius: 5px; overflow: hidden; margin-top: 8px; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #3b82f6, #8b5cf6); border-radius: 5px; transition: width 0.5s ease; }
.progress-label { display: flex; justify-content: space-between; font-size: 12px; color: #64748b; margin-top: 5px; }
.gpu-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.gpu-stat-item { background: #0f172a; border-radius: 8px; padding: 15px; text-align: center; }
.gpu-stat-item .label { font-size: 12px; color: #64748b; margin-bottom: 5px; }
.gpu-stat-item .value { font-size: 20px; font-weight: bold; color: #8b5cf6; }
@media (max-width: 768px) {
.grid-4 { grid-template-columns: 1fr 1fr; }
.grid-2 { grid-template-columns: 1fr; }
.header { flex-direction: column; gap: 15px; }
}
</style>
</head>
<body>
<div class="header">
<h1>RPA Vision V3 - Streaming</h1>
<div class="nav-links">
<a href="/">Dashboard</a>
<a href="/gestures">Gestes</a>
<a href="/streaming" class="active">Streaming</a>
<a href="/extractions">Extractions</a>
</div>
</div>
<div class="container">
<div class="page-intro">
<div>
<h2>Sessions de streaming temps reel</h2>
<p>Suivi des sessions de capture, replays en cours et statistiques du serveur de streaming (port 5005).</p>
</div>
<div style="display:flex;gap:10px;align-items:center;">
<div class="auto-refresh-indicator">
<span class="dot" id="refreshDot"></span>
<span id="refreshLabel">Auto-refresh: 5s</span>
</div>
<button class="btn btn-primary" onclick="refreshAll()">Actualiser</button>
</div>
</div>
<!-- Stats globales -->
<div class="grid grid-4">
<div class="card stat-card">
<div class="stat-value" id="statActiveSessions">-</div>
<div class="stat-label">Sessions actives</div>
</div>
<div class="card stat-card">
<div class="stat-value" id="statTotalEvents">-</div>
<div class="stat-label">Evenements totaux</div>
</div>
<div class="card stat-card">
<div class="stat-value" id="statWorkflowsBuilt">-</div>
<div class="stat-label">Workflows construits</div>
</div>
<div class="card stat-card">
<div id="statServerStatus" style="font-size:24px;">&#9203;</div>
<div class="stat-label">Serveur streaming</div>
</div>
</div>
<div class="grid grid-2">
<!-- Sessions actives -->
<div class="card">
<h2><span class="icon">&#127916;</span> Sessions actives</h2>
<div id="sessionsList" class="session-list">
<div class="loading"><div class="spinner"></div>Chargement...</div>
</div>
</div>
<!-- Replay en cours -->
<div class="card">
<h2><span class="icon">&#9654;&#65039;</span> Replay en cours</h2>
<div id="replayStatus">
<div class="loading"><div class="spinner"></div>Chargement...</div>
</div>
</div>
</div>
<div class="grid grid-2">
<!-- Stats GPU -->
<div class="card">
<h2><span class="icon">&#128187;</span> Ressources GPU</h2>
<div id="gpuStats">
<div class="loading"><div class="spinner"></div>Chargement...</div>
</div>
</div>
<!-- Details serveur -->
<div class="card">
<h2><span class="icon">&#128202;</span> Statistiques serveur</h2>
<div class="live-stats" id="serverDetails">
<div class="loading"><div class="spinner"></div>Chargement...</div>
</div>
</div>
</div>
</div>
<script>
const STREAMING_API = '/api/streaming/status';
async function fetchJSON(url) {
const response = await fetch(url);
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.json();
}
async function refreshAll() {
await Promise.all([
refreshStats(),
refreshSessions(),
refreshReplay(),
refreshGPU()
]);
}
async function refreshStats() {
const statusEl = document.getElementById('statServerStatus');
const detailsEl = document.getElementById('serverDetails');
try {
const data = await fetchJSON(STREAMING_API);
statusEl.innerHTML = '<span style="color:#22c55e;">&#9989;</span>';
statusEl.title = 'Serveur streaming en ligne';
document.getElementById('statActiveSessions').textContent = data.active_sessions || 0;
document.getElementById('statTotalEvents').textContent = data.total_events || 0;
document.getElementById('statWorkflowsBuilt').textContent = data.workflows_built || 0;
// Details serveur
const rows = [];
if (data.uptime !== undefined) rows.push({label: 'Uptime', value: formatUptime(data.uptime)});
if (data.total_sessions !== undefined) rows.push({label: 'Sessions totales', value: data.total_sessions});
if (data.active_sessions !== undefined) rows.push({label: 'Sessions actives', value: data.active_sessions});
if (data.total_events !== undefined) rows.push({label: 'Evenements totaux', value: data.total_events});
if (data.workflows_built !== undefined) rows.push({label: 'Workflows construits', value: data.workflows_built});
if (data.events_per_second !== undefined) rows.push({label: 'Evenements/sec', value: (data.events_per_second || 0).toFixed(2)});
if (data.memory_usage_mb !== undefined) rows.push({label: 'Memoire utilisee', value: Math.round(data.memory_usage_mb) + ' MB'});
if (data.server_version) rows.push({label: 'Version serveur', value: data.server_version});
if (rows.length === 0) {
const rawRows = Object.entries(data).map(([k, v]) => ({label: k, value: JSON.stringify(v)}));
detailsEl.innerHTML = rawRows.map(r =>
`<div class="stat-row"><span>${r.label}</span><span>${r.value}</span></div>`
).join('');
} else {
detailsEl.innerHTML = rows.map(r =>
`<div class="stat-row"><span>${r.label}</span><span>${r.value}</span></div>`
).join('');
}
} catch (e) {
statusEl.innerHTML = '<span style="color:#ef4444;">&#10060;</span>';
statusEl.title = 'Serveur streaming hors ligne';
document.getElementById('statActiveSessions').textContent = '-';
document.getElementById('statTotalEvents').textContent = '-';
document.getElementById('statWorkflowsBuilt').textContent = '-';
detailsEl.innerHTML = `<div style="text-align:center;padding:20px;color:#ef4444;">
Serveur streaming inaccessible (port 5005)<br>
<span style="font-size:12px;color:#94a3b8;margin-top:5px;display:block;">${e.message}</span>
</div>`;
}
}
async function refreshSessions() {
const list = document.getElementById('sessionsList');
try {
const data = await fetchJSON('/api/streaming/status');
const sessions = data.sessions || [];
if (!Array.isArray(sessions) || sessions.length === 0) {
list.innerHTML = '<p style="text-align:center;color:#64748b;padding:30px;">Aucune session de streaming active</p>';
return;
}
list.innerHTML = sessions.map(s => {
const sessionId = s.session_id || s.id || 'N/A';
const status = s.status || 'inconnu';
const events = s.events_count || s.total_events || 0;
const screenshots = s.screenshots_count || 0;
const started = s.started_at ? new Date(s.started_at).toLocaleString('fr-FR') : '-';
const duration = s.duration_seconds ? formatUptime(s.duration_seconds) : '-';
const statusColor = status === 'active' ? '#22c55e' : (status === 'completed' ? '#3b82f6' : '#64748b');
return `
<div class="session-item">
<div class="session-info">
<h4>
${sessionId}
<span style="margin-left:10px;padding:3px 8px;border-radius:4px;font-size:12px;background:rgba(${statusColor === '#22c55e' ? '34,197,94' : '59,130,246'},0.15);color:${statusColor};">
${status}
</span>
</h4>
<div class="meta">Debut: ${started} | Duree: ${duration} | ${events} evenements | ${screenshots} screenshots</div>
</div>
</div>
`;
}).join('');
} catch (e) {
list.innerHTML = `<p style="color:#ef4444;text-align:center;padding:20px;">Erreur: ${e.message}</p>`;
}
}
async function refreshReplay() {
const container = document.getElementById('replayStatus');
try {
const data = await fetchJSON('/api/streaming/status');
const replay = data.replay || null;
if (!replay || !replay.active) {
container.innerHTML = '<p style="text-align:center;color:#64748b;padding:30px;">Aucun replay en cours</p>';
return;
}
const progress = replay.progress || 0;
const total = replay.total_actions || 0;
const completed = replay.completed_actions || 0;
const pct = total > 0 ? Math.round((completed / total) * 100) : 0;
container.innerHTML = `
<div class="live-stats">
<div class="stat-row"><span>Workflow</span><span>${replay.workflow_id || '-'}</span></div>
<div class="stat-row"><span>Statut</span><span style="color:#22c55e;">En cours</span></div>
<div class="stat-row"><span>Actions</span><span>${completed} / ${total}</span></div>
</div>
<div class="replay-progress">
<div class="progress-bar">
<div class="progress-fill" style="width:${pct}%"></div>
</div>
<div class="progress-label">
<span>${pct}% complete</span>
<span>${completed} / ${total} actions</span>
</div>
</div>
`;
} catch (e) {
container.innerHTML = '<p style="text-align:center;color:#64748b;padding:30px;">Aucun replay en cours</p>';
}
}
async function refreshGPU() {
const container = document.getElementById('gpuStats');
try {
const data = await fetchJSON('/api/streaming/status');
const gpu = data.gpu || null;
if (!gpu) {
container.innerHTML = '<p style="text-align:center;color:#64748b;padding:30px;">Statistiques GPU non disponibles</p>';
return;
}
container.innerHTML = `
<div class="gpu-stats">
<div class="gpu-stat-item">
<div class="label">GPU</div>
<div class="value">${gpu.name || 'N/A'}</div>
</div>
<div class="gpu-stat-item">
<div class="label">Memoire utilisee</div>
<div class="value">${gpu.memory_used_mb ? Math.round(gpu.memory_used_mb) + ' MB' : 'N/A'}</div>
</div>
<div class="gpu-stat-item">
<div class="label">Memoire totale</div>
<div class="value">${gpu.memory_total_mb ? Math.round(gpu.memory_total_mb) + ' MB' : 'N/A'}</div>
</div>
<div class="gpu-stat-item">
<div class="label">Utilisation</div>
<div class="value">${gpu.utilization !== undefined ? gpu.utilization + '%' : 'N/A'}</div>
</div>
</div>
`;
} catch (e) {
container.innerHTML = '<p style="text-align:center;color:#64748b;padding:30px;">Statistiques GPU non disponibles</p>';
}
}
function formatUptime(seconds) {
if (!seconds && seconds !== 0) return '-';
const h = Math.floor(seconds / 3600);
const m = Math.floor((seconds % 3600) / 60);
const s = Math.floor(seconds % 60);
if (h > 0) return `${h}h ${m}m`;
if (m > 0) return `${m}m ${s}s`;
return `${s}s`;
}
// Initial load
document.addEventListener('DOMContentLoaded', () => {
refreshAll();
// Auto-refresh toutes les 5 secondes
setInterval(refreshAll, 5000);
});
</script>
</body>
</html>