AI PRESENTATION SYSTEM CLOUDFARE READY
⚡ STANDALONE PRESENTATION GENERATOR

Quy Trình Đóng Gói Tạo Bài Thuyết Trình AI (Multi-Agent SOP)

Hệ thống chuẩn hóa biến mọi nội dung văn bản thô (File text / Markdown / Prompt) thành bài thuyết trình HTML5 Scrollytelling tương tác cao, chuẩn 16:9, tối ưu Fullscreen Desktop và Mobile PDF Mode.

100%
Bảo lưu Nội dung thô
16:9
Khung hình cố định 1280x720
5 Bước
Quy trình Tự động hóa
0 Lỗi
Tự kiểm tra Font & Div

5 Bước Sản Xuất Bài Thuyết Trình Chuẩn Hóa

BƯỚC 01 INTERACTIVE SOLICITATION

Tiếp Nhận Nội Dung & Hỏi Ý Kiến Người Dùng

Khi nhận file text từ người dùng, AI bắt buộc tạm dừng để hỏi và làm rõ các thông tin bổ sung:

  • Template / Styling: Bạn có thư mục ảnh mẫu phong cách hoặc tệp Template nào muốn áp dụng không? (Kích hoạt ai-rules-vision.md nếu có ảnh).
  • Color Palette: Lựa chọn phong cách bảng màu (Khuyên dùng: Orange & Cream Illustration, Modern Dark Tech, Minimalist Warm Beige).
  • Logo & Branding: Có cần nhúng Logo hay nhận diện riêng không?
BƯỚC 02 LAYOUT PLANNING (CHẠM 1)

Lên Kịch Bản Phân Cảnh (layout-plan.md)

Phân rã văn bản thô thành N Phân cảnh (Scene 1 ➔ Scene N) với các nguyên tắc nghiêm ngặt:

  • Giữ nguyên 100% chi tiết: Tuyệt đối không viết tóm tắt ngắn ngủn làm mất thông tin bài học/báo cáo.
  • Tách bạch Tiêu đề & Diễn giải: Phân chia Heading và Body text rõ ràng.
  • Quy trình Chạm 1: Tạo tệp ai_docs/layout-plan.md và TẠM DỪNG XIN DUYỆT trước khi viết mã HTML.
BƯỚC 03 MULTI-AGENT CODING

Lập Trình Đa Tác Nhân Song Song

Khởi tạo vỏ bọc index_template.html và cho các subagents SceneCoder lập trình song song từng slide:

  • Cấu trúc Module: Mỗi slide được lưu độc lập tại scripts/scenes/scene_N.html và scene_N.css.
  • BEM Class Isolation: Ép cô lập class .scene-N__... triệt tiêu 100% lỗi xung đột CSS giữa các slide.
  • CSS Shapes & Hand-Drawn Sketch: Dùng hoàn toàn CSS Shapes, Gradient và SVG Inline minh họa, cấm dùng thẻ img ngoài.
BƯỚC 04 AUTO ASSEMBLY

Tự Động Biên Dịch Kịch Bản (assemble.py)

Kịch bản Python tự động bóc tách và lắp ráp toàn bộ HTML/CSS từ scripts/scenes/ vào tệp index.html thành phẩm duy nhất.

python scripts/assemble.py
BƯỚC 05 QUALITY CONTROL (QA CHECK)

Kiểm Tra Chất Lượng Tự Động & Sửa Lỗi Sâu

Chạy kịch bản qa_check.py tự động phát hiện và xử lý dứt điểm các lỗi thông thường trước khi bàn giao.

python scripts/qa_check.py

Bộ Chỉ Số Kiểm Tra Chất Lượng Tự Động (QA Checklist)

✓ Cân Bằng Thẻ HTML (Div Balance)

Đảm bảo số lượng <div mở và </div> đóng hoàn toàn bằng nhau trong mọi Scene, không làm vỡ khung wrapper.

✓ Căn Giữa 100% (Dead-Center 16:9)

Đảm bảo margin: auto và transform-origin: center center ở Desktop, slide luôn ở chính giữa không bị trôi/lệch phải.

✓ Chuẩn Phông Tiếng Việt (Font Safety)

Bắt buộc dùng phông Google hỗ trợ 100% Tiếng Việt (Plus Jakarta Sans, Be Vietnam Pro). Triệt tiêu lỗi nhảy font serif ở từ có dấu (*Ự, Ệ, Ỏ, Ắ...*).

✓ Chống Rớt Chữ (Orphan Words)

Áp dụng text-wrap: balance; word-break: keep-all; cho tiêu đề, kiểm tra chính tả tiếng Việt và tiếng Anh kỹ lưỡng.

🚀 Hướng Dẫn Upload & Share Trên Cloudflare Pages (1 Click)

Bạn có thể upload và chia sẻ quy trình này hoặc bài thuyết trình index.html thành phẩm trực tiếp trên Cloudflare Pages miễn phí:

1
Truy cập vào Cloudflare Dashboard ➔ Chọn Workers & Pages ➔ Click Create application ➔ Chọn tab Pages.
2
Chọn Upload assets (Direct Upload) ➔ Nhập tên dự án (Ví dụ: my-ai-presentation).
3
Kéo thả tệp HTML này (hoặc thư mục chứa tệp index.html thành phẩm) vào khung Upload.
4
Click Deploy site. Bạn sẽ nhận ngay 1 URL công khai dạng https://my-ai-presentation.pages.dev để chia sẻ cho mọi người!