Image Studio: thư viện ảnh SVG bằng thuật toán

studio.conan.school là thư viện ảnh vẽ hoàn toàn bằng thuật toán: 10 bộ sinh, 300 ảnh, lọc theo bốn chiều (dạng, phong cách, bảng màu, khổ). Bấm một ảnh để xem prompt, các bước thuật toán, tham số, seed, tải SVG và thử seed khác.

Lưu công thức hay lưu ảnh?

Lưu công thức. D1 (image_recipes) chỉ giữ bộ sinh + tham số + seed + prompt, vài trăm byte một hàng. Trình duyệt chạy đúng thuật toán đó và ra đúng ảnh đó.

	Lưu công thức (đã chọn)	Vẽ sẵn, lưu SVG
Dung lượng D1	~300 byte/ảnh	~33 KB/ảnh trung bình
Biến thể, đổi seed	tức thì ở trình duyệt	phải sinh lại và lưu
Rủi ro bảo mật	không chuỗi SVG nào qua API	SVG thô từ D1, phải lo nhúng an toàn
Cái giá	sửa thuật toán là đổi mọi ảnh của bộ sinh đó	ảnh đứng yên dù mã đổi

Cái giá ở cột trái được chặn bằng luật: muốn đổi thuật toán mà giữ ảnh cũ thì tạo bộ sinh mới.

Kiến trúc

• studio.conan.school/ Vite + React + Tailwind v4 + shadcn/ui + Motion, deploy Pages image-conan-school.
• src/generators/ thư viện thuật toán TypeScript thuần, dùng chung cho site và script biên dịch.
• catalog/recipes.json nguồn sự thật của danh mục, biên dịch ra migration 20261027b_image_recipes_catalog.sql.
• API công khai api.conan.school/api/public/images (/, /facets, /:slug).

Bộ sinh

Dạng	Bộ sinh
Hoạ tiết	Ô Truchet, Lưới Bauhaus
Phong cảnh	Dãy núi xếp lớp, Biển và mặt trời
Trừu tượng	Trường dòng chảy, Xếp hình tròn
Ảnh đại diện	Gương mặt hình học, Identicon đối xứng
Đồ hoạ dữ liệu	Vòng tia dữ liệu, Đường đồng mức

Cách viết bộ sinh mới, thêm bảng màu hay chiều lọc: skill svg-image-gen.

Lượt deploy đầu

Project Pages chưa tồn tại thì wrangler pages deploy trong CI không tự tạo. Job ensure-project trong deploy-studio.yml tạo project và gắn tên miền bằng API. Nếu token không có quyền gắn tên miền, job chỉ cảnh báo: gắn studio.conan.school ở dashboard Pages.

Vì sao là studio, không phải image

image.conan.school đã là tên miền công khai của R2 bucket conan-cms: bìa sách (/books/covers/), ảnh câu chuyện người học, ảnh ebook, với hàng chục URL nằm trong repo và D1. Lượt đầu (09.10.2026) suýt đổi bản ghi DNS của nó sang Pages, việc đó sẽ làm mọi ảnh ấy trả 404. Trước khi gắn một subdomain mới, tìm nó trong DNS của zone và git grep trong repo. Project Pages vẫn tên image-conan-school; chỉ tên miền và thư mục đổi.

Đợt hai: độ chi tiết x10 và x100 (09.10.2026)

Sáu bộ sinh dày đặc, mỗi bộ 20 ảnh: Chấm điểm, Khắc nét (dạng mới "Kết cấu"), Khảm Voronoi, Bản đồ địa hình mịn (marching squares), Thiên hà xoắn ốc, Thành phố về đêm. Tổng 420 ảnh.

Độ chi tiết được ĐO bằng số nguyên tố vẽ (hình + lệnh path) so với mốc 300:

Mức	Dải	Trung vị đo được	Số ảnh
1x	dưới 1.500	240	244
10x	1.500 đến 15.000	3.680	115
100x	từ 15.000	33.655	61

Ảnh vẽ trong Web Worker, hiện bằng blob: URL; trang chi tiết có khung phóng 1x/4x/10x và hiện số nguyên tố, dung lượng, thời gian vẽ. Migration 20261028a_image_recipes_detail.sql thêm cột detail và ghi lại 420 hàng.

Đợt ba: thú hoạt hình 3D (09.10.2026)

Bộ sinh critter3d, dạng mới "Nhân vật 3D": 10 loài (mèo, cún, thỏ, gấu, cáo, gấu trúc, cánh cụt, cú, ếch, heo), 40 ảnh, ba cách đổ bóng (3D mềm, toon, phác nét). Thiết kế nguyên bản, chỉ mượn kỹ thuật ánh sáng của phim hoạt hình 3D; luật bản quyền ở skill svg-image-gen, luật 8.

Đợt bốn: Ảnh động và Phòng thử bìa (09.10.2026)

Ba cụm chung bảng image_recipes, phân biệt bằng cột collection (migration 20261030a):

