TV Translate: Tiện ích Dịch Đa Năng Ngay Trong Trình Duyệt
Quy mô
200+
Ngôn ngữ hỗ trợ, tìm kiếm được bằng tiếng Việt không dấu
5
Cách dịch: gõ tay, dán ảnh, chọn vùng màn hình, cả trang web, giọng nói
2
Bảng dịch song song, mỗi bên một chiều ngôn ngữ riêng
6
Luồng dịch chạy song song khi dịch nguyên trang
100%
OCR xử lý ngay trên máy, không upload ảnh lên server nào
0
Tài khoản, API key hay chi phí cần thiết để sử dụng
Bài toán
Công việc Facebook Ads hàng ngày đụng tiếng Anh liên tục: tài liệu chính sách quảng cáo, thư viện quảng cáo của đối thủ, bài viết tham khảo, ảnh chụp màn hình creative nước ngoài. Cách thông thường là mở thêm tab Google Dịch, copy-paste qua lại, hoặc gõ tay lại chữ trong ảnh để dịch — chậm, đứt mạch làm việc và mất định dạng. Không có công cụ nào gộp đủ cả dịch chữ, dịch ảnh, dịch nguyên trang và dịch giọng nói vào một chỗ, dùng được ngay trong lúc đang làm việc mà không cần rời tab.
Giải pháp
1. Popup hai chiều, hai bảng dịch song song
- ·Mở tiện ích là thấy ngay 2 bảng dịch cạnh nhau, mặc định một bên dịch sang tiếng Việt, một bên sang tiếng Anh — vừa dịch câu hỏi vừa dịch câu trả lời mà không cần đổi chiều liên tục.
- ·Bộ chọn ngôn ngữ tự viết riêng (LangPicker): gõ tìm trong 200+ ngôn ngữ, tìm được tiếng Việt dù gõ không dấu (normalizeSearch), điều hướng bằng bàn phím.
- ·Văn bản dài được tự động chia nhỏ (chunk) và dịch song song để không vượt giới hạn của API, kèm nút đảo chiều, sao chép, đọc to (TTS) và nhập bằng giọng nói (mic).
- ·Lịch sử 50 lượt dịch gần nhất (tự xoá sau 24 giờ), bấm vào là khôi phục lại đúng cặp ngôn ngữ và nội dung đã dịch.
2. Dịch chữ trong ảnh bằng OCR ngay trên trình duyệt
- ·Dán ảnh, kéo-thả hoặc chọn file — Tesseract.js (chạy bằng WebAssembly) đọc chữ trong ảnh với 2 mô hình ngôn ngữ Anh + Việt, tất cả xử lý cục bộ, không gửi ảnh đi đâu cả.
- ·Chữ đọc được tự động đổ vào ô nguồn và dịch ngay, không cần gõ lại tay.
3. Chọn vùng màn hình để dịch, kiểu Google Lens
- ·Chọn menu chuột phải, kéo chọn một vùng bất kỳ trên trang (content script capture-overlay.js vẽ lớp phủ với con trỏ dạng dấu cộng, có thể huỷ bằng Esc).
- ·Background script chụp toàn bộ tab (chrome.tabs.captureVisibleTab) rồi cắt đúng vùng đã chọn bằng OffscreenCanvas, có tính đến tỷ lệ điểm ảnh màn hình (devicePixelRatio) để không bị lệch hay mờ.
- ·Ảnh cắt được mã hoá base64 theo từng đoạn nhỏ (chunk) khi truyền giữa background và content script, tránh vượt giới hạn kích thước tin nhắn của Chrome.
4. Dịch nguyên trang web tại chỗ, giữ nguyên bố cục
- ·page-translate.js duyệt toàn bộ DOM bằng TreeWalker (tối đa 200 node chữ, bỏ qua script/style/input/code/vùng có thể chỉnh sửa), rồi dịch song song bằng 6 luồng, vẫn giữ nguyên khoảng trắng gốc.
- ·Xuất hiện nút nổi "Xem bản dịch / Xem bản gốc" để bật tắt qua lại bất cứ lúc nào, không cần tải lại trang.
5. Giao diện song ngữ, sáng/tối, mở rộng linh hoạt
- ·Toàn bộ giao diện có thể chuyển Việt/Anh độc lập với cặp ngôn ngữ đang dịch, nhớ lựa chọn giao diện sáng/tối qua chrome.storage.local.
- ·Có thể mở rộng popup thành một tab riêng hoặc ghim thành cửa sổ nổi luôn ở trên cùng (chrome.windows.create), tiện khi cần vừa dịch vừa làm việc khác.
Minh hoạ giao diện
Vì đây là ảnh chụp từ một tiện ích cài cục bộ (chưa phát hành lên Chrome Web Store), phần dưới đây tái hiện đúng bố cục và nội dung thật của popup — đã kiểm tra trực tiếp bằng cách chạy giao diện thật trong trình duyệt — để minh hoạ cách hai bảng dịch hoạt động song song:
Hai bảng dịch chạy độc lập: bảng trái mặc định dịch sang tiếng Việt, bảng phải sang tiếng Anh — nhập một lần, đọc được cả hai chiều.
Cách triển khai
- Nền tảng
- Chrome Extension, Manifest V3 (service worker, content scripts tiêm động qua chrome.scripting)
- Dịch thuật
- API Google Dịch không chính thức (translate.googleapis.com), gọi trực tiếp từ trình duyệt, không backend, không API key
- OCR ảnh
- Tesseract.js (WebAssembly) chạy trong popup, mô hình eng + vie (~4,2MB), xử lý hoàn toàn cục bộ
- Chụp vùng màn hình
- chrome.tabs.captureVisibleTab + OffscreenCanvas để cắt ảnh theo devicePixelRatio, truyền dữ liệu base64 theo từng chunk
- Giọng nói
- Web Speech API: SpeechRecognition (nhập bằng mic) và speechSynthesis (đọc to bản dịch, tự chọn giọng phù hợp)
- Lưu trữ
- chrome.storage.local cho cài đặt, giao diện và lịch sử dịch (50 mục / 24 giờ)
- Ngôn ngữ lập trình
- JavaScript thuần, không framework, không build tool — cùng triết lý với chính trang portfolio này
Kết quả
- →Gộp 4 việc trước đây phải tách rời (dịch chữ, dịch ảnh, dịch nguyên trang, đọc/nghe bằng giọng nói) vào một tiện ích duy nhất, không cần rời tab đang làm việc.
- →Dịch được chữ trong ảnh (creative đối thủ, tài liệu chụp màn hình) mà không cần gõ lại tay hay dùng dịch vụ OCR trả phí nào.
- →Toàn bộ ảnh và giọng nói được xử lý ngay trên máy (WebAssembly, Web Speech API) — không có dữ liệu nào rời khỏi trình duyệt ngoài văn bản gửi đi để dịch.
- →Một sản phẩm kỹ thuật hoàn chỉnh tự tay xây dựng ngoài chuyên môn Marketing — từ ý tưởng, thiết kế giao diện đến toàn bộ mã nguồn.