Bubble with Speech to Text using AssemblyAI - Part 3

Introduction to Assembly AI and Speech Recognition

Welcome to part three of our Bubble tutorial series looking at AssemblyAI and speech recognition / speech to text using the AssemblyAI API. So far in this tutorial check out the earlier two videos we've looked at how to set up an API call to AssemblyAI and how to use webhooks to be notified when a transcript is ready and retrieve that from our Bubble app.

Building the User Interface

This last tutorial we're putting it all together by building a graphical user interface so that user can upload a file and they get a transcript back. So to begin with I'm going to create a new page and we'll call this transcript and I'm going to add in a file uploader and a button and a text field and I'm going to put the text field into a group because I'm going to be passing data into it so text field as a group and then the group is going to be of type message.

Setting Up Data Types

These are data types that I had set up from a previous video I'm just using as a way to store the transcript when it arrives back to me and I'm going to say do a search for message and get the first one where they're ordered by creative date descending so I get the most recent result and then all I'm going to do with my text field is say groups message and again these are from a previous demonstration of ChatGPT API GPT 4 I'm just going to use content. Simply it doesn't matter nor does structure I just I'm finding somewhere in my database to save the text response that I get back and so I'm going to call this generate transcript.

Creating the Workflow

So what's it going to do? Let's create a workflow. So first of all I go to plugins and I have these options here. I have these options because in the previous video I've set up the AssemblyAI API and I've got two calls I've got the transcribe audio file which sends the audio file I then wait for a webhook and when I get that notification I then go and retrieve the audio file at the transcript I retrieve the transcript from the AssemblyAI servers and that's the second call here so my first call is to transcribe the audio file and I need to send the file that I upload.

Setting Up the API Call

File upload is value and I need its URL and then I need my webhook and the webhook that I need is set up in my backend workflows and is here but I'm going to account for the fact that I've got a development and a live version of my app and I want it to work in both so I replace if I'm going to copy this onto the clipboard in case Bubble overwrites it and then I'm simply going to remove everything there and say home URL and I'm just going to check on this page here whether home URL includes slash at the end.

Testing the Workflow

If I click preview yes it does so there you go so you can see that my home URL takes into account the version of the Bubble app that I'm using so yeah my home URL and then that's going to adapt whether it's the live version or the dev version of my app now from experience there's one other thing to do here that when Bubble expresses a files URL it doesn't include HTTP if that will be HTTPS and a colon it starts with slash slash and then goes into the URL so I'm adding that in there I'm then I think I'm probably at a good place to test it in fact so let's go preview and I'm going to upload my audio file and oh I'm going to delete it's the only file I've been using to test this whole process so I'm actually going to delete the file delete all messages okay right and I'll try uploading that again okay and I'm going to click generate transcript.

Processing the Audio File

Okay so Bubble has now sent the audio file to AssemblyAI and now it is waiting to receive the webhook and then if the webhook is activated it should create a new message with the content so we're going to give it a few moments just to see how that's going if that hasn't worked we will debug it no but it has worked there we go so you can see here that there is a process of waiting but it is not waiting on something to load on the front end it is being taken care of back-end workflow processes so you might want to display some sort of estimate of how long it can take like a spinner a loading something or other here because otherwise your users likely to spam the button here and then you just end up having an oversized API bill because they've submissive the audio file ten times and they're being impatient.

Handling User Experience

So I would suggest some sort of workflow off here which hides the button shows a message ten how long it's going to take and then you have some sort of provision like I've got here with do a search for the latest message in order to show when the message is actually created as a quick reminder I'll show you how that works so the this a notification is sent into here from AssemblyAI via the webhook that I sent out with the initial audio file so the data comes in here notification I then do another request to AssemblyAI to get the transcript using the transcript ID and that's then when I create the message using the results of step one and there's no waiting around here because the transcript is ready this is one of the key differences between Whisper and AssemblyAI is AssemblyAI has this webhook feature so although you might actually have to wait longer you're not dependent on a connection timing out or being maintained it's something that you can retrieve once it is ready and so there we have it if you have any questions if you'd like to see other demonstrations of other services other API's please do leave a comment we read every single one of them we try and reply with a detailed explanation where we can and yeah see you in the next video