Update templates/extractor.html

templates/extractor.html

@@ -16,7 +16,7 @@
 
     <!--Icon Fonts - Font Awesome Icons-->
     <link rel="stylesheet" href="/static/css/font-awesome.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
     <!-- Animate CSS-->
     <link href="css/animate.css" rel="stylesheet" type="text/css">
 
@@ -27,6 +27,10 @@
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap" rel="stylesheet">
     <title>ExCeipt | Extractor</title>
     <style>
+        body {
+            background-color: #ddd;
+        }
+        
         .containerz {
             display: flex;
             width: 100vw;
@@ -48,7 +52,8 @@
             flex: 2;
             background-color: #ffffff;
             padding: 20px;
-            overflow: auto; /* or 'visible' or 'scroll' */
+            overflow-y: auto;
+            max-height: 100vh;
         }
         
         .backbutton {
@@ -131,7 +136,7 @@
             margin-right: 5px;
         }
         
-        .bordered-table tbody td.full-width input {
+        .bordered-table tbody td .full-width input {
             flex-grow: 1;
         }
         
@@ -156,21 +161,24 @@
             height: 25%;
             padding: 10px 10px 10px 10px;
         }
-       
+        
         .receipt {
             margin: 20px 20px;
             border: 1px solid #ccc;
             border-radius: 10px;
-            font:14px;
+            font: 14px;
         }
+        
         .receipt1 {
             margin: 20px 20px;
-            font:14px;
+            font: 14px;
         }
+        
         .receipt1 table {
-            border-radius:10px;
+            border-radius: 10px;
         }
-        .filenm{
+        
+        .filenm {
             padding: 1em 1.8em;
             box-sizing: border-box;
             border-radius: 10px;
@@ -184,7 +192,7 @@
             font-size: 14px;
             font-weight: 300;
         }
-
+        
         .receipt h1 {
             text-align: center;
         }
@@ -214,8 +222,9 @@
             text-align: right;
             font-weight: bold;
         }
+        
         #dataTable {
-            border-radius:10px;
+            border-radius: 10px;
             border-collapse: collapse;
             width: 100%;
             width: 100%;
@@ -223,17 +232,22 @@
             table-layout: fixed;
             overflow-x: auto;
         }
-        #receiptdiv{
+        
+        #receiptdiv {
             display: none;
         }
-        #dataTable th, #dataTable td {
+        
+        #dataTable th,
+        #dataTable td {
             font-size: 12px;
             text-align: center;
             padding: 3px;
         }
+        
         #downloadbutton {
             display: none;
         }
+        
         #loadingSpinner {
             position: relative;
             top: 20%;
@@ -245,266 +259,190 @@
             width: 30px;
             height: 30px;
             animation: spin 1s linear infinite;
-            display: none; /* Hide initially */
+            display: none;
+            /* Hide initially */
         }
-
+        
         @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
+                transform: rotate(360deg);
+            }
         }
+        
         #uploadbutton:disabled {
             cursor: not-allowed;
             background-color: #dddddd;
         }
+        
         .labels {
             margin: 0 0 0 20px;
             font-weight: 500;
         }
