---

🌟 Giới thiệu Dự án (About The Project)

GQN Studio là một hệ thống Full-stack (Web App) mạnh mẽ giúp những nhà sáng tạo nội dung tự động hóa quy trình bản địa hóa video (Localization). Thay vì phải tải video, tách âm thanh, dịch phụ đề, lồng tiếng và căn chỉnh thời gian (sync) một cách thủ công tốn hàng giờ đồng hồ, GQN Studio rút ngắn tất cả chỉ trong vài cú click chuột.

Dự án này được xây dựng với mục tiêu giải quyết bài toán xử lý đa phương tiện phức tạp, kết hợp sức mạnh của các mô hình LLM (Gemini, ChatGPT) cho dịch thuật ngữ cảnh và các công cụ TTS/RVC tiên tiến để tạo ra giọng nói tự nhiên, khớp chuẩn xác với khẩu hình và nhịp điệu gốc của video.

🔄 Luồng hoạt động chính (Core Workflow)

1. Input: Người dùng dán Link Video (hoặc tải file lên).
2. AI Translation: Hệ thống tách âm thanh, chuyển giọng nói thành văn bản (Whisper AI) và dịch tự động toàn bộ ngữ cảnh (Gemini/ChatGPT).
3. Studio Edit: Chỉnh sửa phụ đề, chỉ định giọng lồng tiếng (TTS/Clone Voice), tinh chỉnh vị trí, thêm Logo hoặc che mờ (Visual Editor) ngay trên trình duyệt.
4. Render: Backend (FFmpeg) sẽ tự động tách nền nhạc, ghép giọng lồng tiếng mới, ghi đè phụ đề (.ASS) với hiệu ứng chuyên nghiệp và xuất ra Video hoàn chỉnh.

---

📸 Giao diện & Công dụng các màn hình chính

Thiết kế giao diện được tối ưu hóa cho trải nghiệm người dùng, mang phong cách hiện đại (Modern/Glassmorphism) với các thanh công cụ trực quan.

1. Màn hình Cấu hình & Tải Video (Trang chủ)

Màn hình đầu tiên người dùng tiếp xúc. Cho phép dán link video (YouTube, TikTok...) hoặc tải lên file local. Các thiết lập tự động hóa dịch thuật (chọn AI Model, ngôn ngữ, kiểu phụ đề) đều được thực hiện tại đây.

2. Quản lý Khóa API (API Keys)

Trung tâm cấu hình bảo mật toàn diện. Cho phép người dùng:

• Lưu trữ và quản lý an toàn các API Keys của Gemini, OpenAI, xAI.
• Thêm nhiều tài khoản để dự phòng (Auto-fallback) khi hết token hoặc bị giới hạn.

3. Màn hình Trình quản lý Phụ đề & Lồng tiếng (Studio)

Trái tim của hệ thống. Hiển thị Timeline trực quan cho từng câu thoại. Tại đây, hệ thống cho phép:

• Lồng tiếng từng đoạn với các giọng đọc khác nhau (Multi-Speaker).
• Nghe lại, căn chỉnh (sync) trực tiếp trên trình duyệt.
• Sinh tự động Tiêu đề, Mô tả chuẩn SEO (AI Đạo diễn) dựa trên nội dung video ở khung bên phải.

4. Quản lý Tệp (Lịch sử dự án)

Lưu trữ và quản lý toàn bộ các video đã được render thành công. Giao diện lưới (Grid Layout) hiển thị rõ ràng thông tin thời gian, tên dự án, kèm các thao tác nhanh (Tải xuống, Mở lại để sửa, Xóa).

5. Visual Editor (Trình chỉnh sửa Trực quan In-video)

Không cần thao tác mò mẫm bằng số, màn hình này cho phép người dùng tương tác trực tiếp lên video:

• Kéo thả phụ đề: Đổi vị trí, phóng to/thu nhỏ chữ chỉ bằng thao tác kéo chuột.
• Che mờ (Blur Mask): Khoanh vùng che mờ tự động, che logo, che khuôn mặt với nhiều hiệu ứng.
• Đóng dấu (Watermark): Chèn Logo PNG trực tiếp vào video cực kỳ dễ dàng.

---

⚡ Tính năng Cốt lõi (Core Features)

• Tự động trích xuất & Dịch thuật: Sử dụng Whisper AI để STT (Speech-to-Text), sau đó dùng Gemini/ChatGPT dịch thuật toàn bộ ngữ cảnh một cách thông minh (giữ nguyên sắc thái cảm xúc, chuyên ngành).
• Text-To-Speech & Voice Cloning: Tích hợp đa dạng Engine lồng tiếng (Edge-TTS, Mimo, Puter) và hỗ trợ RVC (Retrieval-based Voice Conversion) để clone giọng gốc của nhân vật.
• Xử lý Audio AI (Demucs): Tính năng tách lớp âm thanh (Vocal & Background Music) xuất sắc, giúp giữ lại nhạc nền và hiệu ứng âm thanh gốc (SFX) để mix lại vào video sau khi đã thay giọng lồng tiếng mới.
• Render ASS Subtitle chuẩn xác: Tự động gen file phụ đề .ASS nâng cao, hỗ trợ các hiệu ứng chuyên nghiệp (Karaoke, Highlight pop, Typewriter...).
• Background Processing & WebSocket: Xử lý video nặng ở Backend không làm chặn luồng UI. Cập nhật tiến độ xử lý real-time lên Frontend qua WebSocket.

---

🛠 Tech Stack (Công nghệ sử dụng)

Frontend (User Interface)

• Framework: React.js + Vite.
• Styling: Tailwind CSS (Custom Design System, Modern UI).
• Icons & Components: Lucide-React, Radix UI.
• State & Routing: Context API / React Hooks.

Backend (Core Processing & API)

• Framework: FastAPI (Python).
• Audio/Video Processing: FFmpeg, Demucs (Tách nhạc AI), Libass.
• AI/LLM Integrations:
  Đoạn Mã Sao Chép Mã

  google-genai

  (Gemini),
  Đoạn Mã Sao Chép Mã

  openai

  (ChatGPT),
  Đoạn Mã Sao Chép Mã

  whisper

  (STT).
• Concurrency:
  Đoạn Mã Sao Chép Mã

  asyncio

  , Background Tasks cho quá trình encode video.
• Real-time Comms: WebSockets để đẩy log và progress bar.

---

🎯 Bài học & Kỹ năng Đạt được (What I Learned)

1. System Architecture: Cách chia nhỏ các micro-tasks (Download -> STT -> Translate -> TTS -> Merge) thành một pipeline hoàn chỉnh và có thể phục hồi (resume) khi có lỗi.
2. Video/Audio Engineering: Làm quen với các tham số phức tạp của FFmpeg (tính toán bitrates, điều chỉnh âm lượng audio, mapping stream, scale video).
3. Advanced UI/UX: Triển khai các tính năng UI khó như Interactive Video Overlay (Visual Editor kéo thả, tính toán tọa độ tương đối theo Aspect Ratio của màn hình).
4. AI API Orchestration: Cách quản lý, fallback và parsing kết quả JSON từ các mô hình ngôn ngữ lớn (LLMs) để đảm bảo dữ liệu trả về chuẩn cấu trúc cho hệ thống chạy tự động.