|
<!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"> |
|
|
|
<a class="navbar-brand" href="pdf"> |
|
<img class="navbar-brand-item" src="../static/icons/avignon_universite_blanc_RVB.png" alt="logo"> |
|
</a> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
<div class="navbar-collapse collapse" id="navbarCollapse"> |
|
<ul class="navbar-nav navbar-nav-scroll ms-auto p-xl-0"> |
|
|
|
<li class="nav-item nav-pills nav-pills-ocr"> |
|
<a class="nav-item nav-link active mb-5" href="pdf">PDF Classifier</a> |
|
</li> |
|
|
|
<li class="nav-item nav-pills nav-pills-ocr"> |
|
<a class="nav-item nav-link " href="sentence">Text Classifier</a> |
|
</li> |
|
</ul> |
|
</div> |
|
|
|
</div> |
|
</nav> |
|
|
|
<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> |
|
|
|
<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="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> |
|
|
|
|
|
</div> |
|
</div> |
|
</main> |
|
|
|
|
|
<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> |
