Super Fast Audio Transcription App Tutorial (Groq Whisper & Bubble) [2024]

Building a Super Fast Audio Transcription App with Bubble and Groq

Have you ever wanted to make a no-code transcription app that is super fast? Well, let me show you how you can make one just like this. The audio is being processed and here it comes. Have you ever wanted to make a no-code transcription app that is super fast? Well, let me show you. Indeed, I'm going to show you exactly what it's taken to build this in Bubble. Bubble is an amazing no-code web app development platform and I'm going to be using the blazing fast Groq Whisper API. If you have heard of OpenAI, it may be anthropic, then you should also make sure that you are watching Groq because Groq's USP is that they are building hardware chips that are designed for doing LLMs and AI stuff super fast.

Accessing Bubble Tutorials and Resources

But before I dive into that, if you're learning Bubble, then click the link down in the description. If you want to get access to all of our Bubble tutorial videos, our latest Bubble course, which is building a ChatGPT clone and also access to our no-code builder community, click that link to get started today.

Setting Up the Audio Recorder in Bubble

But let me just show you every step that has gone into this app. In the editor, and this is not going to be covering much Bubble UI design, it's just going to be really simple. I've got a group on the page and I've added in this audio recorder element. Now there are several audio recording plugins in the Bubble plugin directory. This actually tried one before this and then I tried this one and this one seems to be working the best right now. So this is called audio recorder. And what you do is you add the audio recorder element into the page. It doesn't matter where on the page, it's just loading in the right scripts in order for the audio recording function to work.

Creating the Recording Interface

So then I've added in an icon using Bubble's new icon feature and when this icon is clicked, I say start audio recorder A. And so if you're unsure where that is, you'd go into plugins or actually go into element actions and you see audio recorder because the plugin is on the page, I get access to all of these actions here. So then it's recording and also what I've done is I've tapped into a state in the audio recorder. So I've just got a text label here and I say audio recorders A recording status and that will return a yes or a no, a yes if it's recording. And so I turn that into, if it's a no, I'm writing the text ready. If it's a yes, I'm saying recording in progress.

Implementing the Stop Button and Saving the Audio

And then I've got a stop button here also using an icon and I'm saying stop audio recording. And I've ticked a box saying save to Bubble and I'm naming the file test and you can make that name dynamic. Now this is important because if I go into Groq and look at the API documentation, they want the file submitted. So you actually need to provide Groq with the URL of where say an MP3 file can be accessed. And that's what we're doing. We're saving the MP3 file to our Bubble storage and then we're sending it over to Groq.

Setting Up the Groq API Connection

So let's, while we're looking at this, let me show you how this is set up in the Bubble API connector. So if I go into plugins and go into API connector, scroll all the way down, here's my Groq. So I've added in the Bubble API connector and the Bubble API connector allows you to connect to thousands, if not hundreds of thousands of applications around the web. In this case, we're doing audio transcription. So I've labeled it Groq. I've got my private key in header. I've written the word bearer and I've got my private key straight out of the Groq cloud dashboard and you'd paste your own in there and I'll be disabling mine before publishing this video.

Configuring the API Call

How do I know that that all goes in that place? Well, I go back to the API documentation and I see that in the header, I need authorization, bearer and my API key. I then have my end point here, so I would have copied that and added in a new API call. So I've called it get transcription. I've made sure that it is an action. I pasted in my call there, set it to post and then by default, this is set to JSON, but Groq doesn't want it in JSON. It wants to inform data and I've just added in the mandatory required fields here, which is we've got file and I've got send file clicked there.

Testing the API Connection

In order to initialize this, when you initially set it up, you want to have an MP3 that you can upload so that you can test it and click initialize to know that it works. We then have got model, whisper large version 3. We've got response format JSON. Again, where have I got those? Well, I've just got them from here. Let me run this again. So this is a very short MP3 file with me saying something like test and so I can initialize and there you go. You can see how quick it is. It's retrieved the file and it's generated the text and it says this is me testing the recording. So I click save because by initializing it, let me just run it again, this is telling Bubble what to expect as a response. So I've got my text. This is what I'm going to hone in on and I've got Groq ID. I'm not really sure how I'd use that, but I'll just click save.

Setting Up the Workflow

So now let's go back into our workflows. I want a series of actions to happen when stop is clicked. So I want the recording to end and I want the recording file sent through that API connection to Groq and then I want to show the results in the pop-up. So here's my pop-up. So I've just set the pop-up type of content to text. That's like a bucket where I can store data and I can store text data in the elements that is my pop-up. You could do custom states. This is just really simple. And then I've got my text element inside and all I'm saying is basically group parent group, which is the pop-up text. And so that's how I'm getting the text out of the pop-up and displaying it in the text label.

Handling Workflow Optimization

Let's look at how this is all happening in the workflow. So first of all, stop. We've covered this, saved to Bubble and I have a file name. Now one of the really frustrating and you spent hours trying to debug this, work out what's going on is that Bubble workflows don't necessarily run from left to right. They will self optimize. And that can mean that if I was to put my Groq, so if I find Groq, get transcript, if I was to put it in here, my file may not actually be saved. I might be sending a blank URL to Groq and therefore I get an error. There's a period of time between clicking the stop button and my file being ready in my Bubble app storage to have a URL to provide to Groq.

Using Audio Recorder Events

And so the way around that is thankfully this plugin developer has added in an event. Let me show you where this would be. So it's in elements and it's going to be when a audio recorder saved. That's what I've got here. And so this is an event which will run only when the file is ready to submit to another service like Groq. And so now I've got my transcription step and very important again, easy mistake to make is when you print a URL most of the time from Bubble storage, it starts with slash slash. It doesn't have HTTPS colon. So I've added HTTPS colon in there so that it's like any other URL on the web. In fact, you could copy this into your web browser and your web browser's default audio player is going to start playing the audio file.

Displaying the Transcription Results

I then have show pop-up. And so this is showing my pop-up. It says show pop-up text. The text is because the type of content for the pop-up is text, not because I've actually I'm showing pop-up text. The pop-up text is visible anyway, it's just within the pop-up. And so it's between step one and step two that we're waiting for Groq to get a response. And then we show the pop-up and right away we say results of step one. In fact, let me clear this so there's no doubt what's going on. Results of step one, that's my Groq call and I say text. And therefore it's showing the text that's generated from the Groq call.

Final Demo and Conclusion

Let's give this one more run. So I've refreshed it. It's recording now and I'm going to say, "How can you create a no-code app that does lightning-fast audio transcription?" And I click stop and it's processing the file and it's uploading it to Groq and there we go. "How is recording now?" And I'm going to say, "How can you create a no-code app that does lightning-fast audio transcription?" So there you go. Remember, if you've enjoyed this video and you want to watch more like it, then hit like and subscribe. That helps us on YouTube. And also, if you are serious about building an app with Bubble, then you've got to check out our library of Bubble tutorials. There's more than 300 there. We've got our new Bubble course about building a ChatGPT clone with Bubble. And also we've got our no-code Bubble app builders community, which is the best place to ask questions about building a startup, not just about Bubble, but about marketing, product development and growth.