Hướng dẫn AI

Xây dựng và tùy chỉnh avatar bot SVG biến hình với Bloub

Hướng dẫn này trình bày cách thiết lập Bloub, khám phá 14 trạng thái biến hình, tùy chỉnh avatar, tạo dòng thời gian, xuất ảnh tĩnh và ảnh động, cũng như sử dụng thành phần Vue với chế độ phát deterministic và khung hình cố định.

22 tháng 8, 2026Thời gian đọc khoảng 16 phút

Bloub là gì?

Bloub là bản tái tạo SVG của ảnh đại diện bot x.ai. Nó sử dụng một hình thân màu đen được tô kín, biến đổi qua 14 trạng thái, cùng hai hình mắt màu trắng độc lập, tất cả được trình bày trên nền đơn giản. Hoạt ảnh được triển khai mà không cần thư viện hoạt ảnh.

Ảnh đại diện chuyển qua các trạng thái chờ, nháy mắt, quỹ đạo và bùng nổ

Dự án kết hợp một công cụ hoạt ảnh không phụ thuộc framework với giao diện Vue 3. Công cụ này cũng không phụ thuộc đồng hồ: gọi engine.sample(t) sẽ tạo ra một khung hình hoàn toàn dựa trên thời gian được cung cấp. Nhờ đó, việc tạm dừng, tua đến vị trí bất kỳ, xem bản xem trước cố định và kiểm thử không DOM trở nên xác định.

Tính năng chính

Mười bốn trạng thái được đo lường: Ảnh đại diện bao gồm các trạng thái như chờ, nháy mắt, quỹ đạo và bùng nổ.
Tùy chỉnh ảnh đại diện: Chọn từ 8 hình thân, 12 màu và 16 biểu cảm nghỉ. Các lựa chọn được lưu lại giữa những lần truy cập.
Trình chỉnh sửa dòng thời gian: Sắp xếp các trạng thái, thiết lập thời lượng hiển thị của từng trạng thái và lưu hoạt ảnh kết quả.
Nhiều định dạng xuất: Xuất ảnh đại diện dưới dạng SVG, PNG hoặc GIF động, hoặc xuất toàn bộ dòng thời gian dưới dạng GIF hoặc MP4.
Mã hóa video theo nhu cầu: Bộ mã hóa video chỉ được tải khi lần đầu tiên cần đến.
Ba ngôn ngữ: Giao diện hỗ trợ tiếng Pháp, tiếng Anh và tiếng Trung.
Kết xuất xác định: Một thời điểm nhất định luôn tạo ra cùng một hình ảnh, hỗ trợ khung hình cố định chính xác và các bài kiểm thử có thể lặp lại.

Điều kiện tiên quyết

Bloub sử dụng Vue 3, Vite, TypeScript, Tailwind CSS 4 và pnpm. Hãy cài đặt môi trường Node.js và pnpm trước khi tiếp tục.

Cài đặt và chạy Bloub

Sao chép hoặc tải xuống repository, sau đó mở thư mục của repository trong terminal.
Cài đặt các phần phụ thuộc:
```
pnpm install
```
Khởi động máy chủ phát triển Vite:
```
pnpm dev
```
Mở http://localhost:5190 trong trình duyệt.

Chạy kiểm thử và tạo bản build production

Chạy bộ kiểm thử Vitest bằng lệnh:

pnpm test

Kiểm tra mã TypeScript và build ứng dụng bằng lệnh:

pnpm build

Lệnh build chạy vue-tsc --noEmit trước vite build. Repository cố ý không có cấu hình ESLint hoặc Prettier, vì vậy vue-tsc là bước kiểm tra chất lượng mã chính. Hãy chạy pnpm build trước khi xem một thay đổi là hoàn tất.

Khám phá ứng dụng

Thanh điều hướng bên trái chuyển đổi giữa ba chế độ xem chính.

Tùy chỉnh ảnh đại diện

Mở Customise để chọn một trong 8 hình thân, 12 màu và 16 biểu cảm nghỉ. Ứng dụng giữ lại các lựa chọn này giữa những lần truy cập.

Tạo dòng thời gian hoạt ảnh

Mở Animations để sắp xếp các trạng thái ảnh đại diện vào một dòng thời gian. Thiết lập thời lượng hiển thị của từng trạng thái, xem trước chuỗi và lưu lại. Con trỏ phát lại theo dõi vị trí trên dòng thời gian thay vì chỉ theo tên trạng thái, cho phép cùng một trạng thái xuất hiện nhiều lần trong một montage.

Thay đổi ngôn ngữ và xem thông tin ghi công

Mở Settings để chọn tiếng Pháp, tiếng Anh hoặc tiếng Trung và xem thông tin ghi công của dự án.

Kiểm tra cả 14 trạng thái

Thêm #planche vào URL cục bộ để hiển thị cả 14 trạng thái cạnh nhau dưới dạng các khung hình cố định:

http://localhost:5190/#planche

Chế độ xem này hữu ích để nhanh chóng kiểm tra xem các thay đổi có làm thay đổi bất ngờ trạng thái nào hay không.

Để mở một trạng thái cụ thể với phát lại bị tạm dừng, hãy sử dụng các tham số hash etat và stop. Ví dụ:

http://localhost:5190/#etat=orbit&stop

Sử dụng component Vue BloubBot

Component BloubBot hỗ trợ cả phát lại có điều khiển và khung hình cố định chính xác. Một instance có điều khiển cơ bản có thể liên kết với block dòng thời gian hiện tại, trạng thái và trạng thái phát lại:

