Add SVM dashboard + API with model loading from HF repository

.env.example

@@ -0,0 +1,5 @@
+# Hugging Face Model Repository
+HF_MODEL_REPO=enigmaceo/svm-classification-cat-and-dog
+
+# Optional: Hugging Face Token (for private models)
+# HF_TOKEN=your_huggingface_token_here

Dockerfile

@@ -0,0 +1,22 @@
+FROM python:3.9-slim
+
+# Set working directory
+WORKDIR /app
+
+# Copy requirements first for better caching
+COPY requirements.txt .
+
+# Install dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application files
+COPY api/ ./api/
+COPY dashboard/ ./dashboard/
+COPY models/ ./models/
+COPY static/ ./static/
+
+# Expose port
+EXPOSE 7860
+
+# Run the application
+CMD ["python", "api/main.py"]

README.md

@@ -1,12 +1,31 @@
 ---
-title: Example Cat Vs Dog Classification Svm
-emoji: 📉
-colorFrom: pink
-colorTo: blue
+title: Cat vs Dog Classification SVM
+emoji: 🐱🐶
+colorFrom: blue
+colorTo: indigo
 sdk: docker
 pinned: false
 license: mit
-short_description: 'this is just example create demo of model on '
+app_port: 7860
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Cat vs Dog Classification with SVM
+
+This Hugging Face Space provides an interactive web interface for classifying cat and dog images using Support Vector Machines.
+
+## Features
+
+- **Upload & Classify**: Upload cat or dog images for instant classification
+- **Real-time Results**: Get predictions with confidence scores
+- **Feature Visualization**: See extracted features that led to classification
+
+## Model Information
+
+This application loads the trained SVM model from a separate Model Repository to demonstrate proper separation of concerns.
+
+## Technical Stack
+
+- **Backend**: FastAPI with Python
+- **Frontend**: HTML5 + Tailwind CSS
+- **Machine Learning**: scikit-learn SVM
+- **Deployment**: Docker on Hugging Face Spaces

api/main.py

