Prerequisites

Before setting up the AI Waste Classifier, ensure you have the following installed:

For Frontend:

• Node.js (v18.0.0 or higher)
• npm (v6.0.0 or higher)

For Backend:

• Python (v3.10 or higher)
• pip (latest version)
• MongoDB account (for database)
• Cloudinary account (for image storage)

Installation

Frontend Setup

Clone the repository and install dependencies:

git clone https://github.com/Israr-11/Frontend-AI-waste-classifier.git
cd frontend_ai_based_waste_classifier
npm install

Backend Setup

Clone the repository and install dependencies:

git clone https://github.com/Israr-11/Backend-AI-Waste-Classifier.git
cd backend_ai_based_waste_classifier
pip install -r requirements.txt

Configuration

Frontend Configuration

Create a .env file in the frontend root directory with the following:

REACT_APP_API_URL=http://localhost:8000

Backend Configuration

Create a .env file in the backend root directory with the following:

MONGO_URI=your_mongodb_connection_string
DB_NAME=waste_classifier
COLLECTION_FOR_PREDICTION=predictions
COLLECTION_FOR_FEEDBACK=feedback
COLLECTION_FOR_INSTRUCTIONS=recycling_instructions
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

Architecture

The frontend is built using React.js with a focus on responsive design and user experience. The application follows a component-based architecture for modularity and reusability.

Key Components

Core Components

• App.js - Main application component with routing
• Navbar.jsx - Navigation header with responsive menu
• Footer.jsx - Application footer with links

Feature Components

• Process.jsx - Image upload and processing interface
• ImageQualityCheck.jsx - Image quality assessment utilities
• FeedBackForm.jsx - User feedback collection form
• Statistics.jsx - Performance metrics and analytics display

UI Components

• Hero.jsx - Landing page hero section
• Overview.jsx - System overview explanation
• Flow.jsx - Visualization of the classification workflow
• WhyThis.jsx - Benefits and motivation section

User Flow

The frontend implements a streamlined user flow:

1. Home Page - Introduction to the application
2. Process Page - Image upload and processing
   • Upload image or take photo
   • Adjust image with filters (brightness, contrast, grayscale, sepia)
   • Crop and prepare image
   • Submit for classification
3. Results Display - Shows classification results
   • Waste category
   • Confidence level
   • Recycling instructions
   • Feedback form
4. Statistics Page - Performance analytics and metrics

Architecture

The backend is built with FastAPI, a modern Python framework for building APIs. It follows a structured architecture with controllers, services, and models.

Directory Structure

backend_ai_based_waste_classifier/
├── app.py                  # Main application entry point
├── controllers/            # API route handlers
│   ├── imageProcessingController.py
│   ├── feedbackController.py
│   └── statsController.py
├── services/               # Business logic
│   ├── imageProcessingService.py
│   ├── mlModelService.py
│   ├── feedbackService.py
│   ├── image_quality_service.py
│   └── statsService.py
├── models/                 # Data models
│   ├── prediction.py
│   └── feedback.py
├── utils/                  # Utility functions
│   ├── database.py
│   ├── uploadImage.py
│   └── populate_recycling_instructions.py
└── machineLearning/        # ML models and training
    └── waste_classification_model_v2.keras

API Endpoints

Image Processing

Feedback

Statistics

Request and Response Examples

Image Upload Request:

POST /upload_image
Content-Type: multipart/form-data

form-data:
  image: [binary file data]

Image Upload Response:

{
  "image_hash": "a1b2c3d4e5f6g7h8i9j0",
  "category": "plastic",
  "confidence": 0.95,
  "image_url": "https://res.cloudinary.com/example/image/upload/v1234567890/uploads/example.jpg",
  "recycling_instructions": {
    "title": "Plastic Recycling",
    "description": "Clean and separate plastic items before recycling.",
    "steps": [
      "Remove labels and caps",
      "Rinse container",
      "Check for recycling code",
      "Place in appropriate bin"
    ],
    "additional_info": "Not all plastics are recyclable. Check with your local recycling center."
  }
}

Database Structure

The application uses MongoDB Atlas with three main collections:

Predictions Collection

{
  "_id": ObjectId("60d21b4667d0d8992e610c85"),
  "image_hash": "a1b2c3d4e5f6g7h8i9j0",
  "original_prediction": "plastic",
  "correct_prediction": "plastic",
  "category": "plastic",
  "entryTime": ISODate("2023-08-24T14:25:30.123Z")
}

Feedback Collection

{
  "_id": ObjectId("60d21b4667d0d8992e610c86"),
  "image_hash": "a1b2c3d4e5f6g7h8i9j0",
  "is_correct": false,
  "correct_category": "metal",
  "tried_techniques": [
    "Adjust brightness",
    "Use a plain background when possible"
  ],
  "entryTime": ISODate("2023-08-24T14:28:10.456Z")
}

Recycling Instructions Collection

