AI Avatar v15: Mang sự sống vào VS Code và Chrome với TTS, Hiệu ứng CSS và Hoạt ảnh 3D cực chất

Bài viết được dịch và tổng hợp từ tin tức gốc. Bạn có thể đọc bài viết gốc bằng tiếng Anh tại đây.

Điểm tin nhanh:

• AI Avatar v15 giới thiệu hệ thống hiệu ứng CSS chuyên sâu và hoạt ảnh 3D (Millionaire & Rollercoaster) giúp tăng trải nghiệm người dùng.
• Tích hợp đa dạng công nghệ Text-to-Speech (TTS) bao gồm Gemini, Web Speech API, Kokoro và VOICEVOX.
• Cải thiện tính thông minh của avatar với thông báo theo ngữ cảnh (thời gian, tình huống) và các hoạt ảnh idle tự nhiên hơn.

AI Avatar là một ứng dụng mã nguồn mở miễn phí cho phép avatar 3D (định dạng VRM) của bạn tương tác và phản hồi lại các câu lệnh AI hoặc phím Enter ngay trong môi trường VS Code và trình duyệt (Chrome/Edge). Sứ mệnh của dự án là mang lại niềm vui và sự hứng khởi cho các lập trình viên.

1. Nâng cấp hiệu ứng hình ảnh cùng RutenVeil

Bản cập nhật v15 đánh dấu sự hợp tác với @rutenveil để mang đến các hiệu ứng CSS động. Hệ thống này được thiết kế với cấu trúc phân lớp (layering) giống như Photoshop, giúp tạo chiều sâu cho không gian 2D.

Đặc điểm	Chi tiết kỹ thuật
Cấu trúc	Phân lớp (Top, Middle, Avatar, Bottom)
Quản lý	Tách biệt hoàn toàn Static styles và Dynamic styles
Hiệu ứng	6 chủ đề (Idol Stage, Sci-Fi, Galaxy, American Comic...)
Độ chính xác	Timeline điều khiển đến 0.1s

Ví dụ về mã CSS cho hiệu ứng "Idol Stage":

.psy-purple {
   transform: translateX(0%) rotate(8deg) translateY(33%);
   animation:
       psyFadeIn 0.4s ease-out forwards 1s,
       psyWavingPurple 0.13s ease-in-out infinite alternate 1.4s,
       fadeOutLight 0.2s ease forwards 11.4s;
}

2. Tích hợp Text-to-Speech (TTS)

AI Avatar giờ đây có thể "nói" với nhiều tùy chọn công nghệ khác nhau, cho phép người dùng lựa chọn dựa trên nhu cầu về chất lượng hoặc chi phí:

• Gemini TTS: Chất lượng cao, tốc độ nhanh (giới hạn 10 lần/ngày cho gói miễn phí).
• Web Speech API: Miễn phí, không giới hạn nhưng âm thanh mang tính robot.
• Kokoro: Mô hình local cho tiếng Anh, chất lượng khá tự nhiên.
• VOICEVOX: Giải pháp local cho tiếng Nhật (yêu cầu cài đặt thêm).

3. Hoạt ảnh 3D mới (Three.js)

• Millionaire Mode: Hiệu ứng phun tiền vàng hoặc kim cương hồng. Tối ưu hóa hiệu năng bằng cách bỏ qua tính toán va chạm vật lý cho từng đồng xu.
• Rollercoaster Mode: Avatar trượt trên đường ray với các phiên bản Default, Rainbow và Water, sử dụng thư viện RollerCoaster.js.

4. Các cải tiến khác

• Thông báo theo ngữ cảnh: Avatar sẽ thay đổi thông điệp dựa trên thời gian thực (ngày, giờ) và tình huống cụ thể thay vì chỉ dùng các câu chào cố định.
• Hoạt ảnh Idle: Bổ sung các cử động nghiêng đầu, ngực và cơ thể một cách tự nhiên hơn.
• Thay đổi nhân vật mặc định: Cung cấp sẵn các cấu hình Cute, Energetic và Cool để người dùng nhanh chóng thay đổi tâm trạng.

Hướng dẫn cài đặt

VS Code Extension:

• Cách 1: Mở tab Extensions trong VS Code, tìm kiếm "AI Avatar" và nhấn Install.
• Cách 2: Cài đặt trực tiếp từ VS Code Marketplace.

Chrome Extension:

• Tải về từ Chrome Web Store.

Bạn có ý tưởng mới cho các hiệu ứng hoặc tính năng AI tiếp theo? Hãy để lại bình luận để tác giả hoàn thiện phiên bản v16 nhé!