Spaces:

Terence9
/

Waste_Classification

Sleeping

App Files Files Community

Terence9 commited on Jun 13, 2025

Commit

0cb76d7

verified ·

1 Parent(s): 1489cbf

Create templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +491 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,491 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Waste Classification AI</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/tsparticles@3.3.0/tsparticles.bundle.min.js"></script>
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+            background: linear-gradient(135deg, #f6f8fc 0%, #e9f0f7 100%);
+        }
+        .drop-zone {
+            border: 2px dashed #cbd5e0;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            background: rgba(255, 255, 255, 0.8);
+            backdrop-filter: blur(8px);
+        }
+        .drop-zone:hover {
+            border-color: #4299e1;
+            background: rgba(255, 255, 255, 0.95);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+        }
+        .loading {
+            display: none;
+        }
+        .loading.active {
+            display: flex;
+        }
+        .result-card {
+            transition: all 0.3s ease;
+            transform: translateY(0);
+        }
+        .result-card.show {
+            transform: translateY(0);
+            opacity: 1;
+        }
+        .upload-icon {
+            transition: all 0.3s ease;
+        }
+        .drop-zone:hover .upload-icon {
+            transform: scale(1.1);
+            color: #4299e1;
+        }
+        .prediction-badge {
+            transition: all 0.3s ease;
+        }
+        .prediction-badge:hover {
+            transform: scale(1.05);
+        }
+        @keyframes float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+            100% { transform: translateY(0px); }
+        }
+        .floating {
+            animation: float 3s ease-in-out infinite;
+        }
+        .image-preview {
+            max-width: 100%;
+            max-height: 300px;
+            object-fit: contain;
+            border-radius: 0.5rem;
+            display: none;
+        }
+        .image-preview.show {
+            display: block;
+        }
+        .preview-container {
+            display: none;
+            margin-bottom: 1rem;
+        }
+        .preview-container.show {
+            display: block;
+        }
+    </style>
+</head>
+<body class="min-h-screen relative">
+    <!-- Particle Animation Background -->
+    <div id="tsparticles" style="position:fixed; inset:0; z-index:0;"></div>
+    <div class="container mx-auto px-4 py-12 2xl:max-w-screen-2xl">
+        <div class="mx-auto max-w-5xl">
+            <!-- Header Section -->
+            <div class="flex flex-col items-center justify-center mb-12 pt-8 pb-6">
+                <h1 class="text-5xl md:text-6xl font-extrabold tracking-tight text-gray-900 text-center leading-tight">
+                    Waste Classification AI
+                </h1>
+                <div class="w-24 h-1 mt-4 mb-2 rounded-full bg-gradient-to-r from-blue-400 via-green-400 to-blue-400"></div>
+                <p class="text-xl text-gray-600 text-center mt-2">Upload an image to classify waste as dry or wet</p>
+            </div>
+            <!-- Main Card -->
+            <div class="bg-white rounded-3xl shadow-2xl p-12 backdrop-blur-lg bg-opacity-90">
+                <!-- Image Preview -->
+                <div id="preview-container" class="preview-container">
+                    <div class="relative">
+                        <img id="image-preview" class="image-preview mx-auto" src="" alt="Preview">
+                        <button id="remove-image" class="absolute top-2 right-2 bg-red-500 text-white rounded-full p-2 hover:bg-red-600 transition-colors">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+                <!-- Upload Zone -->
+                <div id="drop-zone" class="drop-zone rounded-xl p-12 text-center cursor-pointer mb-8">
+                    <div class="space-y-6">
+                        <div class="upload-icon floating">
+                            <svg class="mx-auto h-16 w-16 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
+                                <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+                        </div>
+                        <div class="text-gray-600">
+                            <p class="text-xl font-medium mb-2">Drag and drop your image here</p>
+                            <p class="text-sm text-gray-500 mb-4">or</p>
+                            <button class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-all transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 mr-2" onclick="fileInput.click()">
+                                Browse Files
+                            </button>
+                            <button id="camera-btn" class="px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-all transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">
+                                Use Camera
+                            </button>
+                        </div>
+                    </div>
+                    <input type="file" id="file-input" class="hidden" accept="image/*">
+                </div>
+                <!-- Webcam Modal -->
+                <div id="camera-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-60 hidden">
+                    <div class="bg-white rounded-2xl shadow-2xl p-8 flex flex-col items-center relative w-full max-w-md mx-auto">
+                        <button id="close-camera" class="absolute top-4 right-4 text-gray-400 hover:text-red-500 text-2xl">&times;</button>
+                        <video id="webcam" autoplay playsinline class="rounded-lg border border-gray-200 mb-4 w-full max-w-xs"></video>
+                        <canvas id="webcam-canvas" class="hidden"></canvas>
+                        <button id="capture-btn" class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-all mt-2">Capture</button>
+                    </div>
+                </div>
+                <!-- Loading Animation -->
+                <div id="loading" class="loading items-center justify-center space-x-3 py-8">
+                    <div class="w-4 h-4 bg-blue-500 rounded-full animate-bounce"></div>
+                    <div class="w-4 h-4 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
+                    <div class="w-4 h-4 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.4s"></div>
+                </div>
+                <!-- Result Section -->
+                <div id="result" class="result-card opacity-0 transform translate-y-4 hidden">
+                    <div class="p-6 rounded-xl bg-gradient-to-r from-blue-50 to-green-50">
+                        <h2 class="text-2xl font-semibold mb-4 text-gray-800">Classification Result</h2>
+                        <div class="prediction-badge inline-block px-6 py-3 rounded-full text-lg font-medium" id="prediction-text"></div>
+                    </div>
+                </div>
+                <!-- Error Section -->
+                <div id="error" class="hidden">
+                    <div class="p-6 rounded-xl bg-red-50 border border-red-100">
+                        <div class="flex items-center">
+                            <svg class="h-6 w-6 text-red-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                            </svg>
+                            <p id="error-text" class="text-red-700"></p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- History Section -->
+            <div class="mt-16">
+                <div class="flex justify-between items-center mb-6">
+                    <h2 class="text-2xl font-bold text-gray-800">Recent Predictions</h2>
+                    <div class="flex gap-2">
+                        <button class="filter-btn px-4 py-2 rounded-full text-sm font-medium bg-gray-100 text-gray-700 hover:bg-blue-100 hover:text-blue-700 transition-colors active flex items-center gap-2" data-filter="all">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="currentColor"/><path d="M8 12h8" stroke="currentColor" stroke-linecap="round"/></svg>
+                            All
+                        </button>
+                        <button class="filter-btn px-4 py-2 rounded-full text-sm font-medium bg-green-100 text-green-800 hover:bg-green-200 transition-colors flex items-center gap-2" data-filter="Dry Waste">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="4" stroke="#22c55e"/><path d="M8 12h8" stroke="#22c55e" stroke-linecap="round"/></svg>
+                            Dry Waste
+                        </button>
+                        <button class="filter-btn px-4 py-2 rounded-full text-sm font-medium bg-blue-100 text-blue-800 hover:bg-blue-200 transition-colors flex items-center gap-2" data-filter="Wet Waste">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><ellipse cx="12" cy="12" rx="8" ry="10" stroke="#2563eb"/><path d="M8 12h8" stroke="#2563eb" stroke-linecap="round"/></svg>
+                            Wet Waste
+                        </button>
+                    </div>
+                    <button id="clear-history" class="px-4 py-2 text-sm text-red-600 hover:text-red-700 transition-colors">
+                        Clear History
+                    </button>
+                </div>
+                <div id="history-container" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-8">
+                    {% for item in history %}
+                    <div class="history-card bg-white border border-gray-100 rounded-2xl shadow-lg overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl group opacity-100 scale-100" data-prediction="{{ item.prediction }}">
+                        <div class="p-0 flex flex-col items-center">
+                            <div class="w-full h-56 bg-gray-50 flex items-center justify-center overflow-hidden rounded-t-2xl relative">
+                                <img src="data:image/jpeg;base64,{{ item.image }}"
+                                     alt="Prediction"
+                                     class="object-cover w-full h-full transition-transform duration-300 group-hover:scale-110"
+                                     onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2YzZjRmNiIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTYiIGZpbGw9IiM5Y2EzYWYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj5JbWFnZSBsb2FkIGVycm9yPC90ZXh0Pjwvc3ZnPg=='">
+                            </div>
+                            <div class="flex flex-col items-center w-full p-4">
+                                <span class="prediction-badge px-5 py-2 mb-2 rounded-full text-base font-semibold shadow-sm transition-all duration-300
+                                    {% if item.prediction == 'Dry Waste' %}
+                                        bg-green-100 text-green-800 border border-green-200
+                                    {% else %}
+                                        bg-blue-100 text-blue-800 border border-blue-200
+                                    {% endif %}">
+                                    {{ item.prediction }}
+                                </span>
+                                <span class="history-date block text-xs text-gray-400 mt-1" data-date="{{ item.timestamp }}">{{ item.timestamp }}</span>
+                            </div>
+                        </div>
+                    </div>
+                    {% endfor %}
+                </div>
+                {% if not history %}
+                <div class="text-center py-8 text-gray-500">
+                    <p>No predictions yet. Upload an image to get started!</p>
+                </div>
+                {% endif %}
+                <!-- Info Section: Now directly below history -->
+                <div class="mt-10 text-center text-gray-500">
+                    <p class="text-sm">Supported formats: <span class="font-medium text-gray-700">PNG, JPG, JPEG</span></p>
+                    <p class="text-sm mt-1">Maximum file size: <span class="font-medium text-gray-700">16MB</span></p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        const dropZone = document.getElementById('drop-zone');
+        const fileInput = document.getElementById('file-input');
+        const loading = document.getElementById('loading');
+        const result = document.getElementById('result');
+        const predictionText = document.getElementById('prediction-text');
+        const error = document.getElementById('error');
+        const errorText = document.getElementById('error-text');
+        const imagePreview = document.getElementById('image-preview');
+        const previewContainer = document.getElementById('preview-container');
+        const removeImage = document.getElementById('remove-image');
+        // Handle drag and drop
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            dropZone.addEventListener(eventName, preventDefaults, false);
+        });
+        function preventDefaults(e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        ['dragenter', 'dragover'].forEach(eventName => {
+            dropZone.addEventListener(eventName, highlight, false);
+        });
+        ['dragleave', 'drop'].forEach(eventName => {
+            dropZone.addEventListener(eventName, unhighlight, false);
+        });
+        function highlight(e) {
+            dropZone.classList.add('border-blue-500', 'bg-blue-50');
+        }
+        function unhighlight(e) {
+            dropZone.classList.remove('border-blue-500', 'bg-blue-50');
+        }
+        dropZone.addEventListener('drop', handleDrop, false);
+        dropZone.addEventListener('click', () => fileInput.click());
+        fileInput.addEventListener('change', handleFileSelect);
+        removeImage.addEventListener('click', resetUpload);
+        function handleDrop(e) {
+            const dt = e.dataTransfer;
+            const files = dt.files;
+            handleFiles(files);
+        }
+        function handleFileSelect(e) {
+            const files = e.target.files;
+            handleFiles(files);
+        }
+        function handleFiles(files) {
+            if (files.length > 0) {
+                const file = files[0];
+                if (file.type.startsWith('image/')) {
+                    showImagePreview(file);
+                    uploadFile(file);
+                } else {
+                    showError('Please upload an image file (PNG, JPG, or JPEG)');
+                }
+            }
+        }
+        function showImagePreview(file) {
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                imagePreview.src = e.target.result;
+                imagePreview.classList.add('show');
+                previewContainer.classList.add('show');
+                dropZone.style.display = 'none';
+            }
+            reader.readAsDataURL(file);
+        }
+        function resetUpload() {
+            imagePreview.src = '';
+            imagePreview.classList.remove('show');
+            previewContainer.classList.remove('show');
+            dropZone.style.display = 'block';
+            result.classList.add('hidden');
+            error.classList.add('hidden');
+            fileInput.value = '';
+        }
+        function uploadFile(file) {
+            const formData = new FormData();
+            formData.append('file', file);
+            loading.classList.add('active');
+            result.classList.add('hidden');
+            error.classList.add('hidden');
+            fetch('/predict', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => response.json())
+            .then(data => {
+                loading.classList.remove('active');
+                if (data.error) {
+                    showError(data.error);
+                } else {
+                    showResult(data.prediction);
+                    setTimeout(() => { window.location.reload(); }, 1000);
+                }
+            })
+            .catch(err => {
+                loading.classList.remove('active');
+                showError('An error occurred while processing your request');
+            });
+        }
+        function showResult(prediction) {
+            result.classList.remove('hidden');
+            predictionText.textContent = prediction;
+            // Add appropriate styling based on prediction
+            if (prediction === 'Dry Waste') {
+                predictionText.className = 'prediction-badge inline-block px-6 py-3 rounded-full text-lg font-medium bg-green-100 text-green-800';
+            } else {
+                predictionText.className = 'prediction-badge inline-block px-6 py-3 rounded-full text-lg font-medium bg-blue-100 text-blue-800';
+            }
+            // Trigger animation
+            setTimeout(() => {
+                result.classList.add('show');
+            }, 50);
+        }
+        function showError(message) {
+            error.classList.remove('hidden');
+            errorText.textContent = message;
+        }
+        // Format history dates for a modern look
+        [...document.querySelectorAll('.history-date')].forEach(function(el) {
+            const raw = el.getAttribute('data-date');
+            if (raw) {
+                const d = new Date(raw.replace(' ', 'T'));
+                if (!isNaN(d)) {
+                    el.textContent = d.toLocaleString(undefined, {
+                        year: 'numeric', month: 'short', day: 'numeric',
+                        hour: '2-digit', minute: '2-digit'
+                    });
+                }
+            }
+        });
+        // Clear History
+        document.getElementById('clear-history').addEventListener('click', function() {
+            if (confirm('Are you sure you want to clear the prediction history?')) {
+                fetch('/clear-history', {
+                    method: 'POST'
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        document.getElementById('history-container').innerHTML = `
+                            <div class="text-center py-8 text-gray-500 col-span-full">
+                                <p>No predictions yet. Upload an image to get started!</p>
+                            </div>
+                        `;
+                    }
+                })
+                .catch(err => {
+                    console.error('Error clearing history:', err);
+                });
+            }
+        });
+        tsParticles.load("tsparticles", {
+          fullScreen: { enable: false },
+          background: { color: "transparent" },
+          particles: {
+            number: { value: 60, density: { enable: true, value_area: 800 } },
+            color: { value: ["#4ade80", "#60a5fa", "#facc15"] },
+            shape: { type: "circle" },
+            opacity: { value: 0.25 },
+            size: { value: 4, random: { enable: true, minimumValue: 2 } },
+            move: { enable: true, speed: 1, direction: "none", outModes: "out" }
+          },
+          interactivity: {
+            events: { onHover: { enable: true, mode: "repulse" }, resize: true },
+            modes: { repulse: { distance: 80, duration: 0.4 } }
+          }
+        });
+        // Filter functionality for history cards (wrapped in DOMContentLoaded)
+        document.addEventListener('DOMContentLoaded', function() {
+            const filterBtns = document.querySelectorAll('.filter-btn');
+            const historyCards = document.querySelectorAll('.history-card');
+            filterBtns.forEach(btn => {
+                btn.addEventListener('click', function() {
+                    filterBtns.forEach(b => b.classList.remove('active', 'bg-blue-100', 'text-blue-700'));
+                    this.classList.add('active', 'bg-blue-100', 'text-blue-700');
+                    const filter = this.getAttribute('data-filter');
+                    historyCards.forEach(card => {
+                        if (filter === 'all' || card.getAttribute('data-prediction') === filter) {
+                            card.style.display = '';
+                            card.classList.remove('opacity-0', 'scale-95');
+                            card.classList.add('opacity-100', 'scale-100');
+                        } else {
+                            card.classList.add('opacity-0', 'scale-95');
+                            setTimeout(() => { card.style.display = 'none'; }, 200);
+                        }
+                    });
+                });
+            });
+        });
+        // Webcam detection logic
+        const cameraBtn = document.getElementById('camera-btn');
+        const cameraModal = document.getElementById('camera-modal');
+        const closeCamera = document.getElementById('close-camera');
+        const webcam = document.getElementById('webcam');
+        const webcamCanvas = document.getElementById('webcam-canvas');
+        const captureBtn = document.getElementById('capture-btn');
+        let stream = null;
+        cameraBtn.addEventListener('click', async (event) => {
+            event.stopPropagation(); // Prevents drop zone click
+            cameraModal.classList.remove('hidden');
+            try {
+                stream = await navigator.mediaDevices.getUserMedia({ video: true });
+                webcam.srcObject = stream;
+            } catch (err) {
+                alert('Could not access the camera.');
+                cameraModal.classList.add('hidden');
+            }
+        });
+        closeCamera.addEventListener('click', () => {
+            cameraModal.classList.add('hidden');
+            if (stream) {
+                stream.getTracks().forEach(track => track.stop());
+            }
+        });
+        captureBtn.addEventListener('click', () => {
+            const context = webcamCanvas.getContext('2d');
+            webcamCanvas.width = webcam.videoWidth;
+            webcamCanvas.height = webcam.videoHeight;
+            context.drawImage(webcam, 0, 0, webcam.videoWidth, webcam.videoHeight);
+            webcamCanvas.toBlob(blob => {
+                // Stop the camera
+                if (stream) {
+                    stream.getTracks().forEach(track => track.stop());
+                }
+                cameraModal.classList.add('hidden');
+                // Send the captured image as a file to the backend
+                const file = new File([blob], 'webcam.jpg', { type: 'image/jpeg' });
+                uploadFile(file);
+            }, 'image/jpeg', 0.95);
+        });
+    </script>
+</body>
+</html>