Spaces:

Brightsun10
/

image-classifier

Sleeping

App Files Files Community

Brightsun10 commited on Jun 22, 2025

Commit

ebf0780

verified ·

1 Parent(s): 674e4a8

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +111 -66

static/index.html CHANGED Viewed

@@ -1,66 +1,111 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>AI Image Classifier</title>
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-</head>
-<body class="bg-light">
-  <div class="container py-5">
-    <h2 class="text-center mb-4">Upload an Image for Classification</h2>
-    <form id="uploadForm" class="mb-4">
-      <div class="mb-3">
-        <input type="file" id="imageInput" class="form-control" accept="image/*" required>
-      </div>
-      <button type="submit" class="btn btn-primary">Predict</button>
-    </form>
-    <div id="result" class="alert d-none"></div>
-    <img id="preview" src="" class="img-fluid mt-4 d-none" alt="Preview">
-  </div>
-  <script>
-    const form = document.getElementById('uploadForm');
-    const imageInput = document.getElementById('imageInput');
-    const result = document.getElementById('result');
-    const preview = document.getElementById('preview');
-    form.addEventListener('submit', async (e) => {
-      e.preventDefault();
-      const file = imageInput.files[0];
-      if (!file) return;
-      const formData = new FormData();
-      formData.append('file', file);
-      // Show image preview
-      const reader = new FileReader();
-      reader.onload = () => {
-        preview.src = reader.result;
-        preview.classList.remove('d-none');
-      };
-      reader.readAsDataURL(file);
-      result.classList.add('d-none');
-      result.classList.remove('alert-success', 'alert-danger');
-      try {
-        const response = await fetch('http://127.0.0.1:8000/predict', {
-          method: 'POST',
-          body: formData
-        });
-        const data = await response.json();
-        result.textContent = `Prediction: ${data.prediction}`;
-        result.classList.add('alert', 'alert-success');
-        result.classList.remove('d-none');
-      } catch (err) {
-        result.textContent = 'Error occurred while predicting';
-        result.classList.add('alert', 'alert-danger');
-        result.classList.remove('d-none');
-      }
-    });
-  </script>
-</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>AI Image Classifier</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
+  <style>
+    body {
+      background: #f8f9fa;
+    }
+    .preview-box {
+      border: 1px dashed #6c757d;
+      border-radius: 10px;
+      padding: 1rem;
+      text-align: center;
+    }
+    #preview {
+      max-height: 300px;
+    }
+  </style>
+</head>
+<body>
+  <div class="container py-5">
+    <h1 class="text-center text-primary mb-4">🧠 AI Image Classifier</h1>
+    <div class="card shadow-lg">
+      <div class="card-body">
+        <form id="uploadForm">
+          <div class="mb-3">
+            <label for="imageInput" class="form-label">Choose an Image</label>
+            <input type="file" class="form-control" id="imageInput" accept="image/*" required />
+          </div>
+          <div class="text-center">
+            <button type="submit" class="btn btn-primary px-4">Predict</button>
+          </div>
+        </form>
+        <div class="preview-box mt-4 d-none" id="previewContainer">
+          <p class="text-muted mb-2">Image Preview</p>
+          <img id="preview" src="#" class="img-fluid rounded" alt="Image Preview"/>
+        </div>
+        <div id="loader" class="text-center mt-4 d-none">
+          <div class="spinner-border text-primary" role="status"></div>
+          <p class="text-muted mt-2">Processing...</p>
+        </div>
+        <div id="result" class="alert d-none mt-4"></div>
+      </div>
+    </div>
+  </div>
+  <script>
+    const form = document.getElementById('uploadForm');
+    const imageInput = document.getElementById('imageInput');
+    const preview = document.getElementById('preview');
+    const previewContainer = document.getElementById('previewContainer');
+    const result = document.getElementById('result');
+    const loader = document.getElementById('loader');
+    form.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const file = imageInput.files[0];
+      if (!file) return;
+      // Show image preview
+      const reader = new FileReader();
+      reader.onload = () => {
+        preview.src = reader.result;
+        previewContainer.classList.remove('d-none');
+      };
+      reader.readAsDataURL(file);
+      // UI state: show loader, hide result
+      loader.classList.remove('d-none');
+      result.classList.add('d-none');
+      const formData = new FormData();
+      formData.append('file', file);
+      try {
+        const response = await fetch('/predict', {
+          method: 'POST',
+          body: formData
+        });
+        const data = await response.json();
+        loader.classList.add('d-none');
+        if (data.prediction) {
+          result.textContent = `🔍 Prediction: ${data.prediction}`;
+          result.className = 'alert alert-success mt-4';
+        } else {
+          result.textContent = '⚠️ No prediction returned.';
+          result.className = 'alert alert-warning mt-4';
+        }
+        result.classList.remove('d-none');
+      } catch (err) {
+        loader.classList.add('d-none');
+        result.textContent = '❌ Error during prediction.';
+        result.className = 'alert alert-danger mt-4';
+        result.classList.remove('d-none');
+      }
+    });
+  </script>
+</body>
+</html>