Gitframes - Bộ công cụ dựng video cho AI agent

Gitframes: Khi AI Agent tự dựng video chuyên nghiệp mà không cần phần mềm đồ họa

Gitframes là một gói npm mã nguồn mở cho phép các AI agent viết mã TypeScript để tạo ra video chất lượng chuyên nghiệp — từ hiệu ứng hình ảnh (VFX) cấp Photoshop, hoạt hình kiểu After Effects, cho đến cảnh 3D như Blender — tất cả trong một môi trường lập trình duy nhất.

Điểm đáng chú ý: công cụ này chạy trực tiếp trên GPU thông qua WebGPU / Dawn / Metal / Vulkan, không cần trình duyệt headless, không cần DOM reflow, và không cần pipeline chụp ảnh màn hình. Đây là bước tiến đáng kể cho quy trình sản xuất video tự động hóa.

Vì sao Gitframes lại khác biệt?

Các giải pháp tạo video tự động hiện nay thường bị giới hạn bởi kiến trúc của trình duyệt web đa dụng: chi phí tiến trình cao, bố cục DOM không ổn định, và tốc độ chụp ảnh chậm chạp. Gitframes tiếp cận video như một bài toán kỹ thuật phần mềm thuần túy.

Trụ cột	Ý nghĩa thực tế
Không cần trình duyệt headless	Không Puppeteer, không Chromium IPC. Gitframes giao tiếp trực tiếp với GPU qua Dawn/WebGPU và mã hóa phần cứng bằng @napi-rs/webcodecs
Đồng hồ chính xác theo khung hình	Không bộ đếm động, không trôi khung, không mất khung. Hỗ trợ BeatGrid âm thanh chính xác tuyệt đối
Chữ vector phân giải vô hạn	Thuật toán Slug đánh giá đường viền glyph theo từng pixel trong WGSL — sắc nét từ 10 px đến 10.000 px
VFX cấp Photoshop	Hơn 50 shader GPU mô-đun: Curves, Levels, Selective Color, 3D LUT, Halftone, Film Grain, Mesh Warp
Đồ họa 3D hợp nhất	Lồng ghép cây flex/box 2D vào mặt phẳng 3D, hỗ trợ OBJ, FBX, glTF/GLB, STL, PLY, VOX, 3DS, OFF
Âm thanh DSP tích hợp	Nhạc nền đa track, hiệu ứng âm thanh thủ tục (whoosh, impact, riser) và tín hiệu phản ứng
Thị giác máy on-device	Theo dõi đối tượng, phân đoạn instance, tư thế đa người từ mô hình ONNX Apache-2.0
Sẵn sàng cho cloud & CI/CD	Chỉ ~200–400 MB RAM mỗi worker (so với 2–4 GB của Chromium)

Trạng thái beta và giấy phép Apache 2.0

⚠️ Lưu ý beta: Gitframes đang trong quá trình phát triển tích cực. API có thể thay đổi giữa các phiên bản và một số tính năng có thể chưa hoàn thiện hoặc chưa ổn định.

So sánh kiến trúc: Gitframes vs Remotion vs Hyperframes

Điểm khác biệt cốt lõi nằm ở hiệu năng và kiến trúc:

• Gitframes: 60–120+ FPS nhờ render trực tiếp trên framebuffer phần cứng, tiêu thụ ~200–400 MB RAM mỗi lần render
• Remotion: 5–20 FPS do phải chạy Chromium headless, DOM reflow và IPC, tốn 1,5–4 GB RAM mỗi worker
• Hyperframes: 20–40 FPS với Canvas2D/WebGL, tốn ~500 MB–1 GB RAM

Về xử lý văn bản, Gitframes dùng Slug GPU — đánh giá đường cong Bézier giải tích trực tiếp trong WGSL, trong khi Remotion dựa vào font DOM của trình duyệt (dễ bị mờ khi biến đổi 3D) và Hyperframes dùng chữ rasterize trên CPU.

Những tính năng nổi bật

1. Chữ vector GPU và tương thích với After Effects

Thuật toán Slug cho phép đánh giá glyph chính xác theo từng pixel mà không cần texture atlas. Gitframes còn hỗ trợ animator tương đương After Effects: bộ chọn dải (square, ramp_up, ramp_down, triangle, smooth), đường cong easeHigh/easeLow, và xáo trộn ký tự có seed.

