A Step-by-Step Approach To Building a Text Summarization Webapp in Python From Scratch
Using Hugging Face Inference API, Flask, HTML & CSS
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.
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.
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 click
Inference API
under theDeploy
button. - On clicking that, we will see a python script that can be utilized for the inference, as shown below.
- An
Access Token
is needed to get theAPI_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
static
andtemplates
- In the
static
folder, create a new file namedmain.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 namedimage.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
andh3
- Lines 68 to 77 — consist of formatting aimed at placing two text boxes side by side with the help of tags
parent
andchild.
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 namedindex.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
header
tag, 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 utilized
form 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 name
input_text
which is used in the back end for processing input data. - Lines 29 and 30 — Buttons
Submit
andClear
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 commandpip install flask
- Line 6 — includes the path for the static file
- Lines 7 to 9 —
index
method to render theindex.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
andmax_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 in
output[“summary_text”]
is sent to the front end using theresult
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 usingmain.css
andindex.html
files) is rendered in the local hosthttp://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 titlesInput Text
andSummarized Text,
two buttonsSubmit
andClear.
- If an input text is given in the left side box and
Submit
button is pressed, theget_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 theSummarized Text
text 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!!!!