{
  "_id": ObjectId("60d21b4667d0d8992e610c87"),
  "category": "plastic",
  "title": "Plastic Recycling",
  "description": "Clean and separate plastic items before recycling.",
  "steps": [
    "Remove labels and caps",
    "Rinse container",
    "Check for recycling code",
    "Place in appropriate bin"
  ],
  "additional_info": "Not all plastics are recyclable. Check with your local recycling center."
}

Model Architecture

The waste classification system uses a Convolutional Neural Network (CNN) optimized specifically for waste identification.

Model Specifications

• Input: 128×128 color images (RGB)
• Output: 7 waste categories (e-waste, glass, metal, organic, paper, plastic, trash)
• Architecture: Sequential CNN with convolutional, pooling, and dense layers

Model Code

model = tf.keras.Sequential([
    tf.keras.layers.Conv2D(32, (3, 3), activation='relu', input_shape=(128, 128, 3)),
    tf.keras.layers.MaxPooling2D(2, 2),
    tf.keras.layers.Conv2D(64, (3, 3), activation='relu'),
    tf.keras.layers.MaxPooling2D(2, 2),
    tf.keras.layers.Conv2D(128, (3, 3), activation='relu'),
    tf.keras.layers.MaxPooling2D(2, 2),
    tf.keras.layers.Flatten(),
    tf.keras.layers.Dense(128, activation='relu'),
    tf.keras.layers.Dense(7, activation='softmax')
])

model.compile(
    optimizer='adam',
    loss='sparse_categorical_crossentropy',
    metrics=['accuracy']
)

Training Process

The model underwent multiple training iterations to achieve optimal performance.

Version 1

• Dataset: 2,527 images
• Training/Test Split: 80/20 (2,022 training, 505 test)
• Batch Size: 32
• Epochs: 9
• Accuracy: 80%

Version 2 (Current)

• Dataset: 20,534 images (8× increase)
• Training/Test Split: 80/20
• Batch Size: 32
• Epochs: 15
• Accuracy: 94.22%

Training Code Access

The complete training code is available in the following repositories:

• V1 Model Training - Initial training with smaller dataset
• V2 Model Training - Improved training with expanded dataset
• Full Factorial Analysis - Comprehensive model configuration testing

Optimization Techniques

Hyperparameter Tuning

The model was optimized through systematic testing of various parameters:

• Batch Size Optimization: Tested sizes from 16 to 64 to find optimal training efficiency
• Epoch Tuning: Increased from 9 to 15 epochs for better pattern learning
• Network Architecture: Adjusted CNN layers for optimal feature extraction

Data Augmentation

Enhanced the training dataset through transformations:

data_augmentation = tf.keras.Sequential([
    tf.keras.layers.RandomFlip("horizontal"),
    tf.keras.layers.RandomRotation(0.2),
    tf.keras.layers.RandomZoom(0.1),
])

Full Factorial Analysis

Conducted systematic testing of 100+ model configurations:

The optimal configuration achieved 94.88% accuracy.

Image Processing Pipeline

The system implements a multi-layer image processing approach to ensure optimal classification results.

Frontend Processing

• Resolution Validation: Ensures adequate image detail
• Blur Detection: Identifies and warns about blurry images
• User-controlled Cropping: Allows focus on the waste item
• Format Verification: Checks image format compatibility

Backend Processing

• Clarity Assessment: Measures image sharpness
• Aspect Ratio Normalization: Standardizes image proportions
• Size Standardization: Resizes to 128×128 pixels
• Quality Verification: Ensures adequate processing quality

ML-specific Processing (OpenCV)

def enhance_image(image):
    # Apply bounding box
    image_cv = cv2.boxFilter(image, -1, (5, 5), normalize=True)
    
    # Convert to grayscale
    image_gray = cv2.cvtColor(image_cv, cv2.COLOR_BGR2GRAY)
    
    # Apply histogram equalization
    image_eq = cv2.equalizeHist(image_gray)
    
    # Enhance sharpness with unsharp mask
    gaussian = cv2.GaussianBlur(image_eq, (0, 0), 3)
    image_sharp = cv2.addWeighted(image_eq, 1.5, gaussian, -0.5, 0)
    
    return image_sharp

Image Upload

1. Navigate to the Process page
2. Select Upload Image or Take Photo
3. Wait for the image to load in the editor

Image Processing and Classification

1. Use the cropping tool to focus on the waste item
2. Adjust image properties as needed:
   • Brightness: Slider from 0-200%
   • Contrast: Slider from 0-200%
   • Grayscale: Toggle on/off
   • Sepia: Toggle on/off
3. Click Process Image to submit for classification
4. Wait for the system to process and classify the image
5. View the classification results and recycling instructions

Providing Feedback

After receiving classification results, you can provide feedback to help improve the system:

1. Indicate whether the classification was correct (Yes or No)
2. If incorrect, select the correct waste category from the dropdown
3. Optionally, select techniques you've tried to improve the image quality:
   • Preprocessing techniques (brightness, contrast, etc.)
   • Photography techniques (lighting, background, etc.)
4. Submit your feedback