feat: replay E2E fonctionnel — 25/25 actions, 0 retries, SomEngine via serveur

Validé sur PC Windows (DESKTOP-58D5CAC, 2560x1600) :
- 8 clics résolus visuellement (1 anchor_template, 1 som_text_match, 6 som_vlm)
- Score moyen 0.75, temps moyen 1.6s
- Texte tapé correctement (bonjour, test word, date, email)
- 0 retries, 2 actions non vérifiées (OK)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dom
2026-03-31 14:04:41 +02:00
parent 5e0b53cfd1
commit a7de6a488b
79542 changed files with 6091757 additions and 1 deletions

View File

@@ -0,0 +1,505 @@
# Document de Conception: Amélioration des Propriétés RPA 100% Visuel
## Vue d'Ensemble
Cette conception transforme le Visual Workflow Builder pour qu'il soit entièrement basé sur la vision, éliminant toute référence aux sélecteurs CSS/XPath et améliorant significativement la visualisation des captures d'écran. Le système utilisera uniquement des méthodes de reconnaissance visuelle basées sur les embeddings CLIP et la détection d'objets pour identifier et cibler les éléments UI.
L'architecture s'appuie sur les composants existants du système RPA Vision V3 (FusionEngine, UIDetector, TargetResolver) tout en introduisant de nouveaux composants spécialisés pour la gestion visuelle pure et l'interface utilisateur améliorée.
## Architecture
### Composants Principaux
```mermaid
graph TB
subgraph "Interface Utilisateur"
VPP[VisualPropertiesPanel]
VSS[VisualScreenSelector]
IPA[InteractivePreviewArea]
VMD[VisualMetadataDisplay]
end
subgraph "Logique Visuelle"
VTM[VisualTargetManager]
SVM[ScreenshotValidationManager]
VEM[VisualEmbeddingManager]
CCS[ContextualCaptureService]
end
subgraph "Système RPA Existant"
FE[FusionEngine]
UD[UIDetector]
TR[TargetResolver]
SC[ScreenCapturer]
end
VPP --> VTM
VSS --> VTM
VTM --> VEM
VTM --> SVM
VEM --> FE
SVM --> UD
CCS --> SC
IPA --> CCS
```
### Flux de Données
1. **Sélection Visuelle**: L'utilisateur clique sur "Sélectionner" → Capture d'écran → Mode sélection interactive → Extraction des caractéristiques visuelles → Stockage de l'embedding
2. **Affichage des Propriétés**: Chargement de l'élément → Récupération de la capture → Validation en temps réel → Affichage enrichi
3. **Validation Continue**: Vérification périodique → Comparaison d'embeddings → Mise à jour du statut → Notifications utilisateur
## Composants et Interfaces
### 1. VisualPropertiesPanel
**Responsabilité**: Panneau principal des propriétés entièrement visuel
```typescript
interface VisualPropertiesPanelProps {
node: VisualNode;
onNodeUpdate: (nodeId: string, visualConfig: VisualNodeConfig) => void;
onClose: () => void;
}
interface VisualNodeConfig {
visualTarget?: VisualTarget;
parameters: Record<string, any>;
visualMetadata: VisualMetadata;
}
interface VisualTarget {
embedding: Float32Array;
screenshot: string; // Base64 encoded image
boundingBox: BoundingBox;
confidence: number;
contextualInfo: ContextualInfo;
signature: string; // Unique visual signature
}
```
**Fonctionnalités**:
- Affichage des captures d'écran haute qualité
- Sélection visuelle interactive
- Validation en temps réel
- Métadonnées visuelles enrichies
- Interface sans éléments techniques
### 2. VisualScreenSelector
**Responsabilité**: Sélecteur d'écran interactif pour la sélection visuelle pure
```typescript
interface VisualScreenSelectorProps {
onElementSelected: (target: VisualTarget) => void;
onCancel: () => void;
isOpen: boolean;
}
interface SelectionMode {
type: 'hover' | 'click' | 'drag';
highlightColor: string;
showTooltips: boolean;
}
```
**Fonctionnalités**:
- Capture d'écran en temps réel
- Détection d'éléments au survol
- Surbrillance visuelle interactive
- Extraction automatique des caractéristiques
- Validation immédiate de la sélection
### 3. InteractivePreviewArea
**Responsabilité**: Zone d'aperçu interactif pour les captures d'écran
```typescript
interface InteractivePreviewAreaProps {
screenshot: string;
boundingBox: BoundingBox;
onZoom: (level: number) => void;
onPan: (x: number, y: number) => void;
showAnnotations: boolean;
}
interface PreviewControls {
zoom: number;
pan: { x: number; y: number };
annotations: Annotation[];
highlightTarget: boolean;
}
```
**Fonctionnalités**:
- Zoom fluide avec molette
- Navigation par glisser-déposer
- Annotations contextuelles
- Surbrillance de l'élément cible
- Contrôles de navigation intuitifs
### 4. VisualTargetManager
**Responsabilité**: Gestionnaire central pour les cibles visuelles
```typescript
class VisualTargetManager {
async captureAndSelectElement(position: Point): Promise<VisualTarget>;
async validateTarget(target: VisualTarget): Promise<ValidationResult>;
async updateTargetScreenshot(target: VisualTarget): Promise<VisualTarget>;
async findSimilarElements(target: VisualTarget): Promise<VisualTarget[]>;
generateVisualSignature(element: UIElement): string;
}
interface ValidationResult {
isValid: boolean;
confidence: number;
suggestions?: VisualTarget[];
issues?: ValidationIssue[];
}
```
**Fonctionnalités**:
- Capture et analyse d'éléments
- Validation continue des cibles
- Génération de signatures visuelles
- Détection d'éléments similaires
- Gestion des mises à jour
### 5. VisualEmbeddingManager
**Responsabilité**: Gestion des embeddings visuels et de la reconnaissance
```typescript
class VisualEmbeddingManager {
async generateEmbedding(screenshot: ImageData, boundingBox: BoundingBox): Promise<Float32Array>;
async compareEmbeddings(embedding1: Float32Array, embedding2: Float32Array): Promise<number>;
async findBestMatch(targetEmbedding: Float32Array, candidates: VisualTarget[]): Promise<MatchResult>;
cacheEmbedding(signature: string, embedding: Float32Array): void;
}
interface MatchResult {
target: VisualTarget;
confidence: number;
alternatives: VisualTarget[];
}
```
**Fonctionnalités**:
- Génération d'embeddings CLIP
- Comparaison de similarité
- Mise en cache intelligente
- Recherche de correspondances
- Optimisation des performances
## Modèles de Données
### VisualMetadata
```typescript
interface VisualMetadata {
elementType: ElementType;
visualDescription: string;
relativePosition: RelativePosition;
textContent?: string;
contextualElements: ContextualElement[];
visualStates: VisualState[];
lastValidated: Date;
}
enum ElementType {
BUTTON = 'button',
INPUT_FIELD = 'input_field',
LINK = 'link',
IMAGE = 'image',
TEXT = 'text',
DROPDOWN = 'dropdown',
CHECKBOX = 'checkbox',
RADIO_BUTTON = 'radio_button',
UNKNOWN = 'unknown'
}
interface RelativePosition {
description: string; // "en haut à droite", "au centre", etc.
quadrant: Quadrant;
distanceFromEdges: EdgeDistances;
}
```
### ContextualInfo
```typescript
interface ContextualInfo {
surroundingElements: SurroundingElement[];
parentContainer?: ContainerInfo;
siblingElements: SiblingElement[];
visualHierarchy: HierarchyLevel[];
}
interface SurroundingElement {
type: ElementType;
position: RelativePosition;
distance: number;
relationship: SpatialRelationship;
}
enum SpatialRelationship {
ABOVE = 'above',
BELOW = 'below',
LEFT = 'left',
RIGHT = 'right',
INSIDE = 'inside',
ADJACENT = 'adjacent'
}
```
## Stratégies de Validation
### Validation en Temps Réel
```typescript
class RealtimeValidator {
private validationInterval: number = 5000; // 5 secondes
async startValidation(target: VisualTarget): Promise<void> {
setInterval(async () => {
const result = await this.validateTarget(target);
this.notifyValidationResult(result);
}, this.validationInterval);
}
private async validateTarget(target: VisualTarget): Promise<ValidationResult> {
// 1. Capturer l'écran actuel
// 2. Rechercher l'élément par embedding
// 3. Comparer avec la signature originale
// 4. Retourner le résultat avec confiance
}
}
```
### Stratégies de Récupération
1. **Élément Non Trouvé**: Recherche d'éléments similaires dans la zone élargie
2. **Changement d'Apparence**: Proposition de mise à jour de l'embedding
3. **Déplacement**: Recherche dans l'écran complet avec tolérance spatiale
4. **Modification Structurelle**: Analyse du contexte pour retrouver l'élément
## Interface Utilisateur
### Panneau des Propriétés Amélioré
```typescript
const VisualPropertiesPanel: React.FC<VisualPropertiesPanelProps> = ({ node, onNodeUpdate, onClose }) => {
return (
<Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
{/* En-tête avec type d'élément */}
<VisualHeader elementType={node.visualTarget?.metadata.elementType} />
{/* Zone de capture principale */}
<ScreenshotDisplay
screenshot={node.visualTarget?.screenshot}
boundingBox={node.visualTarget?.boundingBox}
onPreviewClick={() => setPreviewOpen(true)}
/>
{/* Métadonnées visuelles */}
<VisualMetadataSection metadata={node.visualTarget?.metadata} />
{/* Paramètres de configuration */}
<VisualParametersSection
parameters={node.parameters}
onChange={handleParameterChange}
/>
{/* Validation en temps réel */}
<ValidationStatusIndicator target={node.visualTarget} />
</Box>
);
};
```
### Sélecteur Visuel Interactif
```typescript
const VisualScreenSelector: React.FC<VisualScreenSelectorProps> = ({ onElementSelected, onCancel, isOpen }) => {
return (
<Dialog fullScreen open={isOpen} onClose={onCancel}>
<Box sx={{ position: 'relative', height: '100vh' }}>
{/* Overlay de sélection */}
<SelectionOverlay
onElementHover={handleElementHover}
onElementClick={handleElementClick}
/>
{/* Contrôles de sélection */}
<SelectionControls
onCancel={onCancel}
onConfirm={handleConfirm}
/>
{/* Tooltip d'information */}
<ElementTooltip
element={hoveredElement}
position={mousePosition}
/>
</Box>
</Dialog>
);
};
```
## Gestion des Erreurs
### Types d'Erreurs Visuelles
1. **Élément Non Trouvé**: L'élément n'existe plus ou a changé
2. **Confiance Faible**: L'embedding ne correspond pas suffisamment
3. **Ambiguïté**: Plusieurs éléments similaires trouvés
4. **Contexte Modifié**: L'environnement de l'élément a changé
### Stratégies de Récupération
```typescript
class VisualErrorRecovery {
async handleElementNotFound(target: VisualTarget): Promise<RecoveryAction> {
// 1. Recherche élargie dans l'écran
// 2. Recherche par contexte
// 3. Proposition de re-sélection
// 4. Suggestion d'éléments similaires
}
async handleLowConfidence(target: VisualTarget, confidence: number): Promise<RecoveryAction> {
// 1. Analyse des changements visuels
// 2. Proposition de mise à jour
// 3. Validation manuelle
// 4. Apprentissage adaptatif
}
}
```
## Propriétés de Correction
*Une propriété est une caractéristique ou un comportement qui doit être vrai pour toutes les exécutions valides d'un système - essentiellement, une déclaration formelle sur ce que le système doit faire. Les propriétés servent de pont entre les spécifications lisibles par l'homme et les garanties de correction vérifiables par machine.*
### Propriété 1: Élimination Complète des Sélecteurs Techniques
*Pour tout* panneau de propriétés affiché, aucun champ CSS ou XPath ne doit être visible à l'utilisateur
**Valide: Exigences 1.1, 1.4**
### Propriété 2: Sélection Visuelle Pure
*Pour toute* configuration de cible, le système doit utiliser uniquement des méthodes de sélection visuelle interactive et stocker des embeddings visuels
**Valide: Exigences 1.2, 1.3, 1.5**
### Propriété 3: Affichage de Captures Haute Qualité
*Pour tout* élément sélectionné, une capture d'écran de haute qualité avec contour coloré doit être affichée dans le panneau des propriétés
**Valide: Exigences 2.1, 2.3**
### Propriété 4: Différenciation Visuelle des Éléments Similaires
*Pour tout* ensemble d'éléments similaires détectés, le système doit afficher des indicateurs visuels de différenciation
**Valide: Exigences 2.4**
### Propriété 5: Mise à Jour Automatique des Captures
*Pour tout* élément dont l'apparence change, le système doit automatiquement mettre à jour sa capture d'écran
**Valide: Exigences 2.5**
### Propriété 6: Surbrillance Interactive en Mode Sélection
*Pour tout* survol d'élément en mode sélection visuelle, le système doit afficher une surbrillance avec contours colorés
**Valide: Exigences 3.2**
### Propriété 7: Génération de Signatures Visuelles Uniques
*Pour tout* clic sur un élément en mode sélection, le système doit extraire les caractéristiques visuelles et créer une signature unique
**Valide: Exigences 3.3, 3.4**
### Propriété 8: Réactivité de l'Affichage des Captures
*Pour tout* élément sélectionné, sa capture doit immédiatement apparaître dans le panneau des propriétés
**Valide: Exigences 3.5**
### Propriété 9: Métadonnées en Langage Naturel
*Pour tout* élément sélectionné, ses métadonnées (type, position, caractéristiques) doivent être affichées en langage naturel compréhensible
**Valide: Exigences 4.1, 4.2, 4.3, 4.4**
### Propriété 10: Avertissements de Confiance Faible
*Pour tout* élément avec une confiance de reconnaissance faible, le système doit afficher un avertissement visuel clair
**Valide: Exigences 4.5**
### Propriété 11: Fonctionnalité de Zoom Interactif
*Pour tout* aperçu d'image ouvert, les événements de molette de souris doivent permettre le zoom avec maintien de la qualité
**Valide: Exigences 5.2**
### Propriété 12: Contour Animé pour Éléments Cibles
*Pour tout* élément cible visible dans l'aperçu, un contour animé doit être affiché pour le mettre en évidence
**Valide: Exigences 5.4**
### Propriété 13: Persistance de Configuration lors de la Fermeture d'Aperçu
*Pour tout* aperçu fermé, le panneau des propriétés doit revenir avec la configuration intacte
**Valide: Exigences 5.5**
### Propriété 14: Validation Périodique Automatique
*Pour tout* élément configuré, le système doit vérifier périodiquement sa présence et afficher des indicateurs de statut appropriés
**Valide: Exigences 6.1, 6.2, 6.3**
### Propriété 15: Récupération Intelligente d'Éléments
*Pour tout* élément qui change d'apparence ou disparaît, le système doit proposer des actions de récupération (mise à jour ou re-sélection)
**Valide: Exigences 6.4, 6.5**
### Propriété 16: Capture du Contexte Environnant
*Pour tout* élément sélectionné, le système doit capturer et afficher le contexte environnant avec métadonnées contextuelles
**Valide: Exigences 7.1, 7.2, 7.3**
### Propriété 17: Détection d'États Visuels
*Pour tout* élément ayant des états visuels (hover, focus), le système doit les détecter et les signaler
**Valide: Exigences 7.4**
### Propriété 18: Mise à Jour Automatique des Métadonnées
*Pour tout* changement de contexte détecté, les métadonnées de l'élément doivent être automatiquement mises à jour
**Valide: Exigences 7.5**
### Propriété 19: Interface Entièrement Visuelle
*Pour tout* panneau de propriétés ouvert, seuls des contrôles visuels et intuitifs doivent être affichés, avec terminologie métier compréhensible
**Valide: Exigences 8.1, 8.2, 8.3**
### Propriété 20: Messages d'Erreur Visuels
*Pour toute* erreur survenant, le système doit l'expliquer en termes visuels avec suggestions d'action
**Valide: Exigences 8.4**
### Propriété 21: Aide Visuelle Contextuelle
*Pour toute* demande d'aide, le système doit fournir des exemples visuels et des captures d'écran
**Valide: Exigences 8.5**
### Propriété 22: Persistance Complète des Données Visuelles
*Pour tout* workflow sauvegardé puis chargé, toutes les données visuelles (embeddings, captures, métadonnées) doivent être préservées
**Valide: Exigences 9.1, 9.2, 9.5**
### Propriété 23: Validation Post-Chargement
*Pour tout* workflow chargé, le système doit vérifier la validité actuelle des captures et proposer une re-sélection si nécessaire
**Valide: Exigences 9.3, 9.4**
### Propriété 24: Performance de Traitement des Captures
*Pour toute* capture d'écran prise, le traitement et l'affichage doivent s'effectuer en moins de 2 secondes
**Valide: Exigences 10.1**
### Propriété 25: Réactivité du Mode Sélection
*Pour tout* survol d'élément en mode sélection, la réaction visuelle doit s'afficher en moins de 100ms
**Valide: Exigences 10.2**
### Propriété 26: Optimisation par Cache des Captures
*Pour tout* affichage de multiples captures, le système doit utiliser un mécanisme de cache pour optimiser les performances
**Valide: Exigences 10.4**
### Propriété 27: Traitement Non-Bloquant des Embeddings
*Pour tout* traitement d'embeddings, l'opération doit s'effectuer en arrière-plan sans bloquer l'interface utilisateur
**Valide: Exigences 10.5**
## Stratégie de Test
### Approche de Test Dual
- **Tests unitaires**: Vérifier des exemples spécifiques, cas limites et conditions d'erreur
- **Tests basés sur les propriétés**: Vérifier les propriétés universelles sur tous les inputs
- Les deux approches sont complémentaires et nécessaires pour une couverture complète
### Configuration des Tests Basés sur les Propriétés
- **Bibliothèque**: Hypothesis pour Python (backend) et fast-check pour TypeScript (frontend)
- **Itérations minimales**: 100 par test de propriété
- **Format de tag**: **Feature: visual-rpa-properties-enhancement, Property {number}: {property_text}**
- Chaque propriété de correction doit être implémentée par un SEUL test basé sur les propriétés

