File size: 6,995 Bytes
5bc067b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 |
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>OCR</title>
<link rel="icon" href="https://cdn-icons-png.flaticon.com/512/5262/5262072.png">
<link rel="stylesheet" href="../static/css/style2.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="../static/css/vendor.bundle.base.css">
</head>
<body style="background-color: #1F2020;">
<nav class="navbar navbar-expand-lg bg-ocr mb-5">
<div class="container h-100">
<!-- Logo START -->
<a class="navbar-brand" href="pdf">
<img class="navbar-brand-item" src="../static/icons/avignon_universite_blanc_RVB.png" alt="logo">
</a>
<!-- Logo END -->
<!-- Responsive navbar toggler -->
<button class="navbar-toggler ms-auto icon-md btn btn-light p-0 collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-animation">
<span></span>
<span></span>
<span></span>
</span>
</button>
<!-- Main navbar START -->
<div class="navbar-collapse collapse" id="navbarCollapse">
<ul class="navbar-nav navbar-nav-scroll ms-auto p-xl-0">
<!-- Nav item 1 Demos -->
<li class="nav-item nav-pills nav-pills-ocr">
<a class="nav-item nav-link active mb-5" href="pdf">PDF Classifier</a>
</li>
<!-- Nav item 2 Pages -->
<li class="nav-item nav-pills nav-pills-ocr">
<a class="nav-item nav-link " href="sentence">Text Classifier</a>
</li>
</ul>
</div>
<!-- Main navbar END -->
</div>
</nav>
<!-- Container START -->
<main>
<div class="row d-sm-flex justify-content-center ">
<div class="col-lg-6 col-11 mb-lg-0 mb-5">
<form class="" action="/pdf/upload" style="height: 88%;" id="upload-form" method="POST"
enctype="multipart/form-data">
<div class="drag-image" id="dropArea">
<div class="text-center ">
<h6 class="text-white-50 mb-3">Drag and Drop PDF here</h6>
<span class="text-white-50">OR</span>
<h6 class="text-white-50 mt-3">Click here</h6>
<input id="file-input" type="file" name="image" accept=".pdf" hidden>
</div>
</div>
<div class="d-flex justify-content-center">
<button class="btn me-3 btn-ocr" id="reset" type="button" onclick="deleteCurrentFile()"> <i
class="bi bi-pencil-fill pe-1"></i> Clear </button>
<button type="submit" class="btn ms-3 btn-ocr">Submit</button>
</div>
</form>
</div>
<!-- la categorie la plus dominante-->
<div class="col-lg-5 col-xl-5 col-11 mt-5 mt-lg-0">
<div class="card" style="background-color: #303131; border: 2px dashed rgb(82, 82, 82);">
<div class="card-body text-center" id="static">
<div class="col-12 d-flex justify-content-center">
<div class="col-sm-12 d-inline align-items-center" style="height: 175px; width: 229px;">
<div class="flex-shrink-0 avatar avatar-lg me-2 mb-3 mt-4">
<img class="avatar-img rounded-circle"
src="../static/icons/logo_header_128x128.png" alt="">
</div>
<h5 class="card-title text-white-50">Get more insights about your pdf 📑📑.</h5>
</div>
</div>
</div>
<div class="card-body d-none" id="dynamic">
<h4 class="card-title text-white">Text's Category</h4>
<div class="row d-flex">
<div class="col-sm-7 col-6">
<ul class="graphl-legend-rectangle" id="class-probabilities">
{% for class_label, probability in class_probabilities.items() %}
{% if loop.index <= 5 %} <li class="text-white-50">
<span class="bg-{{ class_label[1] }}"></span>
<div class="d-flex justify-content-center">
{{ class_label[0] }}:
<span class="text-white w-100"> {{ "%.2f" % probability }}%</span>
</div>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
<div class="col-sm-5 grid-margin col-6">
<canvas class="bestSellers" data-chart='{{ chart_data | tojson | safe }}'
id="bestSellers#"></canvas>
</div>
</div>
<div class="mb-lg-0 text-white-50">
la classe la plus dominante est <span class="fw-bolder text-white" id="predicted-class">{{
predicted_class[0]
}}</span>
</div>
</div>
</div>
<!-- <div class="">
<textarea id="category-result" readonly>{{predicted_class}}</textarea>
</div> -->
<div class="result mt-3">
<h6 class="text-start">Extracted Text</h6>
<textarea id="ocr-result" readonly>{{extracted_text}}</textarea>
<button id="copy-btn" class="btn btn-ocr">Copy</button>
</div>
<!-- Right sidebar END -->
</div> <!-- Row END -->
</div>
</main>
<!-- Container END -->
<script id="dashboard-pdf-script" src="../static/js/dashboard_pdf.js"></script>
<script src="../static/js/Chart.min.js"></script>
<script src="../static/js/pdf.js" type="text/javascript"></script>
<script src="../static/js/vendor.bundle.base.js"></script>
</body>
</html> |