# 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é) ```bash 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 : ```bash # 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 ```bash # 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 ```http 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 ```bash # 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 ```bash # Voir les logs en temps réel tail -f visual_workflow_builder/logs/demo_server.log ``` ### Données de Capture ```bash # 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 ```bash # 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.