Hướng dẫn thời trang nữ Pai Pian Ge: Xây dựng thư viện ảnh quần áo AI song ngữ và dịch vụ thử đồ ảo

Giới thiệu dự án

拍片哥女装 (COSTUME-DB-01) là một thư viện tham khảo trang phục AI mã nguồn mở với giao diện chủ đề tối, lưu trữ 1407 hình ảnh trang phục do AI tạo, không có người mẫu xuất hiện và có tỷ lệ 2:3. Phần frontend là một website tĩnh thuần túy không cần build, có thể duyệt, tìm kiếm và lọc trực tiếp; khi cần thử đồ ảo, bạn có thể triển khai backend GoFrame v2 nằm trong backend/.

Bạn có thể mở phiên bản trực tuyến để trải nghiệm miễn phí các chức năng của thư viện, hoặc lấy mã nguồn từ kho GitHub để chạy cục bộ và phát triển tiếp.

Tính năng chính

• 1407 bộ trang phục: được chia thành 8 danh mục: xuân, hạ, thu, đông, đồ lót, tiệc, đồ bơi và gợi cảm.
• Song ngữ Trung-Anh: mặc định hiển thị tiếng Trung, có thể chuyển sang English ở góc trên bên phải.
• Tìm kiếm từ khóa hai chiều: hỗ trợ các từ tiếng Trung như “白、蕾丝、连衣裙”, đồng thời hỗ trợ các từ tiếng Anh như white, lace, dress.
• Duyệt hình ảnh: cung cấp cuộn vô hạn, xem ảnh lớn, chuyển ảnh bằng phím mũi tên trái phải, đóng bằng Esc và tải PNG kích thước gốc.
• Bàn phối đồ thử trang phục: có thể tải ảnh chân dung lên, chọn trang phục, xem trước, kéo thả, phóng to thu nhỏ và tách nền để ghép ảnh.
• Thay đồ ảo bằng AI: thông qua backend tùy chọn để gọi Gemini, 豆包, GPT Image, các model tương thích OpenAI Images hoặc ComfyUI cục bộ.
• Lưu trữ riêng tư cục bộ: cấu hình model được lưu trong trình duyệt hiện tại; các bản ghi tạo thành công được lưu trong IndexedDB và không đồng bộ giữa các thiết bị.
• Tìm sản phẩm tương tự bằng hình ảnh: khu vực chi tiết ảnh lớn và thao tác thử đồ có thể mở tính năng tìm kiếm hình ảnh của Taobao.

Bước 1: Chạy frontend tĩnh

Frontend chủ yếu gồm index.html, data.js và assets/, không cần cài đặt dependency hoặc thực hiện build. Sau khi lấy repository, hãy khởi động bất kỳ máy chủ tệp tĩnh nào tại thư mục gốc của dự án.

Sử dụng Python

python3 -m http.server 3000

Sử dụng Node.js

npx serve -l 3000 .

Sau đó truy cập http://localhost:3000. Bạn cũng có thể mở trực tiếp index.html bằng trình duyệt hiện đại, nhưng chạy qua dịch vụ HTTP cục bộ thường phù hợp hơn để kiểm thử đầy đủ tương tác.

Duyệt thư viện, lọc danh mục, tìm kiếm song ngữ, xem ảnh lớn và bàn phối đồ cơ bản không cần API Key cũng không yêu cầu triển khai backend. Tổng dung lượng PNG kích thước gốc khoảng hơn 1GB nên không được đưa vào repository; nút tải xuống sẽ trỏ đến tài nguyên trên trang gốc.

Bước 2: Duyệt và tìm kiếm trang phục

1. Chọn danh mục: thu hẹp phạm vi duyệt từ các danh mục xuân, hạ, thu, đông và các danh mục khác.
2. Nhập từ khóa: nhập thuộc tính trang phục bằng tiếng Trung hoặc tiếng Anh vào ô tìm kiếm; kết quả sẽ cập nhật theo thời gian thực.
3. Chuyển ngôn ngữ: sử dụng nút ngôn ngữ ở góc trên bên phải để chuyển đổi giữa giao diện tiếng Trung và tiếng Anh.
4. Xem ảnh lớn: sau khi mở chi tiết trang phục, có thể dùng phím mũi tên trái phải để duyệt các ảnh liền kề và nhấn Esc để đóng.
5. Tải xuống hoặc tìm sản phẩm tương tự: tùy nhu cầu, sử dụng mục tải ảnh kích thước gốc hoặc mở tìm kiếm hình ảnh trên Taobao.

Website cũng hỗ trợ chia sẻ ngôn ngữ và trạng thái tìm kiếm cụ thể bằng tham số URL:

?lang=en
?q=lace
?lang=en&q=white

lang có thể đặt là zh hoặc en, còn q dùng để chỉ định từ khóa tìm kiếm ban đầu.

