Spaces:

DaniGoua
/

pdf6

Running

App Files Files Community

DaniGoua commited on 18 days ago

Commit

5563d55

verified ·

1 Parent(s): 91440dd

Add 1 files

Browse files

Files changed (1) hide show

index.html +279 -39

index.html CHANGED Viewed

@@ -11,6 +11,7 @@
             height: 500px;
             overflow-y: auto;
             border: 1px solid #e5e7eb;
         }
         .chat-container {
             height: 400px;
@@ -34,10 +35,40 @@
             border: 2px dashed rgba(59, 130, 246, 0.5);
             background-color: rgba(59, 130, 246, 0.2);
             z-index: 10;
         }
         #zoneCreator {
             position: relative;
         }
     </style>
 </head>
 <body class="bg-gray-50">
@@ -97,32 +128,54 @@
         <!-- 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="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">
-            </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>
@@ -198,6 +251,10 @@
         let chatHistory = [];
         let detectedAnomalies = [];
         let detectedDocTypes = [];
         // DOM elements
         const referenceFileInput = document.getElementById('referenceFile');
@@ -369,6 +426,16 @@
             startX = e.clientX - rect.left;
             startY = e.clientY - rect.top;
             // Remove any existing temporary zone
             if (currentZone) {
                 currentZone.remove();
@@ -386,13 +453,53 @@
             document.getElementById('referenceViewer').appendChild(currentZone);
         }
         function drawZone(e) {
-            if (!isCreatingZone || !currentZone) return;
             const rect = referenceCanvas.getBoundingClientRect();
             const currentX = e.clientX - rect.left;
             const currentY = e.clientY - rect.top;
             const width = currentX - startX;
             const height = currentY - startY;
@@ -408,16 +515,62 @@
         }
         function endZoneDrawing() {
-            if (!isCreatingZone || !currentZone) return;
             // Clean up event listeners
             referenceCanvas.removeEventListener('mousemove', drawZone);
             referenceCanvas.removeEventListener('mouseup', endZoneDrawing);
         }
-        function saveZone() {
             if (!currentZone) return;
             const rect = currentZone.getBoundingClientRect();
             const canvasRect = referenceCanvas.getBoundingClientRect();
@@ -427,9 +580,20 @@
             const width = rect.width;
             const height = rect.height;
             const zone = {
                 type: docTypeSelect.value,
-                name: zoneNameInput.value || 'Zone sans nom',
                 page: parseInt(zonePageInput.value),
                 x: x,
                 y: y,
@@ -440,18 +604,21 @@
             referenceZones.push(zone);
             // Clean up
-            currentZone.remove();
-            currentZone = null;
             isCreatingZone = false;
             // Reset UI
             referenceCanvas.style.cursor = 'default';
-            zoneCreator.classList.add('hidden');
-            defineZonesBtn.classList.remove('hidden');
             // Display saved zones
             displayZonesForPage(parseInt(zonePageInput.value));
             addChatMessage("Système", `Zone "${zone.name}" enregistrée pour le type "${docTypeSelect.options[docTypeSelect.selectedIndex].text}".`);
         }
@@ -462,36 +629,106 @@
             }
             isCreatingZone = false;
             referenceCanvas.style.cursor = 'default';
             zoneCreator.classList.add('hidden');
             defineZonesBtn.classList.remove('hidden');
             addChatMessage("Système", "Création de zone annulée.");
         }
         function displayZonesForPage(pageNum) {
-            // Remove all existing zone displays
             document.querySelectorAll('.control-zone').forEach(zone => {
                 if (zone !== currentZone) zone.remove();
             });
             // Display zones for this page
-            referenceZones.filter(zone => zone.page === pageNum).forEach(zone => {
                 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.title = `${zone.name} (${zone.type})`;
                 document.getElementById('referenceViewer').appendChild(zoneElement);
             });
         }
         async function startControlProcess() {
-            if (!referencePdf || !controlPdf || referenceZones.length === 0) {
-                addChatMessage("Erreur", "Veuillez charger les deux documents et définir des zones de contrôle avant de lancer le processus.");
                 return;
             }
@@ -733,6 +970,8 @@
                 currentZone = null;
             }
             isCreatingZone = false;
             referenceCanvas.style.cursor = 'default';
             zoneCreator.classList.add('hidden');
             defineZonesBtn.classList.add('hidden');
@@ -740,6 +979,7 @@
             // Clear zones
             referenceZones = [];
             document.querySelectorAll('.control-zone').forEach(zone => zone.remove());
             // Reset results
             detectedAnomalies = [];

             height: 500px;
             overflow-y: auto;
             border: 1px solid #e5e7eb;
+            position: relative;
         }
         .chat-container {
             height: 400px;
             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">
         <!-- 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>
         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');
             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();
             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;
         }
         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();
             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,
             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}".`);
         }
             }
             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;
             }
                 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 = [];