test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Cow Breed Classifier</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; }
    .preview { margin-top: 20px; }
    img { max-width: 300px; margin-top: 10px; }
    .result { margin-top: 20px; font-size: 18px; font-weight: bold; }
  </style>
</head>
<body>
  <h1>Cow Breed Classifier</h1>
  <form id="uploadForm">
    <input type="file" name="image" id="imageInput" accept="image/*" required>
    <button type="submit">Upload & Predict</button>
  </form>

  <div class="preview">
    <p>Selected Image:</p>
    <img id="previewImg" src="" alt="Preview">
  </div>

  <div class="result" id="result"></div>

  <script>
    const form = document.getElementById("uploadForm");
    const imageInput = document.getElementById("imageInput");
    const previewImg = document.getElementById("previewImg");
    const resultDiv = document.getElementById("result");

    imageInput.addEventListener("change", () => {
      const file = imageInput.files[0];
      if (file) {
        previewImg.src = URL.createObjectURL(file);
      }
    });

    form.addEventListener("submit", async (e) => {
      e.preventDefault();
      const file = imageInput.files[0];
      if (!file) {
        alert("Please select an image first!");
        return;
      }

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

      try {
        const response = await fetch("/predict", { method: "POST", body: formData });
        const data = await response.json();
        if (data.error) {
          resultDiv.textContent = "Error: " + data.error;
        } else {
          resultDiv.textContent = `Prediction: ${data.label} (Confidence: ${(data.confidence * 100).toFixed(2)}%)`;
        }
      } catch (err) {
        resultDiv.textContent = "Request failed: " + err;
      }
    });
  </script>
</body>
</html>