@@ -0,0 +1,351 @@
+#!/usr/bin/env python3
+"""
+FastAPI Backend for SVM Iris Classification
+Provides endpoints for image upload and prediction
+"""
+
+from fastapi import FastAPI, File, UploadFile, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import HTMLResponse
+import numpy as np
+import joblib
+import json
+import os
+from typing import Dict, Any
+import cv2
+from PIL import Image
+import io
+import base64
+from huggingface_hub import hf_hub_download
+
+app = FastAPI(title="SVM Iris Classification API", version="1.0.0")
+
+# Enable CORS
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Mount static files
+app.mount("/static", StaticFiles(directory="../static"), name="static")
+
+# Global variables for models and artifacts
+model = None
+scaler = None
+label_encoder = None
+metadata = None
+
+def load_models():
+    """Load trained models and artifacts from Hugging Face Hub"""
+    global model, scaler, label_encoder, metadata
+    
+    try:
+        # Model repository configuration
+        repo_id = os.getenv("HF_MODEL_REPO", "your-username/cat-dog-svm-model")
+        
+        # Download and load best model (compressed)
+        model_path = hf_hub_download(repo_id, "svm_best_model.pkl.gz")
+        import gzip
+        import pickle
+        with gzip.open(model_path, 'rb') as f:
+            model = pickle.load(f)
+        
+        # Download and load scaler
+        scaler_path = hf_hub_download(repo_id, "scaler.pkl")
+        scaler = joblib.load(scaler_path)
+        
+        # Download and load label encoder
+        encoder_path = hf_hub_download(repo_id, "label_encoder.pkl")
+        label_encoder = joblib.load(encoder_path)
+        
+        # Download and load metadata
+        metadata_path = hf_hub_download(repo_id, "metadata.json")
+        with open(metadata_path, 'r') as f:
+            metadata = json.load(f)
+        
+        print(f"Model and artifacts loaded successfully from {repo_id}")
+        return True
+    except Exception as e:
+        print(f"Error loading models from Hugging Face: {e}")
+        print("Falling back to local files...")
+        return load_local_models()
+
+def load_local_models():
+    """Fallback: Load models from local files"""
+    global model, scaler, label_encoder, metadata
+    
+    try:
+        # Load best model (compressed)
+        model_path = "../models/svm_best_model.pkl.gz"
+        if os.path.exists(model_path):
+            import gzip
+            import pickle
+            with gzip.open(model_path, 'rb') as f:
+                model = pickle.load(f)
+        
+        # Load scaler
+        scaler_path = "../models/scaler.pkl"
+        if os.path.exists(scaler_path):
+            scaler = joblib.load(scaler_path)
+        
+        # Load label encoder
+        encoder_path = "../models/label_encoder.pkl"
+        if os.path.exists(encoder_path):
+            label_encoder = joblib.load(encoder_path)
+        
+        # Load metadata
+        metadata_path = "../models/metadata.json"
+        if os.path.exists(metadata_path):
+            with open(metadata_path, 'r') as f:
+                metadata = json.load(f)
+        
+        print("Model and artifacts loaded successfully from local files")
+        return True
+    except Exception as e:
+        print(f"Error loading local models: {e}")
+        return False
+
+def extract_hog_features(image, pixels_per_cell=(8, 8)):
+    """Extract HOG features from image"""
+    from skimage.feature import hog
+    gray = cv2.cvtColor(image, cv2.COLOR_RGB2GRAY)
+    features, hog_img = hog(
+        gray,
+        orientations=9,
+        pixels_per_cell=pixels_per_cell,
+        cells_per_block=(2, 2),
+        block_norm='L2-Hys',
+        visualize=True,
+        transform_sqrt=True
+    )
+    return features.astype(np.float32)
+
+def extract_color_histogram(image, bins=32):
+    """Extract color histogram features from HSV image"""
+    hsv = cv2.cvtColor(image, cv2.COLOR_RGB2HSV)
+    hist_h = np.histogram(hsv[:,:,0], bins=bins, range=(0, 180))[0]
+    hist_s = np.histogram(hsv[:,:,1], bins=bins, range=(0, 256))[0]
+    hist_v = np.histogram(hsv[:,:,2], bins=bins, range=(0, 256))[0]
+    return np.concatenate([hist_h, hist_s, hist_v]).astype(np.float32)
+
+def extract_lbp_features(image, radius=3, n_points=24):
+    """Extract Local Binary Pattern features for texture"""
+    from skimage.feature import local_binary_pattern
+    gray = cv2.cvtColor(image, cv2.COLOR_RGB2GRAY)
+    lbp = local_binary_pattern(gray, n_points, radius, method='uniform')
+    hist, _ = np.histogram(lbp.ravel(), bins=n_points + 2)
+    hist = hist.astype(np.float32)
+    hist /= (hist.sum() + 1e-7)  # Normalize
+    return hist
+
+def extract_features_from_image(image_data: bytes) -> np.ndarray:
+    """
+    Extract HOG, color histogram, and LBP features from uploaded image
+    Same feature extraction as used in training
+    """
+    try:
+        # Convert bytes to PIL Image
+        image = Image.open(io.BytesIO(image_data))
+        
+        # Convert to numpy array and RGB
+        img_array = np.array(image)
+        if len(img_array.shape) == 2:  # Grayscale
+            img_array = cv2.cvtColor(img_array, cv2.COLOR_GRAY2RGB)
+        elif img_array.shape[2] == 4:  # RGBA
+            img_array = cv2.cvtColor(img_array, cv2.COLOR_RGBA2RGB)
+        
+        # Resize to match training size
+        img_resized = cv2.resize(img_array, (128, 128))
+        
+        # Extract HOG features
+        hog_feat = extract_hog_features(img_resized)
+        
+        # Extract color histogram
+        col_feat = extract_color_histogram(img_resized)
+        
+        # Extract LBP features
+        lbp_feat = extract_lbp_features(img_resized)
+        
+        # Combine features
+        combined_features = np.concatenate([hog_feat, col_feat, lbp_feat])
+        
+        return combined_features.reshape(1, -1)
+        
+    except Exception as e:
+        raise HTTPException(status_code=400, detail=f"Error processing image: {str(e)}")
+
+@app.on_event("startup")
+async def startup_event():
+    """Load models on startup"""
+    success = load_models()
+    if not success:
+        print("Warning: Could not load models. Please run training script first.")
+
+@app.get("/", response_class=HTMLResponse)
+async def root():
+    """Serve the dashboard"""
+    try:
+        with open("../dashboard/index.html", "r") as f:
+            return HTMLResponse(content=f.read())
+    except FileNotFoundError:
+        return HTMLResponse(content="<h1>SVM Classification API</h1><p>Dashboard not found. Please check dashboard folder.</p>")
+
+@app.get("/api/health")
+async def health_check():
+    """Health check endpoint"""
+    return {
+        "status": "healthy",
+        "model_loaded": model is not None,
+        "best_kernel": metadata.get('best_kernel') if metadata else None
+    }
+
+@app.get("/api/models")
+async def get_models():
+    """Get available models and their information"""
+    if not metadata:
+        raise HTTPException(status_code=503, detail="Models not loaded")
+    
+    return {
+        "best_kernel": metadata.get('best_kernel'),
+        "classes": label_encoder.classes_.tolist() if label_encoder else [],
+        "model_info": metadata.get("model_info", {}),
+        "results": metadata.get("model_results", {})
+    }
+
+@app.post("/api/predict")
+async def predict_image(file: UploadFile = File(...)):
+    """
+    Predict cat or dog from uploaded image
+    """
+    print("Prediction request received")
+    
+    if not model:
+        raise HTTPException(status_code=503, detail="Model not loaded")
+    
+    if not scaler:
+        raise HTTPException(status_code=503, detail="Scaler not loaded")
+    
+    if not label_encoder:
+        raise HTTPException(status_code=503, detail="Label encoder not loaded")
+    
+    try:
+        # Read image data
+        image_data = await file.read()
+        print(f"Image data size: {len(image_data)} bytes")
+
+        # Extract features (same pipeline as training)
+        features = extract_features_from_image(image_data)
+        print(f"Features shape: {features.shape}")
+
+        # Scale features
+        features_scaled = scaler.transform(features)
+        print(f"Scaled features shape: {features_scaled.shape}")
+
+        # Make prediction
+        prediction = model.predict(features_scaled)[0]
+        probabilities = None
+
+        # Get decision function values if available
+        if hasattr(model, 'decision_function'):
+            decision_values = model.decision_function(features_scaled)[0]
+            # Convert to probabilities using softmax
+            exp_values = np.exp(decision_values - np.max(decision_values))
+            probabilities = exp_values / np.sum(exp_values)
+
+        # Map prediction to class name
+        class_id = int(prediction)
+        class_name = label_encoder.inverse_transform([class_id])[0]
+
+        # Get kernel info from metadata
+        kernel_used = metadata.get('best_kernel', 'unknown') if metadata else 'unknown'
+
+        # Compute feature vector sizes for UI display
+        image = Image.open(io.BytesIO(image_data))
+        img_array = np.array(image)
+        if len(img_array.shape) == 2:  # Grayscale
+            img_array = cv2.cvtColor(img_array, cv2.COLOR_GRAY2RGB)
+        elif img_array.shape[2] == 4:  # RGBA
+            img_array = cv2.cvtColor(img_array, cv2.COLOR_RGBA2RGB)
+        img_resized = cv2.resize(img_array, (128, 128))
+
+        hog_size = int(extract_hog_features(img_resized).shape[0])
+        color_size = int(extract_color_histogram(img_resized).shape[0])
+        lbp_size = int(extract_lbp_features(img_resized).shape[0])
+
+        # Prepare response
+        response = {
+            "prediction": {
+                "class_id": class_id,
+                "class_name": class_name,
+                "kernel": kernel_used,
+                "confidence": float(np.max(probabilities)) if probabilities is not None else None
+            },
+            "probabilities": probabilities.tolist() if probabilities is not None else None,
+            "features": {
+                "hog_size": hog_size,
+                "color_size": color_size,
+                "lbp_size": lbp_size
+            }
+        }
+
+        return response
+
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Prediction error: {str(e)}")
+
+@app.post("/api/predict-batch")
+async def predict_batch(files: list[UploadFile] = File(...), kernel: str = "rbf"):
+    """
+    Predict multiple images at once
+    """
+    if kernel not in models:
+        raise HTTPException(
+            status_code=400, 
+            detail=f"Kernel '{kernel}' not available. Available: {list(models.keys())}"
+        )
+    
+    results = []
+    
+    for file in files:
+        try:
+            image_data = await file.read()
+            features = extract_features_from_image(image_data)
+            features_scaled = scaler.transform(features)
+            
+            model = models[kernel]
+            prediction = model.predict(features_scaled)[0]
+            class_id = int(prediction)
+            class_name = label_encoder.inverse_transform([class_id])[0]
+            
+            results.append({
+                "filename": file.filename,
+                "prediction": {
+                    "class_id": class_id,
+                    "class_name": class_name,
+                    "kernel": kernel
+                }
+            })
+            
+        except Exception as e:
+            results.append({
+                "filename": file.filename,
+                "error": str(e)
+            })
+    
+    return {"results": results}
+
+@app.get("/api/performance")
+async def get_performance():
+    """Get model performance metrics"""
+    if not metadata:
+        raise HTTPException(status_code=503, detail="Models not loaded")
+
+    return {"results": metadata.get("model_results", {})}
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=7860)

