v1.0 - Version stable: multi-PC, détection UI-DETR-1, 3 modes exécution
- Frontend v4 accessible sur réseau local (192.168.1.40) - Ports ouverts: 3002 (frontend), 5001 (backend), 5004 (dashboard) - Ollama GPU fonctionnel - Self-healing interactif - Dashboard confiance Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Dom
227
docs/SYSTEME_PROPRIETES_ETAPES_VWB_COMPLETE_12012026.md
Normal file
227
docs/SYSTEME_PROPRIETES_ETAPES_VWB_COMPLETE_12012026.md
Normal file
@@ -0,0 +1,227 @@
|
||||
# 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
|
||||
|
||||
```typescript
|
||||
// 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
|
||||
|
||||
```typescript
|
||||
// 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
|
||||
|
||||
```typescript
|
||||
// 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.
|
||||
Reference in New Issue
Block a user