Merge branch 'main' of https://github.com/JoyTheSloth/BacSense-2.0

.gitignore

@@ -0,0 +1,10 @@
+.gemini/
+site/
+.stitch/
+frontend/node_modules/
+frontend/dist/
+bacterial-classifier/venv/
+bacterial-classifier/__pycache__/
+*.pyc
+*.pyo
+.DS_Store

BacSense_v2_Technical_Documentation.docx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:98a586556a6a10ef4de5a36a7c870a7065275d817dce50248eaa80e73c7b9777
+size 24791

BacSense_v2_Technical_Documentation.docx-1.pdf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cf372800de468169f3e1fff7acd2eb447a4fc9c87398a096a986da11d217ecd3
+size 299570

BacSense_v2_Technical_Documentation.docx.txt

@@ -0,0 +1,628 @@
+BacSense v2  |  Technical Documentation
+
+
+BacSense
+Version 2.0
+Technical Architecture & Model Documentation
+
+
+Cascaded Hybrid Classifier for Waterborne Bacterial Identification
+VGG16 Transfer Learning + Hand-Crafted Feature Engineering + RBF-SVM
+
+
+Author
+	Alapan Sen
+	Guide
+	Dr. Nilanjana Dutta Roy
+	Institution
+	Amity University Kolkata
+	Deployed
+	bacsense.streamlit.app
+	Version
+	2.0 — Cascaded Specialist
+	Date
+	March 2026
+	________________
+
+
+1. Executive Summary
+BacSense v2 is a two-stage cascaded hybrid classifier for the identification of five waterborne bacterial species from Gram-stained microscopy images. The system combines deep transfer learning (VGG16) with rich hand-crafted feature engineering and a binary specialist Support Vector Machine to resolve a critical confusion pair that the original single-stage model completely failed on.
+
+
+Problem:  The original BacSense v1 achieved 95.83% overall accuracy but had near-zero F1 scores for Escherichia coli and Pseudomonas aeruginosa — two morphologically similar Gram-negative rods that VGG16 FC features alone could not separate.
+	
+
+Solution:  A cascaded architecture that routes ambiguous predictions to a specialist binary SVM trained on a 683-dimensional feature vector combining VGG16 deep features with seven hand-crafted descriptors targeting the discriminative signals invisible to the main model.
+	
+
+Metric
+	v1 (Main SVM only)
+	v2 (Cascaded)
+	Overall Accuracy
+	95.83%
+	95.65%
+	E. coli F1
+	~0.00 (failing)
+	0.9568
+	P. aeruginosa F1
+	~0.00 (failing)
+	0.9563
+	P. aeruginosa Recall
+	~0.00
+	0.9480
+	Specialist ROC-AUC
+	—
+	0.9863
+	CV F1 (Specialist)
+	—
+	0.9498
+	
+
+________________
+
+
+2. Dataset
+2.1 Source: DIBaS (Digital Image of Bacteria Species)
+The DIBaS dataset, introduced by Zielinski et al. (2017) in PLOS ONE, is the primary source of microscopy images. It contains 660 images across 33 bacterial species captured at 100x magnification with oil immersion. BacSense uses a 5-class subset of 307 original images corresponding to clinically relevant waterborne pathogens.
+
+
+Species
+	Gram
+	Shape
+	Original Images
+	Risk Level
+	Escherichia coli
+	Negative
+	Rod
+	59
+	High
+	Pseudomonas aeruginosa
+	Negative
+	Rod
+	63
+	High
+	Enterococcus faecalis
+	Positive
+	Coccus
+	62
+	Medium
+	Clostridium perfringens
+	Positive
+	Rod
+	61
+	High
+	Listeria monocytogenes
+	Positive
+	Rod
+	62
+	High
+	
+
+2.2 Data Augmentation
+The original 307 images are insufficient for robust deep feature training. An aggressive augmentation pipeline expands the dataset 18.7x to approximately 5,000 images for main model training. For specialist training, each of the two confusion classes is independently augmented to 800 images.
+
+
+Parameter
+	Value
+	Rotation range
+	360 degrees (full circular)
+	Width / height shift
+	10%
+	Horizontal / vertical flip
+	Enabled
+	Zoom range
+	15%
+	Brightness range
+	0.85 – 1.15
+	Fill mode
+	Reflect
+	Target per class (specialist)
+	800 augmented + original PNG
+	
+
+For the specialist, original PNG images (59 E. coli + 63 P. aeruginosa) are combined with augmented JPG images during training to prevent domain shift artifacts between file formats. Total specialist training data: 1,722 images.
+________________
+
+
+3. System Architecture
+3.1 Overview: Two-Stage Cascaded Design
+BacSense v2 uses a cascaded architecture where a fast 5-class main SVM provides an initial prediction. If that prediction falls within the known confusion pair (E. coli or P. aeruginosa), the image is routed to a dedicated specialist binary SVM that uses a much richer feature representation to make the final call.
+
+
+Architecture Flow:  Input Image → VGG16 Feature Extractor → PCA(94) → Main SVM → [if ambiguous] → 683-dim Feature Extraction → PCA(243) → Specialist SVM → Final Prediction
+	
+
+
+
+	Stage 1: Main SVM
+	If Ambiguous
+	Stage 2: Specialist
+	Final Output
+	Input
+Raw image
+	Features
+VGG16 (512-dim) → PCA (94-dim)
+	Trigger
+E. coli or P. aeruginosa predicted
+	Features
+683-dim rich vector → PCA (243-dim)
+	Output
+5-class or binary species label
+	
+
+3.2 Stage 1: Main Classifier
+3.2.1 Feature Extractor — VGG16
+VGG16 is used as a frozen feature extractor with ImageNet pre-trained weights. The top classification layer is removed, and the output of the last global average pooling layer provides a 512-dimensional feature vector for each input image. Images are resized to 128 x 128 pixels and normalized to [0, 1] before passing through the network.
+
+
+Component
+	Detail
+	Base architecture
+	VGG16 (Simonyan & Zisserman, 2014)
+	Pre-training
+	ImageNet (1.2M images, 1000 classes)
+	Fine-tuning
+	None — weights fully frozen
+	Input size
+	128 x 128 x 3 (RGB)
+	Output
+	512-dimensional feature vector
+	
+
+3.2.2 Dimensionality Reduction — PCA
+Principal Component Analysis reduces the 512-dimensional VGG16 output to 94 components while retaining 95% of explained variance. This reduces overfitting risk, lowers SVM training time, and removes correlated feature dimensions that introduce noise into the decision boundary.
+
+
+3.2.3 Main Classifier — RBF-SVM
+A Radial Basis Function Support Vector Machine is trained on the PCA-reduced features for 5-class classification. The SVM uses a one-vs-one decision strategy with class-balanced weighting to handle slight class imbalance in the original dataset.
+
+
+Hyperparameter
+	Value
+	Selection Method
+	Kernel
+	RBF
+	Fixed — standard for high-dim features
+	C (regularization)
+	10
+	GridSearchCV, 3-fold CV
+	Gamma
+	0.01
+	GridSearchCV, 3-fold CV
+	Class weight
+	Balanced
+	Fixed — handles class imbalance
+	Decision function
+	OVO (one-vs-one)
+	Default for multi-class SVC
+	
+
+________________
+
+
+4. Stage 2: Specialist Classifier
+4.1 Motivation — Why a Specialist?
+E. coli and P. aeruginosa are both Gram-negative, rod-shaped bacteria with similar cell dimensions and staining characteristics. The standard VGG16 FC feature vector collapses their representations into overlapping regions in feature space, producing near-zero F1 scores for both species in the main model. Three peer-reviewed papers converge on the same solution: richer feature concatenation targeting color distribution, texture micropatterns, and spatial arrangement.
+
+
+Paper
+	Key Finding
+	Feature Applied in BacSense
+	Zielinski et al., 2017 (PLOS ONE)
+	Color distribution features explicitly recommended for morphologically similar species
+	HSV histogram (48-dim)
+	Wahid et al. (Inception-v3 + SVM)
+	Feature concatenation is the principled fix for intra-species confusion
+	Full 683-dim concatenated vector
+	Rachmad et al., 2020
+	Binary CNN+SVM specialist viable for rod-shaped bacteria
+	Cascaded binary specialist SVM
+	
+
+4.2 Feature Vector — 683 Dimensions
+The specialist uses a 683-dimensional feature vector formed by concatenating VGG16 deep features with seven hand-crafted descriptors. Each descriptor targets a specific visual property that differentiates E. coli from P. aeruginosa in Gram-stained images.
+
+
+Feature Group
+	Dims
+	What It Captures
+	Target Signal
+	VGG16 FC Features
+	512
+	Deep semantic representation from ImageNet
+	General shape, high-level patterns
+	HSV Histogram
+	48
+	Color distribution across Hue/Sat/Value bins (4x4x3)
+	Stain intensity differences
+	Morphological
+	5
+	Area, perimeter, circularity, aspect ratio, solidity
+	Cell shape and size
+	LBP Histogram
+	59
+	Local Binary Patterns, P=8, R=1, uniform
+	Texture micropatterns, biofilm
+	GLCM Descriptors
+	24
+	Contrast, dissimilarity, homogeneity, energy, correlation, ASM (4 angles)
+	Spatial gray-level co-occurrence
+	Channel Stats
+	9
+	Mean, std, skewness per H/S/V channel
+	Fine-grained color statistics
+	Density Grid
+	16
+	4x4 spatial grid of foreground pixel density
+	Clustering vs dispersal pattern
+	Hu Moments
+	7
+	7 rotation-invariant moment descriptors (log-transformed)
+	Global shape invariants
+	Curvature
+	3
+	Mean, std, max curvature across all contour points
+	Rod bending — key P. aeruginosa signal
+	
+
+4.3 Why Each Feature Matters for This Pair
+LBP (Local Binary Patterns)
+P. aeruginosa is known to form loose biofilm-like clusters under microscopy. LBP captures the local texture microstructure created by these aggregations — a signal completely absent from VGG16 FC features which operate at a semantic rather than textural level.
+
+
+GLCM (Gray-Level Co-occurrence Matrix)
+GLCM descriptors computed at four angles (0, 45, 90, 135 degrees) capture the spatial relationship between intensity values across the image. P. aeruginosa typically shows higher local contrast and dissimilarity values due to its clustering behavior and slightly different staining depth.
+
+
+Curvature Statistics
+P. aeruginosa rods tend to exhibit more curvature and bending than E. coli rods, which are typically straighter. Curvature is computed as the cross product of consecutive edge vectors along detected contours, summarized as mean, standard deviation, and maximum curvature values across all contours in the image.
+
+
+Spatial Density Grid
+A 4x4 grid divides the image into 16 cells and computes foreground pixel density in each cell. This captures the spatial distribution and clustering pattern of bacteria across the slide — P. aeruginosa tends to form denser local aggregations while E. coli distributes more uniformly.
+
+
+4.4 Specialist Pipeline
+Step
+	Operation
+	Output Dims
+	1. VGG16 extraction
+	Forward pass through frozen VGG16
+	512
+	2. Hand-craft extraction
+	HSV + Morph + LBP + GLCM + ChannelStats + Density + Hu + Curvature
+	171
+	3. Concatenation
+	np.concatenate([vgg, rich])
+	683
+	4. Standardization
+	StandardScaler (zero mean, unit variance)
+	683
+	5. PCA
+	Retain 95% variance
+	243
+	6. SVM prediction
+	RBF-SVM, C=100, gamma=0.001, probability=True
+	Binary (0=E.coli, 1=P.aeru)
+	7. Confidence gate
+	Accept specialist if prob >= 0.90, else fallback to Stage 1
+	Final label
+	
+
+4.5 Confidence Threshold Gate
+A confidence gate prevents the specialist from overriding the main SVM when it is uncertain. If the specialist's maximum class probability is below 0.90, the main SVM's prediction is used as the final answer. This is a practical engineering decision that prevents low-confidence specialist predictions from overriding a correct main SVM result, at the cost of occasionally retaining main SVM errors in the E. coli / P. aeruginosa pair.
+
+
+Design Note:  The 0.90 threshold was chosen based on observed confidence distributions. Future work should calibrate this threshold using a held-out validation set to maximize the F1 score of the gated system.
+	________________
+
+
+5. Training Details
+5.1 Main Model Training
+Component
+	Configuration
+	Training images
+	~5,000 (307 original × 18.7x augmentation)
+	PCA components
+	94 (95% variance retained from 512-dim input)
+	SVM kernel
+	RBF
+	Hyperparameter search
+	GridSearchCV, 3-fold cross-validation
+	Search space C
+	[0.1, 1, 10, 100]
+	Search space gamma
+	["scale", 0.1, 0.01, 0.001]
+	Best params
+	C=10, gamma=0.01
+	Scoring metric
+	F1 (macro)
+	Test accuracy
+	95.83%
+	
+
+5.2 Specialist Model Training
+Component
+	Configuration
+	Training images
+	1,722 total (800 aug E.coli + 800 aug P.aeru + 122 original PNG)
+	Feature vector
+	683-dim (512 VGG16 + 171 hand-crafted)
+	PCA components
+	243 (95% variance retained from 683-dim input)
+	SVM kernel
+	RBF
+	Hyperparameter search
+	GridSearchCV, 3-fold cross-validation
+	Search space C
+	[1, 10, 100]
+	Search space gamma
+	["scale", 0.01, 0.001]
+	Best params
+	C=100, gamma=0.001
+	Class weight
+	Balanced
+	Scoring metric
+	F1 (binary)
+	CV F1
+	0.9498
+	Test accuracy
+	95.65%
+	
+
+5.3 Domain Shift Handling
+The augmented training images were saved as JPEG files, while the original DIBaS images are PNG. JPEG compression introduces subtle color and texture artifacts that shift the feature distribution, causing the specialist (trained on augmented JPEGs) to misclassify original PNG images at inference. This was resolved by mixing all original PNG images into the specialist training set, forcing the model to learn features robust to both formats.
+________________
+
+
+6. Evaluation Results
+6.1 Specialist Classifier Performance
+Metric
+	E. coli
+	P. aeruginosa
+	Macro Avg
+	Precision
+	0.9486
+	0.9647
+	0.9566
+	Recall
+	0.9651
+	0.9480
+	0.9565
+	F1-Score
+	0.9568
+	0.9563
+	0.9565
+	Support
+	172
+	173
+	345
+	
+
+Overall test accuracy: 95.65% on 345 held-out images. ROC-AUC: 0.9863, indicating strong probability calibration across the decision boundary.
+
+
+6.2 Improvement Over v1
+Metric
+	v1 Main Model
+	v2 Specialist
+	Improvement
+	E. coli F1
+	~0.00
+	0.9568
+	+0.9568
+	P. aeruginosa F1
+	~0.00
+	0.9563
+	+0.9563
+	P. aeruginosa Recall
+	~0.00
+	0.9480
+	+0.9480
+	CV F1
+	N/A
+	0.9498
+	—
+	ROC-AUC
+	N/A
+	0.9863
+	—
+	
+
+6.3 Integration Test
+End-to-end testing of the full cascaded pipeline on original held-out images (not seen during training) produced the following results:
+
+
+Test
+	Correct / Total
+	Notes
+	E. coli (original PNG)
+	5 / 5
+	All routed to specialist, correctly classified
+	P. aeruginosa (original PNG)
+	5 / 5
+	All routed to specialist, correctly classified
+	Total
+	10 / 10
+	100% on held-out originals
+	________________
+
+
+7. Technical Stack
+Component
+	Library / Version
+	Purpose
+	Deep feature extractor
+	TensorFlow / Keras + VGG16
+	ImageNet transfer learning
+	Dimensionality reduction
+	scikit-learn PCA
+	Variance-preserving compression
+	Main classifier
+	scikit-learn SVC (RBF)
+	5-class prediction
+	Specialist classifier
+	scikit-learn SVC (RBF, probability=True)
+	Binary E.coli / P.aeru
+	LBP features
+	scikit-image local_binary_pattern
+	Texture micropatterns
+	GLCM features
+	scikit-image graycomatrix / graycoprops
+	Spatial co-occurrence
+	Color / morphology
+	OpenCV (cv2)
+	HSV histogram, contours, moments
+	Statistical features
+	scipy.stats.skew
+	Channel skewness
+	Image I/O
+	Pillow (PIL)
+	Image loading and resizing
+	Deployment
+	Streamlit
+	Web interface at bacsense.streamlit.app
+	
+
+8. Saved Artifacts
+All model artifacts are saved to Google Drive and packaged into bacsense_v2_package.zip for local deployment.
+
+
+File
+	Size
+	Description
+	vgg16_feature_extractor.keras
+	~55 MB
+	Frozen VGG16 feature extractor (no top layer)
+	pca_model.pkl
+	~2 MB
+	PCA model for main pipeline (512 → 94 dims)
+	standard_scaler.pkl
+	~0.1 MB
+	Scaler for main SVM input
+	svm_classifier.pkl
+	Variable
+	Trained 5-class RBF-SVM
+	class_names.pkl
+	<1 KB
+	Ordered list of 5 species names
+	specialist_svm.pkl
+	~712 KB
+	Binary specialist RBF-SVM (prob=True)
+	specialist_scaler.pkl
+	~13 KB
+	Scaler for 683-dim specialist input
+	specialist_pca.pkl
+	~1 MB
+	PCA for specialist (683 → 243 dims)
+	specialist_metadata.json
+	<1 KB
+	Training config, metrics, timestamps
+	inference.py
+	~15 KB
+	Standalone BacSense class for deployment
+	requirements.txt
+	<1 KB
+	Python dependency list
+	example_usage.py
+	~3 KB
+	Quickstart and Streamlit integration code
+	________________
+
+
+9. Inference API
+9.1 Installation
+Install dependencies and point the BacSense class at the unpacked package directory:
+
+
+Install:  pip install tensorflow scikit-learn scikit-image opencv-python scipy Pillow
+	
+
+9.2 Usage
+Method
+	Signature
+	Returns
+	Constructor
+	BacSense(model_dir, specialist_threshold=0.90)
+	BacSense instance
+	warmup()
+	Pre-loads all models into memory
+	None
+	predict()
+	predict(img_path, verbose=False)
+	Result dict (see below)
+	predict_batch()
+	predict_batch(img_paths, verbose=False)
+	List of result dicts
+	
+
+9.3 Result Dictionary
+Key
+	Type
+	Example Value
+	prediction
+	str
+	Escherichia coli
+	confidence
+	float
+	0.9621
+	routed_to_specialist
+	bool
+	True
+	specialist_accepted
+	bool
+	True
+	main_prediction
+	str
+	Escherichia coli
+	gram
+	str
+	Negative
+	shape
+	str
+	Rod
+	risk
+	str
+	High
+	________________
+
+
+10. Limitations & Future Work
+10.1 Current Limitations
+* P. aeruginosa recall is 94.80% — approximately 5.2% of P. aeruginosa images are still misclassified.
+* The confidence threshold (0.90) was chosen empirically, not calibrated on a held-out validation set.
+* The dataset is small (307 original images across 5 classes). Models trained on small datasets may not generalize to different microscopes, staining protocols, or magnifications.
+* JPEG augmentation introduces domain shift relative to original PNG images; mitigated by mixing formats in training, but not fully eliminated.
+* Inference speed is slower than single-stage models due to sequential feature extraction for routed images.
+
+
+10.2 Future Work
+* Collect 20-30 more original P. aeruginosa images to improve specialist recall beyond 0.95.
+* Add Gabor filter features (5 scales x 8 orientations = 40 dims) to further capture P. aeruginosa biofilm texture.
+* Calibrate confidence threshold using cross-validated F1 optimization on a dedicated validation set.
+* Extend specialist to handle all morphologically similar pairs, not just E. coli / P. aeruginosa.
+* Evaluate on images from a different microscopy system to assess generalization.
+* Replace binary specialist with a soft-label ensemble combining main SVM and specialist votes.
+________________
+
+
+11. References
+
+
+[1] Zielinski, B., Plichta, A., Misztal, K., Spurek, P., Brzychczy-Wloch, M., & Ochonska, D. (2017). Deep learning approach to bacterial colony classification. PLOS ONE, 12(9), e0184554.
+
+
+[2] Rachmad, A., et al. (2020). Comparison of CNN-Based methods for tuberculosis bacteria classification using ResNet-101 and Support Vector Machine. Journal of Physics: Conference Series.
+
+
+[3] Wahid, A., et al. CNN-based bacterial image classification using Inception-v3 with SVM, KNN, and Naive Bayes classifiers. Applied Sciences.
+
+
+[4] Simonyan, K., & Zisserman, A. (2014). Very deep convolutional networks for large-scale image recognition. arXiv:1409.1556.
+
+
+[5] Ojala, T., Pietikainen, M., & Maenpaa, T. (2002). Multiresolution gray-scale and rotation invariant texture classification with local binary patterns. IEEE TPAMI, 24(7), 971-987.
+
+
+[6] Haralick, R. M., Shanmugam, K., & Dinstein, I. (1973). Textural features for image classification. IEEE Transactions on Systems, Man, and Cybernetics, 3(6), 610-621.
+Amity University Kolkata  |  Alapan SenPage

