#How to update captions in real time?

44 messages · Page 1 of 1 (latest)

rancid kernel
#

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?

silver cypress
rancid kernel
#

Can you help me or give me a good prompt for them to try to make it?

silver cypress
low glade
# rancid kernel I have adapted the word-by-word tiktok captions template to my nextjs project, t...

@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.

rancid kernel
#

Im trying to build a video editing SaaS

rancid kernel
#

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

low glade
rancid kernel
#

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

low glade
stark quest
#

@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..

rancid kernel
#

@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

stark quest
#

@rancid kernel it supports lots of languages

#

where you checked?

rancid kernel
#

And I don’t get the transcription

#

I don’t get any words/transcription

#

I use the demostration without login

#

Idk

stark quest
#

you need to send audio to it

#

audio file in buffer format ig