Building the Streamlit UI

Learn how to build a Streamlit UI to transcribe the audio.

Now that we have all the required helper functions, we can begin work on the Streamlit UI.

However, before moving on to the actual code of the Streamlit UI, let’s take a look at the Streamlit components that we’ll use to build the UI.

Streamlit components

  • header(string), subheader(string), text(string):  These components display text of various sizes on our UI. The header() can be thought of as the <h1> tag, subheader() as <h2> and text() as <p>.

  • file_uploader(label): This creates a button to upload the file. The parameter label is the string to be displayed above the button. It returns a file object. We’ll use this button to accept files from the user.

  • progress(integer): This creates a progress bar. The integer has to be between 0 and 100. It represents the percentage of the specified task completed. If we create a for loop with a sleep of 0.1 seconds between each iteration, we can create a cool progress bar animation.

  • spinner(label): The label is displayed as long as we are inside its code block.

  • balloons(): This displays balloons. It’s a pretty cool feature!

Get hands-on with 1200+ tech skills courses.