<BloubBot
  v-model:block="block"
  v-model:state="state"
  v-model:playing="playing"
/>

Model block là con trỏ phát lại. Sự khác biệt này quan trọng vì một dòng thời gian có thể chứa cùng một trạng thái nhiều lần. Chỉ mục block xác định chính xác vị trí trên dòng thời gian, trong khi state theo con trỏ đó dưới dạng đầu ra.

Kết xuất khung hình cố định

Truyền một trạng thái, kích thước và giá trị frozen-at để kết xuất một khung hình chính xác mà không khởi động vòng lặp hoạt ảnh:

<BloubBot state="orbit" :size="120" :frozen-at="1.2" />

Kết xuất cố định là cách Bloub tạo ảnh thu nhỏ và bảng trạng thái hoàn chỉnh. Tính năng này cũng hữu ích khi bạn cần bản xem trước ổn định hoặc một khung hình tại thời điểm chính xác.

Các đầu vào component khả dụng

Component cung cấp các prop sau:

size
shape
color
expression
paper
frozenAt
cycle
follow
gaze

Các model của component là block, state, playing và elapsed. Tham khảo BloubBot.vue để xem kiểu dữ liệu chính xác và thông tin chi tiết về component.

Xuất ảnh đại diện và dòng thời gian

Mọi nội dung hiển thị trên màn hình đều có thể được xuất. Với một ảnh đại diện, hãy chọn SVG, PNG hoặc GIF động. Với toàn bộ dòng thời gian, hãy chọn GIF hoặc MP4.

Việc xuất SVG và PNG không yêu cầu thư viện bổ sung. Bộ mã hóa video cần cho đầu ra động chỉ được tải vào lần đầu tiên có yêu cầu, vì vậy không cần tải trong quá trình chỉnh sửa thông thường. Xem thêm chi tiết triển khai trong tài liệu xuất.

Mẹo nâng cao

Sử dụng Pure Engine để tạo các khung hình xác định

Mã trong src/bot/ không phụ thuộc framework và không phụ thuộc đồng hồ. Hãy dùng engine.sample(t) khi cần hình ảnh tại một thời điểm chính xác. Vì kết quả phụ thuộc vào thời điểm được cung cấp thay vì đồng hồ đang chạy, các thao tác tạm dừng, tiếp tục, tua đến, kiểm thử và tạo hình thu nhỏ vẫn nhất quán.

Không đơn giản hóa các hằng số đã đo

Nhiều giá trị có thể trông tùy ý, nhưng chúng được đo từ cảnh quay tham chiếu được cắt ở tốc độ 10 khung hình mỗi giây. Các hình dạng bóng được trích xuất bằng phép dò tia dưới điểm ảnh, mắt được khớp dưới dạng capsule, còn màu sắc và độ rộng nét được lấy mẫu trực tiếp.

Việc làm tròn các hằng số thành những giá trị dễ dùng hơn có thể làm giảm độ tương đồng hình ảnh mà dự án được thiết kế để duy trì.

Hãy ghi nhớ những đặc điểm đã đo này khi chỉnh sửa hoạt ảnh:

Mắt nghiêng theo hướng dấu gạch chéo ngược, khoảng 26 độ so với phương thẳng đứng.
Cơ thể về cơ bản là một hình tròn hoàn hảo, với độ lệch bán kính dưới 0,7%, chứ không phải hình vuông bo tròn.
Các chuyển tiếp sử dụng hiệu ứng giảm tốc theo hàm mũ và cơ thể không vượt quá vị trí đích.
Trong hiệu ứng sao chổi, chấm tròn đứng yên trong khi vệt sáng quay quanh nó.
Ảnh đại diện ở trạng thái nghỉ không lơ lửng; cảm giác sống động đến từ chuyển động nhẹ của ánh nhìn và việc chớp mắt.

Hãy xem tài liệu đo lường trước khi thay đổi các cấu hình hoặc tạo lại profiles.ts.

Xem xét kiến trúc trước khi mở rộng engine

Tài liệu dự án giải thích về engine, phép biến dạng theo biên dạng bán kính và việc sử dụng hình dạng mắt làm các lỗ mặt nạ. Hãy đọc hướng dẫn kiến trúc trước khi thêm trạng thái hoặc thay đổi cách biến dạng. Giao diện, trình tự xuất hiện và lớp quốc tế hóa được mô tả riêng trong hướng dẫn giao diện, hướng dẫn giới thiệu và hướng dẫn quốc tế hóa.

Kiểm tra lịch sử phát hành trước khi gỡ lỗi

Nhật ký thay đổi có một mục cho mỗi bản phát hành. Hãy kiểm tra tài liệu này để xác định bản sao cục bộ của bạn đã bao gồm một bản sửa lỗi cụ thể hay chưa.

Kết luận

Bloub cung cấp một ảnh đại diện SVG được đo đạc cẩn thận, giao diện tùy chỉnh trực quan, trình chỉnh sửa dòng thời gian, khả năng lấy mẫu khung hình xác định và nhiều định dạng xuất mà không phụ thuộc vào thư viện hoạt ảnh. Hãy bắt đầu với bảng trạng thái tích hợp sẵn và các ví dụ về thành phần, chạy kiểm thử và bản dựng production sau mỗi thay đổi, đồng thời giữ nguyên các hằng số đã đo khi mở rộng hoạt ảnh.

Mã nguồn được cung cấp theo giấy phép MIT. Dự án không liên kết, không được chứng thực và không có quan hệ với x.ai. Giấy phép áp dụng cho mã nguồn của kho lưu trữ, không áp dụng cho thiết kế mà mã nguồn tái tạo.