Tạo phim thủ tục không cần tài sản bằng JavaScript, Canvas và Web Audio

procedural-film hoạt động như thế nào

procedural-film là một kỹ năng tác nhân dùng để biến một chủ đề thành một phim dọc dài khoảng 30 giây. Thay vì ghép các tệp hình ảnh, video hoặc âm thanh, mỗi phim sẽ vẽ hình ảnh bằng JavaScript thuần trên canvas HTML và tổng hợp nhạc nền bằng Web Audio API.

Dự án hoàn chỉnh có thể tạo trình phát HTML độc lập và các bản xuất MP4. Vì hình ảnh và âm thanh được tạo bằng mã, phim không cần bất kỳ tài nguyên media nào.

Kho mã bao gồm một sản phẩm tham chiếu hoàn chỉnh tại examples/butterfly-life. Sản phẩm mô tả vòng đời của bướm vua trong 17 cảnh, dài 32 giây ở 120 bpm, sử dụng khung hình dọc 1080x1920 với tốc độ 24 khung hình/giây.

Tính năng chính

• Hình ảnh tạo theo thủ tục: Mọi pixel đều được vẽ bằng JavaScript thuần và Canvas.
• Âm thanh tổng hợp: Mọi âm thanh đều được tạo thông qua Web Audio.
• Phân phối không cần tài nguyên: Phim không phụ thuộc vào các tệp media riêng biệt.
• Đầu ra dọc: Quy trình tham chiếu hướng đến định dạng 1080x1920 thân thiện với điện thoại.
• Nhiều sản phẩm đầu ra: Quy trình tạo trình phát HTML độc lập và các bản xuất MP4.
• Sản xuất dựa trên tác nhân: Các tác nhân con chạy song song có thể viết từng cảnh, trong khi các đợt đánh giá kiểm tra các cảnh quay.
• Kiểm định tích hợp: Ví dụ bao gồm cổng chất lượng gồm sáu bước kiểm tra trước khi kết xuất.

Tìm hiểu cấu trúc kho mã

Kho mã được chia thành kỹ năng có thể tái sử dụng và một ví dụ hoàn chỉnh:

• skills/procedural-film/ chứa kỹ năng tác nhân.
• skills/procedural-film/SKILL.md định nghĩa toàn bộ quy trình sản xuất.
• skills/procedural-film/foundation/ chứa công cụ và engine được sao chép vào mỗi phim mới.
• skills/procedural-film/templates/ chứa bốn mẫu tài liệu lập kế hoạch.
• skills/procedural-film/reference/ chứa chỉ mục loại cảnh, hướng dẫn về cảnh và âm nhạc, cùng các khung hình tham chiếu.
• examples/butterfly-life/ chứa tài liệu lập kế hoạch, mã nguồn, công cụ, trình phát HTML và MP4 điện thoại của phim về bướm.

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

Cài đặt các phần mềm sau trước khi sử dụng kỹ năng:

• Node.js 20 trở lên
• ffmpeg, có trong PATH hệ thống
• Chromium cho Playwright
• Một tác nhân hỗ trợ kỹ năng và các tác nhân con chạy song song, chẳng hạn Claude Code

Xác nhận Node.js và ffmpeg khả dụng:

node --version
ffmpeg -version

Cài đặt kỹ năng procedural-film

1. Sao chép kho mã

git clone https://github.com/kuhnhomeuk-cell/procedural-film.git

2. Liên kết kỹ năng với tác nhân

Từ thư mục chứa kho mã đã sao chép, tạo một liên kết tượng trưng trong thư mục kỹ năng của Claude Code:

ln -s "$PWD/procedural-film/skills/procedural-film" ~/.claude/skills/procedural-film

Liên kết tượng trưng hữu ích vì nó giữ ví dụ hoàn chỉnh bên cạnh kỹ năng tại examples/butterfly-life/. Nếu sử dụng một tác nhân tương thích khác, hãy liên kết cùng thư mục kỹ năng vào thư mục kỹ năng của tác nhân đó.

3. Cài đặt các phần phụ thuộc công cụ của ví dụ

npm install --prefix examples/butterfly-life/tools

4. Cài đặt Chromium cho Playwright

npx --prefix examples/butterfly-life/tools playwright install chromium

Tạo phim từ một chủ đề

Sau khi liên kết kỹ năng, hãy yêu cầu tác nhân tạo một phim thủ tục về một chủ đề. Ví dụ:

Hãy tạo một phim thủ tục về vòng đời của ong mật.

Tác nhân thực hiện quy trình trong skills/procedural-film/SKILL.md. Quá trình sản xuất có quy mô đáng kể: mỗi cảnh có một tác nhân viết tệp cảnh, có thể dài hơn 1.000 dòng, sau đó các đợt đánh giá sẽ kiểm tra mọi cảnh.

