Help with Creating a Real-Time Subtitle Translator for Anime

I'm trying to build a gift for my girlfriend, who is Ukrainian and really enjoys watching anime. There aren't many good anime streaming sites with Ukrainian subtitles, so I want to create a real-time translator app that can translate English subtitles into Ukrainian for the site we usually use. I've started working on this using Tampermonkey, but honestly, I'm struggling and not making much progress. Here's my current code:

```javascript
(function () {
'use strict';

let lastSubtitle = '';

async function translate(text) {
try {
const response = await fetch('https://de.libretranslate.com/translate', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
q: text,
source: 'en',
target: 'uk',
format: 'text'
})
});

const data = await response.json();
return data.translatedText || text;

} catch (err) {
console.error('Translation error:', err);
return text;
}
}

setInterval(async () => {
const subtitleElements = Array.from(document.querySelectorAll('div, span'))
.filter(el => el.innerText && el.innerText.length < 200 && el.offsetParent !== null);

for (const el of subtitleElements) {
const currentText = el.innerText.trim();
if (currentText && currentText !== lastSubtitle && /^[a-zA-Z0-9 ,.'"-?!]+$/.test(currentText)) {
lastSubtitle = currentText;
const translated = await translate(currentText);
el.innerText = `${currentText}n${translated}`;
console.log('Subtitle translated:', currentText, '→', translated);
break;
}
}
}, 1500);
})();
```

I'd love any tips or guidance you might have! Thanks!