my

app.py

@@ -89,13 +89,13 @@ def upload_file():
     if file:
         file_path = os.path.join('./app/data1', file.filename)
         file.save(file_path)
-        output_image, output_csv = process_image()
+        output_image, output_csv,image_path = process_image()
 
         return jsonify({
             'image_path': output_image,
-            'csv_path': output_csv
+            'csv_path': output_csv,
+            'original_image': image_path
         })
-
 def process_image():
     print("Current working directory:", os.getcwd())
     
@@ -164,7 +164,7 @@ def process_image():
                     else:
                         print("No bounding box found in the info.")
                     cropped_image = cv2.imread(cropped_image_path, cv2.IMREAD_GRAYSCALE)
-                    recognized_text = pytesseract.image_to_string(cropped_image)
+                    recognized_text = pytesseract.image_to_string(cropped_image,config="--psm 6 -c tessedit_char_whitelist=0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz-")
                     print(f"Recognized Text: {recognized_text}")
                    
                 csv_writer.writerow([object_id, bounding_box_info, cropped_image_name, recognized_text])
@@ -226,7 +226,7 @@ def process_image():
             cv2.imwrite(output_image_path, image)
             print(f"Annotated image saved at {output_image_path}")
             counter += 1
-        return output_image_path, output_csv_path
+        return output_image_path, output_csv_path,image_path
 
 @app.route('/download_csv/<filename>')
 def download_csv(filename):
@@ -236,5 +236,10 @@ def download_csv(filename):
 def download_image(filename):
     return send_from_directory('./app/Folder3', filename, as_attachment=True)
 
+@app.route('/uploads/<filename>')
+def serve_uploaded_file(filename):
+    return send_from_directory('./app/data1', filename)
+
+
 
 

templates/index3.html

@@ -6,24 +6,118 @@
     <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; }
-        .header { text-align: center; margin-bottom: 20px; }
-        .header h1 { font-size: 28px; font-weight: 700; color: #333; }
-        .header p { font-size: 14px; color: #777; }
-        .upload-section { margin-bottom: 20px; }
-        .upload-section label { display: block; font-size: 16px; font-weight: 500; margin-bottom: 10px; color: #555; }
-        .upload-section input[type="file"] { display: block; padding: 12px; font-size: 14px; border: 1px solid #ddd; border-radius: 8px; width: 100%; transition: all 0.3s ease; }
-        .upload-section input[type="file"]:focus { border-color: #2575fc; outline: none; }
-        .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; display: none; }
-        .please-wait { font-size: 18px; font-weight: 600; color: #ffcc00; display: none; text-align: center; }
-        
-        /* Spinner styling */
+        body { font-family: 'Poppins', sans-serif; background: linear-gradient(to right, #6a11cb, #2575fc); color: #333; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
+
+        .container {
+            width: 90%;
+            max-width: 800px;
+            background: #ffffff;
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+            border-radius: 12px;
+            padding: 30px;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            height: 100%;
+        }
+
+        .header {
+            text-align: center;
+            margin-bottom: 20px;
+        }
+
+        .header h1 {
+            font-size: 28px;
+            font-weight: 700;
+            color: #333;
+        }
+
+        .header p {
+            font-size: 14px;
+            color: #777;
+        }
+
+        .upload-section {
+            margin-bottom: 20px;
+        }
+
+        .upload-section label {
+            display: block;
+            font-size: 16px;
+            font-weight: 500;
+            margin-bottom: 10px;
+            color: #555;
+        }
+
+        .upload-section input[type="file"] {
+            display: block;
+            padding: 12px;
+            font-size: 14px;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            width: 100%;
+            transition: all 0.3s ease;
+        }
+
+        .upload-section input[type="file"]:focus {
+            border-color: #2575fc;
+            outline: none;
+        }
+
+        .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;
+            display: none;
+            padding-top: 20px;
+        }
+
+        .please-wait {
+            font-size: 18px;
+            font-weight: 600;
+            color: #ffcc00;
+            display: none;
+            text-align: center;
+        }
+
+        .output-images {
+            display: flex;
+            justify-content: center;
+            gap: 20px;
+            flex-wrap: wrap;
+        }
+
+        .output-images img {
+            max-width: 100%;
+            width: 300px;
+            border: 2px solid #ddd;
+            border-radius: 8px;
+            object-fit: contain;
+            margin-bottom: 20px;
+        }
+
         .spinner {
             border: 4px solid #f3f3f3; /* Light background */
             border-top: 4px solid #2575fc; /* Blue color for the spinning part */
@@ -34,14 +128,27 @@
             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; }
+        .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>
 <body>
@@ -66,8 +173,20 @@
             Please wait, processing the file...
         </div>
 
-        <!-- Output Section (Buttons only) -->
+        <!-- Output Section -->
         <div class="output-section" id="output-section">
+            <!-- Display Images -->
+            <div class="output-images">
+                <div>
+                    <h3>Original Image</h3>
+                    <img id="original-image" src="" alt="Original" />
+                </div>
+                <div>
+                    <h3>Annotated Image</h3>
+                    <img id="annotated-image" src="" alt="Annotated" />
+                </div>
+            </div>
+            <!-- Download Buttons -->
             <a id="download-csv" href="" download><button>Download CSV</button></a>
             <a id="download-image" href="" download><button>Download Annotated Image</button></a>
         </div>
@@ -80,6 +199,8 @@
         const pleaseWaitSection = document.getElementById('please-wait');
         const downloadCsvButton = document.getElementById('download-csv');
         const downloadImageButton = document.getElementById('download-image');
+        const originalImage = document.getElementById('original-image');
+        const annotatedImage = document.getElementById('annotated-image');
 
         uploadBtn.addEventListener('click', () => {
             const file = invoiceInput.files[0];
@@ -100,9 +221,15 @@
             .then(response => response.json())
             .then(data => {
                 pleaseWaitSection.style.display = 'none'; // Hide "Please Wait"
-                outputSection.style.display = 'block'; // Show download buttons
+                outputSection.style.display = 'block'; // Show the output section
+
+                // Populate download links
                 downloadCsvButton.href = `/download_csv/${data.csv_path.split('/').pop()}`;
                 downloadImageButton.href = `/download_image/${data.image_path.split('/').pop()}`;
+
+                // Display images
+                originalImage.src = `/uploads/${data.original_image.split('/').pop()}`;
+                annotatedImage.src = `/download_image/${data.image_path.split('/').pop()}`;
             })
             .catch(error => {
                 pleaseWaitSection.style.display = 'none'; // Hide "Please Wait"