Creating a Real-Time Subtitle Translator for Anime Fans: A Personal Project

In today’s interconnected world, language barriers can hinder the enjoyment of global entertainment. For anime enthusiasts, accessing high-quality subtitles in their native language enhances the viewing experience significantly. Recognizing this need, I embarked on a personal project to develop a real-time subtitle translator aimed at helping my Ukrainian girlfriend enjoy her favorite anime more comfortably while learning English.

The Inspiration

My girlfriend, who hails from Ukraine, has a deep passion for anime. However, the availability of reliable, Ukrainian-language subtitled anime content remains limited. While she is eager to improve her English, sometimes she just wants to unwind without constantly focusing on language learning. This motivated me to create a tool that would translate English subtitles into Ukrainian seamlessly during viewing sessions.

The Concept

The challenge was to develop an unobtrusive, real-time translation system that could integrate smoothly with the anime streaming site we frequent. I envisioned an overlay or subtitle modification that translates the original English text on-the-fly, providing a more accessible experience.

The Approach

Using browser scripting techniques, I decided to build a script that intercepts subtitle text and translates it dynamically. I chose Tampermonkey, a popular userscript manager, to facilitate this process.

Here is a simplified overview of the current implementation:

“`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 () => {
    // Search for visible subtitle elements
    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();
        // Process only if the text is a standard English sentence
        if (
            currentText &&
            currentText