This article was first published on:Walker AI

In their work, algorithm engineers often need to quickly write some demo, such as fast demonstration of some algorithms, or need to write data annotation tools. The common implementation method is that algorithm engineers use frameworks like Flask to write apis, and then front-end engineers write relevant webpage call apis. This is undoubtedly time-consuming and inefficient.

However, demo pages can be built quickly using the Streamlit framework, and algorithmic engineers can write elegant demo pages using only Python. The Streamlit framework handles the rendering of web pages internally, and the algorithm engineers focus on the flow of the algorithm.

The framework installation

Installation of the Streamlit framework is very simple and can be done using PIP:

pip install streamlit
Copy the code

Once the installation is complete, version verification can be performed using the following command:

streamlit --version
Copy the code

In this article, I will briefly introduce the workflow of using the Streamlit framework using a real-world example.

Project preparation

Collaborative- CUT is a program that supports high resolution image stylization. The inputs of this model are stylised images and processed images, and the outputs are stylised images.

In this repository, we need to stylize operations using more complex command-line commands:

# use original VGG-19, normal images
CUDA_VISIBLE_DEVICES=0 python WCT.py --debug --mode original

# use original VGG-19, ultra-res images
CUDA_VISIBLE_DEVICES=0 python WCT.py --debug --mode original --UHD

# use our pruned VGG-19, normal images
CUDA_VISIBLE_DEVICES=0 python WCT.py --debug --mode 16x

# use our pruned VGG-19, ultra-res images
CUDA_VISIBLE_DEVICES=0 python WCT.py --debug --mode 16x --UHD

# If your RAM cannot afford some large images, you can change the content and style size via '--content_size' and '--style_size'
CUDA_VISIBLE_DEVICES=0 python WCT.py --debug --mode 16x --UHD --content_size 3000 --style_size 2000
Copy the code

However, such operations are quite complicated for users, so we can write a demo page using Streamlit to make it easy for users to use.

In this demo page, the following streamlit components will be used:

  • Streamlit. file_uploader: file upload component, as shown below:

    This component supports drag and drop to upload files and file manager selection files, which is relatively easy to use, as shown in the following code:

    style_file = st.file_uploader("Please upload stylized pictures.")

if style_file:
    stringio = style_file.getvalue()
    style_file_path = 'style_file/'+ style_file.name
    with open(style_file_path,'wb') as f:
        f.write(stringio)

Copy the code

    After you upload a file using the file upload component, you can use the code above to save the file to a specific path for use.

  • Streamlit. image: Image display component, as shown below:

    This component displays images in the Demo page according to their path.

    style_file_path = 'style_file/'+ style_file.name
st.image(style_file_path)
Copy the code

  • Streamlit. write: Text display component that displays prompts on web pages.

    st.write('High resolution Stylized Demo')
Copy the code

  • Streamlit. button: Button component that can be clicked to perform a number of tasks.

    if st.button('Let's start stylizing.'):
	style_func()
Copy the code

  • Streamlit. progress: Progress display component that can be used to show the progress of a task.

    for i in range(0.100.10):
	st.progress(i + 1)
Copy the code

There are also some important components in Streamlit, such as:

  • Streamlit. cache: Data caching component that can be used as a decorator to cache data and speed up data loading. It can be used in functions that repeatedly load data or perform calculations.

    @st.cache
def load_dataset(data_link) :
    dataset = pd.read_csv(data_link)
    return dataset

Copy the code

  • Streamlit. audio: Audio presentation component that can play audio by audio address.

with open('audio.mp3'.'rb') as f:
	st.audio(f,format="audio/mp3")
Copy the code

  • Streamlit. audio: Select component that allows the user to select one of several options.

model_choose = st.radio('Please select separate model:'['Vocals + Accompaniment'.'Vocals + Piano + Guitar + Drums + others'].0)
Copy the code

0 indicates that the first option is selected by default.

There are a number of components streamlit supports, please refer to the official documentation if you are interested.

Project to write

The main function of this demo page is to allow users to upload style images and content images respectively, and then conduct stylization operations in the background. After the stylization operations are completed, the resulting images will be displayed. In this way, users can quickly stylize operations and know the results.

Streamlit applications are written in python. At the beginning of the Python file, you need to import the Streamlit package.

import streamlit as st
Copy the code

Then upload and preprocess files:

style_file = st.file_uploader("Please upload stylized pictures.")
content_file = st.file_uploader("Please upload images to be processed.")
image_slot = st.empty()

if style_file:
    stringio = style_file.getvalue()
    style_file_path = 'style_file/'+ style_file.name
    with open(style_file_path,'wb') as f:
        f.write(stringio)
    image_slot.image(style_file_path)

if content_file:
    stringio = content_file.getvalue()
    content_file_path = 'content_file/'+ content_file.name
    with open(content_file_path,'wb') as f:
        f.write(stringio)

if content_file and style_file:
    img1 = Image.open( style_file_path)
    img1 = img1.resize((640.640))

    img2 = Image.open( content_file_path)
    img2 = img2.resize((640.640))
    new_img = Image.new('RGB', (1280.640), 255)
    new_img.paste(img1,(0.0))
    new_img.paste(img2,(640.0))
    new_img.save('concrate_file/' + os.path.basename(style_file_path))
    image_slot.image('concrate_file/' + os.path.basename(style_file_path))

Copy the code

Finally write a button that performs the stylization operation and displays the final result, adding a progress bar:

if st.button('Let's start stylizing.'):
    my_bar = st.progress(10)

    UHD_content_folder_path = 'PytorchWCT/content/UHD_content'
    output_path = WCT_func.process(content_file_path,style_file_path)
    for i in range(0.100.10):
        my_bar.progress(i + 1)
    my_bar.progress(100)
    st.write('Stylized images')
    st.image(output_path)
Copy the code

Project operation and deployment

The Streamlit framework operates in a very simple way, directly from the command line:

$ streamlit run streamlit_demo.py 
Copy the code

You can access it in your browser.

conclusion

The Streamlit framework is great for quick, visual demos with less complex processes, less than half an hour from start to finish, less than 50 lines of code, and it’s easy to run and deploy. Pages look much nicer than those rendered in a framework like Flask. It’s an algorithmic engineer’s weapon.

PS: more dry technology, pay attention to the public, | xingzhe_ai 】, and walker to discuss together!