ui: add style and loading

templates/index.html

@@ -27,12 +27,14 @@
     </form>
     <h2>Generated Caption:</h2>
     <p id="caption">No caption generated yet.</p>
+    <p id="loading">Generating caption... Please wait.</p>
     <img id="uploadedImage" src="/static/placeholder.jpg" alt="Uploaded Image" />
 
     <script>
       const form = document.getElementById("uploadForm");
       const captionElement = document.getElementById("caption");
       const uploadedImage = document.getElementById("uploadedImage");
+      const loadingElement = document.getElementById("loading");
 
       form.addEventListener("submit", async (event) => {
         event.preventDefault();
@@ -50,15 +52,91 @@
         };
         reader.readAsDataURL(file);
 
-        // Send the file to the server
-        const response = await fetch("/upload/", {
-          method: "POST",
-          body: formData,
-        });
+        // Show loading animation and clear previous caption
+        captionElement.textContent = "";
+        loadingElement.style.display = "block";
 
-        const result = await response.json();
-        captionElement.textContent = result.caption;
+        // Send the file to the server
+        try {
+          const response = await fetch("/upload/", {
+            method: "POST",
+            body: formData,
+          });
+
+          const result = await response.json();
+          captionElement.textContent = result.caption;
+        } catch (error) {
+          captionElement.textContent = "Error generating caption. Please try again.";
+        } finally {
+          // Hide loading animation
+          loadingElement.style.display = "none";
+        }
       });
     </script>
   </body>
+
+  <style>
+    body {
+      font-family: "Noto Sans JP", Arial, sans-serif; /* Japanese font with fallback */
+      background-color: #f8f8f8; /* Light, subtle background */
+      color: #333; /* Dark gray text for better readability */
+      max-width: 800px; /* Slightly wider for a balanced look */
+      margin: 20px auto;
+      padding: 20px;
+      text-align: center;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for elevation */
+      border-radius: 10px; /* Smooth rounded corners */
+    }
+    h1 {
+      font-size: 2.5em;
+      color: #2c3e50; /* Deep blue-gray for a strong title */
+      margin-bottom: 20px;
+    }
+    h2 {
+      font-size: 1.5em;
+      color: #34495e; /* Slightly lighter gray-blue for subtitles */
+      margin-top: 30px;
+    }
+    p {
+      font-size: 1em;
+      line-height: 1.6;
+    }
+    form {
+      margin-top: 20px;
+      margin-bottom: 30px;
+    }
+    input[type="file"] {
+      padding: 10px;
+      font-size: 1em;
+      border: 1px solid #ccc;
+      border-radius: 5px;
+      background-color: #fff;
+      cursor: pointer;
+    }
+    button {
+      margin-top: 15px;
+      padding: 10px 20px;
+      font-size: 1em;
+      color: #fff;
+      background-color: #e74c3c; /* Bright red for a striking button */
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+      transition: background-color 0.3s;
+    }
+    button:hover {
+      background-color: #c0392b; /* Darker red on hover */
+    }
+    img {
+      max-width: 100%;
+      margin: 20px 0;
+      border: 1px solid #ddd; /* Subtle border around images */
+      border-radius: 5px;
+    }
+    #loading {
+      display: none;
+      font-size: 16px;
+      color: #007bff;
+    }
+  </style>
 </html>