Spaces:

mi23
/

fungus-among-us-classifier

Running

App Files Files Community

mi23 commited on Sep 27, 2025

Commit

bad8b3a

verified ·

1 Parent(s): c7c0b01

website for mushroom images classification. I have backend which accept /upload, and return id of task. Then there is endpoint /status/<task_id> which shows progress, and results can be fetched at /results/<task_id>.

Browse files

Files changed (2) hide show

README.md +8 -5
index.html +391 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Fungus Among Us Classifier
-emoji: ⚡
-colorFrom: red
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Fungus Among Us Classifier  🍄
+colorFrom: gray
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,392 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fungus Among Us Classifier</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <style>
+        .dropzone {
+            border: 2px dashed #9CA3AF;
+            transition: all 0.3s ease;
+        }
+        .dropzone-active {
+            border-color: #10B981;
+            background-color: rgba(16, 185, 129, 0.05);
+        }
+        .dropzone-reject {
+            border-color: #EF4444;
+            background-color: rgba(239, 68, 68, 0.05);
+        }
+        .progress-bar {
+            transition: width 0.3s ease;
+        }
+        .result-card {
+            transition: all 0.3s ease;
+        }
+        .result-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <!-- Header -->
+        <header class="text-center mb-12">
+            <div class="flex items-center justify-center mb-4">
+                <i data-feather="moon" class="w-10 h-10 text-emerald-600 mr-3"></i>
+                <h1 class="text-4xl font-bold text-gray-800">Fungus Among Us</h1>
+            </div>
+            <p class="text-lg text-gray-600 max-w-2xl mx-auto">
+                Upload mushroom images to identify species with our AI classifier.
+                Supports common edible and poisonous varieties.
+            </p>
+        </header>
+        <!-- Main Content -->
+        <main>
+            <!-- Upload Section -->
+            <section class="mb-12">
+                <div id="dropzone" class="dropzone rounded-xl p-8 md:p-12 text-center cursor-pointer bg-white shadow-sm">
+                    <div class="max-w-md mx-auto">
+                        <i data-feather="upload-cloud" class="w-12 h-12 text-emerald-500 mx-auto mb-4"></i>
+                        <h2 class="text-xl font-semibold text-gray-800 mb-2">Upload Mushroom Image</h2>
+                        <p class="text-gray-500 mb-6">Drag & drop or click to browse (JPG, PNG up to 5MB)</p>
+                        <input type="file" id="fileInput" class="hidden" accept="image/jpeg,image/png" />
+                        <button id="uploadBtn" class="px-6 py-2 bg-emerald-500 text-white rounded-lg hover:bg-emerald-600 transition">
+                            Select File
+                        </button>
+                        <p class="text-xs text-gray-400 mt-4">We don't store your images after processing</p>
+                    </div>
+                </div>
+            </section>
+            <!-- Status Section -->
+            <section id="statusSection" class="hidden mb-12">
+                <div class="bg-white rounded-xl p-6 shadow-sm">
+                    <h2 class="text-xl font-semibold text-gray-800 mb-4">Processing</h2>
+                    <div class="flex items-center mb-4">
+                        <div class="flex-1 bg-gray-200 rounded-full h-2.5">
+                            <div id="progressBar" class="progress-bar bg-emerald-500 h-2.5 rounded-full" style="width: 0%"></div>
+                        </div>
+                        <span id="progressText" class="ml-4 text-sm font-medium text-gray-700">0%</span>
+                    </div>
+                    <div class="flex items-center">
+                        <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-emerald-500 mr-3"></div>
+                        <p id="statusMessage" class="text-gray-600">Uploading image...</p>
+                    </div>
+                </div>
+            </section>
+            <!-- Results Section -->
+            <section id="resultsSection" class="hidden">
+                <h2 class="text-2xl font-semibold text-gray-800 mb-6">Classification Results</h2>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <!-- Image Preview -->
+                    <div class="result-card bg-white rounded-xl p-4 shadow-sm">
+                        <h3 class="text-lg font-medium text-gray-800 mb-3">Your Image</h3>
+                        <div class="rounded-lg overflow-hidden bg-gray-100">
+                            <img id="previewImage" src="" alt="Uploaded mushroom" class="w-full h-64 object-contain" />
+                        </div>
+                    </div>
+                    <!-- Classification Results -->
+                    <div class="result-card bg-white rounded-xl p-4 shadow-sm">
+                        <h3 class="text-lg font-medium text-gray-800 mb-3">Prediction</h3>
+                        <div id="resultsContainer" class="space-y-4">
+                            <!-- Results will be populated here -->
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-6 text-center">
+                    <button id="newUploadBtn" class="px-6 py-2 border border-emerald-500 text-emerald-500 rounded-lg hover:bg-emerald-50 transition">
+                        <i data-feather="plus" class="w-4 h-4 inline mr-2"></i> Upload Another
+                    </button>
+                </div>
+            </section>
+            <!-- Error Section -->
+            <section id="errorSection" class="hidden">
+                <div class="bg-red-50 border-l-4 border-red-500 p-4 rounded-lg">
+                    <div class="flex">
+                        <div class="flex-shrink-0">
+                            <i data-feather="alert-triangle" class="h-5 w-5 text-red-500"></i>
+                        </div>
+                        <div class="ml-3">
+                            <h3 class="text-sm font-medium text-red-800" id="errorTitle">Error</h3>
+                            <div class="mt-2 text-sm text-red-700" id="errorMessage">
+                                <!-- Error message will be inserted here -->
+                            </div>
+                            <div class="mt-4">
+                                <button id="tryAgainBtn" class="px-4 py-1 text-sm font-medium text-red-800 hover:text-red-700">
+                                    Try Again
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </main>
+        <!-- Footer -->
+        <footer class="mt-16 text-center text-gray-500 text-sm">
+            <p>© 2023 Fungus Among Us Classifier. Not responsible for foraging decisions.</p>
+            <p class="mt-1">Always consult an expert before consuming wild mushrooms.</p>
+        </footer>
+    </div>
+    <script>
+        // Initialize feather icons
+        feather.replace();
+        // DOM Elements
+        const dropzone = document.getElementById('dropzone');
+        const fileInput = document.getElementById('fileInput');
+        const uploadBtn = document.getElementById('uploadBtn');
+        const statusSection = document.getElementById('statusSection');
+        const resultsSection = document.getElementById('resultsSection');
+        const errorSection = document.getElementById('errorSection');
+        const progressBar = document.getElementById('progressBar');
+        const progressText = document.getElementById('progressText');
+        const statusMessage = document.getElementById('statusMessage');
+        const previewImage = document.getElementById('previewImage');
+        const resultsContainer = document.getElementById('resultsContainer');
+        const newUploadBtn = document.getElementById('newUploadBtn');
+        const tryAgainBtn = document.getElementById('tryAgainBtn');
+        const errorMessage = document.getElementById('errorMessage');
+        const errorTitle = document.getElementById('errorTitle');
+        // State
+        let currentTaskId = null;
+        let statusCheckInterval = null;
+        // Event Listeners
+        uploadBtn.addEventListener('click', () => fileInput.click());
+        fileInput.addEventListener('change', handleFileSelect);
+        newUploadBtn.addEventListener('click', resetUpload);
+        tryAgainBtn.addEventListener('click', resetUpload);
+        // Drag and Drop Events
+        ['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() {
+            dropzone.classList.add('dropzone-active');
+        }
+        function unhighlight() {
+            dropzone.classList.remove('dropzone-active');
+        }
+        dropzone.addEventListener('drop', handleDrop, false);
+        function handleDrop(e) {
+            const dt = e.dataTransfer;
+            const files = dt.files;
+            if (files.length) {
+                fileInput.files = files;
+                handleFileSelect({ target: fileInput });
+            }
+        }
+        // File Handling
+        function handleFileSelect(e) {
+            const file = e.target.files[0];
+            if (!file) return;
+            // Validate file type
+            if (!file.type.match('image.*')) {
+                showError('Invalid File Type', 'Please upload an image file (JPEG or PNG)');
+                return;
+            }
+            // Validate file size (5MB max)
+            if (file.size > 5 * 1024 * 1024) {
+                showError('File Too Large', 'Maximum file size is 5MB');
+                return;
+            }
+            // Show preview
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                previewImage.src = e.target.result;
+            };
+            reader.readAsDataURL(file);
+            // Start upload process
+            startUpload(file);
+        }
+        // Upload Process
+        async function startUpload(file) {
+            try {
+                // Show status section
+                statusSection.classList.remove('hidden');
+                dropzone.classList.add('hidden');
+                updateStatus('Uploading image...', 0);
+                // Simulate upload progress (in a real app, this would be actual upload progress)
+                for (let i = 0; i <= 100; i += 10) {
+                    await new Promise(resolve => setTimeout(resolve, 300));
+                    updateStatus('Uploading image...', i);
+                }
+                // In a real app, you would send the file to your backend here
+                // const formData = new FormData();
+                // formData.append('file', file);
+                // const response = await fetch('/upload', {
+                //     method: 'POST',
+                //     body: formData
+                // });
+                // const data = await response.json();
+                // currentTaskId = data.task_id;
+                // For demo purposes, we'll simulate a task ID
+                currentTaskId = 'demo_' + Date.now();
+                // Start checking status
+                checkStatus();
+            } catch (error) {
+                showError('Upload Failed', error.message);
+            }
+        }
+        // Status Checking
+        async function checkStatus() {
+            updateStatus('Analyzing mushroom...', 30);
+            // In a real app, you would poll your backend here
+            // Example:
+            // const response = await fetch(`/status/${currentTaskId}`);
+            // const data = await response.json();
+            // For demo, we'll simulate processing
+            statusCheckInterval = setInterval(async () => {
+                try {
+                    // Simulate progress
+                    const currentProgress = parseInt(progressBar.style.width) || 30;
+                    const newProgress = Math.min(currentProgress + 10, 90);
+                    updateStatus('Analyzing mushroom...', newProgress);
+                    // Simulate completion after reaching 90%
+                    if (newProgress >= 90) {
+                        clearInterval(statusCheckInterval);
+                        await new Promise(resolve => setTimeout(resolve, 1500));
+                        updateStatus('Finalizing results...', 100);
+                        await new Promise(resolve => setTimeout(resolve, 500));
+                        showResults();
+                    }
+                } catch (error) {
+                    clearInterval(statusCheckInterval);
+                    showError('Processing Error', error.message);
+                }
+            }, 1500);
+        }
+        // Update Status UI
+        function updateStatus(message, percent) {
+            statusMessage.textContent = message;
+            progressBar.style.width = `${percent}%`;
+            progressText.textContent = `${percent}%`;
+        }
+        // Show Results
+        async function showResults() {
+            try {
+                // In a real app, you would fetch results from your backend
+                // Example:
+                // const response = await fetch(`/results/${currentTaskId}`);
+                // const results = await response.json();
+                // For demo, we'll use mock data
+                const mockResults = [
+                    { species: "Agaricus bisporus", confidence: 0.92, edible: true, description: "Common button mushroom, widely cultivated and edible." },
+                    { species: "Amanita phalloides", confidence: 0.07, edible: false, description: "Death cap, extremely poisonous." },
+                    { species: "Boletus edulis", confidence: 0.01, edible: true, description: "Porcini mushroom, prized edible species." }
+                ];
+                // Populate results
+                resultsContainer.innerHTML = '';
+                mockResults.forEach(result => {
+                    const resultItem = document.createElement('div');
+                    resultItem.className = 'p-3 rounded-lg border';
+                    resultItem.style.borderColor = result.edible ? '#D1FAE5' : '#FEE2E2';
+                    resultItem.style.backgroundColor = result.edible ? '#ECFDF5' : '#FEF2F2';
+                    const confidencePercentage = Math.round(result.confidence * 100);
+                    resultItem.innerHTML = `
+                        <div class="flex justify-between items-start mb-1">
+                            <h4 class="font-medium ${result.edible ? 'text-emerald-800' : 'text-red-800'}">
+                                ${result.species}
+                            </h4>
+                            <span class="text-xs px-2 py-1 rounded-full ${result.edible ? 'bg-emerald-100 text-emerald-800' : 'bg-red-100 text-red-800'}">
+                                ${confidencePercentage}% confidence
+                            </span>
+                        </div>
+                        <div class="w-full bg-gray-200 rounded-full h-1.5 mb-2">
+                            <div class="h-1.5 rounded-full ${result.edible ? 'bg-emerald-500' : 'bg-red-500'}" style="width: ${confidencePercentage}%"></div>
+                        </div>
+                        <p class="text-sm ${result.edible ? 'text-emerald-700' : 'text-red-700'}">
+                            <i data-feather="${result.edible ? 'check-circle' : 'alert-circle'}" class="w-4 h-4 inline mr-1"></i>
+                            ${result.edible ? 'Edible' : 'Poisonous'} - ${result.description}
+                        </p>
+                    `;
+                    resultsContainer.appendChild(resultItem);
+                });
+                // Show results section
+                statusSection.classList.add('hidden');
+                resultsSection.classList.remove('hidden');
+                // Update feather icons in new elements
+                feather.replace();
+            } catch (error) {
+                showError('Results Error', error.message);
+            }
+        }
+        // Error Handling
+        function showError(title, message) {
+            clearInterval(statusCheckInterval);
+            errorTitle.textContent = title;
+            errorMessage.textContent = message;
+            statusSection.classList.add('hidden');
+            resultsSection.classList.add('hidden');
+            errorSection.classList.remove('hidden');
+        }
+        // Reset Upload
+        function resetUpload() {
+            fileInput.value = '';
+            currentTaskId = null;
+            clearInterval(statusCheckInterval);
+            statusSection.classList.add('hidden');
+            resultsSection.classList.add('hidden');
+            errorSection.classList.add('hidden');
+            dropzone.classList.remove('hidden');
+            progressBar.style.width = '0%';
+            progressText.textContent = '0%';
+        }
+    </script>
+</body>
 </html>