Từ xem trước cục bộ đến Cloudflare Pages: Triển khai AI Pose Gallery bản tiếng Trung

Giới thiệu dự án

AI Pose Gallery phiên bản tiếng Trung là thư viện tư thế cơ thể tĩnh dành cho tranh AI, sáng tạo 3D và tham khảo nhiếp ảnh. Dự án tuyển chọn 288 nhóm, 1439 ảnh tham khảo từ nhiều góc độ, đồng thời dịch đầy đủ siêu dữ liệu tiếng Nhật của trang gốc sang tiếng Trung.

Kho lưu trữ đồng thời chứa 1439 ảnh thu nhỏ JPG và 1439 ảnh gốc PNG, tổng cộng 2878 tệp hình ảnh. Giao diện trước là ứng dụng một trang không phụ thuộc, có thể sử dụng mà không cần cài framework hoặc chạy công cụ build.

Bạn có thể truy cập bản demo trực tuyến để xem thực tế, hoặc lấy toàn bộ dự án từ kho GitHub.

Thư viện có các tư thế dành cho người trưởng thành; tên một số danh mục có chứa thuật ngữ liên quan đến hành vi tình dục. Nội dung chỉ phục vụ sáng tác nghệ thuật, tham khảo động tác và học tập kỹ thuật frontend. Người chưa thành niên không được truy cập.

Tính năng chính

Tìm kiếm và lọc kết hợp

Thư viện được tổ chức theo bốn hệ thống; trang hiển thị số lượng ảnh và nhóm tư thế của từng hệ thống. Ô tìm kiếm hỗ trợ tên tư thế, số hiệu, ID và từ khóa danh mục. Nhấn / để nhanh chóng đưa con trỏ vào ô tìm kiếm.

• Bốn tab hệ thống tư thế
• 26 danh mục động tác
• Năm góc nhìn: chính diện, chéo bên, bên, từ trên xuống và từ dưới lên
• Lọc kết hợp theo hệ thống, danh mục và góc nhìn
• Đặt lại điều kiện lọc chỉ với một lần nhấn

Duyệt theo nhóm và từng ảnh

Trang cung cấp hai chế độ: nhóm theo tư thế và duyệt từng ảnh. Thẻ nhóm hiển thị các ảnh thu nhỏ ở nhiều góc của cùng một tư thế; di chuột hoặc nhấp vào ảnh thu nhỏ để chuyển ảnh chính của thẻ.

Sau khi mở lightbox, trang trước tiên hiển thị ảnh thu nhỏ 300×400, sau đó tải ảnh gốc PNG 900×1200. Lightbox hỗ trợ tải PNG, sao chép ID bản ghi và mở ảnh trong cửa sổ mới.

• ← và →: chuyển góc nhìn của tư thế hiện tại
• ↑ và ↓: chuyển tư thế
• Esc: đóng lightbox
• Vuốt trái phải trên điện thoại: chuyển ảnh

Bố cục thích ứng

Máy tính sử dụng lưới nhiều cột, còn điện thoại sử dụng lưới hai cột. Bảng lọc trên thiết bị di động có thể mở rộng hoặc thu gọn, thuận tiện duyệt trên màn hình nhỏ.

Quy mô và cấu trúc dữ liệu

1439 bản ghi được phân bổ trong bốn hệ thống:

• Một người toàn thân・hệ tiêu chuẩn: 365 bản ghi
• Một người toàn thân・hệ gợi cảm: 399 bản ghi
• Một người phần thân trên: 400 bản ghi
• Hai người quấn quýt: 275 bản ghi

Frontend thực tế đọc data/pose-zh.json. Mỗi bản ghi gồm ID duy nhất, hệ thống, số hiệu tư thế, danh mục, tên tư thế, góc nhìn, đường dẫn ảnh thu nhỏ, đường dẫn ảnh gốc và chuỗi tìm kiếm.

{
  "id": "full_sexy_P001_front",
  "体系": "全身单人・性感系",
  "姿势编号": "P001",
  "分类": "站姿",
  "姿势名称": "S形站姿・胯部侧顶",
  "角度": "正面",
  "缩略图": "thumbs/…jpg",
  "原图": "img/…png",
  "检索": "用于前端模糊搜索的拼接串"
}

data/pose.json giữ lại các trường và dữ liệu tiếng Nhật gốc, thuận tiện cho việc đối chiếu bản dịch hoặc nạp dữ liệu trở lại. data/translations.csv cung cấp 323 bản ghi đối chiếu Nhật-Trung.

Lấy dự án

