--- title: "Banner, thumbnail & biểu đồ" url: https://phatdev.net/docs/media-studio/banner-thumbnail lang: vi updated: 2026-10-18 alternate: en: https://phatdev.net/en/docs/media-studio/banner-thumbnail markdown: https://phatdev.net/docs/media-studio/banner-thumbnail.md --- # Banner, thumbnail & biểu đồ Thuộc bộ tài liệu: [Media Studio](https://phatdev.net/docs/media-studio.md) > Banner dựng tách lớp, ảnh Featured có OCR kiểm chữ, biểu đồ benchmark. Từ v1.11.0 mọi banner được **dựng tách lớp** thay vì để AI vẽ cả tấm. Kết quả: laptop luôn đúng là máy thật, chữ tiếng Việt không rơi dấu, ảnh nét ở 2560px.

Banner: 10+ loại, phong cách, phông, gradient

## Dựng tách lớp | Lớp | Nguồn | Ghi chú | |---|---|---| | **1. Nền** | AI vẽ nền / vật minh hoạ, **không chữ, không laptop** | Nền theo phong cách được lưu cache → series đồng bộ, lần sau 0 quota | | **2. Laptop** | **Ảnh gốc** của hãng, tách nền | Cache theo ảnh; tự né vùng chữ, chọn hướng cho máy to nhất | | **3. Chữ & module** | HTML + phông nhúng, chụp bằng Chrome | Chữ tự co/giãn vừa khung, nhấn màu theo `*từ*` hoặc `highlight` | ## Ảnh Featured (bìa bài viết) - AI vẽ **trọn nền + chữ tiêu đề + vật minh hoạ đúng chủ đề** (SSD, củ sạc, đầu RJ45…), chỉ laptop gốc ghép sau → chữ hoà vào ảnh. - Phong cách chuẩn: **nền sáng trắng-xanh, chữ cực đậm hai màu** (đen/navy + xanh chuyển sắc), giống bìa web Hưng Phát. Ba bố cục: `topline`, `left2`, `right2`. - **OCR kiểm chữ**: đọc lại chữ AI vẽ, số/model (`45W`, `RJ45`) phải khớp tuyệt đối, sai dấu là loại. Sai → gen lại tối đa 2 lần, vẫn sai thì dùng chữ HTML. Gửi `textBy: "html"` để ép chữ HTML. - 8 mẫu dựng CSS (Atelier, Photon, Premiere, Boost…) vẫn dùng được với `design: ""` - không tốn quota, ~2 giây/banner. ## Các loại banner Bìa review, so sánh 2 máy, so sánh thông số, **so sánh linh kiện** (CPU/GPU/RAM/SSD/màn hình, dạng Laptop hoặc PC), **infographic** 17 chủ đề, thumbnail, bìa kiến thức, "A hay B", bìa mẹo, **banner tính năng sản phẩm** (`feature`). Preset màu ưu tiên tông xanh nhận diện kênh. ## Biểu đồ benchmark `POST /api/v1/chart` vẽ biểu đồ từ số liệu (cột, ngang, so sánh) với palette xanh `navy` / `sky` / `indigo`; nhãn trục luôn nằm ngang, dài thì tự xuống dòng. Dữ liệu CPU/GPU/FPS game lấy từ DB NotebookCheck. ## Độ ổn định Render dùng Chrome **headless-shell** (chạy cả khi màn hình Mac tắt). Mỗi lần render có hạn 75 giây - treo thì khởi động lại Chrome và thử lại một lần, không còn request treo vô hạn. ## Ảnh minh hoạ

So sánh 2 máy: Legion 5 Gen 11 vs Gen 10

So sánh linh kiện: Core Ultra vs Ryzen AI