Skip to content

How PicTrace Works

Sviatoslav König edited this page Jul 19, 2024 · 2 revisions

Wiki: How PicTrace Works

Welcome to the PicTrace Wiki! Here I outline the core functionalities and components that make PicTrace a powerful and efficient image matching platform.

Table of Contents

  1. Introduction
  2. Core Technologies
  3. System Architecture
  4. Modules and Components
  5. Image Matching Process
  6. Asynchronous Processing
  7. API Endpoints
  8. Frontend Functionality
  9. Deployment
  10. Contributing

Introduction

PicTrace is a highly efficient image matching platform leveraging cutting-edge technologies such as OpenCV, TensorFlow, FastAPI, and more. It allows users to upload images directly or via URLs, quickly scanning a vast database to find similar images. Asynchronous processing ensures smooth and fast visual search, enhancing the user experience.

Core Technologies

PicTrace employs a range of advanced technologies to deliver efficient and accurate image matching. Below are the core technologies used, along with brief explanations of their roles and significance in the project.

Python Libraries

Python is the primary programming language used in PicTrace, chosen for its extensive libraries and strong support for data processing and machine learning.

  • FastAPI:

    • Description: FastAPI is a modern, fast (high-performance), web framework for building APIs with Python 3.6+ based on standard Python type hints.
    • Usage in PicTrace: FastAPI handles the creation of web endpoints for image uploads, serving HTML pages, and processing HTTP requests. Its built-in support for asynchronous operations makes it ideal for handling multiple image upload requests simultaneously.
    • More Info: FastAPI Documentation
  • aiohttp:

    • Description: aiohttp is an asynchronous HTTP client/server framework for Python, enabling non-blocking network operations.
    • Usage in PicTrace: aiohttp is used for making asynchronous HTTP requests, such as downloading images from URLs, which allows the application to handle I/O-bound tasks more efficiently.
    • More Info: aiohttp Documentation
  • OpenCV (cv2):

    • Description: Open Source Computer Vision Library (OpenCV) is an open-source computer vision and machine learning software library containing over 2500 optimized algorithms.
    • Usage in PicTrace: OpenCV is used for image processing tasks, including loading images, resizing them, and extracting features. It also helps in performing image similarity comparisons using various metrics.
    • More Info: OpenCV Documentation
  • numpy:

    • Description: NumPy is a fundamental package for scientific computing with Python, providing support for arrays, matrices, and high-level mathematical functions.
    • Usage in PicTrace: NumPy is used alongside OpenCV to handle multi-dimensional arrays for image manipulation and processing.
    • More Info: NumPy Documentation
  • scikit-image:

    • Description: scikit-image is a collection of algorithms for image processing built on NumPy and OpenCV.
    • Usage in PicTrace: The structural_similarity function from scikit-image is employed to compare the structural similarity of images to evaluate how alike they are.
    • More Info: scikit-image Documentation

Deep Learning

Deep learning is central to PicTrace for feature extraction and image recognition tasks.

  • TensorFlow:
    • Description: TensorFlow is a comprehensive open-source platform for machine learning developed by Google. It offers flexible tools and libraries for building deep learning models.
    • Usage in PicTrace: TensorFlow, and specifically the ResNet50 model, is used for extracting deep learning features from images. These features are used to compare images and determine their similarity.
    • More Info: TensorFlow Documentation

AWS S3

  • boto3:
    • Description: boto3 is the Amazon Web Services (AWS) Software Development Kit (SDK) for Python. It allows Python developers to write software that makes use of Amazon services.
    • Usage in PicTrace: boto3 is used to interact with AWS S3 for storing and retrieving images. Uploaded images are saved in an S3 bucket, making them easily accessible for further processing.
    • More Info: boto3 Documentation

These core technologies work together to make PicTrace a robust and efficient image matching platform. Their combined capabilities enable the seamless handling, processing, and comparison of images, ensuring a high-performance user experience.

System Architecture

PicTrace’s architecture consists of several interacting components:

  1. Frontend: Built using HTML, CSS, and JavaScript, it allows users to upload images and view results.
  2. Backend: Built using FastAPI, it handles image uploads, processing, and querying the database.
  3. Image Processing Engine: Utilizes OpenCV, TensorFlow, and scikit-image for image similarity calculations.
  4. Storage: AWS S3 bucket is used for storing uploaded images.
  5. Asynchronous Processing: Uses aiohttp and FastAPI’s async capabilities for smooth and efficient processing.

Modules and Components

Frontend

The frontend consists of the following files:

  • templates/upload_form.html: HTML form for uploading images.
  • static/enhanced_styles.css: CSS for styling the frontend.
  • static/scripts.js: JavaScript handling the form submission and displaying results.
  • static/neural_canvas.js: JavaScript for a neural canvas background effect.

Backend

The backend includes:

  • main.py: Main application logic, including endpoint definitions.
  • image_utils.py: Image processing utilities.
  • classification_utils.py: Utilities for classifying images based on their content.

Image Matching Process

  1. Image Upload: Users can upload an image via the frontend form.
  2. Hash Generation: The server generates a unique hash for the uploaded image using hashlib.
  3. Image Storage: The image is stored on the server and uploaded to an AWS S3 bucket using boto3.
  4. Feature Extraction: Features from the image are extracted using the ResNet50 model.
  5. Similarity Comparison: The features are compared against a database of images to find similar ones using cosine similarity.

Asynchronous Processing

PicTrace leverages asynchronous processing to handle image uploads and feature extraction efficiently. Using async/await syntax in FastAPI and aiohttp ensures non-blocking operations, which results in faster response times and better scalability.

API Endpoints

  • GET /: Serves the upload form.
  • POST /upload/: Handles image uploads and returns similar images.
  • GET /uploads/{image_hash}.jpg: Serves the uploaded image by its hash.

Frontend Functionality

The frontend handles user interactions through JavaScript. When an image is uploaded:

  • Form Submission: JavaScript intercepts the form submission and uploads the image via an asynchronous POST request.
  • Displaying Results: Upon receiving a response, the frontend dynamically updates the page to display the uploaded image and similar images.

Deployment

To deploy PicTrace:

  1. Clone the Repository: git clone https://github.com/Solrikk/PicTrace.git
  2. Set Up a Virtual Environment: python -m venv venv && source venv/bin/activate
  3. Install Dependencies: pip install -r requirements.txt
  4. Run the Server: python main.py

Visit http://127.0.0.1:8000 to access the application.

Contributing

I welcome contributions! You can help by reporting issues, submitting pull requests, or suggesting new features. Please see my Contributing Guidelines for more details.