Nâng cấp pipeline beup-clip lên chuẩn CNBC: Envato-first assets + 5 cải tiến sản xuất
Pipeline tạo short-form knowledge clip (beup-clip) được nâng cấp toàn diện. Thêm Envato Elements làm nguồn ưu tiên #1 cho mọi loại asset (video, LUT, nhạc). Bổ sung 5 tính năng sản xuất: color grading LUT, CNBC lower-thirds citation, video b-roll thật, stat_card hero số liệu, và hook cinematic mandate. Kết quả: mỗi clip có b-roll di chuyển thay ảnh tĩnh, màu ấm chuyên nghiệp, số liệu dramatic, citation đúng chuẩn tin tức.
Trạng tháiDonePipelinebeup-clipScripts mới3 filesNgày2026-06-15
ReasoningLập luận
6-layer thinking chainChuỗi tư duy 6 tầng
L1
Raw requestYêu cầu gốc
"I want you to make the preference to search for high quality video on Envato Elements API... if you cannot find it, go to other resources as backup. Everything in one specific folder, then you continue. No editor handoff. Do everything in a pipeline."
L2
Reframe — what was really neededDiễn giải lại — nhu cầu thật
Người dùng không chỉ muốn đổi nguồn video — họ muốn pipeline tự động hoàn toàn không editor handoff, Envato là nguồn ưu tiên vì chất lượng. Câu hỏi thực: làm sao integrate Envato khi MCP chỉ trả metadata (không có download API) mà vẫn giữ pipeline tự động phần lớn?
L3
ConstraintsRàng buộc
['Envato Elements MCP (mcp__envato__search_items) chỉ trả metadata — không có endpoint download, không tải file tự động được', 'Download subscription content auto = vi phạm Envato ToS', 'beup-clip-render.js dùng Chromium/Playwright — không load được file:// URL cho video, cần HTTP server', 'LUT cho Style D (nền trắng sáng) không được push teal vào shadows vì #008080 là brand color — sẽ đánh nhau', 'b-roll: renderer đang dùng base64 data-URI cho ảnh — không áp dụng được cho video (file quá lớn)']
L4
Options weighedCác lựa chọn cân nhắc
['Option A — Auto-download qua Playwright session cookie: vi phạm Envato ToS, bị chặn', 'Option B — Human-in-the-loop pause: Claude present URLs → user click → files vào cache → pipeline tiếp tục. 1 bước thủ công, 100% licensed', 'Option C — Pexels/Pixabay only: free nhưng generic, mất giá trị subscription', 'Option D — Veo AI generation per shot: $2-5/shot, last resort only']
L5
Principle invokedNguyên tắc áp dụng
Automation đến ranh giới ToS — không qua. Human pause cost thấp hơn nhiều so với legal risk.
L6
Pick + recognition signalLựa chọn + dấu hiệu nhận biết
Chọn Option B: human-in-the-loop cho Envato download, 100% tự động cho mọi bước còn lại (extract/classify/render/mux). Rejected: auto-download. Recognition signal: subscription asset với browser-only auth → thiết kế human pause TRƯỚC automation, không cố bypass.
PipelineQuy trình
5 cải tiến theo thứ tự triển khai
1
#1 Color Grading LUT
Tạo beup-warm.cube (17³=4913 entries). Warm golden highlights, neutral shadows — không push teal (tránh đánh nhau với brand #008080). Wire --lut vào beup-clip-mux.py, apply mặc định mỗi lần mux.
2
#2 CNBC Lower-Thirds Citation
Thêm source field vào beatsheet schema. CSS: dark pill + teal left border + citeIn animation (0.35s tại 1.4s sau scene entry, fade-out tại 4.9s). Mandatory khi cite external data.
3
#3 Video B-roll (thay ảnh tĩnh)
Script mới beup-clip-broll.py: video_query field → Envato cache first → Pexels Video API fallback → broll-map.json. Renderer đã có
4
#4 stat_card: CNBC Hero Number
Kind mới trong renderer. Full-frame: kicker + 220px gold count-up + teal rule animate-in + label + source. Khác numberBlock() inline — số IS the scene, không phải component trong scene.
5
#5 Hook Cinematic Mandate
video_query từ optional thành MANDATORY cho hook scene. Hook-playbook: aerial/wide/action query examples. Hook = video background + text + optional count-up. CNBC không bao giờ open blank card.
DecisionsQuyết định
Layered decision cardsCác quyết định theo tầng
Envato download: tự động hoàn toàn hay human pause?
L1"I have Envato subscription already, no editor handoff. Do everything in a pipeline."
L2Người dùng muốn pipeline 100% tự động — nhưng Envato MCP chỉ trả metadata, không có download endpoint. 'No editor handoff' nghĩa là không có editor mở After Effects, không phải không có click chuột nào.
L3Envato MCP: search only, không có download URL. Browser download cần auth session. Auto-download = vi phạm ToS.
L41. Auto-download bằng Playwright session cookie → vi phạm ToS. 2. Human pause (URLs → user click → cache) → 1 bước thủ công. 3. Pexels-only → mất giá trị subscription. 4. Veo AI → $2-5/shot.
L5Automation đến ranh giới ToS — không qua.
L6Human-in-the-loop: Claude present URL checklist → user download → envato-asset-search.py --extract tự classify + manifest. Recognition: subscription content browser-auth = thiết kế human pause trước automation.
Video b-roll: HTML
L1Cần đưa video MP4 vào scene background thay ảnh JPEG tĩnh.
L2Hai architecture với trade-off khác nhau: render HTML với live video, hay render text-only HTML rồi composite video bằng ffmpeg sau?
L3Playwright không load file:// URL cho video. base64 MP4 không feasible. Renderer đã có startFileServer() +
L4Option A (HTML
L5Reuse before build — không viết code mới khi code cũ làm đúng việc cần.
L6Option A: không cần sửa renderer, chỉ cần beup-clip-broll.py + --videos-map flag. Rejected: Option B tăng complexity không cần. Recognition: thấy code sẵn làm đúng việc mình cần → dùng ngay.
stat_card: kind mới hay extend numberBlock() inline?
L1Port stat_card từ TWV longform Remotion sang beup-clip short-form renderer.
L2Đã có numberBlock() trong renderer — nhưng đó là component nhỏ trong scene có nhiều elements. stat_card cần full-frame, số là centerpiece.
L3numberBlock(): supporting element của scene (text hero vẫn là .lead). stat_card: KHÔNG có text hero, số IS the scene. Layout và hierarchy hoàn toàn khác.
L41. Extend numberBlock() với size lớn — 1 component làm 2 việc khác nhau. 2. kind='stat_card' short-circuit trong sceneInner() — clean separation. 3. Template file riêng — overkill.
L5Single responsibility: một component làm một việc duy nhất.
L6kind='stat_card' short-circuits sceneInner() → statCardHtml(). CSS .scene--stat_card từ dynamic class generation tự apply. Recognition: layout fundamentally khác → new kind, không extend.
LUT: teal-orange cinematic hay warm golden?
L1Tạo LUT phù hợp cho Style D (nền trắng sáng, brand teal #008080).
L2Teal-orange cinematic LUT (Rec.709 style) là standard nhưng push teal vào shadows. BEUP dùng #008080 teal làm brand color cho kicker, charts, accents — sẽ conflict.
L3Brand color #008080 xuất hiện trong mọi scene trên kicker + chart lines. Style D bright bg không cần teal shadows để tạo depth. LUT phải enhance mà không override brand colors.
L41. Teal-orange standard: depth tốt nhưng muddy brand elements. 2. Warm golden only: safe với brand, professional look. 3. No LUT: bỏ qua cơ hội nâng chất lượng.
L5Brand color integrity: LUT không được can thiệp vào màu brand đang active trong scene.
L6Warm golden: +0.040 R highlights, -0.025 B highlights, shadows neutral. Không push teal ở vùng tối nào. Recognition: khi brand color là accent in-scene → LUT phải designed around it, không default teal-orange.
FilesTệp
Artifact mapBản đồ tệp tạo ra
| PathĐường dẫn | WhatLà gì | Who reads itAi dùng |
|---|---|---|
~/beup-workspace/scripts/beup-clip-broll.py | Tải video b-roll cho body scenes có video_query | Envato cache (token overlap ≥0.5) → Pexels Video API → broll-map.json |
~/beup-workspace/scripts/beup-make-lut.py | Generate beup-warm.cube (17³ LUT) | Warm golden highlights, neutral shadows — safe với brand #008080 |
~/Projects/vietconnect/scripts/twv-automation/envato-asset-search.py | Post-download asset manager | --extract · --detect · --report · viết envato-manifest-{slug}.json |
~/.claude/skills/twv-video-assets/SKILL.md | Skill mới: Envato-first visual asset sourcing | EN queries, 0-100 scoring, selection table, download checklist |
~/.claude/skills/beup-clip/SKILL.md | Pipeline + orchestration cập nhật | Broll step ④b, --videos-map trong render, LUT mandatory |
~/.claude/skills/beup-clip/references/beatsheet-schema.md | Schema documentation cập nhật | video_query field, stat_card kind, field notes |
~/.claude/skills/beup-clip/references/distillation-method.md | Authoring rules cập nhật | stat_card khi nào dùng, video_query mandatory cho hook, demo_recording |
~/.claude/skills/beup-clip/references/hook-playbook.md | CNBC cinematic opening mandate | video_query MANDATORY, aerial/wide/action examples, example hook scene |
~/beup-workspace/scripts/beup-clip-render.js | Renderer: stat_card kind + video b-roll | statCardHtml(), CSS stat-big/stat-rule/stat-num, --videos-map/--videos-dir |
~/Projects/vietconnect/scripts/twv-automation/longform/fetch-broll.py | TWV longform b-roll: Envato cache check | --envato-cache-dir + find_in_envato_cache() trước Pexels/Pixabay |
Pending manual actions — required before fully liveViệc cần làm thủ công — trước khi hoàn tất
- Chạy python3 ~/beup-workspace/scripts/beup-make-lut.py để generate assets/luts/beup-warm.cube (nếu chưa có)
- Thêm video_query vào hook scene và body scenes trong beatsheet để kích hoạt b-roll pipeline
- Khi /beup-video-assets hiện URL checklist: click → download vào ~/beup-workspace/assets/envato-cache/ → nói 'done'
- PEXELS_API_KEY phải có trong ~/beup-workspace/.env để beup-clip-broll.py dùng Pexels fallback
Self-testTự kiểm tra
Kiểm tra hiểu bài
Tại sao Envato download phải human-in-the-loop thay vì pipeline tự động hoàn toàn?
Tại sao video b-roll dùng HTML
Giải thích bằng lời của bạn: khi nào dùng kind='stat_card' thay vì dùng numberBlock() (field 'number') trong scene thông thường?
Mastery checklist — tick what you can explain unpromptedBảng tự đánh giá — tích những gì bạn tự giải thích được