Overview

In this project, I developed a comprehensive computer vision application using React for the frontend and Flask for the backend. The application allows users to upload images or videos, process them with various object detection models, and view annotated results. This project has evolved through multiple versions, each enhancing its functionality, user interface, and performance.

Project Versions

1. Initial Implementation

   • Objective: Focused on photo processing.

   • Features: Utilized Faster R-CNN for annotating images.

   • UI: Basic React web app for photo uploads and result display.

   • Notes: Successfully resolved issues with images covering the screen.

     
     

2. Improved Photo Handling

   • Objective: Enhanced handling of images with different aspect ratios and sizes.

   • Features: Enabled scrolling and added borders to image display areas.

   • Skills Improved: Advanced React and Flask integration.

     
     

3. Video Processing

   • Objective: Extended functionality to process videos.

   • Features: Included video processing with Faster R-CNN, similar to the photo version.

     
     

4. Code Optimization

   • Objective: Refined code structure and modularization.

   • Features: Modular Python files and CSV generation for annotation control.

     
     

5. Enhanced UI and Features

   • Objective: Improved UI and functionality for photo processing.

   • Features: Added label buttons, logging, and disabled video features.

     
     

6. Custom Video Processing

   • Objective: Enabled video processing alongside photo processing.

   • Features: Integrated video features similar to the enhanced photo version.

     
     

7. Model Testing and Comparison

   • Objective: Tested and compared multiple object detection models.

   • Features: Evaluated Faster R-CNN, Keypoint R-CNN, Mask R-CNN, RetinaNet, and SSDlite.

   • Observations: Mask R-CNN offered the best balance of annotation quality and speed, with SSDlite being the fastest but least accurate.

     
     

8. Upcoming Version

   • Objective: Development of my own "Focus Auto-Population Scan" model.

   • Status: Work in progress, not yet uploaded to GitHub.

     
     

Running the Application

1. Clone the Repository: Clone the project from GitHub to your local machine.

2. Install Dependencies:

   1. For React

      npm install

   2. For Python dependencies:

      pip install -r requirements.txt

3. Start the Flask Backend:

   • Navigate to the app directory:

     cd app

   • Set __init__.py as the Flask app:

     export FLASK_APP=__init__.py

     (use set instead of export on Windows).

   • Run the Flask server:

     flask run

4. Build the React Frontend:

   • In a separate terminal, navigate to the project directory.

   • To build the React application

     npm run build

5. Upload Images/Videos: Use the web interface for file uploads and view annotated results.

   
   

Example Input Image:

Example Output Image using Mask R-CNN:

Contributions and Feedback

Contributions are welcome. Fork the repository and submit a pull request for any enhancements or fixes. For feedback or issues, open an issue on GitHub.

Future Plans

• Integration of the "Focus Auto-Population Scan" model.

• Further UI/UX optimization.

• Expansion of the model library for enhanced feature comparison.

GitHub Link for project:
https://github.com/Archerkattri/computervisionproj/