Bước 3: Sử dụng bàn phối đồ thử trang phục cơ bản

Sau khi mở tính năng thử đồ trên frontend, trước tiên hãy chọn trang phục tham khảo từ thư viện, sau đó tải lên một ảnh chân dung. Bàn phối đồ cơ bản hỗ trợ xem trước trực tuyến, kéo thả, phóng to thu nhỏ và tách nền để ghép ảnh, không gọi model lớn. Nếu muốn trang phục ôm sát hình thể tự nhiên hơn, bạn cần tiếp tục triển khai backend thay đồ bằng AI.

Khi tải ảnh lên, frontend sẽ tự động thu nhỏ cạnh dài nhất xuống 2048 pixel, ưu tiên chuyển sang WebP và nén theo các mức chất lượng từ 0.90 đến 0.75.

Bước 4: Triển khai backend thay đồ bằng AI với Docker

Backend nằm trong backend/; khuyến nghị sử dụng Docker Compose để không phải cài môi trường biên dịch Go trên máy chủ.

cp backend/.env.example backend/.env
docker compose up -d

Chỉnh sửa backend/.env và điền khóa model bạn dự định sử dụng. Sau khi dịch vụ khởi động, mặc định dịch vụ sẽ lắng nghe tại http://localhost:8000. Nếu frontend cũng được mở qua localhost hoặc 127.0.0.1, frontend sẽ tự động thử kết nối tới http://127.0.0.1:8000.

Sử dụng Docker Run

cd backend
docker build -f manifest/docker/Dockerfile -t costume-tryon .
docker run -d --name costume-tryon -p 8000:8000 -e ARK_API_KEY="你的豆包ArkKey" -e OPENAI_API_KEY="sk-你的OpenAIKey" costume-tryon

Không sử dụng Docker

Người dùng Windows có thể chạy backend/restart.bat. Người đã cài Go cũng có thể khởi động trực tiếp:

cd backend
export ARK_API_KEY="你的Key"
go run main.go

Trong Windows PowerShell, cách viết biến môi trường là $env:ARK_API_KEY="你的Key".

Bước 5: Cấu hình model thay đồ

Tệp cấu hình model nằm tại backend/manifest/config/config.yaml, với mẫu là config.example.yaml. Mỗi model có thể chỉ định riêng giao thức, API Key, tên biến môi trường, Base URL và tên model thực tế.

llm:
  models:
    gpt-image:
      provider: openai
      envKey: "OPENAI_API_KEY"
      baseURL: "https://api.openai.com/v1"
      model: "gpt-image-2"

    doubao:
      provider: doubao
      envKey: "ARK_API_KEY"
      baseURL: "https://ark.cn-beijing.volces.com/api/v3"
      model: "doubao-seedream-3-0-t2i-250415"

    gemini:
      provider: gemini
      envKey: "GEMINI_API_KEY"
      baseURL: "https://generativelanguage.googleapis.com/v1beta"
      model: "gemini-3.1-flash-image"

Biến môi trường có độ ưu tiên cao hơn apiKey trong cấu hình. Nếu muốn tích hợp các dịch vụ tương thích giao thức OpenAI Images như Tongyi Wanxiang, Zhipu CogView hoặc SiliconFlow, bạn có thể thêm một phần model với provider: openai và điền Base URL cùng tên model tương ứng mà không cần sửa mã adapter.

Bước 6: Kết nối frontend với backend

Frontend sẽ tìm kiếm dịch vụ thay đồ bằng AI theo thứ tự ưu tiên sau:

1. “Địa chỉ API backend” được lưu trong trung tâm cài đặt.
2. Biến toàn cục window.AI_API_URL được thiết lập trước khi trang tải.
3. Tham số tryon trong URL.
4. Khi truy cập frontend cục bộ, fallback về http://127.0.0.1:8000.

Cách đơn giản nhất là mở trung tâm cài đặt ở góc trên bên phải trang và nhập http://localhost:8000. Bạn cũng có thể sử dụng địa chỉ chia sẻ sau:

https://你的前端地址/?tryon=http://localhost:8000

Trung tâm cài đặt cũng cho phép lưu giao thức, tên model, Base URL, API Key và Token truy cập backend riêng. Cấu hình model cá nhân chỉ được lưu trong trình duyệt hiện tại; khi tạo ảnh, cấu hình sẽ được gửi tạm thời đến backend theo từng yêu cầu và không được ghi vào cơ sở dữ liệu backend, tệp cấu hình hoặc nhật ký nghiệp vụ. Sau khi sử dụng thiết bị dùng chung, nên chủ động xóa cấu hình cục bộ.

Thay đồ ngoại tuyến bằng ComfyUI cục bộ

Nếu máy tính có GPU rời hoặc trong mạng LAN đã có máy chủ ComfyUI, bạn có thể sử dụng giải pháp cục bộ không cần API Key. Dự án hỗ trợ Qwen-Image-Edit-2511 Int8, Lightning LoRA 4 bước và workflow MiniMax H3, đồng thời có thể fallback sang H3 khi workflow ưu tiên chưa sẵn sàng.

