BS Decoder

Hoe het werkt

• 📝 Ondertitels ophalen: extractie van YouTube-ondertitelingstracks (tekst + timing)
• 🤖 Herschrijven met AI: de ondertitels worden naar een LLM gestuurd (via de Groq-API, die compatibel is met OpenAI), met de opdracht om ze op een humoristische manier te herschrijven
• 🎬 Synchronisatie: de herschreven tekst wordt als overlay over de video weergegeven, afgestemd op de oorspronkelijke timing
• 🔊 Voorlezen (optioneel): de herschreven tekst kan hardop worden voorgelezen via de Web Speech API van de browser

Een bewuste architectuurkeuze: BYOK

In plaats van AI-aanroepen via een server te laten verlopen, gebruikt de extensie een BYOK-model (Bring Your Own Key): elke gebruiker voert zijn eigen Groq API-sleutel in, die gratis verkrijgbaar is.

Een architectuur met een privésleutel aan de serverkant (met authenticatie, quotabeheer, prijsstelling en betalingen) zou nodig zijn om een echte gebruikersbasis aan te kunnen als het concept ooit op grotere schaal zou worden uitgerold. Maar voor een persoonlijke MVP was die complexiteit niet nodig: BYOK voorkomt dat er infrastructuur, facturatie en misbruikrisico's moeten worden beheerd, en is op deze schaal ruimschoots voldoende.

De structuur behouden zonder de betekenis op te offeren

De uitdaging was niet om een coherente herschrijving te krijgen (het LLM begreep de algemene betekenis van de toespraak al goed), maar om de exacte structuur van de ondertitelsegmenten in het antwoord te behouden, inclusief de timing.

Een klassiek JSON-formaat (een lijst met segmenten en hun tekst) bleek onvoldoende betrouwbaar: het model week regelmatig licht af van de verwachte structuur, waardoor het resultaat moeilijk robuust opnieuw te parsen was.

De oplossing was het definiëren van een aangepaste markup-taal, die expliciet in de prompt aan het LLM werd uitgelegd, en het model te verplichten deze strikt te reproduceren in de output. Deze formatbeperking was voor het model eenvoudiger en voorspelbaarder te volgen dan een geneste JSON-structuur. Daardoor werd de output betrouwbaar en exact volgens dezelfde segmentering als de input opgebouwd, terwijl het model vrij bleef om eerst over de algemene betekenis van de tekst na te denken en die vervolgens opnieuw over deze structuur te verdelen.

AI-gebruik: versneller, onder controle

Naast prompt engineering was AI (met name via Copilot) een echte versneller voor dit project, niet alleen bij het schrijven van code, maar ook bij het structureren van het denkwerk vooraf.

Dit gebruik was gebaseerd op een voortdurende afweging tussen delegeren en controleren:

• ✅ Grotendeels gedelegeerd: de UI/UX van de MVP, een domein waarin AI betrouwbare oplossingen voorstelt die onmiddellijk visueel te verifiëren zijn
• 🔍 Gecontroleerd of handmatig geschreven: alles wat te maken had met runtimegedrag dat moeilijk door AI alleen te reproduceren of te testen is (het bewaren van statussen tussen het openen en sluiten van de popup, het ophalen van ondertitels binnen de specifieke context van een YouTube-pagina, de afhankelijkheid van het werkelijke gedrag van een externe API, en de levenscyclus van de extensie tijdens navigatie binnen de YouTube-SPA)

Op deze laatste punten stelde AI regelmatig oplossingen voor die plausibel maar in de praktijk onjuist waren: ze heeft geen toegang tot het werkelijke gedrag van YouTube's veranderende DOM, noch tot de specifieke levenscyclus van Chrome-extensies. Hier werd empirisch experimenteren essentieel: testen in echte omstandigheden en onverwacht gedrag observeren bleek belangrijker dan alleen code nalezen.

Technische obstakels

• 💬 Originele ondertitels ophalen: YouTube biedt geen stabiele toegang tot ondertitels via de DOM. De ondertitels worden opgehaald door het API-antwoord van YouTube dat door de pagina wordt verstuurd te onderscheppen, met behulp van een wrapper rond de window.fetch-methode.
• 🔄 Levenscyclus van de popup: een Chrome-extensiepopup wordt volledig vernietigd zodra hij de focus verliest, waardoor lopende processen stilletjes worden onderbroken (zoals het laden van een model) → de logica werd verplaatst naar het background script en statussen worden bewaard in de opslag van de extensie.
• 🔒 Content Security Policy (Manifest V3): het laden van externe scripts in een extensiepagina wordt strikt geblokkeerd, waardoor de YouTube IFrame API niet rechtstreeks in een apart venster kon worden geïntegreerd → dit stuurde de architectuur in de richting van een content script dat rechtstreeks in de bestaande YouTube-pagina wordt geïnjecteerd
• 📄 SPA en asynchrone DOM: de status van de extensie synchroniseren met de huidige pagina binnen de context van een SPA

Conclusie

BS Decoder gaf me de kans om concreet te experimenteren met een pragmatisch gebruik van generatieve AI: niet als automatische piloot, maar als een versneller waarvan de efficiëntie rechtstreeks afhangt van hoe je taken opsplitst en wat je eraan toevertrouwt.

Het project bood ook de kans om mezelf onder te dompelen in de echte beperkingen van Manifest V3-extensies: CSP, de levenscyclus van de popup en het gedrag van een externe SPA. Problemen die AI alleen niet kon voorzien of oplossen zonder empirische verificatie.

Uiteindelijk is de belangrijkste vaardigheid die ik hier heb ontwikkeld niet het gebruik van een LLM, maar het kunnen afwegen wat je er met vertrouwen aan kunt toevertrouwen en wat een grondige handmatige controle vereist.