CPPAI × EzyPlatform

Loạt bài · Bài 3

Sử dụng bộ công cụ của CPPAI để tạo trang web thử váy online

Từ một câu yêu cầu tới một phòng thử váy chạy trên EzyPlatform: chọn mẫu váy, tách nền ảnh ngay trên trình duyệt, tự khớp váy theo dáng người bằng MediaPipe Pose, sửa trải nghiệm trên điện thoại qua từng lần thử, rồi đăng nhập bằng EzyLogin CLI và đưa lên site bằng bộ công cụ ezy của CPPAI.

Ở bài 1 chúng ta đã cài bộ công cụ, ở bài 2 đã dùng nó để biến mã nguồn nginx thành một trò chơi. Bài này là một bài toán thương mại: một trang để khách hàng nữ chụp ảnh của mình rồi ướm thử các mẫu váy trước khi mua. Toàn bộ mã do agent viết. Người dùng đặt yêu cầu, thử trên điện thoại thật và phản hồi những chỗ chưa ổn.

Kết quả: phòng thử váy cho HOBB

Khách bật camera hoặc tải một tấm ảnh lên, chọn một trong sáu mẫu váy lấy từ hobb.vn, và váy tự nằm đúng vai, đúng cỡ. Ưng ý thì lưu ảnh, chia sẻ, hoặc bấm sang trang sản phẩm để mua.

Bạn có thể thử ngay trên điện thoại.

Chuẩn bị

• Dự án site như ở bài 1, có environment.json trỏ tới trang quản trị.
• Claude Code đã có plugin ezyplatform@cppai.
• Site cài EzyArticle. Nếu muốn đăng nhập từ dòng lệnh thay cho việc sao chép access token, site cần EzyLogin và đã bật Cho phép quản trị viên đăng nhập từ dòng lệnh (CLI).

Bước 1: Chọn mẫu váy và tải ảnh

Yêu cầu ban đầu chỉ có một câu:

Làm một trang cho phép phụ nữ mua hàng chụp hình và ướm thử với các bộ váy. Hãy chọn một vài bộ váy ở hobb.vn, ảnh tải xuống thì để ở api/v1/media.

Agent đọc trang danh mục váy của hobb.vn, ghép từng sản phẩm với ảnh của nó, rồi xếp các ảnh thành một tấm để tự xem. Ảnh sản phẩm của HOBB chụp riêng chiếc váy trên nền trắng, rất hợp để ướm. Sáu mẫu được chọn sao cho đủ kiểu dáng và màu sắc: đen, đỏ, xanh navy, satin nâu, trắng, kem.

Giữa chừng người dùng nhắn thêm: “ảnh nào lớn hơn 1 MB phải giảm size nhé”. Không ảnh nào vượt 1 MB, nhưng agent vẫn thu hai ảnh gốc 2083×3125 về 1000×1500 để trang nhẹ hơn. Ảnh được đặt tên theo quy tắc của thư viện media, ví dụ hobb-vay-do-taffeta-trat-vai.jpg.

Bước 2: Dựng trang độc lập và tách nền ảnh váy

Phòng thử váy cần toàn bộ màn hình và giao diện riêng, nên agent chọn kiểu trang STANDALONE_PAGE giống trò chơi ở bài 2: HTML, CSS và JavaScript nằm gọn trong content.html.

pages/thu-vay-online/
├── content.html   # toàn bộ phòng thử váy
└── meta.json      # "pageType": "STANDALONE_PAGE", "contentType": "HTML"

Khung ướm thử là một canvas 900×1200. Váy được tách nền bằng thuật toán loang (flood fill) từ mép ảnh: pixel nào gần trắng và nối liền với mép thì thành trong suốt. Agent chụp màn hình kết quả trên nền màu để tự soát, và phát hiện hai lỗi:

• Váy trắng bị “ăn” mất nửa thân vì thân váy gần trùng màu nền. Cách sửa: mỗi mẫu váy có ngưỡng tách nền riêng (váy trắng dùng 10, các mẫu khác 22). Người dùng vẫn chỉnh được bằng thanh “Tách nền”.
• Khe giữa tay áo và thân váy vẫn còn nền trắng, vì vùng đó bị tay áo bao kín nên thuật toán loang từ mép không chạm tới. Cách sửa: thêm một lượt tìm các vùng màu nền bị bao kín và đủ lớn rồi xoá luôn. Vùng nhỏ như hoạ tiết đính kết thì được giữ lại.

Bước 3: Thử trên điện thoại và sửa trải nghiệm