dashboard/index.html

@@ -0,0 +1,288 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SVM Cats vs Dogs Dashboard</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        sans: ['Inter', 'ui-sans-serif', 'system-ui']
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        body { min-height: 100vh; }
+        .loading-spinner {
+            border: 3px solid rgba(0, 0, 0, 0.08);
+            border-top: 3px solid #2563eb;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .fade-in {
+            animation: fadeIn 0.6s ease-in;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+    </style>
+</head>
+<body>
+    <div class="min-h-screen bg-gray-50 text-gray-900">
+        <header class="border-b bg-white/80 backdrop-blur">
+            <div class="max-w-6xl mx-auto px-4 py-6 flex items-center justify-between">
+                <div class="flex items-center gap-3">
+                    <img src="/static/logo.png" alt="SVM Logo" class="h-10 w-10 rounded-xl">
+                    <div>
+                        <div class="text-lg font-semibold leading-tight">Cats vs Dogs Classification</div>
+                        <div class="text-sm text-gray-500">Upload an image and get a prediction with confidence</div>
+                    </div>
+                </div>
+            </div>
+        </header>
+
+        <main class="max-w-4xl mx-auto px-4 py-10">
+            <section class="bg-white rounded-2xl shadow-sm border p-6 md:p-8 fade-in">
+                <div>
+                    <h2 class="text-2xl font-semibold tracking-tight">Try a prediction</h2>
+                    <p class="text-sm text-gray-500 mt-2">Drag and drop a JPG/PNG, or click to browse. Max 10MB.</p>
+                </div>
+
+                <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label id="uploadArea" for="fileInput" class="rounded-2xl border-2 border-dashed border-gray-200 bg-gray-50 p-6 hover:bg-gray-100 transition cursor-pointer block">
+                            <input type="file" id="fileInput" accept="image/*" class="hidden" />
+                            <div class="flex items-center gap-4">
+                                <div class="h-12 w-12 rounded-xl bg-white border flex items-center justify-center">
+                                    <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1M12 12V4m0 8l-3-3m3 3l3-3" />
+                                    </svg>
+                                </div>
+                                <div class="flex-1">
+                                    <div class="font-semibold">Upload image</div>
+                                    <div id="fileHint" class="text-sm text-gray-500 mt-0.5">No file selected</div>
+                                </div>
+                            </div>
+                            <div class="mt-4 text-xs text-gray-500">Tip: choose a clear photo with the pet centered.</div>
+                        </label>
+
+                        <div class="mt-5">
+                            <div id="status" class="hidden text-sm"></div>
+                        </div>
+
+                        <div id="loading" class="hidden mt-5 rounded-xl border bg-gray-50 p-4">
+                            <div class="flex items-center gap-3">
+                                <div class="loading-spinner"></div>
+                                <div>
+                                    <div class="font-medium">Analyzing image…</div>
+                                    <div class="text-sm text-gray-500">Extracting features and predicting class</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="rounded-2xl border bg-white overflow-hidden">
+                        <div class="p-4 border-b bg-gray-50">
+                            <div class="text-sm font-semibold">Preview</div>
+                            <div id="previewMeta" class="text-xs text-gray-500">Upload an image to see preview</div>
+                        </div>
+                        <div class="p-4">
+                            <div class="aspect-square rounded-xl bg-gray-100 overflow-hidden flex items-center justify-center">
+                                <img id="previewImage" alt="Preview" class="hidden h-full w-full object-cover" />
+                                <div id="previewPlaceholder" class="text-sm text-gray-500">No image</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div id="results" class="hidden mt-6 rounded-2xl border bg-white p-6">
+                    <div class="flex items-start justify-between gap-4">
+                        <div>
+                            <div class="text-sm text-gray-500">Prediction</div>
+                            <div id="prediction" class="text-3xl font-bold">-</div>
+                            <div id="confidence" class="text-sm text-gray-600 mt-1">Confidence: -</div>
+                        </div>
+                        <div class="text-right">
+                            <div class="text-sm text-gray-500">Kernel</div>
+                            <div id="kernelUsed" class="text-sm font-semibold">-</div>
+                        </div>
+                    </div>
+
+                    <div class="mt-5 grid grid-cols-1 md:grid-cols-3 gap-4">
+                        <div class="rounded-xl border bg-gray-50 p-4">
+                            <div class="text-xs text-gray-500">HOG features</div>
+                            <div id="hogFeatures" class="text-lg font-semibold">-</div>
+                        </div>
+                        <div class="rounded-xl border bg-gray-50 p-4">
+                            <div class="text-xs text-gray-500">Color histogram</div>
+                            <div id="colorFeatures" class="text-lg font-semibold">-</div>
+                        </div>
+                        <div class="rounded-xl border bg-gray-50 p-4">
+                            <div class="text-xs text-gray-500">LBP features</div>
+                            <div id="lbpFeatures" class="text-lg font-semibold">-</div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </main>
+    </div>
+
+    <script>
+        let selectedFile = null;
+        let isPredicting = false;
+
+        // File upload handling
+        const uploadArea = document.getElementById('uploadArea');
+        const fileInput = document.getElementById('fileInput');
+        const loading = document.getElementById('loading');
+        const results = document.getElementById('results');
+        const status = document.getElementById('status');
+        const previewImage = document.getElementById('previewImage');
+        const previewPlaceholder = document.getElementById('previewPlaceholder');
+        const previewMeta = document.getElementById('previewMeta');
+        const fileHint = document.getElementById('fileHint');
+
+        
+        function setStatus(message, kind) {
+            if (!message) {
+                status.textContent = '';
+                status.className = 'hidden text-sm';
+                return;
+            }
+
+            const base = 'text-sm';
+            if (kind === 'error') {
+                status.className = `${base} text-red-600`;
+            } else if (kind === 'success') {
+                status.className = `${base} text-green-600`;
+            } else {
+                status.className = `${base} text-gray-600`;
+            }
+            status.textContent = message;
+        }
+
+        uploadArea.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            uploadArea.classList.add('ring-2', 'ring-blue-500');
+        });
+
+        uploadArea.addEventListener('dragleave', () => {
+            uploadArea.classList.remove('ring-2', 'ring-blue-500');
+        });
+
+        uploadArea.addEventListener('drop', (e) => {
+            e.preventDefault();
+            uploadArea.classList.remove('ring-2', 'ring-blue-500');
+            const files = e.dataTransfer.files;
+            if (files.length > 0) {
+                handleFileSelect(files[0]);
+            }
+        });
+
+        fileInput.addEventListener('change', (e) => {
+            if (e.target.files.length > 0) {
+                handleFileSelect(e.target.files[0]);
+            }
+        });
+
+        function handleFileSelect(file) {
+            if (file.size > 10 * 1024 * 1024) {
+                alert('File too large. Please select an image under 10MB.');
+                return;
+            }
+
+            if (!file.type.startsWith('image/')) {
+                alert('Please select an image file.');
+                return;
+            }
+
+            selectedFile = file;
+            setStatus('', '');
+            fileHint.textContent = `${file.name} • ${(file.size / 1024).toFixed(0)} KB`;
+
+            const reader = new FileReader();
+            reader.onload = () => {
+                previewImage.src = reader.result;
+                previewImage.classList.remove('hidden');
+                previewPlaceholder.classList.add('hidden');
+                previewMeta.textContent = `${file.type || 'image'} • ${(file.size / 1024).toFixed(0)} KB`;
+            };
+            reader.readAsDataURL(file);
+
+            runPrediction();
+        }
+
+        async function runPrediction() {
+            if (!selectedFile) return;
+            if (isPredicting) return;
+
+            isPredicting = true;
+            setStatus('Predicting…', 'info');
+
+            loading.classList.remove('hidden');
+            results.classList.add('hidden');
+
+            try {
+                const formData = new FormData();
+                formData.append('file', selectedFile);
+
+                const response = await fetch('/api/predict', {
+                    method: 'POST',
+                    body: formData
+                });
+
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+
+                const result = await response.json();
+                displayResults(result);
+                setStatus('', '');
+            } catch (error) {
+                console.error('Prediction failed:', error);
+                setStatus('Prediction failed. Try another image.', 'error');
+            } finally {
+                loading.classList.add('hidden');
+                isPredicting = false;
+            }
+        }
+
+        function displayResults(result) {
+            const prediction = result.prediction;
+            const conf = typeof prediction.confidence === 'number' ? (prediction.confidence * 100) : null;
+
+            document.getElementById('prediction').textContent = prediction.class_name ?? '-';
+            document.getElementById('kernelUsed').textContent = prediction.kernel ?? 'Best Model';
+            document.getElementById('confidence').textContent = conf === null ? 'Confidence: n/a' : `Confidence: ${conf.toFixed(1)}%`;
+
+            const features = result.features || {};
+            document.getElementById('hogFeatures').textContent = (features.hog_size ?? '-').toString();
+            document.getElementById('colorFeatures').textContent = (features.color_size ?? '-').toString();
+            document.getElementById('lbpFeatures').textContent = (features.lbp_size ?? '-').toString();
+
+            results.classList.remove('hidden');
+            setStatus('', '');
+        }
+
+        
+    </script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1,31 @@
+# Core ML and Data Science Libraries
+numpy>=1.21.0
+pandas>=1.3.0
+scikit-learn>=1.0.0
+matplotlib>=3.5.0
+seaborn>=0.11.0
+joblib>=1.1.0
+scikit-image>=0.18.0
+
+# Web Framework and API
+fastapi>=0.68.0
+uvicorn>=0.15.0
+python-multipart>=0.0.5
+
+# Image Processing
+opencv-python>=4.5.0
+Pillow>=8.3.0
+
+# Dataset Download (optional)
+kagglehub>=0.2.0
+
+# Data Visualization (for dashboard)
+plotly>=5.0.0
+
+# Development and Testing
+pytest>=6.2.0
+requests>=2.25.0
+
+# Optional: For enhanced performance
+# numpy>=1.21.0
+# scipy>=1.7.0