<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Image Caption Generator</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
        text-align: center;
      }
      img {
        max-width: 100%;
        margin: 20px 0;
      }
    </style>
  </head>
  <body>
    <div id="title-section">
      <img src="static/baby-dance.gif" />
      <h1>Image Caption Generator</h1>
      <img src="static/baby-dance.gif" />
    </div>
    <form id="uploadForm">
      <label for="file">Upload an image:</label>
      <input type="file" id="file" name="file" accept="image/*" required />
      <button type="submit">Generate Caption</button>
    </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();
        const fileInput = document.getElementById("file");
        const file = fileInput.files[0];
        if (!file) return;

        const formData = new FormData();
        formData.append("file", file);

        // Update the displayed image
        const reader = new FileReader();
        reader.onload = (e) => {
          uploadedImage.src = e.target.result;
        };
        reader.readAsDataURL(file);

        // Show loading animation and clear previous caption
        captionElement.textContent = "";
        loadingElement.style.display = "block";

        // 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;
    }

    #title-section {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px; /* Space between title and GIF */
      margin-bottom: 20px;
    }
    #title-section img {
      width: 75px;
      height: 75px;
      border-radius: 50%;
    }
  </style>
</html>
