Back to work

Web App

Turn a public YouTube video into timestamped text you can read, translate and reuse. A working app with public frontend and API code, no account required.

Watch the demo Visit Frontend API
  1. 01 / INPUTA YouTube link
  2. 02 / PROCESSTimestamped text
  3. 03 / OUTPUTYour target language
Explore the engineering

The problem

Reviewing a video should not require replaying it to find every useful sentence or manually copying captions into a translator. Transcriber brings a public YouTube URL, timestamped text and an optional translation into one reading flow, without requiring an account.

Watch the demo

Edited recording of the real app, without mocked API responses. A continuously visible editorial cursor guides the approved montage; its movement is reconstructed between verified controls, not recorded mouse telemetry. Typing sounds follow visible text entry, alongside click cues and the original music. Playback starts only when you press play. Not a benchmark or latency guarantee. The original 'Sin audio' label predates this soundtrack.
Download this video

On mobile, use fullscreen and turn your phone sideways to read the application in detail.

  1. Enter a public YouTube URL and choose the target language.
  2. Follow the processing stages as the transcript is prepared.
  3. Compare the timestamped result and its translation, search within the text and switch to reading mode.
  4. Export as TXT, SRT, VTT or Markdown, then reopen a result from browser history.

Technical decisions

Reuse captions before running speech recognition

The Java / Spring Boot API uses yt-dlp to look for existing subtitles first. When usable captions are unavailable, it downloads audio and runs whisper.cpp on the server. This avoids unnecessary transcription work when text already exists; Whisper is a fallback, not a promise of perfect recognition.

Translate only when the language changes

DeepL receives the text for translation. When the source and target language are the same, that translation step is skipped. Keeping extraction, transcription and translation separate makes the external dependency explicit rather than presenting the whole pipeline as local AI.

Expose stages instead of a frozen spinner

The Astro / React frontend receives processing stages through Server-Sent Events (SSE). The interface can explain what the API is doing while the request runs, without claiming an exact completion time.

Keep recent results in the browser

The last five results are kept in browser local storage, so a reader can revisit them without an account. This is a small local history, not cross-device synchronisation or a statement that the server stores nothing.

Limits and data handling

  • The project's default configuration allows videos up to 20 minutes and two simultaneous processing requests. Excess requests are rejected rather than queued. These are configurable limits, not verified production settings or a throughput claim; video duration is distinct from processing time.
  • The app depends on YouTube availability and extraction through yt-dlp. Public access does not guarantee that every video can be processed, and it does not grant permission to reuse its content.
  • Caption quality, speech recognition and translation can all introduce errors. The reported source language belongs to the selected transcript or captions and can differ from the original audio. Review the result before using it as a quotation, subtitle or source document.
  • This is not an entirely local or storage-free service: requests reach YouTube, server-side processing uses temporary files and logs, and translation sends text to DeepL. Browser history also persists locally; avoid submitting sensitive material.
  • Processing time depends on video length, available captions, server load and external services. The demo is not a performance measurement.

A verifiable result

The deliverable is a working web app backed by a separate API: a public video becomes timestamped text with an optional translation and a recent-results history. The live app and both source repositories let you inspect the implementation; no adoption, time-saving or accuracy figures are claimed.

How to check it

  1. Open the live app and submit a public video you have permission to process; select the target language and follow the reported stages.
  2. Compare several timestamped passages with the original video. Check the translation separately rather than treating transcription and translation as the same result.
  3. Revisit a result from browser history. Inspect the Frontend and API repositories for the captions-first path, Whisper fallback, SSE stages and configured limits.

Stack