InstantEcho 🎙️

InstantEcho 是一款基於 Chrome 擴充功能的** AI 實時同步口譯工具**。它能精準擷取當前分頁的音訊，並透過 OpenAI Realtime API 將其轉化為流暢的即時字幕與翻譯。

• 即時串流翻譯：採用 OpenAI gpt-4o-realtime 技術，延遲極低，翻譯流暢。
• 優化斷句邏輯：特別調教的語音活動偵測 (VAD) 機制，確保句意的完整性與準確度。
• 多模型切換：支援 GPT-4o Realtime (高效能) 與 GPT-4o Mini Realtime (快速度/低成本) 雙重選擇。
• 懸浮字幕面板：注入式網頁 UI，可自由拖動位置，並支援一鍵清空歷史紀錄。
• 分頁音訊擷取：透過 chrome.tabCapture 與 Offscreen API 實現純淨的音訊獲取。
• 隱私至上：API Key 儲存在本地，絕不經過中轉伺服器。

npm install

# 開發模式
npm run build -- --mode development

# 生產模式編譯
npm run build

1. 打開 Chrome 瀏覽器，進入 chrome://extensions/。
2. 開啟右上角的「開發者模式」。
3. 點擊「載入解壓縮擴充功能」，選取本專案的 dist 目錄。

1. 點擊擴充功能圖示開啟 Popup 視窗。
2. 輸入您的 OpenAI API Key。
3. 選擇 目標語言（如繁體中文）與 AI 模型。
4. 點擊 Save Settings。
5. 在任何有聲音的網頁中，點擊字幕面板上的 「開始」 或使用鍵盤快捷鍵 Ctrl+Shift+L (可自訂) 啟動。

• Frontend: React, Tailwind CSS
• Bundler: Webpack
• Audio Processing: Web Audio API, AudioWorklet (PCM 16-bit 24kHz)
• Messaging: Chrome Runtime / Tabs Messaging
• AI Engine: OpenAI Realtime API (WebSocket)

• /src/background: 負責生命週期管理與 API 協調。
• /src/offscreen: 處理音訊擷取、轉換與 OpenAI WebSocket 連線。
• /src/content: 網頁端懸浮字幕 UI 的注入與更新邏輯。
• /src/popup: 擴充功能設定界面。

MIT License