rpa_vision_v3/docs/SYSTEME_PROPRIETES_ETAPES_VWB_COMPLETE_12012026.md

Système de Propriétés d'Étapes VWB - Documentation Complète

Auteur : Dom, Alice, Kiro
Date : 12 janvier 2026
Version : 1.0.0

Vue d'Ensemble

Le système de propriétés d'étapes VWB fournit une interface complète pour configurer et valider les paramètres de toutes les actions du catalogue VisionOnly.

Architecture

Composants Frontend

1. PropertiesPanel (Principal)

• Fichier : visual_workflow_builder/frontend/src/components/PropertiesPanel/index.tsx
• Rôle : Panneau principal de configuration des propriétés
• Fonctionnalités :
  • Configuration des paramètres par type d'étape
  • Éditeurs spécialisés (texte, nombre, booléen, sélection, visuel)
  • Support des variables avec autocomplétion
  • Validation en temps réel
  • Intégration avec le sélecteur visuel

2. VWBActionProperties (Spécialisé)

• Fichier : visual_workflow_builder/frontend/src/components/PropertiesPanel/VWBActionProperties.tsx
• Rôle : Composant spécialisé pour les actions VWB du catalogue
• Fonctionnalités :
  • Éditeur d'ancres visuelles avancé
  • Validation en temps réel des paramètres VWB
  • Affichage des exemples d'utilisation
  • Configuration du seuil de confiance
  • Gestion des métadonnées d'actions

3. useVWBStepIntegration (Hook)

• Fichier : visual_workflow_builder/frontend/src/hooks/useVWBStepIntegration.ts
• Rôle : Hook d'intégration des étapes VWB dans le workflow
• Fonctionnalités :
  • Création d'étapes VWB depuis le catalogue
  • Validation des étapes VWB
  • Conversion drag-and-drop
  • Gestion du cache des actions

Types TypeScript

Fichier Principal

• Fichier : visual_workflow_builder/frontend/src/types/catalog.ts
• Contenu : Définitions complètes des types VWB
• Types Principaux :
  • VWBCatalogAction : Structure d'une action du catalogue
  • VWBActionParameter : Configuration d'un paramètre
  • VWBVisualAnchor : Ancre visuelle avec métadonnées
  • VWBActionValidationResult : Résultat de validation

Backend Actions

Registry

• Fichier : visual_workflow_builder/backend/actions/registry.py
• Rôle : Gestionnaire central des actions VWB
• Fonctionnalités :
  • Enregistrement automatique des actions
  • Recherche par catégorie et type
  • Thread-safety pour accès concurrent
  • Chargement dynamique des actions

Actions Implémentées

Vision UI

• click_anchor : Cliquer sur un élément visuel
• type_text : Saisir du texte
• type_secret : Saisir du texte sensible
• focus_anchor : Donner le focus à un élément
• extract_text : Extraire du texte
• screenshot_evidence : Capturer une preuve
• wait_for_anchor : Attendre un élément
• hotkey : Raccourci clavier
• scroll_to_anchor : Défiler vers un élément

Navigation

• navigate_to_url : Naviguer vers une URL
• browser_back : Retour navigateur

Validation

• verify_element_exists : Vérifier l'existence d'un élément
• verify_text_content : Vérifier le contenu textuel

Configuration des Paramètres

Types de Paramètres Supportés

1. string : Texte simple avec support des variables
2. number : Valeurs numériques avec min/max
3. boolean : Commutateurs vrai/faux
4. VWBVisualAnchor : Ancres visuelles avec éditeur spécialisé
5. select : Listes de choix prédéfinies

Éditeurs Spécialisés

Éditeur d'Ancres Visuelles

• Sélection visuelle interactive
• Aperçu de l'image de référence
• Configuration du seuil de confiance
• Métadonnées d'embedding
• Validation en temps réel

Autocomplétion de Variables

• Support des variables de workflow
• Syntaxe ${variable_name}
• Validation des références
• Aperçu des valeurs

Validation en Temps Réel

Côté Frontend

• Validation des types de paramètres
• Vérification des contraintes (min/max, required)
• Affichage des erreurs contextuelles
• Suggestions d'amélioration

Côté Backend

• Validation des ancres visuelles
• Vérification de la cohérence des paramètres
• Estimation du taux de succès
• Génération de suggestions

Utilisation

Création d'une Étape VWB

// Utilisation du hook d'intégration
const { methods } = useVWBStepIntegration();

// Créer une étape depuis le catalogue
const step = await methods.createVWBStep('click_anchor', { x: 100, y: 200 });

Configuration des Propriétés

1. Sélectionner une étape dans le canvas
2. Configurer les paramètres dans le panneau de propriétés
3. Utiliser le sélecteur visuel pour les ancres
4. Valider en temps réel les paramètres
5. Voir les exemples d'utilisation

Validation des Étapes

// Validation d'une étape VWB
const isValid = await methods.validateVWBStep(step);

Tests et Validation

Tests d'Intégration

• Fichier : tests/integration/test_proprietes_etapes_completes_12jan2026.py
• Couverture : Tous les composants et fonctionnalités
• Validation : Cohérence entre frontend et backend

Script de Vérification

• Fichier : scripts/verification_proprietes_etapes_complete_12jan2026.py
• Fonction : Analyse complète du système
• Rapport : JSON détaillé avec métriques

Maintenance

Ajout d'une Nouvelle Action

1. Backend : Créer la classe d'action héritant de BaseVWBAction
2. Catalogue : Ajouter l'action au catalogue statique
3. Types : Mettre à jour les types TypeScript si nécessaire
4. Tests : Ajouter les tests d'intégration
5. Documentation : Mettre à jour cette documentation

Ajout d'un Nouveau Type de Paramètre

1. Types : Ajouter le type dans VWBParameterType
2. Éditeur : Créer l'éditeur spécialisé dans VWBActionProperties
3. Validation : Implémenter la validation côté backend
4. Tests : Ajouter les tests de validation

Dépannage

Problèmes Courants

Action Non Trouvée

• Vérifier l'enregistrement dans le registry
• Contrôler l'ID de l'action dans le catalogue
• Valider l'import du module backend

Paramètres Invalides

• Vérifier les types de paramètres
• Contrôler les contraintes (required, min/max)
• Valider la structure des ancres visuelles

Validation Échouée

• Vérifier la connexion au service de validation
• Contrôler les paramètres d'ancres visuelles
• Valider la cohérence des types

Logs et Débogage

// Activer les logs détaillés
console.log('VWB Step Integration:', { state, methods });

Évolutions Futures

Fonctionnalités Prévues

• Éditeur visuel de workflows complets
• Templates d'actions prédéfinies
• Validation avancée avec IA
• Métriques de performance en temps réel
• Support multi-langues pour l'interface

Améliorations Techniques

• Optimisation des performances de validation
• Cache intelligent des ancres visuelles
• Synchronisation temps réel multi-utilisateurs
• API REST complète pour intégrations externes

---

Note : Cette documentation est maintenue automatiquement. Pour toute question, consulter le code source ou les tests d'intégration.