Developing End-to-End NLP text generator application(part 2) — Full-stack with FLASK, UWSGI and Nginx

Kevin MacIver
5 min readApr 30, 2020

This is the part 2 of a series of stories to show the steps to develop an end-to-end product to help write news articles by suggesting the next words of the text.

On part 1 we focused on generating a Bidirectional LSTM model, check out this link if you haven’t seen it yet:

Now that we have a model let’s begin by creating a full-stack application using FLASK.

FLASK is a micro web framework written in Python and good for light application such as this one.

The final structure of this project will be the following:

tree structure

Api

Preparing Environment

We begin by creating an environment and installing the libraries required to generate the requirement.txt inside the api folder.

api / requirements.txt

In this case important libraries are Flask, Tensorflow (2.0.0), Pickle-mixin, numpy, and python-dotenv.

Creating our Api files

After creating the environment and installing the proper libraries we begin by creating the wsgi.py file.

api / wsgi.py

The file is the main file of our api application and is basically calling our app class residing in our “api/application/__init__.py” file.

api/application folder/__init__.py file

The “api/application/__init__.py” file initiates our FLASK application and calls the routes file.

Routes will tell Flask what URL should trigger our functions.

In this case the when requesting the hosting ip address of flask ending with “/read_text” this will trigger the readtext() function, which consequently will run the TextGeneratorBusiness.py script if there are more than 5 words in the as input.

Finally we have the api/app.ini file.

api/app.ini

The app.ini file is the uwsgi configuration file.

You maybe thinking “humm, what’s uwsgi?” 🤔

From the uWSGI documentation:

A web server faces the outside world. It can serve files (HTML, images, CSS, etc) directly from the file system. However, it can’t talk directly to Python applications; it needs something that will run the application, feed it requests from web clients (such as browsers) and return responses.

A Web Server Gateway Interface — WSGI — does this job. WSGI is a Python standard.

uWSGI is a WSGI implementation.

The important part of the file is the http= :8080 which will tell the port to communicate with the api Flask application.

Client

Now that we have a Flask application to run our backend, we need a Flask application to run our frontend.

Preparing Environment

Following the same steps as per the api segment, we begin by creating an environment and installing the libraries required to generate the requirement.txt inside the client folder.

client/requirement.txt

In this case, the important libraries to install are Flask, python-dotenv and requests.

Creating our Client files

We begin by structuring our client folder as a normal webpage application, i.e. inside our client/application folder we create the following folders: static, templates.

The static folder will host our css, js and images for the webpage and the template folder will host our html file.

Both wsgi.py and application/__init__.py are identical to the one used in the api segment.

Our routes.py file is now different since it will host our home page as well as redirect html requests for our backend.

The html, css and JS files work together to render the webpage. Inside the webpage is a text area where you can start writing your business news articles and the backend will help you after 5 words are typed.

The core of the frontend program resides in the JS file which listens to the key press in the text area and sends a XMLHttpRequest to the front end /read_text route every time the space bar is hit.

Finally, we have the client/app.ini file:

client/app.ini

which in this case tell to communicate with the client Flask application through the 6060 port.

Nginx

Now that we have two Flask applications, one for the frontend and one for the backend, we will use nginx as a reverse-proxy working as an intermediary proxy service, which takes a client request, passes it on to one or more servers, and subsequently delivers the server’s response to the client.

In our case, Nginx will listen to port 80 and send the request to our client server through our uwsgi protocol.

nginx/nginx.conf

Conclusion of Part 2

Very nice, hope you’ve enjoyed our part 2 journey. On part 3 we will see how to create containers for our files and applications and how to run it locally using docker-compose.

Thanks for reading!

--

--

Kevin MacIver

Driven for innovation, waiting for the robots uprising..