4 - Build the Web Application

Introduction

This tutorial will add a web interface to our deployed model using Streamlit. This will allow us to upload images, view results, and adjust the threshold for detecting a good or bad screw in a web browser.

What is Streamlit?

For most of the data scientists, we did not know how to write the front-end code. Therefore, we can use the streamlit to build the web service and share the data and the model result. It is convenient for data scientists to use python code to create a new application. For more detail, you can see the Streamlit website and documentation.

• Streamlit Website

• Streamlit Documentation

Prerequisites

Find the tutorial_screw_app.py file in the project folder.

→ You can see the python code file in the./<group-name>/primehub-screw-detection/streamlit/ folder.

End-to-end Step

Install Streamlit in PrimeHub Apps

User portal → Apps → Click + Application → Click + Install in PrimeHub in Streamlit → Fill in the information

Variable	Value
Name	Screw Defect Detection
[Env] FILE_PATH	/project//primehub-screw-detection/streamlit/tutorial_screw_app. py
[Env] ENDPOINT
InstanceTypes	CPU-1

Using the Web Interface

Once Streamlit is ready, click Open to launch the web interface.

Model prediction

Click the Browse Files button at the top left to upload images of screws. The uploaded images and their inference results will be shown on the right.

Adjust the layout of the screw images by selecting a Column Size in the left sidebar. The threshold to determine good and bad screws can also be adjusted with the Threshold slider.

Conclusion

Congratulations! We've finished the tutorial and deployed our model with a web interface.

Next Section

The next section will summarize what we've done in these end-to-end tutorials.