This project enables users to play around with a linear SVM (Support Vector Machine). Users provide labeled and unlabeled data points that are rendered on a Cartesian plane (powered by React & Chart.js). This data is served to a sklearn SVC model on the backend (FastAPI) that returns metrics around SVM performance + data necessary to render the decision boundary and margins. The purpose of this demo is to help demystify SVMs โจ
Frontend: React, Chart.js, react-chart-js-2
Backend: FastAPI, scikit-learn
npm
v8 or higherPython
v3.8.13 or highernode
v16 or higher
Fork and clone this repository
From parent directory...
cd client
npm install
npm start
This will spin up the React frontend on http://localhost:3000
From parent directory...
cd backend
Create python virtual environment
- For users with
conda
distribution:conda create --name <venv> python=3.8
conda deactivate
conda activate <venv>
- For other distributions:
pip install virtualenv
(if not already installed)python3 -m venv <virtual-environment-name>
source env/bin/activate
Next, install the necessary python packages in your virtual environment
pip install fastapi
pip install uvicorn
pip install scikit-learn
And finally...
uvicorn server:app --reload
This starts the server on http://localhost:8000
- Choose x and y values for at least two points. (The model requires at least 1 labeled and 1 unlabeled point to generate a response)
- Hit
Submit
! - Take a look at 1) the chart -- the legend describes what the different colors and shadings represent (SV = Support Vector), and 2) the
SVC Metrics
section -- this contains "Fit Status", "Model Accuracy", and "Margin Value" information. - Play around with the demo! (add points, remove points, or change points to see how the SVM responds)
If you want to learn more about SVMs, please check out Serafeim Loukas' "Support Vector Machines (SVM) clearly explained: A python tutorial for classification problems with 3D plots" or Alex Kataev's "SVM Classification with sklearn.svm.SVC: How To Plot A Decision Boundary With Margins in 2D Space" -- both of these articles helped make SVMs more intuitive for me, and I hope they do the same for you!
If you have feedback or are interested in collaborating, I'd love to connect! My email is [email protected]. Or if you prefer LinkedIn, drop me a DM ๐