View File

@@ -0,0 +1,139 @@
# Document d'Exigences: Amélioration des Propriétés RPA 100% Visuel
## Introduction
Cette spécification vise à améliorer le Visual Workflow Builder pour qu'il soit entièrement basé sur la vision, en supprimant toute référence aux sélecteurs CSS/XPath et en améliorant la visualisation des captures d'écran dans la fenêtre des propriétés. L'objectif est de rendre le système RPA complètement visuel et intuitif pour les utilisateurs non-techniques.
Le système doit permettre aux utilisateurs de sélectionner des éléments uniquement par reconnaissance visuelle et d'afficher clairement les captures d'écran des éléments sélectionnés pour une meilleure compréhension et validation.
## Glossaire
- **Sélection Visuelle**: Méthode de sélection d'éléments UI basée uniquement sur la reconnaissance visuelle et les embeddings
- **Capture d'Écran Contextuelle**: Image de l'élément sélectionné dans son contexte d'écran
- **Propriétés Visuelles**: Panneau de configuration utilisant uniquement des méthodes visuelles
- **Embedding Visuel**: Représentation vectorielle d'un élément UI pour la reconnaissance
- **Signature Visuelle**: Identifiant unique basé sur l'apparence visuelle d'un élément
- **Aperçu Interactif**: Visualisation agrandie et interactive des captures d'écran
- **Sélecteur Visuel**: Méthode de ciblage basée sur les caractéristiques visuelles uniquement
## Exigences
### Exigence 1: Suppression des Sélecteurs CSS/XPath
**User Story:** En tant qu'utilisateur RPA, je veux configurer mes actions sans voir de code technique, afin de me concentrer uniquement sur les aspects visuels de l'automatisation.
#### Critères d'Acceptation
1. QUAND un utilisateur ouvre le panneau des propriétés d'un outil, LE Système DOIT masquer tous les champs CSS et XPath
2. QUAND un utilisateur configure une cible, LE Système DOIT utiliser uniquement la sélection visuelle interactive
3. QUAND le système stocke une cible, LE Système DOIT utiliser les embeddings visuels et les signatures d'éléments
4. QUAND un utilisateur voit les propriétés d'un élément, LE Système DOIT afficher uniquement les informations visuelles compréhensibles
5. QUAND le système exécute une action, LE Système DOIT résoudre les cibles par reconnaissance visuelle uniquement
### Exigence 2: Amélioration de la Visualisation des Captures
**User Story:** En tant qu'utilisateur RPA, je veux voir clairement la capture d'écran de l'élément que j'ai sélectionné, afin de valider visuellement ma configuration.
#### Critères d'Acceptation
1. QUAND un élément est sélectionné, LE Système DOIT afficher une capture d'écran haute qualité de l'élément dans le panneau des propriétés
2. QUAND l'utilisateur clique sur la capture, LE Système DOIT ouvrir un aperçu agrandi avec zoom et navigation
3. QUAND la capture est affichée, LE Système DOIT inclure un contour coloré montrant la zone exacte de l'élément
4. QUAND plusieurs éléments similaires existent, LE Système DOIT afficher des indicateurs visuels de différenciation
5. QUAND l'élément change d'apparence, LE Système DOIT mettre à jour automatiquement la capture d'écran
### Exigence 3: Sélection Visuelle Pure
**User Story:** En tant qu'utilisateur RPA, je veux sélectionner des éléments uniquement en les pointant visuellement, afin d'éviter toute complexité technique.
#### Critères d'Acceptation
1. QUAND un utilisateur clique sur "Sélectionner un élément", LE Système DOIT capturer l'écran actuel et entrer en mode sélection visuelle
2. QUAND l'utilisateur survole des éléments, LE Système DOIT les mettre en surbrillance avec des contours colorés
3. QUAND l'utilisateur clique sur un élément, LE Système DOIT extraire ses caractéristiques visuelles et créer une signature unique
4. QUAND la sélection est confirmée, LE Système DOIT stocker l'embedding visuel et les métadonnées de l'élément
5. QUAND l'élément est sélectionné, LE Système DOIT afficher immédiatement sa capture dans le panneau des propriétés
### Exigence 4: Informations Visuelles Enrichies
**User Story:** En tant qu'utilisateur RPA, je veux voir des informations détaillées mais compréhensibles sur l'élément sélectionné, afin de valider ma configuration sans connaissances techniques.
#### Critères d'Acceptation
1. QUAND un élément est sélectionné, LE Système DOIT afficher son type d'élément en langage naturel (bouton, champ de texte, lien, etc.)
2. QUAND les propriétés sont affichées, LE Système DOIT inclure la position relative ("en haut à droite", "au centre", etc.)
3. QUAND l'élément contient du texte, LE Système DOIT afficher le texte visible de manière lisible
4. QUAND l'élément a des caractéristiques spéciales, LE Système DOIT les décrire en termes visuels compréhensibles
5. QUAND la confiance de reconnaissance est faible, LE Système DOIT afficher un avertissement visuel clair
### Exigence 5: Aperçu Interactif des Captures
**User Story:** En tant qu'utilisateur RPA, je veux pouvoir examiner en détail la capture d'écran de mon élément, afin de m'assurer qu'il est correctement identifié.
#### Critères d'Acceptation
1. QUAND l'utilisateur clique sur une capture d'écran, LE Système DOIT ouvrir une fenêtre d'aperçu en plein écran
2. QUAND l'aperçu est ouvert, LE Système DOIT permettre le zoom avec la molette de la souris
3. QUAND l'utilisateur zoome, LE Système DOIT maintenir la qualité de l'image et la fluidité
4. QUAND l'élément cible est visible, LE Système DOIT afficher un contour animé pour le mettre en évidence
5. QUAND l'aperçu est fermé, LE Système DOIT revenir au panneau des propriétés avec la configuration intacte
### Exigence 6: Validation Visuelle en Temps Réel
**User Story:** En tant qu'utilisateur RPA, je veux savoir immédiatement si mon élément sélectionné est toujours valide, afin d'éviter les erreurs d'exécution.
#### Critères d'Acceptation
1. QUAND un élément est configuré, LE Système DOIT vérifier périodiquement sa présence à l'écran
2. QUAND l'élément est trouvé, LE Système DOIT afficher un indicateur vert de validation
3. QUAND l'élément n'est plus trouvé, LE Système DOIT afficher un avertissement orange avec suggestions
4. QUAND l'élément a changé d'apparence, LE Système DOIT proposer une mise à jour de la sélection
5. QUAND la validation échoue, LE Système DOIT offrir de relancer la sélection visuelle
### Exigence 7: Métadonnées Visuelles Contextuelles
**User Story:** En tant qu'utilisateur RPA, je veux comprendre le contexte de mon élément sélectionné, afin de m'assurer qu'il fonctionnera dans différentes situations.
#### Critères d'Acceptation
1. QUAND un élément est sélectionné, LE Système DOIT capturer et afficher le contexte environnant (éléments voisins)
2. QUAND les métadonnées sont affichées, LE Système DOIT inclure la taille approximative en termes compréhensibles
3. QUAND l'élément fait partie d'un groupe, LE Système DOIT identifier et afficher les éléments similaires
4. QUAND l'élément a des états visuels (hover, focus), LE Système DOIT les détecter et les signaler
5. QUAND le contexte change, LE Système DOIT mettre à jour les métadonnées automatiquement
### Exigence 8: Interface Simplifiée et Intuitive
**User Story:** En tant qu'utilisateur RPA, je veux une interface claire et sans éléments techniques, afin de me concentrer sur la logique métier de mon automatisation.
#### Critères d'Acceptation
1. QUAND le panneau des propriétés s'ouvre, LE Système DOIT afficher uniquement des contrôles visuels et intuitifs
2. QUAND des options techniques sont nécessaires, LE Système DOIT les présenter avec des termes métier compréhensibles
3. QUAND l'utilisateur configure un délai, LE Système DOIT utiliser des curseurs et des unités familières (secondes, millisecondes)
4. QUAND des erreurs surviennent, LE Système DOIT les expliquer en termes visuels avec des suggestions d'action
5. QUAND l'aide est nécessaire, LE Système DOIT fournir des exemples visuels et des captures d'écran
### Exigence 9: Persistance et Récupération Visuelles
**User Story:** En tant qu'utilisateur RPA, je veux que mes sélections visuelles soient sauvegardées et récupérées fidèlement, afin de pouvoir reprendre mon travail sans perte.
#### Critères d'Acceptation
1. QUAND un workflow est sauvegardé, LE Système DOIT stocker les embeddings visuels et les captures d'écran
2. QUAND un workflow est chargé, LE Système DOIT restaurer toutes les captures et métadonnées visuelles
3. QUAND les captures sont restaurées, LE Système DOIT vérifier leur validité actuelle
4. QUAND une capture n'est plus valide, LE Système DOIT proposer une re-sélection guidée
5. QUAND le workflow est exporté, LE Système DOIT inclure toutes les données visuelles nécessaires
### Exigence 10: Performance et Réactivité Visuelles
**User Story:** En tant qu'utilisateur RPA, je veux que la sélection et l'affichage des éléments visuels soient rapides et fluides, afin de maintenir un flux de travail efficace.
#### Critères d'Acceptation
1. QUAND une capture d'écran est prise, LE Système DOIT la traiter et l'afficher en moins de 2 secondes
2. QUAND l'utilisateur survole des éléments en mode sélection, LE Système DOIT réagir en moins de 100ms
3. QUAND une capture est zoomée, LE Système DOIT maintenir 60fps de fluidité
4. QUAND plusieurs captures sont affichées, LE Système DOIT utiliser la mise en cache pour optimiser les performances
5. QUAND le système traite les embeddings, LE Système DOIT le faire en arrière-plan sans bloquer l'interface