Chuẩn bị Git và Python 3, sau đó clone kho và chuyển vào thư mục dự án:

git clone https://github.com/anhao/ai-pose-gallery-zh.git
cd ai-pose-gallery-zh

Dự án không có bước cài đặt dependency npm hoặc Python. Trang chính nằm tại index.html; dữ liệu và hình ảnh đã được lưu trong các thư mục tương ứng của kho.

Thư mục quan trọng

• index.html: thư viện một trang không phụ thuộc
• data/: dữ liệu tiếng Nhật, dữ liệu tiếng Trung, danh mục và bảng đối chiếu bản dịch
• thumbs/: 1439 ảnh thu nhỏ JPG 300×400
• img/: 1439 ảnh gốc PNG 900×1200
• scripts/: script tải xuống, nạp bản dịch, kiểm tra và phát hành
• _headers: chính sách bộ nhớ đệm của Cloudflare Pages
• robots.txt và sitemap.xml: cấu hình công cụ tìm kiếm

Khởi chạy thư viện cục bộ

Trang tải dữ liệu JSON thông qua fetch, vì vậy không thể mở trực tiếp bằng cách nhấp đúp vào index.html. Khi sử dụng giao thức tệp cục bộ, trình duyệt sẽ chặn yêu cầu do chính sách bảo mật.

Khởi chạy máy chủ HTTP Python tại thư mục gốc của kho:

python3 -m http.server 8000

Sau đó mở:

http://127.0.0.1:8000

Sau khi trang tải xong, có thể làm quen với thao tác cơ bản theo thứ tự sau:

1. Chọn một hệ thống tư thế từ các tab phía trên.
2. Chọn danh mục động tác và một hoặc nhiều góc nhìn.
3. Nhập tên tư thế, số hiệu, ID hoặc từ khóa danh mục vào ô tìm kiếm.
4. Chuyển đổi giữa chế độ nhóm và chế độ từng ảnh.
5. Nhấp vào thẻ để mở lightbox, sau đó điều hướng bằng bàn phím hoặc thao tác cảm ứng.
6. Tải ảnh gốc PNG hoặc sao chép ID bản ghi trong lightbox.

Bảo trì hình ảnh và dữ liệu bản dịch

Tải lại hình ảnh

Kho cung cấp script tải xuống đồng thời. Các tệp đã tồn tại sẽ tự động được bỏ qua, vì vậy có thể chạy lại lệnh và hỗ trợ tiếp tục tải cũng như tự động thử lại.

python3 scripts/download.py

Số luồng mặc định là 48. Để điều chỉnh số luồng, có thể đặt WORKERS:

WORKERS=64 python3 scripts/download.py

Cập nhật bản dịch tiếng Trung

Từ điển bản dịch nằm tại scripts/i18n.py. Sau khi sửa bản dịch, chạy script nạp lại để tạo lại dữ liệu tiếng Trung:

python3 scripts/apply_translation.py

Kết quả tạo ra sẽ được frontend đọc. Sau khi cập nhật, nên kiểm tra các trường hệ thống, danh mục, tên tư thế, góc nhìn và tìm kiếm trong data/pose-zh.json có đúng như mong đợi hay không.

Kiểm tra tính toàn vẹn của hình ảnh

Script kiểm tra sự tồn tại, kích thước tệp và phần đầu hình ảnh của 2878 tệp:

python3 scripts/verify.py

Chạy kiểm tra một lần sau khi tải lại tài nguyên, di chuyển thư mục hoặc trước khi triển khai chính thức sẽ giúp giảm nguy cơ thiếu hoặc hỏng ảnh trên môi trường trực tuyến.

Triển khai lên Cloudflare Pages

Đây là trang tĩnh thuần túy; nên kết nối GitHub rồi để Cloudflare Pages tự động phát hành.

1. Đăng nhập Cloudflare Dashboard.
2. Vào Workers & Pages, lần lượt chọn Create, Pages và Connect to Git.
3. Chọn kho dự án và đặt nhánh sản xuất là main.
4. Đặt Framework preset thành None.
5. Đặt Build command thành bash scripts/build.sh.
6. Đặt Build output directory thành dist.
7. Lưu và triển khai; thường sau khoảng 2 đến 5 phút sẽ nhận được địa chỉ https://<project>.pages.dev.

Sau đó, mỗi lần thực hiện git push lên nhánh sản xuất, Cloudflare Pages sẽ tự động build và phát hành lại.