-        .labels p{
+        
+        .labels p {
             font-size: 14px;
             padding-top: 8px;
-            line-height: 15px;
-            color:ccc;
+            line-height: 5px;
+            color: ccc;
+            padding: 8px 0 0 0;
+            text-align: left;
         }
-        #filenm{
+        
+        #filenm {
             position: relative;
-            z-index:999;
-        }
-        .valid{
-            padding-left:8px; 
-            font-weight:300; 
-            font-size:14px;
-        }
-       .details1{
-        border-radius:10px;
-        z-index:-1;
-       }
-          
-    </style>
-    <script src="https://cdn.lordicon.com/lordicon.js"></script>
-</head>
-
-<body>
- <!-- Preloader -->
- <div id="preloader">
-    <div class="ocrloader" id="status">
-        <em></em>
-        <div>
-            <i></i><i></i><i></i><i></i><i></i><i></i><i></i>
-            <i></i><i></i><i></i><i></i><i></i><i></i><i></i>
-            <i></i><i></i><i></i>
-        </div>
-        <span></span>
-    </div>
-</div>
-<!--End of Preloader-->
-<div id="flash-container" class="alert alert-danger" role="alert">
-    <!-- Flash message will be displayed here -->
-</div>
-    <div class="containerz">
-        
-        <div class="left-column">
-            <button class="backbutton" id="submitButton" onclick="window.location.href='{{ url_for('index') }}'">
-                <i class="fa-solid fa-arrow-left"></i>
-                <span>Back</span>
-              </button>
-              <div id="filenm">
-                    <div style="display: flex; align-items: center; position: absolute; top: 10px; right: 0;">
-                        <span class="filenm">
-                            <lord-icon
-                        src="https://cdn.lordicon.com/xpgofwru.json"
-                        trigger="in"
-                        delay ="500"
-                        state="hover-file-2"
-                        colors="primary:#ff8b4a"
-                        style="width:20px;height:20px">
-                    </lord-icon>
-                    {{ old_name }}</span>
-                      </button>
-                </div>
-            </div>
-            
-
-            <div id="canvas-container">
-                <canvas id="c3"></canvas>
-                {% if uploaded_file %}
-            <img src="{{ url_for('static', filename='uploads/' + uploaded_file) }}" id="my-image" hidden>
-            {% else %}
-                <p>No file uploaded.</p>
-            {% endif %}
-               
-            </div>
-        </div>
-        <div class="right-column">
-            <div id="logox">
-                <img src="/static/images/logo.png" id="banner-logo" alt="Landing Page" />
-            </div>
-            
-            <div style="display: flex; align-items: center;">
-           </div>
-           <hr style="color: #ccc; width:95%; opacity:0.35;">
-            <div class="labels" style="margin: 0 0 0 20px;"><p>Receipt Verification</p></div>
-            <div class="receipt">
-                <div class="details">
-            <div style="display: flex; align-items: center;">
-            {% if prediction_result == 'receipt' %}
-            <lord-icon
-                src="https://cdn.lordicon.com/lomfljuq.json"
-                trigger="in"
-                delay="1500"
-                colors="primary:#16c72e"
-                state="morph-check-in-1"
-                style="width:25px;height:25px">
-            </lord-icon>
-            <p class="valid">The image uploaded is a Valid Receipt.</p>
-            {% else %}
-            <lord-icon
-                src="https://cdn.lordicon.com/zxvuvcnc.json"
-                trigger="in"
-                delay="1500"
-                state="morph-cross-in"
-                colors="primary:#e83a30"
-                style="width:25px;height:25px">
-            </lord-icon>
-            <p class="valid">The image uploaded is NOT a Receipt Please return and upload again.</p>
-            {% endif %}
-            </div>
-        </div>
-        </div>
-        <hr style="color: #ccc; width:95%; opacity:0.35;">
-        <div class="labels"><p>Text Extraction</p></div>
-        <div style="text-align: center;">
-            <a href="{{ url_for('run_inference') }}">
-                <button id="uploadbutton" class="uploadbutton" type="submit">Extract</button>
-            </a>
-        </div>
-        <div class="loader" id="loader">
-            <em></em>
-            <div>
-              <i></i><i></i><i></i><i></i><i></i><i></i><i></i>
-              <i></i><i></i><i></i><i></i><i></i><i></i><i></i>
-              <i></i><i></i><i></i>
-            </div>
-            <span></span>
-          </div>
-            <div class="receipt1" id="receiptdiv">
-                <div class="details1">
-                    <table id="dataTable" border="1">
-                        <thead>
-                            <tr>
-                                <th>Receipt No.</th>
-                                <th>Merchant</th>
-                                <th>Address</th>
-                                <th>Date</th>
-                                <th>Time</th>
-                                <th>Items</th>
-                                <th>Price</th>
-                                <th>Total</th>
-                                <th>Vat Tax</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                        </tbody>
-                    </table>
-                 </div>
-          </div>
-          <hr style="color: #ccc; width:95%; opacity:0.35;">
-          <div class="labels" style="margin: 0 0 0 20px;"><p>Export</p></div>
-          <div style="text-align: center;">
-            <a href="{{ url_for('download_csv') }}">
-                <button id="downloadbutton" class="uploadbutton" type="submit">Export CSV</button>
-            </a>
-        </div>
-    </div>
-    
-    <a href="https://lordicon.com/" hidden >Icons by Lordicon.com</a>
-    <script>
-        
-    document.addEventListener('DOMContentLoaded', function() {
-        const dataTable = document.getElementById('receiptdiv');
-        const loadingSpinner = document.getElementById('loader');
-        const runInferenceButton = document.getElementById('uploadbutton');
-        const exportCSVButton = document.getElementById('downloadbutton');
-
-        document.getElementById('uploadbutton').addEventListener('click', function() {
-            loadingSpinner.style.display = 'inline-block'; // Show loading spinner
-            runInferenceButton.disabled = true;
-            runInference();
-        });
-
-
-
-        async function runInference() {
-            await fetch('/run_inference');
-
-            setTimeout(function() {
-                loadingSpinner.style.display = 'none';
-                runInferenceButton.style.display = 'none';
-                exportCSVButton.style.display = 'inline-block';
-				
-				getData();
-            }, 500);
+            z-index: 999;
         }
-
-        async function getData() {
-            const response = await fetch('/get_data');
-            const data = await response.text();
-
-            updateTable(data);
-
-            // Show the table when data is updated
-            dataTable.style.display = 'table';
+        
+        .valid {
+            padding-left: 8px;
+            font-weight: 300;
+            font-size: 14px;
         }
-        function updateTable(data) {
-            const table = data.split('\n').map(row => row.trim()).filter(Boolean).slice(1);
-            const tbody = document.querySelector('#dataTable tbody');
-            tbody.innerHTML = ''; // Clear existing rows
-
-            table.forEach(row => {
-                const column = row.split('|');
-                const RECEIPTNUMBER = column[0] || ''; // Set to an empty string if undefined
-                const MERCHANTNAME = column[1] || '';
-                const MERCHANTADDRESS = column[2] || '';
-                const TRANSACTIONDATE = column[3] || '';
-                const TRANSACTIONTIME = column[4] || '';
-                const ITEMS = column[5] || '';
-                const PRICE = column[6] || '';
-                const TOTAL = column[7] || '';
-                const VATTAX = column[8] || '';
-
-                const tr = document.createElement('tr');
-                tr.innerHTML = `
-                    <td contenteditable="true">${RECEIPTNUMBER}</td>
-                    <td contenteditable="true">${MERCHANTNAME}</td>
-                    <td contenteditable="true">${MERCHANTADDRESS}</td>
-                    <td contenteditable="true">${TRANSACTIONDATE}</td>
-                    <td contenteditable="true">${TRANSACTIONTIME}</td>
-                    <td contenteditable="true">${ITEMS}</td>
-                    <td contenteditable="true">${PRICE}</td>
-                    <td contenteditable="true">${TOTAL}</td>
-                    <td contenteditable="true">${VATTAX}</td>
-                `;
-                tbody.appendChild(tr);
-            });
-        }
-    });
-    </script>
-    
-    <!-- Include JavaScript resources -->
-    <script src="/static/js/jquery.1.8.3.min.js"></script>
-    <script src="/static/js/wow.min.js"></script>
-    <script src="/static/js/featherlight.min.js"></script>
-    <script src="/static/js/featherlight.gallery.min.js"></script>
-    <script src="/static/js/jquery.enllax.min.js"></script>
-    <script src="/static/js/jquery.scrollUp.min.js"></script>
-    <script src="/static/js/jquery.easing.min.js"></script>
-    <script src="/static/js/jquery.stickyNavbar.min.js"></script>
-    <script src="/static/js/jquery.waypoints.min.js"></script>
-    <script src="/static/js/images-loaded.min.js"></script>
-    <script src="/static/js/lightbox.min.js"></script>
-    <script src="/static/js/site.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
-    
-</body>
-
-</html>
+        
+        .details1 {
+            border-radius: 10px;
+            z-index: -1;
+        }
+        
+        .exportbutton {
+            margin-right: 17px;
+            box-sizing: border-box;
+            border-radius: 10px;
+            padding: 1em 1.8em;
+            display: flex;
+            transition: 0.2s background;
+            align-items: center;
+            gap: 0.6em;
+            font-weight: 400;
+            background: linear-gradient(45deg, #FF6347, #FFA07A);
+            backdrop-filter: blur(10px);
+            border: 2px solid transparent;
+            color: white;
+            cursor: pointer;
+        }
+        
+        .exportbutton:hover {
+            border: 2px solid #FF8B4A;
+            background: #f5f5f5;
+            color: #000;
+            transition: all .3s ease-in-out;
+        }
+        
+        @media (max-width: 1024px) {
+            .filenm {
+                border-radius: 10px;
+                gap: 0.3em;
+                font-size: 9px;
+                padding: 9px 11px;
+                margin: 0;
+            }
+            .filenm span {
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+            }
+            .backbutton span {
+                font-size: 9px;
+            }
+            .backbutton {
+                padding: 12px 14px;
+                border-radius: 10px;
+            }
+            .receipt {
+                margin: 15px 15px;
+            }
+            p {
+                padding: 10px;
+                font-size: 13px;
+            }
+            p.desc {
+                font-size: 8px;
+                text-align: left;
+            }
+            .labels {
+                text-align: left;
+            }
+            .labels p {
+                padding: 8px 0 8px 0;
+            }
+            .avatargif img {
+                margin-top: 1.5em;
+            }
+        }
+        
+        @media (max-width: 768px) {
+            #logox img {
+                position: relative;
+                object-position: center;
+                width: 30%;
+                height: 30%;
+                padding: 10px 10px 10px 10px;
+            }
+            .filenm {
+                border-radius: 6px;
+                gap: 0.3em;
+                font-size: 10px;
+                padding: 10px 12px;
+                margin: 0;
+            }
+            .filenm span {
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+            }
+            .backbutton span {
+                font-size: 10px;
+            }
+            .backbutton {
+                padding: 12px 14px;
+                border-radius: 6px;
+            }
+            .labels {
+                padding: 0 0 5px 0;
+                margin: 0;
+            }
+            p {
+                padding: 8px;
+                font-size: 12px;
+            }
+            .uploadbutton {
+                padding: 8px 24px;
+                font-size: 14px;
+                font-weight: 300;
+            }
+            p.desc {
+                font-size: 6px;
+                line-height: 12px;
+            }
+            .valid {
+                padding-left: 5px;
+                font-size: 12px;
+            }
+            .labels p {
+                padding: 8px 0 8px 0;
+            }
+            #dataTable th,
+            #dataTable td {
+                font-size: 6px;
+                text-align: left;
+                padding: 1px;
+            }
+            .exportbutton {
+                margin-left: 17px;
+                border-radius: 5px;
+                padding: .8em 1em;
+                font-weight: 300;
+                font-size: 12px;
+            }
+            .avatargif img {
+                margin-top: 1.25em;
+            }
+        }
+        
+        @media screen and (max-width: 576px) {
+            /* Styles for screens up to 576px wide */
+            .containerz {
+                flex-direction