param

Demystifying machine learning, one parameter at a time.

param is an interactive machine learning education platform that combines in-depth conceptual articles with a hands-on experimentation playground. The platform bridges the gap between theoretical understanding and practical application. Every ML algorithm is explained from first principles with interactive visualizations, and users can immediately apply that knowledge by training models on real datasets.

Why param?

Machine learning has become so accessible that we've stopped asking how it actually works. We treat powerful algorithms like black boxes and hope for the best. But understanding isn't optional, it's essential.

param is where you peel back the layers, see the math in motion, and build the intuition that transforms users into practitioners. The future belongs to those who truly understand what they're building.

---

Features

Learning Center

• 10 comprehensive articles covering supervised, unsupervised, and deep learning algorithms
• 40+ interactive visualizations built with React and CSS animations
• Mathematical derivations with code implementations side-by-side
• Progress tracking and reading time estimates
• Note-taking system with text highlighting and annotations
• Article completion tracking for signed-in users

ML Playground

• Dataset Explorer with built-in datasets (Iris, Wine, Breast Cancer, California Housing, Titanic)
• Custom dataset uploads via CSV with automatic analysis
• 15 machine learning algorithms spanning regression and classification
• Real-time training with configurable hyperparameters
• Results visualization including:
  • Confusion matrices for classification
  • Actual vs. predicted plots for regression
  • Feature importance rankings
  • Learning curves showing train/test loss over iterations
• Experiment persistence with full configuration saving
• Experiment sharing via public links with one-click cloning

Data Analysis Tools

• Data preview with paginated row display
• Statistical summaries (mean, std, quartiles, null counts)
• Distribution histograms for any column
• Correlation heatmaps with interactive cell selection
• Scatter plots with customizable axis selection
• Outlier detection using IQR or Z-score methods

---

Architecture

┌─────────────────────────────────────────────────────────────────┐
│                         Browser                                  │
│  React 19 · Next.js 16 · TypeScript · Motion · Tailwind CSS     │
└─────────────────────────────────┬───────────────────────────────┘
         │ HTTPS
         ▼
┌─────────────────────────────────────────────────────────────────┐
│                      Next.js Application                         │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────────────┐   │
│  │  App Router  │  │  API Routes  │  │  Server Components   │   │
│  │    Pages     │  │   (Storage)  │  │   (Auth Callbacks)   │   │
│  └──────────────┘  └──────────────┘  └──────────────────────┘   │
└─────────────────────────────────┬───────────────────────────────┘
                                  │
          ┌───────────────────────┼───────────────────────┐
          │                       │                       │
          ▼                       ▼                       ▼
┌──────────────────┐   ┌──────────────────┐   ┌──────────────────┐
│  FastAPI Service │   │     Supabase     │   │  Supabase Auth   │
│  ──────────────  │   │  ──────────────  │   │  ──────────────  │
│  ML Training     │   │  PostgreSQL DB   │   │  Google OAuth    │
│  Dataset APIs    │   │  File Storage    │   │  GitHub OAuth    │
│  NumPy/Sklearn   │   │  Row-Level Sec   │   │  Email/Password  │
└──────────────────┘   └──────────────────┘   └──────────────────┘

---

Tech Stack

Frontend

Technology	Purpose
Next.js 16	React framework with App Router, server components, and API routes
React 19	UI library with concurrent features
TypeScript	Type safety across the entire frontend
Tailwind CSS 4	Utility-first styling
Motion (Framer)	Animations and micro-interactions
Lucide React	Icon system
@dnd-kit	Drag-and-drop for workspace panel management

Backend

Technology	Purpose
FastAPI	High-performance Python web framework
NumPy	Numerical computing for data processing
SciPy	Scientific computing utilities
scikit-learn	ML algorithm implementations
Pydantic	Request/response validation
Uvicorn	ASGI server

Infrastructure

Technology	Purpose
Supabase	PostgreSQL database with Row-Level Security
Supabase Auth	OAuth (Google, GitHub) and email authentication
Supabase Storage	User-uploaded dataset storage with signed URLs
Google Cloud Run	Containerized ML service deployment
Vercel	Frontend hosting with edge functions
Docker	Container images for ML service

---

Machine Learning Models

Regression Algorithms

Algorithm	Key Hyperparameters
Linear Regression	Regularization (None/L1/L2/Elastic Net), Alpha, L1 Ratio
Decision Tree	Max Depth, Min Samples Split, Min Samples Leaf
Random Forest	N Estimators, Max Depth, Min Samples Split
Gradient Boosting	N Estimators, Learning Rate, Max Depth
SVR	Kernel (Linear/Poly/RBF/Sigmoid), C, Epsilon
KNN	K Neighbors, Weights, Distance Metric
MLP (Neural Network)	Hidden Layers, Activation, Learning Rate, Max Iterations

Classification Algorithms

Algorithm	Key Hyperparameters
Logistic Regression	Penalty (None/L1/L2/Elastic Net), C, Max Iterations
Decision Tree	Max Depth, Min Samples Split, Criterion (Gini/Entropy)
Random Forest	N Estimators, Max Depth, Criterion
Gradient Boosting	N Estimators, Learning Rate, Max Depth
SVM	Kernel, C, Gamma
KNN	K Neighbors, Weights, Distance Metric
Naive Bayes	Variance Smoothing
MLP (Neural Network)	Hidden Layers, Activation, Learning Rate

Training Metrics

Regression: MSE, RMSE, MAE, R²
Classification: Accuracy, Precision, Recall, F1 Score, Confusion Matrix

