my

Dockerfile

@@ -1,4 +1,4 @@
-# Use Python 3.9 as the base image
+# Use Python 3.9 as the base image 
 FROM python:3.9
 
 # Create a user with ID 1000
@@ -13,11 +13,12 @@ WORKDIR /app
 COPY --chown=user ./requirements.txt requirements.txt
 RUN pip install --no-cache-dir --upgrade -r requirements.txt
 
-# Install system dependencies needed for OpenCV and other libraries
+# Install system dependencies needed for OpenCV, Tesseract, and other libraries
 USER root
 RUN apt-get update && apt-get install -y \
     libgl1-mesa-glx \
     libglib2.0-0 \
+    tesseract-ocr \
     && rm -rf /var/lib/apt/lists/*
 
 # Return to the user 'user' for safety

app.py

@@ -16,10 +16,13 @@ from ultralytics import YOLOv10
 import supervision as sv
 import supervision as sv
 from flask import Flask, request, jsonify, send_from_directory, render_template
-print(torch.__version__)
-print(torchvision.__version__)
-import torch
-print(torch.cuda.is_available())
+import pytesseract
+# Set the tesseract_cmd based on the operating system
+if os.name == 'nt':  # For Windows
+    pytesseract.pytesseract.tesseract_cmd = r'C:\Program Files\Tesseract-OCR\tesseract.exe'
+elif os.name == 'posix':  # For Linux/MacOS
+    pytesseract.pytesseract.tesseract_cmd = '/usr/bin/tesseract'  # Common location for Tesseract on Linux/MacOS
+
 import textwrap
 app = Flask(__name__)
 
@@ -165,15 +168,9 @@ def process_image():
                     horizontal_list1 = [box for sublist in horizontal_list1 for box in sublist]
                     free_list1 = []
                     horizontal_list_for_recognize = detected_boxes if not horizontal_list1 else horizontal_list1
-                    if horizontal_list1:
-                        result = reader.recognize(cropped_image, detail=0, horizontal_list=horizontal_list1,
-                                                  free_list=free_list1)
-                    else:
-                        result = reader.recognize(random_image_data1, detail=0, horizontal_list=detected_boxes,
-                                                  free_list=free_list1)
-                    recognized_text = ' '.join(result) if result else ''
-                else:
-                    recognized_text = 'No image found'
+                    recognized_text = pytesseract.image_to_string(cropped_image)
+                    print(f"Recognized Text: {recognized_text}")
+                   
                 csv_writer.writerow([object_id, bounding_box_info, cropped_image_name, recognized_text])
         print(f"CSV file with recognition results saved at {output_csv_path}")
 
@@ -191,8 +188,8 @@ def process_image():
             iou = inter_area / float(bbox1_area + bbox2_area - inter_area) if (bbox1_area + bbox2_area - inter_area) > 0 else 0
             return iou
 
-        image_path = "/data1" + ii
-        csv_file_path = output_csv_path = '/Folder2/' + ii + 'bounding_boxes_with_recognition.csv'
+        image_path = "./app/data1" + ii
+        csv_file_path = output_csv_path = './app/Folder2/' + ii + 'bounding_boxes_with_recognition.csv'
         image = cv2.imread(image_path)
         font = cv2.FONT_HERSHEY_SIMPLEX
         font_scale = 1.3
@@ -229,7 +226,7 @@ def process_image():
             for line in wrapped_text:
                 cv2.putText(image, line, (x1, text_y), font, font_scale, color, font_thickness)
                 text_y += int(font_scale * 20)
-            output_image_path = "/Folder3/" + "annotated" + ii + ".png"
+            output_image_path = "./app/Folder3/" + "annotated" + ii + ".png"
             cv2.imwrite(output_image_path, image)
             print(f"Annotated image saved at {output_image_path}")
             counter += 1

requirements.txt

@@ -1,4 +1,5 @@
 flask
+pytesseract
 gunicorn
 easyocr
 psutil
@@ -9,8 +10,5 @@ pandas
 huggingface_hub
 supervision
 py-cpuinfo
-torch
-torchvision
--f https://download.pytorch.org/whl/torch_stable.html
 
 

templates/index3.html

@@ -6,6 +6,7 @@
     <title>Invoice Extraction</title>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
+        /* Your existing styles */
         * { margin: 0; padding: 0; box-sizing: border-box; }
         body { font-family: 'Poppins', sans-serif; background: linear-gradient(to right, #6a11cb, #2575fc); color: #333; display: flex; justify-content: center; align-items: center; height: 100vh; }
         .container { width: 90%; max-width: 600px; background: #ffffff; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); border-radius: 12px; padding: 30px; }
@@ -19,9 +20,27 @@
         .actions { text-align: center; margin-top: 10px; }
         .actions button { background-color: #2575fc; color: white; padding: 12px 25px; border: none; border-radius: 8px; font-size: 16px; font-weight: 500; cursor: pointer; transition: background-color 0.3s ease; margin: 10px 5px; }
         .actions button:hover { background-color: #1a5bb8; }
-        .output-section { margin-top: 20px; text-align: center; }
-        .output-section img { max-width: 100%; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); }
-        .output-section button { background-color: #34c759; color: white; padding: 10px 20px; border: none; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 0.3s ease; }
+        .output-section { margin-top: 20px; text-align: center; display: none; }
+        .please-wait { font-size: 18px; font-weight: 600; color: #ffcc00; display: none; text-align: center; }
+        
+        /* Spinner styling */
+        .spinner {
+            border: 4px solid #f3f3f3; /* Light background */
+            border-top: 4px solid #2575fc; /* Blue color for the spinning part */
+            border-radius: 50%;
+            width: 50px;
+            height: 50px;
+            animation: spin 2s linear infinite;
+            margin: 10px auto;
+        }
+
+        /* Spinner animation */
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .output-section button { background-color: #34c759; color: white; padding: 10px 20px; border: none; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 0.3s ease; margin: 10px 5px; }
         .output-section button:hover { background-color: #28a745; }
     </style>
 </head>
@@ -41,8 +60,14 @@
             <button id="upload-btn">Upload & Process</button>
         </div>
 
-        <div class="output-section" id="output-section" style="display: none;">
-            <img id="output-image" src="" alt="Annotated Image">
+        <!-- Please Wait Section with Spinner -->
+        <div class="please-wait" id="please-wait">
+            <div class="spinner"></div>
+            Please wait, processing the file...
+        </div>
+
+        <!-- Output Section (Buttons only) -->
+        <div class="output-section" id="output-section">
             <a id="download-csv" href="" download><button>Download CSV</button></a>
             <a id="download-image" href="" download><button>Download Annotated Image</button></a>
         </div>
@@ -52,7 +77,7 @@
         const uploadBtn = document.getElementById('upload-btn');
         const invoiceInput = document.getElementById('invoice-upload');
         const outputSection = document.getElementById('output-section');
-        const outputImage = document.getElementById('output-image');
+        const pleaseWaitSection = document.getElementById('please-wait');
         const downloadCsvButton = document.getElementById('download-csv');
         const downloadImageButton = document.getElementById('download-image');
 
@@ -63,18 +88,26 @@
             const formData = new FormData();
             formData.append('invoice-upload', file);
 
+            // Show the "Please Wait" message and spinner
+            pleaseWaitSection.style.display = 'block';
+            outputSection.style.display = 'none';
+
+            // Send the file to the server for processing
             fetch('/upload', {
                 method: 'POST',
                 body: formData
             })
             .then(response => response.json())
             .then(data => {
-                outputImage.src = data.image_path;
+                pleaseWaitSection.style.display = 'none'; // Hide "Please Wait"
+                outputSection.style.display = 'block'; // Show download buttons
                 downloadCsvButton.href = `/download_csv/${data.csv_path.split('/').pop()}`;
                 downloadImageButton.href = `/download_image/${data.image_path.split('/').pop()}`;
-                outputSection.style.display = 'block';
             })
-            .catch(error => alert('Error processing the image: ' + error));
+            .catch(error => {
+                pleaseWaitSection.style.display = 'none'; // Hide "Please Wait"
+                alert('Error processing the image: ' + error);
+            });
         });
     </script>
 </body>