Đặc biệt, công cụ mô phỏng nhịp gõ phím của con người với độ trễ dấu câu có trọng số (dấu phẩy 3×, cuối câu 5,5×, xuống dòng 7×) — rất hữu ích cho các video dạng gõ chữ.

2. VFX 2D cấp Photoshop với hơn 50 shader

Bộ shader chuyên nghiệp bao gồm:

• Chỉnh màu tông: Curves, Levels, Shadows/Highlights, Selective Color (tách gam CMYK), 3D Cube LUT
• Tạo kiểu và hạt phim: Film Grain (nhũ tương Gaussian), Halftone (mono/RGB/CMYK), Gradient Map, High Pass
• Quang học và ống kính: Bilateral Gaussian Blur, Unsharp Mask, Vignette, PBR Glassmorphism có tán sắc
• Biến dạng và uốn cong: Displacement Maps, Liquify, Mesh Warp, Corner Pin homography

3. Cảnh 3D hợp nhất với camera và bóng đổ

Gitframes cung cấp camera LookAt và Turntable được hiệu chuẩn để z = 0 khớp 1:1 với tọa độ pixel canvas 2D. Hệ thống hỗ trợ:

• Bộ phân tích mô hình không phụ thuộc (OBJ, FBX, glTF/GLB, STL, PLY, VOX, 3DS, OFF)
• Hoạt hình xương với Linear Blend Skinning 128 xương
• Bóng đổ tiếp xúc PCSS/Poisson, SSAO và độ sâu trường ảnh quang học
• Nhòe chuyển động màn trập 180° với vector vận tốc từng đỉnh

4. Âm thanh thủ tục và tín hiệu phản ứng

Các lớp nhạc nền với điều khiển vòng đời chính xác theo khung hình. Hiệu ứng âm thanh thủ tục gồm whoosh, impact, riser, downshifter, glitch được đặt trên lưới nhịp/phách. Đặc biệt, tín hiệu phản ứng cho phép điều khiển biến đổi, tỉ lệ, viền hoặc uniform shader từ tín hiệu nhịp điệu.

5. Biểu đồ động

Layer.chart xây dựng biểu đồ đường, vùng, cột (nhóm hoặc xếp chồng), phân tán, nến, tròn và bánh donut. Thư viện d3 tính toán tỉ lệ và hình học, còn mỗi cột, đường, lát cắt đều là node box, path hoặc text thông thường — nghĩa là chúng có thể được chèn vào 3D như bất kỳ lớp nào khác.

6. Thị giác máy và theo dõi on-device

Module @gitframes/vision chạy các mô hình ONNX qua onnxruntime-node (CPU) hoặc onnxruntime-web (WebGPU):

• Phát hiện: RTMDet-Ins t/s/m — hộp COCO-80 kèm điểm số
• Phân đoạn: mặt nạ mềm theo từng instance, căn khung hình
• Tư thế: RTMO t/s/m — 17 điểm khớp COCO mỗi người
• Tách nền: MediaPipe Selfie Segmenter cho alpha người so với nền

Mọi thực thể được theo dõi đều được phơi bày dưới dạng tín hiệu phản ứng để điều khiển lớp và uniform shader — từ vị trí, vận tốc, đến tư thế và điểm neo.

7. Kiểm thử headless và FrameGrid

Khẳng định bất biến lấy mẫu pixel với skia-canvas trong Vitest để kiểm tra toán học shader, độ phủ font và sai số bình phương trung bình theo thời gian. Hàm comp.renderFrameGrid() xuất ra bảng tiếp xúc các khung hình liên tiếp để đánh giá easing, chữ động và chuyển cảnh tức thì.

8. Xem trước trực tiếp trong trình duyệt

startPreview({ entry, export }) phục vụ trình phát WebGPU localhost, nạp chính module của tác phẩm và render từng khung hình trực tiếp trong trình duyệt. Không có gì được stream — máy chủ chỉ cung cấp bundle, tài nguyên dự án và nhạc nền đã trộn.

Cài đặt nhanh cho AI agent

Gitframes được thiết kế ưu tiên agent. Cài đặt skill chỉ với một dòng lệnh:

