FraudScore

Runtime error

App Files Files Community

TheFrenchDemos commited on Apr 28

Commit

d065b18

1 Parent(s): d9d5d76

Update templates/index.html

Browse files

la version précédente avait supprimé l'affichage des deux fois trois images.

Files changed (1) hide show

templates/index.html +155 -23

templates/index.html CHANGED Viewed

@@ -1,49 +1,179 @@
 <script>
     let file1 = null;
     let file2 = null;
-    function updatePreview(id, file) {
         const reader = new FileReader();
         reader.onload = (event) => {
-            const previewId = id === 1 ? 'dropzone1' : 'dropzone2';
-            document.getElementById(previewId).innerHTML = `
                 <img src="${event.target.result}" class="preview-image"/>
             `;
         };
-        reader.readAsDataURL(file);
-        // Vérifie si les deux images sont sélectionnées pour afficher le bouton
-        checkReadyToCompare();
     }
     document.getElementById('fileInput1').addEventListener('change', (e) => {
         file1 = e.target.files[0];
-        if (file1 && file1.type.startsWith('image/')) {
-            updatePreview(1, file1);
-        }
     });
     document.getElementById('fileInput2').addEventListener('change', (e) => {
         file2 = e.target.files[0];
-        if (file2 && file2.type.startsWith('image/')) {
-            updatePreview(2, file2);
-        }
     });
     function checkReadyToCompare() {
-        const compareContainer = document.getElementById('compareButtonContainer');
         if (file1 && file2) {
-            compareContainer.innerHTML = `
-                <button class="btn btn-primary" onclick="processImages()">Compare Images</button>
             `;
         } else {
-            compareContainer.innerHTML = '';
         }
     }
     async function processImages() {
         if (!file1 || !file2) {
-            alert('Please select two images first.');
             return;
         }
@@ -54,10 +184,8 @@
         const resultsDiv = document.getElementById('results');
         resultsDiv.innerHTML = `
             <div class="loading-container">
-                <div class="spinner-border loading-spinner text-primary" role="status">
-                    <span class="visually-hidden">Loading...</span>
-                </div>
-                <div class="loading-text">Processing images...</div>
             </div>`;
         try {
@@ -82,8 +210,12 @@
             console.error('Error:', error);
             resultsDiv.innerHTML = `
                 <div class="alert alert-danger" role="alert">
-                    Error: ${error.message}
                 </div>`;
         }
     }
 </script>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Compare Two Images</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        .preset-image-container {
+            width: 100%;
+            overflow: hidden;
+            margin-bottom: 10px;
+        }
+        .preset-image {
+            width: 100%;
+            height: auto;
+            cursor: pointer;
+            transition: transform 0.2s;
+            border-radius: 8px;
+        }
+        .preset-image:hover {
+            transform: scale(1.05);
+        }
+        .dropzone {
+            border: 2px dashed #ccc;
+            padding: 20px;
+            text-align: center;
+            margin-top: 10px;
+            border-radius: 8px;
+            background-color: #f9f9f9;
+        }
+        .preview-image {
+            width: 100%;
+            height: auto;
+            margin-top: 10px;
+            border-radius: 8px;
+        }
+        .loading-container {
+            text-align: center;
+            margin-top: 20px;
+        }
+        .loading-text {
+            margin-top: 10px;
+            font-size: 18px;
+            color: #555;
+        }
+    </style>
+</head>
+<body>
+<div class="container my-4">
+    <h1 class="text-center">Compare Two Images</h1>
+    <div class="row mt-4">
+        <!-- Column 1: Original Image -->
+        <div class="col-md-6">
+            <h5 class="text-center">Select Original Image</h5>
+            <div class="row">
+                <div class="col-4">
+                    <div class="preset-image-container">
+                        <img src="/static/1.webp" class="preset-image" onclick="selectPreset(1, 1)" alt="Original 1">
+                    </div>
+                </div>
+                <div class="col-4">
+                    <div class="preset-image-container">
+                        <img src="/static/2.webp" class="preset-image" onclick="selectPreset(2, 1)" alt="Original 2">
+                    </div>
+                </div>
+                <div class="col-4">
+                    <div class="preset-image-container">
+                        <img src="/static/3.webp" class="preset-image" onclick="selectPreset(3, 1)" alt="Original 3">
+                    </div>
+                </div>
+            </div>
+            <div class="dropzone" id="dropzone1">
+                <p>Or drag and drop an image here</p>
+                <input type="file" id="fileInput1" accept="image/*" hidden>
+                <button class="btn btn-outline-primary" onclick="document.getElementById('fileInput1').click()">Upload Original</button>
+            </div>
+        </div>
+        <!-- Column 2: AI Generated Image -->
+        <div class="col-md-6">
+            <h5 class="text-center">Select AI Generated Image</h5>
+            <div class="row">
+                <div class="col-4">
+                    <div class="preset-image-container">
+                        <img src="/static/4.webp" class="preset-image" onclick="selectPreset(4, 2)" alt="AI 1">
+                    </div>
+                </div>
+                <div class="col-4">
+                    <div class="preset-image-container">
+                        <img src="/static/5.webp" class="preset-image" onclick="selectPreset(5, 2)" alt="AI 2">
+                    </div>
+                </div>
+                <div class="col-4">
+                    <div class="preset-image-container">
+                        <img src="/static/6.webp" class="preset-image" onclick="selectPreset(6, 2)" alt="AI 3">
+                    </div>
+                </div>
+            </div>
+            <div class="dropzone" id="dropzone2">
+                <p>Or drag and drop an image here</p>
+                <input type="file" id="fileInput2" accept="image/*" hidden>
+                <button class="btn btn-outline-primary" onclick="document.getElementById('fileInput2').click()">Upload AI Image</button>
+            </div>
+        </div>
+    </div>
+    <!-- Compare Button -->
+    <div id="compareButtonContainer" class="text-center my-4"></div>
+    <!-- Result -->
+    <div id="results" class="mt-5"></div>
+</div>
+<!-- Scripts -->
 <script>
     let file1 = null;
     let file2 = null;
