Skip to content

saurabh11101/Quality-Inspection-Using-Computer-Vision

BranchesTags

Repository files navigation

Quality Inspection System - Computer Vision & Deep Learning

A production-ready web-based system for automated quality inspection using computer vision and deep learning. Detects defects in product images, classifies severity levels, and provides visual heatmaps for model interpretability.

Features

✅ Image Upload & Processing

  • RESTful API for image uploads
  • Support for JPG and PNG formats
  • Automatic preprocessing and normalization

✅ Defect Detection

  • YOLO-based object detection
  • Edge detection preprocessing
  • Bounding box visualization
  • Confidence-based filtering

✅ Severity Classification

  • CNN-based classification model
  • Three severity levels: Minor, Major, Critical
  • Severity score visualization

✅ Advanced Visualizations

  • Grad-CAM style activation heatmaps
  • Confidence distribution maps
  • Overlay visualizations
  • Saliency maps

✅ Ensemble & Fusion

  • Traditional CV + Deep Learning fusion
  • Spatial merging of nearby detections
  • Confidence voting mechanism
  • Robust result aggregation

✅ Full-Stack UI

  • React-based responsive dashboard
  • Upload interface with drag-and-drop
  • Detailed result analysis views
  • Results history with filtering
  • Real-time statistics

Technical Stack

Backend

  • Framework: FastAPI (Python)
  • Computer Vision: OpenCV
  • ML Inference: NumPy (Mock YOLO/CNN for production-ready mockup)
  • Server: Uvicorn

Frontend

  • Framework: React 18
  • Build Tool: Vite
  • HTTP Client: Axios (Fetch API)
  • Styling: CSS3 with Grid/Flexbox

ML Pipeline

  • Image preprocessing with OpenCV
  • YOLO-based detection (mock implementation)
  • CNN severity classification (mock implementation)
  • Grad-CAM heatmap generation
  • Ensemble fusion engine

Project Structure

project-root/
│
├── backend/
│   ├── main.py                 # FastAPI application entry point
│   ├── requirements.txt         # Python dependencies
│   │
│   ├── models/
│   │   ├── detection.py        # YOLO-based detection model
│   │   └── classification.py   # CNN severity classifier
│   │
│   ├── routes/
│   │   └── predict.py          # (API routes in main.py)
│   │
│   └── utils/
│       ├── preprocessing.py    # Image preprocessing pipeline
│       ├── visualization.py    # Heatmap and visualization utils
│       └── fusion.py           # Ensemble fusion engine
│
├── frontend/
│   ├── package.json            # Node dependencies
│   ├── vite.config.js          # Vite configuration
│   ├── index.html              # HTML entry point
│   │
│   └── src/
│       ├── main.jsx            # React entry point
│       ├── App.jsx             # Main app component
│       ├── App.css             # Global styles
│       ├── index.css           # Base styles
│       │
│       └── components/
│           ├── Upload.jsx      # Image upload component
│           ├── Upload.css      # Upload styles
│           │
│           ├── ResultView.jsx  # Results display component
│           ├── ResultView.css  # Results styles
│           │
│           ├── Dashboard.jsx   # Dashboard component
│           └── Dashboard.css   # Dashboard styles
│
├── data/
│   ├── uploads/                # Uploaded images storage
│   └── outputs/                # Generated visualizations
│
└── README.md                   # This file

Setup Instructions

Prerequisites

  • Python 3.9+ (for backend)
  • Node.js 16+ (for frontend)
  • pip (Python package manager)
  • npm or yarn (Node package manager)

Backend Setup

  1. Create and activate virtual environment (recommended):
# Windows
python -m venv venv
venv\Scripts\activate

# macOS/Linux
python3 -m venv venv
source venv/bin/activate
  1. Install dependencies:
cd backend
pip install -r requirements.txt
  1. Run the backend server:
python main.py

The backend will start at http://localhost:8000

API Documentation: Visit http://localhost:8000/docs (Swagger UI)

Train Model Artifacts (Recommended)

You can train lightweight model artifacts to improve consistency and efficiency:

cd backend
python train_model.py

This trains:

  • data/model_artifacts/detection_prototypes.json
  • data/model_artifacts/severity_model.json

If labeled datasets exist, they are used automatically:

  • backend/data/training/defect/{crack,scratch,dent,discoloration,corrosion}/
  • backend/data/training/severity/{minor,major,critical}/

