Join thousands of AI enthusiasts and experts at the Learn AI Community.

Publication

Latest

A Step-by-Step Approach To Building a Text Summarization Webapp in Python From Scratch

Last Updated on January 6, 2023 by Editorial Team

Author(s): Dr. Dharini R

Originally published on Towards AI the World’s Leading AI and Technology News and Media Company. If you are building an AI-related product or service, we invite you to consider becoming an AI sponsor. At Towards AI, we help scale AI and technology startups. Let us help you unleash your technology to the masses.

Using Hugging Face Inference API, Flask, HTML &ย CSS

Photo by Patrick Tomasso onย Unsplash

What is the aim? To build a web application that can get an input text and show itsย summary.

What are we going to use? Hugging Face Accelerated Inference API, Python Flask Framework, HTML,ย CSS.

How is it done? By carrying out the following steps.

The 3-Stepย process

1. Identify the inference API of a text summarization model from the Hugging Faceย library.

2. Build the front end with HTML andย CSS.

3. Build the back end with Python Flask and include the summarization task.

Text summarization is the task of extracting a brief from a given set of sentences. A summary can be of two typesโ€Šโ€”โ€Šan abstractive summary or an extractive summary. An extractive summary has words extracted from the given input, placing them together to form a brief. The abstractive summary generates the summary not only by replicating the words in the input, but also coining new words based on the understanding of theย text.

We are going to build an abstractive summarization application using the Hugging Face Accelerated Inference API. To utilize a model by providing input to it and to get the modelโ€™s output, we just have to make an APIย call.

The accelerated inference enables the โ€˜plug-and-playโ€™ kind of usage to the machine learning models by means of APIย calls.

Kindly refer to the following blog link to understand the working of Inference API and its benefits with an implementation demo.

Plug-and-Play ML Models with โ€˜Accelerated Inference APIโ€™ from Hugging Face

The web application part of our project can easily be built with the Flask framework. The Flask helps with the development of a web application and renders an HTML file, which can be viewed in a webย browser.

Welcome to Flask – Flask Documentation (2.2.x)

The front end of our web application is built with HTML and CSS. The Hyper Text Markup Language (HTML) and Cascading Style Sheets (CSS) are used to design the structure of a webpage and presentation of a webpage, respectively.

Having looked at the gist of everything we are going to use, let's have an idea of what we will build. Our web app is going toย have

  • a front endโ€Šโ€”โ€Ša web page that gets the user input text and shows the summary asย output.
  • a back endโ€Šโ€”โ€Šwhere the user input is fed to the model, and the results are extracted from theย model.

Now kindly make sure to go through the 3 step process of building our summarization application.

1. Identify and utilize a text summarization model from Huggingย Face

  • For our project, we will be using the model facebook/bart-large-cnn provided by Lewis et al. [BART: Denoising Sequence-to-Sequence Pre-training for Natural Language Generation, Translation, and Comprehension]
  • To use the modelโ€™s Inference API, select the model from the Hugging Face library and then clickInference APIunder the Deployย button.
  • On clicking that, we will see a python script that can be utilized for the inference, as shownย below.
Selecting the Inference API from Huggingย Face
  • An Access Token is needed to get the API_URL andย headers.
  • Create a profile in Hugging Face and create a new access token by following this path Profile -> Settings -> Access Tokensย Tab.
  • The newly created access token can be used in place of Bearer andย headers
  • Now let's move to the next part of our project to create a web application.

2. Build the front end with HTML andย CSS.

  • The code for the front end is written in two parts
    โ€Šโ€”โ€ŠA static file
    โ€Šโ€”โ€ŠA HTMLย file

The static file consists of customizations to improvise the look of our front end. As the name suggests, the contents of a static file are not going to be changed according to the userโ€™s input or actions. A static file can include anything such as images, videos, cascading style sheets(CSS), flash files, etc., and these are not dynamically generated by the web server like a typical HTML response because they remainย static.

  • In the desired location, create two folders named staticand templates
  • In the static folder, create a new file named main.css, where CSS is the cascading style sheet that is used to style theย HTML.
  • main.css consists of tags present in the HTML code with their corresponding styling and formatting. For a more detailed tutorial on how CSS is used, please refer to thisย link.
  • The code for the static file main.css is given below, followed by an explanation.
  • As we can see, the above CSS file consists of appearance-based formatting and customization for most of the tags used in our HTMLย code.

Code Explanation

  • Lines 2 to 9โ€Šโ€”โ€Šconsist of styling and formatting aimed at the tagย header.
  • Lines 11 to 25โ€Šโ€”โ€Šconsist of formatting for tagย h1.
  • Lines 28 to 34โ€Šโ€”โ€Šhave the styling for body tag, along with a background image named image.gif
  • Lines 35 to 39โ€Šโ€”โ€Šformatting for container
  • Lines 41 to 47โ€Šโ€”โ€Šstyling for div tag, which specifies the division of someย content
  • Lines 49 to 64โ€Šโ€”โ€Šformatting for tags h2 andย h3
  • Lines 68 to 77โ€Šโ€”โ€Šconsist of formatting aimed at placing two text boxes side by side with the help of tags parent and child. Let's move on to creating the front end with our HTMLย code.

