I have adapted the word-by-word tiktok captions template to my nextjs project, the thing is that once it generates the subtitles with the sample-video.json file I want the user to have like a list where it comes out from the second to the second that each word goes and to be able to change it, that could be done getting from the json the data but I want that when I change a word it changes in real time, right now if I change it in the json I need to restart the page.
#How to update captions in real time?
44 messages · Page 1 of 1 (latest)
ok.
Have you tried working with Claude or ChatGPT ?
They are usually good helpers
Yes, I tried but they gave me a helpful answer.
Can you help me or give me a good prompt for them to try to make it?
you'll have to find your own way.
What I'd recommend is you parse your json and put it ont a reducer and then use the reducer in your inputProps in the <Player />
that way you can do whatever you want
@rancid kernel there are two different approaches you can take:
-
if you are building a SaaS, you want to build and editing interface around the <Player>, then I would recommend rendering an input field for each token and displaying the timestamp next to it. you can then edit each token. the changes you would just keep in a useState() and pass as inputProps to the player.
-
if you are just wanting to edit the props in the studio, you can use the writeStaticFile() API to save the props back. if you want two-way bindings, you can also use watchStaticFile() to listen to changes on disk.
I would recommend to create an overlay for editing the whisper.cpp output - here is one we did for #recorder as a reference: https://www.remotion.dev/recorder/subseditor.webm
the source code for it is also available if you get the recorder.
Im trying to build a video editing SaaS
Im doing that
Passing the subtitles generated by whisper though an useState
To change them and the start time in the interface
@low glade my actual doubt
is where to deploy whisper.cpp (sub.mjs)
To use whisper cpp on an endpoint
Because I’m using nextjs and I want to do a SaaS
I am also wondering. you can not run whisper.cpp in a serverless function
if anyone has experiences, feel free to share and we make a document
Do you think it’s a good way to use whisper with the OpenAI API?
And do not use whisper.cpp
I think it’s easier
Anyway, I’m going to research and If I find out some information I will let you know
To make a document
yes maybe!
it has a different format but not a bad one
@rancid kernel deepgram offers way cheaper and better transcription
you can pass your audio and you would get a transcription, and it also gives the start and end times,
you can then use durationInFrames or, start and end parameters in remotion to display the subtitles based on the timing.
based on the components you use..
Tysm
🙂
@stark quest
I checked it
and it only has english voices
I'm spaniard
and a lot of people of my SaaS also
whisper.cpp large its multilengual