Dockerfile

@@ -0,0 +1,31 @@
+FROM python:3.10-slim
+
+# Install system dependencies for OpenCV and scikit-image
+RUN apt-get update && apt-get install -y \
+    libgl1-mesa-glx \
+    libglib2.0-0 \
+    && rm -rf /var/lib/apt/lists/*
+
+# Set up a new user named "user" with user ID 1000
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+# Set the working directory to the user's home directory
+WORKDIR /home/user/app
+
+# Copy the requirements file into the container
+COPY --chown=user requirements.txt .
+
+# Install the Python dependencies
+RUN pip install --no-cache-dir --upgrade pip
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the application code into the container
+COPY --chown=user . .
+
+# Hugging Face Spaces expects the app to run on port 7860
+EXPOSE 7860
+
+# Command to run the FastAPI application
+CMD ["uvicorn", "bacterial-classifier.api:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,10 +1,79 @@
+# 🦠 Bacsense 2.0
+
+![Bacsense Banner](https://img.shields.io/badge/Bacsense-2.0-13a4ec?style=for-the-badge)
+
+**Bacsense 2.0** is an open-access visual platform for clinical microbiology research. Our mission is to accelerate pathogen identification through advanced hybrid neural networks and machine learning. 
+
+This project integrates a robust **VGG16 + SVM** hybrid classification architecture with a modern, high-performance web interface to quickly and accurately identify microscopic bacterial species from uploaded culture images.
+
+## ✨ Key Features
+
+- **🔬 High-Accuracy Classification:** Leverages a pre-trained VGG16 backbone for deep feature extraction, paired with a Support Vector Machine (SVM) classifier for pinpoint taxa identification.
+- **⚡ Real-time API:** Fast and lightweight inference backend powered by FastAPI.
+- **🌌 Premium Scientific UI:** A stunning, fully responsive dark-theme design featuring highly interactive GSAP spring cursors, meteor shower effects, and beautifully animated petri-dish data components.
+- **📊 Detailed Analysis Metrics:** Get immediate clinical insights on morphological traits, probability distribution thresholds, and gram stains for tested pathogens natively in the browser.
+
+## 🛠️ Tech Stack
+
+### Frontend
+- **Framework:** React + Vite (TypeScript)
+- **Styling:** Tailwind CSS
+- **Animations:** GSAP (GreenSock) & Framer Motion
+- **UI Architecture:** MagicUI
+
+### Backend / ML Engine
+- **REST API Runtime:** FastAPI & Uvicorn
+- **Machine Learning Pipelines:** TensorFlow / Keras (VGG16), Scikit-Learn (SVM, PCA)
+- **Image Processing Computation:** Pillow (PIL), NumPy, SciPy
+
 ---
-title: BacSense API
-emoji: 📚
-colorFrom: purple
-colorTo: indigo
-sdk: docker
-pinned: false
----
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+## 🚀 Getting Started
+
+### Prerequisites
+- [Node.js](https://nodejs.org/) (v16+)
+- [Python](https://python.org/) (3.9+)
+
+### 1. Boot the ML Backend
+
+Open a terminal in the project root and navigate to the backend service to spin up the prediction API:
+
+```bash
+cd bacterial-classifier
+python -m venv venv
+
+# Windows Activation
+venv\Scripts\activate  
+# Mac/Linux Activation
+# source venv/bin/activate  
+
+pip install -r requirements.txt
+pip install fastapi uvicorn python-multipart
+
+# Start the FastAPI uvicorn server
+uvicorn api:app --host 0.0.0.0 --port 5000 --reload
+```
+The ML API will successfully bind to `http://localhost:5000`.
+
+### 2. Start the React Frontend
+
+Open a new terminal tab, navigate to the frontend folder, install dependencies, and launch the Vite dev server:
+
+```bash
+cd frontend
+npm install
+npm run dev
+```
+
+The user interface will be live at `http://localhost:5173`. 🥳 Drag and drop a microscopic image into the Upload Zone to test the prediction model!
+
+## 🔬 Supported Species
+The engine spans multiple common pathogenic datasets and correctly identifies critical bacteria including:
+- *Escherichia coli* (Gram-negative)
+- *Staphylococcus aureus* (Gram-positive)
+- *Clostridium perfringens* (Anaerobic)
+- *Bacillus cereus* (Spore-forming)
+- *Listeria monocytogenes*
+
+---
+*© 2026 Bacsense Scientific Systems. Built for Next-Gen Bioinformatics.*

bacsense_v2_package/class_names.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5acfb42b5a3aa9da5d6a4479ca3ef12d737a42923c4205fa51645dcfdb4bb635
+size 135

bacsense_v2_package/example_usage.py

@@ -0,0 +1,48 @@
+# =============================================================================
+# BacSense v2 — Usage Examples
+# pip install -r requirements.txt
+# =============================================================================
+
+from inference import BacSense
+
+# ── Basic usage ───────────────────────────────────────────────────
+model = BacSense("bacsense_v2_package")
+model.warmup()  # pre-load at startup (optional but recommended)
+
+result = model.predict("image.png", verbose=True)
+print(result["prediction"])   # Escherichia coli
+print(result["confidence"])   # 0.9621
+print(result["gram"])         # Negative
+print(result["shape"])        # Rod
+print(result["risk"])         # High
+
+# ── Batch prediction ──────────────────────────────────────────────
+results = model.predict_batch(["img1.png", "img2.png", "img3.png"])
+for r in results:
+    print(r["prediction"], r["confidence"])
+
+# ── Streamlit app ─────────────────────────────────────────────────
+# import streamlit as st
+# from inference import BacSense
+#
+# @st.cache_resource
+# def load_model():
+#     m = BacSense("bacsense_v2_package")
+#     m.warmup()
+#     return m
+#
+# model = load_model()
+# st.title("BacSense v2 — Bacterial Classifier")
+# uploaded = st.file_uploader("Upload microscopy image", type=["png","jpg","jpeg"])
+# if uploaded:
+#     with open("temp_input.png", "wb") as f:
+#         f.write(uploaded.read())
+#     result = model.predict("temp_input.png", verbose=True)
+#     st.success(f"Prediction: {result['prediction']}")
+#     st.metric("Confidence", f"{result['confidence']:.2%}")
+#     col1, col2, col3 = st.columns(3)
+#     col1.metric("Gram Stain", result["gram"])
+#     col2.metric("Shape",      result["shape"])
+#     col3.metric("Risk Level", result["risk"])
+#     if result["routed_to_specialist"]:
+#         st.info("Specialist classifier was used for E.coli / P.aeruginosa disambiguation")

bacsense_v2_package/inference.py

@@ -0,0 +1,268 @@
+
+# =============================================================================
+# BacSense v2 — Standalone Inference Module
+# =============================================================================
+# Usage:
+#   from inference import BacSense
+#   model = BacSense("path/to/bacsense_v2_package")
+#   result = model.predict("image.png")
+#   print(result["prediction"])
+# =============================================================================
+
+import pickle, cv2, warnings
+import numpy as np
+from pathlib import Path
+from PIL import Image
+
+warnings.filterwarnings("ignore")
+
+
+def _lazy_imports():
+    from scipy.stats import skew
+    from skimage.feature import local_binary_pattern, graycomatrix, graycoprops
+    from tensorflow.keras.models import load_model
+    return skew, local_binary_pattern, graycomatrix, graycoprops, load_model
+
+
+class BacSense:
+    """
+    BacSense v2 — Two-stage cascaded bacterial classifier.
+
+    Stage 1 : VGG16 + PCA(94)  + RBF-SVM  →  5-class prediction
+    Stage 2 : VGG16 + 171-dim handcrafted features + PCA(243) + RBF-SVM
+              (only for E. coli / P. aeruginosa confusion pair)
+
+    Feature vector (Stage 2): 683-dim
+      VGG16(512) + HSV histogram(48) + Morphological(5) + LBP(59)
+      + GLCM(24) + Channel stats(9) + Density grid(16)
+      + Hu moments(7) + Curvature(3)
+
+    Performance:
+      Overall accuracy  : 95.65%
+      E. coli F1        : 0.9568
+      P. aeruginosa F1  : 0.9563
+      ROC-AUC           : 0.9863
+    """
+
+    SPECIES_INFO = {
+        "Escherichia coli":        {"gram": "Negative", "shape": "Rod",    "risk": "High"},
+        "Pseudomonas aeruginosa":  {"gram": "Negative", "shape": "Rod",    "risk": "High"},
+        "Enterococcus faecalis":   {"gram": "Positive", "shape": "Coccus", "risk": "Medium"},
+        "Clostridium perfringens": {"gram": "Positive", "shape": "Rod",    "risk": "High"},
+        "Listeria monocytogenes":  {"gram": "Positive", "shape": "Rod",    "risk": "High"},
+    }
+
+    AMBIGUOUS = ["Escherichia coli", "Pseudomonas aeruginosa"]
+
+    def __init__(self, model_dir: str, specialist_threshold: float = 0.90):
+        """
+        Args:
+            model_dir            : path to folder containing all model files
+            specialist_threshold : min specialist confidence to accept (default 0.90)
+        """
+        self.model_dir = Path(model_dir)
+        self.threshold = specialist_threshold
+        self._loaded   = False
+
+    def _load(self):
+        if self._loaded:
+            return
+        print("Loading BacSense v2 models...")
+        skew, lbp_fn, graycomatrix, graycoprops, load_model = _lazy_imports()
+        self._skew         = skew
+        self._lbp_fn       = lbp_fn
+        self._graycomatrix = graycomatrix
+        self._graycoprops  = graycoprops
+
+        d = self.model_dir
+        self.feature_extractor = load_model(str(d / "vgg16_feature_extractor.keras"))
+        with open(d / "pca_model.pkl",          "rb") as f: self.pca         = pickle.load(f)
+        with open(d / "standard_scaler.pkl",    "rb") as f: self.scaler      = pickle.load(f)
+        with open(d / "svm_classifier.pkl",     "rb") as f: self.main_svm    = pickle.load(f)
+        with open(d / "class_names.pkl",        "rb") as f: self.class_names = pickle.load(f)
+        with open(d / "specialist_svm.pkl",     "rb") as f: self.spec_svm    = pickle.load(f)
+        with open(d / "specialist_scaler.pkl",  "rb") as f: self.spec_scaler = pickle.load(f)
+        with open(d / "specialist_pca.pkl",     "rb") as f: self.spec_pca    = pickle.load(f)
+        self._loaded = True
+        print("  All models loaded ✅")
+
+    # ── Feature extractors ─────────────────────────────────────────
+
+    def _hsv_histogram(self, img_path, bins=(4, 4, 3)):
+        img  = cv2.imread(str(img_path))
+        hsv  = cv2.cvtColor(img, cv2.COLOR_BGR2HSV)
+        hist = cv2.calcHist([hsv], [0,1,2], None, list(bins), [0,180,0,256,0,256])
+        return cv2.normalize(hist, hist).flatten()  # 48
+
+    def _morphological(self, img_path):
+        img  = cv2.imread(str(img_path), cv2.IMREAD_GRAYSCALE)
+        blur = cv2.GaussianBlur(img, (5,5), 0)
+        _,thresh = cv2.threshold(blur, 0, 255, cv2.THRESH_BINARY+cv2.THRESH_OTSU)
+        contours,_ = cv2.findContours(thresh, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
+        if not contours: return np.zeros(5)
+        c     = max(contours, key=cv2.contourArea)
+        area  = cv2.contourArea(c)
+        perim = cv2.arcLength(c, True)
+        circ  = 4*np.pi*area / (perim**2+1e-6)
+        x,y,w,h = cv2.boundingRect(c)
+        aspect   = w / (h+1e-6)
+        solidity = area / (cv2.contourArea(cv2.convexHull(c))+1e-6)
+        return np.array([area, perim, circ, aspect, solidity])  # 5
+
+    def _lbp(self, img_path, P=8, R=1, n_bins=59):
+        img  = cv2.imread(str(img_path), cv2.IMREAD_GRAYSCALE)
+        img  = cv2.resize(img, (128,128))
+        lbp  = self._lbp_fn(img, P, R, method="uniform")
+        hist,_ = np.histogram(lbp.ravel(), bins=n_bins, range=(0,n_bins))
+        hist = hist.astype(float); hist /= (hist.sum()+1e-6)
+        return hist  # 59
+
+    def _glcm(self, img_path):
+        img  = cv2.imread(str(img_path), cv2.IMREAD_GRAYSCALE)
+        img  = cv2.resize(img, (128,128))
+        img  = (img//4).astype(np.uint8)
+        angles = [0, np.pi/4, np.pi/2, 3*np.pi/4]
+        glcm = self._graycomatrix(img, distances=[1], angles=angles,
+                                   levels=64, symmetric=True, normed=True)
+        feats = []
+        for prop in ["contrast","dissimilarity","homogeneity",
+                     "energy","correlation","ASM"]:
+            feats.extend(self._graycoprops(glcm, prop).flatten())
+        return np.array(feats)  # 24
+
+    def _channel_stats(self, img_path):
+        img = cv2.imread(str(img_path))
+        hsv = cv2.cvtColor(img, cv2.COLOR_BGR2HSV).astype(float)
+        feats = []
+        for ch in range(3):
+            d = hsv[:,:,ch].ravel()
+            feats.extend([d.mean(), d.std(), self._skew(d)])
+        return np.array(feats)  # 9
+
+    def _density_grid(self, img_path, grid=4):
+        img  = cv2.imread(str(img_path), cv2.IMREAD_GRAYSCALE)
+        img  = cv2.resize(img, (128,128))
+        _,thresh = cv2.threshold(
+            cv2.GaussianBlur(img,(5,5),0), 0, 255,
+            cv2.THRESH_BINARY+cv2.THRESH_OTSU)
+        h,w = thresh.shape; gh,gw = h//grid, w//grid
+        return np.array([
+            thresh[i*gh:(i+1)*gh, j*gw:(j+1)*gw].mean()/255.0
+            for i in range(grid) for j in range(grid)
+        ])  # 16
+
+    def _hu_moments(self, img_path):
+        img  = cv2.imread(str(img_path), cv2.IMREAD_GRAYSCALE)
+        img  = cv2.resize(img, (128,128))
+        _,thresh = cv2.threshold(
+            cv2.GaussianBlur(img,(5,5),0), 0, 255,
+            cv2.THRESH_BINARY+cv2.THRESH_OTSU)
+        hu = cv2.HuMoments(cv2.moments(thresh)).flatten()
+        return -np.sign(hu) * np.log10(np.abs(hu)+1e-10)  # 7
+
+    def _curvature(self, img_path):
+        img  = cv2.imread(str(img_path), cv2.IMREAD_GRAYSCALE)
+        _,thresh = cv2.threshold(
+            cv2.GaussianBlur(img,(5,5),0), 0, 255,
+            cv2.THRESH_BINARY+cv2.THRESH_OTSU)
+        contours,_ = cv2.findContours(thresh, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_NONE)
+        if not contours: return np.zeros(3)
+        curvatures = []
+        for c in contours:
+            if len(c) < 5: continue
+            pts = c[:,0,:].astype(float)
+            for i in range(1, len(pts)-1):
+                v1 = pts[i]-pts[i-1]; v2 = pts[i+1]-pts[i]
+                cross = abs(v1[0]*v2[1]-v1[1]*v2[0])
+                curvatures.append(cross/(np.linalg.norm(v1)*np.linalg.norm(v2)+1e-6))
+        if not curvatures: return np.zeros(3)
+        curv = np.array(curvatures)
+        return np.array([curv.mean(), curv.std(), curv.max()])  # 3
+
+    def _rich_features(self, img_path):
+        return np.concatenate([
+            self._hsv_histogram(img_path),    # 48
+            self._morphological(img_path),    # 5
+            self._lbp(img_path),              # 59
+            self._glcm(img_path),             # 24
+            self._channel_stats(img_path),    # 9
+            self._density_grid(img_path),     # 16
+            self._hu_moments(img_path),       # 7
+            self._curvature(img_path),        # 3
+        ])  # 171 total
+
+    # ── Public API ─────────────────────────────────────────────────
+
+    def predict(self, img_path: str, verbose: bool = False) -> dict:
+        """
+        Classify a bacterial microscopy image.
+
+        Returns dict:
+            prediction           : str    species name
+            confidence           : float  0-1
+            routed_to_specialist : bool
+            specialist_accepted  : bool
+            main_prediction      : str
+            gram                 : str    Positive / Negative
+            shape                : str    Rod / Coccus
+            risk                 : str    High / Medium / Low
+        """
+        self._load()
+        img_path = str(img_path)
+
+        # Stage 1 — Main SVM (5-class)
+        img = Image.open(img_path).convert("RGB").resize((128,128), Image.LANCZOS)
+        arr = np.expand_dims(np.array(img).astype("float32")/255.0, axis=0)
+
+        vgg        = self.feature_extractor.predict(arr, verbose=0)
+        scaled     = self.scaler.transform(self.pca.transform(vgg))
+        main_pred  = self.main_svm.predict(scaled)[0]
+        main_class = self.class_names[main_pred]
+        main_conf  = float(np.max(self.main_svm.decision_function(scaled)[0]))
+
+        if verbose:
+            print(f"Stage 1 — Main SVM: {main_class} (score: {main_conf:.4f})")
+
+        result = {
+            "prediction": main_class, "confidence": main_conf,
+            "routed_to_specialist": False, "specialist_accepted": False,
+            "main_prediction": main_class,
+            **self.SPECIES_INFO.get(main_class, {"gram":"Unknown","shape":"Unknown","risk":"Unknown"})
+        }
+
+        # Stage 2 — Specialist (ambiguous pair only)
+        if main_class in self.AMBIGUOUS:
+            if verbose: print("Routing to specialist...")
+
+            rich     = self._rich_features(img_path).reshape(1,-1)
+            combined = np.concatenate([vgg, rich], axis=1)
+            pca_spec   = self.spec_pca.transform(self.spec_scaler.transform(combined))
+            spec_pred  = self.spec_svm.predict(pca_spec)[0]
+            spec_proba = self.spec_svm.predict_proba(pca_spec)[0]
+            spec_conf  = spec_proba.max()
+            spec_class = "Escherichia coli" if spec_pred == 0 else "Pseudomonas aeruginosa"
+
+            accepted = spec_conf >= self.threshold
+            final    = spec_class if accepted else main_class
+
+            if verbose:
+                tag = "✅ accepted" if accepted else f"⚠️ below {self.threshold}, fallback to main"
+                print(f"Stage 2 — Specialist: {spec_class} (conf: {spec_conf:.4f}) {tag}")
+                print(f"Final: {final}")
+
+            result.update({
+                "prediction": final, "confidence": spec_conf,
+                "routed_to_specialist": True, "specialist_accepted": accepted,
+                **self.SPECIES_INFO.get(final, {"gram":"Unknown","shape":"Unknown","risk":"Unknown"})
+            })
+
+        return result
+
+    def predict_batch(self, img_paths: list, verbose: bool = False) -> list:
+        """Classify a list of image paths. Returns list of result dicts."""
+        return [self.predict(p, verbose=verbose) for p in img_paths]
+
+    def warmup(self):
+        """Pre-load all models into memory (call once at app startup)."""
+        self._load()
+        print("BacSense v2 ready ✅")

bacsense_v2_package/pca_model.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:36d2993f7e2095ecfe3cf449a5213460c7c8ce780965434ee213d3be170c16e9
+size 196517

bacsense_v2_package/requirements.txt

@@ -0,0 +1,7 @@
+tensorflow>=2.12.0
+scikit-learn>=1.3.0
+scikit-image>=0.21.0
+opencv-python>=4.8.0
+numpy>=1.24.0
+Pillow>=9.5.0
+scipy>=1.11.0

bacsense_v2_package/specialist_metadata.json

@@ -0,0 +1,38 @@
+{
+  "timestamp": "2026-03-16 07:11:14",
+  "architecture": "VGG16(512) + HSV(48) + Morph(5) + LBP(59) + GLCM(24) + ChannelStats(9) + DensityGrid(16) + HuMoments(7) + Curvature(3) \u2192 PCA(243) \u2192 SVM",
+  "feature_dims": {
+    "vgg16": 512,
+    "hsv_histogram": 48,
+    "morphological": 5,
+    "lbp": 59,
+    "glcm": 24,
+    "channel_stats": 9,
+    "density_grid": 16,
+    "hu_moments": 7,
+    "curvature": 3,
+    "combined": 683,
+    "after_pca": 243
+  },
+  "best_params": {
+    "C": 100,
+    "gamma": 0.001,
+    "kernel": "rbf"
+  },
+  "cv_f1": 0.9498,
+  "test_accuracy": 0.9565,
+  "ecoli_f1": 0.9568,
+  "ecoli_recall": 0.9651,
+  "pseudomonas_f1": 0.9563,
+  "pseudomonas_recall": 0.948,
+  "training_data": {
+    "augmented_jpg": 1600,
+    "original_png": 122,
+    "total": 1722
+  },
+  "improvement_over_v1": {
+    "accuracy": "0.9536 \u2192 0.9565",
+    "pseudomonas_recall": "0.9306 \u2192 0.9480",
+    "cv_f1": "0.9262 \u2192 0.9498"
+  }
+}

bacsense_v2_package/specialist_pca.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:271f198091fa0baeb308ab96be7daefba2622f82dbb76a9c72e0f0807955f93b
+size 1339847

bacsense_v2_package/specialist_scaler.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2e59b83d5e0fd6cf002571ee70e889741a7d94b0556a5a260aeacd795ab0ae44
+size 16855

bacsense_v2_package/specialist_svm.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8df00d049310dbdead39c7e6e6bf58779f0f14b5fe62627e908d15ab59ba0a57
+size 749525

bacsense_v2_package/standard_scaler.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c133477b15a420b3d00ed5c9ca41d72b3fe5212152227c82f0f43490823d3e0e
+size 2715

bacsense_v2_package/svm_classifier.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:55296fc956943a2e5e041256a957cc782eea5f47f1a808dcde71f2076d2fda97
+size 2013194

bacsense_v2_package/vgg16_feature_extractor.keras

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:48d0af85e0b48c38950b874e49ed61b46ce35085976c84fb8c595d30534bdefe
+size 58933107

bacterial-classifier/.gitignore

@@ -0,0 +1,7 @@
+__pycache__/
+*.pyc
+venv/
+temp_*.jpg
+temp_*.png
+temp_*.jpeg
+.DS_Store

bacterial-classifier/README.txt

@@ -0,0 +1,62 @@
+
+BACTERIAL CLASSIFICATION MODEL
+================================
+
+Author: ALAPAN SEN
+Enrollment: A9100522041
+Institution: Amity University Kolkata
+
+PERFORMANCE
+-----------
+Test Accuracy: 95.83%
+Validation Accuracy: 94.80%
+
+MODEL ARCHITECTURE
+------------------
+Type: Hybrid VGG16 + SVM
+PCA Components: 94
+SVM Parameters: C=10, gamma=0.01
+
+BACTERIAL SPECIES (5 classes)
+------------------------------
+1. Clostridium perfringens
+2. Enterococcus faecalis
+3. Escherichia coli
+4. Listeria monocytogenes
+5. Pseudomonas aeruginosa
+
+USAGE
+-----
+1. Install dependencies:
+   pip install -r requirements.txt
+
+2. Test the model:
+   python test_model.py
+
+3. Classify an image:
+   python inference_script.py bacteria.jpg
+
+4. Or use in Python:
+   from inference_script import BacterialClassifier
+   
+   classifier = BacterialClassifier(models_dir='models')
+   result = classifier.classify('bacteria.jpg')
+   print(result)
+
+PACKAGE CONTENTS
+----------------
+models/
+  - vgg16_feature_extractor.keras
+  - pca_model.pkl
+  - standard_scaler.pkl
+  - svm_classifier.pkl
+  - class_names.pkl
+  - bacteria_info.pkl
+
+inference_script.py - Classifier code
+test_model.py - Model verification
+requirements.txt - Dependencies
+README.txt - This file
+model_metadata.json - Model specifications
+
+Created: 2025-12-03 18:59:38

bacterial-classifier/api.py

@@ -0,0 +1,80 @@
+import io
+import os
+import sys
+import tempfile
+from typing import List
+from fastapi import FastAPI, UploadFile, File, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+
+# Add the parent directory to sys.path to import bacsense_v2_package
+sys.path.append(os.path.abspath(os.path.join(os.path.dirname(__file__), '..')))
+from bacsense_v2_package.inference import BacSense
+
+app = FastAPI(title="Bacsense 2.0 API")
+
+# Setup CORS to allow requests from the React frontend
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # Adjust this in production, e.g., ["http://localhost:5173"]
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Load the model upon startup
+# The model files are located in the bacsense_v2_package directory
+model_dir = os.path.abspath(os.path.join(os.path.dirname(__file__), '..', 'bacsense_v2_package'))
+classifier = BacSense(model_dir=model_dir)
+classifier.warmup()
+
+@app.post("/predict_batch")
+async def predict_batch(files: List[UploadFile] = File(...)):
+    if not files or len(files) == 0:
+        raise HTTPException(status_code=400, detail="No files uploaded")
+    
+    results = []
+    
+    for file in files:
+        temp_path = None
+        try:
+            # Read the uploaded file into an IO stream
+            contents = await file.read()
+            
+            # BacSense uses cv2.imread and PIL.Image.open with a file path, so we save it to disk temporarily
+            fd, temp_path = tempfile.mkstemp(suffix=".png")
+            with os.fdopen(fd, 'wb') as f:
+                f.write(contents)
+            
+            # Process the image
+            result = classifier.predict(temp_path)
+            
+            # Format probabilities for the frontend
+            # UI expects 0-100 for confidence
+            confidence_pct = result["confidence"] * 100 if result["confidence"] <= 1.0 else result["confidence"]
+            
+            results.append({
+                "filename": file.filename,
+                "success": True,
+                "prediction": result['prediction'],
+                "confidence": confidence_pct,
+                "probabilities": [
+                    {"name": result['prediction'], "probability": confidence_pct}
+                ],
+                "details": {
+                    "gram_stain": result.get("gram", "Unknown"),
+                    "shape": result.get("shape", "Unknown"),
+                    "pathogenicity": result.get("risk", "Unknown")
+                }
+            })
+        except Exception as e:
+            results.append({
+                "filename": file.filename,
+                "success": False,
+                "error": str(e)
+            })
+        finally:
+            # Clean up the temporary file
+            if temp_path and os.path.exists(temp_path):
+                os.remove(temp_path)
+                
+    return {"results": results}

bacterial-classifier/app.py

@@ -0,0 +1,226 @@
+import streamlit as st
+from PIL import Image
+import os
+import sys
+import tempfile
+import pandas as pd
+
+# Add the parent directory to sys.path to import bacsense_v2_package
+sys.path.append(os.path.abspath(os.path.join(os.path.dirname(__file__), '..')))
+from bacsense_v2_package.inference import BacSense
+
+# Precaution dictionary
+PRECAUTIONS = {
+    "Escherichia coli": "Indicator of fecal contamination. \n\n**Precautions/Actions:** Boil water immediately before consumption. Source trace to find sewage leaks. Do not use for washing open wounds.",
+    "Pseudomonas aeruginosa": "Opportunistic pathogen resistant to many sanitizers. \n\n**Precautions/Actions:** Ensure water chlorination levels are adequate. Can cause severe infections in immunocompromised individuals. Avoid contact with eyes or ears.",
+    "Enterococcus faecalis": "Indicates prolonged fecal contamination. Very resilient. \n\n**Precautions/Actions:** Shock chlorinate the water system. Discontinue use for drinking until negative tests are returned.",
+    "Clostridium perfringens": "Spore-forming bacteria, highly resistant to standard disinfection. \n\n**Precautions/Actions:** Indicates remote or past fecal contamination. UV filtration or extreme heat treatment may be required.",
+    "Listeria monocytogenes": "Dangerous to pregnant women and immunocompromised individuals. \n\n**Precautions/Actions:** Do not use water for food preparation or drinking. Pasteurization/boiling is required."
+}
+
+# Set page config
+st.set_page_config(
+    page_title="BacSense v2 Dashboard",
+    page_icon="🦠",
+    layout="wide"
+)
+
+# Initialize classifier
+@st.cache_resource
+def get_classifier():
+    model_dir = os.path.abspath(os.path.join(os.path.dirname(__file__), '..', 'bacsense_v2_package'))
+    model = BacSense(model_dir=model_dir)
+    model.warmup()
+    return model
+
+try:
+    classifier = get_classifier()
+except Exception as e:
+    st.error(f"Error loading model: {e}")
+    st.stop()
+
+# Dialog function for detailed view
+# Fallback for older Streamlit versions that lack st.dialog
+def render_details(item):
+    st.image(item["Image"], use_column_width=True)
+    st.markdown(f"### Predicted: **{item['Predicted Class']}**")
+    
+    colA, colB = st.columns(2)
+    colA.metric("Confidence", f"{item['Confidence (%)']}%")
+    colB.metric("Risk Level", item['Risk'])
+    
+    st.markdown("""---""")
+    st.markdown("**Bacterial Summary:**")
+    st.write(f"- **Gram Stain:** {item['Gram Stain']}")
+    st.write(f"- **Shape:** {item['Shape']}")
+    
+    if item['Routed to Specialist']:
+        st.info(f"Ambiguous morphology triggered the Specialist SVM. Accepted: {'✅' if item['Specialist Accepted'] else '❌'}")
+
+    st.markdown("""---""")
+    st.markdown("**Precautions:**")
+    precaution_text = PRECAUTIONS.get(item['Predicted Class'], "No specific precautions available. Standard water safety protocols suggest boiling before consumption.")
+    st.warning(precaution_text)
+    
+    if st.button("Close Summary", key="close_summary_btn"):
+        st.session_state.selected_item = None
+        st.rerun()
+
+# Main UI
+st.title("🦠 BacSense v2 Analytics Dashboard")
+st.markdown("""
+Welcome to the BacSense v2 Dashboard. This cascaded hybrid classifier uses **VGG16 Transfer Learning** 
+combined with **Hand-Crafted Feature Engineering** and an **RBF-SVM Specialist** to disambiguate waterborne pathogens.
+You can safely upload **up to 60 images** at once.
+""")
+
+# Sidebar for info
+with st.sidebar:
+    st.header("Supported Species")
+    st.markdown("""
+    - *Clostridium perfringens*
+    - *Enterococcus faecalis*
+    - *Escherichia coli*
+    - *Listeria monocytogenes*
+    - *Pseudomonas aeruginosa*
+    """)
+    st.markdown("---")
+    st.caption("BacSense v2 Cascaded Model")
+    st.caption("Overall Accuracy: 95.65%")
+    st.caption("Specialist AUC: 0.9863")
+
+st.subheader("Batch Upload (Multiple Images)")
+uploaded_files = st.file_uploader("Upload microscopic bacterial images...", type=["jpg", "jpeg", "png"], accept_multiple_files=True)
+
+if "selected_item" not in st.session_state:
+    st.session_state.selected_item = None
+
+if uploaded_files:
+    # Check if we are viewing details
+    if st.session_state.selected_item is not None:
+        render_details(st.session_state.selected_item)
+    else:
+        # Filter to 60 images to prevent abuse if needed, or just process however many there are
+        uploaded_files = list(uploaded_files)[:100] # Safe upper limit
+        results = []
+        
+        # Progress container
+        progress_container = st.container()
+        with progress_container:
+            st.write(f"Processing {len(uploaded_files)} images...")
+            progress_bar = st.progress(0)
+            status_text = st.empty()
+        
+        for i, uploaded_file in enumerate(uploaded_files):
+            status_text.text(f"Analyzing [{i+1}/{len(uploaded_files)}]: {uploaded_file.name}...")
+            
+            # Load image
+            image = Image.open(uploaded_file)
+            
+            # Save temp file
+            fd, temp_path = tempfile.mkstemp(suffix=".png")
+            if image.mode != 'RGB':
+                image = image.convert('RGB')
+            
+            with os.fdopen(fd, 'wb') as f:
+                image.save(f, format="PNG")
+            
+            try:
+                # Classify using BacSense cascaded model
+                prediction = classifier.predict(temp_path)
+                
+                confidence_pct = prediction['confidence'] * 100 if prediction['confidence'] <= 1.0 else prediction['confidence']
+                results.append({
+                    "Filename": uploaded_file.name,
+                    "Predicted Class": prediction['prediction'],
+                    "Confidence (%)": round(confidence_pct, 2),
+                    "Gram Stain": prediction.get('gram', 'Unknown'),
+                    "Shape": prediction.get('shape', 'Unknown'),
+                    "Risk": prediction.get('risk', 'Unknown'),
+                    "Routed to Specialist": prediction.get('routed_to_specialist', False),
+                    "Specialist Accepted": prediction.get('specialist_accepted', False),
+                    "Image": image
+                })
+                
+            except Exception as e:
+                st.error(f"Error processing {uploaded_file.name}: {e}")
+            finally:
+                # Cleanup
+                if os.path.exists(temp_path):
+                    os.remove(temp_path)
+            
+            # Update progress
+            progress_bar.progress((i + 1) / len(uploaded_files))
+        
+        status_text.text("Batch Processing Complete!")
+        
+        if results:
+            df = pd.DataFrame(results)
+            
+            # 1. Top Level Metrics
+            st.markdown("---")
+            st.subheader("📊 Batch Analytics Summary")
+            col1, col2, col3, col4 = st.columns(4)
+            
+            total_images = len(results)
+            high_risk = len(df[df["Risk"] == "High"])
+            routed_spec = len(df[df["Routed to Specialist"] == True])
+            avg_confidence = df["Confidence (%)"].mean()
+            
+            col1.metric("Total Images", total_images)
+            col2.metric("High Target Risk", high_risk)
+            col3.metric("Routed to Specialist", routed_spec, help="Ambiguous cases handled by the 683-dim Specialist SVM")
+            col4.metric("Avg Confidence", f"{avg_confidence:.1f}%")
+
+            # 2. Charts
+            st.markdown("<br>", unsafe_allow_html=True)
+            col_chart1, col_chart2 = st.columns(2)
+            with col_chart1:
+                st.markdown("**Species Distribution**")
+                class_counts = df["Predicted Class"].value_counts().reset_index()
+                class_counts.columns = ["Species", "Count"]
+                st.bar_chart(class_counts.set_index("Species"))
+                
+            with col_chart2:
+                st.markdown("**Gram Stain Breakdown**")
+                gram_counts = df["Gram Stain"].value_counts()
+                st.bar_chart(gram_counts)
+
+            # 3. Data Table
+            st.markdown("---")
+            st.subheader("📋 Detailed Results Table")
+            st.dataframe(df.drop(columns=["Image"]), use_container_width=True)
+            
+            # 4. Filterable Image Gallery
+            st.markdown("---")
+            st.subheader("🖼️ Processed Image Gallery")
+            st.caption("Click on 'View Summary' underneath any image to view brief details and precautions for the detected pathogen.")
+            
+            filter_class = st.selectbox("Filter gallery by predicted species:", ["All"] + sorted(df["Predicted Class"].unique().tolist()))
+            
+            filtered_results = results if filter_class == "All" else [r for r in results if r["Predicted Class"] == filter_class]
+            
+            # Display images in a grid
+            cols_per_row = 4
+            for i in range(0, len(filtered_results), cols_per_row):
+                cols = st.columns(cols_per_row)
+                for j in range(cols_per_row):
+                    if i + j < len(filtered_results):
+                        item = filtered_results[i + j]
+                        with cols[j]:
+                            st.image(item["Image"], use_column_width=True)
+                            st.markdown(f"**{item['Predicted Class']}**")
+                            
+                            # Add pills for details
+                            det_col1, det_col2 = st.columns(2)
+                            det_col1.markdown(f"<small>{item['Confidence (%)']}% Conf</small>", unsafe_allow_html=True)
+                            if item["Routed to Specialist"]:
+                                det_col2.markdown(f"<small>Specialist: {'✅' if item['Specialist Accepted'] else '❌'}</small>", unsafe_allow_html=True)
+                            
+                            if st.button("View Summary", key=f"details_btn_{i}_{j}"):
+                                st.session_state.selected_item = item
+                                st.rerun()
+
+else:
+    st.info("Please upload one or more images (up to 60) to start the batch analysis.")
+

bacterial-classifier/requirements.txt

@@ -0,0 +1,7 @@
+tensorflow>=2.10.0
+scikit-learn>=1.0.0
+numpy>=1.21.0
+pillow>=9.0.0
+scipy>=1.7.0
+streamlit>=1.10.0
+pandas>=1.3.0

bacterial-classifier/run_backend.ps1

@@ -0,0 +1,4 @@
+.\venv\Scripts\Activate.ps1
+pip install -r ..\bacsense_v2_package\requirements.txt
+pip install fastapi uvicorn python-multipart
+python -m uvicorn api:app --reload --port 5000

frontend/.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.vercel

frontend/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

frontend/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

frontend/index.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html class="dark" lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+    <title>Bacsense 2.0 - Bacterial Classification System</title>
+    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;family=Poppins:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet"/>
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+    <script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    colors: {
+                        "primary": "#13a4ec",
+                        "background-light": "#f0f8ff",
+                        "background-dark": "#001233",
+                    },
+                    fontFamily: {
+                        "display": ["Poppins", "sans-serif"],
+                        "sans": ["Poppins", "sans-serif"]
+                    },
+                    borderRadius: {
+                        "DEFAULT": "0.25rem",
+                        "lg": "0.5rem",
+                        "xl": "0.75rem",
+                        "full": "9999px"
+                    },
+                    animation: {
+                        meteor: "meteor 5s linear infinite",
+                    },
+                    keyframes: {
+                        meteor: {
+                            "0%": { transform: "rotate(215deg) translateX(0)", opacity: 1 },
+                            "70%": { opacity: 1 },
+                            "100%": {
+                                transform: "rotate(215deg) translateX(-500px)",
+                                opacity: 0,
+                            },
+                        },
+                    },
+                },
+            },
+        }
+    </script>
+    <style>
+        .glass {
+            background: rgba(255, 255, 255, 0.03);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .glow-primary {
+            box-shadow: 0 0 20px rgba(19, 164, 236, 0.3);
+        }
+    </style>
+  </head>
+  <body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 font-sans selection:bg-primary/30">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.36.0",
+    "gsap": "^3.14.2",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router-dom": "^7.13.2",
+    "tailwind-merge": "^3.5.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@types/node": "^24.12.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.0",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.56.1",
+    "vite": "^8.0.0"
+  }
+}

frontend/run_frontend.ps1

@@ -0,0 +1,2 @@
+npm install
+npm run dev

frontend/src/App.css

@@ -0,0 +1 @@
+/* Empty to avoid conflict */

