Spaces:

DaniGoua
/

pdf6

Running

File size: 49,784 Bytes

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UMR - Contrôle Qualité PDF</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.12.313/pdf.min.js"></script>
    <style>
        .pdf-container {
            height: 500px;
            overflow-y: auto;
            border: 1px solid #e5e7eb;
            position: relative;
        }
        .chat-container {
            height: 400px;
            overflow-y: auto;
        }
        .highlight {
            background-color: rgba(255, 255, 0, 0.3);
        }
        .page-selector {
            position: absolute;
            bottom: 10px;
            left: 10px;
            z-index: 100;
            background: white;
            padding: 5px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        .control-zone {
            position: absolute;
            border: 2px dashed rgba(59, 130, 246, 0.5);
            background-color: rgba(59, 130, 246, 0.2);
            z-index: 10;
            cursor: move;
        }
        #zoneCreator {
            position: relative;
        }
        .zone-tooltip {
            position: absolute;
            background: white;
            padding: 5px;
            border-radius: 4px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            z-index: 20;
            font-size: 12px;
            pointer-events: none;
        }
        .zone-actions {
            position: absolute;
            top: -25px;
            right: 0;
            display: flex;
            gap: 5px;
        }
        .zone-action-btn {
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 12px;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div class="container mx-auto px-4 py-8">
        <header class="mb-8">
            <h1 class="text-3xl font-bold text-blue-800">UMR - Contrôle Qualité des Courriers PDF</h1>
            <p class="text-gray-600 mt-2">Comparez vos documents PDF avec les modèles de référence</p>
        </header>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
            <!-- Document de Référence -->
            <div class="bg-white rounded-lg shadow p-4">
                <h2 class="text-xl font-semibold mb-4 text-blue-700">Document de Référence</h2>
                <div class="mb-4">
                    <input type="file" id="referenceFile" accept=".pdf" class="block w-full text-sm text-gray-500
                        file:mr-4 file:py-2 file:px-4
                        file:rounded-md file:border-0
                        file:text-sm file:font-semibold
                        file:bg-blue-50 file:text-blue-700
                        hover:file:bg-blue-100">
                </div>
                <div class="relative pdf-container" id="referenceViewer">
                    <canvas id="referenceCanvas"></canvas>
                    <div class="page-selector hidden" id="refPageSelector">
                        Page <span id="refCurrentPage">1</span> sur <span id="refTotalPages">0</span>
                        <button class="ml-2 px-2 py-1 bg-blue-100 rounded" id="refPrevPage">←</button>
                        <button class="ml-1 px-2 py-1 bg-blue-100 rounded" id="refNextPage">→</button>
                    </div>
                </div>
                <button id="defineZonesBtn" class="mt-4 hidden bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded">
                    Définir les zones de contrôle
                </button>
            </div>

            <!-- Document à Contrôler -->
            <div class="bg-white rounded-lg shadow p-4">
                <h2 class="text-xl font-semibold mb-4 text-blue-700">Document à Contrôler</h2>
                <div class="mb-4">
                    <input type="file" id="controlFile" accept=".pdf" class="block w-full text-sm text-gray-500
                        file:mr-4 file:py-2 file:px-4
                        file:rounded-md file:border-0
                        file:text-sm file:font-semibold
                        file:bg-blue-50 file:text-blue-700
                        hover:file:bg-blue-100">
                </div>
                <div class="relative pdf-container" id="controlViewer">
                    <canvas id="controlCanvas"></canvas>
                    <div class="page-selector hidden" id="ctrlPageSelector">
                        Page <span id="ctrlCurrentPage">1</span> sur <span id="ctrlTotalPages">0</span>
                        <button class="ml-2 px-2 py-1 bg-blue-100 rounded" id="ctrlPrevPage">←</button>
                        <button class="ml-1 px-2 py-1 bg-blue-100 rounded" id="ctrlNextPage">→</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Zone Creator (hidden by default) -->
        <div id="zoneCreator" class="hidden bg-white rounded-lg shadow p-4 mb-6">
            <h2 class="text-xl font-semibold mb-4 text-blue-700">Définition des Zones de Contrôle</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Type de document</label>
                        <select id="docType" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
                            <option value="lettre">Lettre du Président</option>
                            <option value="lexique">Lexique</option>
                            <option value="attestation_alloc">Attestation Fiscale Allocataire</option>
                            <option value="attestation_cotis">Attestation Fiscale Cotisant</option>
                            <option value="releve">Relevé de Situation</option>
                            <option value="contact">Page de Contact</option>
                        </select>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Nom de la zone</label>
                        <input type="text" id="zoneName" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Ex: En-tête, Logo, Adresse...">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Page</label>
                        <input type="number" id="zonePage" min="1" value="1" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                    </div>
                    <div class="flex space-x-4">
                        <button id="saveZoneBtn" class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded">
                            Enregistrer la zone
                        </button>
                        <button id="cancelZoneBtn" class="bg-gray-600 hover:bg-gray-700 text-white font-medium py-2 px-4 rounded">
                            Annuler
                        </button>
                    </div>
                </div>
                <div class="bg-gray-50 p-4 rounded-lg">
                    <h3 class="font-medium text-gray-800 mb-3">Instructions</h3>
                    <ol class="list-decimal list-inside text-sm text-gray-700 space-y-2">
                        <li>Cliquez et glissez pour dessiner une zone sur le document de référence</li>
                        <li>Ajustez la taille et la position si nécessaire</li>
                        <li>Remplissez les informations sur la zone (type, nom, page)</li>
                        <li>Cliquez sur "Enregistrer la zone" pour la sauvegarder</li>
                        <li>Répétez pour toutes les zones à contrôler</li>
                    </ol>
                    <div class="mt-4 p-3 bg-blue-50 rounded-lg">
                        <h4 class="font-medium text-blue-800 mb-2">Conseils :</h4>
                        <ul class="list-disc list-inside text-sm text-blue-700 space-y-1">
                            <li>Nommez clairement vos zones pour les retrouver facilement</li>
                            <li>Créez des zones suffisamment larges pour couvrir le texte</li>
                            <li>Vérifiez que la page indiquée correspond bien à la zone</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- Control Interface -->
        <div class="bg-white rounded-lg shadow p-4 mb-6">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-semibold text-blue-700">Interface de Contrôle</h2>
                <button id="startControlBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded">
                    Lancer le contrôle
                </button>
            </div>
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- Document Types -->
                <div class="bg-gray-50 p-4 rounded-lg">
                    <h3 class="font-medium text-gray-800 mb-3">Types de documents détectés</h3>
                    <ul id="docTypesList" class="space-y-2">
                        <li class="text-sm text-gray-500 italic">Aucun document chargé</li>
                    </ul>
                </div>
                
                <!-- Anomalies -->
                <div class="bg-gray-50 p-4 rounded-lg">
                    <h3 class="font-medium text-gray-800 mb-3">Anomalies détectées</h3>
                    <ul id="anomaliesList" class="space-y-2">
                        <li class="text-sm text-gray-500 italic">Aucune anomalie détectée</li>
                    </ul>
                </div>
                
                <!-- Actions -->
                <div class="bg-gray-50 p-4 rounded-lg">
                    <h3 class="font-medium text-gray-800 mb-3">Actions</h3>
                    <div class="space-y-3">
                        <button id="exportCSVBtn" class="w-full bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded">
                            Exporter en CSV
                        </button>
                        <button id="generatePDFBtn" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded">
                            Générer PDF corrigé
                        </button>
                        <button id="resetBtn" class="w-full bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded">
                            Réinitialiser
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Chat Interface -->
        <div class="bg-white rounded-lg shadow p-4">
            <h2 class="text-xl font-semibold mb-4 text-blue-700">Interface Conversationnelle</h2>
            <div class="chat-container mb-4 p-4 bg-gray-50 rounded-lg" id="chatMessages">
                <div class="text-center text-gray-500 italic">Bienvenue dans l'interface de contrôle qualité. Chargez vos documents pour commencer.</div>
            </div>
            <div class="flex">
                <input type="text" id="chatInput" placeholder="Posez votre question..." class="flex-1 px-4 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                <button id="sendMessageBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-r-md">
                    Envoyer
                </button>
            </div>
        </div>
    </div>

    <script>
        // Initialize PDF.js
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.12.313/pdf.worker.min.js';

        // Global variables
        let referencePdf = null;
        let controlPdf = null;
        let referenceZones = [];
        let currentZone = null;
        let isCreatingZone = false;
        let startX, startY;
        let chatHistory = [];
        let detectedAnomalies = [];
        let detectedDocTypes = [];
        let activeZoneIndex = -1;
        let isDraggingZone = false;
        let dragOffsetX = 0;
        let dragOffsetY = 0;

        // DOM elements
        const referenceFileInput = document.getElementById('referenceFile');
        const controlFileInput = document.getElementById('controlFile');
        const referenceCanvas = document.getElementById('referenceCanvas');
        const controlCanvas = document.getElementById('controlCanvas');
        const refPageSelector = document.getElementById('refPageSelector');
        const ctrlPageSelector = document.getElementById('ctrlPageSelector');
        const refCurrentPage = document.getElementById('refCurrentPage');
        const refTotalPages = document.getElementById('refTotalPages');
        const ctrlCurrentPage = document.getElementById('ctrlCurrentPage');
        const ctrlTotalPages = document.getElementById('ctrlTotalPages');
        const refPrevPage = document.getElementById('refPrevPage');
        const refNextPage = document.getElementById('refNextPage');
        const ctrlPrevPage = document.getElementById('ctrlPrevPage');
        const ctrlNextPage = document.getElementById('ctrlNextPage');
        const defineZonesBtn = document.getElementById('defineZonesBtn');
        const zoneCreator = document.getElementById('zoneCreator');
        const docTypeSelect = document.getElementById('docType');
        const zoneNameInput = document.getElementById('zoneName');
        const zonePageInput = document.getElementById('zonePage');
        const saveZoneBtn = document.getElementById('saveZoneBtn');
        const cancelZoneBtn = document.getElementById('cancelZoneBtn');
        const startControlBtn = document.getElementById('startControlBtn');
        const docTypesList = document.getElementById('docTypesList');
        const anomaliesList = document.getElementById('anomaliesList');
        const exportCSVBtn = document.getElementById('exportCSVBtn');
        const generatePDFBtn = document.getElementById('generatePDFBtn');
        const resetBtn = document.getElementById('resetBtn');
        const chatMessages = document.getElementById('chatMessages');
        const chatInput = document.getElementById('chatInput');
        const sendMessageBtn = document.getElementById('sendMessageBtn');

        // Event listeners
        referenceFileInput.addEventListener('change', handleReferenceFile);
        controlFileInput.addEventListener('change', handleControlFile);
        defineZonesBtn.addEventListener('click', startZoneCreation);
        saveZoneBtn.addEventListener('click', saveZone);
        cancelZoneBtn.addEventListener('click', cancelZoneCreation);
        startControlBtn.addEventListener('click', startControlProcess);
        exportCSVBtn.addEventListener('click', exportToCSV);
        generatePDFBtn.addEventListener('click', generateCorrectedPDF);
        resetBtn.addEventListener('click', resetApplication);
        sendMessageBtn.addEventListener('click', sendChatMessage);
        chatInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') sendChatMessage();
        });

        // Navigation buttons
        refPrevPage.addEventListener('click', () => navigatePage('ref', -1));
        refNextPage.addEventListener('click', () => navigatePage('ref', 1));
        ctrlPrevPage.addEventListener('click', () => navigatePage('ctrl', -1));
        ctrlNextPage.addEventListener('click', () => navigatePage('ctrl', 1));

        // Functions
        function handleReferenceFile(e) {
            const file = e.target.files[0];
            if (!file) return;

            const reader = new FileReader();
            reader.onload = async function() {
                try {
                    const typedArray = new Uint8Array(reader.result);
                    referencePdf = await pdfjsLib.getDocument(typedArray).promise;
                    
                    refTotalPages.textContent = referencePdf.numPages;
                    refPageSelector.classList.remove('hidden');
                    
                    await renderPage('ref', 1);
                    defineZonesBtn.classList.remove('hidden');
                    
                    addChatMessage("Système", "Document de référence chargé avec succès. Vous pouvez maintenant définir les zones de contrôle.");
                } catch (error) {
                    console.error('Error loading PDF:', error);
                    addChatMessage("Erreur", "Erreur lors du chargement du PDF de référence.");
                }
            };
            reader.readAsArrayBuffer(file);
        }

        function handleControlFile(e) {
            const file = e.target.files[0];
            if (!file) return;

            const reader = new FileReader();
            reader.onload = async function() {
                try {
                    const typedArray = new Uint8Array(reader.result);
                    controlPdf = await pdfjsLib.getDocument(typedArray).promise;
                    
                    ctrlTotalPages.textContent = controlPdf.numPages;
                    ctrlPageSelector.classList.remove('hidden');
                    
                    await renderPage('ctrl', 1);
                    
                    addChatMessage("Système", "Document à contrôler chargé avec succès. Vous pouvez maintenant lancer le contrôle.");
                } catch (error) {
                    console.error('Error loading PDF:', error);
                    addChatMessage("Erreur", "Erreur lors du chargement du PDF à contrôler.");
                }
            };
            reader.readAsArrayBuffer(file);
        }

        async function renderPage(type, pageNum) {
            try {
                const pdf = type === 'ref' ? referencePdf : controlPdf;
                const canvas = type === 'ref' ? referenceCanvas : controlCanvas;
                const pageInfo = type === 'ref' ? refCurrentPage : ctrlCurrentPage;
                
                if (!pdf) return;
                
                const page = await pdf.getPage(pageNum);
                const viewport = page.getViewport({ scale: 1.0 });
                
                // Adjust canvas size
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                
                // Update current page display
                pageInfo.textContent = pageNum;
                
                // Render PDF page
                await page.render({
                    canvasContext: canvas.getContext('2d'),
                    viewport: viewport
                }).promise;
                
                // Update zone display if reference
                if (type === 'ref') {
                    displayZonesForPage(pageNum);
                }
                
                return viewport;
            } catch (error) {
                console.error('Error rendering page:', error);
            }
        }

        function navigatePage(type, direction) {
            const currentPage = type === 'ref' ? parseInt(refCurrentPage.textContent) : parseInt(ctrlCurrentPage.textContent);
            const totalPages = type === 'ref' ? referencePdf.numPages : controlPdf.numPages;
            
            let newPage = currentPage + direction;
            if (newPage < 1) newPage = 1;
            if (newPage > totalPages) newPage = totalPages;
            
            renderPage(type, newPage);
        }

        function startZoneCreation() {
            isCreatingZone = true;
            zoneCreator.classList.remove('hidden');
            defineZonesBtn.classList.add('hidden');
            
            // Set up canvas for zone creation
            referenceCanvas.style.cursor = 'crosshair';
            referenceCanvas.addEventListener('mousedown', startZoneDrawing);
            referenceCanvas.addEventListener('mousemove', drawZone);
            referenceCanvas.addEventListener('mouseup', endZoneDrawing);
            
            addChatMessage("Système", "Mode création de zones activé. Cliquez et glissez pour définir une zone de contrôle.");
        }

        function startZoneDrawing(e) {
            if (!isCreatingZone) return;
            
            const rect = referenceCanvas.getBoundingClientRect();
            startX = e.clientX - rect.left;
            startY = e.clientY - rect.top;
            
            // Check if we're clicking on an existing zone
            const existingZone = findZoneAtPosition(startX, startY);
            if (existingZone) {
                activeZoneIndex = existingZone.index;
                isDraggingZone = true;
                dragOffsetX = startX - existingZone.zone.x;
                dragOffsetY = startY - existingZone.zone.y;
                return;
            }
            
            // Remove any existing temporary zone
            if (currentZone) {
                currentZone.remove();
                currentZone = null;
            }
            
            // Create new zone element
            currentZone = document.createElement('div');
            currentZone.className = 'control-zone';
            currentZone.style.left = startX + 'px';
            currentZone.style.top = startY + 'px';
            currentZone.style.width = '0';
            currentZone.style.height = '0';
            
            document.getElementById('referenceViewer').appendChild(currentZone);
        }

        function findZoneAtPosition(x, y) {
            const zones = document.querySelectorAll('.control-zone');
            for (let i = 0; i < zones.length; i++) {
                const zone = zones[i];
                const zoneRect = zone.getBoundingClientRect();
                const canvasRect = referenceCanvas.getBoundingClientRect();
                
                const zoneX = zoneRect.left - canvasRect.left;
                const zoneY = zoneRect.top - canvasRect.top;
                const zoneWidth = zoneRect.width;
                const zoneHeight = zoneRect.height;
                
                if (x >= zoneX && x <= zoneX + zoneWidth && y >= zoneY && y <= zoneY + zoneHeight) {
                    // Find the corresponding zone in our referenceZones array
                    for (let j = 0; j < referenceZones.length; j++) {
                        if (Math.abs(referenceZones[j].x - zoneX) < 5 && 
                            Math.abs(referenceZones[j].y - zoneY) < 5 &&
                            Math.abs(referenceZones[j].width - zoneWidth) < 5 &&
                            Math.abs(referenceZones[j].height - zoneHeight) < 5) {
                            return { index: j, zone: referenceZones[j] };
                        }
                    }
                }
            }
            return null;
        }

        function drawZone(e) {
            if (!isCreatingZone) return;
            
            const rect = referenceCanvas.getBoundingClientRect();
            const currentX = e.clientX - rect.left;
            const currentY = e.clientY - rect.top;
            
            if (isDraggingZone && activeZoneIndex >= 0) {
                // Update zone position
                const zone = referenceZones[activeZoneIndex];
                zone.x = currentX - dragOffsetX;
                zone.y = currentY - dragOffsetY;
                
                // Update zone display
                displayZonesForPage(parseInt(refCurrentPage.textContent));
                return;
            }
            
            if (!currentZone) return;
            
            const width = currentX - startX;
            const height = currentY - startY;
            
            currentZone.style.width = Math.abs(width) + 'px';
            currentZone.style.height = Math.abs(height) + 'px';
            
            if (width < 0) {
                currentZone.style.left = currentX + 'px';
            }
            if (height < 0) {
                currentZone.style.top = currentY + 'px';
            }
        }

        function endZoneDrawing() {
            if (!isCreatingZone) return;
            
            if (isDraggingZone) {
                isDraggingZone = false;
                activeZoneIndex = -1;
                return;
            }
            
            if (currentZone) {
                // Show zone info tooltip
                showZoneInfoTooltip();
            }
            
            // Clean up event listeners
            referenceCanvas.removeEventListener('mousemove', drawZone);
            referenceCanvas.removeEventListener('mouseup', endZoneDrawing);
        }

        function showZoneInfoTooltip() {
            if (!currentZone) return;
            
            const tooltip = document.createElement('div');
            tooltip.className = 'zone-tooltip';
            tooltip.innerHTML = `
                <div class="font-medium mb-1">Nouvelle zone</div>
                <div class="text-xs">Remplissez les détails à droite</div>
            `;
            
            const rect = currentZone.getBoundingClientRect();
            tooltip.style.left = (rect.left + rect.width/2 - 75) + 'px';
            tooltip.style.top = (rect.top - 60) + 'px';
            
            document.body.appendChild(tooltip);
            
            // Remove tooltip after 3 seconds or when user starts interacting
            setTimeout(() => {
                if (tooltip.parentNode) {
                    tooltip.parentNode.removeChild(tooltip);
                }
            }, 3000);
            
            // Also remove when user clicks anywhere
            document.addEventListener('click', function removeTooltip() {
                if (tooltip.parentNode) {
                    tooltip.parentNode.removeChild(tooltip);
                }
                document.removeEventListener('click', removeTooltip);
            }, { once: true });
        }

        function saveZone() {
            if (!currentZone) {
                addChatMessage("Erreur", "Veuillez d'abord créer une zone en cliquant et glissant sur le document.");
                return;
            }
            
            const rect = currentZone.getBoundingClientRect();
            const canvasRect = referenceCanvas.getBoundingClientRect();
            
            // Calculate relative coordinates
            const x = rect.left - canvasRect.left;
            const y = rect.top - canvasRect.top;
            const width = rect.width;
            const height = rect.height;
            
            if (width < 10 || height < 10) {
                addChatMessage("Erreur", "La zone est trop petite. Veuillez créer une zone plus grande.");
                return;
            }
            
            if (!zoneNameInput.value.trim()) {
                addChatMessage("Erreur", "Veuillez donner un nom à la zone.");
                zoneNameInput.focus();
                return;
            }
            
            const zone = {
                type: docTypeSelect.value,
                name: zoneNameInput.value.trim(),
                page: parseInt(zonePageInput.value),
                x: x,
                y: y,
                width: width,
                height: height
            };
            
            referenceZones.push(zone);
            
            // Clean up
            if (currentZone) {
                currentZone.remove();
                currentZone = null;
            }
            isCreatingZone = false;
            
            // Reset UI
            referenceCanvas.style.cursor = 'default';
            
            // Display saved zones
            displayZonesForPage(parseInt(zonePageInput.value));
            
            // Reset form
            zoneNameInput.value = '';
            
            addChatMessage("Système", `Zone "${zone.name}" enregistrée pour le type "${docTypeSelect.options[docTypeSelect.selectedIndex].text}".`);
        }

        function cancelZoneCreation() {
            if (currentZone) {
                currentZone.remove();
                currentZone = null;
            }
            
            isCreatingZone = false;
            isDraggingZone = false;
            activeZoneIndex = -1;
            referenceCanvas.style.cursor = 'default';
            zoneCreator.classList.add('hidden');
            defineZonesBtn.classList.remove('hidden');
            
            // Re-enable zone creation mode if there are zones to edit
            if (referenceZones.length > 0) {
                defineZonesBtn.click();
            }
            
            addChatMessage("Système", "Création de zone annulée.");
        }

        function displayZonesForPage(pageNum) {
            // Remove all existing zone displays except the current one being created
            document.querySelectorAll('.control-zone').forEach(zone => {
                if (zone !== currentZone) zone.remove();
            });
            
            // Remove all zone action buttons
            document.querySelectorAll('.zone-actions').forEach(actions => {
                actions.remove();
            });
            
            // Display zones for this page
            referenceZones.filter(zone => zone.page === pageNum).forEach((zone, index) => {
                const zoneElement = document.createElement('div');
                zoneElement.className = 'control-zone';
                zoneElement.style.left = zone.x + 'px';
                zoneElement.style.top = zone.y + 'px';
                zoneElement.style.width = zone.width + 'px';
                zoneElement.style.height = zone.height + 'px';
                zoneElement.dataset.index = index;
                
                // Add actions buttons
                const actions = document.createElement('div');
                actions.className = 'zone-actions';
                actions.innerHTML = `
                    <button class="zone-action-btn edit-zone" title="Modifier">✏️</button>
                    <button class="zone-action-btn delete-zone" title="Supprimer">🗑️</button>
                `;
                zoneElement.appendChild(actions);
                
                // Position actions
                actions.style.left = (zone.width - actions.offsetWidth) + 'px';
                
                document.getElementById('referenceViewer').appendChild(zoneElement);
                
                // Add event listeners to action buttons
                zoneElement.querySelector('.edit-zone').addEventListener('click', (e) => {
                    e.stopPropagation();
                    editZone(index);
                });
                
                zoneElement.querySelector('.delete-zone').addEventListener('click', (e) => {
                    e.stopPropagation();
                    deleteZone(index);
                });
            });
        }

        function editZone(index) {
            const zone = referenceZones[index];
            
            // Fill the form with zone data
            docTypeSelect.value = zone.type;
            zoneNameInput.value = zone.name;
            zonePageInput.value = zone.page;
            
            // Highlight the zone
            document.querySelectorAll('.control-zone').forEach(z => {
                z.style.borderColor = 'rgba(59, 130, 246, 0.5)';
            });
            
            const zoneElement = document.querySelector(`.control-zone[data-index="${index}"]`);
            if (zoneElement) {
                zoneElement.style.borderColor = 'rgba(255, 165, 0, 0.8)';
            }
            
            addChatMessage("Système", `Modification de la zone "${zone.name}". Vous pouvez ajuster ses propriétés ou la déplacer directement sur le document.`);
        }

        function deleteZone(index) {
            const zoneName = referenceZones[index].name;
            if (confirm(`Voulez-vous vraiment supprimer la zone "${zoneName}" ?`)) {
                referenceZones.splice(index, 1);
                displayZonesForPage(parseInt(refCurrentPage.textContent));
                addChatMessage("Système", `Zone "${zoneName}" supprimée.`);
            }
        }

        async function startControlProcess() {
            if (!referencePdf || !controlPdf) {
                addChatMessage("Erreur", "Veuillez charger les deux documents avant de lancer le processus.");
                return;
            }
            
            if (referenceZones.length === 0) {
                addChatMessage("Erreur", "Veuillez définir des zones de contrôle avant de lancer le processus.");
                return;
            }
            
            addChatMessage("Système", "Début du processus de contrôle...");
            
            // Reset previous results
            detectedAnomalies = [];
            detectedDocTypes = [];
            
            // Simulate document type detection (in a real app, this would analyze the PDF)
            detectDocumentTypes();
            
            // Simulate comparison (in a real app, this would compare text in the zones)
            simulateComparison();
            
            // Update UI with results
            updateResultsUI();
            
            addChatMessage("Système", "Contrôle terminé. " + detectedAnomalies.length + " anomalies détectées.");
        }

        function detectDocumentTypes() {
            // In a real app, this would analyze the PDF content to detect document types
            // For this demo, we'll just use some sample data
            detectedDocTypes = [
                { type: 'lettre', page: 1, status: 'détecté' },
                { type: 'lexique', page: 2, status: 'détecté' },
                { type: 'attestation_alloc', page: 3, status: 'détecté' },
                { type: 'releve', page: 4, status: 'détecté' },
                { type: 'contact', page: 5, status: 'détecté' }
            ];
        }

        function simulateComparison() {
            // In a real app, this would compare text in the defined zones
            // For this demo, we'll generate some sample anomalies
            
            // Sample anomalies for different document types
            detectedAnomalies = [
                {
                    docType: 'lettre',
                    page: 1,
                    location: 'Haut de la page',
                    description: 'Le logo en en-tête est décalé de 5px vers la droite',
                    severity: 'Majeure',
                    refText: 'Logo UMR positionné à x:50, y:50',
                    controlText: 'Logo UMR positionné à x:55, y:50'
                },
                {
                    docType: 'lettre',
                    page: 1,
                    location: 'Bas de la page',
                    description: 'La mention légale est incomplète',
                    severity: 'Mineure',
                    refText: 'UMR est une SA au capital de 247 668 709 €. Siège social : 12 Rue de Cornulier - 75 000 PARIS.',
                    controlText: 'UMR est une SA au capital de 247 668 709 €.'
                },
                {
                    docType: 'attestation_alloc',
                    page: 3,
                    location: 'Milieu de la page',
                    description: 'La phrase "Au titre des pensions : 1 632 €" est absente',
                    severity: 'Majeure',
                    refText: 'Au titre des pensions : 1 632 €',
                    controlText: ''
                },
                {
                    docType: 'releve',
                    page: 4,
                    location: 'Bas de la page',
                    description: 'La valeur du point affichée diffère',
                    severity: 'Variable',
                    refText: 'valeur de service du point* de votre contrat PER Corem a été revalorisée à hauteur de 3,5% au 01/01/2025',
                    controlText: 'valeur de service du point* de votre contrat PER Corem a été revalorisée à hauteur de 2,5% au 01/01/2025',
                    needsConfirmation: true
                }
            ];
        }

        function updateResultsUI() {
            // Update document types list
            docTypesList.innerHTML = '';
            if (detectedDocTypes.length === 0) {
                docTypesList.innerHTML = '<li class="text-sm text-gray-500 italic">Aucun type de document détecté</li>';
            } else {
                detectedDocTypes.forEach(doc => {
                    const li = document.createElement('li');
                    li.className = 'text-sm';
                    li.innerHTML = `<span class="font-medium">${getDocTypeName(doc.type)}</span> (Page ${doc.page}) - <span class="text-green-600">${doc.status}</span>`;
                    docTypesList.appendChild(li);
                });
            }
            
            // Update anomalies list
            anomaliesList.innerHTML = '';
            if (detectedAnomalies.length === 0) {
                anomaliesList.innerHTML = '<li class="text-sm text-gray-500 italic">Aucune anomalie détectée</li>';
            } else {
                detectedAnomalies.forEach((anomaly, index) => {
                    const li = document.createElement('li');
                    li.className = 'text-sm';
                    
                    let severityClass = 'text-yellow-600';
                    if (anomaly.severity === 'Majeure') severityClass = 'text-red-600';
                    if (anomaly.severity === 'Variable') severityClass = 'text-blue-600';
                    
                    li.innerHTML = `
                        <div class="font-medium">${getDocTypeName(anomaly.docType)} (${anomaly.location}, Page ${anomaly.page})</div>
                        <div>${anomaly.description} <span class="${severityClass}">(${anomaly.severity})</span></div>
                        ${anomaly.needsConfirmation ? '<div class="text-blue-600 mt-1">[Nécessite confirmation]</div>' : ''}
                    `;
                    
                    li.addEventListener('click', () => showAnomalyDetails(index));
                    anomaliesList.appendChild(li);
                });
            }
        }

        function getDocTypeName(typeCode) {
            const types = {
                'lettre': 'Lettre du Président',
                'lexique': 'Lexique',
                'attestation_alloc': 'Attestation Fiscale Allocataire',
                'attestation_cotis': 'Attestation Fiscale Cotisant',
                'releve': 'Relevé de Situation',
                'contact': 'Page de Contact'
            };
            return types[typeCode] || typeCode;
        }

        function showAnomalyDetails(index) {
            const anomaly = detectedAnomalies[index];
            
            let message = `
                <strong>${getDocTypeName(anomaly.docType)} (Page ${anomaly.page})</strong><br>
                <span class="${anomaly.severity === 'Majeure' ? 'text-red-600' : anomaly.severity === 'Variable' ? 'text-blue-600' : 'text-yellow-600'}">
                    ${anomaly.severity}: ${anomaly.description}
                </span><br><br>
                <strong>Document de référence:</strong><br>
                ${anomaly.refText || 'Aucun texte correspondant'}<br><br>
                <strong>Document à contrôler:</strong><br>
                ${anomaly.controlText || 'Aucun texte correspondant'}
            `;
            
            if (anomaly.needsConfirmation) {
                message += `<br><br><div class="mt-4">
                    <button onclick="confirmAnomaly(${index}, true)" class="mr-2 bg-green-600 hover:bg-green-700 text-white font-medium py-1 px-3 rounded text-sm">
                        Confirmer la différence
                    </button>
                    <button onclick="confirmAnomaly(${index}, false)" class="bg-red-600 hover:bg-red-700 text-white font-medium py-1 px-3 rounded text-sm">
                        Rejeter la différence
                    </button>
                </div>`;
            }
            
            addChatMessage("Détail de l'anomalie", message);
        }

        function confirmAnomaly(index, isConfirmed) {
            const anomaly = detectedAnomalies[index];
            
            if (isConfirmed) {
                addChatMessage("Système", `Vous avez confirmé que la différence dans "${anomaly.description}" est normale.`);
                // In a real app, you might mark this as confirmed in your data structure
            } else {
                addChatMessage("Système", `Vous avez indiqué que la différence dans "${anomaly.description}" est anormale.`);
                // In a real app, you might mark this as a real anomaly
            }
            
            // Remove the needsConfirmation flag
            detectedAnomalies[index].needsConfirmation = false;
            
            // Update the UI
            updateResultsUI();
        }

        function exportToCSV() {
            if (detectedAnomalies.length === 0) {
                addChatMessage("Erreur", "Aucune anomalie à exporter.");
                return;
            }
            
            // Create CSV content
            let csvContent = "Type de document,Page,Localisation,Description,Sévérité,Texte de référence,Texte du document\n";
            
            detectedAnomalies.forEach(anomaly => {
                csvContent += `"${getDocTypeName(anomaly.docType)}",${anomaly.page},"${anomaly.location}","${anomaly.description}","${anomaly.severity}","${anomaly.refText.replace(/"/g, '""')}","${anomaly.controlText.replace(/"/g, '""')}"\n`;
            });
            
            // Create download link
            const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.setAttribute('href', url);
            link.setAttribute('download', 'anomalies_detectees.csv');
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            
            addChatMessage("Système", "Export CSV des anomalies terminé.");
        }

        function generateCorrectedPDF() {
            // In a real app, this would generate a corrected PDF
            // For this demo, we'll just show a message
            addChatMessage("Système", "Génération du PDF corrigé en cours...");
            
            setTimeout(() => {
                addChatMessage("Système", "PDF corrigé généré avec succès. Les anomalies ont été surlignées.");
                
                // Simulate download (in a real app, this would be the actual PDF)
                const link = document.createElement('a');
                link.setAttribute('href', '#');
                link.setAttribute('download', 'document_corrige.pdf');
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }, 2000);
        }

        function resetApplication() {
            // Reset file inputs
            referenceFileInput.value = '';
            controlFileInput.value = '';
            
            // Reset PDF viewers
            referenceCanvas.getContext('2d').clearRect(0, 0, referenceCanvas.width, referenceCanvas.height);
            controlCanvas.getContext('2d').clearRect(0, 0, controlCanvas.width, controlCanvas.height);
            
            // Hide page selectors
            refPageSelector.classList.add('hidden');
            ctrlPageSelector.classList.add('hidden');
            
            // Reset zone creation
            if (currentZone) {
                currentZone.remove();
                currentZone = null;
            }
            isCreatingZone = false;
            isDraggingZone = false;
            activeZoneIndex = -1;
            referenceCanvas.style.cursor = 'default';
            zoneCreator.classList.add('hidden');
            defineZonesBtn.classList.add('hidden');
            
            // Clear zones
            referenceZones = [];
            document.querySelectorAll('.control-zone').forEach(zone => zone.remove());
            document.querySelectorAll('.zone-actions').forEach(actions => actions.remove());
            
            // Reset results
            detectedAnomalies = [];
            detectedDocTypes = [];
            docTypesList.innerHTML = '<li class="text-sm text-gray-500 italic">Aucun type de document détecté</li>';
            anomaliesList.innerHTML = '<li class="text-sm text-gray-500 italic">Aucune anomalie détectée</li>';
            
            // Clear chat
            chatHistory = [];
            chatMessages.innerHTML = '<div class="text-center text-gray-500 italic">Bienvenue dans l\'interface de contrôle qualité. Chargez vos documents pour commencer.</div>';
            
            // Reset PDF objects
            referencePdf = null;
            controlPdf = null;
            
            addChatMessage("Système", "Application réinitialisée. Vous pouvez charger de nouveaux documents.");
        }

        function addChatMessage(sender, message) {
            const messageDiv = document.createElement('div');
            messageDiv.className = 'mb-3';
            
            const senderSpan = document.createElement('span');
            senderSpan.className = 'font-medium text-blue-700';
            senderSpan.textContent = sender + ': ';
            
            const contentDiv = document.createElement('div');
            contentDiv.className = 'mt-1 ml-4 p-3 bg-white rounded-lg shadow-sm';
            contentDiv.innerHTML = message;
            
            messageDiv.appendChild(senderSpan);
            messageDiv.appendChild(contentDiv);
            
            chatMessages.appendChild(messageDiv);
            chatMessages.scrollTop = chatMessages.scrollHeight;
            
            // Add to history
            chatHistory.push({ sender, message });
        }

        function sendChatMessage() {
            const message = chatInput.value.trim();
            if (!message) return;
            
            addChatMessage("Vous", message);
            chatInput.value = '';
            
            // Simulate AI response
            setTimeout(() => {
                let response = "Je suis désolé, je ne peux pas répondre à cette question dans cette version de démonstration. Dans une version complète, je pourrais analyser les documents et répondre à vos questions sur les anomalies détectées.";
                
                // Simple keyword responses for demo
                if (message.toLowerCase().includes('bonjour') || message.toLowerCase().includes('salut')) {
                    response = "Bonjour ! Comment puis-je vous aider avec le contrôle de vos documents aujourd'hui ?";
                } else if (message.toLowerCase().includes('aide') || message.toLowerCase().includes('comment')) {
                    response = "Pour utiliser cette application :<br>1. Chargez un document de référence<br>2. Définissez les zones de contrôle<br>3. Chargez un document à vérifier<br>4. Lancez le contrôle<br>Je vous signalerai alors les anomalies détectées.";
                } else if (message.toLowerCase().includes('anomalie') && detectedAnomalies.length > 0) {
                    response = `Il y a actuellement ${detectedAnomalies.length} anomalies détectées. Cliquez sur une anomalie dans la liste pour voir les détails.`;
                } else if (message.toLowerCase().includes('type') && detectedDocTypes.length > 0) {
                    const typesList = detectedDocTypes.map(doc => getDocTypeName(doc.type)).join(', ');
                    response = `Les types de documents détectés sont : ${typesList}.`;
                }
                
                addChatMessage("Assistant", response);
            }, 500);
        }

        // Make confirmAnomaly available globally for the chat messages
        window.confirmAnomaly = confirmAnomaly;
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=DaniGoua/pdf6" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>