ALIMAAZ
Back to Projects

Student Performance — Model Comparison

Machine LearningRegressionVanilla JSStreamlitChart.js

A premium, serverless Machine Learning Studio that compares 7 regression models with full EDA, dynamic leaderboard plots, and in-browser predictions using exported coefficients.

About the Project

The Student Performance Model Comparison Studio is a full-featured ML dashboard designed with a custom Sunset Warm theme (amber, orange, and alabaster cream). It compares 7 regression models (Linear Regression, Ridge, Lasso, Decision Tree, Random Forest, Gradient Boosting, and SVR) on a dataset of 1,000 students to analyze how demographics, preparation courses, and lunch types affect academic achievement.

Model Training & Inference Pipeline

To bypass cross-origin resource sharing (CORS) blocks and support serverless client-side evaluation, this project operates on a custom end-to-end ML pipeline:

Dataset

1,000 Records

Prep

One-hot Encoding

Training

7 Regressors

Validation

5-Fold CV

Leaderboard

Rank & Compare

Key Features

Packed with interactive diagnostic tools and analytics panels:

Sunset Predictor: Slider form with conic-gradient score gauges and dynamic performance feedback.

Exploratory Data Analysis: Real-time histograms for score distributions, inter-feature correlation heatmaps, and category box plots.

Model Leaderboard: Ranks algorithms based on average R² performance, with an overlay radar chart comparing the top 3 models.

Actual vs. Predicted Plot: Scatter comparison charts mapping model performance relative to a perfect prediction line (y = x).

Zero Network Overhead: Chart.js is bundled locally (chart.umd.min.js) to support 100% offline execution.

Tech Stack

Built using a combination of lightweight client scripts and Python ML tooling:

Frontend: HTML5, Vanilla CSS3 (custom CSS variables & gradients), JavaScript ES6

Visualization: Chart.js (locally bundled v4.x library)

ML Engine (Training): Python 3.11, Scikit-learn (7 regression algorithms, Standard Scaler, Label Encoder)

Data Wrangling: Pandas, NumPy

Python Alternative: Streamlit, Plotly, Seaborn, Matplotlib

Project Demo

Project Note

🔌 Dual Architecture Support This studio features two implementations: 1. Static Web Studio (Client-Side): A fast, lightweight, and fully offline-compatible dashboard in HTML/CSS/JS using Chart.js that computes predictions instantly inside the browser. 2. Streamlit Cloud (Server-Side): A Python-based analytics server utilizing Streamlit, Plotly, Seaborn, and Matplotlib. Both projects are housed within the unified GitHub repository.