Showcase Your Python Projects Online: From ML to LLM and More

This technique will not just help you showcase your work online, but it can help you create a simple locally run UI to manually test your work.

Flask always comes up if you search for a simple Python-based web interface. But, in my opinion, Streamlit is simpler and does the job.

In this article, I will focus on how to create an online demo. At the end, you will have a chatbot interface with 12 lines of Python code! No HTML, No JS. Souce code will be provided at the end.

Hello World!

Let's jump in and create a hello world app. First, go to streamlit.io and create a free account. After that, create a new app with GitHub Codespaces as shown below.

Choose a name for your app, Streamlit will host your app for free and give you a URL as shown below. The app url in this case will be https://ahmedibrahimdemo.streamlit.app/

Wait a minute or two after you hit create, and you will have your demo deployed and you will get a VSCode-like interface with your app ready to be edited as shown below.

To make it simple, delete the folder "pages" and the "util.py" file. Also, delete all the content in the "Hello.py" file and only write the two lines shown in the photo below.

You will see on the right a new line asking you if you want to rerun the app as the source file has changed. Click rerun and see your demo page.

Add a text box and learn how to publish.

Now, let's add a text box. Here is a simple 5-line app with a text box that will ask for your name and then welcome you.

Notice how the code works. The Streamlit module goes over the code repeatedly (think of a while true loop). As you have not entered anything in the text box yet, the welcome message will not show up. Once you enter your name and hit enter, the message will show below the box.

Whatever modifications you have done so far have not been published. If you go to your public URL https://ahmedibrahimdemo.streamlit.app/, you will see that nothing has changed. To publish any updates you make, you have to do the following.

First, commit your changes. Click on the source control icon on the left (shown with orange bar in the screenshot below)

Add the changes (right click the files and hit "Stage Changes") and write a commit message then click Commit.

Second, push the changes by clicking Sync Changes.

Now your updated app is live! Sometimes you have to wait a few minutes for the app to actually update. You can always reboot the app from your control panel to force the update.

How many lines of code would it take to create a chatbot interface?

The answer is 12 (if we remove spaces and comments) as shown in the photo below. To save you time, you can find the full code for this demo here: https://github.com/aicentral/ahmedibrahimdemo.

Don't forget to commit and push your changes to see your demo live.