A high-performance, portfolio-quality image classification platform that identifies whether an uploaded image is a Cat or a Dog using a pre-trained Support Vector Machine (SVM) classifier.
This repository contains the complete full-stack codebase, consisting of a Flask API backend and a React + Vite + Tailwind CSS frontend, designed with a modern gradient interface and smooth micro-animations.
PetVision provides an elegant user interface to interact with classic Machine Learning models in real-time. While modern image classification tasks typically utilize Deep Learning (CNNs), this project demonstrates that classical algorithms like Support Vector Machines (SVMs) combined with optimized preprocessing pipelines can act as fast, lightweight classification baselines.
- Drag-and-Drop Upload: Seamless file-dragging interface built natively with HTML5 drag-and-drop APIs.
- Instant Preview: Visualizes selected images with file metadata (size, name) before triggering classification.
- Micro-Animations: Fluid layout transitions, hover states, floating actions, and custom loading states powered by Framer Motion.
- Confidence Metric: Estimates certainty levels by mapping SVM decision boundaries (signed hyperplane distance) to a percentage score.
- Latency Indicator: Displays processing speeds in milliseconds, highlighting the efficiency of the raw pixel SVM pipeline.
- Classification History: Caches previous analyses locally in browser storage (
localStorage) so history items persist across page reloads. - Detailed Specifications: Features an interactive dashboard detailing image preprocessing steps, scaling rationales, and SVM kernel comparison parameters.
- Fully Responsive: Beautifully crafted layouts optimized for mobile, tablet, and desktop viewports.
- React 19 & Vite: Next-generation build tool securing lightning-fast HMR and compile speeds.
- Tailwind CSS v4: Utility-first styling utilizing a native CSS-injected design system.
- Framer Motion: Modern animation engine for fluid transitions and loading states.
- Axios: Promise-based HTTP client for API communication.
- React Router: Lightweight routing.
- Lucide React: A clean icon library.
- Flask: Lightweight Python WSGI server config.
- Flask-CORS: Cross-Origin Resource Sharing enablement for local development connectivity.
- Joblib: Deserializes trained model artifacts, feature scalers, and label encoders.
- OpenCV & NumPy: High-performance matrix image decoding, resizing, and normalizing.
- Scikit-Learn: Core SVM algorithm engine.
flowchart LR
User([User])
React[React + Vite]
Flask[Flask Backend]
OpenCV[OpenCV]
HOG[HOG Features]
Scaler[StandardScaler]
SVM[SVM Model]
Result[Prediction]
User --> React
React --> Flask
Flask --> OpenCV
OpenCV --> HOG
HOG --> Scaler
Scaler --> SVM
SVM --> Result
Result --> React
To prepare raw images for the Support Vector Machine (SVM):
- Grayscale Conversion: Reduces RGB matrices to 1 channel, eliminating color and illumination channel redundancy.
-
Resizing: Standardizes all input images to a uniform grid of
$128 \times 128$ pixels, providing adequate resolution for edge gradient calculations. -
HOG Feature Extraction: Computes a Histogram of Oriented Gradients using 9 orientation bins,
$8 \times 8$ pixels per cell, and$2 \times 2$ cells per block (L2-Hys normalization), outputting a robust 8,100-dimensional feature vector. -
Feature Scaling: Transforms features using a pre-fitted
StandardScaler(scaler.transform()) to maintain unit variance across coordinates.
Histogram of Oriented Gradients (HOG) is chosen over raw pixel flattening to improve the robustness and accuracy of the classifier.
- Lighting Invariance: Raw pixel intensities are highly sensitive to illumination and exposure changes. HOG calculates local gradient orientations, capturing shapes and texture boundaries regardless of brightness.
- Spatial Tolerance: Minor translations or rotations of the subject change raw pixel indices entirely, whereas HOG aggregates orientations across localized cells, offering translation tolerance.
- Robust Feature Space: Flattening raw pixels loses spatial edge structures. Utilizing HOG features extracts contours, shapes, and textures matching canine and feline skeletal traits.
We trained both a Linear SVM and an RBF SVM on the extracted HOG feature representations.
- Linear Kernel SVM Accuracy: 62.50%
- RBF Kernel SVM Accuracy: 69.00%
The RBF Kernel was selected as the final classifier due to its superior capacity to separate non-linear HOG feature spaces.
- Accuracy: 69.00%
- Precision: 69.39%
- Recall: 68.00%
- F1 Score: 68.69%
precision recall f1-score support
Cat 0.69 0.70 0.69 200
Dog 0.69 0.68 0.69 200
accuracy 0.69 400
macro avg 0.69 0.69 0.69 400
weighted avg 0.69 0.69 0.69 400
Health check route to verify service status.
- Response Code:
200 OK - Response Body:
{
"image_input_size": "128x128 (HOG features)",
"message": "PetVision Classification Service is online.",
"model_architecture": "Support Vector Machine (SVM)",
"status": "healthy",
"supported_classes": ["Cat", "Dog"]
}Accepts an image upload and returns class predictions.
- Content-Type:
multipart/form-data - Payload Key:
image(File binary) - Response Code:
200 OK - Response Body:
{
"predicted_label": "Cat",
"confidence": 73.11,
"processing_time_ms": 75.67,
"filename": "cat.0.jpg"
}Note
Screenshots are stored in the local workspace /images directory following local browser subagent verification tests.
- Landing Page:
/images/landing_page.png - Prediction Page:
/images/prediction_page.png - About Specs Page:
/images/about_page.png
- Python 3.10 / 3.11
- Node.js 18+
# Navigate to workspace
cd backend
# Create and activate virtual environment
python -m venv venv
venv\Scripts\activate # On Unix: source venv/bin/activate
# Install requirements
pip install -r requirements.txt
# Run Flask app
python app.pyBackend runs locally at http://127.0.0.1:5000
# Navigate to frontend folder
cd frontend
# Install packages
npm install
# Run development server
npm run devFrontend runs locally at http://localhost:5173
The frontend can be built for production and deployed to Vercel:
npm run buildDefine the environment variable VITE_API_URL pointing to the deployed Flask backend API URL.
The backend can be containerized or deployed as a Python web service on Render, linking the build to backend/app.py. Set environment variable PORT to dynamically allocate the gateway.
- Feature Extractors (HOG/SIFT): Extracting Histogram of Oriented Gradients (HOG) features before classification will greatly improve SVM accuracy over raw pixel values.
- Platt Scaling: Train the SVM with
probability=Trueduring the initial training cycle to leverage true probabilistic scoring via cross-validation. - Deep Learning Hybrid: Extract features from a pre-trained CNN (like MobileNetV3) and use SVM strictly as the classification head.