rpa_vision_v3/visual_workflow_builder/PROBLEMES_ACTUELS.md

🔍 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

// 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 :

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"

// 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"

// 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 :

<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

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é

{
  "id": "workflow-abc123",
  "name": "Test Workflow",
  ...
}

3. Exécuter via l'API

curl -X POST http://localhost:5001/api/workflows/workflow-abc123/execute \
  -H "Content-Type: application/json" \
  -d '{"variables": {}}'

4. Vérifier les Logs

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