From 971827eb6631cfbf683038ecda908689b5aae32c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sviatoslav=20K=C3=B6nig?= <reveni324@gmail.com>
Date: Thu, 22 Aug 2024 00:04:24 +0300
Subject: [PATCH] feat: add image search results handling and display on the
 page

Added functionality to handle the response from the server after an image search. The JavaScript code:
- Sends the uploaded image to the server via a POST request.
- Receives the list of similar images' URLs from the server.
- Dynamically updates the web page to display both the uploaded image and the similar images retrieved from the server.
- Handles cases where no similar images are found and informs the user accordingly.
---
 static/scripts.js | 85 ++++++++++++++++++++++++-----------------------
 1 file changed, 44 insertions(+), 41 deletions(-)

diff --git a/static/scripts.js b/static/scripts.js
index 386c1d1..62f6bfc 100644
--- a/static/scripts.js
+++ b/static/scripts.js
@@ -1,50 +1,53 @@
-document.getElementById('upload-form').addEventListener('submit', async function(event) {
-  event.preventDefault();
-
-  const input = document.getElementById('file-input');
-  const file = input.files[0];
+document.addEventListener('DOMContentLoaded', function() {
+  const form = document.getElementById('upload-form');
+  const fileInput = document.getElementById('file-input');
   const loadingElement = document.getElementById('loading');
-  const formData = new FormData();
-  formData.append('file', file);
-
-  console.log("Uploading file...");
-  loadingElement.style.display = 'block';
+  const resultsDiv = document.getElementById('results');
 
-  try {
-    const response = await fetch('/upload/', {
-      method: 'POST',
-      body: formData
-    });
+  form.addEventListener('submit', async function(event) {
+    event.preventDefault();
+    const file = fileInput.files[0];
+    const formData = new FormData();
+    formData.append('file', file);
+    loadingElement.style.display = 'block';
 
-    const data = await response.json();
-    console.log("File uploaded. Data received: ", data);
-    displayResults(data);
-  } catch (error) {
-    console.error("Error uploading file: ", error);
-  } finally {
-    loadingElement.style.display = 'none';
-  }
-});
+    try {
+      const response = await fetch('/find_similar/', {
+        method: 'POST',
+        body: formData
+      });
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+      const data = await response.json();
+      displayResults(data);
+    } catch (error) {
+      console.error("Error uploading file: ", error);
+    } finally {
+      loadingElement.style.display = 'none';
+    }
+  });
 
-function displayResults(data) {
-  console.log("Displaying results...");
-  const resultsDiv = document.getElementById('results');
-  resultsDiv.innerHTML = `
+  function displayResults(data) {
+    resultsDiv.innerHTML = `
       <h3>Uploaded Image:</h3>
       <div class="image-container">
-          <img src="/uploads/${data.filename}.jpg" alt="Uploaded Image" class="uploaded-image"/>
+          <img src="/uploads/${encodeURIComponent(data.filename)}" alt="Uploaded Image" class="uploaded-image"/>
       </div>
       <h3>Similar Images:</h3>
       <div class="similar-images-grid"></div>
-  `;
-
-  const grid = resultsDiv.querySelector('.similar-images-grid');
-  data.similar_images.forEach(image_url => {
-    console.log("Adding similar image: ", image_url);
-    const imgElement = document.createElement('img');
-    imgElement.src = image_url;
-    imgElement.alt = "Similar Image";
-    imgElement.classList.add('similar-image');
-    grid.appendChild(imgElement);
-  });
-}
+    `;
+    const grid = resultsDiv.querySelector('.similar-images-grid');
+    if (data.similar_images.length === 0) {
+      grid.innerHTML = '<p>No similar images found.</p>';
+    } else {
+      data.similar_images.forEach(function(image_url) {
+        const imgElement = document.createElement('img');
+        imgElement.src = `/uploads/${encodeURIComponent(image_url)}`;
+        imgElement.alt = "Similar Image";
+        imgElement.classList.add('similar-image');
+        grid.appendChild(imgElement);
+      });
+    }
+  }
+});