Không đặt Build output directory trực tiếp vào thư mục gốc của kho. Thư mục gốc chứa .git có thể bao gồm hàng trăm MB dữ liệu; khi Cloudflare quét các tệp pack, có thể kích hoạt giới hạn 25 MiB cho mỗi tệp. scripts/build.sh chỉ sao chép các tệp cần thiết của trang vào dist.

Tệp lớn nhất trong kho khoảng 917 KB, thư mục phát hành có khoảng 2883 tệp, đáp ứng giới hạn của Cloudflare Pages: mỗi tệp không quá 25 MiB và mỗi lần triển khai không quá 20000 tệp.

Triển khai bằng dòng lệnh

Nếu không kết nối GitHub, có thể tạo thư mục phát hành trước rồi tải lên bằng Wrangler:

bash scripts/build.sh
npx wrangler pages deploy dist --project-name ai-pose-gallery-zh

_headers đã cấu hình bộ nhớ đệm dài hạn một năm cho img/ và thumbs/, giúp tránh trình duyệt lặp lại yêu cầu các hình ảnh không thay đổi.

Đề xuất cấu hình nâng cao

Thay đổi tên miền chính thức

Các địa chỉ tuyệt đối trong kho mặc định trỏ đến https://ai-pose-gallery.anhao.app/. Nếu fork rồi triển khai trên tên miền riêng, cần đồng thời sửa các vị trí sau:

• Địa chỉ canonical trong index.html
• Địa chỉ og:* của Open Graph
• Cấu hình twitter:* của Twitter Card
• Địa chỉ trang web trong dữ liệu có cấu trúc JSON-LD
• Địa chỉ sitemap trong robots.txt
• Địa chỉ trang chủ trong sitemap.xml

Cập nhật thống nhất các địa chỉ này giúp tránh việc công cụ tìm kiếm xem tên miền tùy chỉnh và tên miền pages.dev là các trang trùng lặp.

Duy trì ngữ nghĩa SEO

Trang đã cấu hình description, keywords, author, Open Graph, Twitter Card riêng, cùng dữ liệu JSON-LD WebSite và ImageGallery. Khi sửa frontend, nên tiếp tục duy trì một tiêu đề chính duy nhất, các tiêu đề phân khu rõ ràng và văn bản thay thế hình ảnh có tên tư thế cùng góc nhìn.

Ảnh thu nhỏ sử dụng tải lười; lightbox hiển thị ảnh nhỏ trước rồi mới yêu cầu ảnh gốc. Khi mở rộng chức năng trang, nên giữ nguyên thứ tự tải này để tránh việc đồng thời yêu cầu các PNG 900×1200 làm ảnh hưởng tốc độ hiển thị ban đầu.

Giữ nhất quán các trường khi sửa dữ liệu

Tìm kiếm, lọc, nhóm và chuyển góc nhìn đều phụ thuộc vào các trường trong pose-zh.json. Khi chỉnh sửa bản ghi thủ công, cần đặc biệt chú ý tính duy nhất của id, đường dẫn tương đối đến hình ảnh, tên hệ thống, danh mục, số hiệu tư thế và tên góc nhìn; sau khi sửa hãy chạy script kiểm tra.

Bản quyền và giới hạn sử dụng

Bản quyền hình ảnh và dữ liệu gốc thuộc về tác giả gốc ギア. Người duy trì kho không tuyên bố quyền đối với các tài nguyên này; dự án cũng không cấu thành giấy phép sử dụng thương mại cho tác phẩm gốc.

Mã nguồn trong scripts/ và index.html sử dụng giấy phép MIT, nhưng giấy phép này không bao gồm hình ảnh và dữ liệu gốc trong img/, thumbs/ và data/. Trước khi phát hành lại hoặc sử dụng tài nguyên, cần xác nhận mục đích sử dụng phù hợp với các yêu cầu bản quyền liên quan.

Tóm tắt

Phiên bản tiếng Trung của AI Pose Gallery tích hợp đầy đủ dữ liệu đã được bản địa hóa, tài nguyên hình ảnh cục bộ và giao diện responsive trong một dự án tĩnh không phụ thuộc thư viện. Bạn có thể xem trước cục bộ bằng máy chủ HTTP Python, sử dụng các tập lệnh tích hợp để tải xuống lại, cập nhật bản dịch và kiểm tra tài nguyên, sau đó nhanh chóng xuất bản bằng Cloudflare Pages. Khi triển khai phiên bản riêng, hãy nhớ điều chỉnh cấu hình SEO liên quan đến tên miền và tuân thủ các lưu ý về nội dung cũng như giới hạn bản quyền của dự án.