<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Image Classifier Capstone</title>
  <link rel="stylesheet" href="/static/style.css" />
</head>
<body>
  <div class="container">
    <header>
      <h1>Image Classifier</h1>
      <p>Upload an image and see what the model predicts.</p>
    </header>

    <form id="upload-form" enctype="multipart/form-data">
      <label for="image" class="file-label">Choose an image</label>
      <input id="image" type="file" name="image" accept="image/*" required />
      <button type="submit">Predict</button>
    </form>

    <div id="result" class="result hidden">
      <img id="preview" src="" alt="Uploaded image" />
      <ul id="predictions"></ul>
    </div>
  </div>

  <script>
    const form = document.getElementById('upload-form');
    const result = document.getElementById('result');
    const preview = document.getElementById('preview');
    const predictionsList = document.getElementById('predictions');

    form.addEventListener('submit', async (e) => {
      e.preventDefault();
      const formData = new FormData(form);

      const res = await fetch('/predict', { method: 'POST', body: formData });
      const data = await res.json();

      preview.src = data.image_url;
      predictionsList.innerHTML = '';
      data.predictions.forEach(p => {
        const li = document.createElement('li');
        li.textContent = p.class + ' — ' + (p.confidence * 100).toFixed(1) + '%';
        predictionsList.appendChild(li);
      });

      result.classList.remove('hidden');
    });
  </script>
</body>
</html>