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.
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.
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.
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!