Machine learning; a subject considered extremely complex and difficult to understand have. Well, what if ML models and understanding the effects of hyperparameters don't have to be black box? HyperViz is a dynamic interactive web platform developed to allow visual learning for anyone interested in understanding the working of these models and how to tune hyperparameters efficiently. It turns the dry, theoretical concepts of machine learning into something intuitive and interactive. enabling users to understand how various algorithms work, visualize them via realtime simulations and experience the effects of hyperparameter tuning.
The project leverages NextJS in combination with TypeScript to create our scalable front-end application while we run models in the back using Flask, either with the help of ML libraries or direct implementation.
- KNN
- K Means
- Linear and Polynomial Regression
- DBSCAN
- Naive Bayes
- Neural Network: MLP
- Reinforcement Learning
- PCA
- SOM
- Decision Tree
- Frontend: React / NextJS + Canvas API
- Backend: Flask + ML Library
- Styling: TailwindCSS
- Visualization: Custom logic using React hooks and canvas rendering
- Install Material UI (Core + Icons)
npm install @mui/material @emotion/react @emotion/styled @mui/icons-material
- Install Three.js
npm install three
- Install Tailwind CSS
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p
git clone https://github.com/navinkumar-classic/hyperviz.git
cd hyperviz
npm install
npm run dev
We have made sure that our website is easily navigable and intuitive in its usage.
This dynamic Q-learning visualizaer helps to understand reinforcement learning and the effects of hyperparameters. The user can set the obstacles and tune the hyperparameters and manually run episode simulations and watch the reward progress in real time.
This visualizer helps the user to clearly understand how SOMs (Self Organizing Maps) classifier works, allowing the user to click anywhere to add their own points and tune the parameters.
The user can choose what type of regression they want to play with, set the hyperparameters and then place points to see the regression curve dynamically forming to fit their points.
To obtain further clarity into how to use the visualizer and some technical details to help gain better insights, the user can click on the "STEP BY STEP" button at the bottom left of the screen.
This project is licensed under the MIT License.
Contributions are welcome! Please follow these steps:
- Fork the repository.
- Create a new branch for your feature or bug fix.
- Commit your changes with descriptive messages.
- Submit a pull request for review.
- Sriram B. Swami
- A.O. Navin Kumar
- Meghna Varma
Thank you for exploring HyperViz. Let's learn ML smarter, stronger and better!