Card Cropping

Dockerfile

@@ -0,0 +1,27 @@
+# Use the official Python image from the Docker Hub
+FROM python:3.11.5-slim
+
+# Upgrade pip to the latest version and install dependencies in one RUN command
+RUN apt-get update && \
+    apt-get install -y git libgl1-mesa-glx libglib2.0-0 && \
+    python -m pip install --upgrade pip && \
+    apt-get clean && \
+    rm -rf /var/lib/apt/lists/*
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Copy the current directory contents into the container at /app
+COPY . /app
+
+# Install any needed packages specified in requirements.txt
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Make port 7860 available to the world outside this container
+EXPOSE 7860
+
+# Define environment variable (corrected the syntax for environment variable name and value)
+# ENV FLASK_APP=app.py
+
+# Command to run the application
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "app:app"]

app.py

@@ -0,0 +1,89 @@
+from flask import Flask, request, jsonify, render_template, send_from_directory
+import cv2
+from ultralytics import YOLO
+import os
+import time
+
+app = Flask(__name__)
+
+# Initialize YOLO model
+inst_model = YOLO('model/seg.pt')
+
+# Function to perform YOLO prediction and crop detected card images
+def detect_and_crop(image_path, output_folder):
+    # Read the image
+    frame = cv2.imread(image_path)
+
+    # Perform YOLO prediction
+    instance_results = inst_model.predict(frame)
+    result = instance_results[0]
+
+    if result.boxes and len(result.boxes) > 0:
+        # Loop through detected boxes
+        for box in result.boxes:
+            class_id = int(box.cls[0].item())
+            conf = box.conf[0].item()
+
+            # Check if the detected object is a card with high confidence
+            if class_id == 0 and conf >= 0.70:
+                # Crop the detected card
+                x1, y1, x2, y2 = box.xyxy[0]
+                cropped_card = frame[int(y1):int(y2), int(x1):int(x2)]
+
+                # Save the cropped card to the output folder
+                output_filename = os.path.join(output_folder, "cropped_card.jpg")
+                if os.path.exists(output_filename):
+                    os.remove(output_filename)
+                cv2.imwrite(output_filename, cropped_card)
+                return output_filename
+    return None
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/detect-and-crop', methods=['POST'])
+def detect_and_crop_endpoint():
+    if 'image' not in request.files:
+        return jsonify({'error': 'No image provided'}), 400
+
+    file = request.files['image']
+
+    # Create the output folder if it doesn't exist
+    output_folder = 'output'
+    if not os.path.exists(output_folder):
+        os.makedirs(output_folder)
+    else:
+        # Clear previous images in the output folder
+        files_in_output_folder = os.listdir(output_folder)
+        for file_in_folder in files_in_output_folder:
+            file_path = os.path.join(output_folder, file_in_folder)
+            os.remove(file_path)
+
+    # Save the uploaded file to a temporary location
+    input_image_path = os.path.join(output_folder, file.filename)
+    file.save(input_image_path)
+
+    start = time.time()
+
+    # Call the function to detect and crop card images
+    output_filename = detect_and_crop(input_image_path, output_folder)
+
+    end = time.time()
+    processing_time = end - start
+
+    if output_filename:
+        return jsonify({
+            'message': 'Cropped image saved successfully',
+            'output_filename': "cropped_card.jpg",
+            'processing_time': processing_time
+        }), 200
+    else:
+        return jsonify({'message': 'No cards detected in the image'}), 200
+
+@app.route('/output/<filename>')
+def send_output_file(filename):
+    return send_from_directory('output', filename)
+
+if __name__ == '__main__':
+    app.run(debug=True, host="0.0.0.0")

model/seg.pt

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f64ce3694921b1b18981abbd511de12ce0098f011ae04695006d4ef37e497c41
+size 6805219

templates/index.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Card cropping</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            margin: 0;
+            padding: 0;
+            position: relative;
+            background-image: url('static/depositphotos_489854724-stock-illustration-light-multicolor-rainbow-vector-abstract.jpg');
+            background-size: 2300px;
+            background-repeat: no-repeat;
+            background-position: center;
+            background-color: rgba(255, 255, 255, 0.2);
+            backdrop-filter: blur(7px);
+            min-height: 100vh; /* Ensure page takes at least viewport height */
+        }
+
+        form {
+            margin-bottom: 20px;
+        }
+
+        /* File uploader and predict button styles */
+        .file-upload-label {
+            padding: 10px;
+        }
+
+        #predictBtn {
+            padding: 10px 20px;
+            margin-top: 10px;
+            background-color: #007bff;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 16px;
+            transition: background-color 0.3s;
+        }
+
+        #predictBtn:hover {
+            background-color: #0056b3;
+        }
+
+        #predictBtn:active {
+            background-color: #004f9f;
+        }
+
+        #predictBtn:focus {
+            outline: none;
+        }
+
+        .file-upload-input {
+            display: none;
+        }
+
+        .file-upload-icon {
+            font-size: 30px;
+            margin-right: 1px;
+        }
+
+        .image-container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-bottom: 20px;
+            position: relative;
+        }
+
+        .image-wrapper {
+            position: relative;
+            margin: 0 50px; /* Increased space between the images */
+        }
+
+        .image-label {
+            text-align: center;
+            background-color: #ffffff;
+            padding: 5px 10px;
+            border-radius: 5px;
+            font-weight: bold;
+            margin-top: 10px;
+            display: none; /* Initially hide labels */
+        }
+
+        .image-container img {
+            height: auto;
+            display: none; /* Initially hide images */
+        }
+
+        #uploadedImage {
+            max-width: 200px; /* Smaller size for uploaded image */
+        }
+
+        #croppedImage {
+            max-width: 250px; 
+        }
+
+        #result {
+            margin-top: 20px;
+            position: relative;
+        }
+
+        #loading {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            display: none;
+        }
+
+        #logo {
+            position: absolute;
+            bottom: 5px;
+            right: 5px;
+            max-width: 100px; /* Increase logo size */
+            height: auto;
+        }
+
+        .footprint {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            text-align: center;
+            background-color: rgba(255, 255, 255, 0.2);
+            padding: 10px 0;
+            z-index: 1;
+        }
+
+        .footprint img {
+            max-width: 100px;
+            height: auto;
+            margin-left: auto; /* Push the logo to the right */
+            display: inline-block;
+            vertical-align: middle; /* Align the logo vertically with the text */
+        }
+    </style>
+</head>
+<body>
+    <br>
+    <br>
+    <h1>Visiting Card/Id Card Cropping System</h1>
+    <form id="uploadForm" enctype="multipart/form-data">
+        <label for="file-upload" class="file-upload-label">
+            <input type="file" name="image" id="file-upload" class="file-upload-input" accept="image/*" required>
+            <span class="file-upload-icon">📤</span> Choose an image
+        </label>
+        <button id="predictBtn" type="submit">Predict</button>
+    </form>
+    <div id="result">
+        <div id="loading">
+            <img src="path_to_loader_icon.gif" alt="Loader">
+        </div>
+        <p id="message"></p>
+        <div class="image-container">
+            <div class="image-wrapper">
+                <img id="uploadedImage" src="" alt="Uploaded Image">
+                <div class="image-label" id="uploadedLabel">Uploaded Image</div>
+            </div>
+            <div class="image-wrapper">
+                <img id="croppedImage" src="" alt="Cropped Image">
+                <div class="image-label" id="croppedLabel">Output</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Footprint -->
+    <div class="footprint">
+        <p>Copyright © XYZ It Ltd. 2024</p>
+        <img src="static/360_F_517815080_tD3cmJRmhhztVmeHrnJd3DA4HT1Zkks7 (1).jpg" alt="Company Logo">
+    </div>
+    <script>
+        document.getElementById('uploadForm').addEventListener('submit', async function(event) {
+            event.preventDefault();
+            const formData = new FormData(this);
+
+            // Show loading icon when form is submitted
+            document.getElementById('loading').style.display = 'block';
+
+            const fileInput = document.getElementById('file-upload');
+            const file = fileInput.files[0];
+            let uploadedImageSrc = '';
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    uploadedImageSrc = e.target.result;
+                }
+                reader.readAsDataURL(file);
+            }
+
+            const response = await fetch('/detect-and-crop', {
+                method: 'POST',
+                body: formData
+            });
+
+            const result = await response.json();
+            document.getElementById('message').textContent = result.message;
+
+            if (uploadedImageSrc) {
+                const uploadedImage = document.getElementById('uploadedImage');
+                const uploadedLabel = document.getElementById('uploadedLabel');
+                uploadedImage.src = uploadedImageSrc;
+                uploadedImage.style.display = 'block';
+                uploadedLabel.style.display = 'block';
+            }
+
+            if (result.output_filename) {
+                const imageUrl = `/output/${result.output_filename}?${Date.now()}`;
+                const croppedImage = document.getElementById('croppedImage');
+                const croppedLabel = document.getElementById('croppedLabel');
+                croppedImage.src = imageUrl;
+                croppedImage.style.display = 'block';
+                croppedLabel.style.display = 'block';
+            } else {
+                // Clear the src attribute when no output image available
+                const croppedImage = document.getElementById('croppedImage');
+                const croppedLabel = document.getElementById('croppedLabel');
+                croppedImage.src = '';
+                croppedImage.style.display = 'none';
+                croppedLabel.style.display = 'none';
+            }
+
+            document.getElementById('loading').style.display = 'none';
+        });
+    </script>
+</body>
+</html>