Spaces:
Runtime error
Runtime error
| <html lang="en" class="js"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1"> | |
| <meta name="description" content="summary is a small web application that help users summarizing long documents."> | |
| <title>summary</title> | |
| <link href="static/assets/favicon.png" rel="icon" type="image/png" sizes="16x16"> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"> | |
| <link rel="stylesheet" href="static/css/style.css"> | |
| <link rel="stylesheet" href="static/assets/css/all.css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js"></script> | |
| </head> | |
| <body class="d-flex flex-column min-vh-100"> | |
| <ul class="nav nav-tabs"> | |
| <li> | |
| <a href="https://github.com/anhtien228" | |
| rel="noreferrer" | |
| target="_blank" | |
| class="link link--io"> | |
| creator | |
| </a></li> | |
| <li> | |
| <a href="https://github.com/anhtien228/web-based-ai" | |
| rel="noreferrer" | |
| target="_blank" | |
| class="link link--io"> | |
| project | |
| </a></li> | |
| <li> | |
| <a href="#open-modal" | |
| class="link link--io"> | |
| feedback | |
| </a></li> | |
| </ul> | |
| <div class="container-fluid"> | |
| <div class="row"> | |
| <div class="col-md-12 my-4"> | |
| <a href="https://hf.space/embed/datien228/text-summarizer/+?__theme=light" | |
| rel="noreferrer" | |
| target="_blank" | |
| class="link-title"> | |
| <h1 class="text-center page-title"> | |
| summary | |
| </h1> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="row mt-4"> | |
| <div class="col-md-1"></div> | |
| <div class="col-md-4 input-field"> | |
| <div class="row mb-4 flex-col-50"> | |
| <div class="col-md-8"> | |
| <h2 class="main-heading"> | |
| put your text here | |
| </h2> | |
| <p>You can change document's language</p> | |
| </div> | |
| <div class="col-md-4 switch-format"> | |
| <div class="toggle"> | |
| <input type="radio" name="langSel" value="eng" id="engLang" checked="checked" /> | |
| <label for="engLang">eng</label> | |
| <input type="radio" name="langSel" value="vie" id="vieLang" /> | |
| <label for="vieLang">vie</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row mb-4"> | |
| <div class="col-md-12"> | |
| <form id="input_form" class="form-horizontal requires-validation" method="post" novalidate> | |
| <textarea type="text" class="input-nlp-text form-control shadow-none" id="input_text" name="input_text" | |
| placeholder="Enter the documents here >" aria-label="Input Document" required value="@Request["inputText"]"></textarea> | |
| <!-- <div class="valid-feedback"> | |
| Text looks good! | |
| </div> | |
| <div class="invalid-feedback"> | |
| Text is required! | |
| </div>--> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="row text-white" id="metadata"> | |
| <div class="col-md-3 bg-black text-center flex-col" id="cnt-paras"> | |
| <p>0 par</p> | |
| </div> | |
| <div class="col-md-3 bg-black text-center flex-col" id="cnt-words"> | |
| <p>0 word</p> | |
| </div> | |
| <div class="col-md-3 bg-black text-center flex-col" id="cnt-chars"> | |
| <p>0 char</p> | |
| </div> | |
| <div class="col-md-3 bg-black text-center flex-col"> | |
| <p>english</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="spacer"></div> | |
| <div class="col-md-2 text-center my-auto"> | |
| <div class="d-flex flex-column justify-content-center"> | |
| <!-- <i class="fa-2x fa-solid fa-circle-check progress-icon" hidden></i> --> | |
| <input class="toggle-load-icon" type="checkbox" id="check" disabled> | |
| <label class="progress-icon" for="check" style="display:none"> | |
| <div class="check-icon"></div> | |
| </label> | |
| <button class="button summarize-button" type="submit" form="input_form"> | |
| summarize | |
| <div class="button__horizontal"></div> | |
| <div class="button__vertical"></div> | |
| </button> | |
| </div> | |
| <h2 class="mt-2 pt-2" id="load-noti" style="display:none">Generating</h2> | |
| </div> | |
| <div class="spacer"></div> | |
| <div class="col-md-4 output-field"> | |
| <div class="row mb-4 flex-col-50"> | |
| <div class="col-md-8"> | |
| <h2 class="main-heading"> | |
| summary here | |
| </h2> | |
| <p>You can change summary's length</p> | |
| </div> | |
| <div class="col-md-4 switch-format"> | |
| <div class="toggle"> | |
| <input type="radio" name="lengSel" value="short" id="shortSum" checked="checked" /> | |
| <label for="shortSum">short</label> | |
| <input type="radio" name="lengSel" value="long" id="longSum" /> | |
| <label for="longSum">long</label> | |
| </div> | |
| <!-- <button type="button" class="floated btn btn-outline-dark btn-sm btn-block" id="short_button">short</button> | |
| <button type="button" class="floated btn btn-outline-dark btn-sm btn-block" id="long_button">long</button> --> | |
| <!-- <button class="btn btn-outline-dark btn-sm"><i class="fa-solid fa-2xs">Expand</i></button> --> | |
| </div> | |
| </div> | |
| <div class="row mb-4"> | |
| <div class="col-md-12"> | |
| <textarea type="text" class="output-nlp-text no-border shadow-none" id="output_text" | |
| placeholder="Output will be shown here >" aria-label="Output Document" disabled></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-1"></div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script> | |
| <script> | |
| // ======= INPUT FIELD (FORM CONTROL) VALIDATION ======= | |
| var runOnce = false; | |
| var short_summary = ''; | |
| var long_summary = ''; | |
| (function () { | |
| 'use strict' | |
| const forms = document.querySelectorAll('.requires-validation') | |
| Array.from(forms) | |
| .forEach(function (form) { | |
| form.addEventListener('submit', function (event) { | |
| if (!form.checkValidity()) { | |
| event.preventDefault() | |
| event.stopPropagation() | |
| } | |
| form.classList.add('was-validated') | |
| }, false) | |
| }) | |
| })() | |
| // ======= RESET INPUT FIELD WHEN USER CLICKED AT IT (HAS RAN ONCE) ======= | |
| $(function () { | |
| $('#input_text').on("input", function () { | |
| if (runOnce == true) { | |
| $(".progress-icon").hide(); | |
| $("#load-noti").hide(); | |
| $(".summarize-button").fadeIn(); | |
| $("#load-noti").text("Generating"); | |
| } | |
| }); | |
| }); | |
| $('#shortSum').on("click", function () { | |
| var outputField = document.getElementById("output_text"); | |
| outputField.innerHTML = short_summary; | |
| }); | |
| $('#longSum').on("click", function () { | |
| var outputField = document.getElementById("output_text"); | |
| outputField.innerHTML = long_summary; | |
| }); | |
| setInterval(function (e) { | |
| var strText = jQuery.trim($('#input_text').val()); | |
| var cntChar = strText.replace( /[\r\n]+/gm, "" ).length; | |
| var cntWord = strText.split(/[\s\.\?]+/).length; | |
| var cntPara = strText.split("\n\n").length; | |
| var cntPara2 = strText.split("/\n\s/g").length; | |
| var postFix = ''; | |
| if (strText == '') { | |
| cntWord = 0; | |
| cntLine = 0; | |
| cntPara = 0; | |
| } | |
| $('#cnt-paras').children('p').text(cntPara + (cntPara > 1 ? " pars" : " par")); | |
| $('#cnt-words').children('p').text(cntWord + (cntWord > 1 ? " words" : " word")); | |
| $('#cnt-chars').children('p').text(cntChar + (cntChar > 1 ? " chars" : " char")); | |
| }, 100); | |
| // ======= COMMUNICATE WITH FLSAK BACK END TO RUN ML TASK ======= | |
| const translateText = async (jsonfile) => { | |
| const fetchSettings = { | |
| method: 'POST', | |
| body: JSON.stringify({"input_text": jsonfile}), | |
| headers: { | |
| "Content-Type": "application/json" | |
| }, | |
| }; | |
| const inferResponse = await fetch(`summarize`, fetchSettings); | |
| const inferJson = await inferResponse.json(); | |
| return inferJson; | |
| }; | |
| const textGenForm = document.querySelector('#input_form'); | |
| textGenForm.addEventListener('submit', async (event) => { | |
| event.preventDefault(); | |
| const textGenParagraph = document.querySelector('#output_text'); | |
| const textGenInput = document.querySelector('#input_text'); | |
| $("#check").attr('checked', false); | |
| $("#input_text").attr("readonly", true); | |
| $(".summarize-button").hide(); | |
| $(".progress-icon").fadeIn(); | |
| $("#load-noti").fadeIn(); | |
| // var data = {"input_text": textGenInput.value}; | |
| try { | |
| data_out = await translateText(textGenInput.value); | |
| $("#check").attr('checked', true); | |
| $("#input_text").attr("readonly", false); | |
| $("#load-noti").text("Completed") | |
| runOnce = true; | |
| short_summary = data_out.short; | |
| long_summary = data_out.long; | |
| textGenParagraph.innerHTML = short_summary; | |
| } catch (err) { | |
| console.error(err); | |
| } | |
| }); | |
| window.addEventListener("load", function() { | |
| const form = document.getElementById('feedback_form'); | |
| form.addEventListener("submit", function(e) { | |
| e.preventDefault(); | |
| const data = new FormData(form); | |
| const action = e.target.action; | |
| fetch(action, { | |
| method: 'POST', | |
| body: data, | |
| }) | |
| .then(() => { | |
| $("#submit-alert").fadeIn("slow").delay(4000).fadeOut("slow"); | |
| }) | |
| }); | |
| }); | |
| /* | |
| $(document).on('submit', '#input_form', function (e) { | |
| var outputField = document.getElementById("output_text"); | |
| var data = { "input_text": $("#input_text").val() }; | |
| e.preventDefault(); | |
| $.ajax({ | |
| type: 'POST', | |
| url: '/summarize', | |
| data: JSON.stringify(data), | |
| contentType: "application/json", | |
| dataType: 'json', | |
| beforeSend: function () { | |
| $("#check").attr('checked', false); | |
| $("#input_text").attr("readonly", true); | |
| $(".summarize-button").hide(); | |
| $(".progress-icon").fadeIn(); | |
| $("#load-noti").fadeIn(); | |
| }, | |
| success: function (response) { | |
| short_summary = response.short; | |
| long_summary = response.long; | |
| outputField.innerHTML = short_summary; | |
| }, | |
| complete: function (response) { | |
| $("#check").attr('checked', true); | |
| $("#input_text").attr("readonly", false); | |
| $("#load-noti").text("Completed") | |
| runOnce = true; | |
| }, | |
| }) | |
| }); | |
| */ | |
| </script> | |
| </body> | |
| <footer class="bg-light text-center text-dark mt-auto"> | |
| <div class="container mt-3 pb-0"> | |
| <section class="mb-3"> | |
| <h4>Processing speed depends on the document's length</h4> | |
| <!-- Linkedin --> | |
| <!-- <a class="btn btn-sm btn-outline-light btn-floating m-1" href="#!" role="button" | |
| ><i class="fab fa-linkedin-in small"></i | |
| ></a> --> | |
| <!-- Github --> | |
| <!-- <a class="btn btn-sm btn-light btn-floating m-1 small" href="#!" role="button" | |
| ><i class="fab fa-github small"></i | |
| ></a> --> | |
| </section> | |
| </div> | |
| <!-- Copyright --> | |
| <div class="text-center p-2 bg-dark"> | |
| <p class="text-white"> | |
| Created by | |
| <a class="link-light" href="https://github.com/anhtien228" style="font-weight: 600;">Anh-Tien Doan</a> | |
| in 2022 | |
| </p> | |
| <a class="link-secondary" href="https://flask.palletsprojects.com/en/2.1.x/" style="transition: 0.2s ease-in-out;"> | |
| <p>built with Flask</p> | |
| </a> | |
| </div> | |
| <!-- Copyright --> | |
| </footer> | |
| <!-- Feedback modal window --> | |
| <div id="open-modal" class="modal-window"> | |
| <div> | |
| <a href="#" title="Close" class="modal-close">Close</a> | |
| <h1>Feedback</h1> | |
| <div class="modal-header">Please give a rate from your experience</div> | |
| <br> | |
| <form id="feedback_form" method="post" action="https://script.google.com/macros/s/AKfycbySioanqfzdUwmiXwwy2iKgIjO20ggc_5GvUTJohiGtY64XUHAw6s9aBcQr7XXeil_Low/exec"> | |
| <div class="modal-header"><b>Processing speed</b></div> | |
| <div class="likert-scale"> | |
| <input type="radio" name="ProcessingSpeed" value="1" id="spd1"/> | |
| <label for="spd1">1</label> | |
| <input type="radio" name="ProcessingSpeed" value="2" id="spd2"/> | |
| <label for="spd2">2</label> | |
| <input type="radio" name="ProcessingSpeed" value="3" id="spd3" checked="checked" /> | |
| <label for="spd3">3</label> | |
| <input type="radio" name="ProcessingSpeed" value="4" id="spd4"/> | |
| <label for="spd4">4</label> | |
| <input type="radio" name="ProcessingSpeed" value="5" id="spd5"/> | |
| <label for="spd5">5</label> | |
| </div> | |
| <div class="modal-header"><b>Text coherent</b></div> | |
| <div class="likert-scale"> | |
| <!-- <label><input name="coherent" type="radio" value="1"/><span>1</span></label> | |
| <label><input name="coherent" type="radio" value="2"/><span>2</span></label> | |
| <label><input name="coherent" type="radio" value="3"/><span>3</span></label> | |
| <label><input name="coherent" type="radio" value="4"/><span>4</span></label> | |
| <label><input name="coherent" type="radio" value="5"/><span>5</span></label> --> | |
| <input type="radio" name="TextCoherent" value="1" id="coh1"/> | |
| <label for="coh1">1</label> | |
| <input type="radio" name="TextCoherent" value="2" id="coh2"/> | |
| <label for="coh2">2</label> | |
| <input type="radio" name="TextCoherent" value="3" id="coh3" checked="checked" /> | |
| <label for="coh3">3</label> | |
| <input type="radio" name="TextCoherent" value="4" id="coh4"/> | |
| <label for="coh4">4</label> | |
| <input type="radio" name="TextCoherent" value="5" id="coh5"/> | |
| <label for="coh5">5</label> | |
| </div> | |
| <div class="modal-header"><b>Web design</b></div> | |
| <div class="likert-scale"> | |
| <input type="radio" name="WebDesign" value="1" id="des1"/> | |
| <label for="des1">1</label> | |
| <input type="radio" name="WebDesign" value="2" id="des2"/> | |
| <label for="des2">2</label> | |
| <input type="radio" name="WebDesign" value="3" id="des3" checked="checked" /> | |
| <label for="des3">3</label> | |
| <input type="radio" name="WebDesign" value="4" id="des4"/> | |
| <label for="des4">4</label> | |
| <input type="radio" name="WebDesign" value="5" id="des5"/> | |
| <label for="des5">5</label> | |
| </div> | |
| </form> | |
| <div class="mt-4" style="text-align:center;"> | |
| <button class="btn btn-sm btn-outline-dark btn-submit" type="submit" form="feedback_form"> | |
| <p> | |
| Submit | |
| </p> | |
| </button> | |
| </div> | |
| <div id="submit-alert" style="text-align:center; color: green; display: none;">Success!</div> | |
| </div> | |
| </div> | |
| </html> |