Hãy dự kiến một phiên tác nhân kéo dài và tiêu tốn nhiều tài nguyên. README lưu ý rằng một bộ phim hoàn chỉnh có thể sử dụng phần lớn hạn mức sử dụng tác nhân.

Tạo lại phim tham chiếu về bướm

Tạo lại ví dụ đi kèm là cách dễ nhất để xác minh Node.js, ffmpeg, Playwright và Chromium đã được cấu hình chính xác.

1. Chạy cổng kiểm định

node examples/butterfly-life/tools/check.cjs

Tập lệnh check.cjs chạy cổng kiểm tra gồm sáu bước của dự án. Kiểm định thành công sẽ kết thúc với mã trạng thái 0.

2. Kết xuất MP4

node examples/butterfly-life/tools/render.cjs

Công cụ kết xuất ghi video kết quả vào:

examples/butterfly-life/exports/butterfly-life.mp4

3. Tạo lại trình phát HTML độc lập

node examples/butterfly-life/tools/build.cjs

Lệnh này tạo lại trình phát HTML. Trình phát tương tác hiện có nằm tại examples/butterfly-life/dist/butterfly-life.html và có thể được tải xuống hoặc mở trong trình duyệt.

Quy trình phát triển thực tế

1. Bắt đầu với một chủ đề được xác định rõ ràng và yêu cầu agent thực hiện một bộ phim quy trình về chủ đề đó.
2. Cho phép agent và các subagent chạy song song tạo tài liệu lập kế hoạch và các tệp cảnh.
3. Để các đợt đánh giá của critic xem xét các cảnh quay thay vì dừng lại sau lần tạo ban đầu.
4. Chạy các bước kiểm tra xác thực của dự án trước khi kết xuất.
5. Khắc phục mọi vấn đề được báo cáo, sau đó chạy lại các bước kiểm tra cho đến khi chúng kết thúc thành công.
6. Kết xuất MP4 và xây dựng lại trình phát HTML độc lập.
7. Mở trình phát trong trình duyệt và xem lại bộ phim dọc hoàn chỉnh.

Mẹo nâng cao

Sử dụng bộ phim tham chiếu làm mục tiêu sản xuất

Nghiên cứu examples/butterfly-life để tìm hiểu bố cục dự án và chất lượng đầu ra mong đợi. Các tài liệu lập kế hoạch, mã nguồn, công cụ, trình phát đã kết xuất và video điện thoại đã xuất của dự án cho thấy skill này được thiết kế để tạo ra điều gì.

Đọc các tài liệu tham khảo hỗ trợ trước khi thay đổi phong cách

Thư mục reference/ bao gồm chỉ mục loại cảnh quay, hướng dẫn cảnh, hướng dẫn âm nhạc và các khung hình tham chiếu hình ảnh. Những tài liệu này cung cấp bối cảnh cho các quyết định do quy trình agent đưa ra.

Xác thực trước mỗi lần kết xuất cuối

Chạy check.cjs trước render.cjs. Hãy coi mã thoát thành công từ cổng kiểm tra gồm sáu bước là điều kiện tiên quyết để tạo MP4 cuối cùng.

Dự trù thời gian và mức sử dụng agent

Quy trình ưu tiên việc tạo cảnh chi tiết và đánh giá lặp lại hơn là cho ra kết quả nhanh. Vì các tệp cảnh riêng lẻ có thể chứa hơn 1.000 dòng, đừng mặc định rằng quy trình sẽ hoàn tất như một tác vụ tạo ngắn chỉ với một prompt.

Giữ liên kết đến skill thay vì sao chép

Liên kết tượng trưng giữ cho skill được kết nối với repository đã clone và duy trì quyền truy cập thuận tiện vào ví dụ về bướm. Cách này cũng tránh tạo một bản cài đặt sao chép riêng bị tách rời khỏi bố cục repository.

Kết luận

procedural-film cung cấp một cách thức do agent điều khiển để tạo các bộ phim dọc hoàn toàn bằng thao tác vẽ JavaScript và âm thanh tổng hợp. Sau khi liên kết skill và cài đặt các công cụ cần thiết, bạn có thể yêu cầu tạo phim theo chủ đề, xác thực các cảnh đã tạo, xuất MP4 và xây dựng trình phát HTML độc lập mà không cần đóng gói các nội dung đa phương tiện thông thường.

Dự án được cung cấp theo Giấy phép MIT. Cách tiếp cận về hình ảnh và biên tập được mô phỏng theo The life of a fruit fly của Kevin Ngo, với các chi tiết được ghi lại trong examples/butterfly-life/docs/reference-analysis.md.