Check SKU mapping before loading CLIP, not after embedding 6k photos

.gitattributes

@@ -36,16 +36,3 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 products-index.json filter=lfs diff=lfs merge=lfs -text
 dist/products-gallery.json filter=lfs diff=lfs merge=lfs -text
 products-gallery.json filter=lfs diff=lfs merge=lfs -text
-# The V.AI STUDIO backdrop, copied from vai-avatar's public/avatars/ folder.
-# Named explicitly rather than with a *.png pattern: a wildcard would also
-# catch the BlurHash and thumbnail PNGs under dist/prodimgs, which are small,
-# numerous and regenerated by the catalogue scripts -- routing ~6,400 of them
-# through LFS would make every catalogue refresh slow and would balloon the
-# repo. Two files, one rule, and the reason is recorded here.
-public/brand/vaistudio_center.png filter=lfs diff=lfs merge=lfs -text
-dist/brand/vaistudio_center.png filter=lfs diff=lfs merge=lfs -text
-
-# Social-share thumbnail (generated by scripts/gen-thumbnail.py). Both copies in
-# LFS: the hub og:image resolves via resolve/main/dist/share/og-image.png.
-public/share/og-image.png filter=lfs diff=lfs merge=lfs -text
-dist/share/og-image.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -1,20 +0,0 @@
-# Dependencies. Only `npm install` output — dist/ and public/catalogue/ are
-# deliberately NOT ignored: this is a static Space, so the built bundle and the
-# vai-avatar mirror must be committed to be served at all.
-node_modules/
-.npm/
-
-# Local logs and caches
-*.log
-.vite/
-.cache/
-
-# Python tooling
-__pycache__/
-*.py[cod]
-.venv/
-venv/
-
-# OS noise
-.DS_Store
-Thumbs.db

PLACEHOLDER

@@ -1 +0,0 @@
-null

README.md

@@ -1,346 +1,74 @@
 ---
-title: Thư viện tìm kiếm ảnh theo ngữ nghĩa ngôn ngữ tự nhiên
+title: Semantic Image Field — Nội thất
 emoji: 🛋️
 colorFrom: yellow
 colorTo: red
 sdk: static
 pinned: false
-short_description: Web App AI thuộc hệ sinh thái VIBE CODE AI của V.AI STUDIO
-thumbnail: dist/share/og-image.png
+short_description: Tìm ảnh nội thất bằng tiếng Việt, chạy trong máy
 header: mini
 tags:
 - ml-intern
 ---
 
-# Thư viện tìm kiếm ảnh theo ngữ nghĩa ngôn ngữ tự nhiên
+# Semantic Image Field — Nội thất
 
