Bubble with Speech to Text using AssemblyAI - Part 3
In the final part of this Bubble tutorial series using the AssemblyAI Speech to Text API we create a simple front end form for users to upload an audio file and receive a transcript.
Unlock the power of speech-to-text: Learn how to integrate AssemblyAI with Bubble's no-code platform for seamless audio transcription.
Build a user-friendly interface: Discover how to create an intuitive GUI for file uploads and transcript retrieval in your Bubble app.
Master backend workflows: Explore how to leverage webhooks and API calls to efficiently process and display transcripts in your no-code application.
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
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.