---

Project Structure

MLPlayground/
├── web/                              # Next.js Frontend
│   ├── src/
│   │   ├── app/                      # App Router pages
│   │   │   ├── page.tsx              # Landing page
│   │   │   ├── playground/           # ML experimentation workspace
│   │   │   ├── learn/                # Article listing & individual articles
│   │   │   ├── shared/[token]/       # Public experiment sharing
│   │   │   ├── auth/callback/        # OAuth callback handler
│   │   │   └── api/storage/          # File storage API routes
│   │   │
│   │   ├── components/
│   │   │   ├── articles/             # 10 article components + 44 visualizations
│   │   │   ├── playground/           # Workspace, panels, modals
│   │   │   ├── landing/              # Landing page sections
│   │   │   ├── learn/                # Article cards, search, filters
│   │   │   ├── auth/                 # Authentication modal
│   │   │   └── ui/                   # Shared UI components
│   │   │
│   │   └── lib/
│   │       ├── api/                  # Backend API client
│   │       ├── auth/                 # Auth context and hooks
│   │       ├── experiments/          # Experiment state management
│   │       ├── notes/                # Article notes context
│   │       ├── storage/              # Supabase storage utilities
│   │       └── supabase/             # Supabase client configuration
│   │
│   └── supabase/migrations/          # Database schema migrations
│
├── ml-service/                       # Python ML Backend
│   ├── app/
│   │   ├── main.py                   # FastAPI application entry
│   │   ├── routers/
│   │   │   ├── datasets.py           # Dataset loading and analysis endpoints
│   │   │   └── experiments.py        # Model training and prediction endpoints
│   │   ├── models/                   # ML model implementations
│   │   └── utils/                    # Helper functions
│   │
│   ├── data/                         # Bundled CSV datasets
│   │   ├── iris.csv
│   │   ├── wine.csv
│   │   ├── breast-cancer.csv
│   │   ├── california-housing.csv
│   │   └── titanic.csv
│   │
│   ├── Dockerfile                    # Container configuration
│   └── requirements.txt              # Python dependencies
│
└── README.md

---

Getting Started

Prerequisites

• Node.js 20+
• Python 3.11+
• Supabase account (for authentication and storage)

Frontend Setup

cd web
npm install

Create .env.local:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
NEXT_PUBLIC_ML_API_URL=http://localhost:8000

npm run dev

Frontend runs at http://localhost:3000

Backend Setup

cd ml-service
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate
pip install -r requirements.txt
uvicorn app.main:app --reload --port 8000

API available at http://localhost:8000

Docker (ML Service)

cd ml-service
docker build -t param-ml .
docker run -p 8000:8000 param-ml

---

API Reference

Dataset Endpoints

Method	Endpoint	Description
GET	/api/datasets/list	List available built-in datasets
GET	/api/datasets/{id}/info	Get dataset metadata and column info
GET	/api/datasets/{id}/preview	Get paginated data rows
GET	/api/datasets/{id}/statistics	Get column statistics
GET	/api/datasets/{id}/distribution/{column}	Get histogram data
GET	/api/datasets/{id}/correlation	Get correlation matrix
GET	/api/datasets/{id}/scatter	Get scatter plot data
POST	/api/datasets/upload/analyze	Upload and analyze CSV file

Experiment Endpoints

Method	Endpoint	Description
POST	/api/experiments/train	Train a model with configuration
GET	/api/experiments/{id}/status	Get training status
POST	/api/experiments/{id}/predict	Get predictions for new data

---

Database Schema

Experiments Table

Stores ML experiment configurations, hyperparameters, and training results with full Row-Level Security.

Article Notes Table

User annotations and highlights on learning articles.

Article Reading Progress

Tracks completion status and reading progress per user.

Article Bookmarks

Quick-access bookmarks for articles.

All tables enforce RLS policies ensuring users can only access their own data. Shared experiments are readable by anyone via public tokens.

---

Educational Articles

Topic	Content
Linear Regression	OLS, gradient descent, regularization (Ridge, Lasso, Elastic Net)
Logistic Regression	Sigmoid, log-loss, multiclass via softmax
Decision Trees & Random Forests	Gini impurity, entropy, bagging, feature importance
K-Nearest Neighbors	Distance metrics, curse of dimensionality, weighted voting
Support Vector Machines	Maximum margin, kernel trick, soft margins
Naive Bayes	Bayes theorem, Gaussian/Multinomial/Bernoulli variants
Clustering	K-Means, DBSCAN, Gaussian Mixture Models
Dimensionality Reduction	PCA, LDA, t-SNE, UMAP
Gradient Boosting	Additive training, residual fitting, learning rate
Neural Networks	Backpropagation, activation functions, regularization

Each article includes:

• Mathematical foundations with LaTeX-rendered equations
• Step-by-step algorithm breakdowns
• Interactive visualizations
• Code implementations
• Links to from-scratch GitHub repositories

---

Deployment

Frontend (Vercel)

• Automatic deployments from main branch
• Environment variables configured in Vercel dashboard
• Edge functions for optimal performance

ML Service (Google Cloud Run)

• Multi-stage Docker build for minimal image size
• Non-root user for security
• Environment-based CORS configuration
• Auto-scaling based on request volume

---

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/improvement)
3. Commit changes (git commit -am 'Add new feature')
4. Push to branch (git push origin feature/improvement)
5. Open a Pull Request

---

Links

• Live Site: param.quest
• GitHub: github.com/omanshb/param
• Author: Omansh Bainsla

---

License

MIT