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
291
visual_workflow_builder/PROBLEMES_ACTUELS.md
Normal file
291
visual_workflow_builder/PROBLEMES_ACTUELS.md
Normal file
@@ -0,0 +1,291 @@
|
||||
# 🔍 Problèmes Actuels et Solutions
|
||||
|
||||
## État de l'Application
|
||||
|
||||
✅ **Ce qui fonctionne** :
|
||||
- Interface visuelle
|
||||
- Drag & drop d'étapes
|
||||
- Connexions entre étapes
|
||||
- Suppression d'étapes (Delete/Backspace)
|
||||
- Backend API opérationnel
|
||||
|
||||
❌ **Ce qui ne fonctionne pas** :
|
||||
1. Sélection visuelle d'éléments (XPath/CSS requis)
|
||||
2. Exécution de workflows
|
||||
3. Sauvegarde de workflows
|
||||
|
||||
---
|
||||
|
||||
## Problème 1 : Sélecteur Visuel Manquant
|
||||
|
||||
### 🎯 Symptôme
|
||||
Pour l'étape "Extract", il faut saisir manuellement un sélecteur CSS ou XPath, ce qui n'est **pas du tout pratique ni visuel**.
|
||||
|
||||
### 📋 Cause
|
||||
La **Tâche 10** (Sélecteur de cible interactif) n'est pas encore implémentée.
|
||||
|
||||
### 🔧 Solution Prévue
|
||||
Le composant `TargetSelector` existe mais n'est pas intégré au `PropertiesPanel`. Il devrait permettre de :
|
||||
|
||||
1. **Cliquer sur un bouton "Sélectionner un élément"**
|
||||
2. **Capturer l'écran** via l'API existante
|
||||
3. **Cliquer visuellement** sur l'élément désiré
|
||||
4. **Extraire automatiquement** :
|
||||
- Le texte de l'élément
|
||||
- Sa position
|
||||
- Son embedding visuel
|
||||
- Un sélecteur CSS/XPath généré
|
||||
|
||||
### 📝 Implémentation Requise
|
||||
|
||||
#### Étape 1 : Intégrer TargetSelector dans PropertiesPanel
|
||||
|
||||
```typescript
|
||||
// Dans PropertiesPanel/index.tsx
|
||||
import TargetSelector from '../TargetSelector';
|
||||
|
||||
// Pour les paramètres de type "target"
|
||||
{param.type === 'target' && (
|
||||
<TargetSelector
|
||||
onTargetSelected={(target) => {
|
||||
handleParameterChange(param.name, target);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
```
|
||||
|
||||
#### Étape 2 : Adapter le format de données
|
||||
|
||||
Le `TargetSelector` doit retourner un objet compatible avec le système RPA Vision :
|
||||
|
||||
```typescript
|
||||
interface Target {
|
||||
text?: string;
|
||||
position?: { x: number; y: number };
|
||||
size?: { width: number; height: number };
|
||||
embedding?: number[];
|
||||
selector?: string; // CSS ou XPath généré
|
||||
}
|
||||
```
|
||||
|
||||
### ⏱️ Temps Estimé
|
||||
- Intégration : 30 minutes
|
||||
- Tests : 15 minutes
|
||||
- **Total : 45 minutes**
|
||||
|
||||
---
|
||||
|
||||
## Problème 2 : Exécution Ne Fonctionne Pas
|
||||
|
||||
### 🎯 Symptôme
|
||||
Cliquer sur "Exécuter" ne fait rien ou génère une erreur.
|
||||
|
||||
### 📋 Causes Possibles
|
||||
|
||||
#### A. Workflow Non Sauvegardé
|
||||
Le workflow doit être **sauvegardé** avant d'être exécuté, mais il n'y a **pas de bouton "Sauvegarder"** visible.
|
||||
|
||||
#### B. Bouton "Exécuter" Manquant
|
||||
L'interface actuelle n'a peut-être pas de bouton "Exécuter" clairement visible.
|
||||
|
||||
### 🔧 Solutions
|
||||
|
||||
#### Solution A : Ajouter un Bouton "Sauvegarder"
|
||||
|
||||
```typescript
|
||||
// Dans App.tsx
|
||||
const handleSaveWorkflow = async () => {
|
||||
const workflow = {
|
||||
name: workflowName || 'Mon Workflow',
|
||||
description: 'Workflow créé visuellement',
|
||||
nodes,
|
||||
edges,
|
||||
variables
|
||||
};
|
||||
|
||||
const response = await fetch('/api/workflows/', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(workflow)
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
setCurrentWorkflowId(data.id);
|
||||
alert(`Workflow sauvegardé : ${data.id}`);
|
||||
};
|
||||
|
||||
// Dans le JSX
|
||||
<Button onClick={handleSaveWorkflow}>
|
||||
💾 Sauvegarder
|
||||
</Button>
|
||||
```
|
||||
|
||||
#### Solution B : Ajouter un Bouton "Exécuter"
|
||||
|
||||
```typescript
|
||||
// Dans App.tsx
|
||||
const handleExecuteWorkflow = async () => {
|
||||
if (!currentWorkflowId) {
|
||||
alert('Veuillez d\'abord sauvegarder le workflow');
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await fetch(`/api/workflows/${currentWorkflowId}/execute`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ variables: {} })
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
console.log('Exécution démarrée:', data);
|
||||
};
|
||||
|
||||
// Dans le JSX
|
||||
<Button onClick={handleExecuteWorkflow} disabled={!currentWorkflowId}>
|
||||
▶️ Exécuter
|
||||
</Button>
|
||||
```
|
||||
|
||||
#### Solution C : Barre d'Outils Complète
|
||||
|
||||
Créer une `Toolbar` avec tous les boutons nécessaires :
|
||||
|
||||
```typescript
|
||||
<Toolbar>
|
||||
<Button onClick={handleNewWorkflow}>🆕 Nouveau</Button>
|
||||
<Button onClick={handleSaveWorkflow}>💾 Sauvegarder</Button>
|
||||
<Button onClick={handleLoadWorkflow}>📂 Charger</Button>
|
||||
<Button onClick={handleExecuteWorkflow}>▶️ Exécuter</Button>
|
||||
<Button onClick={handleValidateWorkflow}>✓ Valider</Button>
|
||||
</Toolbar>
|
||||
```
|
||||
|
||||
### ⏱️ Temps Estimé
|
||||
- Boutons Sauvegarder/Exécuter : 20 minutes
|
||||
- Barre d'outils complète : 45 minutes
|
||||
- Tests : 15 minutes
|
||||
- **Total : 1 heure**
|
||||
|
||||
---
|
||||
|
||||
## Problème 3 : Workflow Non Persistant
|
||||
|
||||
### 🎯 Symptôme
|
||||
Les workflows créés ne sont pas sauvegardés et disparaissent au rechargement.
|
||||
|
||||
### 📋 Cause
|
||||
Pas d'intégration avec l'API de sauvegarde.
|
||||
|
||||
### 🔧 Solution
|
||||
Implémenter la sauvegarde automatique ou manuelle (voir Solution A ci-dessus).
|
||||
|
||||
---
|
||||
|
||||
## Plan d'Action Recommandé
|
||||
|
||||
### 🚀 Phase 1 : Fonctionnalités Essentielles (1-2h)
|
||||
|
||||
1. **Ajouter la barre d'outils** (30 min)
|
||||
- Bouton Sauvegarder
|
||||
- Bouton Exécuter
|
||||
- Indicateur de statut
|
||||
|
||||
2. **Intégrer le TargetSelector** (45 min)
|
||||
- Dans PropertiesPanel
|
||||
- Pour les paramètres "target"
|
||||
- Avec capture d'écran
|
||||
|
||||
3. **Tests de bout en bout** (30 min)
|
||||
- Créer un workflow
|
||||
- Sauvegarder
|
||||
- Exécuter
|
||||
- Vérifier les résultats
|
||||
|
||||
### 🎨 Phase 2 : Améliorations UX (2-3h)
|
||||
|
||||
4. **Validation visuelle** (30 min)
|
||||
- Indicateurs d'erreur sur les nodes
|
||||
- Messages d'avertissement
|
||||
- Validation avant exécution
|
||||
|
||||
5. **Feedback d'exécution** (1h)
|
||||
- Panneau de logs
|
||||
- Progression en temps réel
|
||||
- Résultats d'exécution
|
||||
|
||||
6. **Sauvegarde automatique** (30 min)
|
||||
- Auto-save toutes les 30s
|
||||
- Indicateur "Non sauvegardé"
|
||||
- Récupération après crash
|
||||
|
||||
---
|
||||
|
||||
## Workaround Temporaire
|
||||
|
||||
En attendant l'implémentation complète, voici comment tester l'exécution :
|
||||
|
||||
### 1. Créer un Workflow via l'API
|
||||
|
||||
```bash
|
||||
curl -X POST http://localhost:5001/api/workflows/ \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"name": "Test Workflow",
|
||||
"description": "Workflow de test",
|
||||
"nodes": [
|
||||
{
|
||||
"id": "node-1",
|
||||
"type": "click",
|
||||
"position": {"x": 100, "y": 100},
|
||||
"parameters": {
|
||||
"target": {"text": "Bouton Test"}
|
||||
}
|
||||
}
|
||||
],
|
||||
"edges": [],
|
||||
"variables": {}
|
||||
}'
|
||||
```
|
||||
|
||||
### 2. Noter l'ID Retourné
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "workflow-abc123",
|
||||
"name": "Test Workflow",
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Exécuter via l'API
|
||||
|
||||
```bash
|
||||
curl -X POST http://localhost:5001/api/workflows/workflow-abc123/execute \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"variables": {}}'
|
||||
```
|
||||
|
||||
### 4. Vérifier les Logs
|
||||
|
||||
```bash
|
||||
tail -f visual_workflow_builder/backend/logs/app.log
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Conclusion
|
||||
|
||||
L'application est **fonctionnelle au niveau de l'interface**, mais il manque :
|
||||
|
||||
1. ✅ **Sélecteur visuel** (composant existe, juste à intégrer)
|
||||
2. ✅ **Boutons Sauvegarder/Exécuter** (code simple à ajouter)
|
||||
3. ✅ **Feedback d'exécution** (WebSocket déjà implémenté)
|
||||
|
||||
**Temps total estimé pour rendre l'app complètement utilisable : 2-3 heures**
|
||||
|
||||
Ces fonctionnalités sont toutes prévues dans le plan d'implémentation, elles n'ont juste pas encore été développées car on a priorisé la base (Canvas, Palette, Propriétés, Backend API).
|
||||
|
||||
---
|
||||
|
||||
*Document créé le : 3 décembre 2024*
|
||||
*Statut : En attente d'implémentation*
|
||||
Reference in New Issue
Block a user