View File

@@ -0,0 +1,222 @@
# Plan d'Implémentation: Amélioration des Propriétés RPA 100% Visuel
## Vue d'Ensemble
Ce plan transforme le Visual Workflow Builder pour qu'il soit entièrement basé sur la vision, en supprimant tous les sélecteurs CSS/XPath et en améliorant significativement la visualisation des captures d'écran. L'implémentation se fait de manière incrémentale pour maintenir la fonctionnalité existante pendant la transition.
## Tâches
- [x] 1. Créer les nouveaux composants de gestion visuelle
- Implémenter VisualTargetManager pour la gestion centralisée des cibles visuelles
- Créer VisualEmbeddingManager pour les embeddings et la reconnaissance
- Développer ScreenshotValidationManager pour la validation en temps réel
- _Exigences: 1.2, 1.3, 1.5, 6.1_
- [ ] 1.1 Écrire les tests de propriété pour VisualTargetManager
- **Propriété 2: Sélection Visuelle Pure**
- **Valide: Exigences 1.2, 1.3, 1.5**
- [ ] 1.2 Écrire les tests de propriété pour VisualEmbeddingManager
- **Propriété 7: Génération de Signatures Visuelles Uniques**
- **Valide: Exigences 3.3, 3.4**
- [ ] 2. Refactoriser le VisualPropertiesPanel pour éliminer CSS/XPath
- Supprimer tous les champs de sélecteurs CSS et XPath de l'interface
- Remplacer par des composants de sélection visuelle pure
- Implémenter l'affichage des métadonnées en langage naturel
- _Exigences: 1.1, 1.4, 4.1, 4.2, 4.3, 4.4_
- [ ] 2.1 Écrire les tests de propriété pour l'élimination des sélecteurs techniques
- **Propriété 1: Élimination Complète des Sélecteurs Techniques**
- **Valide: Exigences 1.1, 1.4**
- [ ] 2.2 Écrire les tests de propriété pour les métadonnées en langage naturel
- **Propriété 9: Métadonnées en Langage Naturel**
- **Valide: Exigences 4.1, 4.2, 4.3, 4.4**
- [ ] 3. Améliorer le système de capture et d'affichage d'écran
- Implémenter la capture haute qualité avec contours colorés
- Créer le système de différenciation visuelle pour éléments similaires
- Développer la mise à jour automatique des captures
- _Exigences: 2.1, 2.3, 2.4, 2.5_
- [ ] 3.1 Écrire les tests de propriété pour l'affichage des captures
- **Propriété 3: Affichage de Captures Haute Qualité**
- **Valide: Exigences 2.1, 2.3**
- [ ] 3.2 Écrire les tests de propriété pour la différenciation d'éléments
- **Propriété 4: Différenciation Visuelle des Éléments Similaires**
- **Valide: Exigences 2.4**
- [ ] 3.3 Écrire les tests de propriété pour la mise à jour automatique
- **Propriété 5: Mise à Jour Automatique des Captures**
- **Valide: Exigences 2.5**
- [ ] 4. Créer le nouveau VisualScreenSelector
- Développer l'interface de sélection visuelle interactive
- Implémenter la surbrillance en temps réel au survol
- Créer le système d'extraction de caractéristiques visuelles
- _Exigences: 3.1, 3.2, 3.3, 3.4, 3.5_
- [ ] 4.1 Écrire les tests de propriété pour la surbrillance interactive
- **Propriété 6: Surbrillance Interactive en Mode Sélection**
- **Valide: Exigences 3.2**
- [ ] 4.2 Écrire les tests de propriété pour la réactivité d'affichage
- **Propriété 8: Réactivité de l'Affichage des Captures**
- **Valide: Exigences 3.5**
- [ ] 5. Implémenter l'InteractivePreviewArea
- Créer la zone d'aperçu en plein écran avec zoom
- Développer les contrôles de navigation (zoom, pan)
- Implémenter les contours animés pour éléments cibles
- _Exigences: 2.2, 5.1, 5.2, 5.4, 5.5_
- [ ] 5.1 Écrire les tests de propriété pour le zoom interactif
- **Propriété 11: Fonctionnalité de Zoom Interactif**
- **Valide: Exigences 5.2**
- [ ] 5.2 Écrire les tests de propriété pour les contours animés
- **Propriété 12: Contour Animé pour Éléments Cibles**
- **Valide: Exigences 5.4**
- [ ] 5.3 Écrire les tests de propriété pour la persistance de configuration
- **Propriété 13: Persistance de Configuration lors de la Fermeture d'Aperçu**
- **Valide: Exigences 5.5**
- [ ] 6. Développer le système de validation en temps réel
- Implémenter la validation périodique automatique des éléments
- Créer les indicateurs de statut visuels (vert/orange/rouge)
- Développer le système de récupération intelligente d'éléments
- _Exigences: 6.1, 6.2, 6.3, 6.4, 6.5, 4.5_
- [ ] 6.1 Écrire les tests de propriété pour la validation périodique
- **Propriété 14: Validation Périodique Automatique**
- **Valide: Exigences 6.1, 6.2, 6.3**
- [ ] 6.2 Écrire les tests de propriété pour la récupération d'éléments
- **Propriété 15: Récupération Intelligente d'Éléments**
- **Valide: Exigences 6.4, 6.5**
- [ ] 6.3 Écrire les tests de propriété pour les avertissements de confiance
- **Propriété 10: Avertissements de Confiance Faible**
- **Valide: Exigences 4.5**
- [ ] 7. Checkpoint - Vérifier les fonctionnalités de base
- S'assurer que tous les tests passent, demander à l'utilisateur si des questions se posent.
- [ ] 8. Implémenter la capture du contexte environnant
- Développer ContextualCaptureService pour capturer l'environnement
- Créer l'affichage des métadonnées contextuelles enrichies
- Implémenter la détection d'états visuels (hover, focus)
- _Exigences: 7.1, 7.2, 7.3, 7.4, 7.5_
- [ ] 8.1 Écrire les tests de propriété pour la capture de contexte
- **Propriété 16: Capture du Contexte Environnant**
- **Valide: Exigences 7.1, 7.2, 7.3**
- [ ] 8.2 Écrire les tests de propriété pour la détection d'états visuels
- **Propriété 17: Détection d'États Visuels**
- **Valide: Exigences 7.4**
- [ ] 8.3 Écrire les tests de propriété pour la mise à jour des métadonnées
- **Propriété 18: Mise à Jour Automatique des Métadonnées**
- **Valide: Exigences 7.5**
- [ ] 9. Améliorer l'interface utilisateur pour être entièrement visuelle
- Remplacer tous les contrôles techniques par des interfaces intuitives
- Implémenter les curseurs et unités familières pour les délais
- Créer les messages d'erreur visuels avec suggestions
- Développer l'aide contextuelle avec exemples visuels
- _Exigences: 8.1, 8.2, 8.3, 8.4, 8.5_
- [ ] 9.1 Écrire les tests de propriété pour l'interface entièrement visuelle
- **Propriété 19: Interface Entièrement Visuelle**
- **Valide: Exigences 8.1, 8.2, 8.3**
- [ ] 9.2 Écrire les tests de propriété pour les messages d'erreur visuels
- **Propriété 20: Messages d'Erreur Visuels**
- **Valide: Exigences 8.4**
- [ ] 9.3 Écrire les tests de propriété pour l'aide visuelle
- **Propriété 21: Aide Visuelle Contextuelle**
- **Valide: Exigences 8.5**
- [ ] 10. Implémenter la persistance et récupération visuelles
- Développer la sauvegarde complète des données visuelles
- Créer le système de chargement avec validation post-chargement
- Implémenter l'export/import avec données visuelles
- _Exigences: 9.1, 9.2, 9.3, 9.4, 9.5_
- [ ] 10.1 Écrire les tests de propriété pour la persistance des données visuelles
- **Propriété 22: Persistance Complète des Données Visuelles**
- **Valide: Exigences 9.1, 9.2, 9.5**
- [ ] 10.2 Écrire les tests de propriété pour la validation post-chargement
- **Propriété 23: Validation Post-Chargement**
- **Valide: Exigences 9.3, 9.4**
- [ ] 11. Optimiser les performances du système visuel
- Implémenter le traitement rapide des captures (< 2s)
- Optimiser la réactivité du mode sélection (< 100ms)
- Créer le système de cache pour les captures multiples
- Développer le traitement non-bloquant des embeddings
- _Exigences: 10.1, 10.2, 10.4, 10.5_
- [ ] 11.1 Écrire les tests de propriété pour la performance des captures
- **Propriété 24: Performance de Traitement des Captures**
- **Valide: Exigences 10.1**
- [ ] 11.2 Écrire les tests de propriété pour la réactivité du mode sélection
- **Propriété 25: Réactivité du Mode Sélection**
- **Valide: Exigences 10.2**
- [ ] 11.3 Écrire les tests de propriété pour l'optimisation par cache
- **Propriété 26: Optimisation par Cache des Captures**
- **Valide: Exigences 10.4**
- [ ] 11.4 Écrire les tests de propriété pour le traitement non-bloquant
- **Propriété 27: Traitement Non-Bloquant des Embeddings**
- **Valide: Exigences 10.5**
- [ ] 12. Intégrer avec le système RPA Vision V3 existant
- Connecter VisualTargetManager avec FusionEngine et UIDetector
- Adapter TargetResolver pour utiliser les signatures visuelles
- Mettre à jour ExecutionLoop pour la résolution visuelle pure
- _Exigences: 1.5, 3.3, 6.1_
- [ ] 12.1 Écrire les tests d'intégration pour la résolution visuelle
- Tester l'intégration complète du flux de sélection à l'exécution
- Vérifier la compatibilité avec les workflows existants
- [ ] 13. Migrer les workflows existants
- Créer l'outil de migration des sélecteurs CSS/XPath vers signatures visuelles
- Implémenter la conversion automatique avec validation
- Développer l'interface de migration guidée pour l'utilisateur
- _Exigences: 9.3, 9.4_
- [ ] 13.1 Écrire les tests de propriété pour la migration
- Tester que la migration préserve la fonctionnalité des workflows
- Vérifier la conversion correcte des sélecteurs techniques
- [ ] 14. Tests d'intégration et validation finale
- Exécuter tous les tests de propriétés
- Valider l'interface utilisateur complètement visuelle
- Tester les performances sur des workflows complexes
- Vérifier la compatibilité avec tous les types de nodes
- [ ] 14.1 Écrire les tests end-to-end pour les scénarios utilisateur complets
- Tester le flux complet de création de workflow visuel
- Valider l'expérience utilisateur sans éléments techniques
- [ ] 15. Checkpoint final - S'assurer que tous les tests passent
- S'assurer que tous les tests passent, demander à l'utilisateur si des questions se posent.
## Notes
- Toutes les tâches sont maintenant obligatoires pour une implémentation complète
- Chaque tâche référence des exigences spécifiques pour la traçabilité
- Les checkpoints assurent une validation incrémentale
- Les tests de propriétés valident les propriétés de correction universelles
- Les tests unitaires valident des exemples spécifiques et des cas limites
- L'implémentation maintient la compatibilité avec le système RPA Vision V3 existant