alessandro trinca tornidor
feat: now the frontend is more similar to the one within kite.koboldai.net; when digiting within the input field it's possible to fire the funtion pressing enter
a4a5767
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Words Frequency Statistics</title> | |
| <link rel="stylesheet" href="/static/index.css"> | |
| <script src="/static/index.js"></script> | |
| </head> | |
| <body> | |
| <h1 id="id-title" class="h1">Words Frequency Statistics in text</h1> | |
| <div id="id-orientation-message" class="id-orientation-message" aria-hidden="true"><!-- ::before (Mobile users: use this project in landscape mode!) --></div> | |
| <div class="margin10px"> | |
| <button id="btn4-get-words-frequency" aria-label="btn4-get-words-frequency" onclick="getWordsFrequency()" type="submit">get words frequency</button> | |
| <label for="id-input-webserver-wordfreq-checkbox" class="margin5px-left">Use a custom webserver endpoint</label> | |
| <input | |
| type="checkbox" | |
| id="id-input-webserver-wordfreq-checkbox" | |
| aria-label="id-input-webserver-wordfreq-checkbox" | |
| name="id-input-webserver-wordfreq-checkbox" | |
| onchange="document.getElementById('id-input-webserver-wordfreq').disabled=!this.checked;document.getElementById('id-wordfreq-show-analyzer').innerText=this.checked?'webserver':'embedded';" | |
| checked | |
| /> | |
| <input type="URL" id="id-input-webserver-wordfreq" aria-label="id-input-webserver-wordfreq" value="http://localhost:7860" /> | |
| <span>Currently using: <span id="id-wordfreq-show-analyzer" aria-label="id-wordfreq-show-analyzer">webserver</span></span> | |
| <label for="id-input-file-selector" class="margin5px-left">Text file selector</label> | |
| <input type="file" onchange="previewFile()" id="id-input-file-selector" aria-label="id-input-file-selector" /> | |
| </div> | |
| <div id="id-container-row-global-editor-frequency" class="display-flex"> | |
| <div id="id-col1-editor" class="col-flex50 border-black padding10px margin10px overflow-hidden background-color-lightgray"> | |
| <h4>Text Editor</h4> | |
| <div id="editor" contenteditable="true" class="max-height-80vh overflow-auto background-color-whitesmoke" aria-label="editor"> | |
| Hi there, how are you? There are some pasties for you. Can you give me also... Take a pasty from the table there! | |
| </div> | |
| </div> | |
| <div id="id-col2-words-frequency" class="col-flex50 border-blue padding10px margin10px overflow-hidden background-color-lightgray"> | |
| <div class="display-flex"> | |
| <div class="width-50perc"> | |
| <h4 id="id-words-frequency-table-title" aria-label="id-words-frequency-table-title">Words Frequency Stats</h4> | |
| <input type="text" id="filter-words-frequency" aria-label="filter-words-frequency" placeholder="Filter the output table..." class="width-80perc" onkeydown="updateWordsFreqIfPressEnter()"/> | |
| <button type="submit" id="btn-filter-words-frequency" aria-label="btn-filter-words-frequency" onclick="updateWordsFrequencyTables()">Submit</button> | |
| </div> | |
| <div class="display-flex width-50perc margin2px-bottom"> | |
| <form id="id-form-sort-by" aria-label="id-form-sort-by"> | |
| <fieldset> | |
| <legend>Sorting method:</legend> | |
| <div> | |
| <input type="radio" id="sort-by-count" aria-label="sort-by-count" name="sort" value="count"/> | |
| <label for="sort-by-count" id="sort-by-count-label" aria-label="sort-by-count-label">Count</label> | |
| <input type="radio" id="sort-by-name" aria-label="sort-by-name" name="sort" value="word_prefix" /> | |
| <label for="sort-by-name" id="sort-by-name-label" aria-label="sort-by-name-label">Name</label> | |
| </div> | |
| </fieldset> | |
| </form> | |
| <form id="id-form-order-by" aria-label="id-form-order-by"> | |
| <fieldset> | |
| <legend>Order:</legend> | |
| <div> | |
| <input type="radio" id="order-by-asc" aria-label="order-by-asc" name="order" value="asc" /> | |
| <label for="order-by-asc" id="order-by-asc-label" aria-label="order-by-asc-label">Ascending</label> | |
| <input type="radio" id="order-by-desc" aria-label="order-by-desc" name="order" value="desc" checked/> | |
| <label for="order-by-desc" id="order-by-desc-label" aria-label="order-by-desc-label">Descending</label> | |
| </div> | |
| </fieldset> | |
| </form> | |
| </div> | |
| </div> | |
| <span id="id-n-total-rows" aria-label="id-n-total-rows" class="display-none"></span> | |
| <span id="waiting-for-be" class="display-none">waiting for backend response...</span> | |
| <span id="waiting-for-be-error" class="display-none">Error!</span> | |
| <div id="words-frequency" class="max-height-80vh overflow-auto background-color-whitesmoke" aria-label="words-frequency"></div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |