Spaces:

Brightsun10
/

image-classifier

Sleeping

App Files Files Community

Brightsun10 commited on Jun 22, 2025

Commit

98cebf7

verified ·

1 Parent(s): ebf0780

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +135 -76

static/index.html CHANGED Viewed

@@ -1,111 +1,170 @@
 <!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>

 <!DOCTYPE html>
+<html lang="en" data-bs-theme="light">
 <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.dark-mode {
+      background-color: #121212;
+      color: white;
     }
+    .drop-zone {
+      border: 2px dashed #6c757d;
+      padding: 30px;
       text-align: center;
+      cursor: pointer;
+      border-radius: 8px;
+      background-color: #f8f9fa;
     }
+    .drop-zone.dark-mode {
+      background-color: #1e1e1e;
+      border-color: #aaa;
     }
   </style>
 </head>
+<body class="bg-light">
   <div class="container py-5">
+    <div class="d-flex justify-content-between align-items-center mb-4">
+      <h2 class="text-center flex-grow-1">Upload Images for Classification</h2>
+      <button class="btn btn-outline-secondary ms-3" id="toggleMode">Toggle Dark Mode</button>
     </div>
+    <div class="drop-zone" id="dropZone">
+      Drag & Drop Images Here or Click to Upload
+      <input type="file" id="imageInput" class="form-control d-none" accept="image/*" multiple>
+    </div>
+    <form id="uploadForm" class="mt-3">
+      <button type="submit" class="btn btn-primary">Predict</button>
+    </form>
+    <div id="result" class="alert d-none mt-3"></div>
+    <div id="previewContainer" class="row mt-4"></div>
+    <canvas id="historyChart" class="mt-5 w-100"></canvas>
   </div>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <script>
     const form = document.getElementById('uploadForm');
     const imageInput = document.getElementById('imageInput');
     const result = document.getElementById('result');
+    const previewContainer = document.getElementById('previewContainer');
+    const dropZone = document.getElementById('dropZone');
+    const toggleModeBtn = document.getElementById('toggleMode');
+    const chartCanvas = document.getElementById('historyChart');
+    let chart;
+    let history = [];
+    toggleModeBtn.addEventListener('click', () => {
+      document.body.classList.toggle('dark-mode');
+      dropZone.classList.toggle('dark-mode');
+      document.documentElement.setAttribute("data-bs-theme",
+        document.body.classList.contains('dark-mode') ? "dark" : "light");
+    });
+    dropZone.addEventListener('click', () => imageInput.click());
+    dropZone.addEventListener('dragover', e => {
+      e.preventDefault();
+      dropZone.classList.add('border-primary');
+    });
+    dropZone.addEventListener('dragleave', () => dropZone.classList.remove('border-primary'));
+    dropZone.addEventListener('drop', e => {
       e.preventDefault();
+      dropZone.classList.remove('border-primary');
+      imageInput.files = e.dataTransfer.files;
+      showPreviews(imageInput.files);
+    });
+    imageInput.addEventListener('change', () => showPreviews(imageInput.files));
+    function showPreviews(files) {
+      previewContainer.innerHTML = '';
+      for (const file of files) {
+        const reader = new FileReader();
+        reader.onload = e => {
+          const img = document.createElement('img');
+          img.src = e.target.result;
+          img.classList.add('img-thumbnail', 'col-md-3', 'm-2');
+          previewContainer.appendChild(img);
+        };
+        reader.readAsDataURL(file);
+      }
+    }
+    form.addEventListener('submit', async e => {
+      e.preventDefault();
+      const files = imageInput.files;
+      if (!files.length) return;
       result.classList.add('d-none');
+      result.classList.remove('alert-success', 'alert-danger');
+      previewContainer.innerHTML += `<p class="text-muted">Predicting...</p>`;
+      for (const file of files) {
+        const formData = new FormData();
+        formData.append('file', file);
+        try {
+          const response = await fetch('http://127.0.0.1:8000/predict', {
+            method: 'POST',
+            body: formData
+          });
+          const data = await response.json();
+          const label = data.prediction || 'Error';
+          history.push(label);
+          const para = document.createElement('p');
+          para.textContent = `${file.name}: ${label}`;
+          previewContainer.appendChild(para);
+        } catch (err) {
+          const para = document.createElement('p');
+          para.textContent = `${file.name}: Error predicting`;
+          previewContainer.appendChild(para);
         }
       }
+      updateChart();
+      result.classList.add('alert', 'alert-success');
+      result.textContent = 'Predictions completed.';
+      result.classList.remove('d-none');
     });
+    function updateChart() {
+      const counts = {};
+      history.forEach(label => counts[label] = (counts[label] || 0) + 1);
+      const labels = Object.keys(counts);
+      const values = Object.values(counts);
+      if (chart) chart.destroy();
+      chart = new Chart(chartCanvas, {
+        type: 'bar',
+        data: {
+          labels,
+          datasets: [{
+            label: 'Prediction Count',
+            data: values,
+            backgroundColor: 'rgba(54, 162, 235, 0.6)'
+          }]
+        },
+        options: {
+          responsive: true,
+          plugins: {
+            legend: { display: false },
+            title: {
+              display: true,
+              text: 'Prediction Analytics'
+            }
+          }
+        }
+      });
+    }
   </script>
 </body>
 </html>