| <!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> |