Để thử trên điện thoại thật, agent chạy một server tĩnh ngay trên máy, mở cho cả mạng LAN. Camera trên điện thoại chỉ hoạt động qua HTTPS, nên agent dựng thêm một server HTTPS dùng chứng chỉ tự ký. Từ đây, mọi phản hồi đều đến từ việc người dùng cầm máy thử:

Bước 4: Chế độ tự khớp dáng

Váy có cỡ cố định thì không thể vừa với mọi khoảng cách chụp. Agent đề xuất dùng mô hình nhận dáng người @mediapipe/tasks-vision (Pose Landmarker bản lite), chạy hoàn toàn trên trình duyệt. Thư viện và mô hình chỉ được tải khi cần, khoảng 15 MB ở lần đầu.

• Cỡ váy tính theo khoảng cách hai vai, nhân với tỉ lệ vai riêng của từng mẫu (váy trễ vai rộng hơn váy có tay).
• Hướng váy theo trục thân người, từ giữa hai vai xuống giữa hai hông. Phiên bản đầu dùng đường vai, nên khi người mẫu nghiêng vai thì cả thân váy bị văng sang một bên. Khi không thấy hông thì mới dùng đường vai.
• Ảnh tĩnh và camera dùng hai chế độ khác nhau. Chế độ VIDEO bám theo vị trí người ở khung trước, rất hợp cho camera nhưng làm lệch kết quả khi đổi sang một ảnh khác hẳn. Ảnh chụp và ảnh tải lên dùng chế độ IMAGE, mỗi ảnh tìm lại từ đầu.
• Nếu khách tự kéo váy trong lúc đang quay camera, trang tự chuyển sang “Chỉnh tay” để không giằng co với AI.

Bước 5: Để agent tự kiểm thử

Agent không chờ người dùng phát hiện lỗi. Sau mỗi thay đổi nó:

• Kiểm tra cú pháp JavaScript bằng node --check.
• Dùng Playwright mở trang thật, giả lập thao tác “Tải ảnh lên” với ảnh người mẫu có giấy phép tự do, chờ AI xong rồi chụp lại khung ướm thử để tự xem vị trí váy.
• In toạ độ các điểm mốc (mũi, vai, khuỷu tay, hông) lên ảnh khi kết quả trông sai, để biết lỗi nằm ở mô hình hay ở cách tính.

Bước 6: Đăng nhập bằng EzyLogin CLI và publish

Site đích là freestyle.ezyplatform.com, và dự án chưa có access token. Thay vì mở trang quản trị để sao chép token, agent dùng luồng đăng nhập dòng lệnh của EzyLogin (OAuth 2.0 Authorization Code + PKCE):

1. Mở một cổng tạm trên 127.0.0.1, tạo code_verifier ngẫu nhiên và mở trình duyệt tới /ezylogin/cli/authorize của trang quản trị.
2. Người dùng đăng nhập và bấm Phê duyệt.
3. Agent đổi mã uỷ quyền lấy access token qua POST /ezylogin/api/v1/cli/me/token, rồi ghi token thẳng vào environment.json (đã nằm trong .gitignore, chỉ chủ máy đọc được). Token không bao giờ được in ra màn hình.

Sau đó là các bước quen thuộc của bộ công cụ, mỗi bước ghi đều chạy thử trước:

Như đã nói ở bài 2, ezy-publish trong plugin 0.5.0 chỉ cập nhật trang đã có. Lần này người dùng nhắn “bạn tự tạo qua API được mà”, nên agent dùng đúng API save-simply mà extension VS Code vẫn dùng: chạy thử trước, từ chối nếu trang đã tồn tại, và đọc lại để xác nhận sau khi tạo.

Bước 7: Mang sang dự án chạy Docker local

Cuối cùng, người dùng muốn lưu giải pháp vào dự án mmo-game, dự án tạo bằng ezy new --mode local ở bài 1 và cũng là nơi chứa trò chơi nginx của bài 2. Agent chép trang và ảnh sang, bật Docker Desktop, chạy docker compose up -d, chờ trang quản trị và website phản hồi, rồi publish đúng như với site thật:

cd mmo-game
docker compose up -d
# admin: http://127.0.0.1:9090   website: http://127.0.0.1:8080/thu-vay-online

Cùng một bộ file chạy được ở cả hai nơi, chỉ khác environment.json.

Những điều rút ra

Tiếp theo

Một trang thương mại có AI chạy ngay trên trình duyệt, từ ý tưởng tới hai môi trường, chỉ qua những câu nhắn ngắn. Hãy thử phòng thử váy trên điện thoại của bạn, và xem các bài khác tại mục lục loạt bài.