+    function selectPreset(presetNumber, target) {
+        fetch(`/static/${presetNumber}.webp`)
+            .then(res => res.blob())
+            .then(blob => {
+                const file = new File([blob], `preset${presetNumber}.webp`, { type: blob.type });
+                if (target === 1) {
+                    file1 = file;
+                    updatePreview('dropzone1', blob);
+                } else {
+                    file2 = file;
+                    updatePreview('dropzone2', blob);
+                }
+            })
+            .then(() => checkReadyToCompare());
+    }
+    function updatePreview(dropzoneId, blob) {
         const reader = new FileReader();
         reader.onload = (event) => {
+            document.getElementById(dropzoneId).innerHTML = `
                 <img src="${event.target.result}" class="preview-image"/>
             `;
         };
+        reader.readAsDataURL(blob);
     }
     document.getElementById('fileInput1').addEventListener('change', (e) => {
         file1 = e.target.files[0];
+        updatePreview('dropzone1', file1);
+        checkReadyToCompare();
     });
     document.getElementById('fileInput2').addEventListener('change', (e) => {
         file2 = e.target.files[0];
+        updatePreview('dropzone2', file2);
+        checkReadyToCompare();
     });
     function checkReadyToCompare() {
+        const container = document.getElementById('compareButtonContainer');
         if (file1 && file2) {
+            container.innerHTML = `
+                <button class="btn btn-primary btn-lg" onclick="processImages()">Compare Images</button>
             `;
         } else {
+            container.innerHTML = '';
         }
     }
     async function processImages() {
         if (!file1 || !file2) {
+            alert('Please select two images first!');
             return;
         }
         const resultsDiv = document.getElementById('results');
         resultsDiv.innerHTML = `
             <div class="loading-container">
+                <div class="spinner-border text-primary" role="status"></div>
+                <div class="loading-text">Processing...</div>
             </div>`;
         try {
             console.error('Error:', error);
             resultsDiv.innerHTML = `
                 <div class="alert alert-danger" role="alert">
+                    ${error.message}
                 </div>`;
         }
     }
 </script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>