|
<!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"> |
|
<link rel="stylesheet" href="../static/css/OverlayScrollbars.min.css"> |
|
|
|
|
|
</head> |
|
|
|
<body style="background-color: #1F2020"> |
|
<header> |
|
<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" href="pdf">PDF Classifier</a> |
|
</li> |
|
|
|
<li class="nav-item nav-pills nav-pills-ocr"> |
|
<a class="nav-item nav-link active" href="sentence">Text Classifier</a> |
|
</li> |
|
</ul> |
|
</div> |
|
|
|
</div> |
|
</nav> |
|
</header> |
|
|
|
<main class="pt-3 pt-md-5 pb-md-5 pt-lg-0 mt-3 "> |
|
|
|
|
|
<div class="container mt-lg-7 "> |
|
<div class="justify-content-lg-around justify-content-xl-center justify-content-md-between"> |
|
|
|
|
|
<div class="card card-chat bg-ocr" > |
|
<div class="card-body h-100 bg-ocr rounded-2"> |
|
<div class="tab-content py-0 mb-0 h-100" id="chatTabsContent"> |
|
|
|
<div class="fade tab-pane show active h-100" id="chat-1" role="tabpanel" |
|
aria-labelledby="chat-1-tab"> |
|
|
|
<div |
|
class="chat-conversation-content custom-scrollbar os-host os-theme-dark os-host-overflow os-host-overflow-y os-host-resize-disabled os-host-scrollbar-horizontal-hidden os-host-transition h-100"> |
|
<div class="os-padding"> |
|
<div class="os-viewport os-viewport-native-scrollbars-invisible" |
|
style="overflow-y: scroll;"> |
|
<div class="os-content" style="padding: 0px; height: 100%; width: 100%;"> |
|
|
|
<div class="d-inline mb-1 align-content-between position-relative top-30" id = "presentation"> |
|
<div class="flex-grow-1 row"> |
|
<div class="w-100 col-1 text-center"> |
|
<div class="d-flex flex-column"> |
|
<div class="text-secondary p-2 px-3 rounded-2"> |
|
<div class="card" |
|
style="background-color: #303131;"> |
|
<div |
|
class="card-body"> |
|
<div |
|
class=""> |
|
<div |
|
class="flex-shrink-0 avatar avatar-lg mb-lg-3 "> |
|
<img class="avatar-img rounded-circle" |
|
src="../static/icons/logo_header_128x128.png" |
|
alt=""> |
|
</div> |
|
<h4 class="text-white">How can I help |
|
you today ?</h4> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="row d-flex justify-content-center"> |
|
<div class="col-lg-6 "> |
|
<div class="flex-grow-1"> |
|
<div class="w-100"> |
|
<div class="d-flex flex-column align-items-start"> |
|
<div class="text-secondary p-2 px-3 rounded-2 w-100"> |
|
<div class="card" |
|
style="background-color: #303131; border: 2px dashed rgb(82, 82, 82);"> |
|
<div class="card-body"> |
|
<h5 class="card-title text-white"> |
|
Text Classifier</h5> |
|
<div class="mb-lg-0 text-white-50"> |
|
Enter a sentence or paragraph in the text box below to discover its category. |
|
</div> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="col-lg-6 "> |
|
<div class="flex-grow-1"> |
|
<div class="w-100"> |
|
<div class="d-flex flex-column align-items-start"> |
|
<div class="text-secondary p-2 px-3 rounded-2 w-100"> |
|
<div class="card" |
|
style="background-color: #303131; border: 2px dashed rgb(82, 82, 82);"> |
|
<div class="card-body"> |
|
<h5 class="card-title text-white"> |
|
Example</h5> |
|
<div class="mb-lg-0 text-white-50"> |
|
The sentence <span class="text-white">'Chatbots use AI to communicate with users'</span> is categorized as <span class="text-white"> 'Artificial Intelligence' </span> . |
|
</div> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
<div |
|
class="os-scrollbar os-scrollbar-horizontal os-scrollbar-unusable os-scrollbar-auto-hidden"> |
|
<div class="os-scrollbar-track os-scrollbar-track-off"> |
|
<div class="os-scrollbar-handle" |
|
style="width: 100%; transform: translate(0px, 0px);"></div> |
|
</div> |
|
</div> |
|
<div class="os-scrollbar os-scrollbar-vertical os-scrollbar-auto-hidden"> |
|
<div class="os-scrollbar-track os-scrollbar-track-off"> |
|
<div class="os-scrollbar-handle" |
|
style="height: 32.4192%; transform: translate(0px, 0px);"></div> |
|
</div> |
|
</div> |
|
<div class="os-scrollbar-corner"></div> |
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
</div> |
|
|
|
<div class="card-footer" style="background-color: #242525;"> |
|
<form class="d-flex align-items-center" action="/sentence" method="post" id="sentenceForm"> |
|
<textarea class="form-control mb-sm-0 mb-3" id="ocr-result" name="text" data-autoresize="" |
|
placeholder="Type your text" rows="1" style="height: 50px;box-sizing: border-box; |
|
resize: none; max-height: 120px;" onclick="addAutoResize()" onkeydown="handleEnter(event)" required></textarea> |
|
<button class="btn btn-sm btn-sentence ms-2"><img class="avatar avatar-xs" |
|
src="../static/icons/avignon_universite_blanc_RVB-1.png"></button> |
|
</form> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
</main> |
|
|
|
<script src="../static/js/sentence.js" type="text/javascript"></script> |
|
<script src="../static/js/vendor.bundle.base.js"></script> |
|
<script src="../static/js/Chart.min.js"></script> |
|
|
|
|
|
<script src="../static/js/bootstrap.bundle.min.js"></script> |
|
<script src="../static/js/OverlayScrollbars.min.js"></script> |
|
<script> |
|
|
|
function addAutoResize() { |
|
document.querySelectorAll('[data-autoresize]').forEach(function (element) { |
|
element.style.boxSizing = 'border-box'; |
|
var offset = element.offsetHeight - element.clientHeight; |
|
element.addEventListener('input', function (event) { |
|
event.target.style.height = 'auto'; |
|
event.target.style.height = event.target.scrollHeight + offset + 'px'; |
|
}); |
|
element.removeAttribute('data-autoresize'); |
|
}); |
|
} |
|
|
|
</script> |
|
</body> |
|
|
|
</html> |