frontend/src/App.tsx

@@ -0,0 +1,27 @@
+import { Routes, Route } from "react-router-dom"
+import { Header } from "./components/Header"
+import { Footer } from "./components/Footer"
+import TargetCursor from "./components/TargetCursor"
+import { HomePage } from "./pages/HomePage"
+import { DocsPage } from "./pages/DocsPage"
+
+function App() {
+  return (
+    <>
+      <TargetCursor 
+        spinDuration={4}
+        hideDefaultCursor
+        parallaxOn
+        hoverDuration={0.2}
+      />
+      <Header />
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/docs" element={<DocsPage />} />
+      </Routes>
+      <Footer />
+    </>
+  )
+}
+
+export default App

frontend/src/components/Footer.tsx

@@ -0,0 +1,45 @@
+export const Footer = () => {
+    return (
+        <footer className="bg-slate-100 dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800 py-16">
+            <div className="max-w-7xl mx-auto px-6">
+                <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
+                    <div className="col-span-1 md:col-span-2 space-y-6">
+                        <div className="flex items-center gap-3">
+                            <span className="material-symbols-outlined text-primary text-2xl">coronavirus</span>
+                            <h1 className="font-display font-bold text-xl tracking-tight">Bacsense 2.0</h1>
+                        </div>
+                        <p className="text-sm text-slate-500 max-w-sm">
+                            An open-access platform for clinical microbiology research. Our mission is to accelerate pathogen identification through advanced hybrid neural networks and machine learning.
+                        </p>
+                    </div>
+                    <div className="space-y-4">
+                        <h6 className="font-bold text-sm">Resources</h6>
+                        <ul className="text-sm text-slate-500 space-y-2">
+                            <li><a className="hover:text-primary transition-colors" href="#">API Documentation</a></li>
+                            <li><a className="hover:text-primary transition-colors" href="#">VGG16 Model Papers</a></li>
+                            <li><a className="hover:text-primary transition-colors" href="#">Dataset Disclosure</a></li>
+                            <li><a className="hover:text-primary transition-colors" href="#">Benchmarking</a></li>
+                        </ul>
+                    </div>
+                    <div className="space-y-4">
+                        <h6 className="font-bold text-sm">Institutional</h6>
+                        <ul className="text-sm text-slate-500 space-y-2">
+                            <li><a className="hover:text-primary transition-colors" href="#">Research Partners</a></li>
+                            <li><a className="hover:text-primary transition-colors" href="#">Grant Information</a></li>
+                            <li><a className="hover:text-primary transition-colors" href="#">Legal &amp; Ethics</a></li>
+                            <li><a className="hover:text-primary transition-colors" href="#">Contact Lab</a></li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="pt-8 border-t border-slate-200 dark:border-slate-800 flex flex-col md:flex-row items-center justify-between gap-4">
+                    <p className="text-xs text-slate-500">© 2026 Bacsense Scientific Systems. All rights reserved.</p>
+                    <div className="flex items-center gap-6">
+                        <a className="text-slate-400 hover:text-primary transition-colors" href="#"><span className="material-symbols-outlined">hub</span></a>
+                        <a className="text-slate-400 hover:text-primary transition-colors" href="#"><span className="material-symbols-outlined">science</span></a>
+                        <a className="text-slate-400 hover:text-primary transition-colors" href="#"><span className="material-symbols-outlined">school</span></a>
+                    </div>
+                </div>
+            </div>
+        </footer>
+    );
+};

