Komponenten

Detaillierte Komponentendokumentation für Duckling.

Frontend-Architektur

Technologie-Stack

• React 18 - UI-Framework mit funktionalen Komponenten und Hooks
• TypeScript - Typsicheres JavaScript
• Tailwind CSS - Utility-First CSS-Framework
• Framer Motion - Animationsbibliothek
• React Query - Server-State-Management
• Axios - HTTP-Client
• Vite - Build-Tool und Dev-Server

Komponentenstruktur

graph TD
    App[App.tsx]

    App --> Header
    App --> Main
    App --> Panels

    Main --> DropZone
    Main --> Progress
    Main --> Export

    Panels --> Settings
    Panels --> History
    Panels --> Docs

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

Komponentendateien

State-Management

Die Anwendung verwendet eine Kombination aus:

1. Lokaler State - Komponentenebener State mit useState
2. React Query - Server-State-Caching und Synchronisation
3. Benutzerdefinierte Hooks - Eingekapselte Geschäftslogik

Wichtige Hooks

useConversion

Verwaltet den Dokumentkonvertierungs-Workflow:

• Datei-Upload (einzeln und stapelweise)
• Status-Abfrage
• Ergebnisabruf
• Download-Handling

useSettings

Verwaltet Anwendungseinstellungen:

• OCR-, Tabellen-, Bild-, Leistungs- und Chunking-Einstellungen
• Einstellungspersistenz über API
• Einstellungsvalidierung

Backend-Architektur

Technologie-Stack

• Flask - Web-Framework
• SQLAlchemy - ORM für Datenbankoperationen
• SQLite - Eingebettete Datenbank für Verlauf
• Docling - Dokumentkonvertierungs-Engine
• Threading - Asynchrone Job-Verarbeitung

Modulstruktur

Services

ConverterService

Behandelt Dokumentkonvertierung mit Docling:

class ConverterService:
    def convert(self, file_path: str, settings: dict) -> ConversionResult:
        """Dokument mit den angegebenen Einstellungen konvertieren."""
        pass

    def get_status(self, job_id: str) -> JobStatus:
        """Status eines Konvertierungsjobs abrufen."""
        pass

FileManager

Verwaltet Datei-Uploads und -Ausgaben:

class FileManager:
    def save_upload(self, file) -> str:
        """Hochgeladene Datei speichern und Pfad zurückgeben."""
        pass

    def get_output_path(self, job_id: str) -> str:
        """Ausgabeverzeichnis für einen Job abrufen."""
        pass

HistoryService

CRUD-Operationen für Konvertierungsverlauf:

class HistoryService:
    def create(self, job_id: str, filename: str) -> Conversion:
        """Neuen Verlaufseintrag erstellen."""
        pass

    def update(self, job_id: str, **kwargs) -> Conversion:
        """Bestehenden Eintrag aktualisieren."""
        pass

    def get_stats(self) -> dict:
        """Konvertierungsstatistiken abrufen."""
        pass

OCR-Integration

Docling unterstützt mehrere OCR-Backends:

graph LR
    Input[Document] --> OCR{OCR Backend}

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

    Easy --> Out[Text Output]
    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

Das Backend fällt automatisch auf Nicht-OCR-Verarbeitung zurück, wenn die OCR-Initialisierung fehlschlägt.

Stapelverarbeitung

sequenceDiagram
    participant U as User
    participant F as Frontend
    participant Q as Queue
    participant W as Workers

    U->>F: Upload 5 Files
    F->>Q: Queue 5 Jobs

    par Process 2 at a time
        Q->>W: Job 1
        Q->>W: Job 2
    end

    W-->>Q: Job 1 Done
    Q->>W: Job 3
    W-->>Q: Job 2 Done
    Q->>W: Job 4

    Note over Q,W: Max 2 concurrent

    F->>F: Show progress per file