rpa_vision_v3/visual_workflow_builder/GUIDE_DEMONSTRATION_REELLE.md

Guide de Démonstration Réelle - Visual Workflow Builder

Auteur : Dom, Alice, Kiro - 7 janvier 2026

🎯 Objectif

Ce guide vous explique comment utiliser le système de démonstration réelle du Visual Workflow Builder, qui permet de faire de vraies interactions avec le système RPA Vision V3.

🚀 Démarrage Rapide

Option 1 : Script Automatique (Recommandé)

cd visual_workflow_builder
python start_real_demo.py

Le script va :

• ✅ Vérifier toutes les dépendances
• ✅ Configurer l'environnement
• ✅ Démarrer le backend Flask (port 5002)
• ✅ Démarrer le serveur de démonstration (port 5003)
• ✅ Démarrer le frontend React (port 3000)

Option 2 : Démarrage Manuel

Si vous préférez contrôler chaque service :

# Terminal 1 - Backend Flask
cd visual_workflow_builder/backend
python app.py

# Terminal 2 - Serveur de Démonstration
cd visual_workflow_builder
python demo_real_functionality.py

# Terminal 3 - Frontend React
cd visual_workflow_builder/frontend
npm start

🔧 Prérequis

Logiciels Requis

• Python 3.8+ avec les packages :
  • flask
  • flask-cors
  • pillow
  • numpy
  • Modules du core RPA Vision V3
• Node.js 14+ avec npm
• Système RPA Vision V3 correctement installé

Vérification de l'Installation

# Vérifier Python et les packages
python -c "import flask, PIL, numpy; print('✅ Packages Python OK')"

# Vérifier Node.js
node --version

# Vérifier le core RPA Vision V3
python -c "from core.capture.screen_capturer import ScreenCapturer; print('✅ Core RPA Vision V3 OK')"

🎭 Utilisation de la Démonstration

1. Accès à l'Interface

1. Ouvrez votre navigateur sur http://localhost:3000
2. Cliquez sur l'onglet "Démonstration Réelle"
3. Vous devriez voir un indicateur "En Direct" vert

2. Fonctionnalités Disponibles

📸 Capture d'Écran en Temps Réel

• Votre écran est capturé automatiquement toutes les secondes
• L'image apparaît dans la zone "Capture d'Écran en Temps Réel"
• Cliquez sur "Actualiser" pour forcer une nouvelle capture

🎯 Détection d'Éléments UI

• Les éléments interactifs sont automatiquement détectés
• Ils apparaissent sous forme de chips colorés
• Cliquez sur un chip pour voir les détails de l'élément

🖱️ Exécution d'Actions Réelles

• Cliquez sur "Cliquer Ici" dans le dialog d'élément
• L'action sera exécutée réellement sur votre système
• Le résultat apparaît dans l'historique d'exécution

🔄 Workflows de Démonstration

• Cliquez sur "Créer Workflow de Démo" pour générer un workflow simple
• Cliquez sur "Exécuter Workflow" pour lancer la séquence
• Suivez l'exécution dans l'historique

3. Actions Rapides

Test de Clic Simple

1. Cliquez sur "Clic Test (200, 200)"
2. Un clic sera exécuté aux coordonnées (200, 200)
3. Vérifiez le résultat dans l'historique

Test d'Élément Détecté

1. Attendez que des éléments soient détectés
2. Cliquez sur un chip d'élément
3. Cliquez sur "Cliquer Ici" dans le dialog
4. L'élément sera cliqué automatiquement

🔍 API de Démonstration

Le serveur de démonstration expose plusieurs endpoints :

Endpoints Disponibles

GET  /api/demo/screen          # Capture d'écran actuelle
GET  /api/demo/elements        # Éléments UI détectés
POST /api/demo/execute         # Exécuter une action
POST /api/demo/workflow/execute # Exécuter un workflow

Exemple d'Utilisation de l'API

# Obtenir les éléments détectés
curl http://localhost:5003/api/demo/elements

# Exécuter un clic
curl -X POST http://localhost:5003/api/demo/execute \
  -H "Content-Type: application/json" \
  -d '{"type": "click", "target": {"x": 100, "y": 100}}'

⚠️ Sécurité et Précautions

Environnement de Test

• Utilisez uniquement dans un environnement de test sécurisé
• Fermez toutes les applications importantes avant de tester
• Sauvegardez vos données importantes

Actions Réelles

• Les clics et saisies sont exécutés réellement sur votre système
• Attention aux applications ouvertes pendant les tests
• Les actions ne peuvent pas être annulées automatiquement

Données Capturées

• Les captures d'écran sont sauvegardées dans data/demo/
• Les données d'éléments sont en JSON dans le même dossier
• Nettoyez régulièrement ces fichiers

🐛 Dépannage

Problème : Serveur de Démonstration Non Disponible

Symptômes :

• Message "Serveur de démonstration non disponible"
• Erreur de connexion à localhost:5003

Solutions :

1. Vérifiez que demo_real_functionality.py est en cours d'exécution
2. Vérifiez les imports du core RPA Vision V3
3. Consultez les logs du serveur de démonstration

Problème : Aucun Élément Détecté

Symptômes :

• Capture d'écran visible mais aucun élément dans la liste
• Message "Éléments Détectés (0)"

Solutions :

1. Ouvrez une application avec des éléments UI visibles
2. Attendez quelques secondes pour la détection
3. Vérifiez que le détecteur UI fonctionne correctement

Problème : Actions Non Exécutées

Symptômes :

• Clic demandé mais rien ne se passe
• Message d'erreur dans l'historique

Solutions :

1. Vérifiez les permissions de votre système
2. Assurez-vous qu'aucune application ne bloque les actions
3. Testez avec des coordonnées simples d'abord

📊 Monitoring et Logs

Logs du Serveur de Démonstration

# Voir les logs en temps réel
tail -f visual_workflow_builder/logs/demo_server.log

Données de Capture

# Voir les captures récentes
ls -la visual_workflow_builder/data/demo/

# Voir les éléments détectés
cat visual_workflow_builder/data/demo/current_elements.json

🔄 Arrêt de la Démonstration

Arrêt Automatique

• Appuyez sur Ctrl+C dans le terminal du script automatique
• Tous les services seront arrêtés proprement

Arrêt Manuel

# Arrêter chaque service dans son terminal
Ctrl+C

# Ou tuer les processus
pkill -f "demo_real_functionality.py"
pkill -f "app.py"
pkill -f "npm start"

🎯 Cas d'Usage Recommandés

1. Test de Détection UI

• Ouvrez différentes applications (navigateur, éditeur, etc.)
• Observez la détection automatique des éléments
• Testez la précision des coordonnées

2. Validation de Workflows

• Créez des workflows simples
• Testez l'exécution séquentielle
• Vérifiez la gestion des erreurs

3. Démonstration Client

• Préparez un environnement de démonstration propre
• Créez des scénarios reproductibles
• Montrez les capacités en temps réel

📚 Ressources Supplémentaires

• Documentation Core RPA Vision V3 : docs/reference/
• Guide d'Architecture : ARCHITECTURE_VISION_COMPLETE.md
• Tests d'Intégration : tests/integration/
• Exemples de Workflows : examples/

---

Note : Cette démonstration est conçue pour montrer les capacités du système RPA Vision V3. Pour un usage en production, utilisez les composants officiels du système avec les configurations de sécurité appropriées.