update

2025-07-21 19:20:44 +01:00
parent 0b7af4050e
commit 7908b94d40
124 changed files with 968 additions and 3499 deletions
@@ -0,0 +1,100 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const dropZone = document.getElementById('dropZone');
+    const fileInput = document.getElementById('fileInput');
+    const detectButton = document.getElementById('detectButton');
+    const testButton = document.getElementById('testButton');
+    const originalImage = document.getElementById('originalImage');
+    const resultImage = document.getElementById('resultImage');
+    const loading = document.getElementById('loading');
+
+    // Handle drag and drop
+    dropZone.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        dropZone.style.borderColor = '#2980b9';
+    });
+
+    dropZone.addEventListener('dragleave', (e) => {
+        e.preventDefault();
+        dropZone.style.borderColor = '#3498db';
+    });
+
+    dropZone.addEventListener('drop', (e) => {
+        e.preventDefault();
+        dropZone.style.borderColor = '#3498db';
+        
+        const file = e.dataTransfer.files[0];
+        if (file && file.type.startsWith('image/')) {
+            handleImageSelection(file);
+        }
+    });
+
+    // Handle click to upload
+    dropZone.addEventListener('click', () => {
+        fileInput.click();
+    });
+
+    fileInput.addEventListener('change', (e) => {
+        const file = e.target.files[0];
+        if (file) {
+            handleImageSelection(file);
+        }
+    });
+
+    function handleImageSelection(file) {
+        const reader = new FileReader();
+        reader.onload = function(e) {
+            originalImage.src = e.target.result;
+            originalImage.style.display = 'block';
+            detectButton.disabled = false;
+        };
+        reader.readAsDataURL(file);
+    }
+
+    // Handle detect button click
+    detectButton.addEventListener('click', async () => {
+        const formData = new FormData();
+        formData.append('image', fileInput.files[0]);
+        
+        try {
+            loading.style.display = 'flex';
+            const response = await fetch('/detect', {
+                method: 'POST',
+                body: formData
+            });
+            
+            if (response.ok) {
+                const blob = await response.blob();
+                resultImage.src = URL.createObjectURL(blob);
+                resultImage.style.display = 'block';
+            } else {
+                alert('Error processing image');
+            }
+        } catch (error) {
+            console.error('Error:', error);
+            alert('Error processing image');
+        } finally {
+            loading.style.display = 'none';
+        }
+    });
+
+    // Handle test button click
+    testButton.addEventListener('click', async () => {
+        try {
+            loading.style.display = 'flex';
+            const response = await fetch('/detect/test');
+            
+            if (response.ok) {
+                const blob = await response.blob();
+                resultImage.src = URL.createObjectURL(blob);
+                resultImage.style.display = 'block';
+            } else {
+                alert('Error running test detection');
+            }
+        } catch (error) {
+            console.error('Error:', error);
+            alert('Error running test detection');
+        } finally {
+            loading.style.display = 'none';
+        }
+    });
+});