frontend/src/components/Header.tsx

@@ -0,0 +1,31 @@
+import { Link, useLocation } from "react-router-dom";
+
+export const Header = () => {
+    const location = useLocation();
+
+    return (
+        <header className="fixed top-0 left-0 right-0 z-50 bg-transparent backdrop-blur-md border-b border-primary/10">
+            <div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
+                <Link to="/" className="flex items-center gap-3">
+                    <span className="material-symbols-outlined text-primary text-3xl">coronavirus</span>
+                    <h1 className="font-display font-bold text-2xl tracking-tight">Bacsense 2.0</h1>
+                </Link>
+                <nav className="hidden md:flex items-center gap-10">
+                    <Link className={`cursor-target text-sm font-medium transition-colors ${location.pathname === '/' ? 'text-primary' : 'hover:text-primary text-slate-500 dark:text-slate-400'}`} to="/">Home</Link>
+                    {location.pathname === '/' && (
+                        <>
+                            <a className="cursor-target text-sm font-medium hover:text-primary transition-colors text-slate-500 dark:text-slate-400" href="#species">Supported Species</a>
+                            <a className="cursor-target text-sm font-medium hover:text-primary transition-colors text-slate-500 dark:text-slate-400" href="#upload">Upload</a>
+                        </>
+                    )}
+                    <Link className={`cursor-target text-sm font-medium transition-colors ${location.pathname === '/docs' ? 'text-primary' : 'hover:text-primary text-slate-500 dark:text-slate-400'}`} to="/docs">Documentation</Link>
+                </nav>
+                <div className="flex items-center gap-4">
+                    <Link to="/" className="cursor-target bg-primary text-white px-5 py-2 rounded-lg font-semibold text-sm hover:opacity-90 transition-all glow-primary">
+                        Get Started
+                    </Link>
+                </div>
+            </div>
+        </header>
+    );
+};

