PyWebIO: Write Interactive Web App in Script Way Using Python

Build Web Applications in Several Lines of Python Code without the Knowledge of HTML and JS

Motivation

Have you ever wanted to create a web application in only several lines of Python code? Streamlit allows you to do that, but it doesn’t give you a lot of options to customize your input box, output, layout, and pages.

If you are looking for something that is easier to learn than Django and Flask, but more customizable than Streamlit, you will love PyWebIO.

What is PyWebIO?

PyWebIO is a Python library that allows you to build simple web applications without the knowledge of HTML and Javascript. PyWebIO can also be easily integrated into existing web services such as Flask or Django.

To install PyWebIO, type

pip install -U pywebio

Get Started

Input

PyWebIO provides a variety of options to get input from users. The GIF below shows how some of these options will look like.

Output

PyWebIO also provides a variety of output options. See a full list of outputs here. Let’s look at how some of these output options will look like.

In the code above, we use:

• put_markdown to write markdown
• put_text to create a plain text
• put_table to create a menu table
• select to create a drop-down bar
• put_image to output food image
• put_file to output a link to download a file

We can create such an interesting application in a few lines of code. How cool is that!

Let’s apply what we have learned so far to create:

• A simple app that generates a PDF provided the given text
• An app that generates beautiful, high-density visualizations for the CSV file we upload

Create an App to Generate PDF

We will create a simple app to generate a PDF provided the given text like below:

Let’s start with creating the input boxes and output for our app.

Explanation of the code above:

• input : creates a text input box.
• textarea : creates a multi-line text input box.
• placeholder : suggests to users what can be entered in the input box
• required : specifies whether the input is required
• start_server : Start a server to provide the PyWebIO application as a web service. debug=True tells the server to automatically reload when the code changes.

We should see something like below:

Go to http://0.0.0.0:36535/ to play with the app. Now we have a simple web app with an input box like below!

Nice! Now we know how to create an input box and output, let’s write down the code that will generate a PDF for the input text. We will use PyFPDF to do this.

pip install fpdf

After inputting all information, a file named output.pdf file will be saved to your current directory. If your input text is “Hello”, you will see some like below!

Now we get the basics of our app covered. Let’s add some more features to make it easier for users to use.

Add a Group of Buttons

Users might wish to add more than one page to the PDF. Thus, we will add a group of buttons that enables users to decide whether to add another page or not. We can do this with actions method.

• label : Name of the button
• value : The value when users click the button

We will use while add_more to keep asking the user to add another page until they click “No”. We will also fix our previous function create_pdf so that it will take a list of pages as input.

Let’s try it out!

Cool! Now we should have a PDF file with 2 pages like below!

Group Drop Down and Number Input

We can also use a drop-down and a number input box to enable users to customize their text’s size and fonts. However, this time, we will group them into one form so that we can request a set of inputs from the users at once.

Now we can access the values of fonts and size in text_infousing text_info['fonts'] and text_info['size'] . Use these values as the parameters for the create_page function.

And we have both the drop-down box and the input box in the same form! The final output should look like below:

Create an App to Generate Beautiful Visualizations for the Uploaded CSV File

Have you ever wanted to create a web application that automatically generates the beautiful visualization for the CSV file you upload? That could be easily done with PyWebIO. Below is how it will look like.

The code to generate the web application above.

We only need 3 steps to generates the web application like above:

• Generate an HTML report for the pandas DataFrame using sweetviz
• Use PyWebIO’s put_html method to render the HTML
• Use put_loading method to output loading prompt

How cool is that!

Conclusion

Congratulations! You have just learned how to use PyWebIO to create simple web applications. By using PyWebIO, you can build a useful web application in a short amount of time! I encourage you to read PyWebIO’s documentation to find other cool things you can do with PyWebIO.

Feel free to play and fork the source code of this article here:

I like to write about basic data science concepts and play with different algorithms and data science tools. You could connect with me on LinkedIn and Twitter.

Star this repo if you want to check out the codes for all of the articles I have written. Follow me on Medium to stay informed with my latest data science articles like these: