Composants

Documentation détaillée des composants de Duckling.

Architecture frontend

Pile technologique

• React 18 – Framework UI avec composants fonctionnels et hooks
• TypeScript – JavaScript typé
• Tailwind CSS – Framework CSS utilitaire
• Framer Motion – Bibliothèque d’animations
• React Query – Gestion de l’état serveur
• Axios – Client HTTP
• Vite – Outil de build et serveur de développement

Structure des composants

graph TD
    App[App.tsx]

    App --> Header[En-tête]
    App --> Main[Zone principale]
    App --> Panels[Panneaux]

    Main --> DropZone[Zone de dépôt]
    Main --> Progress[Progression]
    Main --> Export[Export]

    Panels --> Settings[Paramètres]
    Panels --> History[Historique]
    Panels --> Docs[Documentation]

    style App fill:#3b82f6,color:#fff
    style Main fill:#14b8a6,color:#fff
    style Panels fill:#8b5cf6,color:#fff

Fichiers de composants

Gestion de l’état

L’application combine :

1. État local – État au niveau du composant avec useState
2. React Query – Mise en cache et synchronisation de l’état serveur
3. Hooks personnalisés – Logique métier encapsulée

Hooks principaux

useConversion

Gère le flux de conversion de documents :

• Téléversement de fichiers (unitaire et par lots)
• Interrogation du statut
• Récupération des résultats
• Gestion des téléchargements

useSettings

Gère les paramètres de l’application :

• Paramètres OCR, tableaux, images, performances et découpage
• Persistance des paramètres via l’API
• Validation des paramètres

Architecture backend

Pile technologique

• Flask – Framework web
• SQLAlchemy – ORM pour les opérations base de données
• SQLite – Base embarquée pour l’historique
• Docling – Moteur de conversion de documents
• Threading – Traitement asynchrone des tâches

Structure des modules

Services

ConverterService

Gère la conversion de documents avec Docling :

class ConverterService:
    def convert(self, file_path: str, settings: dict) -> ConversionResult:
        """Convertir un document avec les paramètres donnés."""
        pass

    def get_status(self, job_id: str) -> JobStatus:
        """Obtenir le statut d’une tâche de conversion."""
        pass

FileManager

Gère les téléversements et les sorties :

class FileManager:
    def save_upload(self, file) -> str:
        """Enregistrer le fichier téléversé et renvoyer le chemin."""
        pass

    def get_output_path(self, job_id: str) -> str:
        """Obtenir le répertoire de sortie pour une tâche."""
        pass

HistoryService

Opérations CRUD sur l’historique des conversions :

class HistoryService:
    def create(self, job_id: str, filename: str) -> Conversion:
        """Créer une nouvelle entrée d’historique."""
        pass

    def update(self, job_id: str, **kwargs) -> Conversion:
        """Mettre à jour une entrée existante."""
        pass

    def get_stats(self) -> dict:
        """Obtenir les statistiques de conversion."""
        pass

Intégration OCR

Docling prend en charge plusieurs moteurs OCR :

graph LR
    Input[Document] --> OCR{Back-end OCR}

    OCR --> Easy[EasyOCR]
    OCR --> Tess[Tesseract]
    OCR --> Mac[OcrMac]
    OCR --> Rapid[RapidOCR]

    Easy --> Out[Sortie texte]
    Tess --> Out
    Mac --> Out
    Rapid --> Out

    style Easy fill:#22c55e,color:#fff
    style Tess fill:#3b82f6,color:#fff
    style Mac fill:#8b5cf6,color:#fff
    style Rapid fill:#f59e0b,color:#fff

Le backend bascule automatiquement vers un traitement sans OCR si l’initialisation OCR échoue.

Traitement par lots

sequenceDiagram
    participant U as Utilisateur
    participant F as Frontend
    participant Q as File d’attente
    participant W as Workers

    U->>F: Téléverser 5 fichiers
    F->>Q: Mettre 5 tâches en file

    par Traiter 2 en parallèle
        Q->>W: Job 1
        Q->>W: Job 2
    end

    W-->>Q: Job 1 terminé
    Q->>W: Job 3
    W-->>Q: Job 2 terminé
    Q->>W: Job 4

    Note over Q,W: Max 2 simultanés

    F->>F: Afficher la progression par fichier