Làm creative video cho e-commerce có một kiểu lặp đi lặp lại rất đặc trưng. Cùng model. Cùng sản phẩm. Nhiều scene. Nhiều clip ngắn. Tự dựng tay trên một UI Veo hoặc Imagen generic và bạn sẽ mất nửa thời gian để re-upload đúng cái character ref đó, gõ lại đúng cái prompt "young Korean woman in cream cropped tee" đó, rồi nhìn gallery kết quả mà không nhớ batch 4 variant này sinh ra từ source still nào.
FLOWBOARD vứt bỏ UI tuyến tính, thay bằng một canvas. Hai ref node feed vào một composed shot. Composed shot feed ba environment variant. Mỗi environment variant feed ra một batch 4-up video. Cả campaign nằm trên một board, mỗi node tái sử dụng được, mỗi edge là data dependency thật.
Từ hai ref ra ba video — một canvas, không copy-paste. Video phía trên là walkthrough chưa edit; phần còn lại của bài là đọc sâu xem board đang thực sự làm gì.
Vì sao canvas chứ không phải CLI
FLOW KIT, project anh em của FLOWBOARD, làm rất tốt một việc cụ thể: dựng một video YouTube tuyến tính từ story, end-to-end, trong một phiên CLI duy nhất. Cấu trúc đó hoạt động vì content YouTube về bản chất là một sequence — scene 1, rồi scene 2, rồi scene 3, theo thứ tự.
Creative e-commerce không phải sequence. Nó là một cây, đôi khi là DAG. Một model, một sản phẩm, nhiều environment, nhiều variant camera. Hình thái tự nhiên của workflow đó không phải script — nó là một graph, và lúc bạn cố diễn đạt nó bằng list các call CLI là lúc bạn bắt đầu đánh nhau với tool. FLOWBOARD chọn lane kia. Cùng cách bridge qua Chrome extension tới Google Flow, cùng tư thế local-only single-user, ergonomic khác hoàn toàn. Nếu output của bạn là một video per story, dùng FLOW KIT. Nếu output là hàng chục clip per campaign chia sẻ chung upstream asset, đây là tool đúng.
Graph CHÍNH LÀ workflow
Cách đọc một board FLOWBOARD rõ nhất là đi từ trái sang phải. Ref anchor identity ở bên trái. Composition chảy qua giữa. Video variant rơi ở bên phải. Screenshot bên dưới là export thật từ một board đang chạy — hai ref node (#op4v cho sản phẩm, #0p1u cho model) feed ba scene composition, mỗi composition feed một video node có grid 4-up i2v variant.
Đó là toàn bộ campaign trên một màn hình. Re-run một video không invalidate gì upstream. Thêm environment thứ tư là một image node mới nối vào cùng composition đó. Đổi sản phẩm thì swap visual-asset node và regenerate downstream — phần còn lại đứng yên. Canvas không phải metaphor cho workflow. Canvas chính là workflow.
Layer 0 — Ref là node bạn setup một lần
Board có hai loại node anchor và bạn tạo mỗi loại đúng một lần per campaign.
Character node giữ một nhân vật cần ổn định identity qua nhiều shot. Bạn có thể generate từ preset gender + nationality — phủ VN, JP, KR, CN, TH, US, FR — hoặc upload portrait của bạn. Synth cố tình hard-anchor kết quả về frontal, closed-mouth, neutral-expression studio headshot, vì Veo 3.1 i2v không thể giữ identity ổn định từ một source đang cười hở răng. Nhìn như constraint khắt khe, thực ra đó là sự khác biệt giữa một model "vẫn nhận ra là cùng một người" qua 12 clip và một model lặng lẽ biến thành ba người khác nhau giữa campaign.
Visual asset node giữ một sản phẩm / garment / object cần xuất hiện trong scene. Upload (file hoặc URL) hoặc generate từ prompt; nút Refine inline dùng edit_image của Flow để iterate mà không mất bản gốc. Mỗi ref node tự được gán một aiBrief — vision provider đã cấu hình mô tả ảnh đúng một lần và persist description đó lên node, để auto-prompt downstream có thể đi ngược lên đọc brief mà không cần chạy lại vision mỗi lần.
Layer 1 — Composition bằng cách nối node
Để build một composed image, drop một Image node và wire các ref upstream vào. Hết bước authoring.
Bấm Generate với prompt rỗng và /api/prompt/auto-batch sẽ đi ngược upstream, gom toàn bộ aiBrief tìm thấy, hỏi LLM CLI đã cấu hình tổng hợp ra N prompt pose-distinct trong một call duy nhất. Nên một gen 4 variant không sụp về bốn "hand-on-hip" — model xoay vòng qua pool 8 stance để mỗi variant có pose riêng. Toàn bộ mediaId upstream được nhét vào Flow dưới dạng input IMAGE_INPUT_TYPE_REFERENCE, nên nhân vật trên canvas đúng là nhân vật xuất hiện trong kết quả.
Không cần prompt-engineering để có take đầu dùng được. Bạn nối node, bấm nút, bốn frame fashion-editorial pose-distinct quay về. Muốn override thì gõ prompt riêng — nhưng path empty-prompt là cái bạn dùng hàng ngày.
Layer 2 — Variant theo môi trường
Đây là chỗ canvas chứng minh giá trị. Wire cùng một composition node vào ba Image node downstream, cho mỗi cái một scene context khác, bấm Generate. Cùng nhân vật, cùng sản phẩm, ba thế giới khác nhau.
Auto-prompt synth tự detect scene context từ brief của mỗi ảnh và switch motion vocabulary — studio shot lấy hand-on-hip, brush sleeve, head tilt, street shot lấy half-step forward, hair tuck, glance over shoulder, hand in pocket, smirk, beach shot lấy hair flutter in breeze, slow exhale, look toward horizon. Không có branching code phía sau. System prompt liệt kê các pool vocab, LLM pick pool tương ứng từ keyword trong brief, và variant về đúng kiểu môi trường.
Tái sử dụng node upstream là cái làm flow này nhanh. Không có gì về nhân vật hay sản phẩm phải nói lại. Brief tự chảy. Bạn chỉ mô tả cái mới — thế giới.
Layer 3 — Image → Video qua Veo 3.1 i2v
Layer thứ ba là chỗ photoshoot biến thành campaign. Drop một Video node, nối vào một trong các variant image, bấm Generate, chọn Camera = Static (locked-off, mặc định e-commerce — sản phẩm luôn được giữ trong frame) hoặc Dynamic (synth pick dolly hoặc pan tinh tế theo scene). Nếu image upstream có bốn variant, tick cả bốn và dispatcher batch một i2v op per variant trong một call Flow duy nhất — bốn source still thành bốn video khác nhau trong một cú click.
Motion synth dùng time-coded beat — 0–3s, 3–6s, 6–8s — nên model diễn một chuỗi 2–3 pose-shift kiểu editorial trong 8 giây, thay vì đứng như tượng đông cứng hoặc bung ra một nụ cười hở răng làm trôi identity. Clip studio làm half-step thành một cú glance và hair-tuck. Clip mùa thu làm pivot vào pocket rồi camera smirk. Clip Seoul làm half-step thành over-shoulder glance rồi tay vào pocket. Mỗi clip là một cú click duy nhất từ cùng image upstream.
Architecture trong một sơ đồ
FLOWBOARD là ba process trên một máy và một SQLite local persistent. Không cloud. Không multi-tenant. Không hoá đơn.
┌──────────────────────┐ ┌────────────────────┐ ┌──────────────────────┐
│ Chrome MV3 ext │◄───┤ FastAPI agent ├───►│ SQLite (storage/) │
│ - content script │ WS │ 127.0.0.1:8101 │ │ Board, Node, Edge, │
│ - injected MAIN │ ws │ + worker queue │ │ Request, Asset, │
│ - CDN URL allow │9223│ + WS server :9223 │ │ Plan, ChatMessage │
│ - Captcha bridge │ │ + LLM CLI bridge │ │ │
└──────────────────────┘ └─────────┬──────────┘ └──────────────────────┘
│
▼
┌────────────────────┐
│ React + Vite │
│ ReactFlow canvas │
│ Zustand store │
│ 127.0.0.1:5173 │
└────────────────────┘
Frontend: Vite + React 18 + ReactFlow 12 + Zustand 5 strict TypeScript. Render infinite canvas, dialog, sidebar; không bao giờ gọi trực tiếp Google Flow. Agent: FastAPI + SQLModel + SQLite ở 127.0.0.1:8101. Sở hữu state của board, chạy worker queue in-process proxy mọi request generation qua extension, shell ra LLM CLI bạn đã cấu hình (Claude Code, Gemini, hoặc Codex) cho vision, auto-prompt và planner synthesis. Extension sống trên labs.google/fx/tools/flow, capture reCAPTCHA token, route API call qua localhost WebSocket port 9223. Storage là SQLite local cộng folder storage/media/ cache image / video bytes lazy-fetch từ signed CDN URL của Flow, re-serve lại để vượt qua TTL 1 tiếng của signed URL.
Test suite agent ship ở 333 pass. Frontend build sạch dưới strict tsc.
Setup
Bạn cần Python 3.11, Node 20, Chrome, và một LLM CLI trên PATH — Claude Code là default khuyên dùng. Bạn cũng cần plan Google Flow Pro hoặc Ultra. Tài khoản free và trial không drive được Veo 3.1 i2v, nên FLOWBOARD không hoạt động trên đó.
git clone https://github.com/crisng95/flowboard.git
cd flowboard
make install
make agent # FastAPI port :8101
make frontend # Vite port :5173
Trong Chrome, mở chrome://extensions, bật Developer mode, click Load unpacked, chọn folder extension/, rồi vào labs.google/fx/tools/flow. Icon extension chuyển màu khi capture được token mới. Mở http://localhost:5173, drop Character node, drop Visual asset, drop Image, wire lại, bấm Generate. Walkthrough đầu bài là khoảng 15 phút click trên một board mới.
Nếu bạn muốn drive auto-prompt qua Gemini hoặc Codex, switch ở chip 🤖 Provider góc trên cùng bên phải. Mỗi feature có nút test riêng chạy ping nhỏ và gate nút Apply changes tới khi cả ba xanh — bạn không thể lỡ tay làm vỡ vision khi đang switch auto-prompt.
Thử FLOWBOARD
Repository ở github.com/crisng95/flowboard. MIT license, local-only, single-user — data và generation của bạn nằm trên laptop của bạn. Nếu bạn muốn project anh em theo hướng tuyến tính, story-driven cho kênh YouTube và video nhiều scene, đọc bài đi kèm về FLOW KIT — cùng Chrome-extension bridge, cùng cách tiếp cận reference consistency, surface khác hẳn.
Cả hai project nằm dưới ISEMI open-source — qua homepage để xem chúng tôi đang ship gì khác. Nếu bạn dựng được một campaign sản phẩm hay một storyboard bằng FLOWBOARD, thả vào nhóm cộng đồng Facebook hoặc mở issue trên repo. Vòng cải tiến tiếp theo chạy theo những gì campaign thật vấp phải trong production.