Plan Détaillé: Tools basés sur les APIs

Status : IMPLEMENTEE

Date: 04-02-2026 Complément à: 04-02-2026-21-52-frontend-4-outils-playground.md

1. WebSearchTool (web-search)

Endpoints disponibles (3)

Méthode	Path	Description
GET	/search	Recherche web multi-moteurs
GET	/autocompleter	Suggestions de recherche
GET	/config	Configuration SearXNG

Interface prévue

┌─────────────────────────────────────────────────────────────────┐
│ 🔍 Recherche Web                                                │
├─────────────────────────────────────────────────────────────────┤
│ [_recherche___________________________] [🔍] ← autocomplete     │
│                                                                 │
│ Catégories: ○ Web ○ Images ○ News ○ Vidéos ○ Fichiers         │
│ Moteurs: ☑ Google ☑ Bing ☐ DuckDuckGo ☐ Wikipedia ☐ Brave    │
│ Période: [Tout ▼]  SafeSearch: [Désactivé ▼]  Langue: [FR ▼]  │
├─────────────────────────────────────────────────────────────────┤
│ 📊 127 résultats | Page 1/13          [◀] [1] [2] [3] ... [▶]  │
├─────────────────────────────────────────────────────────────────┤
│ Résultats:                                                      │
│ 📄 Titre du résultat                     [google]              │
│    https://example.com/page                                     │
│    Description du contenu trouvé...                            │
│                                                                 │
│ 🖼️ [thumbnail] Titre image              [bing]    ← si images  │
│    Description...                                               │
├─────────────────────────────────────────────────────────────────┤
│ 💡 Suggestions: [terme1] [terme2] [terme3]                     │
└─────────────────────────────────────────────────────────────────┘

Fonctionnalités

[x] Input recherche avec autocomplete (GET /autocompleter)
[x] Sélection catégories (general, images, news, videos, files, science)
[x] Sélection moteurs (google, bing, duckduckgo, wikipedia, brave)
[x] Filtres: période (day/week/month/year), safesearch (0/1/2), langue
[x] Pagination (pageno)
[x] Affichage résultats (titre, url, snippet, engine badge)
[x] Mode images avec thumbnails
[x] Suggestions de recherche

2. ScrapperTool (scraper)

Endpoints disponibles (40+)

Capture (5) | Méthode | Path | Description | |---------|------|-------------| | POST | /api/capture/screenshot | Screenshot page | | POST | /api/capture/zone | Capture zone spécifique | | POST | /api/capture/pdf | Export PDF | | POST | /api/capture/html | Export HTML/DOM | | POST | /api/capture/region | Capture région nommée |

Browse Actions (10) | Méthode | Path | Description | |---------|------|-------------| | POST | /api/browse/navigate | Naviguer vers URL | | POST | /api/browse/click | Cliquer élément/coords | | POST | /api/browse/type | Taper texte | | POST | /api/browse/scroll | Scroller | | POST | /api/browse/wait | Attendre condition | | POST | /api/browse/extract | Extraire données | | GET | /api/browse/info | Info page courante | | POST | /api/browse/back | Retour | | POST | /api/browse/forward | Avancer | | POST | /api/browse/refresh | Rafraîchir |

Regions (5) | Méthode | Path | Description | |---------|------|-------------| | GET | /api/regions | Liste régions | | POST | /api/regions/define | Définir région | | DELETE | /api/regions/:service/:name | Supprimer région | | POST | /api/regions/diff | Comparer baseline | | POST | /api/regions/wait-change | Attendre changement |

AI (5) | Méthode | Path | Description | |---------|------|-------------| | POST | /api/ai/detect | YOLO detection | | POST | /api/ai/ocr | OCR extraction | | POST | /api/ai/find-element | Trouver élément intelligent | | POST | /api/ai/analyze | Analyser page (vision) | | GET | /api/ai/status | Status AI orchestrator |

CAPTCHA (7) | Méthode | Path | Description | |---------|------|-------------| | POST | /api/captcha-assist/detect | Détecter CAPTCHA | | POST | /api/captcha-assist/start | Démarrer session | | POST | /api/captcha-assist/:id/click | Click zone | | POST | /api/captcha-assist/:id/drag | Drag zone | | GET | /api/captcha-assist/:id/refresh | Rafraîchir | | GET | /api/captcha-assist/:id/check | Vérifier résolu | | POST | /api/captcha-assist/:id/end | Terminer |

