Spaces:
Runtime error
Runtime error
| <!-- | |
| HTML file for the main page of the ScanUDoc application. | |
| Author: Rodolfo Torres | |
| Email: rodolfo.torres@outlook.com | |
| LinkedIn: https://www.linkedin.com/in/rodolfo-torres-p | |
| This HTML file serves as the main interface for the ScanUDoc application, providing users with access to various features and functionalities. | |
| It is an essential component that allows users to interact with the application's services and perform necessary tasks, such as uploading files, | |
| processing text, and analyzing results. | |
| The code is licensed under the GPL-3.0 license, which is a widely used open-source license, ensuring that any derivative work is also open source. | |
| It grants users the freedom to use, modify, and distribute the software, as well as any modifications or extensions made to it. | |
| However, any modified versions of the software must also be licensed under GPL-3.0. | |
| For more details, please refer to the full text of the GPL-3.0 license at https://www.gnu.org/licenses/gpl-3.0.html. | |
| --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>ScanUDoc - Simplify Text Processing</title> | |
| <meta name="description" content="Empower your document search with ScanUDoc. Harness the power of LLM models for efficient text processing and insightful responses."> | |
| <meta name="keywords" content="ScanUDoc, document search, LLM models, text processing, AI assistant"> | |
| <meta property="og:description" content="Empower your document search with ScanUDoc. Harness the power of LLM models for efficient text processing and insightful responses."> | |
| <meta name="author" content="Rodolfo Torres, rodolfo.torres@outlook.com"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&family=Nunito+Sans:wght@300;400;700&display=swap" rel="stylesheet"> | |
| <link href="style/bootstrap.min.css" rel="stylesheet"> | |
| <link href="style/app.css?v1-2" rel="stylesheet"> | |
| <link rel="stylesheet" href="style/highlight.min.css" /> | |
| <link rel="stylesheet" href="style/highlight.dark.min.css" /> | |
| <link rel="stylesheet" href="style/toastr.min.css" /> | |
| <link href="style/sweetalert2.min.css" rel="stylesheet"> | |
| <link itemprop="url" href="img/thumb.jpg"> | |
| <link itemprop="thumbnailUrl" href="img/thumb.jpg"> | |
| <meta name="theme-color" content="#4b2195"> | |
| <meta property="og:title" content="ScanUDoc" /> | |
| <link rel="apple-touch-icon" sizes="180x180" href="fav/apple-touch-icon.png"> | |
| <link rel="icon" type="image/png" sizes="32x32" href="fav/favicon-32x32.png"> | |
| <link rel="icon" type="image/png" sizes="16x16" href="fav/favicon-16x16.png"> | |
| <link rel="manifest" href="fav/site.webmanifest"> | |
| <link rel="mask-icon" href="fav/safari-pinned-tab.svg" color="#5bbad5"> | |
| <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script> | |
| </head> | |
| <body> | |
| <div id="loading"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="40" height="40"> | |
| <circle cx="50" cy="50" r="40" stroke="#FFFFFF" stroke-width="8" fill="none" /> | |
| <circle cx="50" cy="50" r="40" stroke="#c3a3ff" stroke-width="8" fill="none" stroke-dasharray="250" stroke-dashoffset="0"> | |
| <animate attributeName="stroke-dashoffset" dur="1s" repeatCount="indefinite" from="0" to="250" /> | |
| </circle> | |
| </svg> | |
| </div> | |
| <div class="modal fade" tabindex="-1" id="modalDefault"> | |
| <div class="modal-dialog"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title">About ScanUDoc</h5> | |
| <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{button_close_modal}"></button> | |
| </div> | |
| <div class="modal-body"> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{button_close_modal}}</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="modal fade" tabindex="-1" id="modalConfig"> | |
| <div class="modal-dialog"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title">Settings</h5> | |
| <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{button_close_modal}"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <form id ='textTalkForm'> | |
| <div class="mb-3"> | |
| <label for="voiceOfPlayback" class="form-label">Voice of Playback:</label> | |
| <select class="form-select" id="voiceOfPlayback"> | |
| </select> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="microphoneLanguage" class="form-label">Microphone Language:</label> | |
| <select class="form-select" id="microphoneLanguage"> | |
| </select> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="answersToggle" class="form-label">Answers Yes | No:</label> | |
| <div class="form-check form-switch"> | |
| <input class="form-check-input" type="checkbox" id="answersToggle"> | |
| <label class="form-check-label" for="answersToggle">Toggle Button</label> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{button_close_modal}}</button> | |
| <button id="modal-settings-submit" type="button" class="btn btn-primary">Submit</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="modal fade" tabindex="-1" id="modalText"> | |
| <div class="modal-dialog"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title">Enter your text</h5> | |
| <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{button_close_modal}"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="alert alert-info" role="alert"> | |
| Please enter a text of maximum 4000 characters. | |
| </div> | |
| <textarea id="textArea" class="form-control" rows="4" maxlength="4000"></textarea> | |
| <div class="mt-2"> | |
| <span id="charCount">4000</span> characters remaining | |
| </div> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{button_close_modal}}</button> | |
| <button type="button" class="btn btn-primary" id="sendButton">Send</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="modal fade" tabindex="-1" id="modalFile"> | |
| <div class="modal-dialog"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title">Upload your PDF or TXT File</h5> | |
| <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{button_close_modal}"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="alert alert-info" role="alert"> | |
| You can upload a PDF or TXT file, maximum 1MB in size.<br> | |
| Only the first 4000 characters of the text will be processed. | |
| </div> | |
| <form id="file-form" enctype="multipart/form-data"> | |
| <div class="input-group mb-3"> | |
| <div class="custom-file"> | |
| <input type="file" class="custom-file-input" id="fileInput" name="file" accept=".pdf,.txt"> | |
| <label class="custom-file-label" for="fileInput">Choose file</label> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{button_close_modal}}</button> | |
| <button type="button" class="btn btn-primary" id="sendButton2">Send</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="modal fade" tabindex="-1" id="modalUrl"> | |
| <div class="modal-dialog"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title">Enter the Webpage URL</h5> | |
| <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{button_close_modal}"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="alert alert-info" role="alert"> | |
| You can input a URL from a news website.<br>Note that with other types of websites, the functionality may not work as effectively. | |
| </div> | |
| <div class="form-group"> | |
| <label for="url">URL:</label> | |
| <input type="text" class="form-control" id="url" value=""> | |
| </div> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{button_close_modal}}</button> | |
| <button type="button" class="btn btn-primary" id="sendButton3">Send</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <header class="hide-section"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-sm-12"> | |
| <a href="./"><img src="img/logo.png" alt="Ask The Oracle" title="Ask The Oracle" id="logo"></a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <section id="hero" class="align-items-center hide-section" > | |
| <div class="container"> | |
| <div class="row align-items-center"> | |
| <div class="col-lg-6 col-md-12"> | |
| <h1>{{main_title}}</h1> | |
| <p class="translate-sub-title">{{sub_title}}</p> | |
| </div> | |
| <div class="col-lg-6 col-md-12 d-flex justify-content-lg-end justify-content-md-center justify-content-sm-center hero-call-action-img"> | |
| <img src="img/robot.png" alt="{{slogan}}" title="{{slogan}}" class="robot"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="container"> | |
| <div class="row"> | |
| <div id="body-frame"> | |
| <section id="chat-background" style="display:block;"> | |
| <div class="container"> | |
| <div class="row chat-background"> | |
| <div class="col p-0 col-main-chat"> | |
| <div class="ai-chat-top" style="display:none"> | |
| <div class="row align-items-center"> | |
| <div class="col-md-7 col-lg-8 col-7"> | |
| <div class="wrapper-ai-chat-top"> | |
| <div class="ai-chat-top-image"><img src="img/robot-avatar.png" alt="image" onerror="this.src='img/no-image.svg'"></div> | |
| <div class="ai-chat-top-info"> | |
| <div class="ai-chat-top-name"><h4>Answerio <span class="online-bullet"></span></h4></div> | |
| <div class="ai-chat-top-job"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-5 col-lg-4 col-5"> | |
| <div class="icons-options"> | |
| <div class="dropdown-center"> | |
| <img class="about_modal" src="img/icon-about.svg" alt="{{about_label}}" title="{{about_label}}" data-bs-toggle="modal" data-bs-target="#modalDefault"> | |
| <img class="about_modal" src="img/icon-config.svg" alt="{{about_label}}" title="{{about_label}}" data-bs-toggle="modal" data-bs-target="#modalConfig"> | |
| <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> | |
| <img src="img/icon-menu.svg" alt="Menu" title="Menu"> | |
| </button> | |
| <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> | |
| <li id="close-chat"><a class="dropdown-item" href="#" onclick="closeChat()"><img src="img/icon-close.svg"> <span>{{button_close}}</span></a></li> | |
| <li id="clear-chat"><a class="dropdown-item" href="#" onclick="clearChat()"><img src="img/clear-chat.svg"> <span>{{button_clear_chat}}</span></a></li> | |
| <li id="clear-all-chats"><a class="dropdown-item" href="#" onclick="clearChat('all')"><img src="img/icon-trash.svg"> <span>{{button_clear_all_chats}}</span></a></li> | |
| <li id="download-chat"><a class="dropdown-item" href="#" onclick="handleDownload()"><img src="img/icon-download.svg"> <span>{{button_download_chat}}</span></a></li> | |
| <li id="download-chat-pdf"><a class="dropdown-item" href="#" onclick="downloadPdf()"><img src="img/icon-download-pdf.svg"> <span>{{button_download_chat_pdf}}</span></a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="ia-chat-content"> | |
| <div class="row"> | |
| <div class="chat-frame"> | |
| <div class="col-12"><h2 class="select-option-title text-center">{{chat_call_action1}}</h2></div> | |
| <div class="cards-options"> | |
| <div class="row text-center"> | |
| <div class="col-12"> | |
| <div class="wrapper-cards-option" id="load-character"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="overflow-chat" style="display:none"></div> | |
| </div> | |
| <div class="message-area-bottom" style="display:none"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col"> | |
| <div class="chat-input"> | |
| <span class="character-typing"> | |
| <div><b class='wait'>{{wait}}</b> <span></span> <b class='is_typing'>{{is_typing}}</b></div> | |
| </span> | |
| <textarea name="chat" id="chat" placeholder="{{input_placeholder}}" maxlength="200"></textarea> | |
| <img src="img/mic-start.svg" id="microphone-button" style="display:none"> | |
| <button class="submit btn-send-chat btn btn-primary" tabindex="0"><span>{{button_send}}</span> <img src="img/icon-send.svg"></button> | |
| <button class="submit btn-cancel-chat btn btn-primary" tabindex="0" style="display:none"><img src="img/btn_stop.svg"> <span class="stop-chat-label">{{button_cancel}}</span></button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| </div> | |
| <section id="feedback"><span></span></section> | |
| <script src="js/bootstrap.bundle.min.js" crossorigin="anonymous"></script> | |
| <script src="js/jquery-3.6.0.min.js"></script> | |
| <script src="js/highlight.min.js"></script> | |
| <script src="js/toastr.min.js"></script> | |
| <script src="js/sweetalert2.all.min.js"></script> | |
| <script src="js/sse.js"></script> | |
| <script src="js/pdfmake.min.js"></script> | |
| <script src="js/vfs_fonts.js"></script> | |
| <script src="js/app.js?v1-2"></script> | |
| </body> | |
| </html> |