If labeled datasets are not present, the script bootstraps from backend/data/uploads.

Frontend Setup

  1. Install dependencies:
cd frontend
npm install
  1. Start development server:
npm run dev

The frontend will start at http://localhost:3000

  1. Build for production:
npm run build

Output will be in frontend/dist/

API Endpoints

Main Endpoints

POST /predict

Upload image and process for defect detection

Request:

curl -X POST "http://localhost:8000/predict" \
  -F "file=@image.png"

Response:

{
  "prediction_id": "uuid-string",
  "timestamp": "2025-02-19T10:30:00",
  "image_info": {
    "width": 640,
    "height": 480,
    "filename": "product.png"
  },
  "detections": [
    {
      "bbox": {
        "x1": 100,
        "y1": 150,
        "x2": 250,
        "y2": 300,
        "width": 150,
        "height": 150
      },
      "detection": {
        "type": "crack",
        "confidence": 0.92
      },
      "severity": {
        "level": "major",
        "score": 0.65
      },
      "ensemble_confidence": 0.88
    }
  ],
  "summary": {
    "total_defects": 2,
    "critical_count": 0,
    "major_count": 1,
    "minor_count": 1,
    "average_confidence": 0.89
  },
  "visualizations": {
    "detections": "base64-encoded-image",
    "heatmap": "base64-encoded-image",
    "overlay": "base64-encoded-image",
    "confidence": "base64-encoded-image"
  }
}

GET /results

Get all inspection results (last 10)

curl "http://localhost:8000/results"

GET /results/{result_id}

Get specific result by ID

curl "http://localhost:8000/results/abc-123-def-456"

DELETE /results/{result_id}

Delete specific result

curl -X DELETE "http://localhost:8000/results/abc-123-def-456"

GET /visualization/{result_id}/{viz_type}

Get specific visualization

  • viz_type: detections, heatmap, overlay, confidence
curl "http://localhost:8000/visualization/abc-123/heatmap" > heatmap.png

GET /stats

Get system statistics

curl "http://localhost:8000/stats"

GET /health

Health check endpoint

curl "http://localhost:8000/health"

Usage Workflow

1. Start Both Servers

# Terminal 1: Backend
cd backend
python main.py

# Terminal 2: Frontend
cd frontend
npm run dev

2. Access the Application

Open browser: http://localhost:3000

3. Upload Image

  1. Click "New Inspection"
  2. Upload a product image (JPG or PNG < 10MB)
  3. Click "Analyze Image"

4. View Results

  • Overview: See all visualizations
  • Detections: Detailed list of found defects with confidence scores
  • Heatmap: Model activation visualization
  • Analysis: Statistical breakdown and quality assessment

5. Manage History

  • View all past inspections in Dashboard
  • Sort by date, defect count, or severity
  • Delete results as needed

Model Details

Detection Model

Type: YOLO-based object detection Input: 416×416 normalized image Output: Bounding boxes with class labels and confidence Classes: crack, scratch, dent, discoloration, corrosion

Preprocessing:

  • Bilateral filtering for denoising
  • Resize with padding to maintain aspect ratio
  • ImageNet normalization (mean/std)
  • Channels-first format (CHW)

Classification Model

Type: CNN severity classifier Input: 224×224 cropped defect region Output: Severity level (minor/major/critical) with score

Features Extracted:

  • Sharpness (Laplacian variance)
  • Contrast (standard deviation)
  • Area coverage (percentage)
  • Edge density (Canny edges)

Fusion: Weighted combination of features → severity score

Heatmap Generation

Grad-CAM Style:

  • Gaussian peaks at detection centers
  • Spatial smoothing with GaussianBlur
  • JET colormap application
  • Overlay blending (40% heatmap, 60% original)

Saliency Map:

  • Canny edge detection
  • Morphological dilation
  • Gaussian smoothing
  • Normalized to 0-255

Customization

Adding Custom Model Weights

Edit backend/models/detection.py:

# Replace mock detection with real YOLO
from ultralytics import YOLO

class DefectDetectionModel:
    def __init__(self, model_path: str = None):
        self.model = YOLO(model_path or 'yolov8m.pt')

Adjusting Severity Thresholds

Edit backend/models/classification.py:

