Looping through with Javascript in Bubble Backend Workflow

The Challenge of Manipulating Numbers in Bubble Backend Workflows

I want to describe to you a challenge that I faced when trying to manipulate numbers, do some maths, and do some reformatting in a Bubble backend workflow. Here's the challenge. I've been using AssemblyAI with an internal tool that we've got at Planet No Code to transcribe and generate content on our videos. Part of that is generating those nice timestamps chapters that you get in a YouTube description.

AssemblyAI's Timestamp Generation

AssemblyAI gets me this far, which is that they'll generate a transcript and I can then call a particular endpoint and I can get the paragraphs and I get a start and an end time for those paragraphs. Now the issue is that these timestamps are in milliseconds, so I want to convert them into kind of an MM colon SS format. It's quite simple to convert them into seconds. You would just divide them and then you get seconds. But that's not the format that YouTube wants.

YouTube's Required Format

They want that MM for minutes and colon SS for seconds. So how did I go about fixing this, or at least finding a solution? Well, I built my own API workflow endpoint called convert, and then I used ChatGPT I think, to generate some JavaScript here which takes in my milliseconds input and formats it as hour, hour, minute, minute, seconds. And then I'm using, I think it's the toolbox, the toolkit JavaScript plugin here, and then I return the data.

Implementing the Solution in Bubble Workflow

This means that in my workflow where I actually save this, I'm saving a timestamped transcript and the issue is that I want to loop it through with every paragraph. So I'm saying take my paragraph data format as text, I then call my own workflow API endpoint.

Using the API Connector in Bubble

So I've added this into the Bubble API connector and I use it as a data source. And so I have it here, I've validated it, initialized it in my API connector, and then I say put in the start time. So this is going to run this convert workflow for every paragraph that goes through this format as text statement. And then below I print my paragraphs text.

The Final Output

That means I get a nice format to save and then pass on into Claude or OpenAI, whatever I use to generate the chapter headings. I've got my minutes, seconds, and then I've got my paragraph below and I've got paragraph after paragraph with that for my whole transcript.

The Necessity of Custom JavaScript

I basically had to solve this because at least when I was last testing this, I found that AI's are not clever enough. At least the APIs that are available from Claude or OpenAI, they're not clever enough to say, here's milliseconds, convert it into minutes and seconds. So I had to use some custom JavaScript and I've just demonstrated the process for you here.