Hugging Face's logo

Spaces:
Innovex
/
ExCeipt
Running

App Files Community
1
Scezui commited on
Commit
bd42982
·
1 Parent(s): 247a2c8

Update templates/extractor.html

Browse files
Files changed (1) hide show
  1. templates/extractor.html +310 -1
templates/extractor.html CHANGED
@@ -445,4 +445,313 @@
445
  @media screen and (max-width: 576px) {
446
  /* Styles for screens up to 576px wide */
447
  .containerz {
448
- flex-direction
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
445
  @media screen and (max-width: 576px) {
446
  /* Styles for screens up to 576px wide */
447
  .containerz {
448
+ flex-direction: column;
449
+ }
450
+ .left-column,
451
+ .right-column {
452
+ flex: 1;
453
+ width: 100%;
454
+ }
455
+ .left-column {
456
+ box-shadow: inset 0 15px 30px rgba(0, 0, 0, 0.1);
457
+ padding: 10px;
458
+ }
459
+ .right-column {
460
+ border-radius: 20px;
461
+ flex: 1.2;
462
+ }
463
+ .filenm {
464
+ border-radius: 7px;
465
+ gap: 0.3em;
466
+ font-size: 12px;
467
+ white-space: nowrap;
468
+ overflow: hidden;
469
+ text-overflow: ellipsis;
470
+ padding: 8px 10px;
471
+ margin: 0;
472
+ }
473
+ .backbutton span {
474
+ font-size: 12px;
475
+ }
476
+ .backbutton {
477
+ padding: 8px 10px;
478
+ border-radius: 7px;
479
+ }
480
+ .labels {
481
+ padding: 0 0 5px 0;
482
+ margin: 0;
483
+ }
484
+ .uploadbutton {
485
+ padding: 6px 22px;
486
+ font-size: 12px;
487
+ font-weight: 300;
488
+ }
489
+ p.desc {
490
+ font-size: 4px;
491
+ text-align: left;
492
+ line-height: 10px;
493
+ }
494
+ .valid {
495
+ padding-left: 5px;
496
+ font-size: 10px;
497
+ }
498
+ .labels p {
499
+ padding: 8px 0 8px 0;
500
+ }
501
+ #dataTable th,
502
+ #dataTable td {
503
+ font-size: 6px;
504
+ text-align: left;
505
+ padding: 1px;
506
+ }
507
+ .exportbutton {
508
+ margin-left: 17px;
509
+ border-radius: 5px;
510
+ padding: .5em .8em;
511
+ font-weight: 300;
512
+ font-size: 10px;
513
+ }
514
+ .avatargif img {
515
+ margin-top: 1em;
516
+ }
517
+ }
518
+
519
+ p.desc {
520
+ font-size: 10px;
521
+ font-family: 'Poppins';
522
+ font-weight: 200;
523
+ margin: 0;
524
+ padding: 0;
525
+ line-height: 12px;
526
+ font-style: italic;
527
+ }
528
+
529
+ .fa-spinner {
530
+ font-size: 16px;
531
+ }
532
+
533
+ .avatargif {
534
+ display: flex;
535
+ justify-content: center;
536
+ align-items: center;
537
+ }
538
+
539
+ .avatargif img {
540
+ margin-top: 3.5em;
541
+ width: 40%;
542
+ height: 40%;
543
+ }
544
+ </style>
545
+ <script src="https://cdn.lordicon.com/lordicon.js"></script>
546
+ </head>
547
+
548
+ <body>
549
+ <div id="flash-container" class="alert alert-danger" role="alert">
550
+ <!-- Flash message will be displayed here -->
551
+ </div>
552
+ <div class="containerz">
553
+
554
+ <div class="left-column">
555
+ <button class="backbutton" id="submitButton" onclick="window.location.href='{{ url_for('index') }}'">
556
+ <i class="fa-solid fa-arrow-left"></i>
557
+ <span>Back</span>
558
+ </button>
559
+ <div id="filenm">
560
+ <div style="display: flex; align-items: center; position: absolute; top: 0px; right: 0;">
561
+ <span class="filenm">
562
+ <lord-icon
563
+ src="https://cdn.lordicon.com/xpgofwru.json"
564
+ trigger="in"
565
+ delay ="500"
566
+ state="hover-file-2"
567
+ colors="primary:#ff8b4a"
568
+ style="width:20px;height:20px">
569
+ </lord-icon>
570
+ {{ old_name }}</span>
571
+ </button>
572
+ </div>
573
+ </div>
574
+
575
+
576
+ <div id="canvas-container">
577
+ <canvas id="c3"></canvas> {% if uploaded_file %}
578
+ <img src="{{ url_for('static', filename='uploads/' + uploaded_file) }}" id="my-image" hidden> {% else %}
579
+ <p>No file uploaded.</p>
580
+ {% endif %}
581
+
582
+ </div>
583
+ </div>
584
+ <div class="right-column">
585
+ <div id="logox">
586
+ <img src="/static/images/logo.png" id="banner-logo" alt="Landing Page" />
587
+ </div>
588
+
589
+ <div style="display: flex; align-items: center;">
590
+ </div>
591
+ <hr style="color: #ccc; width:95%; opacity:0.35;">
592
+ <div class="labels" style="margin: 0 0 0 20px;">
593
+ <p>Receipt Verification</p>
594
+ <p class="desc">Verify receipt details attentively, acknowledging occasional misclassification, which may arise from variations in image quality or format.</p>
595
+ </div>
596
+ <div class="receipt">
597
+ <div class="details">
598
+ <div style="display: flex; align-items: center;">
599
+ {% if prediction_result.lower() == 'receipt' %}
600
+ <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">
601
+ </lord-icon>
602
+ <p class="valid">The image uploaded is a Valid Receipt.</p>
603
+ {% else %}
604
+ <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">
605
+ </lord-icon>
606
+ <p class="valid">The image uploaded is NOT a Receipt Please return and upload again.</p>
607
+ {% endif %}
608
+ </div>
609
+ </div>
610
+ </div>
611
+ <hr style="color: #ccc; width:95%; opacity:0.35;">
612
+ <div class="labels" style="margin: 0 0 0 20px;">
613
+ <p>Text Extraction</p>
614
+ <p class="desc">Ensure optimal text extraction accuracy from receipts by making sure that the receipt image is clear, well-lit, and after extraction review the extracted text and edit.</p>
615
+ </div>
616
+ <div style="text-align: center; margin-top: 25px;">
617
+ <button id="uploadbutton" class="uploadbutton" type="submit">
618
+ <i id="loadingIcon" class="fa fa-spinner fa-spin" style="display: none;"></i>
619
+ <span id="extractingText">Extract</span>
620
+ </button>
621
+ </div>
622
+ <div class="avatargif">
623
+ <img src="/static/images/avatar.gif" id="avatargif" />
624
+ </div>
625
+ <div class="receipt1" id="receiptdiv">
626
+ <div class="details1">
627
+ <table id="dataTable" border="1">
628
+ <thead>
629
+ <tr>
630
+ <th>Receipt No.</th>
631
+ <th>Merchant</th>
632
+ <th>Address</th>
633
+ <th>Date</th>
634
+ <th>Time</th>
635
+ <th>Items</th>
636
+ <th>Price</th>
637
+ <th>Total</th>
638
+ <th>VAT</th>
639
+ </tr>
640
+ </thead>
641
+ <tbody>
642
+ </tbody>
643
+ </table>
644
+ </div>
645
+ </div>
646
+
647
+ <div style="text-align: center; display: none; justify-content: center;" id="downloadbutton">
648
+ <a href="{{ url_for('download_csv') }}">
649
+ <button class="exportbutton" type="submit"><i class="fa-solid fa-download"></i>Download CSV</button>
650
+ </a>
651
+ <button class="exportbutton" onclick="window.location.href='{{ url_for('index') }}'">
652
+ <span id="uploadIcon"><i class="fas fa-upload"></i></span>
653
+ <span>Upload again</span>
654
+ </button>
655
+ </div>
656
+
657
+
658
+
659
+ </div>
660
+ <a href="https://lordicon.com/" hidden>Icons by Lordicon.com</a>
661
+ <script>
662
+ document.addEventListener('DOMContentLoaded', function() {
663
+ const dataTable = document.getElementById('receiptdiv');
664
+ const loadingSpinner = document.getElementById('loadingIcon');
665
+ const extractingText = document.getElementById('extractingText');
666
+ const runInferenceButton = document.getElementById('uploadbutton');
667
+ const exportCSVButton = document.getElementById('downloadbutton');
668
+
669
+ document.getElementById('uploadbutton').addEventListener('click', function() {
670
+ loadingSpinner.style.display = 'inline-block'; // Show loading spinner
671
+ extractingText.textContent = 'Extracting...'; // Change text to "Extracting..."
672
+ runInferenceButton.disabled = true;
673
+ // Hide the avatargif image
674
+ document.getElementById('avatargif').style.display = 'none';
675
+ runInference();
676
+ });
677
+
678
+ async function getData() {
679
+ const response = await fetch('/get_data');
680
+ const data = await response.text();
681
+
682
+ updateTable(data);
683
+
684
+ // Show the table when data is updated
685
+ dataTable.style.display = 'table';
686
+ }
687
+
688
+ async function runInference() {
689
+ await fetch('/run_inference');
690
+
691
+ setTimeout(function() {
692
+ loadingSpinner.style.display = 'none';
693
+ runInferenceButton.style.display = 'none';
694
+ exportCSVButton.style.display = 'flex';
695
+
696
+ getData();
697
+ }, 500);
698
+ }
699
+
700
+ function updateTable(data) {
701
+ Papa.parse(data, {
702
+ header: true,
703
+ skipEmptyLines: true,
704
+ complete: function(results) {
705
+ const tbody = document.querySelector('#dataTable tbody');
706
+ tbody.innerHTML = ''; // Clear existing rows
707
+
708
+ results.data.forEach(row => {
709
+ const RECEIPTNUMBER = row['RECEIPTNUMBER'] || '';
710
+ const MERCHANTNAME = row['MERCHANTNAME'] || '';
711
+ const MERCHANTADDRESS = row['MERCHANTADDRESS'] || '';
712
+ const TRANSACTIONDATE = row['TRANSACTIONDATE'] || '';
713
+ const TRANSACTIONTIME = row['TRANSACTIONTIME'] || '';
714
+ const ITEMS = row['ITEMS'] || '';
715
+ const PRICE = row['PRICE'] || '';
716
+ const TOTAL = row['TOTAL'] || '';
717
+ const VATTAX = row['VATTAX'] || '';
718
+
719
+ const tr = document.createElement('tr');
720
+ tr.innerHTML = `
721
+ <td contenteditable="true">${RECEIPTNUMBER}</td>
722
+ <td contenteditable="true">${MERCHANTNAME}</td>
723
+ <td contenteditable="true">${MERCHANTADDRESS}</td>
724
+ <td contenteditable="true">${TRANSACTIONDATE}</td>
725
+ <td contenteditable="true">${TRANSACTIONTIME}</td>
726
+ <td contenteditable="true">${ITEMS}</td>
727
+ <td contenteditable="true">${PRICE}</td>
728
+ <td contenteditable="true">${TOTAL}</td>
729
+ <td contenteditable="true">${VATTAX}</td>
730
+ `;
731
+ tbody.appendChild(tr);
732
+ });
733
+ }
734
+ });
735
+ }
736
+
737
+ });
738
+ </script>
739
+ <!-- Include JavaScript resources -->
740
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
741
+ <script src="/static/js/jquery.1.8.3.min.js"></script>
742
+ <script src="/static/js/wow.min.js"></script>
743
+ <script src="/static/js/featherlight.min.js"></script>
744
+ <script src="/static/js/featherlight.gallery.min.js"></script>
745
+ <script src="/static/js/jquery.enllax.min.js"></script>
746
+ <script src="/static/js/jquery.scrollUp.min.js"></script>
747
+ <script src="/static/js/jquery.easing.min.js"></script>
748
+ <script src="/static/js/jquery.stickyNavbar.min.js"></script>
749
+ <script src="/static/js/jquery.waypoints.min.js"></script>
750
+ <script src="/static/js/images-loaded.min.js"></script>
751
+ <script src="/static/js/lightbox.min.js"></script>
752
+ <script src="/static/js/site.js"></script>
753
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
754
+
755
+ </body>
756
+
757
+ </html>