ML5 Image Classifier

An interactive web application for training custom image classification models directly in your browser. Built with ml5.js and MobileNet, this tool allows you to upload your own images, train a model, and classify new images in real-time—no backend or installation required.

🌟 Features

• Custom Training - Upload and label your own images across three customizable classes
• Real-time Preview - See your training data with thumbnail previews as you upload
• Dynamic Labels - Rename classes on-the-fly with automatic heading updates
• Visual Training Progress - Animated progress bar showing model training status
• Instant Classification - Classify new images immediately after training completes
• Complete Reset - Clear all data and start fresh with one click
• Fully Client-side - Runs entirely in the browser, no data leaves your machine

🚀 Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, or Edge)
• JavaScript enabled
• Internet connection (for loading ml5.js CDN)

Installation

1. Clone or download this repository:

git clone https://github.com/AlexChulo/POC
cd POC

2. Open index.html in your web browser:

   • Double-click the file, or
   • Right-click → Open with → Your browser, or
   • Drag and drop into your browser window

3. That's it! No build process, no dependencies to install.

Project Structure

POC/
├── index.html       # Main application structure
├── script.js        # ML5.js functionality and logic
├── style.css        # Styling and responsive layout
└── README.md        # This file

📖 Usage Guide

Step 1: Upload Training Images

For each class you want to classify:

1. Enter a descriptive label (e.g., "Apple", "Banana", "Orange")
2. Click the 📤 Upload Images button
3. Select multiple images from your device (minimum 2 images recommended)
4. Watch as thumbnails appear showing your training data

Requirements:

• At least 2 classes with uploaded images
• Minimum 4 total images across all classes
• Images should be clear and representative of the class

Tips for Best Results:

• Upload 5-10 images per class for better accuracy
• Use varied angles, lighting conditions, and backgrounds
• Ensure images clearly show the object you want to classify
• Keep images reasonably sized (large images will be processed but may take longer)

Step 2: Train the Model

1. Once you've uploaded enough images, the 🎓 Train Model button will activate
2. Click the button to begin training
3. Watch the progress bar as the model learns from your images
4. Training typically completes in 5-15 seconds depending on the number of images

The model uses transfer learning with MobileNet, meaning it leverages a pre-trained neural network and adapts it to your specific classes.

Step 3: Classify New Images

1. After training completes, the prediction section appears
2. Click Choose Image to Classify
3. Select an image you want to classify
4. View the results:
   • Predicted Label: Which class the model thinks the image belongs to
   • Confidence: Percentage indicating the model's certainty (0-100%)

Step 4: Reset (Optional)

Click 🔄 Reset All to:

• Clear all uploaded images
• Reset all labels to defaults
• Remove the trained model
• Start over with fresh data

🎯 Example Use Cases

This tool can be used for various classification tasks:

• Fruit Recognition - Distinguish between different types of fruits
• Object Sorting - Classify tools, toys, or household items
• Educational Demonstrations - Teach machine learning concepts interactively
• Prototype Testing - Quickly test if objects can be visually distinguished
• Pet Classification - Identify different animals or breeds
• Product Categorization - Sort items by type, color, or category

🔧 Technical Details

Architecture

• Base Model: MobileNet (pre-trained on ImageNet)
• Technique: Transfer Learning with custom classification layer
• Library: ml5.js v0.12.2
• Processing: 100% client-side (browser-based)
• Data Storage: In-memory only (no persistence)

How It Works

1. Feature Extraction: MobileNet extracts high-level features from each uploaded image
2. Model Training: A new classification layer learns to map these features to your custom labels
3. Prediction: New images are processed through the same feature extractor and classified using your trained model

Browser Compatibility

Tested and working on:

• Google Chrome (recommended)
• Mozilla Firefox
• Safari
• Microsoft Edge

🎨 Customization

Adding More Classes

To add a fourth class or more:

1. In index.html, duplicate a class section:

<div class="class-section">
    <h3 id="headingD">Class D</h3>
    <input type="text" id="labelD" placeholder="Enter your label" value="" oninput="updateHeading('D')">
    <input type="file" id="fileD" accept="image/*" multiple onchange="handleFiles('D')">
    <label for="fileD" class="file-label">📤 Upload Images</label>
    <div class="image-count" id="countD">Images: 0</div>
    <div class="preview-container" id="previewD"></div>
</div>

2. In script.js, update the data structures:

let counts = { A: 0, B: 0, C: 0, D: 0 };
let trainingImages = { A: [], B: [], C: [], D: [] };

3. Update the options:

const options = {
    numLabels: 4  // Change to match your number of classes
};

Styling

All visual styling is in style.css. You can easily modify:

• Color scheme: Change gradient backgrounds and button colors
• Layout: Adjust grid spacing and container widths
• Typography: Modify fonts and sizes
• Spacing: Adjust padding and margins

Example - Change the main gradient:

body {
    background: linear-gradient(135deg, #your-color-1 0%, #your-color-2 100%);
}

🐛 Troubleshooting

Model Won't Load

• Check internet connection - ml5.js loads from a CDN
• Verify browser console - Press F12 to check for errors
• Try refreshing - Sometimes the CDN needs a retry

Train Button Stays Disabled

• Upload more images - Need at least 2 classes with images
• Check total count - Minimum 4 images required across all classes
• Verify file format - Only image files (jpg, png, gif, webp) are accepted

Poor Classification Results

• Add more training images - 5-10 per class is recommended
• Improve image quality - Use clear, well-lit photos
• Increase variety - Include different angles and backgrounds
• Check class similarity - Very similar objects may be harder to distinguish

Slow Performance

• Reduce image sizes - Large images take longer to process
• Close other tabs - Free up browser memory
• Use Chrome - Generally offers best performance for ML tasks

Classification Shows Low Confidence

• This is normal - Model may genuinely be uncertain
• Add more training data - More examples improve confidence
• Check image quality - Blurry or unclear images reduce confidence
• Verify class distinctiveness - Similar-looking classes are harder to separate

💡 Tips for Best Results

1. Consistent lighting - Try to maintain similar lighting across training images
2. Varied backgrounds - Include different backgrounds to improve generalization
3. Multiple angles - Capture objects from different perspectives
4. Clear subjects - Ensure the object of interest is clearly visible
5. Balanced classes - Upload similar numbers of images for each class
6. Test progressively - Start with very different objects, then try more similar ones

🔒 Privacy & Security

• No data collection - All processing happens locally in your browser
• No uploads - Images never leave your device
• No tracking - No analytics or monitoring
• Session-only storage - Data is cleared when you close the browser tab

📚 Learning Resources

To learn more about the technologies used:

• ml5.js Documentation
• ml5.js Examples
• Transfer Learning Explained
• MobileNet Paper

🛠️ Built With

• ml5.js - Friendly machine learning for the web
• MobileNet - Efficient CNN architecture
• HTML5 - Structure and semantics
• CSS3 - Styling and animations
• Vanilla JavaScript - Logic and interactivity

📝 License

This project is available for personal and educational use.

👤 Author

Alex

• GitHub: @AlexChulo

🙋‍♂️ Support

If you encounter issues or have questions:

1. Check the troubleshooting section above
2. Review the browser console for error messages (F12)
3. Ensure you're using a modern, updated browser
4. Verify your internet connection for CDN access

---

Happy Classifying! 🎉