Templates & Execute (8) | Méthode | Path | Description | |---------|------|-------------| | GET | /api/site-templates | Liste templates | | POST | /api/browser/execute | Exécuter action template | | POST | /api/browser/login | Login avec template | | POST | /api/browser/reset | Reset session |

Interface prévue

┌─────────────────────────────────────────────────────────────────┐
│ 🌐 Browser Connector                                            │
├─────────────────────────────────────────────────────────────────┤
│ Mode: ○ Navigate ○ Templates ○ CAPTCHA Assist                  │
├─────────────────────────────────────────────────────────────────┤
│ [◀][▶][⟳] [https://example.com_______________] [Go] [📷][PDF]  │
├─────────────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │                                                             │ │
│ │              [SCREENSHOT / LIVE VIEW]                       │ │
│ │              (cliquable pour actions)                       │ │
│ │                                                             │ │
│ └─────────────────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────────────────┤
│ Actions: [Click] [Type...] [Scroll] [Extract] [Wait] [AI...]   │
├─────────────────────────────────────────────────────────────────┤
│ Console:                                  [Regions ▼] [Clear]  │
│ > 12:34 Navigate https://example.com ✓ 1.2s                    │
│ > 12:35 Click (150, 230) ✓                                     │
│ > 12:36 Extract ".title" → "Page Title"                        │
│ > 12:36 ⚠️ CAPTCHA détecté! [Ouvrir assistant]                 │
└─────────────────────────────────────────────────────────────────┘

Fonctionnalités

[x] Barre URL avec navigation (navigate, back, forward, refresh)
[x] Screenshot viewer (canvas interactif)
[x] Actions cliquables sur screenshot
[x] Panel actions: click, type, scroll, extract, wait
[x] Export: screenshot, PDF, HTML
[x] Gestion régions (définir, capturer, diff)
[x] AI: détection YOLO, OCR, find-element, analyze
[x] CAPTCHA Assist intégré (composant existant)
[x] Templates: liste, exécuter, login
[x] Console avec historique actions
[ ] Streaming V2 (WebSocket) - optionnel

3. AiOrchestratorTool (ai-orchestrator)

Endpoints disponibles (17)

Tools (5) | Méthode | Path | Description | |---------|------|-------------| | GET | /api/tools | Liste outils | | GET | /api/tools/refresh | Rafraîchir détection | | GET | /api/tools/{id} | Status outil | | POST | /api/tools/{id}/start | Démarrer outil | | POST | /api/tools/{id}/stop | Arrêter outil |

GPU (1) | Méthode | Path | Description | |---------|------|-------------| | GET | /api/gpu | Status GPU (VRAM, temp, usage) |

Jobs (4) | Méthode | Path | Description | |---------|------|-------------| | POST | /api/jobs | Créer job | | GET | /api/jobs | Liste jobs | | GET | /api/jobs/{id} | Status job | | GET | /api/jobs/stats | Statistiques |

Queue & Worker (4) | Méthode | Path | Description | |---------|------|-------------| | GET | /api/queue | Status queue | | GET | /api/worker/status | Status worker | | POST | /api/worker/pause | Pause (+ stop_tools) | | POST | /api/worker/resume | Reprendre |

Inputs (3) | Méthode | Path | Description | |---------|------|-------------| | GET | /api/inputs | Liste fichiers | | POST | /api/inputs | Upload fichier | | DELETE | /api/inputs/{filename} | Supprimer |

Interface prévue

┌─────────────────────────────────────────────────────────────────┐
│ 🤖 AI Orchestrator                        [⟳ Refresh] [⏸ Pause]│
├─────────────────────────────────────────────────────────────────┤
│ GPU: 🟢 RTX 4070  │ VRAM: [████████░░] 8.2/12 GB │ 🌡️ 65°C    │
│ Worker: 🟢 Running │ Queue: 3 pending │ Current: job_abc123    │
├─────────────────────────────────────────────────────────────────┤
│ Outils:                                                         │
│ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐        │
│ │ Ollama │ │ComfyUI │ │Fooocus │ │ Wan2.1 │ │Applio  │        │
│ │   🟢   │ │   ⚫   │ │   ⚫   │ │   ⚫   │ │   ⚫   │        │
│ │ [Stop] │ │[Start] │ │[Start] │ │[Start] │ │[Start] │        │
│ └────────┘ └────────┘ └────────┘ └────────┘ └────────┘        │
├─────────────────────────────────────────────────────────────────┤
│ Créer un job:                                                   │
│ Outil: [Ollama ▼]  Type: [chat ▼]  Priorité: [Normal ▼]        │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ Prompt / Configuration...                                   │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ [📎 Fichier input]                              [Créer le job]  │
├─────────────────────────────────────────────────────────────────┤
│ Jobs récents:                               [Tous ▼] [Stats 📊]│
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ #abc123 │ ollama │ ✓ completed │ 2.3s │ "Résumé..."        │ │
│ │ #def456 │ comfyui│ ⏳ running  │ 45s  │ [████░░░░] 60%     │ │
│ │ #ghi789 │ fooocus│ ✓ completed │ 32s  │ [🖼️ Voir image]    │ │
│ │ #jkl012 │ whisper│ ❌ failed   │ 5s   │ "Error: OOM"       │ │
│ └─────────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘

Fonctionnalités

[x] GPU Monitor: VRAM gauge, température, utilisation (auto-refresh 5s)
[x] Worker status: running/paused, boutons pause/resume
[x] Queue status: pending count, current job
[x] Grille outils: status (running/stopped), boutons start/stop
[x] Formulaire création job: outil, type, priorité, params, input file
[x] Liste jobs: filtres (all/pending/running/completed/failed)
[x] Job detail: progress, logs, résultat (texte/image/audio)
[x] Stats: graphique jobs par outil/status
[x] Upload fichiers input

4. YoloTool (yolo)

Endpoints disponibles (4)

Méthode	Path	Description
GET	/health	Status service
GET	/classes	Liste 80 classes COCO
POST	/detect	Détection → JSON
POST	/detect/image	Détection → Image annotée

Interface prévue

┌─────────────────────────────────────────────────────────────────┐
│ 👁️ YOLO Object Detection                           [⟳ Status]  │
├─────────────────────────────────────────────────────────────────┤
│ 📤 Glissez une image ici ou [Parcourir]                        │
│    ou URL: [https://...______________________] [Charger]        │
├─────────────────────────────────────────────────────────────────┤
│ Modèle: [yolov8n (rapide) ▼]   Confiance: 50% [────●────]      │
│ Classes: [Toutes ▼] ou [person] [car] [dog] [+]                │
│ [Détecter objets]        [Détecter + Annoter image]            │
├─────────────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │                                                             │ │
│ │         [Image originale ou annotée avec bbox]             │ │
│ │                                                             │ │
│ └─────────────────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────────────────┤
│ Résultats (5 objets détectés en 45ms):                         │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ 🟢 person    │ 94% │ [100, 50, 300, 400]    │ [Zoom]       │ │
│ │ 🔵 car       │ 87% │ [450, 200, 650, 380]   │ [Zoom]       │ │
│ │ 🟡 dog       │ 82% │ [350, 300, 480, 450]   │ [Zoom]       │ │
│ │ 🟣 bicycle   │ 76% │ [50, 250, 150, 400]    │ [Zoom]       │ │
│ │ 🟠 backpack  │ 65% │ [280, 80, 320, 150]    │ [Zoom]       │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ [📥 Télécharger JSON] [📥 Télécharger image annotée]           │
└─────────────────────────────────────────────────────────────────┘

Fonctionnalités

[x] Upload image: drag&drop, file picker, paste
[x] Charger depuis URL
[x] Sélection modèle (yolov8n/s/m)
[x] Slider confiance (0.1-0.9)
[x] Filtre classes (afficher liste des 80 classes COCO)
[x] Détection → JSON (POST /detect)
[x] Détection → Image annotée (POST /detect/image)
[x] Canvas avec bounding boxes overlay
[x] Liste détections triées par confiance
[x] Zoom sur détection (highlight bbox)
[x] Download JSON résultats
[x] Download image annotée

Estimation mise à jour

Tool	Endpoints	Complexité	Durée
WebSearchTool	3	Simple	0.5j
YoloTool	4	Simple	0.5j
AiOrchestratorTool	17	Moyenne	1.5j
ScrapperTool	40+	Haute	2j
Total			4.5j

Ordre d'implémentation suggéré

Structure (0.5j): Route, registry, BaseTool, DefaultTool, layout
YoloTool (0.5j): Simple, valide le pattern
WebSearchTool (0.5j): Simple aussi
AiOrchestratorTool (1.5j): Utile au quotidien
ScrapperTool V1 (1.5j): Screenshots refresh
ScrapperTool V2 (0.5j): Streaming WebSocket (optionnel)

Total: 5 jours