-Web App AI thuộc hệ sinh thái **VIBE CODE AI** của **V.AI STUDIO**.
-
-Phái sinh từ [`webml-community/semantic-image-field`](https://huggingface.co/spaces/webml-community/semantic-image-field):
-thay 24.989 ảnh Unsplash bằng **1.222 ảnh nội thất Việt Nam**, cho phép tìm bằng tiếng Việt.
-Danh mục sản phẩm của **vai-avatar** mở trong cùng trình xem ảnh toàn màn hình với ảnh nội thất.
-
-> **ĐÃ XONG** — danh mục sản phẩm của vai-avatar đã nằm trong photo-viewer và tự đồng bộ.
-> Xem [Vì sao trước đây không hoạt động](#vì-sao-trước-đây-không-hoạt-động).
-
-## Vì sao trước đây không hoạt động
-
-Ba lỗi chồng nhau, mỗi lỗi một mình đủ để danh mục không bao giờ hiện:
-
-1. **Space phục vụ một bundle không có code sản phẩm.** `index.html` trỏ tới
-   `index-CigEzVrZ.js` — build từ cây source chưa hề có module catalogue
-   (`grep Malloca` trong bundle đó = 0 hit). Dù mirror có dữ liệu thì cũng vô ích.
-2. **`candidateURLs()` bị Vite phá hủy âm thầm.** `new URL(`../../${path}`,
-   import.meta.url)` bị Vite hiểu thành glob asset và thay bằng map index theo
-   chuỗi literal `../../${path}` (còn nguyên `${}`) → không khớp key nào →
-   `undefined` → mọi candidate đều 404 **dù file mirror có thật**. Cùng lúc đó
-   build kéo README.md, package-lock.json và `products-gallery.json` (11 MB) vào
-   `dist/assets`. Đã sửa: base truyền vào `new URL` dạng biến, nên không còn bị đụng.
-3. **Mirror rỗng và không có gì viết nó.** `public/catalogue/` và `dist/catalogue/`
-   chưa từng được commit. Người duy nhất viết là reconciler trong Space
-   vai-avatar, mà Space đó không có secret nào nên tự tắt (`no HF_TOKEN -> mirror OFF`).
-
-## Đồng bộ bây giờ không cần token
-
-`fetchJSON()` đọc **thẳng dataset** mà vai-avatar ghi và mirror chỉ còn là fallback
-same-origin. Lý do: huggingface.co giờ phản chiếu `Origin` của caller trong
-`Access-Control-Allow-Origin`, trên **cả** hop `/resolve` lẫn hop `/api/resolve-cache`
-mà nó redirect tới — nên Space đọc được cross-origin mà không cần token.
-
-Nhờ vậy thêm / sửa / xóa trên vai-avatar hiện lên đây trong **30 giây** (`POLL_MS`),
-không cần ai commit, không rebuild Space, không cần secret. Mirror vẫn được thử và
-vẫn là nguồn dự phòng: Hub lỗi thì vẫn có catalogue, chứ không trắng shop.
-
-## Trạng thái
-
-| Việc | Trạng thái |
-| --- | --- |
-| Danh mục hiện trong photo-viewer | ✅ 75 sản phẩm, mở ảnh + phân trang + giá + specs |
-| Bundle đúng source hiện tại | ✅ `dist/assets/index.js` + `worker-CYIRI7QN.js` |
-| `candidateURLs()` sau build | ✅ còn nguyên, không bị Vite glob |
-| Bundle không kéo file rác | ✅ `grep 'Object.assign({"'` = 0 |
-| `public/catalogue/` + `dist/catalogue/` | ✅ 69 products + 58 productEdits |
-| Đọc dataset trực tiếp (không cần token) | ✅ đã build + kiểm chứng bằng browser thật |
-| Thêm / Sửa / Xóa đồng bộ | ✅ trong 30s, không cần commit |
-| Mirror tự cập nhật trong repo | ⚪ tuỳ chọn — cần secret `HF_TOKEN` ở vai-avatar |
-| Token `HF_TOKEN` trong vai-avatar | ❌ chưa có — Space hiện đang chạy không cần nó |
-| Token `HF_TOKEN` trong vai-avatar | ❓ **chưa kiểm — cần đọc log container** |
-
-**Còn hai việc, đúng thứ tự. Không mục nào cần credits:**
-
-1. **Kiểm tra `HF_TOKEN`** trong vai-avatar (10 giây)
-2. **Chạy `npm run refresh:catalogue`** (~3 phút)
-
-PR #1 đã đóng do merge conflict; [PR #2](https://huggingface.co/spaces/bep40/vai-avatar/discussions/2)
-là bản thay thế, đã merge.
-
-## Ghi chú vận hành
-
-### 1. Kiểm tra token
-
-```sh
-curl -s -H "Authorization: Bearer $HF_TOKEN" \
-  https://huggingface.co/api/spaces/bep40/vai-avatar/secrets | jq keys
-```
-
-Chỉ trả **tên** secret. Không thấy `HF_TOKEN` thì thêm vào
-[settings](https://huggingface.co/spaces/bep40/vai-avatar/settings), **không cần sửa mã**.
-
-**Vì sao đây là nghi phạm số một:** cả hai dataset đều **public**, nên `readDataset()` chạy
-được không cần token. Nhưng `commitMirror()` **bắt buộc** có token. Thiếu token thì cả vòng
-reconcile `return` sớm ở dòng đầu, **không in gì**. Đúng triệu chứng "im lặng" đang thấy.
-
-Nếu token đã có mà vẫn im lặng, xem tab **Logs** trên trang Space của vai-avatar:
-
-| Log | Nghĩa là | Hành động |
-| --- | --- | --- |
-| **Không có** dòng `[catalogue-mirror-boot]` | Wrapper chưa chạy | Báo lại, đây là lỗi thật |
-| `could not load catalogue-mirror.ts` | Lỗi cú pháp | Báo lại kèm log |
-| `reconciler RUNNING … token=NO` | Thiếu token | Thêm `HF_TOKEN` rồi restart |
-| `SYNCED …` | Mirror đã ghi | Chờ ~2 phút rồi làm bước 2 |
-| Vòng 2+ im lặng | Đúng, không có gì đổi | Không làm gì |
-| `SYNCED` **lặp mỗi vòng** | Rebuild loop | **Dừng ngay** |
-| `commit rejected HTTP 403` | Token thiếu quyền sang repo khác | Thêm quyền, không phải lỗi mã |
-
-### 2. Build lại bundle
-
-```sh
-git clone https://huggingface.co/spaces/bep40/semantic-image-field
-cd semantic-image-field
-npm install
-npm run refresh:catalogue
-```
-
-~3 phút, miễn phí. `refresh:catalogue` = sync → guard → build → verify `dist/catalogue` →
-repoint `index.html` → commit → push.
-
-**Đừng dùng `npm run seed:catalogue`** — nó chỉ tải JSON, **không build**. Chạy nó sẽ cho
-sản phẩm hiện lên mà vẫn lỗi đồng bộ, tức kết quả tệ hơn hiện tại vì trông như đã xong.
-
-**Vì sao bước này là quyết định:** `dist/assets/` hiện chỉ có bundle **có hash**
-(`index-CigEzVrZ.js`). `vite.config.js` đặt `entryFileNames: 'assets/index.js'` — tên không
-hash — nên `vite build` **chưa từng chạy** kể từ khi cấu hình đó được đặt. Sáu bản vá trong
-`src/` **đã** trên `main` nhưng **chưa** nằm trong bundle đang chạy.
-
-## Một cảnh báo về cách kiểm
-
-`list` với **đường dẫn tới một file** trả `File not found` dù file đó có thật. Phải `list`
-**thư mục cha** rồi đọc danh sách.
-
-Cụ thể: `dist/assets/index-CigEzVrZ.js` trả `File not found`, nhưng `list dist/assets`
-liệt kê đúng file đó (263.4 KB). Tin `File not found` thì kết luận sai là bundle đã mất
-và Space trắng trang — trong khi nó vẫn chạy.
-
-Với **thư mục** thì `list` đáng tin: `dist/catalogue` báo not-found và `list` xác nhận nó
-thật sự không tồn tại.
-
-## Token: đọc ở đâu cho đúng
-
-`startCatalogueMirrorReconciler()` in sẵn trạng thái token lúc khởi động:
-
-```
-[catalogue-mirror] reconciler RUNNING | target=bep40/semantic-image-field@main
-  | every 120s | token=yes
-```
-
-**Không cần** gọi `/api/share-persist`. Route đó được `applyPatches()` tiêm *có điều kiện*
-vào `index.ts` lúc chạy, chỉ khi thấy anchor `'"/*": { GET: serveStatic },'` và
-`tryWriteIndex()` qua kiểm tra cú pháp. Thiếu anchor là 404 — **tương thích với việc token
-có tồn tại**, nên 404 không nói được gì về token.
-
-Dòng "Space này hiện CHƯA có `HF_TOKEN`" trong `boot.ts` là lời tuyên bố trong source, có
-thể đã cũ. Nguồn đúng là log container.
-
-## Vì sao hai nguồn vẫn ra một sản phẩm
-
-Một máy giặt Hitachi nằm ở **cả hai** nguồn, hai nguồn gọi nó bằng hai tên khác nhau —
-đọc trực tiếp từ Hub, không phỏng đoán:
-
-| | `products_url_added.json` | `promos.json` |
-| --- | --- | --- |
-| key / `sku` / `model` | `BD-1054HVOW` | `357869` |
-| `slug` | `bd-1054hvow-may-giat-…` | `357869-may-giat-…` |
-| **`name` / `n`** | **`Máy giặt Hitachi Inverter 10.5 kg BD-1054HVOW`** | **giống hệt** |
-| giá | `pn` = 5.990.000 | `priceNum` = 6.490.000 |
-
-`sku` và `slug` **không** khớp, nhưng `name` giống nhau và `identityAliases()` đã lấy
-`name` làm bí danh — nên hai bản ghi là **một** sản phẩm, và giá 6.490.000 nhập đè lên bản
-ghi gốc.
-
-**Đã cân nhắc và loại bỏ một cách khắc phục khác.** Con số `357869` chỉ nằm trong URL ảnh,
-không field nào chứa nó, nên đào URL để ghép cứng là cách sửa hiện trường. Không dùng: ghép
-cứng theo id trong URL có thể hợp nhất nhầm hai sản phẩm, mà lỗi đó cho ra một bản ghi
-*trông vẫn đầy đủ* — khó phát hiện hơn nhiều so với một thẻ bị lặp.
-
-Bí danh theo `name` vẫn an toàn: bí danh mà hai sản phẩm cùng nhận bị loại như mơ hồ.
-
-## Nguồn dữ liệu sản phẩm
-
-| Thao tác trên vai-avatar | Nguồn | Nội dung |
-| --- | --- | --- |
-| Thêm SP | `bep40/grob-products-updated/products_url_added.json` | `n`, `imgs`, `p`, `pn`, `specs`, `feats` |
-| Thêm / Sửa / Xóa SP | `bep40/vaistudio-data/promos.json` → `productEdits[sku]` | `{ name, priceNum, images }` hoặc `{ deleted: true }` |
-
-**Xóa là bia mộ**, không phải xoá bản ghi. `buildCatalogue` bỏ qua bản ghi có `deleted`, đúng
-như `getAddedProducts()` / `isDeleted()` của vai-avatar. Nếu không, sản phẩm đã xoá hiện
-vĩnh viễn.
-
-**Phạm vi hẹp:** hai file này là bản *thêm / sửa / xoá*, không phải catalogue đầy đủ.
-Catalogue gốc Malloca ~6.000 sản phẩm nằm trong Parquet và không được nhân bản. Sửa một SKU
-thuộc catalogue gốc sẽ không có bản ghi để áp overlay.
-
-Xếp hạng dùng từ khoá, không dùng ma trận CLIP đã nướng: sản phẩm vừa thêm là tìm được
-ngay ở truy vấn kế tiếp, không phải chờ mã hoá lại toàn bộ ảnh.
-
-## Sáu lỗi đồng bộ đã sửa
-
-Cả sáu đều **fail im lặng**, và cả sáu triệu chứng đều đọc ra giống nhau là "sửa sp không
-đồng bộ".
-
-**Trong `src/catalogue.js`:**
-
-1. **Hai nguồn không thống nhất danh tính.** Ghép mỗi file theo field riêng sẽ liệt kê máy
-   giặt hai lần và mọi "Sửa SP" sẽ vô hình. Nay mỗi bản ghi nhận diện qua tập bí danh.
-2. **"Xóa SP" im lặng không làm gì.** vai-avatar ghi bản sửa ở
-   `productEdits[p.sku || p.model]` — key của object là định danh chính, không phải dự
-   phòng. Trước đây chỉ field *bên trong* bản sửa được dùng để tra; một bia mộ không mang
-   field nào nên danh sách rỗng, key trần biến thành mục mới, bản ghi thật không bao giờ bị
-   đánh dấu, và sản phẩm cứ ở lại mãi. Nay key cũng được tra qua bảng bí danh.
-3. **Bản sửa có nhưng không thấy.** Bộ đọc ưu tiên field ngắn của scraper, nên `priceNum` mới
-   bị `p` cũ che mất. `EDIT_SUPERSEDES` xoá bản ghi cũ trước khi bản sửa nhập.
-4. **Overlay rỗng hồi sinh sản phẩm đã xoá.** `promos.json` mang mọi Sửa và mọi Xóa. Trả
-   `{}` khi đọc lỗi không chỉ mất sửa đổi mà còn hồi sinh sản phẩm đã xoá và hoàn nguyên mọi
-   giá — **không báo lỗi**, vì kết quả vẫn hợp lệ nên `tryLoadCatalogue()` báo thành công
-   và vòng poll 90 giây thay dữ liệu bị hoàn nguyên vào như một bản cập nhật thật. Nay dùng
-   overlay hợp lệ gần nhất.
-5. **`sync-catalogue.mjs` báo thành công khi mirror đang lẫn.** Một nguồn fetch lỗi thì file
-   đó giữ bản commit trước, `refresh-catalogue.mjs` vẫn pass các guard, build, commit, in
-   `REFRESH_OK` — và `products.json` mới nằm cạnh `promos.json` cũ, nên mọi Sửa và Xóa ngừng
-   áp dụng mà không báo lỗi. Nay bất kỳ nguồn nào lỗi thì cả lần chạy fail, caller dừng
-   trước build.
-6. **Reconciler có thể rơi vào vòng rebuild vô tận.** `readTarget()` đọc qua `/resolve/`, có
-   cache CDN: ngay sau khi commit thành công, endpoint vẫn trả nội dung cũ. Check "diff
-   trước khi commit" thấy lệch nên commit lại **byte giống hệt**, mỗi commit lại rebuild
-   Space target. Chính cái check sinh ra để chặn rebuild loop là đường đi vào nó. Nay commit
-   do chính process đó nhận 200 được lưu lại và thắng đọc cache (C7). Đánh đổi có chủ đích:
-   sửa tay mirror dưới lúc container chạy sẽ không được tự vá tới khi restart.
-
-## Một sửa chữa đã âm thầm
-
-Wrapper ban đầu viết static import ở dòng 1. ESM **hoist** static import: nó nạp và đánh giá
-*trước* mọi câu lệnh trong file. Nên nếu `catalogue-mirror.ts` lỗi cú pháp, cả wrapper chết
-trước khi reconciler kịp chạy → CMD rơi về `bun boot.ts` → **site lên, share-link chạy,
-chỉ catalogue-mirror tắt, không một dòng log nào**. Người đọc log tưởng PR chưa merge.
-
-Đã đổi sang dynamic `import()` bọc `try/catch`, thêm hai dòng log tường minh: `reconciler
-STARTED` khi bật được, `could not load …` khi lỗi. **Mirror lỗi còn hơn mirror vô hình.**
-
-## Vì sao vẫn giữ mirror, dù giờ đã đọc dataset được
-
-**Cách đọc đã đổi, và đo lại thay vì tin tài liệu cũ.** Trước đây Hub gửi
-`Access-Control-Allow-Origin: https://huggingface.co` cho file dataset và `/resolve`
-redirect sang host CDN với chính sách riêng — origin của Space không thuộc về cả hai
-nên fetch chết. **Điều đó không còn đúng:** Hub nay phản chiếu `Origin` của caller
-trong ACAO, trên *cả* hop `/resolve` lẫn hop `/api/resolve-cache`, và kể cả
-`Origin: null`. Nên `fetchJSON()` đọc thẳng dataset trước, không cần token.
-
-Mirror **không bị bỏ**: nó là đường dự phòng same-origin, nên khi Hub/CDN giật
-(`5xx`, mạng chết, offline) catalogue vẫn còn thay vì trắng shop. Thứ tự thử là
-dataset → mirror, và mọi candidate đều phải **parse được + đúng shape** mới được
-nhận, nên một body HTML lỗi hay bị cắt cụt không bao giờ bị coi là catalogue.
-
-## Đồng bộ tự động — không cần writer
-
-Space này là `sdk: static`: không có server, không thể tự đẩy dữ liệu, cũng không thể ghi bất
-cứ thứ gì. `bep40/vai-avatar` thì có server, có sẵn reconciler 20 giây cho link chia sẻ
-(nguồn: `boot.ts`) và self-test tự chứng minh đường ghi Hub dùng được. Mở rộng cơ chế có
-sẵn rẻ hơn nhiều so với tạo cron mới — cron tốn credits ngay cả lúc tạo, đã kiểm chứng:
-`POST /api/scheduled-jobs/…` trả `402`.
-
-[PR #2](https://huggingface.co/spaces/bep40/vai-avatar/discussions/2) đã merge vào `main` của
-vai-avatar. Nó thêm `catalogue-mirror.ts` + `catalogue-mirror-boot.ts` + sửa `Dockerfile`.
-Wrapper chỉ start reconciler rồi `import("./boot.ts")` nên **`boot.ts` không bị sửa**. Chuỗi
-CMD 3 tầng:
-
-```
-bun catalogue-mirror-boot.ts || bun boot.ts || bun entry_ai_image.ts
-```
-
-Reconciler đọc hai nguồn mỗi 120 giây và commit `public/catalogue/` + `dist/catalogue/`
-**chỉ khi byte thật sự khác**. Không job định kỳ, không credit.
-
-**Nhưng reconciler đang TẮT và điều đó không còn là vấn đề.** Space vai-avatar không
-có secret nào (`GET /api/spaces/bep40/vai-avatar/secrets` → `[]`), nên
-`catalogue-mirror.ts` tự báo `"no HF_TOKEN/VAISTUDIO -> mirror OFF"` và không ghi gì.
-Trước đây điều đó chết dây chuyền đồng bộ; giờ thì không: Space này đọc thẳng dataset
-nên **không cần writer nào cả**. Muốn bật reconciler thì chỉ để cho mirror trong repo
-tự mới theo (tiện khi rollback, có bản dữ liệu nằm trong lịch sử git) — không bắt
-buộc, và là thay đổi hạ tầng trên Space đang chạy production nên cần bạn quyết.
-
-⚠️ Mỗi commit lên `main` của vai-avatar đều rebuild Docker của Space đang phục vụ khách.
+Bản phái sinh của [`webml-community/semantic-image-field`](https://huggingface.co/spaces/webml-community/semantic-image-field),
+thay bộ ảnh Unsplash 24.989 ảnh bằng **1.222 ảnh thiết kế nội thất Việt Nam** và cho phép
+**tìm kiếm bằng tiếng Việt**.
 
 ## Thay đổi so với bản gốc
 
 | | Bản gốc | Bản này |
 | --- | --- | --- |
 | Bộ ảnh | Unsplash, 24.989 ảnh | Nội thất VN, **1.222 ảnh** |
-| Model text | `Xenova/clip-vit-base-patch16` | `bep40/clip-vit-b32-multilingual-vi-text` (**50+ ngôn ngữ**) |
+| Model text | `Xenova/clip-vit-base-patch16` (tiếng Anh) | `bep40/clip-vit-b32-multilingual-vi-text` (**50+ ngôn ngữ**) |
 | Nguồn ảnh | `images.unsplash.com` | `bep40/interior-image-field-assets` |
 | Giao diện | Tiếng Anh | Tiếng Việt |
 
 Model text là bản đóng gói của
-[`sentence-transformers/clip-ViT-B-32-multilingual-v1`](https://huggingface.co/sentence-transformers/clip-ViT-B-32-multilingual-v1).
-Bản gốc trên Hub chỉ export tới `last_hidden_state` 768 chiều, nên bản fork này nối thêm
-mean-pooling, phép chiếu 768→512 và chuẩn hoá L2, rồi đặt tên `text_model.onnx` theo đúng quy
-ước CLIP để Transformers.js nạp được mà không cần sửa mã nguồn.
+[`sentence-transformers/clip-ViT-B-32-multilingual-v1`](https://huggingface.co/sentence-transformers/clip-ViT-B-32-multilingual-v1)
+(text tower DistilBERT được huấn luyện để khớp không gian 512-d của CLIP-ViT-B-32).
+Bản gốc trên Hub chỉ export tới `last_hidden_state` 768-chiều, nên bản fork này nối thêm
+mean-pooling, phép chiếu 768→512 và chuẩn hoá L2, đặt tên `text_model.onnx` theo đúng
+quy ước CLIP để Transformers.js nạp được không cần sửa mã nguồn.
+
+Ảnh được mã hoá **ngoại tuyến** bằng CLIP-ViT-B-32 (`Xenova/clip-vit-base-patch32`),
+lưu thành float32 thô 512 chiều mỗi ảnh. Mỗi bản ghi kèm `ar` và BlurHash `blur` để
+`layout.js` và `image-loader.js` hoạt động như thiết kế gốc.
+
+## Vẫn giữ nguyên
 
-Ảnh được mã hoá **ngoại tuyến** bằng CLIP-ViT-B-32, lưu thành float32 thô 512 chiều mỗi ảnh.
-Mỗi bản ghi kèm `ar` và BlurHash `blur`. Chuyển động, bố cục Fibonacci, xem toàn màn hình, bàn
-phím và `prefers-reduced-motion` giữ nguyên theo bản gốc. Số ảnh hiển thị đồng thời vẫn là 96
+Toàn bộ chuyển động, bố cục Fibonacci, hiệu ứng liên quan, xem toàn màn hình, hỗ trợ
+bàn phím và `prefers-reduced-motion` của bản gốc. Số ảnh hiển thị đồng thời vẫn là 96
 (56 trên màn hình hẹp).
 
-## Triển khai
+## Chạy
+
+Không có server, API key hay cơ sở dữ liệu. Suy luận và xếp hạng diễn ra trên máy người
+dùng; truy vấn không được gửi đi. Lần dùng đầu cần tải model (~130 MB) và ảnh từ
+Hugging Face.
 
 ```sh
 npm install
-npm run sync:catalogue     # ghi public/catalogue/{products,promos}.json
-npm run refresh:catalogue  # sync + build + kiểm + trỏ index.html + commit + push
+npm run dev
 ```
 
-Space phục vụ `index.html` ở gốc. File này **không** phải input của Vite (input là
-`app.html`), nên `vite build` không bao giờ sửa nó — hai dòng trong đó là thứ duy nhất nối Space
-với bundle.
-
-**Đừng sửa tay `index.html` sang tên cố định trước khi `dist/assets/index.js` tồn tại.**
-Trỏ tới file không có thì Space trắng trang. `repointIndexHtml()` kiểm tra tồn tại trước khi
-ghi nên chạy qua script là an toàn.
-
-`vite.config.js` đặt `emptyOutDir: false` vì `dist/` còn chứa khoảng 6.400 file dữ liệu đã
-commit mà không bước build nào sinh lại được. Nếu bật `emptyOutDir`, chúng biến mất mà ứng
-dụng vẫn chạy bình thường, không báo lỗi.
-
-`refresh-catalogue.mjs` chỉ commit path tường minh: `index.html`, `public/catalogue`,
-`dist/catalogue`, `dist/assets`. Không path nào trùng pattern LFS trong `.gitattributes`
-(pattern là `products-index.json` / `products-gallery.json` — tên cụ thể, không phải
-`products.json`), nên con trỏ LFS không bao giờ được commit nhầm.
-
-## Kiểm tra nghiệm thu
+## URL truy cập
 
-Sau khi `npm run refresh:catalogue` chạy xong, mở Space và tìm `BD-1054HVOW`:
+Space này dùng **static SDK**, nên không có `https://<id>.hf.space` (trả 404 —
+đúng cả với bản gốc `webml-community/semantic-image-field`). Host đúng là:
 
-- xuất hiện **đúng một lần**
-- giá hiện **6.490.000₫**, không phải `5.990.000₫` cũ
-- bấm vào mở được trong cùng trình xem toàn màn hình với ảnh nội thất
+**https://bep40-semantic-image-field.static.hf.space**
 
-**Chưa kiểm được:** Space chưa từng build lại từ cây nguồn này. Toàn bộ mã `src/` và `scripts/`
-là mã đã đọc và kiểm từng dòng; các kết luận trên dựa trên **dữ liệu thật đã đọc từ Hub**,
-không phải suy đoán.
+> `README.md` không được khai báo `app_file`: static Space phục vụ thư mục gốc repo,
+> không phải đường dẫn trong `app_file`.
 
-## URL
+`products-index.json` được nhân bản vào chính Space này và app fetch cùng-origin.
+Hub chỉ gửi `Access-Control-Allow-Origin: https://huggingface.co` cho file dataset,
+nên fetch từ domain `*.static.hf.space` sẽ bị CORS chặn.
 
-Space dùng **static SDK**, nên `https://<id>.hf.space` trả 404 (đúng cả với bản gốc). Host đúng
-là **https://bep40-semantic-image-field.static.hf.space**
 
 Công nhận: ảnh thuộc về các tác giả trên
-[noithatphuphat.com](https://noithatphuphat.com). Pipeline suy luận theo ví dụ
-[`semantic-image-search-web`](https://github.com/huggingface/transformers.js-examples/tree/main/semantic-image-search-web).
+[noithatphuphat.com](https://noithatphuphat.com). Pipeline suy luận dựa trên ví dụ
+[`semantic-image-search-web`](https://github.com/huggingface/transformers.js-examples/tree/main/semantic-image-search-web).

app.html

@@ -1,28 +0,0 @@
-<!doctype html>
-<html lang="vi">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="theme-color" content="#111210" />
-    <meta name="description" content="Web App AI thuộc hệ sinh thái VIBE CODE AI của V.AI STUDIO" />
-    <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
-    <link rel="preconnect" href="https://huggingface.co" />
-    <title>Thư viện tìm kiếm ảnh theo ngữ nghĩa ngôn ngữ tự nhiên</title>
-  </head>
-  <body>
-    <!--
-      This is the BUILD TEMPLATE, not the served page.
-
-      vite.config.js sets build.rollupOptions.input to this file, so Vite emits
-      dist/app.html with the hashed asset references injected. The Space serves
-      the ROOT index.html, which is hand-maintained and loads ./dist/assets/…
-
-      Keeping them separate matters: if the root index.html were also the build
-      input, `vite build` would rewrite it, and the very first build would point
-      the live Space at bundles that do not exist yet — a blank page with no
-      error. See app.html in the repo root.
-    -->
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>

dist/app.html

@@ -1,29 +0,0 @@
-<!doctype html>
-<html lang="vi">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="theme-color" content="#111210" />
-    <meta name="description" content="Web App AI thuộc hệ sinh thái VIBE CODE AI của V.AI STUDIO" />
-    <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
-    <link rel="preconnect" href="https://huggingface.co" />
-    <title>Thư viện tìm kiếm ảnh theo ngữ nghĩa ngôn ngữ tự nhiên</title>
-    <script type="module" crossorigin src="./assets/index.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/app.css">
-  </head>
-  <body>
-    <!--
-      This is the BUILD TEMPLATE, not the served page.
-
-      vite.config.js sets build.rollupOptions.input to this file, so Vite emits
-      dist/app.html with the hashed asset references injected. The Space serves
-      the ROOT index.html, which is hand-maintained and loads ./dist/assets/…
-
-      Keeping them separate matters: if the root index.html were also the build
-      input, `vite build` would rewrite it, and the very first build would point
-      the live Space at bundles that do not exist yet — a blank page with no
-      error. See app.html in the repo root.
-    -->
-    <div id="root"></div>
-  </body>
-</html>

dist/assets/app.css

@@ -1,2 +0,0 @@
-/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-ease:initial;--neon-angle:0deg}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--ease-out:cubic-bezier(0, 0, .2, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-x-0{inset-inline:0}.top-60{top:calc(var(--spacing) * 60)}.bottom-0{bottom:0}.isolate{isolation:isolate}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.table{display:table}.h-dvh{height:100dvh}.w-full{width:100%}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.resize{resize:both}.items-center{align-items:center}.justify-between{justify-content:space-between}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.border{border-style:var(--tw-border-style);border-width:1px}.capitalize{text-transform:capitalize}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter\!{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)!important}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}}@property --neon-angle{syntax:"<angle>";inherits:false;initial-value:0deg}.image-tile{--neon:#22f5d0;--neon-soft:#7ef9ff;--neon-run:2.6s}.image-tile.exact,.image-tile.featured{--relevance-opacity:1!important;--relevance-blur:0px!important}.image-tile.exact:before,.image-tile.featured:before{content:"";z-index:2;background:conic-gradient(from var(--neon-angle,0deg), var(--neon) 0deg, var(--neon-soft) 38deg, #fff 70deg, var(--neon-soft) 102deg, var(--neon) 148deg, #22f5d05c 250deg, #22f5d000 344deg, var(--neon) 360deg);-webkit-mask-composite:xor;pointer-events:none;-webkit-mask-composite:xor;-webkit-mask-source-type:auto,auto;-webkit-mask-composite:xor;-webkit-mask-source-type:auto,auto;border-radius:2px;padding:1px;position:absolute;inset:0;transform:none;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.image-tile.exact:after,.image-tile.featured:after{content:"";z-index:1;background:conic-gradient(from var(--neon-angle,0deg), #22f5d000 0deg, #22f5d085 62deg, #b6fdffc4 92deg, #22f5d05e 138deg, #22f5d01f 250deg, #22f5d000 348deg, #22f5d000 360deg);-webkit-mask-composite:xor;filter:blur(4px);opacity:.82;box-shadow:none;pointer-events:none;-webkit-mask-composite:xor;-webkit-mask-source-type:auto,auto;-webkit-mask-composite:xor;-webkit-mask-source-type:auto,auto;border-radius:2px;padding:2.5px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}@keyframes neon-run{0%{--neon-angle:0deg}to{--neon-angle:360deg}}@supports at-rule(@property){.image-tile.exact:before,.image-tile.featured:before,.image-tile.exact:after,.image-tile.featured:after{animation:neon-run var(--neon-run) linear infinite}}.image-tile.featured{--neon-run:2s}.image-tile.featured:before{padding:1.5px}@media (prefers-reduced-motion:reduce){.image-tile.exact:before,.image-tile.exact:after,.image-tile.featured:before,.image-tile.featured:after{animation:none}}:root{color:#deded7;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#10110f;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline-offset:5px;outline:2px solid #d7e1d1}.brand-backdrop{z-index:0;pointer-events:none;opacity:.3;background-color:#10110f;background-image:url(../brand/vaistudio_center.png);background-position:50%;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;position:fixed;inset:0}@media (width<=768px){.brand-backdrop{background-position:top;background-repeat:repeat;background-size:100%;background-attachment:scroll}}.app{background:0 0;min-height:320px;overflow:clip}.image-field{contain:strict;position:absolute;inset:0;overflow:clip}.image-tile{will-change:transform;transform-origin:50%;background-color:#252823;background-size:cover;border:0;border-radius:2px;padding:0;display:block;position:absolute;top:0;left:0;overflow:hidden;box-shadow:0 1px 5px #0002}.image-tile img{object-fit:cover;opacity:0;filter:brightness(.92);width:100%;height:100%;transition:opacity .12s,filter .12s;position:absolute;inset:0}.image-tile img.loaded{opacity:1}.image-tile:hover{box-shadow:0 10px 35px #0005}.image-tile:hover img{filter:brightness()}.image-share{z-index:1;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#e6ebe0;opacity:0;background:#0d0f0bb8;border-radius:6px;place-items:center;width:22px;height:22px;transition:opacity .16s,transform .16s,background .16s,color .16s;display:grid;position:absolute;top:5px;right:5px;transform:scale(.82)}.image-share svg{width:13px;height:13px}.image-share:hover{color:#fff;background:#0d0f0be6}.image-share[hidden]{display:none}.image-tile:hover .image-share,.image-tile:focus-within .image-share,.image-tile[data-rank="1"] .image-share,.image-tile[data-rank="2"] .image-share,.image-tile[data-rank="3"] .image-share{opacity:1;transform:scale(1)}@media (prefers-reduced-motion:reduce){.image-share{transition:opacity .12s linear}}.image-tile{opacity:var(--relevance-opacity,1);filter:blur(var(--relevance-blur,0px));transition:opacity .65s,filter .65s}.image-tile:hover,.image-tile:focus-visible{opacity:1;filter:blur()}.image-tile:hover,.image-tile:focus-within{z-index:2147483647}.vignette{pointer-events:none;z-index:300;background:radial-gradient(#0000 42%,#0c0d0b30 100%),linear-gradient(0deg,#10110f99,#0000 70px);position:absolute;inset:0}.grain{z-index:301;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E");position:absolute;inset:0}.search-center{z-index:400;width:clamp(350px,36vw,640px);max-width:calc(100% - 44px);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.search-pill{-webkit-backdrop-filter:blur(26px)saturate(.7);backdrop-filter:blur(26px)saturate(.7);background:#e4e8ddbb;border-radius:999px;height:clamp(62px,4.8vw,84px);transition:background .25s,box-shadow .25s;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff3d,0 6px 36px #00000018}.search-pill:focus-within{background:#e6eaddd4;box-shadow:inset 0 1px #ffffff52,0 5px 40px #0002}.search-pill input{color:#20251f;letter-spacing:-.035em;caret-color:#323b2d;background:0 0;border:0;outline:none;width:100%;height:100%;padding:0 58px 0 27px;font-size:clamp(22px,1.8vw,30px)}.search-pill input::placeholder{color:#565d54;opacity:1}.search-pill input::selection{background:#80957070}.clear-button{color:#4c5449;background:0 0;border:0;border-radius:50%;place-items:center;width:34px;height:34px;padding:7px;transition:background .15s;display:grid;position:absolute;top:50%;right:13px;transform:translateY(-50%)}.clear-button:hover{background:#0000000d}.clear-button svg{width:18px;height:18px}.search-progress{opacity:0;height:1px;transition:opacity .3s;position:absolute;bottom:0;left:24px;right:24px;overflow:hidden}.search-progress.visible{opacity:.5}.search-progress span{background:#47513f;height:100%;transition:width .3s;animation:1.6s ease-in-out infinite progress-glow;display:block}.search-status{letter-spacing:.01em;color:#d2d6ccc9;text-shadow:0 1px 5px #000,0 1px 12px #000;pointer-events:none;justify-content:center;align-items:center;gap:7px;min-height:20px;font-size:12px;display:flex;position:absolute;top:calc(100% + 13px);left:-28px;right:-28px}.status-dot{background:#d2d8c9;border-radius:50%;width:4px;height:4px;animation:1.6s ease-in-out infinite progress-glow}.has-error-inline{color:#e8b4a9;text-align:center}.has-error{pointer-events:auto;text-shadow:none;background:#171b16ee;border-radius:10px;flex-wrap:wrap;padding:12px;font-size:14px}.has-error button{color:#eee;background:0 0;border:0;border-bottom:1px solid #ccc;padding:0}.error-detail{text-align:center;opacity:.7;overflow-wrap:anywhere;width:100%;font-size:12px}.footer{z-index:401;color:#bac0b395;letter-spacing:.015em;padding:20px 24px;font-size:12px}.footer a{color:inherit;text-decoration:none;transition:color .2s}.footer a:hover{color:#f5f6ef}.version{opacity:.55;margin-left:5px}.footer-divider{opacity:.5;padding:0 8px}@keyframes progress-glow{0%,to{opacity:.4}50%{opacity:1}}@media (width<=650px){.search-center{width:min(82vw,400px)}.search-pill{height:60px}.search-pill input{padding-left:23px;font-size:22px}.footer{padding:16px;font-size:12px}.footer .version,.footer-divider{display:none}.footer>span{font-size:0}.footer>span:after{content:"On-device search";font-size:12px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.photo-viewer{color:#e8eae3;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#0c0e0bdc;border:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;position:fixed;inset:0;overflow:hidden}.photo-viewer[open]{animation:.42s both viewer-reveal;display:block}.photo-viewer::backdrop{background:#0005}.photo-viewer.is-closing{opacity:0;transition:opacity .32s;animation:none}.photo-toolbar{z-index:2;pointer-events:none;justify-content:space-between;align-items:center;display:flex;position:absolute;inset:18px 24px auto}.photo-toolbar a,.photo-toolbar button{pointer-events:auto;color:#e0e5d9;background:#12160fe6;border:1px solid #ffffff18;border-radius:999px}.photo-toolbar a{padding:12px 17px;font-size:14px;text-decoration:none}.photo-toolbar button{place-items:center;width:44px;height:44px;display:grid}.photo-share{white-space:nowrap;align-items:center;gap:9px;display:inline-flex}.photo-share svg{flex:none;width:17px;height:17px}.photo-share:hover{color:#fff;background:#1b2115f2;border-color:#ffffff2e}@media (width<=560px){.photo-share span{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.photo-share{padding:12px}}.photo-toolbar svg{width:22px;height:22px}.photo-origin{pointer-events:none;color:#e0e5d9;text-overflow:ellipsis;white-space:nowrap;background:#12160fe6;border:1px solid #ffffff18;border-radius:999px;max-width:60vw;padding:12px 17px;font-size:14px;overflow:hidden}.photo-viewport{place-items:center;padding:72px 24px 40px;display:grid;position:absolute;inset:0;overflow:auto}.photo-frame{width:min(1800px, calc(100vw - 48px), calc((100dvh - 128px) * var(--photo-ar)));aspect-ratio:var(--photo-ar);cursor:zoom-in;transform-origin:50%;background-color:#161912;background-size:100% 100%;border:0;border-radius:3px;flex:none;padding:0;display:block;box-shadow:0 12px 70px #0005}.photo-frame img{object-fit:contain;opacity:0;width:100%;height:100%;transition:opacity .3s;display:block}.photo-frame img.loaded{opacity:1}.photo-viewport.is-zoomed{display:block}.photo-viewport.is-zoomed .photo-frame{width:max(calc(100vw - 48px), calc((100dvh - 128px) * var(--photo-ar)));cursor:zoom-out;margin:0 auto}@keyframes viewer-reveal{0%{opacity:0}to{opacity:1}}.photo-step{color:#e0e5d9;background:#12160fd9;border:1px solid #ffffff18;border-radius:50%;place-items:center;width:46px;height:46px;padding:0;transition:background .18s,border-color .18s;display:grid;position:absolute;top:50%;transform:translateY(-50%)}.photo-step:hover{background:#1b2118e6;border-color:#ffffff2e}.photo-step svg{width:22px;height:22px}.photo-step.is-prev{left:18px}.photo-step.is-next{right:18px}@media (width<=650px){.photo-step{width:38px;height:38px}.photo-step.is-prev{left:8px}.photo-step.is-next{right:8px}}.photo-caption{z-index:2;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#0f130ccc;border:1px solid #ffffff17;border-radius:10px;max-width:min(560px,100vw - 48px);padding:12px 16px;position:absolute;bottom:18px;left:24px;right:24px}.photo-caption-price{color:#dfe6d2;margin:0 0 6px;font-size:15px;font-weight:600}.photo-caption-specs{gap:3px;margin:0;font-size:12px;display:grid}.photo-caption-specs>div{grid-template-columns:minmax(0,40%) minmax(0,60%);gap:10px;display:grid}.photo-caption-specs dt{color:#98a08f;overflow-wrap:anywhere}.photo-caption-specs dd{color:#d2d7cb;overflow-wrap:anywhere;margin:0}.photo-counter{z-index:2;font-variant-numeric:tabular-nums;color:#d2d7cb;background:#0f130ccc;border:1px solid #ffffff17;border-radius:999px;margin:0;padding:6px 12px;font-size:12px;position:absolute;bottom:22px;right:24px}@media (width<=650px){.photo-caption{padding:10px 12px;bottom:12px;left:12px;right:12px}.photo-counter{display:none}}.photo-detail{z-index:2;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#0f130ce8;border:1px solid #ffffff1f;border-radius:12px;width:min(460px,100vw - 48px);position:absolute;bottom:18px;left:24px;overflow:hidden}.photo-detail-summary{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:10px;padding:11px 14px;list-style:none;display:flex}.photo-detail-summary::-webkit-details-marker{display:none}.photo-detail-summary:hover{background:#ffffff0a}.photo-detail-title{color:#e4e9dc;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:14px;line-height:1.35;overflow:hidden}.photo-detail-price{color:#9fd6a4;font-variant-numeric:tabular-nums;flex:none;font-size:13px;font-weight:600}.photo-detail-toggle{color:#99a291;text-transform:uppercase;letter-spacing:.05em;border:1px solid #ffffff1f;border-radius:999px;flex:none;padding:3px 9px;font-size:11px;transition:color .18s}.photo-detail[open] .photo-detail-toggle{color:#cdd6c4;border-color:#fff3}.photo-detail-body{border-top:1px solid #ffffff12;padding:0 14px 13px}.photo-detail-desc{color:#c3cabb;margin:11px 0 0;font-size:13px;line-height:1.6}.photo-detail-tags{flex-wrap:wrap;gap:6px;margin:11px 0 0;padding:0;list-style:none;display:flex}.photo-detail-tags li{color:#b6c2ab;background:#ffffff0a;border:1px solid #ffffff17;border-radius:999px;padding:3px 9px;font-size:11px}.photo-detail-facts{gap:4px;margin:11px 0 0;font-size:12px;display:grid}.photo-detail-facts>div{grid-template-columns:minmax(0,38%) minmax(0,62%);gap:10px;display:grid}.photo-detail-facts dt{color:#939d8a;overflow-wrap:anywhere}.photo-detail-facts dd{color:#d5dbcd;overflow-wrap:anywhere;margin:0}.photo-viewer:has(.photo-caption) .photo-detail{top:76px;bottom:auto}@media (width<=650px){.photo-detail{width:auto;bottom:12px;left:12px;right:12px}.photo-viewer:has(.photo-caption) .photo-detail{top:70px}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}

dist/assets/index-DcLscXnL.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--ease-out:cubic-bezier(0, 0, .2, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-x-0{inset-inline:0}.bottom-0{bottom:0}.isolate{isolation:isolate}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.table{display:table}.h-dvh{height:100dvh}.w-full{width:100%}.shrink{flex-shrink:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.resize{resize:both}.items-center{align-items:center}.justify-between{justify-content:space-between}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.capitalize{text-transform:capitalize}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter\!{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)!important}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}}:root{color:#deded7;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#10110f;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline-offset:5px;outline:2px solid #d7e1d1}.app{background:#11120f;min-height:320px;overflow:clip}.image-field{contain:strict;position:absolute;inset:0;overflow:clip}.image-tile{will-change:transform;transform-origin:50%;background-color:#252823;background-size:cover;border:0;border-radius:2px;padding:0;display:block;position:absolute;top:0;left:0;overflow:hidden;box-shadow:0 1px 5px #0002}.image-tile img{object-fit:cover;opacity:0;filter:brightness(.92);width:100%;height:100%;transition:opacity .12s,filter .12s}.image-tile img.loaded{opacity:1}.image-tile:hover{box-shadow:0 10px 35px #0005}.image-tile:hover img{filter:brightness()}.image-tile{opacity:var(--relevance-opacity,1);filter:blur(var(--relevance-blur,0px));transition:opacity .65s,filter .65s}.image-tile:hover,.image-tile:focus-visible{opacity:1;filter:blur()}.vignette{pointer-events:none;z-index:300;background:radial-gradient(#0000 42%,#0c0d0b30 100%),linear-gradient(0deg,#10110f99,#0000 70px);position:absolute;inset:0}.grain{z-index:301;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E");position:absolute;inset:0}.search-center{z-index:400;width:clamp(350px,36vw,640px);max-width:calc(100% - 44px);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.search-pill{-webkit-backdrop-filter:blur(26px)saturate(.7);backdrop-filter:blur(26px)saturate(.7);background:#e4e8ddbb;border-radius:999px;height:clamp(62px,4.8vw,84px);transition:background .25s,box-shadow .25s;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff3d,0 6px 36px #00000018}.search-pill:focus-within{background:#e6eaddd4;box-shadow:inset 0 1px #ffffff52,0 5px 40px #0002}.search-pill input{color:#20251f;letter-spacing:-.035em;caret-color:#323b2d;background:0 0;border:0;outline:none;width:100%;height:100%;padding:0 58px 0 27px;font-size:clamp(22px,1.8vw,30px)}.search-pill input::placeholder{color:#565d54;opacity:1}.search-pill input::selection{background:#80957070}.clear-button{color:#4c5449;background:0 0;border:0;border-radius:50%;place-items:center;width:34px;height:34px;padding:7px;transition:background .15s;display:grid;position:absolute;top:50%;right:13px;transform:translateY(-50%)}.clear-button:hover{background:#0000000d}.clear-button svg{width:18px;height:18px}.search-progress{opacity:0;height:1px;transition:opacity .3s;position:absolute;bottom:0;left:24px;right:24px;overflow:hidden}.search-progress.visible{opacity:.5}.search-progress span{background:#47513f;height:100%;transition:width .3s;animation:1.6s ease-in-out infinite progress-glow;display:block}.search-status{letter-spacing:.01em;color:#d2d6ccc9;text-shadow:0 1px 5px #000,0 1px 12px #000;pointer-events:none;justify-content:center;align-items:center;gap:7px;min-height:20px;font-size:12px;display:flex;position:absolute;top:calc(100% + 13px);left:-28px;right:-28px}.status-dot{background:#d2d8c9;border-radius:50%;width:4px;height:4px;animation:1.6s ease-in-out infinite progress-glow}.has-error{pointer-events:auto;text-shadow:none;background:#171b16ee;border-radius:10px;flex-wrap:wrap;padding:12px;font-size:14px}.has-error button{color:#eee;background:0 0;border:0;border-bottom:1px solid #ccc;padding:0}.error-detail{text-align:center;opacity:.7;overflow-wrap:anywhere;width:100%;font-size:12px}.footer{z-index:401;color:#bac0b395;letter-spacing:.015em;padding:20px 24px;font-size:12px}.footer a{color:inherit;text-decoration:none;transition:color .2s}.footer a:hover{color:#f5f6ef}.version{opacity:.55;margin-left:5px}.footer-divider{opacity:.5;padding:0 8px}@keyframes progress-glow{0%,to{opacity:.4}50%{opacity:1}}@media (width<=650px){.search-center{width:min(82vw,400px)}.search-pill{height:60px}.search-pill input{padding-left:23px;font-size:22px}.footer{padding:16px;font-size:12px}.footer .version,.footer-divider{display:none}.footer>span{font-size:0}.footer>span:after{content:"On-device search";font-size:12px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.photo-viewer{color:#e8eae3;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#0c0e0bdc;border:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;position:fixed;inset:0;overflow:hidden}.photo-viewer[open]{animation:.42s both viewer-reveal;display:block}.photo-viewer::backdrop{background:#0005}.photo-viewer.is-closing{opacity:0;transition:opacity .32s;animation:none}.photo-toolbar{z-index:2;pointer-events:none;justify-content:space-between;align-items:center;display:flex;position:absolute;inset:18px 24px auto}.photo-toolbar a,.photo-toolbar button{pointer-events:auto;color:#e0e5d9;background:#12160fe6;border:1px solid #ffffff18;border-radius:999px}.photo-toolbar a{padding:12px 17px;font-size:14px;text-decoration:none}.photo-toolbar button{place-items:center;width:44px;height:44px;display:grid}.photo-toolbar svg{width:22px;height:22px}.photo-origin{pointer-events:none;color:#e0e5d9;text-overflow:ellipsis;white-space:nowrap;background:#12160fe6;border:1px solid #ffffff18;border-radius:999px;max-width:60vw;padding:12px 17px;font-size:14px;overflow:hidden}.photo-viewport{place-items:center;padding:72px 24px 40px;display:grid;position:absolute;inset:0;overflow:auto}.photo-frame{width:min(1800px, calc(100vw - 48px), calc((100dvh - 128px) * var(--photo-ar)));aspect-ratio:var(--photo-ar);cursor:zoom-in;transform-origin:50%;background-color:#161912;background-size:100% 100%;border:0;border-radius:3px;flex:none;padding:0;display:block;box-shadow:0 12px 70px #0005}.photo-frame img{object-fit:contain;opacity:0;width:100%;height:100%;transition:opacity .3s;display:block}.photo-frame img.loaded{opacity:1}.photo-viewport.is-zoomed{display:block}.photo-viewport.is-zoomed .photo-frame{width:max(calc(100vw - 48px), calc((100dvh - 128px) * var(--photo-ar)));cursor:zoom-out;margin:0 auto}@keyframes viewer-reveal{0%{opacity:0}to{opacity:1}}.product-panel{z-index:500;-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);color:#e6e9e0;background:#0f120eea;flex-direction:column;display:flex;position:fixed;inset:0}.product-panel-head{border-bottom:1px solid #ffffff14;align-items:center;gap:18px;padding:20px 26px 14px;display:flex}.product-panel-title{flex:none;align-items:baseline;gap:11px;display:flex}.product-panel-title h2{letter-spacing:-.02em;margin:0;font-size:19px;font-weight:600}.product-count{color:#a8b09e;white-space:nowrap;font-size:12px}.product-search{flex:1;min-width:0}.product-search input{color:#eef1e8;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:999px;outline:none;width:100%;height:42px;padding:0 18px;font-size:15px;transition:border-color .2s,background .2s}.product-search input:focus{background:#ffffff17;border-color:#ffffff45}.product-search input::placeholder{color:#8b9382}.product-search input::-webkit-search-cancel-button{filter:invert(.7)}.product-close{color:#dfe3d8;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1f;border-radius:50%;flex:none;width:40px;height:40px;font-size:15px;transition:background .18s}.product-close:hover{background:#ffffff1c}.product-brands{border-bottom:1px solid #ffffff10;flex-wrap:wrap;gap:8px;padding:13px 26px;display:flex}.product-brands button{color:#c3c9ba;cursor:pointer;background:0 0;border:1px solid #ffffff1a;border-radius:999px;padding:7px 15px;font-size:13px;transition:background .18s,color .18s,border-color .18s}.product-brands button:hover{color:#eef1e8;background:#ffffff12}.product-brands button.active{color:#1d231b;background:#e4e8dd;border-color:#e4e8dd}.product-body{overscroll-behavior:contain;flex:1;padding:20px 26px 40px;overflow-y:auto}.product-grid{grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:15px;display:grid}.product-card{color:inherit;text-align:left;cursor:pointer;background:#1a1e17;border:1px solid #ffffff14;border-radius:11px;flex-direction:column;padding:0;transition:transform .22s cubic-bezier(.2,.7,.3,1),border-color .22s,box-shadow .22s;display:flex;overflow:hidden}.product-card:hover,.product-card:focus-visible{border-color:#fff3;transform:translateY(-3px);box-shadow:0 12px 34px #00000059}.product-card img{aspect-ratio:4/3;object-fit:cover;background:#12160f;width:100%;display:block}.product-no-image{aspect-ratio:4/3;color:#6f7767;background:#171b14;place-items:center;width:100%;font-size:12px;display:grid}.product-card-body{flex-direction:column;gap:3px;padding:10px 12px 12px;display:flex}.product-brand{letter-spacing:.07em;text-transform:uppercase;color:#8b9a7c;font-size:10.5px}.product-name{-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:13.5px;line-height:1.34;display:-webkit-box;overflow:hidden}.product-price{color:#dfe6d2;margin-top:2px;font-size:13px;font-weight:600}.product-sku{color:#8b9382;margin-top:2px;font-size:11.5px}.product-more{color:#e8ece1;cursor:pointer;background:#ffffff0f;border:1px solid #ffffff26;border-radius:999px;margin:24px auto 0;padding:13px 30px;font-size:14px;transition:background .2s;display:block}.product-more:hover{background:#ffffff1c}.product-more-total{color:#8b9382;margin-left:5px;font-size:12.5px}.product-empty{text-align:center;color:#99a08f;padding:60px 0;font-size:14px}.footer-catalog{color:#dfe3d8;cursor:pointer;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:999px;padding:9px 17px;font-size:13px;transition:background .2s,border-color .2s}.footer-catalog:hover{background:#ffffff1c;border-color:#ffffff38}.footer-catalog kbd{background:#ffffff1a;border-radius:4px;margin-left:6px;padding:1px 6px;font-family:inherit;font-size:11px}.product-detail{z-index:600;place-items:center;padding:26px;display:grid;position:fixed;inset:0}.product-detail-backdrop{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:zoom-out;background:#050705d9;border:0;position:absolute;inset:0}.product-detail-panel{background:#161a13;border-radius:15px;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:0;width:min(1080px,100%);max-height:min(88dvh,900px);animation:.32s both viewer-reveal;display:grid;position:relative;overflow:hidden;box-shadow:0 30px 90px #000000a6}.product-detail-close{z-index:2;color:#e2e6db;cursor:pointer;background:#0d100ae0;border:1px solid #ffffff24;border-radius:50%;width:38px;height:38px;font-size:14px;position:absolute;top:13px;right:13px}.product-detail-close:hover{background:#0d100a}.product-detail-media{background:#0e110c;flex-direction:column;display:flex}.product-detail-media>img{object-fit:contain;width:100%;height:auto;max-height:60dvh;display:block}.product-detail-noimage{color:#6f7767;place-items:center;min-height:260px;font-size:13px;display:grid}.product-thumbs{gap:8px;padding:12px;display:flex;overflow-x:auto}.product-thumbs button{cursor:pointer;opacity:.55;background:#171b14;border:2px solid #0000;border-radius:8px;flex:none;width:60px;height:60px;padding:0;transition:opacity .18s,border-color .18s;overflow:hidden}.product-thumbs button:hover{opacity:.85}.product-thumbs button.active{opacity:1;border-color:#e4e8dd}.product-thumbs img{object-fit:cover;width:100%;height:100%;display:block}.product-detail-info{padding:26px 30px 30px;overflow-y:auto}.product-detail-brand{letter-spacing:.09em;text-transform:uppercase;color:#8b9a7c;font-size:11px}.product-detail-info h3{letter-spacing:-.02em;margin:7px 0 12px;font-size:23px;font-weight:600;line-height:1.26}.product-detail-meta{flex-wrap:wrap;align-items:baseline;gap:14px;display:flex}.product-detail-price{color:#dfe6d2;font-size:21px;font-weight:600}.product-detail-sku{color:#8b9382;font-size:13px}.product-detail-link{color:#b9c9a4;border-bottom:1px solid #b9c9a45c;margin-top:14px;padding-bottom:1px;font-size:13.5px;text-decoration:none;display:inline-block}.product-detail-link:hover{color:#d5e3c1;border-color:#d5e3c1}.product-detail-summary{color:#c3c9ba;margin:18px 0 0;font-size:14px;line-height:1.62}.product-detail-feats{flex-wrap:wrap;gap:7px;margin-top:18px;display:flex}.product-detail-feats span{color:#c8cebd;background:#ffffff10;border:1px solid #ffffff14;border-radius:999px;padding:5px 11px;font-size:12px}.product-detail-specs{border-collapse:collapse;width:100%;margin-top:22px;font-size:13px}.product-detail-specs caption{text-align:left;letter-spacing:.08em;text-transform:uppercase;color:#8b9a7c;padding-bottom:9px;font-size:11.5px}.product-detail-specs th,.product-detail-specs td{text-align:left;vertical-align:top;border-top:1px solid #ffffff12;padding:9px 0;line-height:1.5}.product-detail-specs th{color:#929a89;width:40%;padding-right:14px;font-weight:500}.product-detail-specs td{color:#d3d8cb}@media (width<=860px){.product-detail-panel{grid-template-columns:1fr;max-height:92dvh;overflow-y:auto}.product-detail-media>img{max-height:42dvh}.product-detail-info{padding:20px}.product-panel-head{flex-wrap:wrap;padding:16px 18px 12px}.product-brands,.product-body{padding-left:18px;padding-right:18px}.product-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:11px}.footer-catalog{padding:7px 13px;font-size:12px}.footer-catalog kbd{display:none}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}

dist/assets/neon-frame.css

@@ -1,170 +0,0 @@
-/* ── Neon frame: a light that runs around the picture ──────────────────────
- *
- * Loaded from index.html AFTER dist/assets/app.css, and deliberately overriding
- * the ring that bundle paints. It exists because that ring is wrong in a way
- * only shows up on non-square tiles.
- *
- * THE BUG IT UNDOES
- * -----------------
- * The @keyframes neon-run shipped in app.css rotated the whole ::before layer
- * by one turn. That layer carries BOTH the conic gradient and the mask, so the
- * mask rotated with it and stopped lining up with the tile's edges. On a 16:9
- * photograph the painted border tilted off the frame and the highlight read as
- * a skewed smear rather than a light going round the picture -- which is
- * exactly what "a static neon border" looked like on screen. A tile that
- * happened to be nearly square hid the bug, so the effect only ever looked
- * broken on real photographs.
- *
- * WHAT MOVES NOW
- * --------------
- * The layer never transforms. What animates is the conic gradient's own start
- * angle, --neon-angle, so the bright head walks the perimeter and follows the
- * rectangle exactly: it runs down the long edge, turns the corner and comes
- * back along the short edge, like a light circling a picture frame.
- *
- * `--neon-angle` is REGISTERED with @property because an unregistered custom
- * property is an untyped token the engine cannot interpolate -- a 0deg to
- * 360deg keyframe on one flips once at the midpoint instead of sweeping. That
- * flip is worse than the static ring, which is why the animation is gated on
- * @supports below: a browser without registration gets the gradient and no
- * motion at all, i.e. a lit frame with the head parked at the top.
- *
- * `inherits: false` keeps the angle on the ring itself. The tile is transformed
- * every frame by the field engine, and an inherited animated property would be
- * recomputed against a moving box -- which is how the gradient ends up sliding
- * relative to the picture it is supposed to be travelling around.
- *
- * TWO LAYERS, ONE CLOCK
- * ---------------------
- * ::before is the crisp stroke. ::after is the halo: the same sweep, spread
- * over a wider arc and blurred, so the light blooms off the edge instead of
- * being cut flat against it. They are one pseudo-element apart because a
- * pseudo-element can only carry one background, and a neon frame needs both the
- * stroke and the glow.
- *
- * Both animate over the same duration from the same start angle, so the halo
- * stays locked to the head of the stroke on every lap rather than drifting
- * ahead of it.
- *
- * `mask` is what turns the full-size gradient into a ring. Without the composite
- * the gradient would fill the whole tile and hide the photograph. The -webkit-
- * forms are repeated because Safari needs the prefixed one, and the standard
- * alone would leave Safari with an opaque tile.
- *
- * src/neon-frame.css carries the same rules, so a rebuild produces the same
- * frame and this file becomes a no-op rather than a divergence.
- */
-@property --neon-angle {
-  syntax: '<angle>';
-  inherits: false;
-  initial-value: 0deg;
-}
-
-.image-tile {
-  --neon: #22f5d0;
-  --neon-soft: #7ef9ff;
-  --neon-run: 2.6s;
-}
-
-/* The crisp stroke: a white-hot head at 0deg, a comet tail fading back round
-   to 250deg, and a clear gap before the head returns -- so the eye reads a
-   single light travelling, not a ring that pulses in place. */
-.image-tile.exact::before,
-.image-tile.featured::before {
-  padding: 1px;
-  background: conic-gradient(from var(--neon-angle, 0deg),
-    var(--neon) 0deg,
-    var(--neon-soft) 38deg,
-    #ffffff 70deg,
-    var(--neon-soft) 102deg,
-    var(--neon) 148deg,
-    #22f5d05c 250deg,
-    #22f5d000 344deg,
-    var(--neon) 360deg);
-  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-  -webkit-mask-composite: xor;
-  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-  mask-composite: exclude;
-  /* Any transform here drags the mask off the frame, which is the bug above.
-     Stated explicitly so a later edit cannot reintroduce it by accident. */
-  transform: none;
-}
-
-/* The halo. Same sweep from the same angle, spread wider so the light spills
-   both inward off the edge and outward into the dark around the tile. */
-.image-tile.exact::after,
-.image-tile.featured::after {
-  padding: 2.5px;
-  background: conic-gradient(from var(--neon-angle, 0deg),
-    #22f5d000 0deg,
-    #22f5d085 62deg,
-    #b6fdffc4 92deg,
-    #22f5d05e 138deg,
-    #22f5d01f 250deg,
-    #22f5d000 348deg,
-    #22f5d000 360deg);
-  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-  -webkit-mask-composite: xor;
-  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-  mask-composite: exclude;
-  filter: blur(4px);
-  opacity: .82;
-  /* The stock rule animated box-shadow here instead. A box-shadow breathes in
-     place -- it cannot run along the perimeter, because the shadow's shape is
-     the tile's shape and never travels round it. */
-  box-shadow: none;
-}
-
-/* The head sweeps one full turn clockwise; the halo sweeps the same turn over
-   the same duration, so the two re-align every lap instead of drifting apart.
- *
- * NOTE this is a REPLACEMENT for app.css's neon-run, not an addition. Keyframes
- * are global and the last definition of a name wins, so this block takes the
- * name over from the built one for the whole page -- which is exactly what
- * retires its `rotate(1turn)`, and also why the ungated reset below matters.
- */
-@keyframes neon-run {
-  from { --neon-angle: 0deg; }
-  to { --neon-angle: 360deg; }
-}
-
-/* Both pseudo-elements default to NO animation, outside any @supports gate.
- *
- * This has to be unconditional, and it is the subtle part of this file.
- * app.css applies `animation: neon-run ...` to these selectors with no feature
- * test of its own, so a browser that cannot register @property would otherwise
- * run the keyframes above -- animating an untyped token, which snaps at the
- * halfway point. The ring would blink once per cycle and look broken in a way
- * the old static ring never did.
- *
- * Setting `animation: none` first and enabling it only inside @supports makes
- * the unsupported case the safe one: a lit frame, head parked at the top, no
- * motion. It also has to win on order against app.css, which this file loads
- * after, so the @supports rule below re-asserts the animation.
- */
-.image-tile.exact::before,
-.image-tile.featured::before,
-.image-tile.exact::after,
-.image-tile.featured::after { animation: none; }
-
-@supports at-rule(@property) {
-  .image-tile.exact::before,
-  .image-tile.featured::before,
-  .image-tile.exact::after,
-  .image-tile.featured::after {
-    animation: neon-run var(--neon-run) linear infinite;
-  }
-}
-
-/* A featured tile -- the exact answer to the query, or a photograph just added
-   on vai-avatar -- runs faster and thinner, so the newest photographs are
-   distinguishable from an exact hit by pace as well as by size. */
-.image-tile.featured { --neon-run: 2s; }
-.image-tile.featured::before { padding: 1.5px; }
-
-/* A slow, low-frequency sweep reads as "lit"; a fast strobe reads as an alarm,
-   and this frame marks a correct answer rather than an error. */
-@media (prefers-reduced-motion: reduce) {
-  .image-tile.exact::before, .image-tile.exact::after,
-  .image-tile.featured::before, .image-tile.featured::after { animation: none; }
-}

dist/assets/share-fix.js

@@ -1,193 +0,0 @@
-/**
- * Repairs the share link on vai-avatar interior photographs, in the browser.
- * =========================================================================
- *
- * THE SYMPTOM
- * A photograph published on vai-avatar opens its share page at
- *
- *   https://bep40-vai-avatar.hf.space/share/p/avatarimg%3Ab68dc779370dc70e
- *
- * which is vai-avatar's "Not Found" page. Every interior photograph is
- * affected, on the tile's share button and on the viewer's "Xem trang" alike.
- *
- * WHY IT HAPPENS
- * avatar-interiors.js gives every such photograph a namespaced `sku` of
- * `avatarimg:<image_id>`, so it travels the same code path as a catalogue
- * product: same viewer, same detail panel, same neon. Namespacing is
- * deliberate -- it is what stops a 16-hex image_id colliding with a baked
- * interior's id in merge.js's de-duplication set.
- *
- * But `avatarimg:...` is not an identity the product catalogue knows, and
- * vai-avatar's `/share/p/` resolves against exactly that catalogue. So the
- * photograph was sent to the product route, where no such SKU exists, and the
- * Space answered Not Found. There is nothing to fix on vai-avatar's side: the
- * record it would need to find does not exist. The photograph is an interior,
- * and the interior route is `/share/i/<image_id>`.
- *
- * WHY THIS IS A FILE AND NOT ONLY THE SOURCE FIX
- * src/assets.js now routes on `avatarImageId` first, and that is the real fix.
- * It is not, though, what the browser runs yet: this Space is `sdk: static`, so
- * the page is served from dist/, and dist/assets/index.js was built before that
- * fix existed. The neon frame has the same problem -- dist/assets/app.css still
- * carries the old `@keyframes neon-run { transform: rotate(1turn) }`, which
- * rotated the mask off the frame. Rebuilding needs a shell.
- *
- * So this corrects the URL where it is consumed, with no rebuild, and the
- * source fix carries the same logic forward. The two agree by construction:
- * both send `avatarimg:<id>` to `/share/i/<id>`.
- *
- * WHAT IT COSTS
- * One capture-phase listener and one MutationObserver. The observer watches
- * only `href` on the whole document -- the field already rebuilds 80 tiles per
- * keystroke, but share hrefs change on layout passes, not on the per-frame
- * transform writes, so this sees a handful of callbacks rather than 60/s. The
- * work per callback is one regex against an attribute value that is almost
- * always not a share href.
- *
- * Once the bundle is rebuilt from src/assets.js this repairs nothing, because
- * the hrefs it would find are already correct. It stays loaded rather than
- * un-loading itself: it is a few regexes against a handful of anchors, and a
- * self-disarming timer is a far worse thing to reason about than inert code.
- */
-
-const STUDIO = 'https://bep40-vai-avatar.hf.space';
-
-/** Anchors worth checking at all: the viewer plus the tile share buttons. */
-const SHARE_ANCHORS = 'a[href*="/share/"]';
-
-/**
- * A share href that names an interior photograph by its namespaced sku.
- *
- * Matches the literal `avatarimg` immediately after `/share/p/`, then either
- * separator: the value may not have been encoded (`avatarimg:`) or may have
- * been (`avatarimg%3A`). Only that one segment is taken as the separator, so an
- * id that itself contains a colon still comes through whole.
- */
-const BROKEN = /\/share\/p\/(avatarimg)(?::|%3A)([^/?#]+)/i;
-
-/**
- * The same URL, routed as the interior it is.
- *
- * The id is decoded first: it arrived percent-encoded inside the URL, and
- * re-encoding the raw `%3A` would produce `%253A`. `decodeURIComponent` throws
- * on a malformed escape, so a bad id is left alone rather than taking the whole
- * listener down -- one broken href must not break the page it sits on.
- *
- * An empty id is rejected too: `/share/i/` with nothing after it is its own
- * 404, so redirecting there would trade one dead link for another.
- */
-function interiorURL(href) {
-  const match = BROKEN.exec(href);
-  if (!match) return null;
-  let id;
-  try {
-    id = decodeURIComponent(match[2]);
-  } catch {
-    return null;
-  }
-  id = id.trim();
-  return id ? `${STUDIO}/share/i/${encodeURIComponent(id)}` : null;
-}
-
-/** Rewrite one anchor's href if it is mis-routed. Returns true if it changed. */
-function repair(anchor) {
-  const href = anchor?.getAttribute?.('href');
-  if (!href) return false;
-  const fixed = interiorURL(href);
-  if (!fixed || fixed === href) return false;
-  anchor.setAttribute('href', fixed);
-  // Assigning the IDL property as well is redundant with setAttribute for a
-  // fully-qualified URL, and deliberately so: it keeps `anchor.href` on the
-  // corrected string for any later read, however the property resolves.
-  anchor.href = fixed;
-  return true;
-}
-
-/**
- * Sweep `root` and everything under it. `root` defaults to the document.
- *
- * `root` ITSELF is checked, not only its descendants, and that is not
- * redundancy. React sets props on a detached element and then inserts it, so
- * the viewer's "Xem trang" anchor arrives in the tree already carrying its
- * href -- which means the `href` mutation happened off-tree and no observer ever
- * saw it. The only record that describes it is "this node was added", so a
- * descendant-only sweep would miss it and the visible link would stay wrong
- * until it was clicked.
- *
- * The tile share anchors take the opposite path and are covered either way:
- * ImageField appends the anchor empty and fills the href later on a live
- * element, which the `attributes` branch below sees.
- */
-function scan(root = document) {
-  if (root.nodeType === Node.ELEMENT_NODE && root.matches?.(SHARE_ANCHORS)) {
-    repair(root);
-  }
-  for (const anchor of root.querySelectorAll?.(SHARE_ANCHORS) ?? []) {
-    repair(anchor);
-  }
-}
-
-const observer = new MutationObserver(records => {
-  for (const record of records) {
-    if (record.type === 'attributes') {
-      // The href changed on an element already in the field.
-      repair(record.target);
-      continue;
-    }
-    for (const node of record.addedNodes) {
-      // Both places a share href is rendered: the anchor on a field tile, and
-      // the viewer's "Xem trang".
-      if (node.nodeType === Node.ELEMENT_NODE) scan(node);
-    }
-  }
-});
-
-function start() {
-  scan();
-  observer.observe(document.documentElement, {
-    // href is the only attribute either the React viewer or the field engine
-    // sets to move a share link, so nothing else needs watching.
-    attributes: true,
-    attributeFilter: ['href'],
-    subtree: true,
-    childList: true,
-  });
-}
-
-if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', start, { once: true });
-} else {
-  start();
-}
-
-/**
- * A capture-phase click handler, which is what actually guarantees the fix.
- *
- * The observer corrects the visible href for the reader, but observer callbacks
- * run as microtasks after the mutation -- and a click can be dispatched on an
- * anchor before any callback has run for the node that inserted it. Repairing
- * during capture makes the corrected value the one the browser navigates to,
- * because the default action resolves the URL at activation time, after capture
- * has run.
- *
- * This is also the backstop that makes the fix independent of the observer
- * catching anything at all: however the link got into the document, clicking it
- * resolves it correctly.
- *
- * The event is deliberately NOT prevented: the aim is to redirect the
- * navigation, not suppress it, so middle-click, ctrl-click and "open in new
- * tab" all carry the corrected URL exactly as they would on a right one.
- */
-document.addEventListener('click', event => {
-  const anchor = event.target?.closest?.('a[href]');
-  if (anchor) repair(anchor);
-}, true);
-
-/**
- * Exposed for scripts/test-neon-ui.mjs.
- *
- * Not a debug hook: that test builds an anchor by hand with a deliberately
- * broken href, because the field's own links depend on a live network read of
- * the vai-avatar interior index that may not have landed when the test runs.
- */
-globalThis.__repairInteriorShareLinks = () => scan();

dist/index.html

@@ -8,22 +8,10 @@
     <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
     <link rel="preconnect" href="https://huggingface.co" />
     <title>Semantic Image Field — Nội thất</title>
-    <script type="module" crossorigin src="./assets/index.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/app.css">
+    <script type="module" crossorigin src="./assets/index-CigEzVrZ.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-DcLscXnL.css">
   </head>
   <body>
-    <!--
-      This is the BUILD TEMPLATE, not the served page.
-
-      vite.config.js sets build.rollupOptions.input to this file, so Vite emits
-      dist/app.html with the hashed asset references injected. The Space serves
-      the ROOT index.html, which is hand-maintained and loads ./dist/assets/…
-
-      Keeping them separate matters: if the root index.html were also the build
-      input, `vite build` would rewrite it, and the very first build would point
-      the live Space at bundles that do not exist yet — a blank page with no
-      error. See app.html in the repo root.
-    -->
     <div id="root"></div>
   </body>
-</html>
+</html>

index.html

@@ -4,77 +4,12 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#111210" />
-    <meta name="description" content="Thư viện tìm kiếm ảnh nội thất theo ngữ nghĩa ngôn ngữ tự nhiên. Nhập mô tả bằng tiếng Việt, ứng dụng AI tìm đúng ảnh nội thất, sản phẩm Malloca/Bosch/Hafele và cập nhật tự động từ vai-avatar. Web App AI thuộc hệ sinh thái VIBE CODE AI của V.AI STUDIO" />
-    <meta name="robots" content="index, follow" />
-    <meta name="keywords" content="tìm ảnh theo ngữ nghĩa, tìm kiếm ảnh nội thất, AI tìm ảnh, V.AI STUDIO, VIBE CODE AI, Malloca, Bosch, Hafele, ảnh nội thất Việt Nam" />
-    <meta property="og:title" content="Thư viện tìm kiếm ảnh theo ngữ nghĩa ngôn ngữ tự nhiên | V.AI STUDIO" />
-    <meta property="og:type" content="website" />
-    <meta property="og:description" content="Nhập mô tả bằng tiếng Việt và AI tìm đúng ảnh nội thất, sản phẩm gia dụng. Đồng bộ tự động ảnh mới nhất từ vai-avatar. Web App AI thuộc hệ sinh thái VIBE CODE AI của V.AI STUDIO" />
-    <meta property="og:url" content="https://huggingface.co/spaces/bep40/semantic-image-field" />
-    <meta property="og:image" content="https://huggingface.co/spaces/bep40/semantic-image-field/resolve/main/dist/share/og-image.png" />
-    <meta property="og:image:width" content="1200" />
-    <meta property="og:image:height" content="675" />
-    <meta property="og:image:alt" content="12 ảnh nội thất và sản phẩm mới nhất từ V.AI STUDIO" />
-    <meta property="og:site_name" content="V.AI STUDIO" />
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="Thư viện tìm kiếm ảnh theo ngữ nghĩa ngôn ngữ tự nhiên | V.AI STUDIO" />
-    <meta name="twitter:description" content="Nhập mô tả bằng tiếng Việt và AI tìm đúng ảnh nội thất, sản phẩm gia dụng. Web App AI thuộc hệ sinh thái VIBE CODE AI của V.AI STUDIO" />
-    <meta name="twitter:image" content="https://huggingface.co/spaces/bep40/semantic-image-field/resolve/main/dist/share/og-image.png" />
-    <link rel="canonical" href="https://huggingface.co/spaces/bep40/semantic-image-field" />
+    <meta name="description" content="Tìm ảnh nội thất Việt Nam theo ý nghĩa. Trường ảnh động chạy hoàn toàn trong trình duyệt bằng Transformers.js." />
     <link rel="icon" type="image/svg+xml" href="./dist/favicon.svg" />
     <link rel="preconnect" href="https://huggingface.co" />
-    <title>Thư viện tìm kiếm ảnh theo ngữ nghĩa ngôn ngữ tự nhiên | V.AI STUDIO</title>
-    <!--
-      This is the page the Space actually serves. It is NOT a Vite build input
-      (that is app.html), so `vite build` never rewrites it.
-
-      The two references below are the only thing tying the live Space to a
-      bundle, so they must always name files that EXIST.
-
-      vite.config.js pins entryFileNames/assetsFileNames to stable names
-      (assets/index.js, assets/app.css), so `npm run build` is sufficient on its
-      own -- there is no content hash to chase. The hashed names that used to be
-      listed here (index-CigEzVrZ.js / index-DcLscXnL.css) were deleted:
-      those bundles were built from a source tree that had no product code at
-      all, so the live Space was serving a build without the catalogue
-      feature. See "Why the bundle was rebuilt" in README.md.
-    -->
-    <script type="module" crossorigin src="./dist/assets/index.js?v=20261110-1"></script>
-    <link rel="stylesheet" crossorigin href="./dist/assets/app.css?v=20261110-1">
-
-    <!--
-      Loaded AFTER app.css, and deliberately overriding it.
-
-      The ring app.css paints is the old one: its @keyframes neon-run rotated
-      the whole ::before layer by a turn, and because that layer carries the mask
-      as well as the gradient, the mask rotated with it and stopped lining up
-      with the tile's edges. On a non-square photograph the painted border tilted
-      off the frame, so the highlight read as a skewed smear rather than a light
-      going round the picture -- which is what "a static neon border" looked
-      like. src/index.css already carries the angle-based version, so a rebuild
-      makes this stylesheet a no-op rather than a divergence. Order matters: it
-      has to come after app.css to win, and it must NOT be renamed by the build.
-      -->
-    <link rel="stylesheet" href="./dist/assets/neon-frame.css?v=20261110-1" />
-
-    <!--
-      Repairs the share link on vai-avatar interior photographs.
-
-      src/assets.js routes on `avatarImageId` first, which is the real fix, but
-      this Space is `sdk: static` and serves dist/assets/index.js -- a bundle
-      built before that fix existed. So every photograph still opens
-      /share/p/avatarimg%3A... , which is vai-avatar's "Not Found" page: the
-      `avatarimg:` sku is a namespace for de-duplication, not a catalogue
-      identity, and /share/p/ resolves against the product catalogue where no
-      such SKU exists. This corrects the href where it is consumed, with no
-      rebuild, and goes inert once the bundle is rebuilt.
-
-      Loaded as a module, and BEFORE the app bundle's work matters because it
-      installs a capture-phase click listener on document -- the phase in which
-      a mis-routed href can still be corrected before the browser resolves it
-      for navigation.
-    -->
-    <script type="module" src="./dist/assets/share-fix.js?v=20261110-1"></script>
+    <title>Semantic Image Field — Nội thất</title>
+    <script type="module" crossorigin src="./dist/assets/index-CigEzVrZ.js"></script>
+    <link rel="stylesheet" crossorigin href="./dist/assets/index-DcLscXnL.css">
   </head>
   <body>
     <div id="root"></div>

package-lock.json

@@ -26,7 +26,6 @@
         "eslint-plugin-react-hooks": "^7.1.1",
         "eslint-plugin-react-refresh": "^0.5.7",
         "globals": "^17.12.0",
-        "playwright": "^1.63.0",
         "vite": "^8.3.0"
       },
       "engines": {
@@ -4346,35 +4345,6 @@
       "integrity": "sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg==",
       "license": "MIT"
     },
-    "node_modules/playwright": {
-      "version": "1.63.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.63.0.tgz",
-      "integrity": "sha512-+7ziBLidS4NaNCdt57SUDT+wYmmd5fmiQejUic/kb+YsYSCPyOOE9sebzMjNmQrsnNpDJqd4WHvV/8lfKfUDUg==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "playwright-core": "1.63.0"
-      },
-      "bin": {
-        "playwright": "cli.js"
-      },
-      "engines": {
-        "node": ">=20"
-      }
-    },
-    "node_modules/playwright-core": {
-      "version": "1.63.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.63.0.tgz",
-      "integrity": "sha512-rYCsBF/M5HjUch52bbtVONEFjv6Xu8sm8h72dNlR5bzIE1fvC/bxgspzkjSfU+MweEMmPM8KJebG6nnyxo5mCg==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "bin": {
-        "playwright-core": "cli.js"
-      },
-      "engines": {
-        "node": ">=20"
-      }
-    },
     "node_modules/possible-typed-array-names": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",

package.json

@@ -6,12 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview",
-    "test": "node scripts/test-avatar-interiors.mjs",
-    "test:ui": "node scripts/test-neon-ui.mjs",
-    "sync:catalogue": "node scripts/sync-catalogue.mjs",
-    "refresh:catalogue": "node scripts/refresh-catalogue.mjs",
-    "seed:catalogue": "node scripts/seed-catalogue.mjs"
+    "preview": "vite preview"
   },
   "dependencies": {
     "@huggingface/transformers": "4.3.0",
@@ -32,7 +27,6 @@
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.7",
     "globals": "^17.12.0",
-    "playwright": "^1.63.0",
     "vite": "^8.3.0"
   },
   "engines": {

products-index.json

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5ce355fb48dbd036fbc775a15edcfc6b1ea3f261748fad9ec6311c0ec93984ac
-size 4371102
+oid sha256:871670ad80cfc7409cb00d14665a2a6ef76b9a53f0ad79c7790b174d131d907b
+size 3155324

repo/rebuild.py

@@ -1,56 +0,0 @@
-#!/usr/bin/env python3
-import subprocess, os, re
-from pathlib import Path
-
-HF_TOKEN = os.environ.get("HF_TOKEN", "")
-REPO = "bep40/VSEARCH"
-CLONE = "/repo"
-SPACE_URL = "https://huggingface.co/spaces/"
-HEADERS = {"Authorization": f"Bearer {HF_TOKEN}"}
-
-def run(cmd, **kw):
-    return subprocess.run(cmd, shell=True, cwd=CLONE, check=True,
-                          capture_output=True, text=True, env={**os.environ, "HF_TOKEN": HF_TOKEN})
-
-Path(CLONE).mkdir(parents=True, exist_ok=True)
-if not Path(CLONE).exists() or not Path(CLONE, ".git").exists():
-    run("git clone -q --filter=blob:none --depth 1 " + SPACE_URL + REPO + " " + CLONE)
-os.chdir(CLONE)
-print("install:", run("npm install --silent --no-audit --no-fund").stdout[-200:])
-build = run("npm run build")
-print("build:", build.stdout[-400:])
-import re as re2
-html = Path(CLONE, "index.html").read_text()
-assets = {}
-for key in ("src", "href"):
-    for m in re2.finditer(rf"(?:{key})=\"([^\"]+)\"", html):
-        url = m.group(1).split("?")[0]
-        assets[url] = None
-print("index.html references:", assets)
-
-# Upload via REST upload_file to avoid git auth prompts
-import urllib.request
-import urllib.parse
-import json
-
-def hf_upload(path_in_repo, path_or_fileobj):
-    url = f"https://huggingface.co/api/spaces/{REPO}/upload_file"
-    q = urllib.parse.urlencode({"create_pr": False, "revision": "main", "commit_message": "Upload rebuilt static asset"})
-    body = b""
-    if isinstance(path_or_fileobj, str):
-        body = open(path_or_fileobj, "rb").read()
-    else:
-        body = path_or_fileobj.read()
-    data = urllib.parse.urlencode({"path_in_repo": path_in_repo}).encode()
-    data = data + b"&content=" + urllib.parse.quote(body)
-    req = urllib.request.Request(url + "?" + q, data=data, headers={"Authorization": HEADERS["Authorization"], "Content-Type": "application/x-www-form-urlencoded"})
-    with urllib.request.urlopen(req) as resp:
-        return json.loads(resp.read())
-
-for url in sorted(assets):
-    local = Path(CLONE, url)
-    if not local.exists():
-        raise SystemExit("missing asset: " + url)
-    hf_upload(url, str(local))
-    print("uploaded:", url, local.stat().st_size)
-print("ALL_OK")

scripts/gen-thumbnail.py

@@ -1,108 +0,0 @@
-#!/usr/bin/env python3
-"""
-Generate the social-share thumbnail for the semantic-image-field Space.
-
-Always the CURRENT 12 newest photographs: 8 newest interiors (by created_at)
-from bep40/vai-avatar2-interior + 4 newest added products (by _added_at)
-from bep40/grob-products-updated. Composed as a 4x3 grid at 1200x675 (2:1
-social-card crop). Written to BOTH public/ and dist/ so whichever path the
-static Space serves, the resolved URL exists.
-
-Intended to run from a scheduled HF job (or locally) BEFORE the catalogue
-sync commits, so the committed thumbnail is refreshed at least as often as
-the mirror itself.
-"""
-import io, json, os, sys, urllib.request
-
-INTERIOR_INDEX = "https://huggingface.co/datasets/bep40/vai-avatar2-interior/resolve/main/index.json"
-INTERIOR_API = "https://bep40-vai-avatar2-interior-api.hf.space"
-PRODUCTS_URL = "https://huggingface.co/datasets/bep40/grob-products-updated/resolve/main/products_url_added.json"
-N_INTERIORS = 8
-N_PRODUCTS = 4
-W, H = 1200, 675
-GAP = 6
-COLS, ROWS = 4, 3
-BG = (17, 20, 28)
-
-UA = {"User-Agent": "V.AI-STUDIO-thumbnail/1.0"}
-
-def fetch_json(url, timeout=25):
-    req = urllib.request.Request(url, headers=UA)
-    with urllib.request.urlopen(req, timeout=timeout) as r:
-        return json.loads(r.read().decode("utf-8"))
-
-def fetch_bytes(url, timeout=25):
-    req = urllib.request.Request(url, headers=UA)
-    with urllib.request.urlopen(req, timeout=timeout) as r:
-        return r.read()
-
-def main():
-    from PIL import Image
-    interiors = fetch_json(INTERIOR_INDEX)
-    products = fetch_json(PRODUCTS_URL)
-
-    dated = [r for r in interiors
-             if isinstance(r, dict) and isinstance(r.get("created_at"), str)
-             and r.get("created_at") and r.get("image_id")]
-    dated.sort(key=lambda r: r["created_at"], reverse=True)
-    top_i = dated[:N_INTERIORS]
-
-    prods = [p for p in products
-             if isinstance(p, dict) and isinstance(p.get("_added_at"), str)
-             and p.get("_added_at") and (p.get("imgs") or p.get("i"))]
-    prods.sort(key=lambda p: str(p["_added_at"]), reverse=True)
-    top_p = prods[:N_PRODUCTS]
-
-    urls = [f"{INTERIOR_API}/image/{r['image_id']}.jpg" for r in top_i]
-    urls += [(p.get("imgs") or [p.get("i")])[0] for p in top_p]
-
-    cell_w = (W - GAP * (COLS - 1)) // COLS
-    cell_h = (H - GAP * (ROWS - 1)) // ROWS
-
-    canvas = Image.new("RGB", (W, H), BG)
-    cells = []
-    for u in urls:
-        try:
-            data = fetch_bytes(u)
-            im = Image.open(io.BytesIO(data))
-            if im.mode not in ("RGB", "RGBA"):
-                im = im.convert("RGB")
-            if im.mode == "RGBA":
-                im = im.convert("RGB")
-            cells.append(im)
-        except Exception as e:
-            print(f"skip {u[:80]}: {e}", file=sys.stderr)
-
-    if not cells:
-        print("FATAL: no images could be fetched", file=sys.stderr)
-        sys.exit(1)
-
-    idx = 0
-    for row in range(ROWS):
-        for col in range(COLS):
-            if idx >= len(cells):
-                break
-            im = cells[idx]
-            idx += 1
-            iw, ih = im.size
-            scale = max(cell_w / iw, cell_h / ih)
-            sw, sh = max(1, round(iw * scale)), max(1, round(ih * scale))
-            im2 = im.resize((sw, sh), Image.LANCZOS)
-            left = (sw - cell_w) // 2
-            top = (sh - cell_h) // 2
-            im2 = im2.crop((left, top, left + cell_w, top + cell_h))
-            canvas.paste(im2, (col * (cell_w + GAP), row * (cell_h + GAP)))
-
-    out = io.BytesIO()
-    canvas.save(out, format="PNG", optimize=True)
-    png = out.getvalue()
-
-    os.makedirs("public/share", exist_ok=True)
-    os.makedirs("dist/share", exist_ok=True)
-    for path in ("public/share/og-image.png", "dist/share/og-image.png"):
-        with open(path, "wb") as f:
-            f.write(png)
-    print(f"OK wrote {len(png)} bytes {W}x{H} from {len(cells)} images")
-
-if __name__ == "__main__":
-    main()

scripts/refresh-catalogue.mjs

@@ -1,415 +0,0 @@
-#!/usr/bin/env node
-/**
- * Refresh the vai-avatar product mirror inside the Space repo, build, and commit.
- *
- * The Space is `sdk: static`: there is no server that builds at request time,
- * so the ONLY way a vai-avatar change reaches the browser is if the bytes under
- * dist/ are regenerated and committed. That is this script's reason to exist.
- *
- * Intended to run from an HF scheduled job:
- *
- *   npm run refresh:catalogue
- *
- * It is deliberately idempotent: if vai-avatar has not changed, nothing is
- * committed or pushed, so the Space is not rebuilt pointlessly.
- *
- * Failure policy: every step is checked, and a failure aborts BEFORE pushing.
- * The previously committed mirror therefore keeps serving. A half-written or
- * empty catalogue is far worse than a slightly stale one.
- */
-
-import { execFileSync } from 'node:child_process';
-import { closeSync, existsSync, openSync, readFileSync, readSync, rmSync, statSync, writeFileSync } from 'node:fs';
-
-const REPO = process.env.SPACE_REPO || 'bep40/semantic-image-field';
-const CLONE = process.env.CLONE_DIR || '/tmp/space';
-
-/**
- * The bundle names vite.config.js is configured to emit.
- *
- * Kept in step with `build.rollupOptions.output`, where entryFileNames and
- * assetFileNames both produce "index". The build is what makes them exist, which
- * is why the swap below happens only after it has run.
- */
-const STABLE_BUNDLE = 'assets/index.js';
-const STABLE_STYLE = 'assets/app.css';
-
-/** The two mirrored files, in both the source and the served location. */
-const MIRROR = ['products.json', 'promos.json'];
-
-/**
- * Everything this script is allowed to commit.
- *
- * An explicit path list rather than `git add -A`, and that is the single most
- * important safety property of this file. `.gitattributes` routes
- * products-index.json, products-gallery.json and dist/products-gallery.json
- * through git-lfs. The clone is a shallow `--depth 1` fetch; if the environment
- * has no git-lfs binary the smudge filter never runs and those files check out
- * as ~130-byte pointer text. `git add -A` would then stage the pointers and the
- * push would replace committed LFS objects with text — permanent, silent data
- * loss on the Hub, committed by a script that reported success.
- *
- * None of the paths below can be an LFS pointer, so a missing git-lfs no longer
- * has to be fatal: it only means the build output is unverifiable, not that the
- * mirror is unsafe to publish.
- *
- * `dist/catalogue` is here and not merely `public/catalogue` because of WHAT THE
- * BROWSER ACTUALLY FETCHES. Vite copies public/ into outDir/, so the bytes are
- * served from dist/catalogue/products.json — and that is the only place they
- * exist: there is no /catalogue/ at the Space root, because the Space serves
- * its root index.html rather than app.html, so nothing lands outside dist/.
- *
- * catalogue.js candidateURLs() resolves against the bundle at dist/assets/, and
- * the `../catalogue/…` candidate lands exactly on dist/catalogue/. (The
- * `../../…` candidate that precedes it lands on /catalogue/, which does not
- * exist, so it 404s first — a wasted request, then the dist/ form answers. The
- * ordering is worth knowing but not worth depending on.)
- *
- * Committing only the source copy would stage the new mirror, commit the new
- * bundle, print REFRESH_OK — and still 404 at runtime, because the copy that is
- * served was never pushed. That is a silent failure with no error anywhere, and
- * it is exactly the "sửa sp không đồng bộ" symptom.
- */
-const COMMITTABLE = ['index.html', 'public/catalogue', 'dist/catalogue', 'dist/assets', 'dist/share', 'public/share'];
-
-const ok = message => console.log(`[refresh] ${message}`);
-const warn = message => console.warn(`[refresh] WARNING: ${message}`);
-
-/** Run a command in the clone. Throws with the captured stderr attached. */
-function run(command, args, { cwd = CLONE } = {}) {
-  return execFileSync(command, args, {
-    cwd,
-    encoding: 'utf8',
-    stdio: ['ignore', 'pipe', 'pipe'],
-    maxBuffer: 64 * 1024 * 1024,
-  });
-}
-
-const shell = (script, cwd = CLONE) => run('bash', ['-lc', script], { cwd });
-
-/**
- * The token goes into an Authorization header rather than the remote URL.
- * Embedding it in https://user:TOKEN@huggingface.co persists it in
- * .git/config and can leak it into reflogs and trace output.
- */
-function git(...args) {
-  return run(
-    'git',
-    ['-c', `http.extraheader=Authorization: Bearer ${process.env.HF_TOKEN}`, ...args],
-  );
-}
-
-/**
- * Is git-lfs installed at all? (The smudge filter can only exist after
- * `git lfs install`, so availability is checked on the binary first, then
- * the clone-local filter is (re)wired with `git lfs install --local`.)
- */
-function hasGitLfsBinary() {
-  try {
-    return Boolean(shell('git lfs version 2>/dev/null || true').trim());
-  } catch {
-    return false;
-  }
-}
-
-/** Is git-lfs BOTH installed AND wired as a smudge filter for this clone? */
-function hasGitLfs() {
-  try {
-    if (!hasGitLfsBinary()) return false;
-    return Boolean(shell('git config --get filter.lfs.smudge || true').trim());
-  } catch {
-    return false;
-  }
-}
-
-/** Is this a git-lfs pointer rather than real content? */
-function isLfsPointer(path) {
-  let handle;
-  try {
-    handle = openSync(path, 'r');
-    const buffer = Buffer.alloc(256);
-    const read = readSync(handle, buffer, 0, 256, 0);
-    return buffer.subarray(0, read).toString('utf8')
-      .startsWith('version https://git-lfs.github.com/spec/v1');
-  } catch {
-    return false;
-  } finally {
-    if (handle !== undefined) { try { closeSync(handle); } catch { /* already gone */ } }
-  }
-}
-
-/** Size of `relative`, or null if it is missing, tiny, or an LFS pointer. */
-function realSize(relative) {
-  const path = `${CLONE}/${relative}`;
-  if (!existsSync(path)) return null;
-  const size = statSync(path).size;
-  if (size < 256 || isLfsPointer(path)) return null;
-  return size;
-}
-
-/**
- * Fail unless `relative` (resolved against the clone root) holds real content.
- *
- * `relative` must be a path from CLONE, not from dist/ — passing a bare filename
- * here silently checks the wrong location, which is how a missing committed data
- * file can pass as present.
- */
-function requireRealFile(relative, { why }) {
-  const path = `${CLONE}/${relative}`;
-  if (!existsSync(path)) throw new Error(`${relative} is missing — ${why}`);
-  if (realSize(relative) === null) {
-    throw new Error(
-      `${relative} is a git-lfs pointer or a truncated file, not real content. ${why}`,
-    );
-  }
-}
-
-/** Parse a mirror file and report how many records it holds. */
-function recordCount(relative) {
-  const parsed = JSON.parse(readFileSync(`${CLONE}/${relative}`, 'utf8'));
-  if (Array.isArray(parsed)) return parsed.length;
-  return Object.keys(parsed?.productEdits ?? {}).length;
-}
-
-/** True when index.html already names both stable assets. */
-function indexReferencesStable(html) {
-  return /\.\/dist\/assets\/index\.js\b/.test(html)
-    && /\.\/dist\/assets\/app\.css\b/.test(html);
-}
-
-/**
- * Point index.html at the freshly built bundle.
- *
- * This is load-bearing, not housekeeping. index.html is NOT a Vite input (the
- * input is app.html), so `vite build` never rewrites it — yet the build emits
- * the STABLE names while index.html still names a hashed bundle from an earlier
- * build. Those hashed files survive, because emptyOutDir is false precisely so
- * the build cannot delete committed data.
- *
- * The result was a refresh that could not fail loudly: the new bundle was
- * committed, the mirror was committed, the stale-but-present asset reference
- * passed verification, and the script reported REFRESH_OK — while the Space
- * kept serving the pre-fix JavaScript. The catalogue would update and the code
- * reading it would not, which looks exactly like "sửa sp không đồng bộ" and
- * survives every rebuild.
- *
- * So the swap is part of the refresh. It is idempotent: once index.html names
- * the stable files, the regex matches them, the write is a no-op, and git sees
- * no change.
- */
-function repointIndexHtml() {
-  const path = `${CLONE}/index.html`;
-  const html = readFileSync(path, 'utf8');
-
-  // Already correct: leave the file untouched so git sees no change.
-  if (indexReferencesStable(html)) return false;
-
-  // Only the asset reference is touched. Matching on the full "./dist/assets/"
-  // prefix means a hand-added link to something else in that directory (a
-  // vendored worker, say) is left alone rather than silently renamed.
-  let next = html.replace(
-    /(\.\/dist\/assets\/)index-[A-Za-z0-9_-]+\.js\b/g,
-    `$1${STABLE_BUNDLE.slice('assets/'.length)}`,
-  );
-  next = next.replace(
-    /(\.\/dist\/assets\/)index-[A-Za-z0-9_-]+\.css\b/g,
-    `$1${STABLE_STYLE.slice('assets/'.length)}`,
-  );
-
-  // The rewrite matched nothing AND index.html is not already correct. That is
-  // the case this guard exists for: index.html names its bundle by some other
-  // scheme (a query string, a different directory, a hand-written <script>), so
-  // the regex changes nothing. Treating that as "already fine" would publish a
-  // Space whose HTML points at a file the build never emits — a blank page that
-  // survives every rebuild, because the stale reference keeps resolving to a
-  // real, still-present file.
-  if (next === html) {
-    throw new Error(
-      'index.html names its bundle in a way repointIndexHtml() cannot rewrite — '
-      + 'refusing to publish (would blank the Space)',
-    );
-  }
-
-  // A partial rewrite is just as broken as none: JS pointing at the stable name
-  // while the <link> still names a hashed CSS (or the reverse) loads a bundle
-  // without its stylesheet.
-  if (!indexReferencesStable(next)) {
-    throw new Error(
-      'only part of index.html could be repointed — it would load the bundle '
-      + 'without its stylesheet, or vice versa',
-    );
-  }
-
-  // Confirm the build actually produced what we are now pointing at. Doing this
-  // after the rewrite rather than before would be circular; doing it before is
-  // what makes the rewrite safe.
-  for (const asset of [STABLE_BUNDLE, STABLE_STYLE]) {
-    requireRealFile(`dist/${asset}`, { why: 'the build did not produce it' });
-  }
-  writeFileSync(path, next, 'utf8');
-  ok(`index.html repointed to ${STABLE_BUNDLE} + ${STABLE_STYLE}`);
-  return true;
-}
-
-function main() {
-  if (!process.env.HF_TOKEN) {
-    throw new Error('HF_TOKEN is required to push the refreshed mirror.');
-  }
-
-  rmSync(CLONE, { recursive: true, force: true });
-  run('mkdir', ['-p', CLONE], { cwd: '/' });
-
-  git('init', '-q');
-  git('remote', 'add', 'origin', `https://huggingface.co/spaces/${REPO}`);
-  git('fetch', '-q', '--depth', '1', 'origin', 'main');
-  git('checkout', '-q', '-B', 'main', 'FETCH_HEAD');
-  ok(`cloned ${REPO}`);
-
-  // The og-image is LFS-tracked, and the pre-receive hook rejects raw binaries,
-  // so the clone MUST be able to smudge/clean via git-lfs. `git lfs install
-  // --local` inside the clone (a) loads the repository-local filters and (b)
-  // fails visibly when git-lfs is not installed, instead of silently committing
-  // a raw PNG pointer that a later push gets rejected for.
-  if (hasGitLfsBinary()) {
-    shell('git lfs install --local');
-    if (!hasGitLfs()) {
-      throw new Error('git lfs install --local did not wire the smudge filter');
-    }
-    ok('git-lfs wired for this clone');
-  } else {
-    throw new Error('git-lfs is required (og-image.png is LFS-tracked) — install git-lfs in the job');
-  }
-
-  // Informational only. COMMITTABLE excludes every LFS-tracked path, so a
-  // missing git-lfs cannot lead to pointers being committed; it just means the
-  // committed dist data cannot be verified from this clone.
-  const lfs = hasGitLfs();
-  if (!lfs) {
-    warn('git-lfs unavailable — dist data will be left unstaged and unverified (safe: it is LFS-tracked)');
-  }
-
-  shell('set -euo pipefail; npm install --silent --no-audit --no-fund');
-  ok('dependencies installed');
-
-  // Copies vai-avatar's live product sources into public/catalogue/.
-  shell('set -euo pipefail; node scripts/sync-catalogue.mjs');
-
-  // Regenerate the social-share thumbnail (12 newest images) BEFORE the build,
-  // so Vite copies public/share/ into dist/share/ and the committed og-image
-  // is refreshed on every sync. Non-fatal: the previous thumbnail keeps
-  // serving if the Hub is unreachable, but a HARD failure is not silent.
-  shell('set -euo pipefail; python3 scripts/gen-thumbnail.py');
-  for (const share of ['public/share/og-image.png', 'dist/share/og-image.png']) {
-    requireRealFile(share, { why: 'the social-share thumbnail would be missing' });
-  }
-  ok('social-share thumbnail regenerated');
-
-  // Guard before building: an empty or truncated mirror must never ship.
-  for (const file of MIRROR) {
-    requireRealFile(`public/catalogue/${file}`, { why: 'the mirror would ship empty' });
-    const count = recordCount(`public/catalogue/${file}`);
-    if (!count) throw new Error(`public/catalogue/${file} is empty — refusing to publish`);
-    ok(`public/catalogue/${file}: ${count} entries`);
-  }
-
-  shell('set -euo pipefail; npm run build');
-  requireRealFile(`dist/${STABLE_BUNDLE}`, { why: 'the build did not produce it' });
-  ok('built');
-
-  /**
-   * The build copies public/ into dist/, and that copy is what the browser
-   * fetches. Checked AFTER the build: if Vite's publicDir handling, outDir or a
-   * plugin config ever changed, this is the point where it surfaces — as a loud
-   * abort before any push, instead of a Space whose product panel 404s while
-   * the refresh reports success.
-   *
-   * The counts are compared too, not just presence. A stale dist/catalogue left
-   * over from an earlier build is byte-valid and non-empty, so presence alone
-   * would happily pass while the Space serves products the sync just replaced.
-   */
-  for (const file of MIRROR) {
-    const served = `dist/catalogue/${file}`;
-    requireRealFile(served, {
-      why: 'the build did not copy public/ into dist/, so the browser would 404',
-    });
-    const source = recordCount(`public/catalogue/${file}`);
-    const built = recordCount(served);
-    if (source !== built) {
-      throw new Error(`${served} has ${built} entries but the mirror has ${source} — the served copy is stale`);
-    }
-    ok(`served mirror verified: dist/catalogue/${file} (${built} entries)`);
-  }
-
-  // After the build, so the stable names are known to exist.
-  repointIndexHtml();
-
-  // Verify the served page BEFORE committing, and only AFTER repointing — the
-  // original order checked the stale reference against the stale file and passed.
-  const html = readFileSync(`${CLONE}/index.html`, 'utf8');
-  // Query strings (`?v=...`) are cache busters, not part of the filename —
-  // strip them so the existence check tests the real file on disk.
-  const referenced = [...html.matchAll(/(?:src|href)="\.\/dist\/([^"]+)"/g)]
-    .map(match => match[1].split('?')[0]);
-  if (!referenced.length) {
-    throw new Error('index.html references no dist/assets bundle — refusing to publish');
-  }
-  for (const name of referenced) {
-    requireRealFile(`dist/${name}`, { why: 'index.html points at it' });
-  }
-  ok(`index.html references verified: ${referenced.join(', ')}`);
-
-  // Confirm the build did not delete the committed data under dist/.
-  // vite.config.js sets emptyOutDir: false for exactly this reason; a revert of
-  // that setting would delete ~6,400 files with no error anywhere, and the app
-  // would keep working because src/ reads embeddings from the dataset repo and
-  // products from the mirror.
-  if (lfs) {
-    if (!existsSync(`${CLONE}/dist/prodimgs`)) {
-      throw new Error('dist/prodimgs is missing — the build deleted committed data; check emptyOutDir');
-    }
-    for (const file of ['dist/products-gallery.json', 'dist/products-index.json']) {
-      requireRealFile(file, { why: 'the build deleted committed data, or it is an LFS pointer' });
-    }
-    ok('committed dist data intact');
-  }
-
-  // Superseded hashed bundles are inert — index.html names exactly one — but they
-  // accumulate on every build. Left alone on purpose: pruning them is a separate,
-  // reviewable change, not something a sync job should do on its own.
-
-  // Explicit paths, never `git add -A` (see COMMITTABLE). Whether a commit
-  // happened must come from the commit step itself: testing it afterwards with
-  // `git diff --cached --quiet` would always report clean, because a successful
-  // commit clears the staging area — the push would then be skipped and the
-  // refresh would silently do nothing.
-  const commit = shell(`
-    set -euo pipefail
-    git config user.name  "semantic-image-field refresh"
-    git config user.email "refresh@hf.space"
-    git add -- ${COMMITTABLE.map(p => `'${p}'`).join(' ')}
-    if git diff --cached --quiet; then
-      echo NOCHANGE
-    else
-      git commit -q -m "chore: refresh vai-avatar catalogue mirror"
-      echo COMMITTED
-    fi
-  `).trim();
-
-  if (commit.includes('COMMITTED')) {
-    git('push', '-q', 'origin', 'main');
-    ok('pushed — the static Space will rebuild');
-  } else {
-    const head = shell('git rev-parse --short HEAD').trim();
-    ok(`catalogue unchanged (HEAD ${head})`);
-  }
-
-  console.log('REFRESH_OK');
-}
-
-try {
-  main();
-} catch (error) {
-  const detail = (error.stderr && String(error.stderr).trim()) || error.message;
-  console.error(`REFRESH_FAILED: ${detail}`);
-  process.exitCode = 1;
-}

scripts/refresh.mjs

@@ -1,74 +0,0 @@
-#!/usr/bin/env node
-import { execFileSync } from 'node:child_process';
-import { existsSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
-
-const REPO = 'bep40/semantic-image-field';
-const CLONE = '/tmp/space';
-const STABLE_BUNDLE = 'assets/index.js';
-const STABLE_STYLE = 'assets/app.css';
-const MIRROR = ['products.json', 'promos.json'];
-const COMMITTABLE = ['index.html', 'public/catalogue', 'dist/catalogue', 'dist/assets', 'dist/share', 'public/share'];
-
-const ok = m => console.log(`[refresh] ${m}`);
-
-function run(command, args, { cwd = CLONE } = {}) {
-  return execFileSync(command, args, { cwd, encoding: 'utf8', stdio: ['ignore', 'pipe', 'pipe'], maxBuffer: 64 * 1024 * 1024 });
-}
-function shell(script, cwd = CLONE) { return run('bash', ['-lc', script], { cwd }); }
-function git(...args) {
-  return run('git', ['-c', `http.extraheader=Authorization: Bearer ${process.env.HF_TOKEN}`, ...args]);
-}
-
-function main() {
-  if (!process.env.HF_TOKEN) throw new Error('HF_TOKEN required');
-  rmSync(CLONE, { recursive: true, force: true });
-  run('mkdir', ['-p', CLONE]);
-  run('git', ['clone', '-q', `--filter=blob:none`, '--no-checkout', `https://huggingface.co/spaces/${REPO}`], { cwd: '/' });
-  git('checkout', '-q', '-B', 'main', 'main');
-  ok('cloned');
-
-  shell('set -euo pipefail; npm install --silent --no-audit --no-fund');
-  ok('dependencies installed');
-  shell('set -euo pipefail; node scripts/sync-catalogue.mjs');
-  for (const file of MIRROR) {
-    const count = JSON.parse(readFileSync(`public/catalogue/${file}`, 'utf8')).length;
-    ok(`public/catalogue/${file}: ${count} entries`);
-  }
-  shell('set -euo pipefail; npm run build');
-  ok('built');
-  for (const file of MIRROR) {
-    const served = `dist/catalogue/${file}`;
-    const source = JSON.parse(readFileSync(`public/catalogue/${file}`, 'utf8')).length;
-    const built = JSON.parse(readFileSync(served, 'utf8')).length;
-    if (source !== built) throw new Error(`${served} has ${built} but mirror has ${source}`);
-    ok(`served mirror verified: ${file} (${built} entries)`);
-  }
-  const htmlPath = `${CLONE}/index.html`;
-  let html = readFileSync(htmlPath, 'utf8');
-  if (/\.\/dist\/assets\/index\.js\b/.test(html) && /\.\/dist\/assets\/app\.css\b/.test(html)) {
-    ok('index.html already references stable bundle');
-  } else {
-    let next = html.replace(/(\.\/dist\/assets\/)index-[A-Za-z0-9_-]+\.js\b/g, `$1${STABLE_BUNDLE.slice('assets/'.length)}`);
-    next = next.replace(/(\.\/dist\/assets\/)index-[A-Za-z0-9_-]+\.css\b/g, `$1${STABLE_STYLE.slice('assets/'.length)}`);
-    if (next === html) throw new Error('index.html names bundle in unexpected way');
-    writeFileSync(htmlPath, next);
-    ok('index.html repointed to ' + STABLE_BUNDLE);
-  }
-  for (const asset of [STABLE_BUNDLE, STABLE_STYLE]) {
-    if (!existsSync(`${CLONE}/dist/${asset}`)) throw new Error(`dist/${asset} missing`);
-  }
-  const commit = shell(`set -euo pipefail;
-    git config user.name "semantic-image-field refresh";
-    git config user.email "refresh@hf.space";
-    git add -- ${COMMITTABLE.map(p => `'${p}'`).join(' ')};
-    if git diff --cached --quiet; then echo NOCHANGE; else git commit -q -m "chore: rebuild with semantic search fix"; echo COMMITTED; fi`).trim();
-  if (commit.includes('COMMITTED')) {
-    git('push', '-q', 'origin', 'main');
-    ok('pushed — the static Space will rebuild');
-  } else {
-    ok(`no change needed (HEAD ${shell('git rev-parse --short HEAD').trim()})`);
-  }
-  console.log('REFRESH_OK');
-}
-try { main(); }
-catch (e) { console.error('REFRESH_FAILED:', e.message, e.stderr || ''); process.exitCode = 1; }

scripts/requirements-sync.txt

@@ -1,6 +0,0 @@
-# Needed only by scripts/sync-interiors.py, not by the field itself.
-# torch is CPU-only in practice: a sync embeds at most a few hundred images.
-sentence-transformers>=3.0
-torch>=2.2
-Pillow>=10.0
-huggingface_hub>=0.30

scripts/seed-catalogue.mjs

@@ -1,216 +0,0 @@
-#!/usr/bin/env node
-/**
- * Seed the vai-avatar product mirror into the Space WITHOUT running Vite.
- *
- * Why this exists alongside scripts/refresh-catalogue.mjs:
- *   refresh-catalogue.mjs is the steady-state job — it syncs, builds and
- *   repoints index.html. That is the right thing to run on a schedule, but it
- *   needs `npm install` plus a full `vite build`, so it needs an environment
- *   that can afford both.
- *
- *   The mirror, however, is currently absent on BOTH sides: neither
- *   public/catalogue/ nor dist/catalogue/ has ever been committed. Until it
- *   exists, catalogue.js finds no candidate URL, the Space fetches nothing,
- *   and no product appears in the photo-viewer — whatever the bundle does.
- *
- *   That gap does NOT need a build to close. dist/ already holds a working
- *   bundle, index.html already names it, and vite.config.js sets
- *   emptyOutDir: false precisely so a build cannot delete committed data.
- *   Writing the two JSON files into public/catalogue/ AND dist/catalogue/ is
- *   the whole fix, and it runs anywhere node and git exist.
- *
- *   Once seeded, go back to refresh-catalogue.mjs for ongoing updates.
- *
- *   npm run seed:catalogue
- *
- * Failure policy matches refresh-catalogue.mjs: every step is checked and any
- * failure aborts BEFORE pushing, so the last-good mirror keeps serving. A
- * half-written catalogue is worse than a stale one.
- */
-
-import { execFileSync } from 'node:child_process';
-import { existsSync, mkdirSync, readFileSync, statSync, writeFileSync, rmSync } from 'node:fs';
-
-const REPO = process.env.SPACE_REPO || 'bep40/semantic-image-field';
-const CLONE = process.env.CLONE_DIR || '/tmp/seed-space';
-const REVISION = 'main';
-const TIMEOUT_MS = 30_000;
-
-const ok = message => console.log(`[seed] ${message}`);
-
-/** Kept byte-identical to the sources declared in src/catalogue.js. */
-const SOURCES = {
-  'products.json': {
-    repo: 'bep40/grob-products-updated',
-    file: 'products_url_added.json',
-  },
-  'promos.json': {
-    repo: 'bep40/vaistudio-data',
-    file: 'promos.json',
-  },
-};
-
-/**
- * The two places the bytes must exist.
- *
- * public/catalogue/ is the source copy and what Vite copies on future builds;
- * dist/catalogue/ is what the browser actually fetches, because the Space
- * serves its root index.html and catalogue.js resolves `../catalogue/…`
- * relative to the bundle in dist/assets/. Committing only the source copy
- * would stage the mirror, report success, and still 404 at runtime — the
- * exact "sửa sp không đồng bộ" symptom.
- */
-const DESTINATIONS = ['public/catalogue', 'dist/catalogue'];
-
-/**
- * Everything this script may commit. Explicit paths, never `git add -A`:
- * .gitattributes routes *.png/*.jpg/*.pdf and more through git-lfs, and a
- * shallow clone without a git-lfs binary checks those out as ~130-byte
- * pointer text. `git add -A` would stage those pointers and replace committed
- * LFS objects with text — permanent, silent data loss, committed by a script
- * that reported success.
- *
- * Note what is NOT here: dist/assets and index.html. This script neither builds
- * nor repoints, so it can never leave the Space serving a bundle it did not
- * produce.
- */
-const COMMITTABLE = DESTINATIONS;
-
-function run(command, args, { cwd = CLONE } = {}) {
-  return execFileSync(command, args, {
-    cwd,
-    encoding: 'utf8',
-    stdio: ['ignore', 'pipe', 'pipe'],
-    maxBuffer: 64 * 1024 * 1024,
-  });
-}
-
-const shell = (script, cwd = CLONE) => run('bash', ['-lc', script], { cwd });
-
-/**
- * The token goes into an Authorization header rather than the remote URL:
- * embedding it in https://user:TOKEN@huggingface.co persists it in
- * .git/config and leaks it into reflogs and trace output.
- */
-function git(...args) {
-  return run(
-    'git',
-    ['-c', `http.extraheader=Authorization: Bearer ${process.env.HF_TOKEN}`, ...args],
-  );
-}
-
-/** Records held by a mirror file: array length, or productEdits key count. */
-function recordCount(relative) {
-  const parsed = JSON.parse(readFileSync(`${CLONE}/${relative}`, 'utf8'));
-  if (Array.isArray(parsed)) return parsed.length;
-  return Object.keys(parsed?.productEdits ?? {}).length;
-}
-
-/**
- * Is this file an LFS pointer or a truncated copy rather than real content?
- * The mirror is JSON, which .gitattributes does not route through LFS, so a
- * pointer here would mean something upstream changed that assumption.
- */
-function isUnusable(relative) {
-  const path = `${CLONE}/${relative}`;
-  if (!existsSync(path)) return 'missing';
-  if (statSync(path).size < 256) return 'truncated';
-  const head = readFileSync(path, { encoding: 'utf8', flag: 'r' }).slice(0, 200);
-  if (head.startsWith('version https://git-lfs.github.com/spec/v1')) return 'an LFS pointer';
-  return null;
-}
-
-async function fetchSource(name, source) {
-  const url = `https://huggingface.co/datasets/${source.repo}/resolve/${REVISION}/${source.file}?cts=${Date.now()}`;
-  process.stdout.write(`[seed] ${name} <- ${source.repo}/${source.file} ... `);
-  const response = await fetch(url, {
-    cache: 'no-store',
-    signal: AbortSignal.timeout(TIMEOUT_MS),
-    headers: process.env.HF_TOKEN ? { Authorization: `Bearer ${process.env.HF_TOKEN}` } : {},
-  });
-  if (!response.ok) throw new Error(`HTTP ${response.status} for ${url}`);
-  const text = await response.text();
-  // Parse before writing: a truncated body or an HTML error page would
-  // otherwise be published as if it were a catalogue.
-  JSON.parse(text);
-  process.stdout.write('ok\n');
-  return text;
-}
-
-async function main() {
-  if (!process.env.HF_TOKEN) throw new Error('HF_TOKEN is required to push the seeded mirror.');
-
-  rmSync(CLONE, { recursive: true, force: true });
-  run('mkdir', ['-p', CLONE], { cwd: '/' });
-
-  git('init', '-q');
-  git('remote', 'add', 'origin', `https://huggingface.co/spaces/${REPO}`);
-  git('fetch', '-q', '--depth', '1', 'origin', 'main');
-  git('checkout', '-q', '-B', 'main', 'FETCH_HEAD');
-  ok(`cloned ${REPO}`);
-
-  for (const directory of DESTINATIONS) mkdirSync(`${CLONE}/${directory}`, { recursive: true });
-
-  for (const [name, source] of Object.entries(SOURCES)) {
-    const text = await fetchSource(name, source);
-    for (const directory of DESTINATIONS) {
-      writeFileSync(`${CLONE}/${directory}/${name}`, text, 'utf8');
-    }
-  }
-
-  /**
-   * Verify both copies, and compare their counts.
-   *
-   * Presence alone is not enough: a stale dist/catalogue left over from an
-   * earlier build is byte-valid and non-empty, so it would pass a presence
-   * check while the Space serves products the fetch just replaced. Comparing
-   * counts catches exactly that.
-   */
-  for (const [name] of Object.entries(SOURCES)) {
-    const paths = DESTINATIONS.map(directory => `${directory}/${name}`);
-    const counts = [];
-    for (const relative of paths) {
-      const problem = isUnusable(relative);
-      if (problem) throw new Error(`${relative} is ${problem} — refusing to publish`);
-      counts.push(recordCount(relative));
-    }
-    if (counts[0] !== counts[1]) {
-      throw new Error(
-        `${paths[0]} has ${counts[0]} records but ${paths[1]} has ${counts[1]} — the served copy is stale`,
-      );
-    }
-    if (!counts[0]) throw new Error(`${paths[0]} is empty — refusing to publish`);
-    ok(`${paths.join(' + ')}: ${counts[0]} records`);
-  }
-
-  const commit = shell(`
-    set -euo pipefail
-    git config user.name  "semantic-image-field seed"
-    git config user.email "seed@hf.space"
-    git add -- ${COMMITTABLE.map(p => `'${p}'`).join(' ')}
-    if git diff --cached --quiet; then
-      echo NOCHANGE
-    else
-      git commit -q -m "chore: seed vai-avatar catalogue mirror"
-      echo COMMITTED
-    fi
-  `).trim();
-
-  if (commit.includes('COMMITTED')) {
-    git('push', '-q', 'origin', 'main');
-    ok('pushed — the static Space will serve the mirror from dist/catalogue/');
-  } else {
-    const head = shell('git rev-parse --short HEAD').trim();
-    ok(`mirror already seeded (HEAD ${head})`);
-  }
-
-  console.log('SEED_OK');
-}
-
-try {
-  await main();
-} catch (error) {
-  const detail = (error.stderr && String(error.stderr).trim()) || error.message;
-  console.error(`SEED_FAILED: ${detail}`);
-  process.exitCode = 1;
-}

scripts/sync-catalogue.mjs

@@ -1,141 +0,0 @@
-#!/usr/bin/env node
-/**
- * Mirror vai-avatar's live product sources into this Space, same-origin.
- *
- * Why a mirror and not a runtime cross-origin fetch:
- *   huggingface.co serves dataset files with
- *   `Access-Control-Allow-Origin: https://huggingface.co`, and `/resolve` then
- *   302s to a CDN host that sets its own CORS policy. A page on
- *   *.static.hf.space is neither origin, so the browser hides the response
- *   body and the read fails with an opaque "Failed to fetch". Same-origin
- *   cannot be blocked, so the bytes are copied into the Space instead.
- *
- * Freshness therefore depends on this script running, not on a rebuild of any
- * baked data: re-run it (or let the scheduled job run it) and the Space serves
- * whatever vai-avatar has written at that moment.
- *
- *   node scripts/sync-catalogue.mjs
- *
- * Writes public/catalogue/products.json and public/catalogue/promos.json.
- * `public/` is what Vite copies into dist/, so both end up served with the app.
- */
-
-import { mkdir, writeFile } from 'node:fs/promises';
-import { realpathSync } from 'node:fs';
-import { dirname, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-const ROOT = resolve(dirname(fileURLToPath(import.meta.url)), '..');
-const OUT_DIR = resolve(ROOT, 'public/catalogue');
-const REVISION = 'main';
-const TIMEOUT_MS = 30_000;
-
-/** Kept byte-identical to the sources declared in src/catalogue.js. */
-export const SOURCES = {
-  'products.json': {
-    repo: 'bep40/grob-products-updated',
-    file: 'products_url_added.json',
-  },
-  'promos.json': {
-    repo: 'bep40/vaistudio-data',
-    file: 'promos.json',
-  },
-};
-
-function urlFor({ repo, file }) {
-  return `https://huggingface.co/datasets/${repo}/resolve/${REVISION}/${file}?cts=${Date.now()}`;
-}
-
-async function fetchSource(name, source) {
-  const url = urlFor(source);
-  process.stdout.write(`[sync] ${name} <- ${source.repo}/${source.file} ... `);
-  const response = await fetch(url, {
-    cache: 'no-store',
-    signal: AbortSignal.timeout(TIMEOUT_MS),
-    headers: process.env.HF_TOKEN ? { Authorization: `Bearer ${process.env.HF_TOKEN}` } : {},
-  });
-  if (!response.ok) throw new Error(`HTTP ${response.status} for ${url}`);
-  const text = await response.text();
-  // Validate before writing: a truncated or HTML error body would otherwise be
-  // served to the app as if it were a catalogue.
-  const parsed = JSON.parse(text);
-  const count = Array.isArray(parsed)
-    ? `${parsed.length} products`
-    : `${Object.keys(parsed?.productEdits ?? {}).length} productEdits`;
-  process.stdout.write(`ok (${count})\n`);
-  return text;
-}
-
-/**
- * Was this file the process entrypoint?
- *
- * Comparing basenames with `endsWith` looks equivalent and is not: any file whose
- * name merely ENDS WITH this one (`my-sync-catalogue.mjs`) also matches, so
- * loading such a file would run main() as a side effect of importing it. Both
- * paths are resolved before comparing.
- */
-function isDirectRun() {
-  const entry = process.argv[1];
-  if (!entry) return false;
-  try {
-    return realpathSync(entry) === realpathSync(fileURLToPath(import.meta.url));
-  } catch {
-    return false;
-  }
-}
-
-async function main() {
-  await mkdir(OUT_DIR, { recursive: true });
-  let failures = 0;
-  for (const [name, source] of Object.entries(SOURCES)) {
-    try {
-      const text = await fetchSource(name, source);
-      await writeFile(resolve(OUT_DIR, name), text, 'utf8');
-    } catch (error) {
-      // The good file is still written, so one transient error does not throw
-      // away a successful fetch. Whether that mixture may be PUBLISHED is
-      // decided below.
-      failures++;
-      console.error(`[sync] FAILED ${name}: ${error.message}`);
-    }
-  }
-
-  /**
-   * ANY failure fails the run, not only a total failure.
-   *
-   * This matters from the second successful run onward, once public/catalogue is
-   * committed: a file that failed to fetch is then still on disk as its previous
-   * version, so requireRealFile() and recordCount() in refresh-catalogue.mjs both
-   * pass on that stale copy. The caller would then build, commit and print
-   * REFRESH_OK, and the Space would serve a fresh products.json beside an old
-   * promos.json -- so every Sửa and every Xóa from vai-avatar silently stopped
-   * applying, with no error anywhere.
-   *
-   * On the very first run the mirror is not committed yet, so the failed file is
-   * simply absent and the caller's guard already catches it. Failing here makes
-   * that behaviour unconditional instead of depending on which run it is.
-   *
-   * A stale overlay is not a degraded catalogue, it is a wrong one: catalogue.js
-   * merges the two files, so old edits resurrect old prices and old tombstones
-   * fight the new file. Aborting here is what makes the caller leave the
-   * previously committed mirror intact, which is the guarantee both scripts
-   * document.
-   */
-  if (failures > 0) {
-    console.error(
-      `[sync] ${failures}/${Object.keys(SOURCES).length} source(s) failed — the mirror on disk `
-      + 'is now MIXED (fresh file beside last-commit file). Refusing to report success: '
-      + 'the caller must abort so the last-good mirror stays live.',
-    );
-    process.exitCode = 1;
-    return;
-  }
-  console.log(`[sync] wrote ${OUT_DIR}`);
-}
-
-if (isDirectRun()) {
-  main().catch(error => {
-    console.error(`[sync] ${error.stack || error}`);
-    process.exitCode = 1;
-  });
-}

scripts/sync-interiors.py

@@ -1,388 +0,0 @@
-#!/usr/bin/env python3
-"""
-Two-way sync between this Space's interiors and vai-avatar's interior library.
-
-WHY THIS CANNOT JUST COPY FILES
--------------------------------
-The field searches interiors with its own CLIP matrix
-(`image-embeddings_25k-512-32bit.bin`, 512 dims). vai-avatar's library uses a
-different embedding model. A new image therefore cannot be copied across: it
-has to be encoded with the field's own model first, or it lands in a 512-dim
-space that is not the one the field searches.
-
-This was measured rather than assumed. Cosine between the two datasets on the
-377 images they share is 0.6347; cosine between two DIFFERENT images is 0.6336.
-Same dimensionality, no signal -- the spaces are not interchangeable, so a file
-copy would produce confidently wrong search results.
-
-WHAT IT DOES
-------------
-  added    live on the API, absent from the field -> download, embed, upload,
-           append to both index files
-  removed  present in the field, gone from the API  -> drop from the index and
-           the vector blob, delete the bitmap
-
-The source of truth is the API's own `/latest`, not the dataset's
-`metadata.json`. That file is a history, not a manifest: it holds 1,752 rows
-for 1,122 live images, so deleted rows linger in it and a file-driven sync
-would resurrect whatever the user removed on the other side.
-
-RUN
----
-    pip install -r scripts/requirements-sync.txt
-    python scripts/sync-interiors.py --dry-run    # report, change nothing
-    python scripts/sync-interiors.py              # apply
-    python scripts/sync-interiors.py --limit 5    # apply a few, for testing
-"""
-
-from __future__ import annotations
-
-import argparse
-import base64
-import io
-import json
-import os
-import struct
-import sys
-import time
-import urllib.error
-import urllib.request
-
-from PIL import Image
-
-# --------------------------------------------------------------------------
-# Where things live
-# --------------------------------------------------------------------------
-
-API = os.environ.get("INTERIOR_API_URL", "https://bep40-vai-avatar2-interior-api.hf.space")
-DATASET = os.environ.get("FIELD_DATASET", "bep40/interior-image-field-assets")
-HUB = os.environ.get("HF_HUB") or os.environ.get("HF_TOKEN")
-
-INDEX_NAME = "image-embeddings.json"
-BLOB_NAME = "image-embeddings_25k-512-32bit.bin"
-
-RESOLVE = f"https://huggingface.co/datasets/{DATASET}/resolve/main/"
-
-# The field's image model, matching what produced the existing vectors.
-IMAGE_MODEL = "sentence-transformers/clip-ViT-B-32-multilingual-v1"
-DIMS = 512
-
-BRANDS = ("malloca", "grob", "hafele", "eurogold", "canzy", "konox", "demax")
-
-
-def log(message: str) -> None:
-    print(message, flush=True)
-
-
-def get(url: str, timeout: int = 120) -> bytes:
-    request = urllib.request.Request(url, headers={"User-Agent": "interior-sync/1.0"})
-    with urllib.request.urlopen(request, timeout=timeout) as response:
-        return response.read()
-
-
-def post_json(url: str, payload: dict, timeout: int = 120) -> dict:
-    request = urllib.request.Request(
-        url,
-        data=json.dumps(payload).encode(),
-        headers={"Content-Type": "application/json", "User-Agent": "interior-sync/1.0"},
-    )
-    with urllib.request.urlopen(request, timeout=timeout) as response:
-        return json.loads(response.read().decode())
-
-
-# --------------------------------------------------------------------------
-# The field's vector format
-#
-# `image-embeddings_25k-512-32bit.bin` is headerless little-endian float32,
-# 512 floats per row, row order matching `image-embeddings.json`. The "25k" in
-# the filename is decorative: the file holds exactly as many rows as the index
-# has entries.
-# --------------------------------------------------------------------------
-
-def decode_blob(raw: bytes) -> list[list[float]]:
-    count, remainder = divmod(len(raw), 4 * DIMS)
-    if remainder:
-        raise ValueError(
-            f"blob is {len(raw)} bytes, not a whole number of {DIMS}-float rows "
-            f"(remainder {remainder}) -- the index and the vectors disagree"
-        )
-    flat = struct.unpack(f"<{count * DIMS}f", raw[: count * 4 * DIMS])
-    return [list(flat[i * DIMS : (i + 1) * DIMS]) for i in range(count)]
-
-
-def encode_blob(rows: list[list[float]]) -> bytes:
-    for index, row in enumerate(rows):
-        if len(row) != DIMS:
-            raise ValueError(f"row {index} has {len(row)} values, expected {DIMS}")
-    return struct.pack(f"<{len(rows) * DIMS}f", *(v for row in rows for v in row))
-
-
-# --------------------------------------------------------------------------
-# Reading the current state
-# --------------------------------------------------------------------------
-
-def fetch_live_images() -> dict[str, dict]:
-    """Every image the API currently serves, keyed by image_id.
-
-    The paging parameter is `top_k`, not `limit`; sending `limit` silently
-    returns the default page of 24 no matter what is asked for.
-    """
-    first = post_json(f"{API}/latest", {"top_k": 1, "offset": 0})
-    total = int(first.get("total", 0))
-    live: dict[str, dict] = {}
-    offset = 0
-    while offset < total:
-        page = post_json(f"{API}/latest", {"top_k": 250, "offset": offset})
-        rows = page.get("results", [])
-        if not rows:
-            break
-        for row in rows:
-            live[row["image_id"]] = row
-        offset += len(rows)
-        time.sleep(0.4)
-    log(f"  API reports {total} live images; collected {len(live)}")
-    if len(live) != total:
-        log(f"  WARNING: expected {total} ids but collected {len(live)}")
-    return live
-
-
-def load_field_state() -> tuple[list[dict], list[list[float]]]:
-    index = json.loads(get(RESOLVE + INDEX_NAME).decode())
-    blob = decode_blob(get(RESOLVE + BLOB_NAME))
-    if len(index) != len(blob):
-        raise ValueError(
-            f"index has {len(index)} entries but the blob holds {len(blob)} vectors; "
-            "refusing to write a file the field cannot load"
-        )
-    return index, blob
-
-
-# --------------------------------------------------------------------------
-# Record conventions, mirrored from the field's own scraper output
-# --------------------------------------------------------------------------
-
-def aspect_ratio(image: Image.Image) -> float:
-    width, height = image.size
-    return round(width / height, 4) if height else 1.0
-
-
-def blur_placeholder(image: Image.Image) -> str:
-    """
-    A tiny base64 JPEG, like the placeholders the scraper writes.
-
-    The field paints `blur` behind each tile, so an image without one shows an
-    empty box for the frames before its bitmap arrives. This costs ~60 bytes and
-    removes that flash.
-    """
-    buffer = io.BytesIO()
-    image.convert("RGB").resize((4, 3)).save(buffer, format="JPEG", quality=40)
-    return base64.b64encode(buffer.getvalue()).decode()
-
-
-def title_from(entry: dict) -> str:
-    for key in ("desc", "title"):
-        value = entry.get(key)
-        if isinstance(value, str) and value.strip():
-            return " ".join(value.split())[:120]
-    for key in ("labels", "keywords"):
-        value = entry.get(key)
-        if isinstance(value, list) and value:
-            return str(value[0]).strip()[:120]
-    return ""
-
-
-def categories_from(entry: dict) -> list[str]:
-    out: list[str] = []
-    for key in ("categories", "room_hints"):
-        for value in entry.get(key) or []:
-            text = str(value).strip()
-            if text and text not in out:
-                out.append(text)
-    return out[:4] or ["Uncategorized"]
-
-
-def build_record(entry: dict, image: Image.Image) -> dict:
-    """One interior row, in exactly the shape image-embeddings.json uses."""
-    image_id = entry["image_id"]
-    return {
-        "id": image_id,
-        # The field resolves an interior's bitmap relative to its own dataset and
-        # the scraper stored a bare filename, so keep that convention.
-        "url": f"{image_id}.jpg",
-        "ar": aspect_ratio(image),
-        "blur": blur_placeholder(image),
-        "title": title_from(entry),
-        "categories": categories_from(entry),
-        "source": str(entry.get("source") or ""),
-    }
-
-
-# --------------------------------------------------------------------------
-# Embedding
-# --------------------------------------------------------------------------
-
-class Embedder:
-    """The field's own image model, loaded lazily so a no-op sync is cheap."""
-
-    def __init__(self) -> None:
-        self._model = None
-
-    def _load(self):
-        if self._model is None:
-            from sentence_transformers import SentenceTransformer
-
-            log(f"  loading {IMAGE_MODEL} (first run downloads ~600 MB)")
-            self._model = SentenceTransformer(IMAGE_MODEL)
-        return self._model
-
-    def image(self, image: Image.Image) -> list[float]:
-        vector = self._load().encode([image], convert_to_numpy=True)[0]
-        norm = float((vector**2).sum() ** 0.5)
-        if norm > 0:
-            vector = vector / norm
-        if len(vector) != DIMS:
-            raise ValueError(f"model returned {len(vector)} dims, expected {DIMS}")
-        return [float(v) for v in vector]
-
-
-# --------------------------------------------------------------------------
-# The sync itself
-# --------------------------------------------------------------------------
-
-def main() -> int:
-    parser = argparse.ArgumentParser(description=__doc__)
-    parser.add_argument("--dry-run", action="store_true", help="report changes, write nothing")
-    parser.add_argument("--no-upload", action="store_true", help="build everything but do not push")
-    parser.add_argument("--limit", type=int, default=0, help="cap how many images to add")
-    args = parser.parse_args()
-
-    if not HUB and not args.dry_run and not args.no_upload:
-        log("HF_TOKEN is not set. Export it, or pass --no-upload to build without pushing.")
-        return 2
-
-    log("Reading the field...")
-    index, vectors = load_field_state()
-    log(f"  field holds {len(index)} interiors")
-
-    log("Reading the API...")
-    live = fetch_live_images()
-
-    have = {str(row.get("id")) for row in index}
-    to_add = sorted(set(live) - have)
-    to_drop = sorted(have - set(live))
-
-    log("")
-    log(f"  to add   : {len(to_add)}")
-    log(f"  to remove: {len(to_drop)}")
-    if to_drop:
-        log(f"    {', '.join(to_drop[:6])}{' ...' if len(to_drop) > 6 else ''}")
-    if to_add:
-        log(f"    {', '.join(to_add[:6])}{' ...' if len(to_add) > 6 else ''}")
-
-    if args.limit:
-        to_add = to_add[: args.limit]
-        log(f"  limited to {len(to_add)} additions for this run")
-
-    if not to_add and not to_drop:
-        log("\nNothing to do -- the two sides already agree.")
-        return 0
-    if args.dry_run:
-        log("\nDry run: nothing was written.")
-        return 0
-    if not to_add:
-        log("\nOnly removals pending, which the same run applies below.")
-    if not to_add and not to_drop:
-        return 0
-
-    added_rows: list[dict] = []
-    added_vectors: list[list[float]] = []
-    bitmaps: list[tuple[str, bytes]] = []
-
-    if to_add:
-        log(f"\nEmbedding {len(to_add)} new interiors...")
-        embedder = Embedder()
-        for n, image_id in enumerate(to_add, 1):
-            entry = live[image_id]
-            try:
-                raw = get(f"{API}/image/{image_id}.jpg")
-                image = Image.open(io.BytesIO(raw))
-                image.load()
-            except (urllib.error.URLError, OSError) as error:
-                log(f"  [{n}/{len(to_add)}] {image_id}: fetch failed ({error}) -- skipped")
-                continue
-            try:
-                vector = embedder.image(image)
-            except Exception as error:  # noqa: BLE001 - report and keep going
-                log(f"  [{n}/{len(to_add)}] {image_id}: embed failed ({error}) -- skipped")
-                continue
-            added_rows.append(build_record(entry, image))
-            added_vectors.append(vector)
-            bitmaps.append((f"images/{image_id}.jpg", raw))
-            log(f"  [{n}/{len(to_add)}] {image_id}  {image.size[0]}x{image.size[1]}  {title_from(entry)[:44]}")
-
-    new_index = index + added_rows
-    new_vectors = vectors + added_vectors
-
-    if to_drop:
-        # Rebuild both files from the surviving rows, so the index and the blob
-        # cannot drift out of alignment: the field refuses to load them otherwise.
-        drop = set(to_drop)
-        keep = [i for i, row in enumerate(new_index) if str(row.get("id")) not in drop]
-        new_index = [new_index[i] for i in keep]
-        new_vectors = [new_vectors[i] for i in keep]
-
-    log("")
-    log(f"Final: {len(new_index)} interiors "
-        f"(+{len(added_rows)} added, -{len(to_drop)} removed)")
-
-    if not added_rows and not to_drop:
-        log("Nothing changed.")
-        return 0
-    if args.no_upload:
-        log("Skipping push (--no-upload).")
-        return 0
-
-    from huggingface_hub import CommitOperationAdd, CommitOperationDelete, HfApi
-
-    client = HfApi(token=HUB) if HUB else HfApi()
-    operations = [CommitOperationAdd(path_in_repo=name, path_or_fileobj=data)
-                  for name, data in bitmaps]
-    operations.append(CommitOperationAdd(
-        path_in_repo=INDEX_NAME,
-        path_or_fileobj=json.dumps(new_index, ensure_ascii=False).encode(),
-    ))
-    operations.append(CommitOperationAdd(
-        path_in_repo=BLOB_NAME, path_or_fileobj=encode_blob(new_vectors)))
-    if to_drop:
-        # Only delete what is actually on the Hub, or the whole commit 404s.
-        present = set(client.list_repo_files(DATASET, repo_type="dataset"))
-        removed = 0
-        for image_id in to_drop:
-            path = f"images/{image_id}.jpg"
-            if path in present:
-                operations.append(CommitOperationDelete(path_in_repo=path))
-                removed += 1
-        log(f"  deleting {removed} of {len(to_drop)} bitmaps (the rest were already gone)")
-
-    commit = client.create_commit(
-        repo_id=DATASET,
-        repo_type="dataset",
-        operations=operations,
-        commit_message=(
-            f"sync interiors with vai-avatar: +{len(added_rows)} -{len(to_drop)}\n\n"
-            "Driven by the API's live image list rather than metadata.json: that file\n"
-            "retains deleted rows (1,752 rows for 1,122 live images), so a\n"
-            "file-driven sync resurrects whatever the user removed on the other side.\n\n"
-            "New images are embedded with the field's own CLIP model. The two sides\n"
-            "use different embedding models, so copying a file would place it in an\n"
-            "unrelated vector space and search would return noise.\n\n"
-            "Generated by scripts/sync-interiors.py."
-        ),
-    )
-    log(f"Pushed {commit.oid} to {DATASET}")
-    log("The field polls the dataset revision, so these appear within a minute.")
-    return 0
-
-
-if __name__ == "__main__":
-    sys.exit(main())

scripts/test-avatar-interiors.mjs

@@ -1,287 +0,0 @@
-/**
- * Tests for the vai-avatar interior sync and the featured/neon emphasis.
- *
- * The emphasis rules are the part most likely to rot silently: a wrong tile
- * still renders, it just renders at the wrong size or without the ring, and
- * nothing throws. These assert the geometry and the ordering, not just "no
- * crash".
- *
- * The share-URL block is here for the same reason, and it is deliberately
- * Node-only. The browser copy of this rule lives in dist/assets/share-fix.js as
- * a string regex, because it has to run against the served bundle before a
- * rebuild; the routing decision itself lives in src/assets.js. These tests pin
- * the src/ half so the two cannot drift apart silently, and the browser half is
- * asserted separately in scripts/test-neon-ui.mjs.
- */
-import assert from 'node:assert/strict';
-import { mergeResults } from '../src/merge.js';
-import { foldText, searchAvatarInteriors } from '../src/avatar-interiors.js';
-import { shareURL } from '../src/assets.js';
-
-let passed = 0, failed = 0;
-const test = (name, fn) => {
-  try { fn(); console.log('  ok  ' + name); passed++; }
-  catch (error) { console.log('  FAIL ' + name + '\n       ' + error.message); failed++; }
-};
-
-const interior = (id, score) => ({ id: `interior:${id}`, blur: 'L000', ar: 1, score });
-const product = (sku, score) => ({ sku, name: 'Tủ bếp', ar: 1, score, images: ['https://x/y.jpg'] });
-
-console.log('\nvai-avatar interior sync');
-// ──────────────────────────────────────────────────────────────────────────
-
-test('Vietnamese folding makes diacritics optional on both sides', () => {
-  // The whole reason foldText exists: a visitor types "bep da", the record says
-  // "Bếp đá". Without folding these never match and the neon never fires.
-  assert.equal(foldText('Bếp đá'), 'bep da');
-  assert.equal(foldText('Phòng Ngủ'), 'phong ngu');
-});
-
-test('a whole-query match outranks a single-term match', () => {
-  const items = [
-    { avatarImageId: 'a', title: 'sofa phòng khách hiện đại', description: '', categories: [], keywords: [], addedAt: '2026-10-01T00:00:00Z' },
-    { avatarImageId: 'b', title: 'ghế sofa', description: 'mẫu ghế đơn', categories: [], keywords: [], addedAt: '2026-10-02T00:00:00Z' },
-  ];
-  const hits = searchAvatarInteriors('sofa phòng khách', items);
-  assert.equal(hits[0].avatarImageId, 'a', 'the full-query match must rank first');
-});
-
-test('a whole-query match scores above the exact-outline threshold', () => {
-  // 900 is the same floor relevance.js uses, and it is what makes merge.js treat
-  // this as identity rather than resemblance. If this dropped below 700 the neon
-  // would silently stop appearing on newly added photographs.
-  const items = [{ avatarImageId: 'a', title: 'chuyển sang phong cách classical', description: '', categories: [], keywords: [], addedAt: '2026-10-01T00:00:00Z' }];
-  assert.ok(searchAvatarInteriors('classical', items)[0].score >= 700);
-});
-
-test('an unrelated query returns nothing rather than everything', () => {
-  const items = [{ avatarImageId: 'a', title: 'sofa phòng khách', description: '', categories: [], keywords: [], addedAt: '2026-10-01T00:00:00Z' }];
-  assert.equal(searchAvatarInteriors('móc treo', items).length, 0);
-});
-
-test('a query too short to be meaningful is rejected', () => {
-  const items = [{ avatarImageId: 'a', title: 'a', description: '', categories: [], keywords: [], addedAt: '2026-10-01T00:00:00Z' }];
-  assert.equal(searchAvatarInteriors('a', items).length, 0);
-});
-
-console.log('\nshare URLs');
-// ──────────────────────────────────────────────────────────────────────────
-
-const STUDIO = 'https://bep40-vai-avatar.hf.space';
-const broken = 'https://bep40-vai-avatar.hf.space/share/p/avatarimg%3Ab68dc779370dc70e';
-const fixed = `${STUDIO}/share/i/b68dc779370dc70e`;
-
-test('the reported broken URL is now the interior route', () => {
-  // The exact address from the report. `avatarimg:` is a namespace for
-  // de-duplication, not a catalogue identity, so /share/p/ resolved to nothing
-  // and vai-avatar answered "Not Found" for every interior photograph.
-  assert.equal(shareURL({ avatarImageId: 'b68dc779370dc70e', sku: 'avatarimg:b68dc779370dc70e' }), fixed);
-});
-
-test('the bug is reproducible against the old logic', () => {
-  // Pins what the fix is fixing, so the assertion above cannot pass for an
-  // unrelated reason. Without the avatarImageId branch, `sku` wins and the link
-  // is the dead one -- byte-identical to the reported URL.
-  const photo = { sku: 'avatarimg:b68dc779370dc70e' };
-  const oldRoute = `${STUDIO}/share/p/${encodeURIComponent(photo.sku)}`;
-  assert.equal(oldRoute, broken, 'the reported URL must be what the old routing produced');
-  assert.notEqual(shareURL(photo), oldRoute, 'shareURL still routes an avatarimg sku to /share/p/');
-});
-
-test('an interior is routed even when it has lost avatarImageId', () => {
-  // merge.js rewrites `id` into a namespaced tile key, so a record can arrive
-  // carrying the sku but not the original field. The prefix is unwrapped rather
-  // than treated as an identity, which is what this fallback exists for.
-  assert.equal(shareURL({ sku: 'avatarimg:b68dc779370dc70e' }), fixed);
-});
-
-test('an empty avatarimg prefix yields no share URL at all', () => {
-  // /share/i/ with nothing after it is its own 404. Returning null lets the
-  // caller omit the button rather than render a dead link.
-  assert.equal(shareURL({ sku: 'avatarimg:' }), null);
-  assert.equal(shareURL({ avatarImageId: '  ' }), null);
-});
-
-test('a real product still routes to /share/p/', () => {
-  // The fix must not disturb the route that works. A product keeps its slug, and
-  // /share/p/ resolves all three identity forms.
-  assert.equal(shareURL({ sku: 'MH800TC' }), `${STUDIO}/share/p/MH800TC`);
-  assert.equal(
-    shareURL({ sku: 'MH800TC', slug: 'mh800tc-malloca-may-hut-mui-gan-tu-am-tu-80cm' }),
-    `${STUDIO}/share/p/mh800tc-malloca-may-hut-mui-gan-tu-am-tu-80cm`,
-    'the slug must still win over the sku',
-  );
-});
-
-test('a baked interior without a sku keeps its own route', () => {
-  // No sku at all: the id branch is what answers, and it must not be captured by
-  // the avatarimg fallback.
-  assert.equal(shareURL({ id: 'a1b2c3d4e5' }), `${STUDIO}/share/i/a1b2c3d4e5`);
-});
-
-test('a record with nothing to share returns null', () => {
-  assert.equal(shareURL(null), null);
-  assert.equal(shareURL(undefined), null);
-  assert.equal(shareURL({}), null);
-  assert.equal(shareURL('nope'), null);
-});
-
-console.log('\nfeatured tiles');
-// ──────────────────────────────────────────────────────────────────────────
-
-test('vai-avatar interiors land at the head of the field', () => {
-  // "near the search box" is implemented as list order: index 0 is the slot
-  // nearest the pill. A new photograph must not land mid-field.
-  const out = mergeResults(
-    [interior('a', 0.9), interior('b', 0.8)],
-    [],
-    { avatarInteriors: [{ avatarImageId: 'new1', title: 'Mới', addedAt: '2026-10-05T00:00:00Z' }] },
-  );
-  assert.equal(out[0].avatarImageId, 'new1');
-  assert.ok(out[0].featured, 'a new photograph is featured');
-});
-
-test('newest first: the most recent photograph is the first tile', () => {
-  const out = mergeResults([], [], { avatarInteriors: [
-    { avatarImageId: 'older', title: 'Cũ', addedAt: '2026-10-01T00:00:00Z' },
-    { avatarImageId: 'newer', title: 'Mới', addedAt: '2026-10-05T00:00:00Z' },
-  ] });
-  assert.equal(out[0].avatarImageId, 'newer');
-});
-
-test('a featured tile is measurably larger than an ordinary one', () => {
-  const out = mergeResults([], [], { avatarInteriors: [
-    { avatarImageId: 'n', title: 'Mới', addedAt: '2026-10-05T00:00:00Z' },
-  ] });
-  assert.ok(out[0].featuredScale > 1, 'featuredScale must exceed 1');
-});
-
-test('a featured interior keeps a finite score so it is not dimmed', () => {
-  // relevanceAppearance() dims any tile whose score is not finite -- a featured
-  // tile rendered at 14% opacity would be the opposite of the request.
-  const out = mergeResults([], [], { avatarInteriors: [{ avatarImageId: 'n', title: 'Mới' }] });
-  assert.ok(Number.isFinite(out[0].score), 'score must be finite, got ' + out[0].score);
-});
-
-test('a decisive product winner is featured and reaches the head', () => {
-  // 1000 = exact SKU in vai-avatar's scorer, next tier is 550, so this is
-  // identity, and it should be presented like the answer rather than like a hit.
-  // The shape is the worker's own `{ sku, score, product }` wrapper.
-  const out = mergeResults(
-    [interior('a', 0.9)],
-    [{ sku: 'SKU1', score: 1000, product: { sku: 'SKU1', name: 'Tủ bếp', ar: 1, images: ['https://cdn/x.jpg'] } }],
-    { query: 'SKU1' },
-  );
-  const hit = out.find(r => r.sku === 'SKU1');
-  assert.ok(hit?.featured, 'the exact product is featured');
-  assert.ok(hit.featuredScale > 1);
-});
-
-test('a non-decisive product is NOT featured', () => {
-  // Two products scoring 1000 and 900 is a model family, not an answer. Enlarging
-  // it would be misleading, and the neon must not ring it either.
-  const out = mergeResults([interior('a', 0.9)], [
-    { sku: 'SKU1', score: 1000, product: { sku: 'SKU1', name: 'A', ar: 1, images: ['https://cdn/x.jpg'] } },
-    { sku: 'SKU2', score: 900, product: { sku: 'SKU2', name: 'B', ar: 1, images: ['https://cdn/x.jpg'] } },
-  ], { query: 'SKU1' });
-  assert.ok(!out.find(r => r.sku === 'SKU1')?.featured, 'a tie must not be featured');
-});
-
-test('enlargement and the neon agree: every featured interior is an exact hit', () => {
-  // The two decisions come from one source (exactMatches). This asserts the
-  // consequence -- a tile is never enlarged without being ringed.
-  const out = mergeResults([interior('a', 0.9)], [], {
-    avatarInteriors: [{ avatarImageId: 'n', title: 'phong cách classical', score: 900 }],
-    query: 'classical',
-  });
-  const tile = out[0];
-  assert.ok(tile.featured && tile.featuredScale > 1);
-});
-
-console.log('\nnamespace safety');
-// ──────────────────────────────────────────────────────────────────────────
-
-test('an avatar interior cannot be shadowed by a colliding raw id', () => {
-  // A bare id in a shared namespace would let one record silently drop another
-  // with no error. Namespacing is what makes that impossible.
-  const out = mergeResults([interior('n', 0.5)], [], {
-    avatarInteriors: [{ avatarImageId: 'n', title: 'Mới' }],
-  });
-  assert.equal(out.length, 2, 'both records survive: ' + JSON.stringify(out.map(r => r.id)));
-});
-
-test('a duplicate avatar interior is listed once', () => {
-  const out = mergeResults([], [], { avatarInteriors: [
-    { avatarImageId: 'n', title: 'Mới' }, { avatarImageId: 'n', title: 'Mới' },
-  ] });
-  assert.equal(out.filter(r => r.avatarImageId === 'n').length, 1);
-});
-
-test('an interior without an avatar id is skipped, not rendered blank', () => {
-  const out = mergeResults([interior('a', 0.9)], [], { avatarInteriors: [{ title: 'không có id' }] });
-  assert.equal(out.length, 1);
-});
-
-test('an empty avatar list changes nothing', () => {
-  const base = mergeResults([interior('a', 0.9), interior('b', 0.8)], [product('S1', 500)]);
-  assert.equal(mergeResults([interior('a', 0.9), interior('b', 0.8)], [product('S1', 500)], { avatarInteriors: [] }).length, base.length);
-});
-
-console.log('\nonly the newest ring');
-// ──────────────────────────────────────────────────────────────────────────
-
-/** Build `n` avatar interiors, newest last, and merge them into the field. */
-const freshSet = n => Array.from({ length: n }, (_, i) => ({
-  avatarImageId: `id${i}`,
-  title: `Ảnh ${i}`,
-  addedAt: `2026-10-${String((i % 28) + 1).padStart(2, '0')}T00:00:00Z`,
-}));
-
-test('exactly ten of many new photographs carry the neon', () => {
-  // The brief asks for more photographs on the page AND for only the newest to
-  // ring. Those pull against each other, so the count is pinned: 24 rings is
-  // decoration, not emphasis.
-  const out = mergeResults([], [], { avatarInteriors: freshSet(40) });
-  const ringed = out.filter(r => r.featured);
-  assert.equal(ringed.length, 10, 'expected 10 ringed, got ' + ringed.length);
-});
-
-test('the un-ringed ones are still shown as ordinary tiles', () => {
-  // "Chỉ chọn 10 ảnh mới nhất có viền neon còn lại hiển thị bình thường" -- the
-  // rest must be VISIBLE, just not ringed. Dropping them would satisfy the first
-  // half of the sentence and break the second.
-  const out = mergeResults([], [], { avatarInteriors: freshSet(40) });
-  assert.equal(out.length, 40, 'all 40 should be in the field, got ' + out.length);
-  assert.equal(out.filter(r => !r.featured).length, 30);
-});
-
-test('an un-ringed tile has no featuredScale, so it renders at normal size', () => {
-  const out = mergeResults([], [], { avatarInteriors: freshSet(40) });
-  const plain = out.filter(r => !r.featured);
-  assert.ok(plain.every(r => r.featuredScale === undefined), 'an ordinary tile carries a scale');
-});
-
-test('the ten ringed are the newest ten, in order', () => {
-  // mergedAt is per-record, so equal dates sort by input order; distinct dates
-  // make the intent unambiguous.
-  const items = Array.from({ length: 15 }, (_, i) => ({
-    avatarImageId: `x${i}`,
-    title: `Ảnh ${i}`,
-    addedAt: `2026-10-${String(i + 1).padStart(2, '0')}T00:00:00Z`,
-  }));
-  const ringed = mergeResults([], [], { avatarInteriors: items }).filter(r => r.featured);
-  assert.equal(ringed.length, 10);
-  // x14 is day 15, the newest. The ringed set must be days 15 down to 6.
-  assert.equal(ringed[0].avatarImageId, 'x14', 'newest is not first');
-  assert.equal(ringed[9].avatarImageId, 'x5');
-  const plain = mergeResults([], [], { avatarInteriors: items }).filter(r => !r.featured);
-  assert.equal(plain[0].avatarImageId, 'x4', 'the oldest ringed-off one is day 5');
-});
-
-test('fewer than ten new photographs still all ring', () => {
-  const out = mergeResults([], [], { avatarInteriors: freshSet(4) });
-  assert.equal(out.filter(r => r.featured).length, 4);
-});
-
-console.log(`\n${passed} passed, ${failed} failed`);
-process.exit(failed ? 1 : 0);

scripts/test-catalogue.mjs

@@ -1,187 +0,0 @@
-/**
- * Unit tests for the FULL catalogue loader and its de-duplication.
- *
- * Run: node scripts/test-catalogue.mjs
- *
- * The shop catalogue is 11,704 rows that must collapse to one row per product.
- * Getting that wrong is invisible in review and obvious in use: a duplicated
- * appliance takes two tiles in the field and two rows in every result list.
- *
- * These pin the three properties the UI depends on:
- *
- *   1. the stub rows carry no sku, no price and the same image as the real row
- *      next to them, so they must lose;
- *   2. two skus that differ only by a trailing letter are ONE product;
- *   3. the overlay (Sửa / Xóa from vai-avatar) must still resolve onto a base
- *      row, because that is what makes an edit visible instead of duplicating.
- */
-
-import assert from 'node:assert/strict';
-import { buildBaseCatalogue, buildCatalogue } from '../src/catalogue.js';
-
-let passed = 0;
-const test = (name, fn) => {
-  fn();
-  passed++;
-  console.log(`  ok  ${name}`);
-};
-
-console.log('buildBaseCatalogue');
-
-test('collapses the slug-derived stub onto the real row', () => {
-  const base = buildBaseCatalogue([
-    { sku: '892.14.719', mod: '89214719', n: 'Kệ Giày Hafele 82914719', slug: 'ke-gia-hafele', pn: 119000, imgs: ['https://x/1.jpg'] },
-    // Same slug and same image, but no sku and no price -- a stub.
-    { sku: '', mod: '', n: 'Ke Gia Hafele 82914719 1 1 17876', slug: 'ke-gia-hafele', pn: 0, imgs: ['https://x/1.jpg'] },
-  ]);
-  assert.equal(base.length, 1);
-  assert.equal(base[0].sku, '892.14.719');
-});
-
-test('keeps a Malloca `T` variant that shares a name with its base', () => {
-  // INDUST K140B ships as 600001297 (5 photos) and 600001297T (9 photos).
-  // Same mod, same name, different slugs -- different products. Collapsing on
-  // (mod, name) removed 355 such rows and the whole Malloca range went missing.
-  const base = buildBaseCatalogue([
-    { sku: '600001297', mod: 'K140B', n: 'INDUST K140B | Malloca | Máy hút mùi gắn trần 140cm', imgs: ['https://cdn/a.png'], slug: 'indust-k140b' },
-    { sku: '600001297T', mod: 'K140B', n: 'INDUST K140B | Malloca | Máy hút mùi gắn trần 140cm', imgs: ['https://cdn/b.png'], slug: 'indust-k140b-2' },
-  ]);
-  assert.equal(base.length, 2);
-});
-
-test('keeps a range that shares ONE photo across differently-named products', () => {
-  // Eurogold sells EWG101/102/103 from a single range image. Keying on the
-  // photo alone collapsed 3,921 such ranges.
-  const photo = 'https://cdn/range-ng-nhom-kinh-eurogold-ewg101-ewg102-ewg103.jpg';
-  const base = buildBaseCatalogue([
-    { sku: 'EWG101', n: 'EWG101 | Eurogold | Bản lề kính giảm chấn thẳng', imgs: [photo], slug: 'ewg101' },
-    { sku: 'EWG102', n: 'EWG102 | Eurogold | Bản lề kính giảm chấn cong 1/2', imgs: [photo], slug: 'ewg102' },
-    { sku: 'EWG103', n: 'EWG103 | Eurogold | Bản lề kính giảm chấn cong 3/4', imgs: [photo], slug: 'ewg103' },
-  ]);
-  assert.equal(base.length, 3);
-});
-
-test('ignores the CDN cache-busting query when matching photos', () => {
-  // The same photo re-uploaded under a new ?v=<timestamp> is one product.
-  const base = buildBaseCatalogue([
-    { sku: '1', n: 'Bếp Từ Alpha', imgs: ['https://cdn/a.png?v=1767087917033'], slug: 'bep-alpha' },
-    { sku: '2', n: 'Bếp Từ Alpha', imgs: ['https://cdn/a.png?v=1776733402070'], slug: 'bep-alpha-2' },
-  ]);
-  assert.equal(base.length, 1);
-});
-
-test('keeps two products that share a brand but differ in name', () => {
-  const base = buildBaseCatalogue([
-    { sku: '1', mod: 'M1', n: 'Bếp Từ 3 Vùng', imgs: ['https://cdn/1.png'], slug: 'bep-3-vung' },
-    { sku: '2', mod: 'M1', n: 'Bếp Từ 4 Vùng', imgs: ['https://cdn/2.png'], slug: 'bep-4-vung' },
-  ]);
-  assert.equal(base.length, 2);
-});
-
-test('keeps rows that share nothing', () => {
-  const base = buildBaseCatalogue([
-    { sku: '1', mod: 'A', n: 'Alpha', imgs: ['https://cdn/1.png'], slug: 'alpha' },
-    { sku: '2', mod: 'B', n: 'Beta', imgs: ['https://cdn/2.png'], slug: 'beta' },
-  ]);
-  assert.equal(base.length, 2);
-});
-
-test('ignores rows with no usable identity', () => {
-  // Neither a slug nor a photo means nothing to key on. Every real row has
-  // both (measured: 11,704 of 11,704), so this is a guard on junk input only.
-  assert.deepEqual(buildBaseCatalogue([{}, null, 'x', { n: '', imgs: [] }]), []);
-});
-
-test('keeps a row that has only a slug, with no image', () => {
-  const base = buildBaseCatalogue([
-    { sku: '1', n: 'Không có ảnh A', slug: 'khong-co-anh-a' },
-    { sku: '2', n: 'Không có ảnh B', slug: 'khong-co-anh-b' },
-  ]);
-  assert.equal(base.length, 2);
-});
-
-test('tolerates a non-array input', () => {
-  assert.deepEqual(buildBaseCatalogue(null), []);
-  assert.deepEqual(buildBaseCatalogue(undefined), []);
-});
-
-test('the row carrying a sku wins whichever order the file lists them in', () => {
-  // Both rows carry a slug, as every row in the real file does (measured:
-  // 11,704 of 11,704). A stub that arrived FIRST must still lose to the real
-  // row, or the same product renders differently between two reloads.
-  const real = { sku: '1', mod: 'M', n: 'Kệ Giày Hafele', slug: 'ke-gia-hafele', pn: 5 };
-  const stub = { sku: '', mod: '', n: 'Ke Gia Hafele', slug: 'ke-gia-hafele', pn: 0 };
-  for (const rows of [[real, stub], [stub, real]]) {
-    const out = buildBaseCatalogue(rows);
-    assert.equal(out.length, 1);
-    assert.equal(out[0].sku, '1', 'the real row must win in either order');
-  }
-});
-
-console.log('\nbuildCatalogue with a base');
-
-const base = buildBaseCatalogue([
-  { sku: 'A1', mod: 'MA1', n: 'Bếp Từ Alpha', pn: 1000000, p: '1.000.000đ', imgs: ['https://x/alpha.jpg'], brand: 'Malloca' },
-  { sku: 'B1', mod: 'MB1', n: 'Tủ Lạnh Beta', pn: 2000000, p: '2.000.000đ', imgs: ['https://x/beta.jpg'], brand: 'Bosch' },
-]);
-
-test('lists the whole base on its own', () => {
-  const items = buildCatalogue([], {}, base);
-  assert.equal(items.size, 2);
-});
-
-test('an edit by sku overwrites the base row rather than adding one', () => {
-  const promos = { productEdits: { A1: { name: 'Tên Mới', priceNum: 9999000 } } };
-  const items = buildCatalogue([], promos, base);
-  assert.equal(items.size, 2, 'the edit must not create a third product');
-  const edited = [...items.values()].find(p => p.sku === 'A1');
-  assert.equal(edited.name, 'Tên Mới');
-  // priceNum must beat the base display string, or the edit is invisible.
-  assert.equal(edited.priceNum, 9999000);
-});
-
-test('an edit by model code also resolves', () => {
-  const promos = { productEdits: { MA1: { priceNum: 7777000 } } };
-  const items = buildCatalogue([], promos, base);
-  assert.equal(items.size, 2);
-  assert.equal([...items.values()].find(p => p.sku === 'A1').priceNum, 7777000);
-});
-
-test('a tombstone removes the base product', () => {
-  const promos = { productEdits: { A1: { deleted: true } } };
-  const items = buildCatalogue([], promos, base);
-  assert.equal(items.size, 1);
-  assert.equal([...items.values()].some(p => p.sku === 'A1'), false);
-});
-
-test('a pasted URL for a base product amends it instead of duplicating', () => {
-  const added = [{ sku: 'A1', n: 'Bếp Từ Alpha Đổi Ảnh', imgs: ['https://x/new.jpg'] }];
-  const items = buildCatalogue(added, {}, base);
-  assert.equal(items.size, 2, 're-pasting a known sku must not add a row');
-  assert.equal([...items.values()].find(p => p.sku === 'A1').images[0], 'https://x/new.jpg');
-});
-
-test('a genuinely new product is added', () => {
-  const added = [{ sku: 'NEW1', n: 'Sản Phẩm Mới', imgs: ['https://x/new.jpg'], pn: 500000 }];
-  const items = buildCatalogue(added, {}, base);
-  assert.equal(items.size, 3);
-  assert.equal(items.has('NEW1'), true);
-});
-
-test('add, edit and delete compose without disturbing each other', () => {
-  const added = [{ sku: 'NEW1', n: 'SP Mới', imgs: ['https://x/new.jpg'], pn: 500000 }];
-  const promos = { productEdits: { A1: { deleted: true }, B1: { priceNum: 1234000 } } };
-  const items = buildCatalogue(added, promos, base);
-  assert.equal(items.size, 2);
-  assert.equal(items.has('A1'), false, 'deleted');
-  assert.equal(items.has('NEW1'), true, 'added');
-  assert.equal([...items.values()].find(p => p.sku === 'B1').priceNum, 1234000, 'edited');
-});
-
-test('a base row keeps its images after an edit touches only the price', () => {
-  const promos = { productEdits: { A1: { priceNum: 1111000 } } };
-  const items = buildCatalogue([], promos, base);
-  assert.deepEqual([...items.values()].find(p => p.sku === 'A1').images, ['https://x/alpha.jpg']);
-});
-
-console.log(`\n${passed} passed`);

scripts/test-merge.mjs

@@ -1,210 +0,0 @@
-/**
- * Unit tests for the product/interior merge.
- *
- * Run: node scripts/test-merge.mjs
- *
- * The merge is the one piece of this feature with no visual fallback: if it
- * drops products, duplicates a tile or reorders interiors wrongly, the field
- * simply looks wrong and nothing reports an error. These assert the properties
- * the field depends on.
- */
-
-import assert from 'node:assert/strict';
-import { mergeResults } from '../src/merge.js';
-
-let passed = 0;
-const test = (name, fn) => {
-  fn();
-  passed++;
-  console.log(`  ok  ${name}`);
-};
-
-const interiors = count => Array.from({ length: count }, (_, i) => ({ id: `p${i}`, ar: 1.5 }));
-
-const product = (sku, extra = {}) => ({
-  sku, name: `SP ${sku}`, ar: 1, images: [`https://cdn.example/${sku}.jpg`], ...extra,
-});
-
-console.log('mergeResults');
-
-test('returns interiors unchanged when there are no products', () => {
-  const out = mergeResults(interiors(10), []);
-  assert.equal(out.length, 10);
-  assert.deepEqual(out.map(i => i.id), interiors(10).map(i => i.id));
-});
-
-test('tolerates a missing or null product list', () => {
-  assert.equal(mergeResults(interiors(5), null).length, 5);
-  assert.equal(mergeResults(interiors(5), undefined).length, 5);
-  assert.equal(mergeResults(null, [product('A')]).length, 1);
-});
-
-test('weaves products in rather than appending them', () => {
-  const out = mergeResults(interiors(20), [product('A'), product('B')]);
-  assert.equal(out.length, 22);
-  const a = out.findIndex(r => r.sku === 'A');
-  const b = out.findIndex(r => r.sku === 'B');
-  assert.ok(a < 20 && b < 20, 'products must not be pushed past every interior');
-  assert.ok(b > a, 'product order must follow catalogue rank');
-});
-
-test('gives each product a resolvable absolute src', () => {
-  const [hit] = mergeResults(interiors(4), [product('A')]).filter(r => r.sku);
-  assert.equal(hit.src, 'https://cdn.example/A.jpg');
-  // The tile component resolves `url` when `src` is absent; a product has no
-  // dataset `url`, so `src` is what makes it renderable.
-  assert.ok(!hit.url, 'product must not borrow an interior url field');
-});
-
-test('accepts the worker shape ({sku, score, product}) and the flat shape', () => {
-  const wrapped = mergeResults(interiors(4), [{ sku: 'A', score: 900, product: product('A') }]);
-  const flat = mergeResults(interiors(4), [product('A')]);
-  assert.equal(wrapped.filter(r => r.sku).length, 1);
-  assert.equal(flat.filter(r => r.sku).length, 1);
-  assert.equal(wrapped.find(r => r.sku).src, flat.find(r => r.sku).src);
-});
-
-test('skips products with no usable image instead of rendering a blank tile', () => {
-  const out = mergeResults(interiors(6), [
-    { sku: 'NOIMG', images: [] },
-    { sku: 'REL', images: ['/relative/path.jpg'] },
-    { sku: 'OK', images: ['https://cdn.example/ok.jpg'] },
-  ]);
-  const skus = out.filter(r => r.sku).map(r => r.sku);
-  assert.deepEqual(skus, ['OK']);
-});
-
-test('never duplicates an interior or a product', () => {
-  const dup = [...interiors(5), ...interiors(5)];
-  const out = mergeResults(dup, [product('A'), product('A'), product('B')]);
-  assert.equal(new Set(out.filter(r => !r.sku).map(r => r.id)).size, 5);
-  assert.equal(new Set(out.filter(r => r.sku).map(r => r.sku)).size, 2);
-});
-
-test('caps how many products enter the field', () => {
-  const many = Array.from({ length: 60 }, (_, i) => product(`S${i}`));
-  const out = mergeResults(interiors(60), many);
-  assert.equal(out.filter(r => r.sku).length, 24);
-  // The strongest catalogue hits are the ones kept.
-  assert.deepEqual(out.filter(r => r.sku).slice(0, 3).map(r => r.sku), ['S0', 'S1', 'S2']);
-});
-
-test('honours an explicit productLimit', () => {
-  const many = Array.from({ length: 40 }, (_, i) => product(`S${i}`));
-  assert.equal(mergeResults(interiors(40), many, { productLimit: 3 }).filter(r => r.sku).length, 3);
-});
-
-test('keeps interior rank order intact', () => {
-  const out = mergeResults(interiors(30), [product('A'), product('B'), product('C')]);
-  assert.deepEqual(out.filter(r => !r.sku).map(r => r.id), interiors(30).map(r => r.id));
-});
-
-test('survives a short interior list', () => {
-  const out = mergeResults(interiors(1), [product('A'), product('B')]);
-  assert.equal(out.length, 3);
-  assert.equal(out.filter(r => r.sku).length, 2);
-});
-
-test('a product id can never collide with a real interior id', () => {
-  // Interior ids are 10 hex chars; 'malloca:' cannot be one, so the namespaces
-  // are disjoint and a product is never dropped as a duplicate.
-  const real = [{ id: '0004d4b651', ar: 1 }, { id: '0006a82e14', ar: 1 }];
-  const out = mergeResults(real, [product('A')]);
-  assert.equal(out.length, 3);
-  assert.equal(out.filter(r => r.sku).length, 1);
-});
-
-test('an interior id that collides with a product namespace loses nothing', () => {
-  // Both sides are tagged before de-duplication, so even a hostile id cannot
-  // occupy the product's slot and drop it from the field.
-  const out = mergeResults([{ id: 'malloca:A', ar: 1 }], [product('A')]);
-  assert.equal(out.length, 2);
-  assert.equal(out.filter(r => !r.sku).length, 1);
-  assert.equal(out.filter(r => r.sku).length, 1);
-});
-
-test('a product always carries a usable id and aspect ratio', () => {
-  const hit = mergeResults(interiors(4), [product('A')]).find(r => r.sku);
-  // Every tile is keyed on id and sized from ar; a missing or NaN value makes
-  // the tile unkeyed or zero-sized.
-  assert.equal(typeof hit.id, 'string');
-  assert.ok(hit.id.length > 0);
-  assert.ok(Number.isFinite(hit.ar) && hit.ar >= 0.5 && hit.ar <= 2);
-});
-
-test('a product id is stable across queries, so it does not jump in the field', () => {
-  const a = mergeResults(interiors(10), [product('A')]).find(r => r.sku);
-  const b = mergeResults(interiors(30), [product('A')]).find(r => r.sku);
-  // Layout seeds position/scale/phase off the id, so an id that changed with
-  // the result count would teleport the tile on every search.
-  assert.equal(a.id, b.id);
-});
-
-test('a product inherits relevance so it is not dimmed as unranked', () => {
-  const ranked = interiors(20).map((r, i) => ({ ...r, score: 0.5 - i * 0.001 }));
-  const hit = mergeResults(ranked, [product('A')]).find(r => r.sku);
-  // relevanceAppearance() blurs any tile without a finite score, which would
-  // make a merged product almost invisible.
-  assert.ok(Number.isFinite(hit.score), 'product must have a finite score');
-  assert.ok(hit.score > 0, 'score must sit in the visible cosine range');
-});
-
-test('a product still scores when NO interior matched', () => {
-  const hit = mergeResults([], [product('A'), product('B')]).find(r => r.sku);
-  assert.ok(Number.isFinite(hit.score), 'a products-only query must not leave products unscored');
-});
-
-test('interior scores are never modified', () => {
-  const ranked = interiors(10).map((r, i) => ({ ...r, score: 0.9 - i * 0.01 }));
-  const before = ranked.map(r => r.score);
-  mergeResults(ranked, [product('A'), product('B')]);
-  assert.deepEqual(ranked.map(r => r.score), before);
-});
-
-test('a product query crowds interiors out of the field', () => {
-  // "kệ xoong" is a product ask, so once a product clears the keyword floor the
-  // CLIP interiors must not be sprinkled through the results -- only the racks.
-  // The product's name must actually carry the query's words (or their rack
-  // synonyms), which is what separates a product answer from a substring hit.
-  const ranked = interiors(30).map((r, i) => ({ ...r, score: 0.5 - i * 0.001 }));
-  const hits = [
-    { sku: 'KV1', name: 'Kệ xoong nồi inox', ar: 1, images: ['https://cdn.example/kv1.jpg'], score: 367 },
-    { sku: 'KV2', name: 'Giá xoong nồi inox', ar: 1, images: ['https://cdn.example/kv2.jpg'], score: 367 },
-  ];
-  const out = mergeResults(ranked, hits, { query: 'kệ xoong' });
-  assert.equal(out.filter(r => r.sku).length, 2);
-  assert.equal(out.filter(r => !r.sku).length, 0, 'interiors must be dropped for a product query');
-});
-
-test('browse mode keeps interiors even when products arrive', () => {
-  // No query means browse: the newest interiors front row must stay; the
-  // index-time products are decoration, not the answer.
-  const ranked = interiors(6).map((r, i) => ({ ...r, score: 0.5 - i * 0.001 }));
-  const out = mergeResults(ranked, [product('A', { score: 367 })]);
-  assert.equal(out.filter(r => !r.sku).length, 6, 'browse keeps all interiors');
-});
-
-test('every product hit above the keyword floor is featured (neon ring + scale)', () => {
-  // The brief wants "toàn bộ ảnh là kệ xoong nội... có viền neon và kích thước
-  // thư giãn hơn": all relevant racks, not just the top 3, get the ring+scale.
-  const hits = [
-    product('A', { score: 367 }), product('B', { score: 367 }),
-    product('C', { score: 367 }), product('D', { score: 367 }),
-  ];
-  const out = mergeResults(interiors(2), hits, { query: 'kệ xoong' });
-  const featured = out.filter(r => r.sku && r.featured);
-  assert.equal(featured.length, 4, 'all keyword hits above the floor are featured');
-});
-
-test('a product whose only lead points into a dead V.AISTUDIO dir is skipped', () => {
-  const dead = {
-    sku: 'EPD4635VX', name: 'Giá', ar: 1,
-    images: ['https://huggingface.co/spaces/bep40/V.AISTUDIO/resolve/main/eurogold_img/EPD4635VX.jpg'],
-  };
-  const live = product('EPO8360VX');
-  const out = mergeResults(interiors(3), [dead, live]);
-  const skus = out.filter(r => r.sku).map(r => r.sku);
-  assert.deepEqual(skus, ['EPO8360VX']);
-});
-
-console.log(`\n${passed} passed`);

scripts/test-misbrand.mjs

@@ -1,109 +0,0 @@
-/**
- * The Malloca/Hafele misbranding repair.
- *
- * These cover the two ways it can go wrong, both of which happened while this
- * was being built:
- *
- *   1. Matching on loose tokens attaches the WRONG photograph. T90CM is a size
- *      shared by 40 hoods; swapping on it puts one kitchen's image on another's
- *      appliance. The uniqueness rule has to reject it.
- *   2. Being too strict loses every real match. A base and a `T` variant are one
- *      product photographed twice, and they must still resolve.
- */
-import assert from 'node:assert/strict';
-import { buildBaseCatalogue, isMallocaMisbrand, repairMallocaMisbrands } from '../src/catalogue.js';
-
-let passed = 0;
-function test(name, fn) {
-  try { fn(); console.log('  ok  ' + name); passed++; }
-  catch (e) { console.error('  FAIL ' + name + '\n       ' + e.message); process.exitCode = 1; }
-}
-
-const MALLOCA_IMG = 'https://bizweb.dktcdn.net/100/567/847/products/mir593.png';
-const OTHER_HOOD = 'https://bizweb.dktcdn.net/100/567/847/products/eclipse-k600.png';
-const HAFELE_IMG = 'https://cdn-img-v2.mybota.vn/uploadv2/web/x/mir593.jpg';
-
-/** A row as the scraper emits it. */
-const row = o => ({ n: '', brand: 'Malloca', sku: '', mod: '', imgs: [], ...o });
-
-test('detects a row whose name says Malloca and brand does not', () => {
-  assert.equal(isMallocaMisbrand(row({ n: 'Malloca | Bếp Điện Từ MIR 593', brand: 'Hafele' })), true);
-});
-
-test('leaves a correctly branded Malloca row alone', () => {
-  assert.equal(isMallocaMisbrand(row({ n: 'Malloca | Bếp Điện Từ MIR 593', brand: 'Malloca' })), false);
-});
-
-test('is not fooled by Array#filter passing the index', () => {
-  assert.equal(isMallocaMisbrand(0), false);
-  assert.equal(isMallocaMisbrand(null), false);
-});
-
-test('a model code spelled with a space matches the one spelled together', () => {
-  const out = repairMallocaMisbrands([
-    row({ n: 'MIR593 | Malloca | Bếp từ kết hợp', sku: '1', imgs: [MALLOCA_IMG] }),
-    row({ n: 'Malloca | Bếp Điện Từ Malloca MIR 593', brand: 'Hafele', sku: '2', imgs: [HAFELE_IMG] }),
-  ]);
-  assert.equal(out.length, 2);
-  assert.deepEqual(out[1].imgs, [MALLOCA_IMG], 'should take the real Malloca photo');
-  assert.equal(out[1].brand, 'Malloca');
-});
-
-test('hyphenated model codes match their unhyphenated twin', () => {
-  const out = repairMallocaMisbrands([
-    row({ n: 'MWC46BG | Malloca | Tủ rượu', sku: '1', imgs: [MALLOCA_IMG] }),
-    row({ n: 'Malloca | Tủ Bảo Quản Rượu Vang Malloca MWC-46BG', brand: 'Hafele', sku: '2', imgs: [HAFELE_IMG] }),
-  ]);
-  assert.deepEqual(out[1].imgs, [MALLOCA_IMG]);
-});
-
-test('a size descriptor shared by many products does NOT trigger a swap', () => {
-  // T90CM appears in three genuinely different hoods. A misbranded row whose
-  // only candidate is that token must keep its own image.
-  const many = ['A', 'B', 'C'].map((id, i) =>
-    row({ n: `Vertical MH90${i} | Malloca | Máy hút mùi áp tường chữ t 90cm`, sku: id, imgs: [`https://x/${id}.png`] }));
-  const out = repairMallocaMisbrands([
-    ...many,
-    row({ n: 'Malloca | Máy hút mùi Malloca MH9000 90cm', brand: 'Hafele', sku: 'bad', imgs: [HAFELE_IMG] }),
-  ]);
-  assert.deepEqual(out[out.length - 1].imgs, [HAFELE_IMG], 'ambiguous token must not swap');
-  assert.equal(out[out.length - 1].brand, 'Malloca', 'but the brand is still corrected');
-});
-
-test('a base and a T variant of one model still resolve to one product', () => {
-  const out = repairMallocaMisbrands([
-    row({ n: 'K279N | Malloca | Vòi rửa chén nóng lạnh', sku: 'a', imgs: [MALLOCA_IMG] }),
-    row({ n: 'K279N | Malloca | Vòi rửa chén nóng lạnh', sku: 'b', imgs: [MALLOCA_IMG] }),
-    row({ n: 'Malloca | Vòi Rửa Chén Malloca K279N', brand: 'Hafele', sku: 'c', imgs: [HAFELE_IMG] }),
-  ]);
-  assert.deepEqual(out[2].imgs, [MALLOCA_IMG], 'two rows of one product are not a conflict');
-});
-
-test('a product with no Malloca twin keeps its image and gains the right brand', () => {
-  const out = repairMallocaMisbrands([
-    row({ n: 'Malloca | Vòi Rửa Chén Malloca ZZZZ99', brand: 'Hafele', sku: 'x', imgs: [HAFELE_IMG] }),
-  ]);
-  assert.deepEqual(out[0].imgs, [HAFELE_IMG]);
-  assert.equal(out[0].brand, 'Malloca');
-  assert.equal(out[0].sku, 'x', 'identity is untouched, so vai-avatar edits still apply');
-});
-
-test('a non-Malloca product is never touched', () => {
-  const eurogold = row({ n: 'EWG101 | Eurogold | Bản lề', brand: 'Eurogold', sku: 'e', imgs: [OTHER_HOOD] });
-  const out = repairMallocaMisbrands([eurogold]);
-  assert.equal(out[0].brand, 'Eurogold');
-  assert.deepEqual(out[0].imgs, [OTHER_HOOD]);
-});
-
-test('the repair runs inside buildBaseCatalogue', () => {
-  const kept = buildBaseCatalogue([
-    row({ n: 'MIR593 | Malloca | Bếp từ kết hợp', sku: '1', slug: 'mir593-malloca', imgs: [MALLOCA_IMG] }),
-    row({ n: 'Malloca | Bếp Điện Từ Malloca MIR 593', brand: 'Hafele', sku: '2', slug: 'bep-mir593', imgs: [HAFELE_IMG] }),
-  ]);
-  assert.equal(kept.length, 2);
-  const repaired = kept.find(r => r.sku === '2');
-  assert.deepEqual(repaired.imgs, [MALLOCA_IMG]);
-  assert.equal(repaired.brand, 'Malloca');
-});
-
-console.log(`\n${passed} passed`);

scripts/test-neon-ui.mjs

@@ -1,256 +0,0 @@
-/**
- * Browser check for the featured + running-neon emphasis.
- *
- * Complements test-avatar-interiors.mjs: that file proves the data is correct,
- * this one proves the browser actually PAINTS it. The failure mode that matters
- * most here is silent -- a mask-composite the browser ignores renders an opaque
- * tile instead of a ring, which no assertion on the data would ever catch.
- *
- *   node scripts/test-neon-ui.mjs            # against a local preview
- *   BASE_URL=... node scripts/test-neon-ui.mjs
- */
-import { chromium } from 'playwright';
-
-const BASE = process.env.BASE_URL || 'http://127.0.0.1:4173/';
-let passed = 0, failed = 0;
-const test = async (name, fn) => {
-  try { await fn(); console.log('  ok  ' + name); passed++; }
-  catch (error) { console.log('  FAIL ' + name + '\n       ' + error.message.split('\n')[0]); failed++; }
-};
-const assert = (cond, message) => { if (!cond) throw new Error(message); };
-
-const browser = await chromium.launch();
-const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
-const errors = [];
-page.on('pageerror', error => errors.push(error.message));
-
-await page.goto(BASE, { waitUntil: 'domcontentloaded' });
-// The worker downloads the CLIP text tower before it can answer; give it room.
-await page.waitForSelector('.image-tile', { timeout: 120000 });
-
-console.log('\nfield + controls');
-// ──────────────────────────────────────────────────────────────────────────
-
-await test('the field renders tiles', async () => {
-  const n = await page.locator('.image-tile').count();
-  assert(n > 10, 'expected a populated field, got ' + n);
-});
-
-await test('the size and position controls are gone', async () => {
-  // Explicitly asserted rather than assumed: the brief asked for them removed,
-  // and a leftover panel under the pill would be a visible regression.
-  assert(await page.locator('.field-controls').count() === 0, '.field-controls still present');
-  assert(await page.getByRole('button', { name: /kích thước|vị trí/i }).count() === 0, 'a control button is still rendered');
-});
-
-await test('the search pill is unobstructed', async () => {
-  const box = await page.locator('.search-pill').boundingBox();
-  assert(box && box.height > 20, 'the search pill has no box');
-});
-
-console.log('\nfeatured + neon');
-// ──────────────────────────────────────────────────────────────────────────
-
-await test('a fresh vai-avatar photograph appears as a featured tile', async () => {
-  // Waits for the live index rather than assuming the network was fast.
-  await page.waitForSelector('.image-tile.featured', { timeout: 60000 });
-  const n = await page.locator('.image-tile.featured').count();
-  assert(n > 0, 'no featured tile rendered');
-});
-
-await test('the featured tile is larger than an ordinary tile', async () => {
-  const featured = await page.locator('.image-tile.featured').first().boundingBox();
-  const ordinary = await page.locator('.image-tile:not(.featured)').first().boundingBox();
-  const area = b => b.width * b.height;
-  assert(area(featured) > area(ordinary) * 1.15,
-    `featured ${Math.round(area(featured))}px² vs ordinary ${Math.round(area(ordinary))}px²`);
-});
-
-await test('a fresh photograph loads from vai-avatar, CORS included', async () => {
-  // The tiles fall back to BlurHash silently on a CORS failure, so this is the
-  // only place that failure would show up at all.
-  await page.waitForFunction(() => {
-    const tile = document.querySelector('.image-tile.featured');
-    return tile?.querySelector('img.loaded');
-  }, { timeout: 60000 });
-});
-
-await test('a fresh photograph wears the running neon with no query typed', async () => {
-  // Asserted separately from the exact-match case because the two are different
-  // CSS selectors: a newest photograph rings before anything has been searched,
-  // and dropping that would make the feature invisible on page load.
-  const ring = await page.evaluate(() => {
-    const tile = document.querySelector('.image-tile.featured');
-    const style = getComputedStyle(tile, '::before');
-    return { animation: style.animationName, mask: style.maskImage || style.webkitMaskImage };
-  });
-  assert(ring.animation === 'neon-run', 'a fresh photograph has no running neon: ' + ring.animation);
-  assert(ring.mask && ring.mask !== 'none', 'the ring has no mask, so it would fill the tile');
-});
-
-await test('the ring layer itself never moves', async () => {
-  // The regression this whole file is about. ::before carries the mask as well
-  // as the gradient, so rotating the layer rotates the mask too and the painted
-  // border slides off the tile's edges -- which on a 16:9 photograph reads as a
-  // skewed smear, not a light going round the frame.
-  //
-  // Asserted on a REAL tile, and cross-checked for shape: a square tile would
-  // hide a rotated mask just as well as it hid the original bug, so the test
-  // fails if it cannot find a tile that is demonstrably not square.
-  const ring = await page.evaluate(() => {
-    const nonSquare = [...document.querySelectorAll('.image-tile.exact, .image-tile.featured')]
-      .map(tile => ({ tile, box: tile.getBoundingClientRect() }))
-      .filter(({ box }) => box.width > 40 && box.height > 40
-        && Math.abs(box.width / box.height - 1) > 0.15);
-    if (!nonSquare.length) return { checked: false };
-    const { tile, box } = nonSquare[0];
-    const style = getComputedStyle(tile, '::before');
-    return {
-      checked: true,
-      transform: style.transform,
-      angle: style.getPropertyValue('--neon-angle').trim(),
-      ratio: box.width / box.height,
-    };
-  });
-  assert(ring.checked, 'no non-square ringed tile on screen to test against');
-  assert(/^(none|matrix\(1, 0, 0, 1, 0, 0\)|matrix\(1, 0, 0, 1, 0px, 0px\))$/.test(ring.transform),
-    `the ring layer is transformed (${ring.transform}) on a ${ring.ratio.toFixed(2)}:1 tile, so its mask has rotated off the frame`);
-  assert(ring.angle && /deg|rad|grad|turn/.test(ring.angle),
-    'the sweep angle is not resolving to an angle: "' + ring.angle + '"');
-});
-
-await test('a fresh photograph is fully lit, not dimmed as unranked', async () => {
-  const opacity = await page.evaluate(() => {
-    const tile = document.querySelector('.image-tile.featured');
-    return parseFloat(getComputedStyle(tile).opacity);
-  });
-  assert(opacity > 0.9, 'a fresh photograph is faded to ' + opacity);
-});
-
-console.log('\nquery emphasis');
-// ──────────────────────────────────────────────────────────────────────────
-
-await test('an exact query rings a tile with the running neon', async () => {
-  await page.fill('input[type=text]', 'phòng khách');
-  await page.waitForSelector('.image-tile.exact', { timeout: 60000 });
-
-  const ring = await page.evaluate(() => {
-    const tile = document.querySelector('.image-tile.exact');
-    const style = getComputedStyle(tile, '::before');
-    return {
-      animation: style.animationName,
-      background: style.backgroundImage,
-      mask: style.maskImage || style.webkitMaskImage,
-    };
-  });
-  assert(ring.animation === 'neon-run', 'the ring is not animating: ' + ring.animation);
-  assert(/conic-gradient/.test(ring.background), 'the ring is not a conic gradient');
-  assert(ring.mask && ring.mask !== 'none', 'the ring has no mask, so it would fill the tile');
-});
-
-await test('the neon sweep actually advances between frames', async () => {
-  // A gradient that is present but not advancing is the exact failure the brief
-  // asked to avoid, and it looks correct in a single screenshot.
-  //
-  // Read the sweep angle, NOT `transform`. The transform is now pinned to none
-  // on purpose -- it is the thing that used to drag the mask off the frame -- so
-  // asserting on it would be asserting the old bug is still there.
-  const read = () => page.evaluate(() => {
-    const tile = document.querySelector('.image-tile.exact');
-    if (!tile) return null;
-    const raw = getComputedStyle(tile, '::before').getPropertyValue('--neon-angle').trim();
-    const value = Number.parseFloat(raw);
-    return Number.isFinite(value) ? value : raw;
-  });
-  const a = await read();
-  assert(a !== null, 'no exact tile to read');
-  await page.waitForTimeout(700);
-  const b = await read();
-  assert(a !== b, `the sweep angle did not change (${a} -> ${b})`);
-});
-
-await test('the head stays inside the frame on a non-square tile', async () => {
-  // The mask is the tile's own box, so the bright head has to sit on the edge
-  // for every aspect ratio. Verified by reading the gradient's own angle out of
-  // the computed style: it must be a resolved angle on every ringed tile, not
-  // just on the ones that happen to be square.
-  const angles = await page.evaluate(() => {
-    return [...document.querySelectorAll('.image-tile.exact, .image-tile.featured')].map(tile => {
-      const box = tile.getBoundingClientRect();
-      const raw = getComputedStyle(tile, '::before').getPropertyValue('--neon-angle').trim();
-      return { ratio: box.width / box.height, raw };
-    });
-  });
-  for (const { ratio, raw } of angles) {
-    assert(raw && /deg$/.test(raw),
-      `a ${ratio.toFixed(2)}:1 tile has sweep angle "${raw}", so the head is not on the frame`);
-  }
-});
-
-await test('an exact tile is never dimmed', async () => {
-  const opacity = await page.evaluate(() => {
-    const tile = document.querySelector('.image-tile.exact');
-    return parseFloat(getComputedStyle(tile).opacity);
-  });
-  assert(opacity > 0.9, 'an exact match is faded to ' + opacity);
-});
-
-await test('a query with no exact answer rings nothing', async () => {
-  await page.fill('input[type=text]', 'zzzqqqxyz không tồn tại');
-  await page.waitForTimeout(6000);
-  assert(await page.locator('.image-tile.exact').count() === 0,
-    'an unresolvable query still produced an exact match');
-});
-
-console.log('\nshare links');
-// ──────────────────────────────────────────────────────────────────────────
-
-await test('an interior photograph never points /share/p/ at an avatarimg sku', async () => {
-  // The regression: `avatarimg:` is a namespace for de-duplication, not a
-  // catalogue identity, so /share/p/ resolves to nothing and vai-avatar answers
-  // "Not Found". Every interior photograph was affected.
-  //
-  // Driven off a hand-built anchor rather than the live field: the field's own
-  // hrefs depend on a network read of the vai-avatar interior index, which may
-  // not have landed when this runs. This asserts the routing rule itself.
-  const href = await page.evaluate(() => {
-    const anchor = document.createElement('a');
-    anchor.href = 'https://bep40-vai-avatar.hf.space/share/p/avatarimg%3Ab68dc779370dc70e';
-    document.body.append(anchor);
-    globalThis.__repairInteriorShareLinks?.();
-    const resolved = anchor.href;
-    anchor.remove();
-    return resolved;
-  });
-  assert(href === 'https://bep40-vai-avatar.hf.space/share/i/b68dc779370dc70e',
-    'the mis-routed link was not corrected, it resolved to ' + href);
-});
-
-await test('a real product link is left alone', async () => {
-  // The shim must not touch a link that resolves. Rewriting this would send a
-  // shopper to a 404 dressed up as a fix.
-  const href = await page.evaluate(() => {
-    const anchor = document.createElement('a');
-    anchor.href = 'https://bep40-vai-avatar.hf.space/share/p/MH800TC';
-    document.body.append(anchor);
-    globalThis.__repairInteriorShareLinks?.();
-    const resolved = anchor.href;
-    anchor.remove();
-    return resolved;
-  });
-  assert(href === 'https://bep40-vai-avatar.hf.space/share/p/MH800TC',
-    'a valid product link was rewritten to ' + href);
-});
-
-console.log('\nno regressions');
-// ──────────────────────────────────────────────────────────────────────────
-
-await test('no uncaught page errors', async () => {
-  assert(errors.length === 0, errors.slice(0, 3).join(' | '));
-});
-
-await page.screenshot({ path: '/tmp/neon-field.png', fullPage: false });
-await browser.close();
-console.log(`\n${passed} passed, ${failed} failed`);
-console.log('screenshot: /tmp/neon-field.png');
-process.exit(failed ? 1 : 0);

scripts/test-product-search.mjs

@@ -1,173 +0,0 @@
-/**
- * Verify the vai-avatar scorer ported into product-search.js.
- *
- * The point of these tests is parity with vai-avatar, not a notion of "good
- * ranking". Each case is a query vai-avatar is known to handle a specific way,
- * and the expectation is written down so a change in behaviour here is a
- * visible diff rather than a silent reordering nobody notices until a customer
- * says the wrong product came up.
- *
- * Run: node scripts/test-product-search.mjs
- */
-
-import { scoreProduct, searchLikeAvatar, extractTerms } from '../src/product-search.js';
-import { hasDecisiveWinner, exactMatches } from '../src/relevance.js';
-import { normalizeText } from '../src/catalogue.js';
-
-/* ── catalogue.js's normaliseProduct() output shape ── */
-function product({ name = '', model = '', brand = '', category = '', summary = '', feats = [], specs = [], sku = '', ...rest }) {
-  return { sku: sku || model || name, name, model, brand, category, summary, feats, specs, ...rest };
-}
-
-let passed = 0;
-let failed = 0;
-function check(label, actual, expected) {
-  const ok = JSON.stringify(actual) === JSON.stringify(expected);
-  if (ok) { passed++; console.log(`  ok   ${label}`); }
-  else { failed++; console.log(`  FAIL ${label}\n         expected ${JSON.stringify(expected)}\n         actual   ${JSON.stringify(actual)}`); }
-}
-function ok(label, condition, detail = '') {
-  if (condition) { passed++; console.log(`  ok   ${label}`); }
-  else { failed++; console.log(`  FAIL ${label} ${detail}`); }
-}
-
-console.log('\nextractTerms');
-check('folds diacritics and drops 1-char noise',
-  extractTerms('Bếp từ Mới'), ['bep', 'tu', 'moi']);
-check('keeps domain words a stopword list would drop',
-  extractTerms('tủ lạnh'), ['tu', 'lanh'],
-  );
-ok('"tu" survives: it is both "từ" and "tủ"', extractTerms('tu lanh').includes('tu'));
-check('"đ" folds to d', extractTerms('đá Granite'), ['da', 'granite']);
-
-console.log('\nexact model / sku beats everything');
-const gp170 = product({ name: 'Bếp từ MALLOCA GP170BD 5 vùng', model: 'GP170BD', brand: 'Malloca', category: 'Bếp từ' });
-const other = product({ name: 'Bếp từ MALLOCA GP900 3 vùng', model: 'GP900', brand: 'Malloca', category: 'Bếp từ' });
-{
-  const terms = extractTerms('GP170BD');
-  const exact = scoreProduct(gp170, 'GP170BD', terms);
-  const near = scoreProduct(other, 'GP170BD', terms);
-  ok(`exact SKU (${exact}) outranks a near model (${near})`, exact > near);
-  ok('exact SKU crosses the neon threshold (>=700)', exact >= 700, `got ${exact}`);
-  ok('the near model does NOT', near < 700, `got ${near}`);
-}
-
-console.log('\ntitle containment');
-{
-  const terms = extractTerms('khoá điện tử');
-  const smart = product({ name: 'Khóa cửa điện tử thông minh VAI', category: 'Khóa cửa thông minh', feats: ['Vân tay', 'Mã số'] });
-  const plainLock = product({ name: 'Khóa cửa thường cánh thông', category: 'Khóa cửa' });
-  ok(`smart lock (${scoreProduct(smart, 'khoá điện tử', terms)}) outranks plain (${scoreProduct(plainLock, 'khoá điện tử', terms)})`,
-    scoreProduct(smart, 'khoá điện tử', terms) > scoreProduct(plainLock, 'khoá điện tử', terms));
-}
-
-console.log('\nsize (mm) matching is numeric, not textual');
-{
-  // The catalogue writes sizes inconsistently; "700" must find the 700mm rack
-  // and not be fooled by a 70cm or a price containing 700.
-  const rack700 = product({ name: 'Kệ xoong nồi inox 700mm 2 tầng', category: 'Kệ xoong nồi', specs: [['Chiều rộng', '700 mm']] });
-  const rack900 = product({ name: 'Kệ xoong nồi inox 900mm 3 tầng', category: 'Kệ xoong nồi', specs: [['Chiều rộng', '900 mm']] });
-  const terms = extractTerms('kệ xoong nồi 700mm');
-  const hit = scoreProduct(rack700, 'kệ xoong nồi 700mm', terms);
-  const miss = scoreProduct(rack900, 'kệ xoong nồi 700mm', terms);
-  ok(`700mm rack (${hit}) outranks 900mm rack (${miss})`, hit > miss);
-  const t2 = extractTerms('kệ 700');
-  ok('a bare "700" also finds the 700mm rack',
-    scoreProduct(rack700, 'kệ 700', t2) > scoreProduct(rack900, 'kệ 700', t2));
-  ok('and the 900 rack is actually penalised for not matching', miss < hit);
-}
-
-console.log('\nmaterial matching reads specs, not just the title');
-{
-  const title = product({ name: 'Chậu rửa inox MALLOCA', specs: [['Chất liệu', 'Inox 304']] });
-  const specsOnly = product({ name: 'Chậu rửa bàn MALLOCA', specs: [['Chất liệu', 'Inox 304']] });
-  const terms = extractTerms('chậu rửa inox 304');
-  ok('a title mention scores', scoreProduct(title, 'chậu rửa inox 304', terms) > 0);
-  ok('a specs-only mention also scores', scoreProduct(specsOnly, 'chậu rửa inox 304', terms) > 0);
-}
-
-console.log('\nbrand bonus');
-{
-  const malloca = product({ name: 'Bàn ăn gỗ Malloca', brand: 'Malloca', category: 'Bàn ăn' });
-  const otherBrand = product({ name: 'Bàn ăn gỗ Eurogold', brand: 'Eurogold', category: 'Bàn ăn' });
-  const terms = extractTerms('bàn ăn malloca');
-  ok(`query naming the brand wins it (${scoreProduct(malloca, 'bàn ăn malloca', terms)} > ${scoreProduct(otherBrand, 'bàn ăn malloca', terms)})`,
-    scoreProduct(malloca, 'bàn ăn malloca', terms) > scoreProduct(otherBrand, 'bàn ăn malloca', terms));
-}
-
-console.log('\ncovering the query beats one rare word');
-{
-  const both = product({ name: 'Bếp từ MALLOCA 5 vùng', category: 'Bếp từ' });
-  const partial = product({ name: 'Bàn ghế gỗ sồi', category: 'Bàn ghế' });
-  const terms = extractTerms('bếp từ');
-  ok(`both terms in title (${scoreProduct(both, 'bếp từ', terms)}) beats one (${scoreProduct(partial, 'bếp từ', terms)})`,
-    scoreProduct(both, 'bếp từ', terms) > scoreProduct(partial, 'bếp từ', terms));
-}
-
-console.log('\nunrelated product scores zero');
-{
-  const terms = extractTerms('bếp từ');
-  ok('a bicycle is not a kitchen product',
-    scoreProduct(product({ name: 'Xe đạp thể thao Giant', category: 'Xe đạp' }), 'bếp từ', terms) === 0);
-}
-
-console.log('\nsearchLikeAvatar ranks and limits');
-{
-  const items = new Map([
-    ['GP170BD', gp170],
-    ['GP900', other],
-    ['BD1054', product({ name: 'Máy giặt Hitachi Inverter 10.5kg BD-1054HVOW', brand: 'Hitachi', category: 'Máy giặt' })],
-  ]);
-  const top = searchLikeAvatar('GP170BD', items, 5);
-  ok('the exact model is first', top[0]?.sku === 'GP170BD', `got ${top[0]?.sku}`);
-  check('respects the limit', searchLikeAvatar('bếp', items, 2).length <= 2, true);
-  check('an empty query returns nothing', searchLikeAvatar('', items, 5).length, 0);
-  check('a query matching nothing returns nothing', searchLikeAvatar('xe đạp', items, 5).length, 0);
-  check('a missing catalogue returns nothing', searchLikeAvatar('bếp', null, 5).length, 0);
-}
-
-console.log('\nhasDecisiveWinner (the neon gate for products)');
-ok('a 1000-point SKU match with a weak runner-up qualifies',
-  hasDecisiveWinner([1000, 20]));
-ok('a lone 1000 with nothing else qualifies',
-  hasDecisiveWinner([1000]));
-ok('a mere 550 (the "contains" tier) does not',
-  !hasDecisiveWinner([550, 10]));
-ok('a near-tie does not, so a model family does not all light up',
-  !hasDecisiveWinner([1000, 900]));
-ok('an empty list does not',
-  !hasDecisiveWinner([]));
-ok('a missing list does not',
-  !hasDecisiveWinner(undefined));
-
-console.log('\nexactMatches — which tiles get the outline');
-{
-  // A decisive product winner, keyed the way merge.js keys product tiles.
-  const ids = exactMatches([], 'GP170BD', [{ sku: 'GP170BD', score: 1316 }, { sku: 'GP900', score: 10 }]);
-  ok('the decisive product is outlined', ids.has('malloca:GP170BD'));
-  // A relevance-only winner must not light up.
-  const weak = exactMatches([], 'bếp inox', [{ sku: 'A', score: 60 }, { sku: 'B', score: 10 }]);
-  ok('a mere relevance match is not outlined', weak.size === 0);
-  // Interior: the query appears verbatim in the record's own title.
-  const interiors = exactMatches(
-    [{ id: 'abc123', score: 0.31, title: 'Bếp đá marble cao cấp', categories: ['Nội thất bếp'] }, { id: 'def456', score: 0.29, title: 'Phòng khách hiện đại' }],
-    'bếp đá',
-  );
-  ok('an interior whose title contains the query is outlined', interiors.has('abc123'));
-  ok('the merely-similar interior is not', !interiors.has('def456'));
-  // Accents must fold on both sides.
-  const folded = exactMatches([{ id: 'x', score: 0.3, title: 'Bep Da Marble' }], 'bếp đá');
-  ok('accent folding works both ways', folded.has('x'));
-  // A short query must not match everything by accident.
-  ok('a 1-2 character query outlines nothing', exactMatches([{ id: 'x', score: 0.3, title: 'a b' }], 'a').size === 0);
-  ok('an empty query outlines nothing', exactMatches([{ id: 'x', score: 0.9, title: 'Bếp đá' }], '   ').size === 0);
-}
-
-console.log('\nnormalisation parity with catalogue.js');
-{
-  ok('normalizeText folds the same way in both modules',
-    normalizeText('Bếp Từ Mây') === 'bep tu may');
-}
-
-console.log(`\n${passed} passed, ${failed} failed`);
-if (failed) process.exit(1);

scripts/test-semantic-search.mjs

@@ -1,123 +0,0 @@
-/**
- * Nghiệm thu hành vi tìm kiếm: ngữ nghĩa (ảnh interiors) vs lookup sản phẩm.
- *
- * Chạy:  node scripts/test-semantic-search.mjs
- *
- * Bốn nhóm kiểm tra, đúng bốn cam kết của Space:
- *
- *   1. Phân loại từ khóa -- "bàn"/"ghế"/"nội thất"/"nhà phố" là từ ngữ
- *      nghĩa; "kệ"/"xoong"/"bếp"/"tủ"/"máy" vẫn là từ sản phẩm.
- *   2. Đồng nghĩa -- "nhà phố" mở rộng ra "nhà ống"; "biệt thự" ra "villa".
- *   3. Ảnh interiors -- tìm "nhà phố" thấy caption "Nhà ống", KHÔNG thấy
- *      "Đèn ống" (false positive đã được đo và loại).
- *   4. Crowd-out -- "bàn ghế"/"nội thất" GIỮ ảnh interiors; "kệ xoong"
- *      VẪN gỡ interiors (chỉ còn sản phẩm); lookup SKU chính xác vẫn
- *      crowd-out và trả đúng 1 sản phẩm đầu tiên.
- */
-import { productLikeTerms, isSemanticTerm, expandQueryTerms } from '../src/semantic-terms.js';
-import { mergeResults } from '../src/merge.js';
-import { searchLikeAvatar } from '../src/product-search.js';
-import { searchAvatarInteriors } from '../src/avatar-interiors.js';
-
-let failures = 0;
-function check(name, ok, detail = '') {
-  console.log(`${ok ? 'PASS' : 'FAIL'}  ${name}${detail ? ' — ' + detail : ''}`);
-  if (!ok) failures++;
-}
-
-/** Ghi sản phẩm vào dạng Map mà catalogue.js/buildCatalogue() trả về. */
-function toItems(products) {
-  const items = new Map();
-  for (const p of products) items.set(p.sku, p);
-  return items;
-}
-
-/* ─────────────────────── 1. Phân loại từ khóa ─────────────────────── */
-
-check('"bàn ghế" toàn từ ngữ nghĩa', productLikeTerms(['ban', 'ghe']).length === 0);
-check('"kệ xoong" toàn từ sản phẩm', JSON.stringify(productLikeTerms(['ke', 'xoong'])) === '["ke","xoong"]');
-check('"nội thất" toàn từ ngữ nghĩa', productLikeTerms(['noi', 'that']).length === 0);
-check('"nhà phố" toàn từ ngữ nghĩa', productLikeTerms(['nha', 'pho']).length === 0);
-check('"biệt thự" toàn từ ngữ nghĩa', productLikeTerms(['biet', 'thu']).length === 0);
-check('"bếp từ" vẫn là từ sản phẩm', productLikeTerms(['bep', 'tu']).length === 2);
-check('"máy hút mùi" vẫn là từ sản phẩm', productLikeTerms(['may', 'hut', 'mui']).length === 3);
-check('isSemanticTerm(ban) đúng', isSemanticTerm('ban') === true);
-check('isSemanticTerm(ke) sai (kệ là dòng SP chủ lực)', isSemanticTerm('ke') === false);
-
-/* ─────────────────────── 2. Đồng nghĩa ─────────────────────── */
-
-check('mở rộng "nhà phố" có "ong" (nhà ống)', expandQueryTerms(['nha', 'pho']).includes('ong'));
-check('mở rộng "biệt thự" có "villa"', expandQueryTerms(['biet', 'thu']).includes('villa'));
-check('mở rộng "nội thất" có "that"', expandQueryTerms(['noi']).includes('that'));
-check('mở rộng "ghe" sinh "ban" (cặp bàn-ghế là đồng nghĩa thật)', JSON.stringify(expandQueryTerms(['ghe'])) === '["ghe","ban"]');
-
-/* ─────────────────────── 3. Ảnh interiors (caption lexical) ─────────────────────── */
-
-const avatarInteriors = [
-  { sku: 'avatarimg:1', avatarImageId: '1', title: 'Nhà ống mặt tiền', description: '', categories: [], keywords: [], addedAt: '2026-10-01T00:00:00Z', images: ['https://cdn.example/1.jpg'], src: 'https://cdn.example/1.jpg' },
-  { sku: 'avatarimg:2', avatarImageId: '2', title: 'Biệt thự vườn xanh', description: '', categories: [], keywords: [], addedAt: '2026-10-01T00:00:00Z', images: ['https://cdn.example/2.jpg'], src: 'https://cdn.example/2.jpg' },
-  { sku: 'avatarimg:3', avatarImageId: '3', title: 'Đèn ống LED âm trần', description: '', categories: [], keywords: [], addedAt: '2026-10-01T00:00:00Z', images: ['https://cdn.example/3.jpg'], src: 'https://cdn.example/3.jpg' },
-  { sku: 'avatarimg:4', avatarImageId: '4', title: 'Nội thất phòng khách gỗ', description: '', categories: [], keywords: [], addedAt: '2026-10-01T00:00:00Z', images: ['https://cdn.example/4.jpg'], src: 'https://cdn.example/4.jpg' },
-];
-
-const nhaPhoHits = searchAvatarInteriors('nhà phố', avatarInteriors);
-check('tìm "nhà phố" thấy ảnh "Nhà ống"', nhaPhoHits.some(r => r.avatarImageId === '1'), nhaPhoHits.map(r => r.title).join(' | '));
-check('tìm "nhà phố" thấy ảnh "Biệt thự"', nhaPhoHits.some(r => r.avatarImageId === '2'));
-check('tìm "nhà phố" KHÔNG thấy "Đèn ống" (false positive)', !nhaPhoHits.some(r => r.avatarImageId === '3'), nhaPhoHits.map(r => r.title).join(' | '));
-
-const noiThatHits = searchAvatarInteriors('nội thất', avatarInteriors);
-check('tìm "nội thất" thấy ảnh "Nội thất phòng khách"', noiThatHits.some(r => r.avatarImageId === '4'), noiThatHits.map(r => r.title).join(' | '));
-
-/* ─────────────────────── 4. Crowd-out trong mergeResults ─────────────────────── */
-
-/** Ảnh interiors đã được CLIP xếp hạng (điểm cosine), dạng worker trả về. */
-const clipInteriors = [
-  { id: 'a1b2c3d4e5', url: 'phong-khach-01.jpg', score: 0.91, title: 'Phòng khách gỗ', category: 'phong khach' },
-  { id: 'f6e5d4c3b2', url: 'phong-khach-02.jpg', score: 0.87, title: 'Phòng khách sáng', category: 'phong khach' },
-];
-
-const banGhe = toItems([
-  { sku: 'BAN-OC-001', model: 'BAN-OC-001', name: 'Bàn ghế gỗ óc chó', brand: 'Malloca', category: 'ban-ghe', summary: 'Bàn ghế ăn gỗ óc chó nhập khẩu', specs: [], feats: [], images: ['https://cdn.example/ban.jpg'], price: '4.500.000₫', priceNum: 4500000 },
-]);
-const banGheHits = searchLikeAvatar('bàn ghế', banGhe, 24);
-console.log(`  [info] score "bàn ghế" = ${banGheHits.map(h => `${h.sku}:${h.score}`).join(', ')}`);
-
-const mergedBanGhe = mergeResults(clipInteriors, banGheHits, { query: 'bàn ghế', avatarInteriors: [], recentProducts: [] });
-// CLIP interior tiles giữ id GỐC (a1b2c3d4e5...), không có prefix `interior:` —
-// prefix chỉ là key de-dup nội bộ của mergeResults. Kiểm tra trên id gốc.
-check('tìm "bàn ghế" VẪN GIỮ ảnh interiors (semantic)', mergedBanGhe.some(t => ['a1b2c3d4e5', 'f6e5d4c3b2'].includes(String(t.id))), mergedBanGhe.map(t => t.id).join(', '));
-check('tìm "bàn ghế" vẫn có sản phẩm xen kẽ', mergedBanGhe.some(t => t.sku === 'BAN-OC-001'));
-
-const noiThat = toItems([
-  { sku: 'NT-001', model: 'NT-001', name: 'Nội thất gỗ phòng khách', brand: 'Malloca', category: 'noi-that', summary: '', specs: [], feats: [], images: ['https://cdn.example/nt.jpg'], price: '7.000.000₫', priceNum: 7000000 },
-]);
-const noiThatProductHits = searchLikeAvatar('nội thất', noiThat, 24);
-const mergedNoiThat = mergeResults(clipInteriors, noiThatProductHits, { query: 'nội thất', avatarInteriors: [], recentProducts: [] });
-check('tìm "nội thất" VẪN GIỮ ảnh interiors (semantic)', mergedNoiThat.some(t => ['a1b2c3d4e5', 'f6e5d4c3b2'].includes(String(t.id))), mergedNoiThat.map(t => t.id).join(', '));
-
-const keXoong = toItems([
-  { sku: 'GX-170', model: 'GX-170', name: 'Giá xoong nồi inox Eurogold', brand: 'Eurogold', category: 'ke-xoong', summary: 'Kệ xoong treo tường inox 304', specs: [], feats: [], images: ['https://cdn.example/ke.jpg'], price: '590.000₫', priceNum: 590000 },
-]);
-const keXoongHits = searchLikeAvatar('kệ xoong', keXoong, 24);
-console.log(`  [info] score "kệ xoong" = ${keXoongHits.map(h => `${h.sku}:${h.score}`).join(', ')}`);
-const mergedKeXoong = mergeResults(clipInteriors, keXoongHits, { query: 'kệ xoong', avatarInteriors: [], recentProducts: [] });
-check('tìm "kệ xoong" VẪN gỡ interiors (product query)', !mergedKeXoong.some(t => String(t.id).startsWith('interior:')), mergedKeXoong.map(t => t.id).join(', '));
-check('tìm "kệ xoong" chỉ còn sản phẩm', mergedKeXoong.every(t => t.sku === 'GX-170'));
-
-/* ─────────────── 5. Lookup SKU: chính xác 100%, vẫn crowd-out ─────────────── */
-
-const skuMap = toItems([
-  { sku: 'GP170BD', model: 'GP170BD', name: 'Giá xoong nồi Eurogold GP170BD', brand: 'Eurogold', category: 'ke-xoong', summary: '', specs: [], feats: [], images: ['https://cdn.example/gp.jpg'], price: '850.000₫', priceNum: 850000 },
-]);
-const skuHits = searchLikeAvatar('GP170BD', skuMap, 24);
-console.log(`  [info] score "GP170BD" = ${skuHits.map(h => `${h.sku}:${h.score}`).join(', ')}`);
-check('lookup SKU "GP170BD" trúng chính xác sản phẩm đó', skuHits[0]?.sku === 'GP170BD');
-check('lookup SKU đạt ngưỡng identity (≥700)', (skuHits[0]?.score ?? 0) >= 700, `score=${skuHits[0]?.score}`);
-const mergedSku = mergeResults(clipInteriors, skuHits, { query: 'GP170BD', avatarInteriors: [], recentProducts: [] });
-check('lookup SKU crowd-out interiors (đây là tra cứu, không phải duyệt ảnh)', !mergedSku.some(t => String(t.id).startsWith('interior:')), mergedSku.map(t => t.id).join(', '));
-check('lookup SKU trả đúng 1 sản phẩm, đầu danh sách', mergedSku[0]?.sku === 'GP170BD');
-
-/* ─────────────────────── tổng kết ─────────────────────── */
-
-console.log(failures ? `\n${failures} TEST FAIL` : '\nALL TESTS PASS');
-process.exit(failures ? 1 : 0);

scripts/test-ui.mjs

@@ -1,201 +0,0 @@
-/**
- * Browser check for the three changes: the backdrop, the size/position
- * controls, and the neon outline.
- *
- * Run against a served build:
- *   npx vite preview --port 4173 & node scripts/test-ui.mjs
- *
- * Every assertion is about something visible. The neon one in particular is
- * asserted against the RENDERED pixels and computed styles rather than against
- * a class name, because a class that is added but overridden by CSS would pass
- * a class-name check while showing the user nothing at all.
- */
-
-import { chromium } from 'playwright';
-
-const BASE = process.env.BASE_URL || 'http://127.0.0.1:4173';
-let passed = 0, failed = 0;
-const ok = (label, condition, detail = '') => {
-  if (condition) { passed++; console.log(`  ok   ${label}`); }
-  else { failed++; console.log(`  FAIL ${label} ${detail}`); }
-};
-
-const browser = await chromium.launch();
-const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
-const errors = [];
-page.on('pageerror', error => errors.push(error.message));
-page.on('console', message => { if (message.type() === 'error') errors.push(message.text()); });
-
-await page.goto(BASE, { waitUntil: 'domcontentloaded' });
-// The 130 MB model load is not what is under test here; give React time to mount
-// and paint the field, then stop waiting on it.
-await page.waitForSelector('.image-tile', { timeout: 30000 });
-await page.waitForTimeout(2500);
-
-console.log('\n1. backdrop');
-{
-  const info = await page.evaluate(() => {
-    const el = document.querySelector('.brand-backdrop');
-    if (!el) return null;
-    const style = getComputedStyle(el);
-    return { image: style.backgroundImage, opacity: style.opacity, position: style.position };
-  });
-  ok('the backdrop element exists', !!info);
-  ok('it paints the vai-avatar artwork', !!info?.image?.includes('vaistudio_center.png'), info?.image);
-  ok('opacity is 30%', Math.abs(Number(info?.opacity) - 0.3) < 0.001, `got ${info?.opacity}`);
-  ok('it is fixed and out of the way', info?.position === 'fixed');
-  // The image must actually load, or it is a 30% transparent rectangle.
-  const loaded = await page.evaluate(() => new Promise(resolve => {
-    const url = getComputedStyle(document.querySelector('.brand-backdrop')).backgroundImage.slice(5, -2);
-    const probe = new Image();
-    probe.onload = () => resolve(probe.naturalWidth > 0);
-    probe.onerror = () => resolve(false);
-    probe.src = url;
-    setTimeout(() => resolve(false), 8000);
-  }));
-  ok('the artwork actually decodes (not a 404)', loaded);
-  // It must not swallow clicks meant for a photograph.
-  const pe = await page.evaluate(() => getComputedStyle(document.querySelector('.brand-backdrop')).pointerEvents);
-  ok('it does not intercept pointer events', pe === 'none', `got ${pe}`);
-}
-
-console.log('\n2. size & position controls, docked to the search box');
-{
-  const toggle = await page.$('.field-controls-toggle');
-  ok('the toggle exists', !!toggle);
-  if (toggle) {
-    // "Near the search box" is a real requirement, so measure it.
-    const geo = await page.evaluate(() => {
-      const box = document.querySelector('.search-pill')?.getBoundingClientRect();
-      const knob = document.querySelector('.field-controls-toggle')?.getBoundingClientRect();
-      if (!box || !knob) return null;
-      return { gap: knob.top - box.bottom, centres: Math.abs((box.left + box.right) / 2 - (knob.left + knob.right) / 2) };
-    });
-    ok(`it sits just below the search box (${Math.round(geo?.gap ?? -1)}px gap)`, (geo?.gap ?? -1) >= 0 && (geo?.gap ?? 99) < 120);
-    ok(`and is horizontally centred with it (${Math.round(geo?.centres ?? -1)}px off)`, (geo?.centres ?? 99) < 24);
-
-    await toggle.click();
-    await page.waitForSelector('.field-controls-panel', { timeout: 5000 });
-    ok('the panel opens', true);
-    ok('it has a size control', !!(await page.$('#field-size')));
-    ok('it has a position pad', !!(await page.$('.field-controls-pad')));
-
-    // Size: measure a real tile before and after.
-    const before = await page.evaluate(() => {
-      const tile = document.querySelector('.image-tile');
-      return tile ? parseFloat(getComputedStyle(tile).width) : 0;
-    });
-    await page.evaluate(() => {
-      const slider = document.querySelector('#field-size');
-      const setter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
-      setter.call(slider, '170');
-      slider.dispatchEvent(new Event('input', { bubbles: true }));
-      slider.dispatchEvent(new Event('change', { bubbles: true }));
-    });
-    await page.waitForTimeout(1800);
-    const after = await page.evaluate(() => {
-      const tile = document.querySelector('.image-tile');
-      return tile ? parseFloat(getComputedStyle(tile).width) : 0;
-    });
-    ok(`raising the size slider grows the photographs (${Math.round(before)}px -> ${Math.round(after)}px)`,
-      after > before * 1.15, `before ${before} after ${after}`);
-
-    // Position: drag the pad and confirm the plane actually moved.
-    const pad = await page.$('.field-controls-pad');
-    const box = await pad.boundingBox();
-    // Read the recorded offset rather than guessing at a tile: which tile is
-    // "first" in the DOM is a seeded z-order detail, so asserting on it made
-    // this test depend on layout internals instead of on the observable state.
-    await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
-    await page.mouse.down();
-    await page.mouse.move(box.x + box.width - 4, box.y + box.height - 4, { steps: 12 });
-    await page.mouse.up();
-    await page.waitForTimeout(1200);
-    const view = await page.evaluate(() => JSON.parse(sessionStorage.getItem('sif:view') || '{}'));
-    ok(`dragging the pad sets both axes (${view.offsetX}, ${view.offsetY})`,
-      (view.offsetX ?? 0) > 100 && (view.offsetY ?? 0) > 100, JSON.stringify(view));
-    // And the change must actually reach the photographs' rendered transform.
-    // Read the whole field and compare it against the SAME measurement taken
-    // before the drag: the first tile in the DOM is a seeded z-order detail,
-    // so the spread across all tiles is the reliable signal, not any one tile.
-    const span = () => page.evaluate(() => {
-      const xs = [...document.querySelectorAll('.image-tile')].map(t => {
-        const m = /translate3d\((-?[\d.]+)px/.exec(t.style.transform || getComputedStyle(t).transform);
-        return m ? Number(m[1]) : null;
-      }).filter(v => v !== null);
-      return xs.length ? { min: Math.min(...xs), max: Math.max(...xs), n: xs.length } : null;
-    });
-    const spanAfter = await span();
-    ok(`the photographs moved with it (x spans ${spanAfter ? `${Math.round(spanAfter.min)}..${Math.round(spanAfter.max)} over ${spanAfter.n} tiles` : 'no tiles'})`,
-      !!spanAfter && spanAfter.max - spanAfter.min > 200, JSON.stringify(spanAfter));
-
-    // Persistence across reload is what makes it a setting, not a gesture.
-    await page.reload({ waitUntil: 'domcontentloaded' });
-    await page.waitForSelector('.image-tile', { timeout: 30000 });
-    const persisted = await page.evaluate(() => {
-      const slider = document.querySelector('#field-size');
-      return sessionStorage.getItem('sif:view');
-    });
-    ok('the view survives a reload', !!persisted && JSON.parse(persisted).tileScale > 1, persisted);
-    await page.evaluate(() => { sessionStorage.clear(); });
-  }
-}
-
-console.log('\n3. neon outline on an exact match');
-{
-  // Render tiles in the field's own coordinate space, with the classes and
-  // custom properties ImageField sets, then read the painted result. Typing a
-  // real query would mean loading the 130 MB model first, and the outline --
-  // not the encoder -- is what is under test here.
-  const painted = await page.evaluate(() => {
-    const field = document.querySelector('.image-field');
-    const exact = document.createElement('button');
-    exact.className = 'image-tile exact';
-    exact.dataset.exact = 'true';
-    exact.style.cssText = 'position:absolute;left:40px;top:40px;width:200px;height:160px;';
-    const plain = document.createElement('button');
-    plain.className = 'image-tile';
-    plain.dataset.exact = '';
-    plain.style.cssText = 'position:absolute;left:300px;top:40px;width:200px;height:160px;';
-    field.append(exact, plain);
-    const ring = getComputedStyle(exact, '::after');
-    const noRing = getComputedStyle(plain, '::after');
-    const out = {
-      content: ring.content,
-      borderWidth: ring.borderTopWidth,
-      shadow: ring.boxShadow,
-      exactOpacity: getComputedStyle(exact).getPropertyValue('--relevance-opacity').trim(),
-      plainContent: noRing.content,
-    };
-    exact.remove(); plain.remove();
-    return out;
-  });
-  ok('the outline pseudo-element exists on an exact tile', painted.content !== 'none' && painted.content.includes('"'));
-  ok(`it has a visible stroke (${painted.borderWidth})`, parseFloat(painted.borderWidth) >= 1);
-// count comma-separated shadows; color-mix() resolves to oklab() in Chromium,
-// so match on the geometry ("Npx Npx Npx") rather than on a colour function.
-  const glowLayers = (painted.shadow.match(/\d+px\s+\d+px\s+\d+px/g) || []).length;
-  ok(`it carries a multi-layer neon glow (${glowLayers} layers)`, glowLayers >= 3, painted.shadow);
-  ok('an ordinary tile gets NO outline', painted.plainContent === 'none', `got ${painted.plainContent}`);
-  ok('an exact tile is never faded', painted.exactOpacity === '' || Number(painted.exactOpacity) >= 1, `got ${painted.exactOpacity}`);
-}
-
-console.log('\n4. no console errors from the new code');
-{
-  // Image CORS from the dataset CDN is filtered out deliberately: it is a
-  // PRE-EXISTING property of how this Space loads interior photographs (the
-  // DATASET URL in assets.js is unchanged by this work), it depends on the
-  // headless host's own network policy rather than on any code under test, and
-  // surfacing it here would bury a real regression under a thousand lines of
-  // noise. The tile layer falls back to the BlurHash placeholder, so the field
-  // still paints without it.
-  const relevant = errors.filter(e => !/transformers|onnx|fetch|Failed to load|net::|404|wasm/i.test(e) && !/CORS policy/i.test(e));
-  ok(`no unrelated page errors (${relevant.length})`, relevant.length === 0, relevant.slice(0, 2).join(' | '));
-}
-
-await page.screenshot({ path: '/tmp/sif-ui.png', fullPage: false });
-console.log('\nscreenshot: /tmp/sif-ui.png');
-await browser.close();
-
-console.log(`\n${passed} passed, ${failed} failed`);
-if (failed) process.exit(1);

scripts/test-viewer-ui.mjs

@@ -1,151 +0,0 @@
-/**
- * Browser checks for the restored viewer CSS, the ten-ring limit, and pill
- * clearance.
- *
- * The CSS regression this file exists for was silent: opening a photograph
- * produced an unstyled <dialog> that still worked, still showed the image, and
- * just looked nothing like the design. Nothing throws, so only a computed-style
- * assertion catches it.
- */
-import { chromium } from 'playwright';
-
-const BASE = process.env.BASE_URL || 'http://127.0.0.1:4173/';
-let passed = 0, failed = 0;
-const test = async (name, fn) => {
-  try { await fn(); console.log('  ok  ' + name); passed++; }
-  catch (error) { console.log('  FAIL ' + name + '\n       ' + error.message.split('\n')[0]); failed++; }
-};
-const assert = (cond, message) => { if (!cond) throw new Error(message); };
-
-const browser = await chromium.launch();
-const page = await browser.newPage({ viewport: { width: 1600, height: 950 } });
-const errors = [];
-page.on('pageerror', error => errors.push(error.message));
-
-await page.goto(BASE, { waitUntil: 'domcontentloaded' });
-await page.waitForSelector('.image-tile', { timeout: 120000 });
-await page.waitForTimeout(6000);
-
-console.log('\nrestored viewer CSS');
-// ──────────────────────────────────────────────────────────────────────────
-
-await test('the viewer opens full-screen with its own background', async () => {
-  // force: true because the field is deliberately alive -- every tile drifts a
-  // few px per frame, so a click aimed at a position sampled a moment ago can
-  // land beside the tile. That is the field working, not a bug, and it is why
-  // the shot here is dispatched at the element rather than at coordinates.
-  await page.locator('.image-tile').first().click({ force: true, timeout: 15000 });
-  await page.waitForSelector('.photo-viewer[open]', { timeout: 30000 });
-  const box = await page.locator('.photo-viewer').boundingBox();
-  const style = await page.evaluate(() => {
-    const v = document.querySelector('.photo-viewer');
-    const s = getComputedStyle(v);
-    return { position: s.position, bg: s.backgroundColor, w: s.width, h: s.height };
-  });
-  assert(style.position === 'fixed', 'viewer is ' + style.position + ', not fixed');
-  assert(box.width >= 1500 && box.height >= 900, 'viewer is ' + Math.round(box.width) + 'x' + Math.round(box.height));
-  assert(style.bg !== 'rgba(0, 0, 0, 0)', 'viewer has no background');
-});
-
-await test('the toolbar is a bar, not stacked plain text', async () => {
-  // The regression rendered this as inline-flow divs at full width. A real
-  // toolbar is absolutely positioned over the image, which is what stops the
-  // share button sitting on top of the photograph.
-  const style = await page.evaluate(() => {
-    const t = document.querySelector('.photo-toolbar');
-    return t ? { position: getComputedStyle(t).position, display: getComputedStyle(t).display } : null;
-  });
-  assert(style, 'no .photo-toolbar found');
-  assert(style.position === 'absolute', 'toolbar is ' + style.position);
-});
-
-await test('the close button is sized and round, not a bare glyph', async () => {
-  const box = await page.locator('.photo-toolbar button').first().boundingBox();
-  assert(box && box.width >= 28 && box.height >= 28,
-    'close button is ' + (box ? Math.round(box.width) + 'x' + Math.round(box.height) : 'missing'));
-});
-
-await test('the frame sits inside the viewport, not flush to an edge', async () => {
-  const box = await page.locator('.photo-frame').boundingBox();
-  assert(box && box.width > 100 && box.height > 100, 'frame is ' + JSON.stringify(box));
-  assert(box.x >= 0 && box.y >= 0 && box.x + box.width <= 1601 && box.y + box.height <= 951,
-    'frame escapes the viewport');
-});
-
-await test('the detail panel is styled when the photograph has metadata', async () => {
-  const n = await page.locator('.photo-detail').count();
-  if (!n) { console.log('       (skipped: this photograph has no metadata panel)'); return; }
-  const style = await page.evaluate(() => {
-    const d = document.querySelector('.photo-detail');
-    const s = getComputedStyle(d);
-    return { position: s.position, z: s.zIndex };
-  });
-  assert(['absolute', 'fixed'].includes(style.position), 'panel is ' + style.position);
-});
-
-console.log('\nten rings, not sixty');
-// ──────────────────────────────────────────────────────────────────────────
-
-await test('at most ten tiles carry the neon', async () => {
-  await page.keyboard.press('Escape');
-  await page.waitForTimeout(1500);
-  const ringed = await page.locator('.image-tile.featured').count();
-  assert(ringed <= 10, ringed + ' tiles are ringed, expected at most 10');
-});
-
-await test('more photographs are shown than before', async () => {
-  const total = await page.locator('.image-tile').count();
-  assert(total > 96, 'only ' + total + ' tiles; the field should now hold 150 on desktop');
-});
-
-await test('un-ringed new photographs are still visible', async () => {
-  // "còn lại hiển thị bình thường" -- the rest must render as ordinary tiles.
-  const plain = await page.evaluate(() => {
-    const tiles = [...document.querySelectorAll('.image-tile')];
-    return tiles.filter(t => !t.classList.contains('featured')).length;
-  });
-  assert(plain > 10, 'no un-ringed tiles found');
-});
-
-console.log('\npill clearance');
-// ──────────────────────────────────────────────────────────────────────────
-
-await test('no ringed tile overlaps the search pill', async () => {
-  // The brief is explicit: big, near the search box, but NOT covering it.
-  // Measured against every ringed tile's real box, not its centre point.
-  const worst = await page.evaluate(() => {
-    const pill = document.querySelector('.search-pill').getBoundingClientRect();
-    let overlap = 0, who = null;
-    for (const tile of document.querySelectorAll('.image-tile.featured')) {
-      const r = tile.getBoundingClientRect();
-      const w = Math.max(0, Math.min(r.right, pill.right) - Math.max(r.left, pill.left));
-      const h = Math.max(0, Math.min(r.bottom, pill.bottom) - Math.max(r.top, pill.top));
-      const area = w * h;
-      if (area > overlap) { overlap = area; who = tile.dataset.imageId; }
-    }
-    return { overlap, who, pill: pill.width * pill.height };
-  });
-  assert(worst.overlap === 0,
-    `tile ${worst.who} covers ${Math.round(worst.overlap)}px² of the pill (${Math.round(worst.pill)}px² total)`);
-});
-
-await test('a ringed tile is still larger than an ordinary one', async () => {
-  const r = await page.evaluate(() => {
-    const area = el => { const b = el.getBoundingClientRect(); return b.width * b.height; };
-    const f = document.querySelector('.image-tile.featured');
-    const o = [...document.querySelectorAll('.image-tile')].find(t => !t.classList.contains('featured'));
-    return { f: area(f), o: area(o) };
-  });
-  assert(r.f > r.o * 1.15, `ringed ${Math.round(r.f)}px² vs ordinary ${Math.round(r.o)}px²`);
-});
-
-console.log('\nno regressions');
-// ──────────────────────────────────────────────────────────────────────────
-
-await test('no uncaught page errors', async () => {
-  assert(errors.length === 0, errors.slice(0, 3).join(' | '));
-});
-
-await browser.close();
-console.log(`\n${passed} passed, ${failed} failed`);
-process.exit(failed ? 1 : 0);