Enjoy ML - Interactive Machine Learning Visualization

A frontend-first, interactive web application that lets you see + manipulate + understand machine learning systems dynamically. This is NOT a passive learning platform — it's an Interactive ML Systems Visualization Engine where you can train models live, visualize internal workings, and manipulate hyperparameters in real-time.

✨ Features

Phase 1 MVP (Current)

• 🎯 100% In-Browser ML - No backend required. All ML runs locally using TensorFlow.js
• 🎬 Real-Time Animation - Watch algorithms train step-by-step with smooth animations
• 🎮 Interactive Controls - Manipulate hyperparameters and see instant results
• 👤 Guest-First - No authentication required. Start learning immediately

ML Modules

Module	Description	Status
Gradient Descent	3D loss surface with animated descent path	✅ Complete
Linear Regression	Interactive fit line with real-time updates	✅ Complete
Neural Networks	Forward/backprop visualization with decision boundary	✅ Complete
K-Means Clustering	Centroid convergence animation	✅ Complete

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm 10+

Installation

# Clone the repository
git clone https://github.com/yourusername/enjoy-ml-ai-maths.git
cd enjoy-ml-ai-maths

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:3000 to see the application.

📁 Project Structure

enjoy-ml-ai-maths/
├── apps/
│   └── web/                    # Next.js frontend application
│       ├── app/                # App Router pages
│       ├── components/         # React components
│       │   ├── ui/             # Shared UI components
│       │   └── viz/            # Visualization components
│       ├── lib/                # Utilities and store
│       └── package.json
│
├── packages/
│   ├── ml-core/                # ML algorithms (TF.js)
│   ├── animation-engine/       # Timeline-based animation
│   ├── simulation-engine/      # Simulation pipeline
│   ├── visualization/          # Rendering layer
│   └── ui/                     # Design system
│
├── package.json                # Root (workspace)
├── turbo.json                  # Turborepo config
└── README.md

🛠️ Tech Stack

Layer	Technology	Purpose
Framework	Next.js 14 (App Router)	Full-stack React framework
Language	TypeScript	Type safety
ML Engine	TensorFlow.js	In-browser ML
3D Graphics	Three.js + React Three Fiber	3D visualizations
2D Charts	D3.js	Custom data viz
State	Zustand	Lightweight state management
Styling	Tailwind CSS	UI components
Animation	Custom Engine + Framer Motion	Simulation animations
Testing	Vitest + Playwright	Unit + E2E tests
Deployment	Vercel	Edge hosting

📚 Usage

Gradient Descent

1. Navigate to Gradient Descent module
2. Adjust learning rate and epochs using sliders
3. Choose a loss function (Quadratic, Rosenbrock, or Beale)
4. Click Play to watch the optimization
5. Use animation controls to step through frames

Linear Regression

1. Navigate to Linear Regression module
2. Adjust hyperparameters (learning rate, epochs, noise)
3. Click Regenerate Data for new data points
4. Watch the fit line converge in real-time
5. View R² and MSE metrics

Neural Networks

1. Navigate to Neural Networks module
2. Choose dataset type (Blobs, Moons, Circles)
3. Adjust hidden units and learning rate
4. Watch the decision boundary form
5. View network architecture visualization

K-Means Clustering

1. Navigate to K-Means module
2. Set number of clusters (K)
3. Adjust points per cluster
4. Watch centroids converge
5. View inertia metrics

🧪 Testing

# Run all tests
npm test

# Run tests with coverage
npm run test:coverage

# Run tests for specific package
cd packages/ml-core && npm test

🚢 Deployment

Deploy to Vercel

# Install Vercel CLI
npm install -g vercel

# Deploy
vercel

Or connect your GitHub repository to Vercel for automatic deployments.

🤝 Contributing

Contributions are welcome! Please follow these steps:

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

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• TensorFlow.js - In-browser machine learning
• Three.js - 3D graphics library
• React Three Fiber - React renderer for Three.js
• D3.js - Data visualization library
• Next.js - React framework
• Vercel - Deployment platform

📧 Contact

For questions or feedback, please open an issue on GitHub.

---

Built with ❤️ for ML education