frontend/src/components/Hero.tsx

@@ -0,0 +1,65 @@
+import { Meteors } from "../registry/magicui/meteors";
+import { DotPattern } from "../registry/magicui/dot-pattern";
+import { cn } from "../lib/utils";
+
+export const Hero = () => {
+  return (
+    <section className="relative overflow-hidden mb-24 pt-32 pb-32">
+      {/* Bacteria/Molecular Background */}
+      <div
+        className="absolute inset-0 z-0 opacity-80"
+        style={{
+          backgroundImage: "url('/bacteria-bg.png')",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          backgroundRepeat: "no-repeat",
+        }}
+      />
+
+      {/* Dark gradient overlay for readability */}
+      <div className="absolute inset-0 z-0 bg-background-light/70 dark:bg-background-dark/80 bg-gradient-to-b from-transparent to-background-light dark:to-background-dark" />
+
+      {/* MagicUI Dot Pattern */}
+      <DotPattern
+        className={cn(
+          "[mask-image:radial-gradient(600px_circle_at_center,white,transparent)] z-0 mix-blend-overlay dark:mix-blend-plus-lighter opacity-60",
+        )}
+      />
+
+      {/* MagicUI Meteors */}
+      <div className="absolute inset-0 z-0 overflow-hidden">
+        <Meteors number={30} />
+      </div>
+
+      <div className="max-w-7xl mx-auto px-6 flex flex-col items-center text-center space-y-8 relative z-10">
+        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold uppercase tracking-widest">
+          <span className="relative flex h-2 w-2">
+            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
+            <span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
+          </span>
+          Now with VGG16 + SVM Hybrid Architecture
+        </div>
+        <h2 className="text-6xl md:text-7xl font-display font-bold max-w-4xl leading-[1.1]">
+          Bacterial <span className="text-primary">Classification</span> System
+        </h2>
+        <p className="text-lg text-slate-500 dark:text-slate-400 max-w-2xl leading-relaxed">
+          Advanced medical AI for high-accuracy identification of microbial
+          species. Leveraging deep learning features and support vector machines
+          for clinical-grade scientific research.
+        </p>
+        <div className="flex flex-wrap justify-center items-center gap-4 pt-4">
+          <a
+            href="#upload"
+            className="cursor-target bg-primary text-white px-8 py-4 rounded-xl font-bold text-lg hover:scale-[1.02] transition-transform glow-primary flex items-center gap-2"
+          >
+            <span className="material-symbols-outlined">upload_file</span>
+            Upload Image
+          </a>
+          <button className="cursor-target bg-slate-200 dark:bg-slate-800 px-8 py-4 text-slate-900 dark:text-white rounded-xl font-bold text-lg hover:bg-slate-300 dark:hover:bg-slate-700 transition-colors">
+            Documentation
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+};

frontend/src/components/Results.tsx

@@ -0,0 +1,54 @@
+import type { PredictionResult } from "./UploadZone";
+
+interface ResultsProps {
+    items: PredictionResult[];
+}
+
+export const Results = ({ items }: ResultsProps) => {
+    return (
+        <section className="max-w-7xl mx-auto px-6 mb-24">
+            <h3 className="text-3xl font-display font-bold mb-8">Classification Results</h3>
+            <div className="glass rounded-3xl overflow-x-auto border border-slate-200 dark:border-slate-800 shadow-2xl">
+                <table className="w-full text-left border-collapse min-w-[800px]">
+                    <thead className="bg-slate-50 dark:bg-slate-800/80 border-b border-slate-200 dark:border-slate-700">
+                        <tr>
+                            <th className="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500">Filename</th>
+                            <th className="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500">Predicted Class</th>
+                            <th className="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500">Confidence</th>
+                            <th className="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500">Gram Stain</th>
+                            <th className="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500">Shape</th>
+                            <th className="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500">Pathogenicity</th>
+                        </tr>
+                    </thead>
+                    <tbody className="divide-y divide-slate-200 dark:divide-slate-800 text-slate-900 dark:text-slate-100">
+                        {items.map((item, index) => {
+                            if (!item.success) return null;
+                            const risk = item.details?.pathogenicity || 'Unknown';
+                            const confColor = (item.confidence || 0) >= 80 ? 'bg-green-500/10 text-green-500' : 'bg-yellow-500/10 text-yellow-500';
+                            
+                            let riskColor = 'bg-blue-500/10 text-blue-500'; // low/unknown
+                            if (risk.toLowerCase().includes('high')) riskColor = 'bg-red-500/10 text-red-500';
+                            else if (risk.toLowerCase().includes('moderate')) riskColor = 'bg-orange-500/10 text-orange-500';
+
+                            return (
+                                <tr key={index} className="hover:bg-primary/5 transition-colors">
+                                    <td className="px-6 py-4 text-sm font-medium">{item.filename}</td>
+                                    <td className="px-6 py-4 text-sm italic">{item.prediction}</td>
+                                    <td className="px-6 py-4">
+                                        <span className={`${confColor} text-[11px] font-bold px-2 py-0.5 rounded`}>{(item.confidence || 0).toFixed(1)}%</span>
+                                    </td>
+                                    <td className="px-6 py-4 text-sm">{item.details?.gram_stain}</td>
+                                    <td className="px-6 py-4 text-sm text-slate-500 dark:text-slate-400">{item.details?.shape}</td>
+                                    <td className="px-6 py-4">
+                                        <span className={`${riskColor} text-[11px] font-bold px-2 py-0.5 rounded uppercase`}>{risk}</span>
+                                    </td>
+                                </tr>
+                            );
+                        })}
+                    </tbody>
+                </table>
+            </div>
+        </section>
+    );
+};
+

frontend/src/components/Species.tsx

@@ -0,0 +1,36 @@
+export const Species = () => {
+    const speciesList = [
+        { name: "C. perfringens", full: "Clostridium perfringens", traits: "Gram-positive, Anaerobic", img: "https://lh3.googleusercontent.com/aida-public/AB6AXuBqX5as8VB98coMPS1nNFsfu9M233xaiSFzXZJnG-iqFTWvjxRyPasTfINhM5Yi8GcCSLRaqgraUgLDc1VbIo_PF3Y3WOoj79rMRmZzKnmtEQiD3imFaD5xrI9wQRiIcXjS3J96bSpaEQYjt8ZDTLXZ96K7tjwU6JXqZ74Nf8ETJ_T-oxvqdyS-3wxc06Mbrvc5QwkEkuY4UOPUJs25mhCQf8QbL2cpG6pC6A2Pg0fpdGAkSe1sQVqLhZJcBpLV8A8z-V2SsgjrCmo" },
+        { name: "Escherichia coli", full: "Escherichia coli", traits: "Gram-negative, Rod", img: "https://lh3.googleusercontent.com/aida-public/AB6AXuD3KwFAUK3s5aDqMCX-TqfHdtQlznX0kk5aU6dfWM7b_ZXqjfbvJ2_2NYG4WAcOnkmXzSEAWmKBQDxKqDwltJNttqllKLNDA2AVNsSH9V-BhZV46l9TQuCjurGru4cUKRTiPjUV_yuAx83WD-TwWSec751FfZA0en73GZU8-3u9bGm0YMSel0Tafi2EjicYvKgewBtwPCFfyZqVjLZCgm-fFbinF__m9zMogoIgENOqZIId2rukRZnrZYefyWZv7cbg3HzN9OOXmQ8" },
+        { name: "S. aureus", full: "Staphylococcus aureus", traits: "Gram-positive, Cocci", img: "https://lh3.googleusercontent.com/aida-public/AB6AXuBMYEJJkt17J03_UiNaRU-EPoYelpNlqQ4AtoiWoLPy05oNKBToqZlsFxc0SpA8jCkYQqGg8kAQ1FQFILvsv527XzITyUHScVOE-eTotf0wF4YcFykbRR4kvyceOsGVO3bcHvrQ5apT4CpDV7_jXvy88dSqB4sjYxWrTJCTzrmcMsPg0l8jrTOsmgjRbAI8wJ_TfEhNGLL72YNt6-GQK2mXhBGgT3ba1md93NICpB-rCzppXQWFP4pyud_Sx5DFUHkSmsAQzxT_3Gc" },
+        { name: "Bacillus cereus", full: "Bacillus cereus", traits: "Gram-positive, Spore", img: "https://lh3.googleusercontent.com/aida-public/AB6AXuCL1k9a185JqakiYjo-2VJ9mw6OOefPvUoZgM2eTmKwJKMIkVlzcuxbS3rFyEEyeh8fO_N1VV0NC1bqH-e4ilRnPvzxhMZmdHcDl7xlrGF5zcZ8Fn2lUqyEUtdvPaUh4PoFMUCunABFPrO7EiviLb-hhMKKr9Qr-5RBQGWa8wl4G1_NusRvel3BwSNv1dmCdJtabnpfLPf36jzvxtQDO3qMh2_TeIDh6LtCCvHOhiD--cNzhp1QSqIannGMyo4b348Mw2HWCmuYb98" },
+        { name: "L. monocytogenes", full: "Listeria monocytogenes", traits: "Gram-positive, Rod", img: "https://lh3.googleusercontent.com/aida-public/AB6AXuAMnV4nByP765X_gmBbkyiNF3oqf4kYgD3vsXPdkUAwM8VZb-cTvkGo93H2hraUtpUgsA1Om24vR2gwZDNJUIZ8FdFm2R3YoHUS15My0y8J26dMerah7GqR0w5NhrwDABjT7hKwEfJjdKpmZlmfe3K8YByQrUFJCMSqWCndfFkpIyfkwd89RINHMI2-5odgkZlCRSLeDr-prVaTJmhZK-eSmWrBodqF2lJyyfHneSJk_nqkcDpr94E1rS2DVIFqH5UpagbfbOGPeGY" }
+    ];
+
+    return (
+        <section className="max-w-7xl mx-auto px-6 mb-24" id="species">
+            <div className="flex items-end justify-between mb-10">
+                <div>
+                    <h3 className="text-3xl font-display font-bold mb-2">Supported Species</h3>
+                    <p className="text-slate-500 dark:text-slate-400">Our model is optimized for the most common pathogenic bacteria.</p>
+                </div>
+                <a className="cursor-target text-primary font-semibold flex items-center gap-1 hover:underline cursor-pointer">
+                    View all 50+ species <span className="material-symbols-outlined text-sm">arrow_forward</span>
+                </a>
+            </div>
+            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-x-6 gap-y-12">
+                {speciesList.map((species, i) => (
+                    <div key={i} className="group flex flex-col items-center text-center">
+                        <div className="aspect-square w-full max-w-[140px] md:max-w-[160px] rounded-full overflow-hidden mb-4 relative border-4 border-slate-100 dark:border-slate-800/80 group-hover:border-primary/50 group-hover:shadow-[0_0_30px_rgba(19,164,236,0.4)] transition-all duration-300">
+                            <img className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" alt={`Microscopic view of ${species.full}`} src={species.img} />
+                            {/* Inner ring to give petri-dish feel */}
+                            <div className="absolute inset-0 rounded-full border border-white/10 dark:border-white/5 pointer-events-none" />
+                        </div>
+                        <h4 className="font-bold text-sm mb-1 italic text-slate-900 dark:text-slate-100">{species.name}</h4>
+                        <p className="text-xs text-slate-500 leading-tight px-2">{species.traits}</p>
+                    </div>
+                ))}
+            </div>
+        </section>
+    );
+};

frontend/src/components/TargetCursor.tsx

@@ -0,0 +1,321 @@
+import React, { useEffect, useRef, useCallback, useMemo } from 'react';
+import { gsap } from 'gsap';
+
+export interface TargetCursorProps {
+  targetSelector?: string;
+  spinDuration?: number;
+  hideDefaultCursor?: boolean;
+  hoverDuration?: number;
+  parallaxOn?: boolean;
+}
+
+const TargetCursor: React.FC<TargetCursorProps> = ({
+  targetSelector = '.cursor-target',
+  spinDuration = 2,
+  hideDefaultCursor = true,
+  hoverDuration = 0.2,
+  parallaxOn = true
+}) => {
+  const cursorRef = useRef<HTMLDivElement>(null);
+  const cornersRef = useRef<NodeListOf<HTMLDivElement> | null>(null);
+  const spinTl = useRef<gsap.core.Timeline | null>(null);
+  const dotRef = useRef<HTMLDivElement>(null);
+
+  const isActiveRef = useRef(false);
+  const targetCornerPositionsRef = useRef<{ x: number; y: number }[] | null>(null);
+  const tickerFnRef = useRef<(() => void) | null>(null);
+  const activeStrengthRef = useRef({ current: 0 });
+
+  const isMobile = useMemo(() => {
+    const hasTouchScreen = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+    const isSmallScreen = window.innerWidth <= 768;
+    const userAgent = navigator.userAgent || navigator.vendor || (window as any).opera;
+    const mobileRegex = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i;
+    const isMobileUserAgent = mobileRegex.test(userAgent.toLowerCase());
+    return (hasTouchScreen && isSmallScreen) || isMobileUserAgent;
+  }, []);
+
+  const constants = useMemo(() => ({ borderWidth: 3, cornerSize: 12 }), []);
+
+  const moveCursor = useCallback((x: number, y: number) => {
+    if (!cursorRef.current) return;
+    gsap.to(cursorRef.current, { x, y, duration: 0.1, ease: 'power3.out' });
+  }, []);
+
+  useEffect(() => {
+    if (isMobile || !cursorRef.current) return;
+
+    const originalCursor = document.body.style.cursor;
+    if (hideDefaultCursor) {
+      document.body.style.cursor = 'none';
+      const style = document.createElement('style');
+      style.id = 'hide-default-cursor-style';
+      style.innerHTML = `
+        * { cursor: none !important; }
+      `;
+      document.head.appendChild(style);
+    }
+
+    const cursor = cursorRef.current;
+    cornersRef.current = cursor.querySelectorAll<HTMLDivElement>('.target-cursor-corner');
+
+    let activeTarget: Element | null = null;
+    let currentLeaveHandler: (() => void) | null = null;
+    let resumeTimeout: ReturnType<typeof setTimeout> | null = null;
+
+    const cleanupTarget = (target: Element) => {
+      if (currentLeaveHandler) {
+        target.removeEventListener('mouseleave', currentLeaveHandler);
+      }
+      currentLeaveHandler = null;
+    };
+
+    gsap.set(cursor, {
+      xPercent: -50,
+      yPercent: -50,
+      x: window.innerWidth / 2,
+      y: window.innerHeight / 2
+    });
+
+    const createSpinTimeline = () => {
+      if (spinTl.current) {
+        spinTl.current.kill();
+      }
+      spinTl.current = gsap
+        .timeline({ repeat: -1 })
+        .to(cursor, { rotation: '+=360', duration: spinDuration, ease: 'none' });
+    };
+
+    createSpinTimeline();
+
+    const tickerFn = () => {
+      if (!targetCornerPositionsRef.current || !cursorRef.current || !cornersRef.current) {
+        return;
+      }
+      const strength = activeStrengthRef.current.current;
+      if (strength === 0) return;
+      const cursorX = gsap.getProperty(cursorRef.current, 'x') as number;
+      const cursorY = gsap.getProperty(cursorRef.current, 'y') as number;
+      const corners = Array.from(cornersRef.current);
+      corners.forEach((corner, i) => {
+        const currentX = gsap.getProperty(corner, 'x') as number;
+        const currentY = gsap.getProperty(corner, 'y') as number;
+        const targetX = targetCornerPositionsRef.current![i].x - cursorX;
+        const targetY = targetCornerPositionsRef.current![i].y - cursorY;
+        const finalX = currentX + (targetX - currentX) * strength;
+        const finalY = currentY + (targetY - currentY) * strength;
+        const duration = strength >= 0.99 ? (parallaxOn ? 0.2 : 0) : 0.05;
+        gsap.to(corner, {
+          x: finalX,
+          y: finalY,
+          duration: duration,
+          ease: duration === 0 ? 'none' : 'power1.out',
+          overwrite: 'auto'
+        });
+      });
+    };
+
+    tickerFnRef.current = tickerFn;
+
+    const moveHandler = (e: MouseEvent) => moveCursor(e.clientX, e.clientY);
+    window.addEventListener('mousemove', moveHandler);
+
+    const scrollHandler = () => {
+      if (!activeTarget || !cursorRef.current) return;
+      const mouseX = gsap.getProperty(cursorRef.current, 'x') as number;
+      const mouseY = gsap.getProperty(cursorRef.current, 'y') as number;
+      const elementUnderMouse = document.elementFromPoint(mouseX, mouseY);
+      const isStillOverTarget =
+        elementUnderMouse &&
+        (elementUnderMouse === activeTarget || elementUnderMouse.closest(targetSelector) === activeTarget);
+      if (!isStillOverTarget) {
+        currentLeaveHandler?.();
+      }
+    };
+    window.addEventListener('scroll', scrollHandler, { passive: true });
+
+    const mouseDownHandler = () => {
+      if (!dotRef.current) return;
+      gsap.to(dotRef.current, { scale: 0.7, duration: 0.3 });
+      gsap.to(cursorRef.current, { scale: 0.9, duration: 0.2 });
+    };
+
+    const mouseUpHandler = () => {
+      if (!dotRef.current) return;
+      gsap.to(dotRef.current, { scale: 1, duration: 0.3 });
+      gsap.to(cursorRef.current, { scale: 1, duration: 0.2 });
+    };
+
+    window.addEventListener('mousedown', mouseDownHandler);
+    window.addEventListener('mouseup', mouseUpHandler);
+
+    const enterHandler = (e: MouseEvent) => {
+      const directTarget = e.target as Element;
+      const allTargets: Element[] = [];
+      let current: Element | null = directTarget;
+      while (current && current !== document.body) {
+        if (current.matches(targetSelector)) {
+          allTargets.push(current);
+        }
+        current = current.parentElement;
+      }
+      const target = allTargets[0] || null;
+      if (!target || !cursorRef.current || !cornersRef.current) return;
+      if (activeTarget === target) return;
+      if (activeTarget) {
+        cleanupTarget(activeTarget);
+      }
+      if (resumeTimeout) {
+        clearTimeout(resumeTimeout);
+        resumeTimeout = null;
+      }
+
+      activeTarget = target;
+      const corners = Array.from(cornersRef.current);
+      corners.forEach(corner => gsap.killTweensOf(corner));
+      gsap.killTweensOf(cursorRef.current, 'rotation');
+      spinTl.current?.pause();
+      gsap.set(cursorRef.current, { rotation: 0 });
+
+      const rect = target.getBoundingClientRect();
+      const { borderWidth, cornerSize } = constants;
+      const cursorX = gsap.getProperty(cursorRef.current, 'x') as number;
+      const cursorY = gsap.getProperty(cursorRef.current, 'y') as number;
+
+      targetCornerPositionsRef.current = [
+        { x: rect.left - borderWidth, y: rect.top - borderWidth },
+        { x: rect.right + borderWidth - cornerSize, y: rect.top - borderWidth },
+        { x: rect.right + borderWidth - cornerSize, y: rect.bottom + borderWidth - cornerSize },
+        { x: rect.left - borderWidth, y: rect.bottom + borderWidth - cornerSize }
+      ];
+
+      isActiveRef.current = true;
+      gsap.ticker.add(tickerFnRef.current!);
+
+      gsap.to(activeStrengthRef.current, { current: 1, duration: hoverDuration, ease: 'power2.out' });
+
+      corners.forEach((corner, i) => {
+        gsap.to(corner, {
+          x: targetCornerPositionsRef.current![i].x - cursorX,
+          y: targetCornerPositionsRef.current![i].y - cursorY,
+          duration: 0.2,
+          ease: 'power2.out'
+        });
+      });
+
+      const leaveHandler = () => {
+        gsap.ticker.remove(tickerFnRef.current!);
+        isActiveRef.current = false;
+        targetCornerPositionsRef.current = null;
+        gsap.set(activeStrengthRef.current, { current: 0, overwrite: true });
+        activeTarget = null;
+        if (cornersRef.current) {
+          const corners = Array.from(cornersRef.current);
+          gsap.killTweensOf(corners);
+          const { cornerSize } = constants;
+          const positions = [
+            { x: -cornerSize * 1.5, y: -cornerSize * 1.5 },
+            { x: cornerSize * 0.5, y: -cornerSize * 1.5 },
+            { x: cornerSize * 0.5, y: cornerSize * 0.5 },
+            { x: -cornerSize * 1.5, y: cornerSize * 0.5 }
+          ];
+          const tl = gsap.timeline();
+          corners.forEach((corner, index) => {
+            tl.to(corner, { x: positions[index].x, y: positions[index].y, duration: 0.3, ease: 'power3.out' }, 0);
+          });
+        }
+        resumeTimeout = setTimeout(() => {
+          if (!activeTarget && cursorRef.current && spinTl.current) {
+            const currentRotation = gsap.getProperty(cursorRef.current, 'rotation') as number;
+            const normalizedRotation = currentRotation % 360;
+            spinTl.current.kill();
+            spinTl.current = gsap
+              .timeline({ repeat: -1 })
+              .to(cursorRef.current, { rotation: '+=360', duration: spinDuration, ease: 'none' });
+            gsap.to(cursorRef.current, {
+              rotation: normalizedRotation + 360,
+              duration: spinDuration * (1 - normalizedRotation / 360),
+              ease: 'none',
+              onComplete: () => {
+                spinTl.current?.restart();
+              }
+            });
+          }
+          resumeTimeout = null;
+        }, 50);
+        cleanupTarget(target);
+      };
+      currentLeaveHandler = leaveHandler;
+      target.addEventListener('mouseleave', leaveHandler);
+    };
+
+    window.addEventListener('mouseover', enterHandler as EventListener);
+
+    return () => {
+      if (tickerFnRef.current) {
+        gsap.ticker.remove(tickerFnRef.current);
+      }
+      window.removeEventListener('mousemove', moveHandler);
+      window.removeEventListener('mouseover', enterHandler as EventListener);
+      window.removeEventListener('scroll', scrollHandler);
+      window.removeEventListener('mousedown', mouseDownHandler);
+      window.removeEventListener('mouseup', mouseUpHandler);
+      if (activeTarget) {
+        cleanupTarget(activeTarget);
+      }
+      spinTl.current?.kill();
+      document.body.style.cursor = originalCursor;
+      const styleTag = document.getElementById('hide-default-cursor-style');
+      if (styleTag) styleTag.remove();
+      isActiveRef.current = false;
+      targetCornerPositionsRef.current = null;
+      activeStrengthRef.current.current = 0;
+    };
+  }, [targetSelector, spinDuration, moveCursor, constants, hideDefaultCursor, isMobile, hoverDuration, parallaxOn]);
+
+  useEffect(() => {
+    if (isMobile || !cursorRef.current || !spinTl.current) return;
+    if (spinTl.current.isActive()) {
+      spinTl.current.kill();
+      spinTl.current = gsap
+        .timeline({ repeat: -1 })
+        .to(cursorRef.current, { rotation: '+=360', duration: spinDuration, ease: 'none' });
+    }
+  }, [spinDuration, isMobile]);
+
+  if (isMobile) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={cursorRef}
+      className="fixed top-0 left-0 w-0 h-0 pointer-events-none z-[9999]"
+      style={{ willChange: 'transform' }}
+    >
+      <div
+        ref={dotRef}
+        className="absolute top-1/2 left-1/2 w-1 h-1 bg-white rounded-full -translate-x-1/2 -translate-y-1/2"
+        style={{ willChange: 'transform', mixBlendMode: 'difference' }}
+      />
+      <div
+        className="target-cursor-corner absolute top-1/2 left-1/2 w-3 h-3 border-[3px] border-white -translate-x-[150%] -translate-y-[150%] border-r-0 border-b-0"
+        style={{ willChange: 'transform', mixBlendMode: 'difference' }}
+      />
+      <div
+        className="target-cursor-corner absolute top-1/2 left-1/2 w-3 h-3 border-[3px] border-white translate-x-1/2 -translate-y-[150%] border-l-0 border-b-0"
+        style={{ willChange: 'transform', mixBlendMode: 'difference' }}
+      />
+      <div
+        className="target-cursor-corner absolute top-1/2 left-1/2 w-3 h-3 border-[3px] border-white translate-x-1/2 translate-y-1/2 border-l-0 border-t-0"
+        style={{ willChange: 'transform', mixBlendMode: 'difference' }}
+      />
+      <div
+        className="target-cursor-corner absolute top-1/2 left-1/2 w-3 h-3 border-[3px] border-white -translate-x-[150%] translate-y-1/2 border-r-0 border-t-0"
+        style={{ willChange: 'transform', mixBlendMode: 'difference' }}
+      />
+    </div>
+  );
+};
+
+export default TargetCursor;

