echoly - GitLite

KO | EN

gitlite — search

#chatbot #electron #video #llm #nextjs #framework #pdf #tailwindcss #ai-agent #mcp

echoly

(★ 46)

Live YouTube translation Chrome extension. Hear any video in your language. Two tiers (sub-second Realtime / cheaper Standard), 13 languages, runs on your own Kyma API key.

파일 탐색기

ZIP 다운로드

- BRAND-DIRECTIONS.md
- BRAND.md
- index.html
- privacy.html
- brand.svg
- icon-128.png
- icon-16.png
- icon-32.png
- icon-48.png
- - 01-popup-webstore.png
  - 01-popup.png
  - github-readme-rendered.png
  - github-repo-overview.png
- privacy-policy.html
- promo-tile-440x280.png
- promo-tile-440x280.svg
- screenshots-guide.md
- web-store-metadata.md
.gitignore
background.js
BUGS.md
content.css
content.js
LICENSE
manifest.json
pack.sh
popup.css
popup.html
popup.js
README.md
release.sh
SPEC-SUBSCRIPTION.md
TEST-MATRIX.md

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

버전

파일

링크

예시

명령어 용어집

이 문서에서 사용된 명령어를 모아봤습니다. 낯선 명령어가 있다면 펼쳐서 확인해보세요.

🔍

`git pull`

설명 보기 ▼

Fetch branch from a remote repository and merge it to local repository.

git pull

Download changes from default remote repository and merge it:

git pull {{[-r|--rebase]}}

Download changes from default remote repository and use fast-forward:

git pull {{remote_name}}

Download changes from a specific remote repository:

🔍

`node`

설명 보기 ▼

서버 측 JavaScript 플랫폼 (Node.js).
더 많은 정보: <https://nodejs.org/docs/latest/api/cli.html#options>.

node {{path/to/file}}

JavaScript 파일 실행:

node

REPL(대화형 셸) 시작:

node --watch {{path/to/file}}

지정된 파일을 실행하고 가져온 파일이 변경될 때 프로세스를 재시작 (Node.js 버전 18.11+ 필요):

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

> Hear any YouTube video in your language. Live AI dubbing, runs on your own [Kyma](https://kymaapi.com) key.

<p align="center">
  <img src="store-assets/screenshots/01-popup.png" alt="Echoly popup" width="380">
</p>

Chrome MV3 extension that overlays a live AI voice-over onto any YouTube video. Two tiers:

- **Realtime** — WebRTC P2P, sub-second lag, 9 OpenAI voices or auto-clone of the speaker. ~$0.46 / 10 min.
- **Standard** — chunked pipeline (Whisper → Gemini → MiniMax), ~5s lag, 5 curated multilingual voices. ~$0.25 / 10 min.

13 target languages. No account, no telemetry, no Echoly-operated server.

## Install

### From Chrome Web Store *(coming soon)*

The submission is in review at the Chrome Web Store. Once approved, install with one click.

### From source (developer mode)

1. Clone or download this repo
2. Open `chrome://extensions`
3. Toggle **Developer mode** (top-right)
4. Click **Load unpacked**
5. Select the cloned folder
6. Pin Echoly to the toolbar

Update with `git pull` and click the reload icon on the extension card.

## Use

1. Open any YouTube video
2. Click the Echoly icon
3. Paste your Kyma API key from [kymaapi.com](https://kymaapi.com)
4. Pick a tier, target language, and voice
5. Click **Start** — the dub plays and the on-page panel renders the live translation
6. Drag the panel by its toolbar; resize from any edge or corner

You can change voice or language mid-session — Realtime hot-swaps in <1s, Standard picks up the change on the next 5s chunk.

## How it works

```
popup ◄──BACKGROUND_STATE_UPDATE──── background ◄──CONTENT_STATE──── content (YT page)
       ───START / UPDATE_SETTINGS───►          ───CONTENT_START───►
```

- **popup.html / popup.js** — passive renderer, no own state.
- **background.js** — single source of truth for `state`. Injects content script via `chrome.scripting.executeScript` if not yet present.
- **content.js** — captures the YT video element audio, builds the in-page overlay panel, and runs the active pipeline:
  - **Realtime tier**: mints a Kyma ephemeral token, opens P2P WebRTC with OpenAI Realtime.
  - **Standard tier**: chunks the audio into 5s windows via `MediaRecorder`, re-encodes to WAV client-side, then runs Whisper transcription → Gemini translation → MiniMax TTS per chunk through the Kyma gateway. Web Audio scheduling queues the resulting mp3 chunks back-to-back.

Token-guarded async pattern (`pageToken` captured in closure, checked before any state mutation) keeps stale callbacks from corrupting newer sessions when the user changes settings or stops mid-pipeline. An `AbortController` per Standard session cancels in-flight fetches the moment Stop is clicked, so credits aren't burned on orphaned chunks.

## Features

- One-key onboarding (paste Kyma key → Start)
- 13 target languages: English, Vietnamese, Japanese, Korean, Chinese, French, Spanish, German, Portuguese, Hindi, Indonesian, Italian, Russian
- Drag/resize on-page overlay panel with persisted layout
- Translation history (last 16 turns, scrollable)
- Source caption rendering (toggle in popup)
- Independent volume sliders for original audio and dub
- Voice amplification up to 2× via Web Audio GainNode
- Instant pause/play (no reconnect)
- 60-min hard auto-stop with a one-shot 5-min warning
- Tab close cleanup via `keepalive` POST so Kyma sees the session end

## Standard tier voices

Curated from MiniMax's 333-voice catalog. All multilingual — each voice speaks any of the 13 target languages.

- **Magnetic Man** — US, male
- **Captivating Female** — US, female
- **Deep Voice Man** — US, male
- **Confident Woman** — US, female
- **News Anchor** — female

## Privacy

Echoly does not collect, store, or sell any personal data. Your Kyma API key stays on your own device. Audio is sent directly to AI providers (Kyma, and OpenAI for Realtime tier) for the sole purpose of producing the translation. There is no Echoly-operated server.

Full policy: [`store-assets/privacy-policy.html`](store-assets/privacy-policy.html)

## Build a release zip

```bash
./pack.sh
# → ~/echoly-vX.Y.Z.zip
```

Reads the version from `manifest.json`, excludes `.git`, `.DS_Store`, `node_modules`. Drop the resulting zip into the Chrome Web Store Developer Console for an update, or share it for manual sideload.

## Roadmap

- Per-tab session log (live cost meter)
- Language warming on hover (sub-200ms switches in Realtime)
- Dictionary lookup on highlighted source caption text
- Firefox port (MV3 manifest portability TBD)

## Contributing

Issues and PRs welcome. The codebase is plain vanilla JS — no build step, no dependencies. Pre-flight checklist before opening a PR:

- `node --check content.js && node --check background.js && node --check popup.js`
- Manual test in a freshly reloaded extension on at least one English YouTube video, both tiers
- If you touch `manifest.json`, bump the version and update both `manifest.json` and `content.js`'s `ECHOLY_VERSION` constant in lock-step

## License

[MIT](LICENSE) © 2026 Son Nguyen Tung