Update styling

web/static/script.js

@@ -10,7 +10,8 @@ document.addEventListener("DOMContentLoaded", () => {
 
     const imageElement = document.createElement("img");
     imageElement.src = "static/loading.gif";
-    imageElement.style.height = "100px";
+    imageElement.style.height = "50";
+    imageElement.style.width = "50";
     predictedImagesContainer.appendChild(imageElement);
 
     const selectedFeature = featureSelect.value;

web/static/styles.css

@@ -37,7 +37,7 @@ body {
   display: block;
   justify-content: center;
   align-items: center;
-  margin: 20px auto; /* Auto margins for horizontal centering */
+  margin: auto; /* Auto margins for horizontal centering */
 }
 
 
@@ -50,10 +50,13 @@ body {
 
 /* The container for the predicted images */
 #predicted-images {
+  margin: auto;
   display: grid;
   row-gap: 1%;
   column-gap: 1%;
   width: 95%;
+  justify-content: center;
+  align-items: center;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, fr);
   position: relative; /* Set the container as a relative positioning context */
@@ -61,7 +64,8 @@ body {
 
 /* The predicted image */
 #predicted-images img {
-  width: 90%; 
+  margin: auto;
+  width: 95%; 
   height: auto;
   display: block; 
   align-items: center;

web/templates/index.html

@@ -19,7 +19,6 @@
   <img id="uploaded-image" src="#" alt="Uploaded Image" />
 
   <div class="feature-select">
-    <label for="feature">This is a picture of a...</label>
     <select name="feature" id="feature-select">
       <option value="flower">flower</option>
       <option value="leaf">leaf</option>