Forum Academy Marketplace Showcase Pricing Features

Video Tutorial - Low Code AI - Transcription - with Bubble and AWS

Hi Bubblers!

We’ve just released another video tutorial! In it we create an automated transcription (speech-to-text) platform, using Bubble and AWS. If you’re interested in this sort of thing, check it out!

The video is here:

If you have any questions or comments, please feel free to message me. Hope it’s helpful!

Cheers

7 Likes

The video is long, can you summarize what the video is teaching?

Is this a tutorial without plugins? I am currently setting up the same but with Google. Will give it a watch and see if there is anything relevant I can learn.

Hi @phrase9,

It is a tutorial without plugins, yes (aside from Bubble’s API connector).
The first couple minutes of the video summarize the content, but it’s basically this:

  1. Set up a front end in Bubble to allow users to upload audio
  2. Set up a back-end in AWS to do transcription on those files, with a button press (by creating custom endpoints with API gateway, to call AWS Transcribe)
  3. Connect your front- and back-ends, and add some scheduling/automation.

Hope that helps!

2 Likes

Thanks man, will give it a watch

1 Like

Thanks!

Hey @kiyokot16 ,

I think what’s going on is that your API url, in Bubble’s API connector, is pointing to your test stage root (i.e., https://…amazonaws.com/test). You probably want the URI for each of the end-points in the API connector calls (e.g., for StartTranscriptionJob, it will probably be something like https://…amazon.aws.com/test/start-transcription-job). The structure is : https://{api address}/{stage}/{endpoint}. I think you’re just missing the end-point part.

Hopefully this works!

Also note: these API endpoints are now publicly accessible, so anyone can trigger and retrieve transcripts with your account. (!! :grimacing:) If you’re planning to use these APIs in a project (besides just learning) you’ll probably want to protect these API endpoints with an API key (that you can set up in AWS API Gateway). It only takes 5 minutes to: create an API plan, add an API key, add your endpoints to a plan, and add the x-api-key header to your Bubble API connector (of course it will take longer to find and read the docs, etc.). Let me know if you need help with this process.

Cheers

Thanks a lot for your continuous support!
I deleted the previous message just for the security reason as it showed some private information.

So, I’ve added the endpoint part following amazon.aws.com/test/ then I am getting an error of “Status code 502 internal server error” now…


lol this is a hard nut to crack.
The next thing I’d check is the CloudWatch logs. Open up CW, then look for the log group for your “StartTranscriptionJob” lambda function, and try to see if there’s a hint in there.

If you’ve never done this before, I show this process a bit at the end of our low-code computer vision tutorial (check our channel for the listing). There are also some great YT tutorials about CloudWatch.

Thank you so much for your continuous support!!

When I looked into the CloudWatch as you advised, I found that the error comes from the setting on the region that I’ve set in northeast-1. The thing is that this AWS account is my colleague’s one who is based in Asia and I am building an app using his account and I am physically based in the US East coast. Also, I’ve been wanting to transcribe the speech to text both in Japanese and our client will use the app in Japan. Could you advise me what region shall I set up?

Thanks a lot.

Hm. Good question. I’m not sure what would be the best region for your app. It depends (as always), on what you’ll be doing.

If you’re uploading a lot of media, I’d pick a region closest to the uploader. So if it’s primarily your client who will be using the app, I’d probably default to ap-northeast-1 (Tokyo). If you’re uploading from multiple regions, the simple solution is just pick a region and take a performance hit on the other regions, but if you’re worried about performance, look into edge-optimized API endpoints (Choose an endpoint type to set up for an API Gateway API - Amazon API Gateway). These are the default for REST APIs. They are probably the best solution if you’ll have “clients” (i.e., uploaders) in multiple regions.

Keep in mind, though, that if the client is “consuming” the products of the Transcribe API, i.e., the transcripts, it mostly matters where you store the transcripts. So if you want fast load time of the transcript data, use a bucket in the region of the client. In other words, starting the jobs may not be the bottleneck in performance; if the client is consuming the output, that may be what matters most.

Hope this helps!

Thanks a lot for your continuous support. I am gradually understanding how it works. Still need lots of time to understand it and will discuss with my colleagues about the best operation!
Just wanted to send a quick thank you.

Happy to help :slight_smile:

Good luck with your app! Let me know if I can help clarify anything else.

Cheers

Hi Corey @launchable , thank you so much for the detailed tutorial. It’s been supremely helpful. As discussed, these are the screenshots of the CW error logs:



StT-2

Please help!

Thanks,
Shyam

Hi Shyam,

It appears the issue is that [Error] KeyError ‘queryStringParameters’. Can you post the snippet of code you’re using to reference that? i.e., where you are grabbing the value from the dictionary.

My guess is that either it is misspelled somewhere, it’s not being passed through to a function that needs it, or you’re not referencing event[‘queryStringParameters’].

Two other possibilities: your API in API Gateway may not be configure as a lambda proxy API, or 2), the lambda function isn’t receiving an ‘event’ object. This can happen in testing, e.g., if you’re triggering the lambda function in the lambda console.

Do any of these apply?

Any luck debugging?

Hi Corey,

Many thanks for checking in. I am still trying to make it work!

I have copy pasted the Lambda function code (StartTranscribeJob & GetTranscribeJob) from your Github as it is.
I will share a Loom video with you in a while today.
Meanwhile, I will redo the whole thing from scratch and see if it helps!

Thanks,
Shyam

Hi Corey,

Here is the Loom video link of all I did. I struggled for 3 days, still I couldn’t figure out!

Can you check the video and see if you can help me?
I have included CloudWatch logs also in the video.

Thanks

Hi Shyam,

I think I know what’s going on. The error you’re seeing near the end of the video is because the S3 bucket that your files are in does not match the location of your API endpoint. If I recall correctly, the Bubble database S3 bucket is in region us-east-1 (although there may be different regions for different users; maybe Bubble support can clarify). Either way, your file and API endpoint do not match. Try deploying your Lambda and API endpoint in the same region that your files are in, and see if that works.

If not, happy to jump on a Zoom call to resolve.

Good luck!

1 Like

Great! That worked!
You are awesome!
A big big thank you :slight_smile:
Truly truly appreciate…