1. Khởi động ComfyUI, địa chỉ mặc định là http://127.0.0.1:8188.
2. Làm theo backend/README.MD để đặt model Qwen-Image-Edit-2511 và Lightning LoRA.
3. Cấu hình phần model ComfyUI và tệp workflow.
4. Trong trung tâm cài đặt trên trang web, chọn “ComfyUI cục bộ”, kiểm tra kết nối thành công rồi lưu.

comfyui:
  provider: comfyui
  baseURL: "http://127.0.0.1:8188"
  model: "qwen-image-edit-2511"
  workflowPath: "workflows/comfyui_qwen_image_edit_2511_api.json"

Mẹo nâng cao và đề xuất triển khai production

Chọn giải pháp model phù hợp

• ComfyUI: phù hợp với người có GPU cục bộ, coi trọng quyền riêng tư và muốn tránh phí API.
• Gemini: README liệt kê Nano Banana 2, tức gemini-3.1-flash-image, là giải pháp đám mây mặc định được khuyến nghị.
• 豆包 Seedream: phù hợp với người cần giải pháp có thể sử dụng trên mạng trong nước.
• GPT Image 2: sử dụng giao thức OpenAI Images và cũng có thể cấu hình địa chỉ trung chuyển tương thích của bên thứ ba.

Bật giới hạn bảo mật khi công khai trên Internet

Khi đưa backend lên Internet công cộng, không nên chỉ công khai dịch vụ mặc định. Dự án cung cấp xác thực Bearer Token, whitelist CORS chính xác, giới hạn tốc độ bằng token bucket, hạn mức hằng ngày cùng cơ chế kiểm soát số lượng request đồng thời trên toàn hệ thống và theo từng chủ thể. Giá trị mặc định được liệt kê trong README là 10 lần mỗi phút, 100 lần mỗi ngày, 2 request đồng thời trên toàn hệ thống và 1 request đồng thời cho mỗi chủ thể; hãy tham khảo backend/DEPLOY.md để biết cấu hình production cụ thể.

Backend chỉ chấp nhận nội dung hình ảnh thực ở định dạng JPEG, PNG và WebP. Giới hạn cho một ảnh là 8 MiB, tổng giới hạn cho hai ảnh là 16 MiB; mỗi chiều của ảnh phải nằm trong khoảng từ 256 đến 8192 pixel, và tổng số pixel không được vượt quá 20 triệu. Những giới hạn này nhằm giảm rủi ro tệp giả mạo, chèn mã và bom pixel khi giải nén.

Hiểu về dữ liệu cục bộ và ranh giới quyền riêng tư

Kết quả thay trang phục bằng AI thành công sẽ được lưu trong IndexedDB của trình duyệt hiện tại, bạn có thể xem, tải xuống, xóa từng mục hoặc xóa toàn bộ. Các bản ghi không được tải lên và cũng không tự động đồng bộ sang thiết bị khác. Theo mặc định, Base URL cá nhân không được phép trỏ đến localhost, mạng nội bộ hoặc các địa chỉ dành riêng, nhằm tránh việc backend công khai bị sử dụng làm proxy cho các yêu cầu vào mạng nội bộ.

Mở rộng dữ liệu trang phục

Dữ liệu thư viện ảnh được lưu trong data.js. Mỗi bản ghi gồm id, カテゴリ, キーワード, サムネ, 画像 và 原寸. Các tên trường tiếng Nhật này được giữ lại để tương thích với dữ liệu gốc; giao diện frontend sẽ tự động bản địa hóa danh mục và từ khóa sang tiếng Trung hoặc tiếng Anh. Khi mở rộng dữ liệu, hãy tiếp tục tuân theo cấu trúc trường hiện có và quy tắc đường dẫn hình ảnh.

Lời kết

拍片哥女装 có thể được sử dụng như một thư viện tham khảo trang phục AI song ngữ, sẵn sàng sử dụng, hoặc làm nền tảng frontend và backend cho các dự án thử đồ ảo đa mô hình. Khi sử dụng lần đầu, bạn chỉ cần khởi chạy frontend tĩnh; khi cần thay trang phục bằng AI thực tế, hãy chọn mô hình đám mây Docker hoặc giải pháp ComfyUI cục bộ tùy nhu cầu. Dự án sử dụng MIT License, cho phép sử dụng thương mại, chỉnh sửa, tích hợp và phân phối, nhưng cần giữ lại các thông báo giấy phép cần thiết. Đồng thời, hãy lưu ý rằng toàn bộ hình ảnh trong thư viện đều là thiết kế trang phục ý tưởng do AI tạo ra, không phải ảnh sản phẩm của thương hiệu ngoài đời thực.