🧠 ML Playground: In-Browser Image Classifier

ML Playground is a modern, interactive web application that allows you to train and test custom image classification models directly in your browser. Powered by TensorFlow.js, this tool provides a hands-on experience with machine learning concepts without requiring any complex server-side setup or specialized hardware.

Whether you're a student learning the fundamentals of neural networks, a developer prototyping an idea, or just curious about AI, this playground offers a simple yet powerful interface to bring your ML ideas to life.

✨ Key Features

• No-Backend Training: All machine learning operations, from feature extraction to model training, run entirely on the client-side using TensorFlow.js.
• Custom Classes: Define your own image classes (e.g., "Cat," "Dog," "Car") to build a classifier for your specific needs.
• Multiple Data Sources: Add training samples by uploading individual images or entire folders for each class.
• Customizable Neural Network: Visually build and configure the model's architecture by adding, removing, and tuning dense layers, activation functions, and dropout rates.
• Real-time Training Visualization: Monitor the model's accuracy and loss in real-time with an interactive chart during the training process.
• Instant Testing: Once trained, test your model's performance by uploading new images and see instant predictions with confidence scores.
• Model Management: Save your trained model's architecture and weights to a local file, and load it back into the playground later to continue your work.
• Resource Monitoring: A built-in memory manager helps you keep track of resource usage to ensure a smooth experience.

🛠️ Tech Stack

• Core: React, Vite
• Machine Learning: TensorFlow.js
• Styling: Tailwind CSS
• Icons: Lucide React
• Language: JavaScript (JSX)

🚀 Getting Started

Follow these instructions to set up and run the project on your local machine.

Prerequisites

• Node.js: You must have Node.js (version 16 or newer) and npm installed. You can download it from nodejs.org.

Installation & Setup

1. Clone the Repository

   git clone https://github.com/your-username/ml-playground.git
   cd ml-playground

   (If you don't use Git, you can download the project files as a ZIP and extract them.)

2. Install Dependencies Navigate to the project's root directory in your terminal and run the following command. This will install all the necessary packages defined in package.json.

   npm install

3. Run the Development Server Once the installation is complete, start the Vite development server.

   npm run dev

4. View in Browser The terminal will display a local URL (usually http://localhost:5173). Open this URL in your web browser to see the application running.

📖 How to Use the Playground

The application is designed to be intuitive. Follow this workflow for the best experience:

1. Add Classes: In the "Classes & Samples" panel, enter a name for your first class (e.g., "Apples") and click "Add Class". Repeat for at least one more class (e.g., "Oranges"). A model needs at least two classes to learn.

2. Add Training Samples: For each class you created, use the "Images" or "Folder" buttons to upload training pictures. The more varied your images, the better your model will be. Keep an eye on the "Memory Status" panel to avoid overloading your browser.

3. Configure Your Model (Optional): In the "Model Architecture" panel, you can add or remove hidden layers and adjust their properties (like the number of neurons or dropout rate) to see how it affects your model's performance.

4. Train the Model: Head to the "Control Panel".

   • Set the number of Epochs (how many times the model will see the entire dataset).
   • Click the "Train Model" button.
   • Watch the "Training Progress" chart update in real-time!

5. Test Your Model: Once training is complete, the "Test Model" and "Model Summary" panels will become active.

   • Upload a new image (one the model has not seen before) in the "Test Model" panel.
   • The application will instantly show you its prediction and a breakdown of probabilities for each class.

6. Save and Load:

   • Happy with your model? Click "Save" in the Control Panel to download the model files.
   • To resume later, use the "Load" button to upload your saved model.json file.