Update templates/index.html

intégration de la jauge euclidienne

templates/index.html

@@ -55,7 +55,36 @@
             font-size: 18px;
             color: #555;
         }
-        #compareSection {
+        .jauge-container {
+          display: flex;
+          align-items: center;
+        }
+        .jauge {
+          position: relative;
+          width: 40px;
+          height: 200px;
+          border: 2px solid #ccc;
+          border-radius: 10px;
+          background: #f0f0f0;
+          overflow: hidden;
+          margin-right: 20px;
+        }
+        .jauge-level {
+          position: absolute;
+          width: 100%;
+          bottom: 0;
+          border-radius: 8px;
+          transition: height 1s ease, background-color 1s ease;
+        }
+        .jauge-labels {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          height: 200px;
+          font-size: 0.8rem;
+          text-align: left;
+        }
+      #compareSection {
             margin-top: 30px;
             text-align: center;
         }
@@ -134,28 +163,39 @@
         </div>
         <div id="results"></div>
     </div>
-
+  
+    <h2>Euclidean Distance: <span id="euclidVal"></span></h2>
+    
+    <div class="jauge-container">
+      <div class="jauge">
+        <div class="jauge-level" id="jaugeLevel"></div>
+      </div>
+      <div class="jauge-labels">
+        <span>most certainly</span>
+        <span>very probably</span>
+        <span>probably</span>
+        <span>possibly</span>
+        <span>probably not</span>
+        <span>definitely not</span>
+      </div>
+    </div>
+  
 </div>
 
 <!-- Scripts -->
 <script>
     let file1 = null;
     let file2 = null;
-
     function resetSelection(target) {
         for (let i = 1; i <= 3; i++) {
             const img = document.getElementById(`preset-${i}-${target}`);
             if (img) img.classList.remove('selected');
         }
     }
-
-
-
     function selectPreset(presetNumber, target) {
     const imgElement = document.getElementById(`preset-${presetNumber}-${target}`);
     const imagePath = imgElement.getAttribute('src'); // Récupère le chemin exact
     const fileName = imagePath.split('/').pop();      // Extrait le nom du fichier
-
     fetch(imagePath)
         .then(res => {
             if (!res.ok) throw new Error(`Impossible de charger ${fileName}`);
@@ -181,8 +221,6 @@
         })
         .then(() => checkReadyToCompare());
 }
-
-
     function updatePreview(blob, target) {
         const reader = new FileReader();
         reader.onload = (event) => {
@@ -197,21 +235,18 @@
         };
         reader.readAsDataURL(blob);
     }
-
     document.getElementById('fileInput1').addEventListener('change', (e) => {
         file1 = e.target.files[0];
         updatePreview(file1, 1);
         resetSelection(1);
         checkReadyToCompare();
     });
-
     document.getElementById('fileInput2').addEventListener('change', (e) => {
         file2 = e.target.files[0];
         updatePreview(file2, 2);
         resetSelection(2);
         checkReadyToCompare();
     });
-
     function checkReadyToCompare() {
         const container = document.getElementById('compareButtonContainer');
         if (file1 && file2) {
@@ -222,50 +257,67 @@
             container.innerHTML = '';
         }
     }
-
     async function processImages() {
         if (!file1 || !file2) {
             alert('Please select two images first!');
             return;
         }
-
         const formData = new FormData();
         formData.append('image1', file1);
         formData.append('image2', file2);
-
         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 {
             const response = await fetch('/process', {
                 method: 'POST',
                 body: formData
             });
-
             if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
             const data = await response.json();
-
             if (data.distance !== undefined) {
-                resultsDiv.innerHTML = `
-                    <div class="card mt-3 p-4 text-center">
-                        <h4>Euclidean Distance</h4>
-                        <p class="display-6">${data.distance.toFixed(4)}</p>
-                    </div>`;
-            } else {
-                throw new Error('Invalid server response.');
-            }
-        } catch (error) {
-            console.error('Error:', error);
-            resultsDiv.innerHTML = `
-                <div class="alert alert-danger" role="alert">
-                    ${error.message}
-                </div>`;
-        }
-    }
+//insertion de la jauge
+              const euclid = data.distance;
+               document.getElementById('euclidVal').textContent = euclid.toFixed(2);
+              
+               let height = 0, color = '#ccc';
+              
+               if (euclid > 60) {
+                   height = 0; color = '#198754'; // green
+               } else if (euclid > 55) {
+                   height = 16.66; color = '#0d6efd'; // blue
+               } else if (euclid > 50) {
+                   height = 33.33; color = '#0dcaf0'; // light blue
+               } else if (euclid > 40) {
+                   height = 50; color = '#ffc107'; // yellow
+               } else if (euclid > 35) {
+                   height = 66.66; color = '#fd7e14'; // orange
+               } else {
+                   height = 83.33; color = '#dc3545'; // red
+               }
+              
+               document.getElementById('jaugeLevel').style.height = height + '%';
+              document.getElementById('jaugeLevel').style.backgroundColor = color;
+//fin d'insertion de la jauge
+               resultsDiv.innerHTML = `
+                     <div class="card mt-3 p-4 text-center">
+                         <h4>Euclidean Distance</h4>
+                         <p class="display-6">${data.distance.toFixed(4)}</p>
+                     </div>`;
+             } else {
+                 throw new Error('Invalid server response.');
+             }
+         } catch (error) {
+             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>