I added a free SRT subtitle translator to my live-captioning app. The naïve version — "here's a subtitle file, translate it" — breaks in ways that are obvious once you've seen them. Here's the design that ended up working.

Rule 1: the model never sees timestamps

An .srt file is a list of cues:

2 00:00:03,000 --> 00:00:05,200 <i>How are you</i> doing today?

Enter fullscreen mode

Exit fullscreen mode

If you hand the whole file to a model, it will occasionally rewrite a timestamp, renumber cues, merge two short lines or "fix" a typo in --> . Any of those desynchronises the video.

So the file is parsed in the browser and only the text goes to the server:

const TIME = /^ \s * (\d{1,2} : \d{2} : \d{2}[ ,. ]\d{1,3})\s *--> \s * (\d{1,2} : \d{2} : \d{2}[ ,. ]\d{1,3})( .* ) $/ ;

function parseSrt ( text ) { return text . replace ( /^ / , '' ). replace ( / \r\n? /g , ' \n ' ). split ( / \n{2,} / ). flatMap ( block => { const rows = block . split ( ' \n ' ); const i = rows . findIndex ( r => TIME .…