Với Claude Code:

/plugin install gitframes

Với các agent khác (Codex, Cursor, Hermes, Gemini CLI, Copilot, v.v.):

npx skills add gatewai-dev/gitframes

Gói plugin hoàn toàn chỉ chứa hướng dẫn — không có executable, MCP server, hook hay trình khởi chạy gói nào, và không gửi dữ liệu đi đâu cả.

Kiến trúc monorepo

Dự án được quản lý bằng pnpm workspaces và turbo, với cấu trúc rõ ràng:

• packages/gitframes — SDK hợp nhất (Composition, Layer, LayerAnimation, Signal, effects)
• packages/vision — engine thị giác ONNX: phát hiện, phân đoạn, tư thế, tách nền, theo dõi
• packages/webgpu-renderers — shader WGSL, engine chữ Slug, renderer 3D
• packages/renderer — renderer Node.js headless qua Dawn, WebCodecs, skia-canvas
• nodes/ — hơn 58 node chuyên biệt (VFX, âm thanh, bố cục, thị giác)
• apps/renderer-service — microservice render HTTP/gRPC cho production

Triết lý kỹ thuật

Gitframes đưa ra một số nguyên tắc thiết kế đáng chú ý:

• Token thiết kế và hợp đồng chủ đề — định nghĩa THEME tập trung cho màu sắc, kiểu chữ, bán kính và khoảng cách. Không bao giờ hardcode mã hex hay margin tùy tiện.
• Bất biến alpha nhân trước WebGPU — shader xuất alpha nhân trước phải dùng srcFactor: "one" trong trạng thái blend. Dùng src-alpha sẽ khiến độ mờ tối đi thành màu xám đục.
• Cắt cảnh mang theo vật thể — mang một phần tử hình ảnh (huy hiệu, thẻ, con trỏ) xuyên qua ranh giới cảnh với vận tốc và vị trí liên tục để tránh cắt cảnh đột ngột.
• Từ vựng easing vật lý — back.out(1.4–1.7) cho lối vào snap-overshoot, spring/expo.out cho chuyển động giảm tốc, power2.in cho lối ra.

Đóng gói Docker cho render production

Dự án cung cấp Dockerfile.renderer được tối ưu để triển khai dịch vụ render vào các cụm GPU đám mây:

docker build -t gitframes-renderer -f Dockerfile.renderer .

Image slim chỉ khoảng ~500 MB với driver GPU/Vulkan gốc — nhẹ hơn nhiều so với ~2–3 GB khi đóng gói Chromium kèm font và X11/Mesa.

Cộng đồng và giấy phép

Gitframes là phần mềm mã nguồn mở theo giấy phép Apache-2.0. Các mô hình thị giác tải theo yêu cầu — RTMDet-Ins và RTMO (OpenMMLab) và Selfie Segmenter (Google) — cũng đều theo Apache-2.0.

Cộng đồng có thể tham gia Discord để đặt câu hỏi, chia sẻ render và theo dõi phát triển, hoặc xem các phim làm bằng gitframes trên kênh YouTube @gatewai.studio.

Cộng đồng Discord của Gitframes

Ý nghĩa với cộng đồng công nghệ Việt Nam

Với các đội ngũ phát triển tại Việt Nam đang làm việc trong lĩnh vực truyền thông đa phương tiện, edtech hay quảng cáo số, Gitframes mở ra một hướng tiếp cận mới: thay vì thuê hoặc mua giấy phép bộ Adobe Creative Suite đắt đỏ, các nhóm có thể viết mã để tạo nội dung video — đặc biệt phù hợp khi kết hợp với các AI agent hiện đại để tự động hóa quy trình sản xuất.

Việc công cụ nhẹ (~200–400 MB RAM) cũng đồng nghĩa với chi phí hạ tầng thấp hơn nhiều khi triển khai trên các cụm GPU như AWS G4/G5, Modal, RunPod hay Kubernetes.

Dù còn ở giai đoạn beta, Gitframes hứa hẹn sẽ trở thành nền tảng đáng chú ý cho làn sóng sản xuất video bằng code — nơi AI agent không chỉ viết nội dung mà còn "đạo diễn" hình ảnh và âm thanh.