Iris Species Classification & ML Studio
An interactive full-stack ML web app with live prediction, real-time SVG flower visualization, in-browser model training, and a FastAPI backend.
Project Overview
This project is an interactive full-stack Machine Learning Studio built around Fisher's classic Iris Dataset (150 samples, 3 species). It goes far beyond a simple classifier — featuring a live prediction interface, a real-time SVG flower visualizer that morphs based on input dimensions, an in-browser model training sandbox with multiple algorithms, and a professional FastAPI backend for server-side inference.
System Architecture
The application operates as a dual-mode system — a standalone client-side ML sandbox and a full-stack Python-served application:
Iris Data
150 Samples
JS ML Engine
LR / KNN / DT
SVG Visualizer
Live Morphing
FastAPI
Server Inference
Key Features
Every module is designed to be both educational and production-grade:
Interactive Predictor: Range sliders feed live inference with real-time probability bars for all 3 species.
SVG Flower Morphing: Sepals drawn at 30°, 150°, 270° and petals at 72° intervals using dynamic quadratic Bézier curves.
Visual Cluster Plot: Chart.js scatter plot showing dataset distributions with a live 'Your Input' marker that updates in real-time.
Confusion Matrix: CSS grid with dynamic opacity scaling to reflect classification count densities.
FastAPI /predict Endpoint: Pydantic-validated JSON input, probability matrices via predict_proba, and serialized model artifacts.
Tech Stack
A comprehensive full-stack architecture spanning client-side ML and server-side inference:
Frontend: Vanilla HTML/CSS/JS, Chart.js, SVG, custom-styled range inputs
Client-Side ML: Softmax Regression, KNN, Decision Tree (CART) — all from scratch in JS
Backend: Python, FastAPI, Scikit-learn, Joblib, Pydantic
Dataset: Fisher's Iris Dataset (150 instances, 4 features, 3 classes)