rpa_vision_v3/visual_workflow_builder/GUIDE_CAPTURE_EXTERNE.md

Guide - Capture d'Application Externe

🎯 Problème Résolu

Avant : La sélection visuelle capturait l'écran du Visual Workflow Builder lui-même Maintenant : Possibilité de capturer n'importe quelle application externe

🚀 Nouvelle Fonctionnalité

Mode de Capture Externe

Quand vous ouvrez la sélection visuelle, vous avez maintenant le choix :

1. Capture Actuelle (pour test) - Capture l'écran actuel
2. Capturer Application Externe (recommandé) - Capture une autre application

Workflow de Capture Externe

1. Sélection du mode : Cliquez sur "Capturer Application Externe"
2. Countdown : Un compte à rebours 5-4-3-2-1 s'affiche en plein écran
3. Positionnement : Pendant le countdown, positionnez-vous sur l'application cible
4. Capture automatique : À la fin du countdown, l'écran est capturé
5. Sélection : L'interface revient avec la capture de l'application cible

📋 Instructions d'Utilisation

Étape 1 : Préparer l'Application Cible

# Ouvrez l'application que vous voulez automatiser
# Exemples :
gnome-calculator    # Calculatrice
firefox            # Navigateur
libreoffice        # Suite bureautique

Étape 2 : Démarrer Visual Workflow Builder

cd visual_workflow_builder
./start_full.sh

Étape 3 : Créer un Workflow

1. Ouvrir http://localhost:3000
2. Créer un nouveau workflow
3. Ajouter un nœud "Action"
4. Double-cliquer pour ouvrir les propriétés

Étape 4 : Sélection Visuelle Externe

1. Dans "Sélecteur de cible", cliquer "Sélection visuelle"
2. Choisir "Capturer Application Externe"
3. Pendant le countdown : Se positionner sur l'application cible
4. Attendre la capture automatique
5. Cliquer sur l'élément à sélectionner
6. Confirmer la sélection

🎮 Test Rapide

cd visual_workflow_builder
python test_capture_externe.py

Ce script :

• Vérifie que l'API fonctionne
• Ouvre une application de test (calculatrice)
• Donne les instructions pour tester manuellement

🔧 Fonctionnalités Techniques

Interface Utilisateur

• Mode sélection : Choix entre capture actuelle et externe
• Countdown visuel : Plein écran avec annulation possible
• Bouton recapture : Pour refaire une capture si nécessaire

API Backend

• Endpoint /api/screen-capture/capture inchangé
• Capture toujours l'écran complet au moment de l'appel
• Le timing est géré côté frontend

Gestion d'État

const [captureMode, setCaptureMode] = useState<'select' | 'countdown' | 'captured'>('select');
const [countdown, setCountdown] = useState<number | null>(null);

🎯 Cas d'Usage

1. Automatisation Web

• Ouvrir un site web dans un navigateur
• Utiliser la capture externe pour sélectionner des éléments
• Créer un workflow d'automatisation web

2. Applications Desktop

• Ouvrir une application native (calculatrice, éditeur)
• Capturer et sélectionner des boutons/champs
• Automatiser des tâches desktop

3. Applications Multi-Fenêtres

• Travailler avec plusieurs applications
• Capturer chaque application séparément
• Créer des workflows complexes

⚡ Améliorations Futures

Phase 1 : Sélection de Fenêtre

// Lister les fenêtres ouvertes
const windows = await getOpenWindows();
// Permettre à l'utilisateur de choisir
const selectedWindow = await selectWindow(windows);
// Capturer uniquement cette fenêtre
const screenshot = await captureWindow(selectedWindow);

Phase 2 : Raccourcis Clavier

// Capture déclenchée par raccourci global
document.addEventListener('keydown', (e) => {
  if (e.ctrlKey && e.shiftKey && e.key === 'C') {
    triggerExternalCapture();
  }
});

Phase 3 : Capture de Région

// Permettre de sélectionner une région spécifique
const region = await selectRegion();
const screenshot = await captureRegion(region);

🐛 Dépannage

Problème : Le countdown ne s'affiche pas

Solution : Vérifier que le frontend est bien démarré sur le port 3000

Problème : La capture montre encore le navigateur

Cause : L'utilisateur n'a pas eu le temps de se positionner Solution : Augmenter le délai du countdown ou utiliser le bouton "Nouvelle capture"

Problème : Aucune application visible dans la capture

Cause : Toutes les fenêtres sont minimisées Solution : S'assurer qu'une application est visible avant le countdown

📊 Métriques de Performance

• Temps de countdown : 5 secondes (configurable)
• Temps de capture : ~500ms
• Taille d'image : ~200-500KB selon la résolution
• Temps total : ~6 secondes du clic à la capture

✅ Validation

Tests Manuels

• Interface de sélection de mode s'affiche
• Countdown fonctionne avec annulation
• Capture externe montre l'application cible
• Sélection d'éléments fonctionne
• Bouton "Nouvelle capture" fonctionne

Tests Automatiques

./test_selection_visuelle.sh  # Tests API
python test_capture_externe.py  # Tests workflow

🎉 Conclusion

La capture d'application externe résout complètement le problème d'utilisabilité. L'utilisateur peut maintenant :

1. ✅ Capturer n'importe quelle application
2. ✅ Avoir le temps de se positionner (countdown)
3. ✅ Voir clairement l'application cible dans la capture
4. ✅ Sélectionner des éléments de façon intuitive
5. ✅ Refaire une capture si nécessaire

La sélection visuelle est maintenant pleinement utilisable pour l'automatisation RPA !