Stain Classifier - CNN Image Classification

A web application that uses a Convolutional Neural Network (CNN) to classify stain images and provide cleaning recommendations.

🚀 Quick Start

Step 1: Download Training Images (Automatic)

Use the built-in scraper to download stain images:

Windows:

cd scraper
download.bat

Or manually:

cd scraper
pip install -r requirements.txt
python scraper.py                    # Download all stain types
python scraper.py ketchup chocolate  # Download specific types only
python scraper.py --num 200          # Download 200 images per type

Step 1 (Alternative): Add Images Manually

Or add your own stain images to the folders inside model/data/:

model/data/
├── ketchup/      ← Add ketchup stain images
├── chocolate/    ← Add chocolate stain images
├── dirt/         ← Add dirt/mud stain images
├── grass/        ← Add grass stain images
├── coffee/       ← Add coffee/tea stain images
├── wine/         ← Add wine stain images
├── ink/          ← Add ink stain images
└── oil/          ← Add oil/grease stain images

Tip: Aim for at least 50-100 images per category for good results.

Step 2: Train the Model

Windows:

cd model
train.bat

Or manually:

cd model
pip install -r requirements.txt
python train_model.py

This will:

• ✅ Load and preprocess all images
• ✅ Train the CNN model using transfer learning (MobileNetV2)
• ✅ Save the model in Keras format
• ✅ Convert it to TensorFlow.js format for the web app

Step 3: Run the Web Application

cd web-app
npm install
npm run dev

Open http://localhost:5173 in your browser.

---

📁 Project Structure

Machine Learning Manchas/
├── scraper/                        # Image download tool
│   ├── scraper.py                  # Main scraper script
│   ├── download.bat                # Windows launcher
│   ├── requirements.txt
│   └── README.md
│
├── model/                          # ML model training
│   ├── data/                       # Training images (organized by category)
│   │   ├── ketchup/
│   │   ├── chocolate/
│   │   ├── dirt/
│   │   ├── grass/
│   │   ├── coffee/
│   │   ├── wine/
│   │   ├── ink/
│   │   └── oil/
│   ├── saved_model/                # Trained Keras model (after training)
│   ├── train_model.py              # Training script
│   ├── train.bat                   # Windows training launcher
│   ├── train.sh                    # Linux/Mac training launcher
│   └── requirements.txt            # Python dependencies
│
├── web-app/                        # React frontend
│   ├── public/
│   │   └── model/                  # TensorFlow.js model (after training)
│   ├── src/
│   │   ├── components/
│   │   │   ├── ImageUploader.jsx   # Drag & drop image upload
│   │   │   ├── ResultDisplay.jsx   # Classification results
│   │   │   ├── CleaningTips.jsx    # Cleaning recommendations
│   │   │   └── ModelStatus.jsx     # Model loading status
│   │   ├── data/
│   │   │   └── cleaningTips.json   # Cleaning tips database
│   │   ├── utils/
│   │   │   └── modelLoader.js      # TensorFlow.js model loader
│   │   ├── App.jsx                 # Main application
│   │   ├── main.jsx                # Entry point
│   │   └── index.css               # Tailwind styles
│   ├── package.json
│   ├── vite.config.js
│   ├── tailwind.config.js
│   └── postcss.config.js
│
└── README.md

---

🧠 How It Works

1. Transfer Learning: The model uses MobileNetV2 (pre-trained on ImageNet) as a base, then adds custom layers for stain classification. This allows good accuracy even with limited training data.

2. Data Augmentation: Training images are automatically augmented (rotated, flipped, zoomed) to improve model robustness.

3. Browser-based Inference: The trained model is converted to TensorFlow.js format, allowing classification to run entirely in the browser - no server required!

4. Privacy: Images never leave your device - all processing happens locally in the browser.

---

➕ Adding New Stain Categories

1. Create a new folder in model/data/ with the stain name:

   model/data/blood/
   

2. Add training images to the folder (50+ recommended)

3. Add cleaning tips in web-app/src/data/cleaningTips.json:

   "blood": {
     "name": "Blood",
     "icon": "🩸",
     "color": "#991b1b",
     "description": "Blood stains from cuts or injuries",
     "tips": [...],
     "products": [...],
     "warnings": [...]
   }

4. Re-train the model:

   cd model
   python train_model.py

---

🛠️ Technologies Used

Component	Technology
Model Training	Python, TensorFlow/Keras, MobileNetV2
Web Framework	React 18, Vite
ML in Browser	TensorFlow.js
Styling	Tailwind CSS
Image Upload	react-dropzone

---

📊 Model Performance

After training, you'll see metrics like:

• Training Accuracy: How well the model learns from training data
• Validation Accuracy: How well it generalizes to new images

A good model should have validation accuracy > 80%. If accuracy is low:

• Add more training images
• Ensure images are clear and well-lit
• Check that images are correctly categorized

---

🐛 Troubleshooting

"Model not found" error in web app

• Make sure you've trained the model first (python train_model.py)
• Check that files exist in web-app/public/model/

Low accuracy

• Add more training images (100+ per category recommended)
• Ensure good image quality and variety
• Check for mislabeled images

Training is slow

• This is normal for first run (downloading MobileNetV2)
• Consider using a GPU for faster training
• Reduce epochs in train_model.py for quick testing

---

📝 License

MIT License - feel free to use and modify for your projects!