The HTML is built with the objective of providing a structured pleasant user interface, a space for users to provide input and a space for showing theย summary.

  • In the already created folder named templates, create a new file named index.html.
  • The code for index.html is given below, followed by the explanation.

Code Explanation

  • Lines 4 to 11โ€” Header of theย HTML
  • Line 9โ€Šโ€”โ€ŠWe have added the source of the static file (main.css).
  • Line 10โ€Šโ€”โ€ŠWe have given a title for our webpage named Summarization Application.
  • Lines 13 to 42โ€Šโ€”โ€ŠBody of theย HTML
  • Lines 14 to 19โ€Šโ€”โ€ŠContains the headertag, which is used to provide the introductory part of a web page. In our case, we have given โ€œMy Summarization Appโ€
  • Lines 23 and 34โ€Šโ€”โ€ŠTwo text boxes are created and placed side byย side
  • Lines 25 to 31โ€Šโ€”โ€ŠThe form created for getting the input data and sending it to the back end. We have utilizedform action to specify that the submitted data has to be sent toget_summary the method written in the back end for processing.
  • Line 27โ€Šโ€”โ€ŠThe text box for input is created and is named with the variable nameinput_text which is used in the back end for processing inputย data.
  • Lines 29 and 30โ€Šโ€”โ€ŠButtons Submit and Clear areย created.
  • Line 38โ€Šโ€”โ€ŠA text box for displaying the output is created with the name result which is used in the back end to store the summarized text.
  • Having built the front end for the web app, let us move on to build the backย end.

3. Build the back end with Python Flask and include the summarization task.

The job of the back end isย to

  • get the input from the frontย end,
  • utilize the Hugging Faceโ€™s Inference API by sending the input data to the summarization model and gathering its output(summary)
  • send the summary to the frontย end

Letโ€™s name our backend python file asapp.py, kindly refer to the code given below, followed by the explanations.

  • We have to remember that the front end and the back end should be connected with common variableย names.
  • The inputs to the summarization model are
    โ€Šโ€”โ€ŠText to be summarized (obtained from the front end)
    โ€Šโ€”โ€ŠMinimum length of the summary (initialized)
    โ€Šโ€”โ€ŠMaximum length of the summary (initialized)

Code Explanation

  • To begin with, letโ€™s install Flask using the command pip installย flask
  • Line 6โ€Šโ€”โ€Šincludes the path for the staticย file
  • Lines 7 to 9โ€Šโ€”โ€Šindex method to render the index.html file
  • Lines 12 to 38โ€Šโ€”โ€Šget_summary method
  • Lines 15 and 16โ€Šโ€”โ€Šincludes the URL for the Inference API and the authentication tokens, respectively. Make sure to paste your authentication token in the Bearerย part.
  • Line 25โ€Šโ€”โ€Šspecify the input from the front end using the variable input_text
  • Lines 26 and 27โ€Šโ€”โ€Šspecify the maximum and minimum lengths for the summary with variables min_len andย max_len
  • Lines 30 to 33โ€Šโ€”โ€Šsend the query to the model, including the input variables. The result is stored in output variable.
  • Line 36โ€Šโ€”โ€Šthe summary from the model stored inoutput[โ€œsummary_textโ€] is sent to the front end using the result variable.
  • As we can see, the common variable names used for connecting the front end and back end are input_text, get_summary, result.
  • The full code for the project is given in this GitHubย link.

Summarization App

  • On running the app.py python code, the front end (created using main.css and index.html files) is rendered in the local host http://127.0.0.1:5000.
  • Opening the local host link in a browser will give us the web application.
  • A screenshot of the output is givenย below.
  • We can see Summarization Application as our page title, MY SUMMARIZATION APP as the header content, two text boxes side by side with titles Input Text and Summarized Text, two buttons Submit andย Clear.
  • If an input text is given in the left side box and Submit button is pressed, the get_summary method is invoked and the summarization model is utilized.
  • In the following screenshot, we can see that the input text is pasted and Submit button isย clicked.
  • As a result the get_summary method is invoked and the change in the address bar can be noted in the following screenshot (http://127.0.0.1:5000/get_summary).
  • When the get_summary method is invoked, the inference API of the Summarization model is utilized, and the output is shown in the Summarized Texttextย box.

Hurray!!! We have successfully created a Web application for the most popular Summarization task in Natural Language Processing.

Summary

We had an introduction on summarization, how we are going to build the web app for extracting the summary of a text, and a gist of all the elements to be used. We proceeded to understand the simple 3 step process of developing the web app, starting with selecting a model from Hugging Face for the task. Next, we understood the usage of HTML and CSS with a code example for building the front end. Followed by that, we inferred the usage of Flask with a code example for building the back end. Finally, we saw the result of our hard work, the rewarding Summarization Web Application. The same procedure can be extended to build any other kind of Natural Language Processing task using a model from Hugging Face. Proceed with your task and succeed!!!!


A Step-by-Step Approach To Building a Text Summarization Webapp in Python From Scratch was originally published in Towards AI on Medium, where people are continuing the conversation by highlighting and responding to this story.

Join thousands of data leaders on the AI newsletter. Itโ€™s free, we donโ€™t spam, and we never share your email address. Keep up to date with the latest work in AI. From research to projects and ideas. If you are building an AI startup, an AI-related product, or a service, we invite you to consider becoming aย sponsor.

Published via Towards AI

Feedback โ†“