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

Showcase
1

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

11 Likes
2

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.

3

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!

3 Likes
4

Thanks man, will give it a watch

1 Like
5

Thanks!

7

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

8

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…

6
61161×767 109 KB

5
51733×865 79 KB

9

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.

10

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.

1
11869×719 269 KB

11

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!

12

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.

13

Happy to help :slight_smile:

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

Cheers

14

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-3
StT-31087×429 61.5 KB

StT-1
StT-1693×557 38.7 KB

StT-2

Please help!

Thanks,
Shyam

15

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?

16

Any luck debugging?

17

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

18

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

19

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
20

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

21

Hi @launchable,

Thank you so much for the tutorial, hugely appreciate the effort!

It feels like I’ve followed the tutorial to a tee, though have an error that I just can’t seem to shake.

(IMAGES REMOVED)

Reading the above issues, I’ve contacted bubble and they said their s3 files are mostly stored in US West (Oregon), I’ve tried that region and got the same error. I’m based in Sydney, Australia if that context helps at all.

Really not sure how to proceed here, any advice would be super helpful - thoughts?

Thank you,