Cụm	Đường dẫn	Số lượng	Chiều lọc
Ảnh tĩnh	/	460	dạng, phong cách, bảng màu, khổ, độ chi tiết
Ảnh động	/motion	30 (6 bộ sinh)	kiểu chuyển động, phong cách, bảng màu, khổ
Bìa sách	/covers	200 (20 dạng x 10)	dạng bìa, nhóm, tĩnh/động, thể loại sách, bảng màu

Ảnh động, sáu định dạng (/motion/formats có bảng tiêu chí và nút đo thật): SVG + SMIL, SVG + CSS, Motion (React), Canvas, GIF, WebM. Một lượt đo trên "Hoa xoay": SMIL 16 KB, CSS 46 KB, dữ liệu cảnh 11 KB, GIF 1,05 MB (480px, 100 khung), WebM 549 KB. Không chọn: APNG, WebP động, Lottie, MP4 (lý do trên trang).

Phòng thử bìa: tên sách thật từ api.conan.school/content/books/packs, thể loại từ categories.json. Tên sách là chữ HTML đặt lên vùng chữ của từng dạng, không nằm trong SVG. Năm dạng động chạy được bằng SMIL, CSS, Motion và Canvas. Skill cover-lab; khác skill book-covers (bìa thật của kệ).

Điện thoại và Canvas mặc định (09.10.2026)

Mọi nút cao tối thiểu 44px trên điện thoại, bộ lọc gập sau một nút, điều hướng là menu, khoảng cách nới rộng. Canvas (JavaScript) là định dạng đầu tiên và mặc định cho ảnh động và bìa động; canvas khuất màn hình tự dừng. Đã kiểm 8 trang ở 375px: không trang nào tràn ngang. Chi tiết: skill svg-image-gen, luật 10.

Đợt năm: 100 dạng bìa động và cụm Biểu đồ (09.10.2026)

• Bìa động: 100 dạng mới = 10 kiểu chuyển động x 10 bố cục, 5 bìa mỗi dạng; cụm Bìa sách có 700 bìa, lọc theo kiểu chuyển động và bố cục. Skill cover-lab.
• Biểu đồ (/diagrams): 100 loại = 20 họ x 5 biến thể, mỗi loại tĩnh + động (vẽ dần, dòng chảy, nhịp đập). Bố cục tính bằng dagre, d3-hierarchy, d3-force, d3-sankey, d3-chord; vẽ bằng Canvas, tải SVG/PNG. Skill diagram-lab.
• Migration 20261101a ghi lại 930 hàng của ba cụm.

Rạn san hô (09.10.2026)

100 bìa động dưới nước (10 cảnh x 10 bìa): cá hề, cá đuôi gai xanh, bạch tuộc, cá ngựa, cá mập, san hô, hải quỳ. Thiết kế nguyên bản theo kiểu hoạt hình 3D; không dựa trên nhân vật phim nào (luật ở skill cover-lab). Lọc bằng nhóm "Rạn san hô" ở /covers. Cụm bìa có 800 bìa, migration 20261102a.

Vũ trụ (09.10.2026)

100 bìa động không gian (10 cảnh x 10 bìa), bảng Đêm vũ trụ và Hoàng hôn tím. Lọc bằng nhóm "Vũ trụ" ở /covers. Cụm bìa có 900 bìa, migration 20261103a.

Bộ lọc trên cùng, ít chiều hơn (09.10.2026)

Bộ lọc chuyển từ cột trái lên thanh ngang trên lưới; mỗi cụm còn 2 đến 3 chiều: Ảnh tĩnh (dạng, phong cách, độ chi tiết), Ảnh động (kiểu chuyển động, phong cách), Bìa sách (nhóm, tĩnh/động, thể loại), Biểu đồ (nhóm, tĩnh/động). Lưới dùng hết bề ngang (tới 5 cột ảnh, 6 cột bìa).

Name-card NEMO (09.10.2026)

/cards: 50 mẫu danh thiếp (10 bố cục x 5 chủ đề màu), 26 mẫu có mã QR trỏ https://www.nemo12.com. Mỗi mẫu sửa được mọi thông tin và xuất PDF vector hai trang (có lề tràn, hoặc thêm dấu cắt) với font Be Vietnam Pro nhúng sẵn, hoặc SVG từng mặt. Khổ 90 x 54 mm + lề tràn 3 mm. Đã kiểm: PDF 2 trang đúng 96 x 60 mm, có FontFile2, không ảnh raster; QR giải mã ra đúng địa chỉ. Skill name-card. Migration 20261104a.

Từ 09.10.2026 mỗi mẫu gắn cố định với một trong năm người của NEMO (mỗi người 10 mẫu), có thêm trường website cá nhân, và mỗi dòng thông tin có công tắc Hiện/Ẩn trong trình sửa.

Name-card Conan School (10.10.2026)

/cards có 100 mẫu cho hai thương hiệu: thêm 50 mẫu Conan School (10 bố cục x 5 chủ đề Canvas, Ink, Paper, Terracotta, Stone) theo hình ảnh của www.conan.school, lọc bằng chiều Brand. Logo Conan là bản vẽ lại vector từ PNG. Chữ giãn cách vẽ từng ký tự vì svg2pdf.js bỏ qua letter-spacing. Migration 20261106c.

