Update templates/index.html

changement de taille des images sélectionnées

templates/index.html

@@ -35,8 +35,10 @@
         }
         .preview-image {
             width: 100%;
+            max-width: 200px;
             height: auto;
-            margin-top: 10px;
+            margin: 10px auto;
+            display: block;
             border-radius: 8px;
             opacity: 0;
             transition: opacity 0.5s ease-in;
@@ -53,6 +55,13 @@
             font-size: 18px;
             color: #555;
         }
+        #compareSection {
+            margin-top: 30px;
+            text-align: center;
+        }
+        #results {
+            margin-top: 20px;
+        }
     </style>
 </head>
 
@@ -61,7 +70,6 @@
     <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>
@@ -115,28 +123,18 @@
                 <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>
-
-    <!-- Preview of Selected Images -->
-    <div class="row mt-5" id="previewSection" style="display:none;">
-        <h4 class="text-center mb-4">Selected Images</h4>
-        <div class="col-md-6 text-center">
-            <h6>Original Image</h6>
-            <img id="previewImage1" class="preview-image img-fluid" alt="Original Preview">
-        </div>
-        <div class="col-md-6 text-center">
-            <h6>AI Generated Image</h6>
-            <img id="previewImage2" class="preview-image img-fluid" alt="AI Preview">
+    <!-- Section for Preview + Compare Button + Distance -->
+    <div id="compareSection" class="d-flex justify-content-center align-items-center flex-column" style="display: none;">
+        <div class="d-flex justify-content-around align-items-center w-100">
+            <img id="previewImage1" class="preview-image" alt="Original Preview">
+            <div id="compareButtonContainer"></div>
+            <img id="previewImage2" class="preview-image" alt="AI Preview">
         </div>
+        <div id="results"></div>
     </div>
 
-    <!-- Result -->
-    <div id="results" class="mt-5"></div>
-
 </div>
 
 <!-- Scripts -->
@@ -158,12 +156,12 @@
                 const file = new File([blob], `preset${presetNumber}.webp`, { type: blob.type });
                 if (target === 1) {
                     file1 = file;
-                    updatePreview('dropzone1', blob, 1);
+                    updatePreview(blob, 1);
                     resetSelection(1);
                     document.getElementById(`preset-${presetNumber}-1`).classList.add('selected');
                 } else {
                     file2 = file;
-                    updatePreview('dropzone2', blob, 2);
+                    updatePreview(blob, 2);
                     resetSelection(2);
                     document.getElementById(`preset-${presetNumber}-2`).classList.add('selected');
                 }
@@ -171,13 +169,9 @@
             .then(() => checkReadyToCompare());
     }
 
-    function updatePreview(dropzoneId, blob, target) {
+    function updatePreview(blob, target) {
         const reader = new FileReader();
         reader.onload = (event) => {
-            document.getElementById(dropzoneId).innerHTML = `
-                <img src="${event.target.result}" class="preview-image visible"/>
-            `;
-
             if (target === 1) {
                 document.getElementById('previewImage1').src = event.target.result;
                 document.getElementById('previewImage1').classList.add('visible');
@@ -185,22 +179,21 @@
                 document.getElementById('previewImage2').src = event.target.result;
                 document.getElementById('previewImage2').classList.add('visible');
             }
-
-            document.getElementById('previewSection').style.display = 'flex';
+            document.getElementById('compareSection').style.display = 'flex';
         };
         reader.readAsDataURL(blob);
     }
 
     document.getElementById('fileInput1').addEventListener('change', (e) => {
         file1 = e.target.files[0];
-        updatePreview('dropzone1', file1, 1);
+        updatePreview(file1, 1);
         resetSelection(1);
         checkReadyToCompare();
     });
 
     document.getElementById('fileInput2').addEventListener('change', (e) => {
         file2 = e.target.files[0];
-        updatePreview('dropzone2', file2, 2);
+        updatePreview(file2, 2);
         resetSelection(2);
         checkReadyToCompare();
     });
@@ -209,7 +202,7 @@
         const container = document.getElementById('compareButtonContainer');
         if (file1 && file2) {
             container.innerHTML = `
-                <button class="btn btn-primary btn-lg" onclick="processImages()">Compare Images</button>
+                <button class="btn btn-primary" onclick="processImages()">Compare</button>
             `;
         } else {
             container.innerHTML = '';
@@ -244,7 +237,7 @@
 
             if (data.distance !== undefined) {
                 resultsDiv.innerHTML = `
-                    <div class="card p-4 text-center">
+                    <div class="card mt-3 p-4 text-center">
                         <h4>Euclidean Distance</h4>
                         <p class="display-6">${data.distance.toFixed(4)}</p>
                     </div>`;
@@ -264,3 +257,4 @@
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>
+