SEVERITY_THRESHOLDS = {
    SeverityLevel.MINOR: (0.0, 0.35),    # Adjust ranges
    SeverityLevel.MAJOR: (0.35, 0.65),
    SeverityLevel.CRITICAL: (0.65, 1.0)
}

Modifying Fusion Parameters

Edit backend/utils/fusion.py:

def __init__(self):
    self.detection_weight = 0.6      # Change weights
    self.classification_weight = 0.4

Customizing UI Theme

Edit frontend/src/App.css:

/* Change primary color */
:root {
  --primary: #667eea;
  --secondary: #764ba2;
}

Performance Tips

Backend Optimization

  1. Use GPU inference (if available):

    • Install CUDA-compatible PyTorch
    • Set device='cuda' in models

  2. Enable caching:

    • Cache preprocessed images
    • Store frequently accessed results

  3. Parallel processing:

    • Use FastAPI's async endpoints
    • Process multiple images concurrently

Frontend Optimization

  1. Build for production:

    npm run build

  2. Enable compression on web server

  3. Use CDN for static assets

Troubleshooting

Backend Port Already in Use

# Windows
netstat -ano | findstr :8000
taskkill /PID <PID> /F

# macOS/Linux
lsof -i :8000
kill -9 <PID>

CORS Errors (Frontend Can't Reach Backend)

Ensure backend is running and CORS is enabled in main.py:

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

Image Upload Fails

  • Check file format (JPG, PNG only)
  • Verify file size < 10MB
  • Ensure data/uploads/ directory exists

Low Detection Accuracy

  1. Ensure image quality is good (well-lit, clear)
  2. Check if defects are in trained classes
  3. Adjust confidence threshold in detection.py

Production Deployment

Containerization (Docker)

# Backend
FROM python:3.9-slim
WORKDIR /app
COPY backend/requirements.txt .
RUN pip install -r requirements.txt
COPY backend .
CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]
# Frontend
FROM node:18-alpine
WORKDIR /app
COPY frontend/package.json .
RUN npm install
COPY frontend .
RUN npm run build
CMD ["npm", "run", "preview"]

Cloud Deployment

  • Backend: AWS Lambda, Google Cloud Run, Azure Container Instances
  • Frontend: Vercel, Netlify, CloudFront
  • Storage: AWS S3, GCS, Azure Blob Storage
  • Database: PostgreSQL for persistent results

API Rate Limiting (Optional)

from slowapi import Limiter
from slowapi.util import get_remote_address

limiter = Limiter(key_func=get_remote_address)

@app.post("/predict")
@limiter.limit("5/minute")
async def predict(request: Request, file: UploadFile):
    # Implementation

Database Integration (Optional)

from sqlalchemy import create_engine
from sqlalchemy.orm import sessionmaker

DATABASE_URL = "postgresql://user:password@localhost/qis"
engine = create_engine(DATABASE_URL)
SessionLocal = sessionmaker(bind=engine)

# Store results in database instead of JSON

Authentication (Optional)

from fastapi.security import HTTPBearer

security = HTTPBearer()

@app.post("/predict")
async def predict(credentials: HTTPAuthorizationCredentials = Depends(security)):
    # Verify token

Testing

Backend Tests

# Install pytest
pip install pytest pytest-asyncio

# Run tests
pytest backend/tests/

Frontend Tests

# Install testing libraries
npm install --save-dev @testing-library/react @testing-library/jest-dom vitest

# Run tests
npm run test

Contributing

Contributions are welcome! Please:

  1. Fork the repository
  2. Create a feature branch
  3. Submit a pull request

License

MIT License - See LICENSE file for details

Support

For issues and questions:

Changelog

v1.0.0 (2025-02-19)

  • Initial release
  • Core detection and classification
  • Frontend dashboard
  • Visualization suite

Roadmap

  • Real YOLOv8 model integration
  • Database persistence layer
  • User authentication & authorization
  • Multi-language support
  • Mobile app (React Native)
  • IoT device integration
  • Advanced reporting & analytics
  • Model training UI
  • Batch processing API
  • Real-time video processing

Acknowledgments

  • OpenCV for computer vision utilities
  • FastAPI for web framework
  • React for UI framework
  • YOLO for object detection inspiration

Quality Inspection System - Automated Defect Detection with Computer Vision & Deep Learning

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages