Spaces:

datien228
/

text-summarizer

Runtime error

File size: 16,439 Bytes

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