frontend/src/components/UploadZone.tsx

@@ -0,0 +1,301 @@
+import { useState, useRef } from "react";
+
+export interface PredictionResult {
+    filename?: string;
+    success: boolean;
+    error?: string;
+    prediction?: string;
+    confidence?: number;
+    probabilities?: { name: string; probability: number }[];
+    details?: {
+        gram_stain: string;
+        shape: string;
+        pathogenicity: string;
+    };
+    previewUrl?: string;
+}
+
+const PRECAUTIONS: Record<string, string> = {
+    "Escherichia coli": "Indicator of fecal contamination. \n\nPrecautions/Actions: Boil water immediately before consumption. Source trace to find sewage leaks. Do not use for washing open wounds.",
+    "Pseudomonas aeruginosa": "Opportunistic pathogen resistant to many sanitizers. \n\nPrecautions/Actions: Ensure water chlorination levels are adequate. Can cause severe infections in immunocompromised individuals. Avoid contact with eyes or ears.",
+    "Enterococcus faecalis": "Indicates prolonged fecal contamination. Very resilient. \n\nPrecautions/Actions: Shock chlorinate the water system. Discontinue use for drinking until negative tests are returned.",
+    "Clostridium perfringens": "Spore-forming bacteria, highly resistant to standard disinfection. \n\nPrecautions/Actions: Indicates remote or past fecal contamination. UV filtration or extreme heat treatment may be required.",
+    "Listeria monocytogenes": "Dangerous to pregnant women and immunocompromised individuals. \n\nPrecautions/Actions: Do not use water for food preparation or drinking. Pasteurization/boiling is required."
+};
+
+interface UploadZoneProps {
+    onResultsGenerated?: (results: PredictionResult[] | null) => void;
+}
+
+export const UploadZone = ({ onResultsGenerated }: UploadZoneProps) => {
+    const [files, setFiles] = useState<File[]>([]);
+    const [isUploading, setIsUploading] = useState(false);
+    const [progress, setProgress] = useState(0);
+    const [localResults, setLocalResults] = useState<PredictionResult[] | null>(null);
+    const [selectedResult, setSelectedResult] = useState<PredictionResult | null>(null);
+    const [error, setError] = useState<string | null>(null);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    const handleFiles = async (selectedFiles: FileList | File[]) => {
+        const fileArray = Array.from(selectedFiles);
+        if (fileArray.length === 0) return;
+        
+        setFiles(fileArray);
+        
+        // Generate preview URLs
+        const previewUrls = fileArray.map(f => URL.createObjectURL(f));
+        
+        setLocalResults(null);
+        if (onResultsGenerated) onResultsGenerated(null);
+        setSelectedResult(null);
+        setError(null);
+        setIsUploading(true);
+        setProgress(20);
+
+        const formData = new FormData();
+        fileArray.forEach(f => {
+            formData.append("files", f);
+        });
+
+        try {
+            setProgress(60);
+            const apiUrl = import.meta.env.VITE_API_URL || "http://localhost:5000";
+            const response = await fetch(`${apiUrl}/predict_batch`, {
+                method: "POST",
+                body: formData,
+            });
+
+            if (!response.ok) {
+                throw new Error("Failed to analyze images");
+            }
+            
+            setProgress(90);
+            const data = await response.json();
+            
+            // Attach preview URLs to results for display
+            if (data.results && Array.isArray(data.results)) {
+                const resultsWithPreviews = data.results.map((r: any) => {
+                    const matchIndex = fileArray.findIndex(f => f.name === r.filename);
+                    return {
+                        ...r,
+                        previewUrl: matchIndex >= 0 ? previewUrls[matchIndex] : null
+                    };
+                });
+                setLocalResults(resultsWithPreviews);
+                if (onResultsGenerated) onResultsGenerated(resultsWithPreviews);
+            }
+            setProgress(100);
+        } catch (err: any) {
+            setError(err.message || "An error occurred");
+        } finally {
+            setIsUploading(false);
+        }
+    };
+
+    const onFileDrop = (e: React.DragEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        if (e.dataTransfer.files.length > 0) {
+            handleFiles(e.dataTransfer.files);
+        }
+    };
+
+    const onFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (e.target.files && e.target.files.length > 0) {
+            handleFiles(e.target.files);
+        }
+    };
+
+    return (
+        <section className="max-w-7xl mx-auto px-6 mb-24 relative z-10" id="upload">
+            <div className={`grid ${localResults ? 'grid-cols-1 lg:grid-cols-3' : 'grid-cols-1 max-w-2xl mx-auto'} gap-8`}>
+                <div className="space-y-6 lg:col-span-1">
+                    <h3 className="text-3xl font-display font-bold">Upload Zone</h3>
+                    
+                    <div 
+                        onDragOver={(e) => e.preventDefault()}
+                        onDrop={onFileDrop}
+                        onClick={() => fileInputRef.current?.click()}
+                        className="cursor-target border-2 border-dashed border-primary/30 rounded-3xl p-12 flex flex-col items-center justify-center text-center bg-background-light/50 dark:bg-background-dark/50 backdrop-blur-md hover:bg-primary/10 transition-colors group cursor-pointer h-64"
+                    >
+                        <input 
+                            type="file" 
+                            ref={fileInputRef} 
+                            onChange={onFileChange} 
+                            className="hidden" 
+                            accept="image/*"
+                            multiple
+                        />
+                        <div className="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
+                            <span className="material-symbols-outlined text-primary text-3xl">cloud_upload</span>
+                        </div>
+                        <h4 className="text-lg font-bold mb-2 text-slate-900 dark:text-white">Drag & drop images</h4>
+                        <p className="text-sm text-slate-500 dark:text-slate-400 mb-4">Supports JPG, PNG up to 20MB.</p>
+                        <button className="cursor-target bg-primary text-white px-5 py-2 rounded-lg font-bold hover:scale-105 transition-transform text-sm">Browse</button>
+                    </div>
+
+                    {/* Upload Progress */}
+                    {isUploading && (
+                        <div className="bg-slate-100 dark:bg-slate-800/80 p-6 rounded-2xl border border-slate-200 dark:border-slate-700 backdrop-blur-md">
+                            <div className="flex items-center justify-between mb-2">
+                                <span className="text-sm font-semibold text-slate-900 dark:text-slate-100">Processing {files.length} images</span>
+                                <span className="text-sm font-bold text-primary">{progress}%</span>
+                            </div>
+                            <div className="w-full h-2 bg-slate-200 dark:bg-slate-700 rounded-full overflow-hidden">
+                                <div className="h-full bg-primary rounded-full transition-all duration-300" style={{ width: `${progress}%` }}></div>
+                            </div>
+                            <p className="text-xs text-slate-500 mt-3 flex items-center gap-1">
+                                <span className="material-symbols-outlined text-[14px] animate-spin">sync</span>
+                                Analyzing morphological features...
+                            </p>
+                        </div>
+                    )}
+                    
+                    {error && (
+                        <div className="bg-red-500/10 border border-red-500/20 text-red-500 p-4 rounded-xl flex items-center gap-2">
+                            <span className="material-symbols-outlined">error</span>
+                            {error}
+                        </div>
+                    )}
+                </div>
+
+                {localResults && (
+                    <div className="space-y-6 lg:col-span-2">
+                        <div className="flex items-center justify-between">
+                            <h3 className="text-3xl font-display font-bold">Analysis Results</h3>
+                            <span className="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-bold">{localResults.length} processed</span>
+                        </div>
+                        
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            {localResults.map((res, index) => (
+                                <div 
+                                    key={index} 
+                                    onClick={() => res.success && setSelectedResult(res)}
+                                    className={`bg-white/80 dark:bg-slate-800/80 backdrop-blur-md p-6 rounded-3xl border border-slate-200 dark:border-slate-700 shadow-xl flex flex-col ${res.success ? 'cursor-pointer hover:scale-[1.02] hover:border-primary/50 transition-all' : ''}`}
+                                    title={res.success ? "Click for detailed summary" : ""}
+                                >
+                                    <div className="flex gap-4 mb-4">
+                                        <div className="w-24 h-24 rounded-2xl overflow-hidden border border-primary/20 flex-shrink-0 bg-black">
+                                            {res.previewUrl ? (
+                                                <img className="w-full h-full object-cover" alt={`Upload ${index}`} src={res.previewUrl} />
+                                            ) : (
+                                                <div className="w-full h-full flex items-center justify-center bg-slate-800"><span className="material-symbols-outlined text-slate-500">image</span></div>
+                                            )}
+                                        </div>
+                                        <div className="flex-1 min-w-0">
+                                            <p className="text-xs text-slate-500 dark:text-slate-400 truncate mb-1" title={res.filename}>{res.filename}</p>
+                                            
+                                            {res.success && res.prediction ? (
+                                                <>
+                                                    <h4 className="text-lg font-bold italic text-slate-900 dark:text-slate-100 leading-tight mb-2 truncate" title={res.prediction}>{res.prediction}</h4>
+                                                    <div className={`inline-flex items-center gap-1 text-xs font-bold px-2 py-1 rounded-full whitespace-nowrap ${(res.confidence || 0) > 80 ? 'bg-green-500/10 text-green-500' : 'bg-yellow-500/10 text-yellow-500'}`}>
+                                                        <span className="material-symbols-outlined text-[14px]">{(res.confidence || 0) > 80 ? 'verified' : 'warning'}</span>
+                                                        {(res.confidence || 0).toFixed(1)}% Conf
+                                                    </div>
+                                                </>
+                                            ) : (
+                                                <div className="text-red-500 text-sm font-bold flex items-center gap-1">
+                                                    <span className="material-symbols-outlined text-sm">error</span> Failed
+                                                </div>
+                                            )}
+                                        </div>
+                                    </div>
+
+                                    {res.success && res.details && (
+                                        <div className="flex-1 flex flex-col justify-end">
+                                            <div className="grid grid-cols-2 gap-2 p-3 bg-slate-50 dark:bg-slate-900/50 rounded-xl">
+                                                <div className="text-xs text-slate-900 dark:text-slate-100">
+                                                    <span className="text-slate-500 block mb-0.5 mt-0">Morphology</span>
+                                                    <span className="font-semibold">{res.details.shape}</span>
+                                                </div>
+                                                <div className="text-xs text-slate-900 dark:text-slate-100">
+                                                    <span className="text-slate-500 block mb-0.5 mt-0">Stain</span>
+                                                    <span className="font-semibold">{res.details.gram_stain}</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    )}
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                )}
+            </div>
+
+            {/* Modal Dialog Box */}
+            {selectedResult && (
+                <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm" onClick={() => setSelectedResult(null)}>
+                    <div 
+                        className="bg-white dark:bg-slate-900 rounded-3xl max-w-2xl w-full max-h-[90vh] overflow-y-auto shadow-2xl border border-slate-200 dark:border-slate-700"
+                        onClick={e => e.stopPropagation()}
+                    >
+                        <div className="p-6 md:p-8 flex flex-col gap-6">
+                            <div className="flex items-start justify-between">
+                                <h3 className="text-2xl font-bold font-display text-slate-900 dark:text-white">Detailed Classification Summary</h3>
+                                <button onClick={() => setSelectedResult(null)} className="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors">
+                                    <span className="material-symbols-outlined">close</span>
+                                </button>
+                            </div>
+
+                            <div className="flex flex-col md:flex-row gap-6">
+                                <div className="w-full md:w-48 h-48 rounded-2xl overflow-hidden bg-black flex-shrink-0 border-4 border-slate-100 dark:border-slate-800">
+                                    {selectedResult.previewUrl ? (
+                                        <img src={selectedResult.previewUrl} alt="Analyzed bacteria" className="w-full h-full object-cover" />
+                                    ) : (
+                                        <div className="w-full h-full flex items-center justify-center text-slate-500"><span className="material-symbols-outlined text-4xl">image</span></div>
+                                    )}
+                                </div>
+                                <div className="flex-1 space-y-4">
+                                    <div>
+                                        <span className="text-sm font-bold text-slate-500 uppercase tracking-wider">Predicted Species</span>
+                                        <h4 className="text-3xl font-bold italic text-primary mt-1">{selectedResult.prediction}</h4>
+                                    </div>
+                                    
+                                    <div className="grid grid-cols-2 gap-4">
+                                        <div className="bg-slate-50 dark:bg-slate-800/50 p-3 rounded-xl">
+                                            <span className="text-xs text-slate-500 block mb-1">Confidence</span>
+                                            <span className="text-lg font-bold text-slate-900 dark:text-white">{(selectedResult.confidence || 0).toFixed(1)}%</span>
+                                        </div>
+                                        <div className="bg-slate-50 dark:bg-slate-800/50 p-3 rounded-xl">
+                                            <span className="text-xs text-slate-500 block mb-1">Risk Level</span>
+                                            <span className="text-lg font-bold text-slate-900 dark:text-white">{selectedResult.details?.pathogenicity || 'Unknown'}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-2">
+                                <div className="space-y-3">
+                                    <h5 className="font-bold text-slate-900 dark:text-white border-b border-slate-200 dark:border-slate-700 pb-2">Microbiology Specifics</h5>
+                                    <ul className="space-y-2 text-sm text-slate-600 dark:text-slate-300">
+                                        <li className="flex justify-between"><span>Gram Stain:</span> <strong className="text-slate-900 dark:text-white">{selectedResult.details?.gram_stain}</strong></li>
+                                        <li className="flex justify-between"><span>Morphology:</span> <strong className="text-slate-900 dark:text-white">{selectedResult.details?.shape}</strong></li>
+                                        <li className="flex justify-between"><span>Pathogenicity:</span> <strong className="text-slate-900 dark:text-white">{selectedResult.details?.pathogenicity}</strong></li>
+                                    </ul>
+                                </div>
+
+                                <div className="space-y-3">
+                                    <h5 className="font-bold text-slate-900 dark:text-white border-b border-slate-200 dark:border-slate-700 pb-2">Precautions & Actions</h5>
+                                    <div className="bg-yellow-50 dark:bg-yellow-500/10 border border-yellow-200 dark:border-yellow-500/20 rounded-xl p-4 text-sm text-yellow-800 dark:text-yellow-200 shadow-inner">
+                                        <div className="flex gap-2 items-start whitespace-pre-line">
+                                            <span className="material-symbols-outlined text-[18px] mt-0.5">warning</span>
+                                            <p className="leading-relaxed m-0">
+                                                {selectedResult.prediction ? (PRECAUTIONS[selectedResult.prediction] || "Standard water safety protocols apply. Heat above 70°C before any consumption.") : "Unknown"}
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div className="mt-4 flex justify-end">
+                                <button className="px-6 py-2 bg-slate-900 dark:bg-white text-white dark:text-slate-900 font-bold rounded-xl hover:scale-105 transition-transform" onClick={() => setSelectedResult(null)}>
+                                    Close Details
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </section>
+    );
+};
+

frontend/src/index.css

@@ -0,0 +1 @@
+/* Tailwind CSS is injected via CDN in index.html for rapid prototyping */

frontend/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}