Mẫu slide (10.10.2026)

/slides: 50 mẫu (10 loại x 5 chủ đề Conan School), mỗi chủ đề là một bộ 10 trang hoàn chỉnh. Sửa mọi chữ trong trình soạn; xuất PDF vector 16:9 (960 x 540 pt, font nhúng) cho một slide hoặc cả bộ, hoặc SVG. Đã kiểm PDF cả bộ: 10 trang, có FontFile2, không ảnh raster, 58 KB. Skill slide-deck. Migration 20261107a.

Hình giải thích (10.10.2026)

/explainers: sơ đồ giải thích các hệ thống thật của Conan platform theo phương pháp visual-explainer (MIT). Đủ 100 hình: 10 hình đầu (deploy, email, chống trùng cron, công thức ảnh, content-ops, kích hoạt Pro, cache, song ngữ, Ran, SEO bốn cửa), rồi 90 hình về luật repo, sổ rủi ro và chính các hệ của studio. Mỗi hình có chấm chạy theo tỉ lệ thật, làm sáng liên kết giữa chữ và hình, trình chạy từng bước. Nguồn catalog/explainers.json, migration 20261108a (10 hình đầu) và 20261109a (đủ 100). Skill visual-explainer.

Marketing trung tâm tiếng Anh

Hai sản phẩm về cùng chủ đề (11.10.2026). Hình giải thích số 101 tới 112 (slug ec-*, lọc bằng chiều topic = english-center, migration 20261111a): phễu tuyển sinh, hai người mua, kênh, offer, test miễn phí, tốc độ phản hồi, Google Maps, giới thiệu, giữ chân, CAC, hợp tác, video ngắn. Và bộ slide 30 trang ở /slides/deck/english-center-marketing (src/slides/decks.ts): đổi được chủ đề màu, xuất một PDF 30 trang. Nội dung là kinh nghiệm tổng hợp, không có số liệu khảo sát; con số duy nhất (phễu) ghi rõ là ví dụ minh hoạ.

Chứng chỉ

/certificates: 60 mẫu chứng chỉ hoàn thành khoá học, 30 NEMO và 30 Conan School (10 bố cục x 3 chủ đề), A4 ngang. Sửa tên học viên, khoá, người ký, ngày, số chứng chỉ, link QR xác minh; xuất PDF vector 842 x 595 pt. Nguồn src/certs/certs.ts, migration 20261110a. Skill certificate.

Claude Dashboard và Claude Design

/claude-dashboard và /claude-design (11.10.2026): 30 artifact Dashboard (D01 tới D30) và 30 artifact Design có chuyển động (M01 tới M30), dựng bằng hai loại artifact của Claude để đánh giá hai loại này. Artifact sống trên claude.ai, riêng tư cho tới khi chủ sở hữu chia sẻ; studio chỉ liệt kê và dẫn link (src/showcase/claude.ts). Dashboard chạy trên dữ liệu mẫu (không có connector dữ liệu thật). Tài khoản không có loại "Motion": phần chuyển động dùng loại Design. Ghi chú khi đánh giá: Design không có timeline hay scrub, mọi chuyển động là mã viết tay trong artboard, và phát lại hiệu ứng vào cảnh cần mẹo (đổi tên keyframe, ẩn rồi hiện).

Logo NEMO

/logos: 50 logo (10 hình cá x 5 kiểu ghép chữ). Năm hình chỉ có cá con (nhìn ngang, thẳng mặt, từ trên, hình học, nét mảnh), năm hình có cá con và cá bố (che chở, nhìn nhau, bơi theo, bơi vòng, hình học). 16 hệ màu, bấm một lần là cả logo (và cả lưới) đổi màu; tải SVG hoặc PNG gấp 3. Không qua D1. Skill nemo-logo.

Chứng chỉ có nút "Sửa" trên từng mẫu và "Sửa thông tin" trong trang mẫu, cơ chế như name-card: mỗi dòng có ô "Hiện" để ẩn khỏi bản in, thẻ ở danh sách hiện đúng bản đã sửa (11.10.2026).

Web layout

/layouts: 30 layout (L001 tới L030; 15 dùng điều hướng trên, 15 dùng điều hướng trái), 15 thanh điều hướng trên (T001 tới T015), 15 thanh điều hướng trái (S001 tới S015) và các phần tử (P, B, H, K, G, D, I, E, R, F). Mã là một chữ cái + ba chữ số, không đổi sau khi phát hành. Mỗi trang chi tiết có bản xem trước và mã HTML + Tailwind token để chép. Nguồn src/layouts/parts.ts, không qua D1 (thư viện mã, không phải ảnh). Skill web-layout.

Chân trang: skills và thư viện

Mọi trang có khối "Skills / Thư viện của mục này / Nền tảng" ở chân, chọn theo mục đang mở (src/components/credits.tsx, bảng BY_SECTION). Thêm một thư viện vào package.json thì thêm một dòng vào đúng mục ở đó, nếu không trang sẽ ghi thiếu nguồn.