|
<!DOCTYPE html> |
|
<html lang="en-US"> |
|
|
|
<head> |
|
<title>Pdf Categorization</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> |
|
<li class="nav-item nav-pills nav-pills-ocr"> |
|
<a class="nav-item nav-link " href="voice">SLU</a> |
|
</li> |
|
<li class="nav-item dropdown"> |
|
<a class="nav-link" href="#" id="accounntMenu" data-bs-toggle="dropdown" aria-haspopup="true" |
|
aria-expanded="false">language</a> |
|
<ul class="dropdown-menu" aria-labelledby="accounntMenu"> |
|
<li> <a class="dropdown-item " href="pdf_fr"><img src="../static/icons/France.svg" |
|
class="avatar avatar" style="height: 20px;" alt="French flag"> French </a> </li> |
|
</ul> |
|
</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> |
|
<div class="row d-sm-flex justify-content-center mb-5"> |
|
<div class="col-11 d-none" id="dynamicResult"> |
|
<div class="row " > |
|
<h1 id="resultsHeading" class="text-center text-white-50">Results</h1> |
|
<div class="col-4 " > |
|
<div class="nav flex-column position-sticky top-10 shadow-lg" |
|
style="background-color: #222424;"> |
|
<div class="card" style="background-color: #303131; border: 2px dashed rgb(82, 82, 82);"> |
|
<div class="card-body "> |
|
<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-result-section"> |
|
{% 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-result-section">{{ |
|
predicted_class[0] |
|
}}</span> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="card my-auto mt-3" |
|
style="background-color: #303131; border: 2px dashed rgb(82, 82, 82);"> |
|
<div class="card-body"> |
|
<h4 class="card-title text-white">Legend</h4> |
|
<div class="row d-flex"> |
|
<div class="col-sm-6 col-6"> |
|
<ul class="graphl-legend-rectangle"> |
|
<li class="text-white-50"><span class="bg-info "></span>vehicles |
|
</li> |
|
<li class="text-white-50"><span class="bg-success"></span>environments |
|
</li> |
|
<li class="text-white-50"><span class="bg-danger"></span>energies |
|
</li> |
|
<li class="text-white-50"><span class="bg-primary"></span>Physics |
|
</li> |
|
<li class="text-white-50"><span class="bg-moss"></span>robotics |
|
</li> |
|
<li class="text-white-50"><span class="bg-agri"></span>agriculture |
|
</li> |
|
<li class="text-white-50"><span class="bg-yellow"></span>ML |
|
</li> |
|
<li class="text-white-50"><span class="bg-warning"></span>economies |
|
</li> |
|
<li class="text-white-50"><span class="bg-vanila"></span>technologies |
|
</li> |
|
</ul> |
|
</div> |
|
<div class="col-sm-6 col-6"> |
|
<ul class="graphl-legend-rectangle"> |
|
|
|
<li class="text-white-50"><span class="bg-coffe"></span>mathematics |
|
</li> |
|
<li class="text-white-50"><span class="bg-orange "></span>sports |
|
</li> |
|
<li class="text-white-50"><span class="bg-cyan"></span>AI |
|
</li> |
|
<li class="text-white-50"><span class="bg-rosy"></span>Innovation |
|
</li> |
|
<li class="text-white-50"><span class="bg-picton"></span>Science |
|
</li> |
|
<li class="text-white-50"><span class="bg-purple"></span>Societies |
|
</li> |
|
<li class="text-white-50"><span class="bg-pink"></span>administration |
|
</li> |
|
<li class="text-white-50"><span class="bg-cambridge"></span>biology |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
<div class="col-8"> |
|
<div class="card " style="background-color: #303131; border: 2px dashed rgb(82, 82, 82);"> |
|
<div class="card-body"> |
|
<h5 class="card-title text-white mb-3">Transcribed and Classified Text</h5> |
|
<div id="transcribedText" class="text-white-50 mb-4"></div> |
|
<div class="text-center"> |
|
<div class="col-12 d-flex justify-content-center"> |
|
<div class="col-sm-12 d-inline align-items-center" id="classifiedText"> |
|
{% if sentences_prediction %} |
|
{% for sentence, color in sentences_prediction.items() %} |
|
<span class="text-bold text-start bg-{{color[1]}}"> |
|
{{sentence}} |
|
</span> |
|
{% endfor %} |
|
{% endif %} |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
</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> |
