Build a UI for Transcription with Gradio and Python

In this guide, we’ll show you how to use the Gradio library in Python to build a simple front-end that allows you to drag-and-drop files for transcription. If you’ve ever gotten tired of running your Python program from the command-line, now you can have a self-hosted UI for processing your transcripts!

Get Started

Before we begin, make sure you have an AssemblyAI account and an API key. You can sign up for a free account and get your API key from your dashboard.

Installing Dependencies

Firstly, we’ll need to get all of our dependencies installed. This demo depends on both the AssemblyAI Python SDK as well as Gradio, so we’ll need to run the following command to get them both installed, or updated to their latest version if you’ve already gotten them installed.

$
pip install -U assemblyai gradio

Creating Your Transcription Function

Now we’ll move on to setting up a function that can handle transcription for us. This function will submit the filepath for the audio file you’ve uploaded via Gradio to our API, and will wait until the transcript has finished, or log an error to the console.

1
import assemblyai
2
3
# Set your API key here, which can be found on your Dashboard as mentioned above.
4
assemblyai.settings.api_key = "API_KEY_HERE"
5
6
7
def transcribe(audio_path):
8
    config = assemblyai.TranscriptionConfig(speech_models=["universal-3-pro", "universal-2"])
9
    transcriber = assemblyai.Transcriber()
10
    transcript = transcriber.transcribe(audio_path, config)
11
12
    if transcript.status == assemblyai.TranscriptStatus.error:
13
        print(f"Transcription failed: {transcript.error}")

Setting Up our Gradio UI

Now we get to move on to setting up what our Gradio UI will look like. This project will be fairly simple, so it will only use a few components, but Gradio offers a wide range of components and ways to customize how they look to suit your needs. Check out their documentation here for more detailed information.

We’ll be using Gradio’s Blocks API for a more custom way of setting up our UI. Specifically, we’ll use their Markdown, File, Button, and Textbox components to create a title, enable file uploads, and submit files for transcription to render them to the screen.

Since we only want audio or video files to be submitted for transcription, we’ll limit what can be uploaded with the file_types parameter.

1
import gradio
2
3
with gradio.Blocks() as demo:
4
    gradio.Markdown("# AssemblyAI Transcription with Gradio")
5
    filepath = gradio.File(file_types=["audio", "video"])
6
    transcribe_button = gradio.Button(value="Transcribe")
7
    transcript = gradio.Textbox(value="", label="Transcript")
8
    transcribe_button.click(transcribe, inputs=[filepath], outputs=[transcript])
9
10
if __name__ == "__main__":
11
    demo.launch(debug=True, show_error=True)

Now you can run this code to deploy your Gradio app locally, with some helpful debug information in case you add more functionality. You can also get a publicly shareable link to your app by enabling share=True in your .launch() config. Also note that you should run this in a separate file outside of this Jupyter notebook so that your program doesn’t time out. We hope this helps you create better interfaces for your integrations with our API, and please reach out to support@assemblyai.com if you have any questions we can help with!