viewer: name, describe and link every photo the search finds

.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

PLACEHOLDER

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

README.md

@@ -1,20 +1,17 @@
 ---
-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
-
-Web App AI thuộc hệ sinh thái **VIBE CODE AI** của **V.AI STUDIO**.
+# Semantic Image Field — Nội thất
 
 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.

app.html

@@ -4,10 +4,10 @@
     <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" />
+    <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="./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>
+    <title>Semantic Image Field — Nội thất</title>
   </head>
   <body>
     <!--

dist/app.html

@@ -4,10 +4,10 @@
     <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" />
+    <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="./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>
+    <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">
   </head>

dist/assets/app.css

@@ -1,2 +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-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}
+@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;--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}.block{display:block}.flex{display:flex}.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}.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-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{display:none}.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}}@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();

index.html

@@ -4,26 +4,10 @@
     <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>
+    <title>Semantic Image Field — Nội thất</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.
@@ -32,51 +16,17 @@
       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:
+      (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>
+    <script type="module" crossorigin src="./dist/assets/index.js"></script>
+    <link rel="stylesheet" crossorigin href="./dist/assets/app.css">
   </head>
   <body>
     <div id="root"></div>
   </body>
-</html>
+</html>

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

@@ -7,8 +7,6 @@
     "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"
@@ -32,10 +30,9 @@
     "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": {
     "node": "^20.19.0 || >=22.12.0"
   }
-}
+}

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

@@ -32,7 +32,7 @@ const CLONE = process.env.CLONE_DIR || '/tmp/space';
  * is why the swap below happens only after it has run.
  */
 const STABLE_BUNDLE = 'assets/index.js';
-const STABLE_STYLE = 'assets/app.css';
+const STABLE_STYLE = 'assets/index.css';
 
 /** The two mirrored files, in both the source and the served location. */
 const MIRROR = ['products.json', 'promos.json'];
@@ -70,7 +70,7 @@ const MIRROR = ['products.json', 'promos.json'];
  * 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 COMMITTABLE = ['index.html', 'public/catalogue', 'dist/catalogue', 'dist/assets'];
 
 const ok = message => console.log(`[refresh] ${message}`);
 const warn = message => console.warn(`[refresh] WARNING: ${message}`);
@@ -99,23 +99,10 @@ function git(...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? */
+/** Is git-lfs both installed AND wired as a smudge filter for this clone? */
 function hasGitLfs() {
   try {
-    if (!hasGitLfsBinary()) return false;
+    if (!shell('git lfs version 2>/dev/null || true').trim()) return false;
     return Boolean(shell('git config --get filter.lfs.smudge || true').trim());
   } catch {
     return false;
@@ -174,7 +161,7 @@ function recordCount(relative) {
 /** 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);
+    && /\.\/dist\/assets\/index\.css\b/.test(html);
 }
 
 /**
@@ -265,21 +252,6 @@ function 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.
@@ -294,16 +266,6 @@ function main() {
   // 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' });
@@ -346,10 +308,8 @@ function main() {
   // 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]);
+    .map(match => match[1]);
   if (!referenced.length) {
     throw new Error('index.html references no dist/assets bundle — refusing to publish');
   }

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/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-merge.mjs

@@ -57,7 +57,7 @@ test('gives each product a resolvable absolute src', () => {
 });
 
 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 wrapped = mergeResults(interiors(4), [{ sku: 'A', score: 9, 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);
@@ -84,7 +84,7 @@ test('never duplicates an interior or a product', () => {
 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);
+  assert.equal(out.filter(r => r.sku).length, 12);
   // 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']);
 });
@@ -161,50 +161,4 @@ test('interior scores are never modified', () => {
   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-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);

src/App.jsx

@@ -2,7 +2,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import ImageField from './ImageField.jsx';
 import PhotoViewer from './PhotoViewer.jsx';
 import { mergeResults } from './merge.js';
-import { searchAvatarInteriors, loadRecentAvatarInteriors } from './avatar-interiors.js';
 
 /**
  * How often to re-read the product catalogue so add/edit/delete on vai-avatar
@@ -37,20 +36,6 @@ export default function App() {
   const [products, setProducts] = useState([]);
   const [productStatus, setProductStatus] = useState({ loading: false, error: '' });
   const [catalogue, setCatalogue] = useState({ count: 0 });
-  // The newest interior photographs published on vai-avatar, already matched
-  // against the current query by the worker (see avatar-interiors.js). Kept as
-  // its own state so a new photograph appearing upstream reaches the field on
-  // the next poll even when nothing has been typed.
-  const [avatarInteriors, setAvatarInteriors] = useState([]);
-  // The newest ADDED PRODUCTS (via vai-avatar "Thêm SP"). Kept as its own state
-  // so a product pasted on vai-avatar shows up in the field -- ringed and
-  // enlarged like the newest interiors -- on the next poll, with no query.
-  const [recentProducts, setRecentProducts] = useState([]);
-  // The unfiltered newest-first set, held so clearing the query can restore it.
-  // Without this the field would keep showing only the photographs that happened
-  // to match the last search, and a new upload would not appear until it was
-  // typed at.
-  const avatarPool = useRef([]);
   const worker = useRef(null);
   const input = useRef(null);
   const requestId = useRef(0);
@@ -64,14 +49,6 @@ export default function App() {
   const productsRef = useRef([]);
   const signature = useRef('');
 
-  /**
-   * The newest-first interior list, used by the fullscreen viewer for time-based
-   * left/right navigation. Kept in a ref (not state) so the render of the
-   * viewer never re-renders when the pool updates -- only the navigation
-   * behaviour changes.
-   */
-  const timeList = useRef([]);
-
   useEffect(() => {
     const instance = new Worker(new URL('./worker.js', import.meta.url), { type: 'module' });
     worker.current = instance;
@@ -88,34 +65,9 @@ export default function App() {
       if (data.status === 'products-loading') setProductStatus(current => ({ ...current, loading: true }));
       if (data.status === 'products-complete' && data.id === productId.current) {
         setProducts(data.output); setProductStatus({ loading: false, error: '' });
-        // The matched interiors ride the same message, so one setState pair
-        // updates both halves of the field atomically -- no frame where a new
-        // photograph sits next to results for a query that did not produce it.
-        if (Array.isArray(data.interiors)) setAvatarInteriors(data.interiors);
         if (typeof data.signature === 'string') signature.current = data.signature;
         if (data.count) setCatalogue({ count: data.count });
       }
-      // vai-avatar published new interiors. `changed` is false on the vast
-      // majority of ticks, and skipping the setState then is what stops the
-      // field being torn down and rebuilt every 30s for no visible reason.
-      if (data.status === 'avatar-updated') {
-        if (data.changed) {
-          // With no query, every new photograph is shown. That is the whole
-          // point of the feature: a photograph added on vai-avatar has to be
-          // visible here without anyone having to search for it. With a query,
-          // the list is filtered to the ones that answer it, so the "new" row at
-          // the top of the field is always relevant to what was actually typed.
-          const text = queryRef.current.trim();
-          avatarPool.current = data.items ?? [];
-          setAvatarInteriors(text ? searchAvatarInteriors(text, avatarPool.current) : avatarPool.current);
-          // The newest added products, ringed on the same field as the newest
-          // interiors. `data.recentProducts` is already newest-first and
-          // image-bearing (the worker filters), so it drops straight in.
-          if (Array.isArray(data.recentProducts)) setRecentProducts(data.recentProducts);
-          // Ask for a re-rank so the products arrive from the same snapshot.
-          if (text) worker.current?.postMessage({ type: 'search-products', text, id: ++productId.current, limit: 48 });
-        }
-      }
       if (data.status === 'products-error' && data.id === productId.current) {
         setProducts([]); setProductStatus({ loading: false, error: data.message });
       }
@@ -130,7 +82,7 @@ export default function App() {
         setCatalogue({ count: data.count });
         if (changed) {
           const text = queryRef.current.trim();
-          if (text) worker.current?.postMessage({ type: 'search-products', text, id: ++productId.current, limit: 48 });
+          if (text) worker.current?.postMessage({ type: 'search-products', text, id: ++productId.current, limit: 24 });
         }
       }
       // Only surface a refresh failure if the panel has nothing to show: a
@@ -171,20 +123,6 @@ export default function App() {
     return () => { instance.terminate(); };
   }, []);
 
-  // Load the time-ordered interior list once, so the viewer can page by date.
-  useEffect(() => {
-    let cancelled = false;
-    loadRecentAvatarInteriors(400).then(list => {
-      if (!cancelled) {
-        timeList.current = list;
-        if (!avatarPool.current.length && list.length) {
-          avatarPool.current = list;
-        }
-      }
-    }).catch(console.error);
-    return () => { cancelled = true; };
-  }, []);
-
   useEffect(() => { productsRef.current = products; }, [products]);
 
   // Poll the catalogue so add / edit / delete on vai-avatar propagate here.
@@ -222,21 +160,14 @@ export default function App() {
       worker.current?.postMessage({ type: 'clear' });
       setResults([]); setBusy(false);
       setProducts([]); setProductStatus({ loading: false, error: '' });
-      // Clearing the query restores the unfiltered newest-first set, so the
-      // photographs just added on vai-avatar are visible again rather than the
-      // field being left showing only the tail of the previous search.
-      setAvatarInteriors(avatarPool.current);
       return;
     }
     setBusy(true);
     setProductStatus({ loading: true, error: '' });
-    // Filtered locally first so the featured row does not blank out on every
-    // keystroke while the worker's own answer is still in flight.
-    setAvatarInteriors(searchAvatarInteriors(text, avatarPool.current));
     // The worker coalesces queued requests; typing needs no artificial debounce.
     worker.current?.postMessage({ type: 'search', text, id });
     // Products share the query but are ranked against their own catalogue.
-    worker.current?.postMessage({ type: 'search-products', text, id: ++productId.current, limit: 48 });
+    worker.current?.postMessage({ type: 'search-products', text, id: ++productId.current, limit: 24 });
   }, []);
 
   useEffect(() => {
@@ -285,14 +216,7 @@ export default function App() {
    * so a product added there appears here within one poll (30s) with no rebuild
    * and no re-embedding.
    */
-  const field = useMemo(
-    // `query` is a dependency because mergeResults needs it to decide which
-    // product is the decisive winner, and that decision changes as the query
-    // changes. Without it, a tile enlarged for the previous query's exact answer
-    // would keep its size under the new one.
-    () => mergeResults(results, products, { avatarInteriors, recentProducts, query }),
-    [results, products, avatarInteriors, recentProducts, query],
-  );
+  const field = useMemo(() => mergeResults(results, products), [results, products]);
 
   /**
    * Catalogue trouble is still reported, but only when it leaves the field
@@ -302,14 +226,7 @@ export default function App() {
   const catalogueError = !productStatus.error || products.length ? '' : productStatus.error;
 
   return <main className="app relative isolate h-dvh w-full overflow-hidden">
-    <div className="brand-backdrop" aria-hidden="true" />
-    <ImageField
-      results={field}
-      paused={!!photo}
-      query={query}
-      products={products}
-      onSelect={(image, origin) => setPhoto({ ...image, origin })}
-    />
+    <ImageField results={field} paused={!!photo} onSelect={(image, origin) => setPhoto({ ...image, origin })} />
     <div className="vignette" aria-hidden="true" />
     <div className="grain" aria-hidden="true" />
     <section className="search-center" aria-label="Tìm kiếm ảnh ngữ nghĩa">
@@ -327,6 +244,6 @@ export default function App() {
       <a className="pointer-events-auto" href="https://github.com/huggingface/transformers.js-examples/tree/main/semantic-image-search-web" target="_blank" rel="noreferrer">Transformers.js <span className="version">4.3.0</span></a>
       <span>{catalogue.count ? `${catalogue.count.toLocaleString()} sản phẩm` : 'sản phẩm'}<span className="footer-divider">/</span> {count.toLocaleString()} ảnh</span>
     </footer>
-    {photo && <PhotoViewer photo={photo} timeList={timeList.current} onClose={() => setPhoto(null)} />}
+    {photo && <PhotoViewer photo={photo} onClose={() => setPhoto(null)} />}
   </main>;
-}
+}

src/ImageField.jsx

@@ -3,31 +3,15 @@ import collection from './collection.json';
 import { dimensions, fieldPosition, fieldCount, scatter, edgePosition, seed } from './layout.js';
 import { sampleMotion, transition } from './motion.js';
 import { relevanceAppearance } from './relevance.js';
-import { imageURL, tileURL, shareURL } from './assets.js';
+import { imageURL, tileURL } from './assets.js';
 import { averageColor, createImageLoader, createPlaceholderLoader, thumbnailWidth } from './image-loader.js';
 
-/**
- * z-index given to the tile the pointer is over.
- *
- * Clears every seeded value above (1 + floor(seed(id) * 100), so 1..100) and
- * every other z-index the field uses -- vignette 300, grain 301, search pill
- * 400, footer 401 -- so the lifted tile sits above its neighbours without
- * pushing the search box under the user's photographs.
- */
-const LIFTED_Z = 200;
-
 /** A single population of photographs, one coordinate plane, one animation clock. */
-export default function ImageField({ results, onSelect, paused, query = '', products = [] }) {
+export default function ImageField({ results, onSelect, paused }) {
   const surface = useRef(null);
   const engine = useRef(null);
   const selection = useRef(onSelect);
   selection.current = onSelect;
-  // The query and products are read inside the long-lived effect, so they are
-  // mirrored into a ref rather than becoming effect dependencies. Making them
-  // dependencies would tear down and rebuild every tile -- and re-request every
-  // thumbnail -- on every keystroke.
-  const controls = useRef({ query, products });
-  controls.current = { query, products };
 
   useEffect(() => {
     const root = surface.current;
@@ -41,104 +25,33 @@ export default function ImageField({ results, onSelect, paused, query = '', prod
 
     function create(image, target, initial = false) {
       const button = document.createElement('button');
-      // `featured` is set here, at creation, rather than toggled per frame like
-      // `exact`: it comes from the record itself and does not change for a
-      // given tile while it is on screen, so there is nothing to re-evaluate.
-      button.className = image.featured ? 'image-tile featured' : 'image-tile';
+      button.className = 'image-tile';
       button.type = 'button';
       button.dataset.imageId = image.id;
       button.style.backgroundColor = averageColor(image.blur);
-      /**
-       * A share link on the tile itself, so a photograph can be sent without
-      * opening it first.
-      *
-      * The tile stays a <button> -- it has to, for keyboard activation and for
-      * aria-haspopup="dialog" to mean anything -- and the anchor is appended
-      * inside it. Nesting an <a> in a <button> is not valid HTML, so the anchor
-      * is aria-hidden and tabIndex -1: it is a pointer affordance, and the
-      * reachable way to share is the link in the viewer, which is a real link
-      * with a real name. A keyboard user is not offered something that behaves
-      * differently from its accessible name.
-      *
-      * Clicking it must not also open the viewer, so its handler stops
-      * propagation; the tile's own onclick never sees the event.
-      */
-      const share = document.createElement('a');
-      share.className = 'image-share';
-      share.tabIndex = -1;
-      share.setAttribute('aria-hidden', 'true');
-      /**
-       * Opens in a new tab, like the viewer's own share link. Navigating the
-       * current tab away would destroy the search the user is standing in, and
-       * the field cannot be rebuilt from history -- there is no route to come
-       * back to.
-       */
-      share.target = '_blank';
-      share.rel = 'noopener noreferrer';
-      share.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">'
-        + '<path d="M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5" /></svg>';
-      share.addEventListener('click', event => event.stopPropagation());
-      button.append(share);
-      button._share = share;
-      // Stack order belongs to the photograph, never to its search rank -- EXCEPT
-      // that a featured tile -- the exact answer, a top keyword hit, or a just
-      // added avatar photograph -- must sit visibly ON TOP of the field around
-      // it, which is the whole point of enlarging it. So featured tiles draw in
-      // a layer above every ordinary tile (which can at most reach 100; 300 is
-      // safely clear of the 1..100 seed range and below the 400 reserved for the
-      // search pill glass in index.css).
-      const baseZ = image.featured ? 300 + Math.floor(seed(image.id) * 40) : 1 + Math.floor(seed(image.id) * 100);
-      button.style.zIndex = baseZ;
+      // Stack order belongs to the photograph, never to its search rank.
+      button.style.zIndex = 1 + Math.floor(seed(image.id) * 100);
       root.append(button);
       const home = initial ? target : edgePosition(image, state.width, state.height, target);
-      // baseZ is kept on the node so liftUnderPointer can restore it verbatim
-      // when the pointer moves on.
-      const node = { image, button, baseZ, lifted: false, ...home, target: home, motion: null, exit: false, phase: seed(image.id) * Math.PI * 2 };
+      const node = { image, button, ...home, target: home, motion: null, exit: false, phase: seed(image.id) * Math.PI * 2 };
       resize(node);
       button.style.transform = `translate3d(${home.x - node.width / 2}px,${home.y - node.height / 2}px,0) scale(${home.scale})`;
       nodes.set(image.id, node);
       node.cancelPlaceholder = placeholders.request(image.blur, url => {
         if (url && nodes.get(image.id) === node && !node.photo) button.style.backgroundImage = `url("${url}")`;
       });
-      button.onclick = event => {
-        /**
-         * The share anchor is a child of this button, so its click reaches here
-         * too. stopPropagation on the anchor is not enough on its own: the tile
-         * drifts under the pointer every frame, so by the time the click lands
-         * the browser may have re-targeted the event at the button itself, and
-         * the photograph opens behind a tab that was supposed to be shared.
-         * Testing the composed path covers both cases.
-         */
-        const path = event.composedPath ? event.composedPath() : [event.target];
-        if (path.includes(share)) return;
-        selection.current(
-          // A product carries its full gallery so the viewer can page through it,
-          // exactly as the old product strip did. Interiors have no `images` and
-          // are unchanged.
-          //
-          // Read `node.image` at click time rather than closing over `image`: a
-          // node is created once and then reused across searches, and the record
-          // it was created from may have been an ambient tile from
-          // collection.json -- id/url/ar/blur only. Closing over the original
-          // meant a photograph that later matched the query kept opening with
-          // none of its title, categories or source, because the richer search
-          // result was never written back to the node. layout() assigns
-          // node.image on every pass, so the click always sees the current one.
-        { ...node.image, previewURL: node.photo?.currentSrc || node.photo?.src },
+      button.onclick = () => selection.current(
+        // A product carries its full gallery so the viewer can page through it,
+        // exactly as the old product strip did. Interiors have no `images` and
+        // are unchanged.
+        { ...image, previewURL: node.photo?.currentSrc || node.photo?.src },
         button.getBoundingClientRect().toJSON(),
-        );
-      };
+      );
       return node;
     }
 
     function resize(node) {
-      // A featured tile -- the exact answer to the query, or a photograph just
-      // added on vai-avatar -- carries its own scale multiplier. Read from the
-      // record rather than passed down, so a tile that becomes featured keeps
-      // the same identity (and therefore the same place in the layout) it had
-      // as an ordinary tile.
-      const scale = node.image?.featuredScale || 1;
-      const { width, height } = dimensions(node.image, state.width, scale);
+      const { width, height } = dimensions(node.image, state.width);
       if (node.width === width && node.height === height) return;
       node.width = width; node.height = height;
       node.button.style.width = `${width}px`;
@@ -160,19 +73,7 @@ export default function ImageField({ results, onSelect, paused, query = '', prod
         if (node.exit || nodes.get(node.image.id) !== node) { thumbnails.release(photo); return; }
         photo.alt = ''; photo.draggable = false; photo.className = '';
         node.photo = photo;
-        /**
-         * insertBefore rather than append, so the share anchor stays the tile's
-         * last child.
-         *
-         * The tile has no stacking context of its own, and both children are
-         * absolutely positioned -- so with the <img> appended last, it paints
-         * over the anchor and every click on the share button opens the viewer
-         * instead of sharing. z-index cannot fix it either: it is set in a
-         * stylesheet, and re-appending the photo reorders the DOM, so the two
-         * swap paint order on each cached thumbnail. Keeping the anchor last in
-         * the DOM fixes it by construction, for every image, loaded or not.
-         */
-        node.button.insertBefore(photo, node.button._share);
+        node.button.append(photo);
         if (!motion.matches) photo.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 180, easing: 'ease-out' });
         photo.classList.add('loaded');
       }, priority);
@@ -182,55 +83,13 @@ export default function ImageField({ results, onSelect, paused, query = '', prod
       const now = performance.now();
       const active = new Set(state.pool.map(image => image.id));
       const ranks = new Map(state.results.map((image, rank) => [image.id, rank]));
-      // Read the controls once per pass: every tile in a pass must agree on
-      // where the plane sits, or the collection visibly tears apart mid-drag.
-      const { offsetX: shiftX, offsetY: shiftY } = controls.current;
-      // fieldPosition() whenever a query is active OR anything is featured, and
-      // scatter() only for a plain, featureless browse.
-      //
-      // The reason is that scatter() lays tiles out on a jittered grid with no
-      // notion of the search pill, so index 0 lands in a corner and a featured
-      // tile can end up underneath the pill with the pill's own glass sitting on
-      // top of it. fieldPosition() spirals out from the centre and already has
-      // the clearance term that pushes tiles around the pill. Using it for the
-      // idle state too is what puts the ten newest photographs in a readable
-      // arc below the search box instead of wherever the grid happens to put
-      // them.
-      const ordered = state.results.length || state.pool.some(image => image.featured);
-      const targets = state.pool.map((image, index) => ordered
-        ? fieldPosition(image, index, state.pool.length, state.width, state.height, shiftX, shiftY)
-        : scatter(image, index, state.pool.length, state.width, state.height, shiftX, shiftY));
-      // The query and the product hits go in so relevance.js can decide which
-      // tiles are EXACT matches (see exactMatches) and get the neon outline.
-      const appearance = relevanceAppearance(state.results, controls.current.query, controls.current.products);
+      const targets = state.pool.map((image, index) => state.results.length
+        ? fieldPosition(image, index, state.pool.length, state.width, state.height)
+        : scatter(image, index, state.pool.length, state.width, state.height));
+      const appearance = relevanceAppearance(state.results);
       state.pool.forEach((image, index) => {
         const target = targets[index];
         const node = nodes.get(image.id) || create(image, target, initial);
-        // Keep the node's record current, not just its position: `image` here is
-        // whatever the pool now holds, which for a photograph that has become a
-        // search result is the full row (title, categories, source) rather than
-        // the metadata-free collection entry the node was first built from.
-        // Without this, opening a matched photograph shows nothing about it.
-        node.image = image;
-        /**
-         * Point the tile's share link at the current record, and hide it when
-         * there is nothing to share. Updated alongside node.image for the same
-         * reason: the node may have been built from a record that carried no
-         * shareable identity, and a photograph's address is derived from it.
-         */
-        const share = node.button._share;
-        if (share) {
-          const href = shareURL(image);
-          if (href) {
-            share.href = href;
-            share.dataset.shareFor = String(image.id);
-            share.removeAttribute('hidden');
-          } else {
-            share.removeAttribute('href');
-            share.removeAttribute('data-share-for');
-            share.hidden = true;
-          }
-        }
         node.target = target; node.exit = false;
         node.button.removeAttribute('aria-hidden');
         const rank = ranks.get(image.id);
@@ -240,22 +99,10 @@ export default function ImageField({ results, onSelect, paused, query = '', prod
         node.load?.prioritize(rank ?? 200 + index);
         node.button.setAttribute('aria-label', rank == null ? 'Phóng to ảnh' : `Phóng to kết quả ${rank + 1}`);
         node.button.setAttribute('aria-haspopup', 'dialog');
-        // `exact` comes back on the same appearance object as the fade, so the
-        // outline and the dimming can never disagree about which tile is the
-        // answer. classList.toggle (not add) because a tile keeps its node
-        // across searches and would otherwise keep a stale outline.
-        const { opacity, blur, exact } = appearance(image.id);
+        const { opacity, blur } = appearance(image.id);
         node.button.style.setProperty('--relevance-opacity', opacity);
         node.button.style.setProperty('--relevance-blur', `${blur}px`);
-        node.button.classList.toggle('exact', !!exact);
-        // An exact hit is never allowed to fade with the tail, whatever its
-        // cosine: if the outline says "this is the one", it has to be readable.
-        if (exact) {
-          node.button.style.setProperty('--relevance-opacity', 1);
-          node.button.style.setProperty('--relevance-blur', '0px');
-        }
         node.button.dataset.rank = rank == null ? '' : rank + 1;
-        node.button.dataset.exact = exact ? 'true' : '';
         node.button.tabIndex = state.results.length ? (rank != null && rank < 12 ? 0 : -1) : (index < 12 ? 0 : -1);
         transition(node, target, now, initial || motion.matches);
       });
@@ -265,10 +112,6 @@ export default function ImageField({ results, onSelect, paused, query = '', prod
         node.load?.cancel(); node.load = null;
         node.button.setAttribute('aria-hidden', 'true');
         node.button.dataset.rank = '';
-        // Clear the outline on the way out: a tile drifting off-screen must not
-        // keep advertising itself as the answer to the previous query.
-        node.button.dataset.exact = '';
-        node.button.classList.remove('exact');
         node.button.tabIndex = -1;
         transition(node, edgePosition(node.image, state.width, state.height, node), now, motion.matches);
       }
@@ -340,47 +183,8 @@ export default function ImageField({ results, onSelect, paused, query = '', prod
       if (event.pointerType === 'touch') return;
       state.pointer.x = (event.clientX / state.width - 0.5) * 2;
       state.pointer.y = (event.clientY / state.height - 0.5) * 2;
-      liftUnderPointer(event.target);
-    };
-    /**
-     * Raise the photograph under the pointer above its neighbours.
-     *
-     * The field overlaps tiles deliberately and each tile's z-index is a stable
-     * seed of its id, so a tile can end up permanently buried under whichever
-     * neighbour hashed higher. CSS :hover cannot rescue it, because a buried
-     * element never matches :hover -- which is the chicken-and-egg the share
-     * button was stuck in. Measured on the idle field: of 79 in-viewport share
-     * buttons, not one was the topmost element at its own centre; 13 were
-     * covered by another tile's photograph and 8 by another tile outright.
-     *
-     * Lifting whichever tile the pointer is over makes the next hover land on
-     * the tile the user is aiming at, and then its own :hover reveals the
-     * share button normally. The seeded resting order is restored when the
-     * pointer leaves, so the composition stays deterministic across reloads.
-     */
-    function liftUnderPointer(target) {
-      const tile = target?.closest?.('.image-tile');
-      for (const node of nodes.values()) {
-        if (node.lifted && node.button !== tile) restoreZ(node);
-      }
-      if (!tile) return;
-      const node = [...nodes.values()].find(n => n.button === tile);
-      if (node && !node.lifted) {
-        node.lifted = true;
-        tile.style.zIndex = LIFTED_Z;
-      }
-    }
-    function restoreZ(node) {
-      node.lifted = false;
-      node.button.style.zIndex = node.baseZ;
-    }
-    const leave = () => {
-      state.pointer.x = state.pointer.y = 0;
-      // Restore the seeded resting order. Leaving the field is the only
-      // unambiguous signal that the user is done arranging it, and doing it
-      // here is what keeps the composition identical on every reload.
-      for (const node of nodes.values()) if (node.lifted) restoreZ(node);
     };
+    const leave = () => { state.pointer.x = state.pointer.y = 0; };
     root.addEventListener('pointermove', move); root.addEventListener('pointerleave', leave);
     frame = requestAnimationFrame(animate);
     engine.current = { state, update };

src/PhotoViewer.jsx

@@ -1,12 +1,11 @@
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { imageURL, shareURL } from './assets.js';
-import { detailOf, GENERIC_HEADING } from './detail.js';
 
 /**
  * Full-screen viewer shared by the interior field and the product catalogue.
  *
- * A `photo` is either an interior record ({ id, url, ar, blur, source }) or
- * a product photo ({ sku, src, images, name, price, specs }). Interior records
+ * A `photo` is either an interior record ({ id, url, ar, blur, source }) or a
+ * product photo ({ sku, src, images, name, price, specs }). Interior records
  * carry no `images` field, but keying the gallery off product identity anyway
  * keeps the two paths unambiguous rather than merely incidental.
  */
@@ -16,7 +15,7 @@ function resolveSrc(photo, width) {
   return imageURL(photo, width);
 }
 
-export default function PhotoViewer({ photo, timeList, onClose }) {
+export default function PhotoViewer({ photo, onClose }) {
   const dialog = useRef(null);
   const frame = useRef(null);
   const closing = useRef(false);
@@ -27,21 +26,9 @@ export default function PhotoViewer({ photo, timeList, onClose }) {
   // Measured from the decoded image, so a product photo is not letterboxed
   // against an assumed ratio on first paint.
   const [measured, setMeasured] = useState(0);
-  const [position, setPosition] = useState(0);     // product gallery index
-  const [timePosition, setTimePosition] = useState(0); // time-ordered navigation index
+  const [position, setPosition] = useState(0);
 
-  /**
-   * A catalogue product, or a photograph?
-   *
-   * Not `Boolean(photo.sku)`: a photograph published on vai-avatar carries a
-   * namespaced `sku` too (`avatarimg:<image_id>`), which is what lets it share
-   * this viewer and the field with a product. Keying on it announced every such
-   * photograph as "Sản phẩm (avatarimg:...)" and rendered the product price and
-   * spec caption underneath it. `avatarImageId` is present only on records read
-   * from the vai-avatar interior index -- and detail.js derives the flag from the
-   * same field, so the two cannot disagree.
-   */
-  const isProduct = Boolean(photo.sku) && !photo.avatarImageId;
+  const isProduct = Boolean(photo.sku);
 
   // Only a product has a gallery worth paging through.
   const gallery = useMemo(
@@ -49,21 +36,6 @@ export default function PhotoViewer({ photo, timeList, onClose }) {
     [isProduct, photo.images],
   );
 
-  /**
-   * Time-ordered list of interiors (newest → oldest) handed down from the
-   * field. When active, the arrows step through photographs by `addedAt`, and
-   * the counter shows both the slot and the date of the current photo.
-   *
-   * If absent, the viewer falls back to the existing behaviour: a single
-   * photograph or a product's own gallery.
-   */
-  const steppableList = useMemo(() => {
-    if (timeList && Array.isArray(timeList) && timeList.length > 1) {
-      return timeList;
-    }
-    return gallery;
-  }, [timeList, gallery]);
-
   /**
    * The frame actually on screen.
    *
@@ -72,16 +44,10 @@ export default function PhotoViewer({ photo, timeList, onClose }) {
    * the counter while the photograph stayed frozen.
    */
   const src = useMemo(
-    () => {
-      const list = steppableList;
-      const idx = timeList && timeList.length > 1 ? timePosition : position;
-      return (list && list[idx]) ? resolveSrc(list[idx], 2400) : resolveSrc(photo, 2400);
-    },
-    [steppableList, timePosition, position, photo],
+    () => (gallery ? (gallery[position] ?? gallery[0]) : resolveSrc(photo, 2400)),
+    [gallery, position, photo],
   );
-  const preview = steppableList
-    ? resolveSrc(steppableList[timeList && timeList.length > 1 ? timePosition : position], 640)
-    : (photo.previewURL || resolveSrc(photo, 640));
+  const preview = gallery ? src : (photo.previewURL || resolveSrc(photo, 640));
   const ar = photo.ar || measured || 4 / 3;
 
   const sourceTransform = useCallback(() => {
@@ -97,7 +63,7 @@ export default function PhotoViewer({ photo, timeList, onClose }) {
   useEffect(() => { setLoaded(false); setMeasured(0); setZoomed(false); }, [src]);
 
   // Opening a different photo starts that product's gallery from the beginning.
-  useEffect(() => { setPosition(0); setTimePosition(0); }, [photo]);
+  useEffect(() => { setPosition(0); }, [photo]);
 
   useEffect(() => {
     const previous = document.activeElement;
@@ -143,155 +109,71 @@ export default function PhotoViewer({ photo, timeList, onClose }) {
   }, [onClose, sourceTransform]);
 
   /**
-   * Step through the steppable list (product gallery OR time-ordered interiors),
-   * clamped at the ends.
+   * Step through a product gallery, clamped to the ends.
    *
    * The clamp lives inside the updater so rapid arrow presses cannot drift the
    * index past the end and land on an empty frame.
    */
   const step = useCallback(delta => {
-    const total = steppableList?.length ?? 0;
+    const total = gallery?.length ?? 0;
     if (total < 2) return;
-    const setTime = timeList && timeList.length > 1 ? setTimePosition : setPosition;
-    setTime(current => {
+    setPosition(current => {
       const next = current + delta;
       return next < 0 || next >= total ? current : next;
     });
-  }, [steppableList, timeList]);
+  }, [gallery]);
 
   useEffect(() => {
-    if (!steppableList || steppableList.length < 2) return;
+    if (!gallery || gallery.length < 2) return;
     const onKey = event => {
       if (event.key === 'ArrowRight') { event.preventDefault(); step(1); }
       else if (event.key === 'ArrowLeft') { event.preventDefault(); step(-1); }
     };
     window.addEventListener('keydown', onKey);
     return () => window.removeEventListener('keydown', onKey);
-  }, [steppableList, step]);
+  }, [gallery, step]);
 
   // Escape stays with the dialog's own cancel event; only arrows are added here.
   const alt = isProduct
     ? `${photo.name || 'Sản phẩm'}${photo.sku ? ` (${photo.sku})` : ''}`
     : 'Ảnh nội thất đã phóng to';
 
-  /**
-   * A plain label, never a link.
-   *
-   * This used to render "View source ↗" pointed at photo.source. Nothing in the
-   * viewer names or links to the scraped origin any more -- not the button, not
-   * a "Nguồn" row in the fact table. The share link in the toolbar is the single
-   * way out of the app, and the photograph's address is the only URL it needs.
-   */
-  const caption = <span className="photo-origin">
-    {isProduct ? (photo.name || photo.sku) : ((photo.categories || [])[0] || photo.title || 'Interior design')}
-  </span>;
+  const caption = photo.source
+    ? <a href={photo.source} target="_blank" rel="noreferrer">View source ↗</a>
+    : <span className="photo-origin">
+      {isProduct ? (photo.name || photo.sku) : ((photo.categories || [])[0] || photo.title || 'Interior design')}
+    </span>;
 
   // Paging controls appear only when there is somewhere to go.
-  const stepping = Boolean(steppableList && steppableList.length > 1);
-  const usingTimeList = Boolean(timeList && timeList.length > 1);
+  const stepping = Boolean(gallery && gallery.length > 1);
 
   /**
-   * What the share sheet shows above the URL.
+   * The share page for this photo, or null when there is nothing to share.
    *
-   * The record's own name, falling back to the heading the panel uses so the
-   * sheet is never blank. Nothing scraped: a share card titled after daibau.vn
-   * or noithatphuphat.com would carry somebody else's site name into the
-   * reader's own messages, which is the same reason the panel stopped naming
-   * them.
+   * It is keyed off `photo`, not `src`, so paging through a product's gallery
+   * keeps one stable link to the product rather than a different link per
+   * image -- sharing the 3rd photo of an appliance should still point at the
+   * appliance.
    */
-  const shareTitle = (isProduct
-    ? [photo.name, photo.n, photo.sku].find(value => typeof value === 'string' && value.trim())
-    : [photo.title, detail.heading].find(value => typeof value === 'string' && value.trim())
-  ) || 'Ảnh nội thất V.AI STUDIO';
-
   const share = shareURL(photo);
   const specs = isProduct && Array.isArray(photo.specs) ? photo.specs : null;
 
-  const [shareLabel, setShareLabel] = useState('');
-  const onShare = useCallback(async ({ url, title, label }) => {
-    const announce = text => {
-      label(text);
-      window.clearTimeout(announce.timer);
-      announce.timer = window.setTimeout(() => label(''), 1800);
-    };
-    if (navigator.share) {
-      try {
-        await navigator.share({ title, url });
-        announce('Đã chia sẻ');
-      } catch {
-        // AbortError here means the sheet was swiped away. Nothing to report.
-      }
-      return;
-    }
-    if (navigator.clipboard?.writeText) {
-      try {
-        await navigator.clipboard.writeText(url);
-        announce('Đã sao chép liên kết');
-        return;
-      } catch { /* fall through to the legacy path */ }
-    }
-    // Last resort, for a non-secure context or a blocked clipboard: a temporary
-    // input selected and copied synchronously, which still works where the async
-    // API above does not.
-    const field = document.createElement('input');
-    field.value = url;
-    field.setAttribute('aria-hidden', 'true');
-    document.body.append(field);
-    field.select();
-    const copied = document.execCommand?.('copy');
-    field.remove();
-    announce(copied ? 'Đã sao chép liên kết' : 'Không chia sẻ được');
-  }, []);
-
-  const detail = useMemo(() => detailOf(photo), [photo]);
-  const generic = detail.description.startsWith('Ảnh trong bộ sưu tập');
-  const hasDetail = Boolean(
-    detail.room
-    || detail.tags.length > 1
-    || (detail.heading && detail.heading !== GENERIC_HEADING)
-    || (detail.description && !generic),
-  );
-
-  const nowIdx = timeList && timeList.length > 1 ? timePosition : position;
-  const currentItem = steppableList ? steppableList[nowIdx] : null;
-  const dateLabel = (currentItem?.addedAt || photo.createdAt || '').slice(0, 10);
-
   return <dialog ref={dialog} className="photo-viewer" aria-label="Ảnh toàn màn hình"
     onCancel={event => { event.preventDefault(); close(); }}
     onClick={event => { if (event.target === dialog.current) close(); }}>
     <div className="photo-toolbar">
-      {share ? <>
-        {/*
-          Two different jobs, two different controls.
-
-          This button hands the photograph to whatever the reader already uses --
-          Messages, Zalo, Telegram, the system sheet on iOS and Android. That is
-          the gesture the icon already implied, and the old <a target="_blank">
-          could not offer it: it opened a browser tab, not the reader's own apps.
-          navigator.share is where the platform's share sheet lives; where it is
-          absent or the user dismisses it, the clipboard takes over so there is
-          always something to paste.
-
-          A dismissal is not an error -- navigator.share rejects with AbortError
-          every time the sheet is swiped away -- so a refusal is swallowed
-          silently and nothing is announced.
-        */}
-        <button type="button" className="photo-share" onClick={() => onShare({ url: share, title: shareTitle, label: setShareLabel })}>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true"><path d="M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5" /></svg>
-          <span>{shareLabel || (isProduct ? 'Chia sẻ sản phẩm' : 'Chia sẻ ảnh')}</span>
-        </button>
-        <a className="photo-open" href={share} target="_blank" rel="noopener noreferrer"
-          title={isProduct ? 'Xem sản phẩm trên V.AI STUDIO' : 'Xem ảnh nội thất trên V.AI STUDIO'}>
-          <span>Xem trang</span>
-        </a>
-      </> : null}
+      {share ? <a className="photo-share" href={share} target="_blank" rel="noopener noreferrer"
+        title={isProduct ? 'Xem sản phẩm trên V.AI STUDIO' : 'Xem ảnh nội thất trên V.AI STUDIO'}>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true"><path d="M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5" /></svg>
+        <span>Xem thêm</span>
+      </a> : null}
       {caption}
       <button type="button" aria-label="Đóng ảnh" autoFocus onClick={close}>
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true"><path d="m6 6 12 12M6 18 18 6" /></svg>
       </button>
     </div>
     <div className={`photo-viewport ${zoomed ? 'is-zoomed' : ''}`} onClick={event => { if (event.target === event.currentTarget) close(); }}>
-      {stepping && nowIdx > 0 && <button type="button" className="photo-step is-prev" aria-label="Ảnh trước"
+      {stepping && position > 0 && <button type="button" className="photo-step is-prev" aria-label="Ảnh trước"
         onClick={event => { event.stopPropagation(); step(-1); }}>
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true"><path d="m14 6-6 6 6 6" /></svg>
       </button>}
@@ -311,65 +193,19 @@ export default function PhotoViewer({ photo, timeList, onClose }) {
             }
           }} />
       </button>
-      {stepping && nowIdx < steppableList.length - 1 && <button type="button" className="photo-step is-next" aria-label="Ảnh tiếp theo"
+      {stepping && position < gallery.length - 1 && <button type="button" className="photo-step is-next" aria-label="Ảnh tiếp theo"
         onClick={event => { event.stopPropagation(); step(1); }}>
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true"><path d="m10 6 6 6-6 6" /></svg>
       </button>}
     </div>
     {isProduct && (photo.price || (specs && specs.length)) ? <div className="photo-caption">
       {photo.price && <p className="photo-caption-price">{photo.price}</p>}
-      {specs && specs.length > 0 ? <dl className="photo-caption-specs">
+      {specs && specs.length > 0 && <dl className="photo-caption-specs">
         {specs.slice(0, 6).map(([key, value], index) => (
           <div key={index}><dt>{key}</dt><dd>{value}</dd></div>
         ))}
-      </dl> : null}
+      </dl>}
     </div> : null}
-    {/*
-      Detail panel, for BOTH kinds of record.
-
-      Collapsible rather than always-open because the viewer is a photo first:
-      on a phone there is no room for both. Closed by default keeps the first
-      impression the photograph, while the summary line still shows the title
-      and the price.
-
-      <details>/<summary> rather than a button plus state: keyboard- and
-      screen-reader-correct for free, and it survives a re-render mid-read.
-    */}
-    {hasDetail ? (
-      <details className="photo-detail">
-        <summary className="photo-detail-summary">
-          <span className="photo-detail-title">{detail.heading}</span>
-          {photo.price ? <span className="photo-detail-price">{photo.price}</span> : null}
-          <span className="photo-detail-toggle" aria-hidden="true">Chi tiết</span>
-        </summary>
-        <div className="photo-detail-body">
-          {detail.description ? <p className="photo-detail-desc">{detail.description}</p> : null}
-          {detail.tags.length > 0 ? <ul className="photo-detail-tags">
-            {detail.tags.map(tag => <li key={tag}>{tag}</li>)}
-          </ul> : null}
-          {detail.facts.length > 0 ? <dl className="photo-detail-facts">
-            {detail.facts.map(([key, value], index) => (
-              <div key={index}><dt>{key}</dt><dd>{value}</dd></div>
-            ))}
-          </dl> : null}
-          {/*
-            No "Xem bài gốc" link here, and no "Nguồn" row either. The panel
-            answers "what am I looking at", and the share link in the toolbar
-            above already carries the photograph's public address. Naming the
-            scraped origin -- daibau.vn, noithatphuphat.com -- in the table put
-            somebody else's domain in the middle of our own interface, on 1,113
-            of the 1,222 photographs, for no gain to a reader.
-          */}
-        </div>
-      </details>
-    ) : null}
-    {stepping ? (
-      <p className="photo-counter" role="status" aria-live="polite"
-        title={usingTimeList ? `Duyệt theo thời gian: ${dateLabel}` : ''}>
-        {usingTimeList && dateLabel
-          ? <span className="photo-date" title={currentItem.addedAt}>{dateLabel}</span>
-          : `${nowIdx + 1} / ${steppableList.length}`}
-      </p>
-    ) : null}
+    {stepping ? <p className="photo-counter" role="status" aria-live="polite">{position + 1} / {gallery.length}</p> : null}
   </dialog>;
-}
+}

src/assets.js

@@ -1,18 +1,14 @@
-/**
- * Image database: 1,222 Vietnamese interior-design photographs, encoded offline with
- * CLIP-ViT-B-32 and stored as raw little-endian float32 in 512-d rows.
- */
+
+// Image database: 1,222 Vietnamese interior-design photographs, encoded offline with
+// CLIP-ViT-B-32 and stored as raw little-endian float32 in 512-d rows.
 export const DATASET = 'https://huggingface.co/datasets/bep40/interior-image-field-assets/resolve/main/';
 
-/**
- * Text tower. `sentence-transformers/clip-ViT-B-32-multilingual-v1` maps 50+
- * languages (including Vietnamese) into the same 512-d space as CLIP-ViT-B-32,
- * so a Vietnamese query retrieves the matching interior photograph. The stock
- * repository ships a SentenceTransformer wrapper whose ONNX export stops at
- * 768-d `last_hidden_state`, so this fork adds a `text_model.onnx` that
- * includes mean pooling and the 768->512 projection, letting Transformers.js
- * run it under the usual CLIP file naming.
- */
+// Text tower. `sentence-transformers/clip-ViT-B-32-multilingual-v1` maps 50+ languages
+// (including Vietnamese) into the same 512-d space as CLIP-ViT-B-32, so a Vietnamese
+// query retrieves the matching interior photograph. The stock repository ships a
+// SentenceTransformer wrapper whose ONNX export stops at 768-d `last_hidden_state`,
+// so this fork adds a `text_model.onnx` that includes mean pooling and the 768->512
+// projection, letting Transformers.js run it under the usual CLIP file naming.
 export const TEXT_MODEL = 'bep40/clip-vit-b32-multilingual-vi-text';
 
 /**
@@ -21,20 +17,25 @@ export const TEXT_MODEL = 'bep40/clip-vit-b32-multilingual-vi-text';
  *
  * The repo uploaded a broken export first (commit 68dc949, 136,951,792 bytes).
  * Its graph declares `masked` as [batch_size, sequence_length, 768] while an
- * attention mask only ever has 1 feature, so ONNX shape inference aborts. A
- * later commit (9e1d535, 136,915,522 bytes) re-exported the graph with no
- * `value_info` at all, which loads fine -- that is the revision pinned here.
+ * attention mask only ever has 1 feature, so ONNX shape inference aborts with
+ *
+ *   [ShapeInferenceError] Can't merge shape info ... Inferred=1 Declared=768
  *
- * Pinning matters beyond reproducibility: transformers.js requests the
- * *unversioned* /resolve/main/ URL unless `revision` is given, and caches under
- * that same URL. Naming an explicit commit changes the cache key, so visitors
- * who cached the broken graph fetch the known-good file instead.
+ * and the app dies at "Không tải được bộ tìm kiếm". A later commit (9e1d535,
+ * 136,915,522 bytes) re-exported the graph with no `value_info` at all, which
+ * loads fine -- that is the revision pinned here.
+ *
+ * Pinning matters beyond reproducibility. transformers.js requests the
+ * *unversioned* `/resolve/main/...` URL unless `revision` is given, and caches
+ * under that same URL. Anyone who loaded the app while `main` still pointed at
+ * the broken graph keeps the bad bytes indefinitely: reload and "Thử lại" both
+ * replay from that cache. Naming an explicit commit changes the cache key, so
+ * those visitors fetch the known-good file instead of staying stuck.
  */
 export const TEXT_MODEL_REVISION = '9e1d53553228b17abfe6986fbe92e22bd6bd6bad';
 export const TOKENIZER = 'sentence-transformers/clip-ViT-B-32-multilingual-v1';
 export const DIMENSIONS = 512;
 
-/** The URL of an interior photograph in the dataset repo, at a CDN width. */
 export function imageURL(image, width = 360) {
   return `${DATASET}images/${image.url}?w=${width}&q=80`;
 }
@@ -110,97 +111,13 @@ export async function cachedFile(url, onProgress) {
  */
 const VAI_STUDIO = 'https://bep40-vai-avatar.hf.space';
 
-/**
- * The prefix avatar-interiors.js puts on a vai-avatar photograph's `sku`.
- *
- * Namespacing it there 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, and it
- * is what lets a photograph travel the same code path as a catalogue product
- * (same viewer, same panel, same neon, same share anchor).
- *
- * It is NOT a catalogue identity, and /share/p/ resolves against the product
- * catalogue -- so a photograph sent through that route answers "Not Found".
- * Nothing about that is fixable on vai-avatar's side: no SKU of that shape
- * exists there to find. It has to be routed as the interior it is.
- */
-const AVATAR_SKU_PREFIX = 'avatarimg:';
-
-/**
- * Whether this record is an interior photograph published on vai-avatar.
- *
- * Either field is conclusive on its own. `avatarImageId` is set on every such
- * photograph; the namespaced `sku` covers a record that has lost it.
- */
-function isAvatarInterior(photo) {
-  return Boolean(photo.avatarImageId) || String(photo.sku ?? '').startsWith(AVATAR_SKU_PREFIX);
-}
-
-/**
- * The interior id behind a record, or '' when it has none.
- *
- * Two sources, in order, and the second is a fallback rather than an
- * alternative: `avatarImageId` is the field avatar-interiors.js sets, present on
- * every vai-avatar photograph. But a record can reach shareURL() having lost it
- * -- merge.js rewrites `id` into a namespaced tile key, and any path that
- * rebuilds a record from its `sku` alone would carry the prefix but not the
- * original field. That is exactly the shape that produced
- * /share/p/avatarimg%3Ab68dc779370dc70e, which is a "Not Found" page for every
- * single photograph in the vai-avatar interior set.
- *
- * So the namespaced sku is unwrapped as well, and a prefix that is present but
- * empty (`avatarimg:` with nothing after it) yields ''.
- */
-function interiorIdOf(photo) {
-  const direct = String(photo.avatarImageId ?? '').trim();
-  if (direct) return direct;
-  const sku = String(photo.sku ?? '').trim();
-  return sku.startsWith(AVATAR_SKU_PREFIX)
-    ? sku.slice(AVATAR_SKU_PREFIX.length).trim()
-    : '';
-}
-
 export function shareURL(photo) {
   if (!photo || typeof photo !== 'object') return null;
-  /**
-   * A photograph published on vai-avatar carries BOTH `avatarImageId` and a
-   * namespaced `sku` of `avatarimg:<image_id>`.
-   *
-   * `sku` exists so the record travels the same path as a catalogue product --
-   * same viewer, same detail panel, same neon, same share anchor -- and it has
-   * to stay for that. But it is not an identity the product catalogue knows,
-   * and it must not decide the URL: `/share/p/` resolves against the product
-   * catalogue, so every such photograph sent through it answered "Not Found".
-   * The whole vai-avatar interior set was affected, on the tile's share button
-   * and on the viewer's "Xem trang" alike.
-   *
-   * The interior identity is therefore resolved first and unconditionally, and
-   * /share/i/ gets the raw id -- no prefix to strip, and nothing to keep in
-   * step with whatever namespace merge.js uses for its tile ids.
-   */
-  const interiorId = interiorIdOf(photo);
-  if (interiorId) return `${VAI_STUDIO}/share/i/${encodeURIComponent(interiorId)}`;
-  /**
-   * A record that still says it is an interior but carries no usable id gets NO
-   * share URL, rather than falling through to the product branch below.
-   *
-   * That fall-through is a trap worth naming, because it is exactly how the bug
-   * comes back. `avatarimg:` with nothing after it has no id to share, and every
-   * remaining branch here would still produce a URL for it: the product branch
-   * would encode the prefix itself into `/share/p/avatarimg%3A`, which is the
-   * dead route all over again, and the id branch would send it to `/share/i/`
-   * with an empty segment, which 404s in its own right. Returning null lets the
-   * caller omit the button instead, which is the only outcome that is true.
-   */
-  if (isAvatarInterior(photo)) return null;
-  if (photo.sku || photo.slug) {
-    // slug first, then sku, then mod. A shared URL is a permanent, public,
-    // indexable address and the one thing about a product a reader can see:
-    // `MH800TC` says nothing about what is linked, while
-    // `mh800tc-malloca-may-hut-mui-gan-tu-am-tu-80cm` reads as the product's name
-    // to a person and to a crawler. The slug is already the canonical key this
-    // Space's catalogue uses, and vai-avatar's /share/p/ matches on it first, so
-    // this changes how the link reads, not whether it resolves.
-    const id = String(photo.slug || photo.sku || photo.mod || '').trim();
+  if (photo.sku) {
+    // The sku is the identity vai-avatar writes edits under, so it is always
+    // present for a product; `mod` is the fallback for the handful of rows that
+    // carry only a model code.
+    const id = String(photo.sku || photo.mod || '').trim();
     return id ? `${VAI_STUDIO}/share/p/${encodeURIComponent(id)}` : null;
   }
   const id = String(photo.id ?? '').trim();

src/avatar-interiors.js

@@ -1,224 +0,0 @@
-/**
- * Interior photographs published on vai-avatar, read live.
- * =========================================================================
- *
- * This Space used to know about exactly one collection of interiors: the 1,222
- * photographs baked into bep40/interior-image-field-assets as a frozen CLIP
- * matrix. Anything added on vai-avatar -- an AI image, a photo a customer sent
- * by Zalo, an edit of either -- was invisible here until somebody re-ran a
- * 1,222-image embed, which nobody was going to do.
- *
- * vai-avatar writes its interiors to a dataset this file reads directly:
- *
- *   bep40/vai-avatar2-interior  index.json  (1,134 rows)
- *
- * `index.json` is the one to use, not `metadata.json`, because it carries
- * `created_at`. That single field is what makes "newest" answerable: 153 of the
- * rows have one, spanning 2026-09-20 to 2026-10-05, and the newest is the image
- * generated minutes before this file was written. `metadata.json` has 1,752
- * rows but no timestamps at all, so it cannot order anything.
- *
- * ── Why the dataset and not the API ──
- * bep40-vai-avatar2-interior-api serves the same records and serves images, but
- * the dataset is the canonical write target: the Space writes there, the Hub
- * versions it, and a read needs no second Space to be awake. Both were checked
- * to return `access-control-allow-origin` echoing the caller, which is what
- * lets a tile load cross-origin from this Space at all -- without it every tile
- * would silently fall back to its BlurHash and the failure would look like a
- * layout bug rather than a network one.
- */
-
-// Semantic synonym expansion ("nhà phố" -> nhà ống, "biệt thự" -> villa),
-// so a caption spelled one way answers a query typed another way.
-import { expandQueryTerms } from './semantic-terms.js';
-
-/** The dataset vai-avatar's interior index is committed to. */
-export const AVATAR_INTERIOR_DATASET = 'https://huggingface.co/datasets/bep40/vai-avatar2-interior/resolve/main/';
-
-/**
- * Image host, preferred over the dataset path because it is the URL vai-avatar's
- * own share pages use, so the same photograph resolves the same way everywhere.
- * The dataset copy under images/ is the versioned fallback.
- */
-export const AVATAR_INTERIOR_API = 'https://bep40-vai-avatar2-interior-api.hf.space';
-
-/** How many recent additions are shown at once. */
-export const RECENT_LIMIT = 60;
-
-/**
- * How many of the newest photographs carry the neon ring.
- *
- * Separate from RECENT_LIMIT on purpose. The brief asks for the newest photos to
- * be highlighted, and it also asks for more photographs to be visible on the
- * page -- and those pull in opposite directions if one list drives both. Twenty-
- * four glowing rings on a dense field is not emphasis, it is decoration: the
- * eye stops being able to tell which one matters.
- *
- * So the newest RECENT_LIMIT photographs are shown, and only the newest
- * FEATURED_LIMIT of them ring. Everything else renders as an ordinary tile with
- * no ring, which is what makes the ten that do ring legible.
- */
-export const FEATURED_LIMIT = 10;
-
-/**
- * Rows to walk, newest first.
- *
- * Fixed rather than time-windowed on purpose. A window ("anything from the last
- * 7 days") silently empties itself when nobody adds anything for a week, and the
- * feature would go quiet with nothing failing. Fixed-N plus an explicit
- * created_at sort means the panel always shows the same NUMBER of newest images
- * and "newest" is always meaningful.
- *
- * 200 rather than RECENT_LIMIT because the filter below drops rows without a
- * timestamp and rows whose image cannot be addressed, so the raw slice has to be
- * comfortably larger than the target to still yield RECENT_LIMIT records.
- */
-const RECENT_ROWS = 200;
-
-/**
- * A usable absolute image URL for a record, or '' if none can be built.
- *
- * The id is used rather than `src`: `src` points at third-party CDNs as well as
- * local copies, and one of those URLs failing on a customer's network would put a
- * permanently broken tile in the field with no visible cause.
- */
-function leadImage(record) {
-  const id = String(record?.image_id || '').trim();
-  return id ? `${AVATAR_INTERIOR_API}/image/${encodeURIComponent(id)}.jpg` : '';
-}
-
-/** Fold Vietnamese diacritics so "Bếp đá" and "bep da" compare equal. */
-export function foldText(value) {
-  return String(value ?? '')
-    .normalize('NFD')
-    .replace(/[̀-ͯ]/g, '')
-    .replace(/đ/g, 'd')
-    .replace(/Đ/g, 'D')
-    .toLowerCase();
-}
-
-/**
- * Turn one index.json row into a field record.
- *
- * The shape is deliberately the one merge.js already understands for a product
- * (`sku` present, `images` an array) so a fresh interior photograph travels
- * the same path as a catalogue product: same viewer, same share anchor, same neon.
- * Interiors from the baked dataset have no `sku`, and keeping the two apart
- * would put every new photograph on its own code path for no gain.
- */
-function toRecord(row) {
-  const id = String(row?.image_id || '').trim();
-  if (!id) return null;
-  const image = leadImage(row);
-  if (!image) return null;
-  // Title first, then the article's alt text, then the post title: `desc` is
-  // what a person typed when they added the image, which is the most specific
-  // thing on the row and the most likely to be what someone later types back.
-  const title = String(row.desc || row.alt || (row.post_titles || [])[0] || '').trim();
-  const categories = []
-    .concat(row.categories || [], row.room_hints || [], row.labels || [])
-    .map(value => String(value || '').trim())
-    .filter(Boolean);
-  const keywords = (row.keywords || []).map(value => String(value || '').trim()).filter(Boolean);
-  const w = Number(row.w), h = Number(row.h);
-  const ar = Number.isFinite(w) && Number.isFinite(h) && w > 0 && h > 0 ? w / h : 1;
-  return {
-    // Namespaced so it can never collide with a Malloca SKU or a baked interior
-    // id in merge.js's de-duplication set.
-    sku: `avatarimg:${id}`,
-    avatarImageId: id,
-    title,
-    name: title,
-    description: String(row.desc || '').trim(),
-    categories,
-    keywords,
-    source: String(row.source || '').trim(),
-    link: String((row.post_urls || [])[0] || '').trim(),
-    ar: Math.max(0.5, Math.min(2, ar)),
-    images: [image],
-    src: image,
-    /** ISO string. The sort key, and what "new" means everywhere below. */
-    addedAt: String(row.created_at || '').trim(),
-  };
-}
-
-/**
- * Read the newest interior photographs published on vai-avatar.
- *
- * Returns records sorted newest-first, capped at `limit`. An empty array on any
- * failure -- this is an enhancement on top of a working search, and a Hub
- * hiccup must not take the field down with it.
- */
-export async function loadRecentAvatarInteriors(limit = RECENT_LIMIT) {
-  try {
-    const response = await fetch(`${AVATAR_INTERIOR_DATASET}index.json`, { cache: 'no-cache' });
-    if (!response.ok) return [];
-    const rows = await response.json();
-    if (!Array.isArray(rows)) return [];
-    const dated = rows
-      .filter(row => row && typeof row.created_at === 'string' && row.created_at)
-      .sort((a, b) => (a.created_at < b.created_at ? 1 : a.created_at > b.created_at ? -1 : 0))
-      .slice(0, RECENT_ROWS);
-    const records = [];
-    for (const row of dated) {
-      const record = toRecord(row);
-      if (record) records.push(record);
-    }
-    records.sort((a, b) => (a.addedAt < b.addedAt ? 1 : a.addedAt > b.addedAt ? -1 : 0));
-    return records.slice(0, limit);
-  } catch {
-    // Network failure, CORS, malformed JSON: the field keeps working without it.
-    return [];
-  }
-}
-
-/**
- * Interiors from vai-avatar that match a query.
- *
- * The baked CLIP matrix cannot score these -- it was computed from 1,222 images
- * and holds no vector for anything added since -- so the query is matched
- * against the record's own text instead. That is exact for how a person actually
- * adds an image: they type a caption, and that caption is what somebody later
- * types back when searching for it.
- *
- * A record containing the WHOLE query scores 900, which is the same identity
- * threshold relevance.js uses for the neon outline, so an exact literal match
- * here lights up for the same reason a matched SKU does.
- *
- * The term set is EXPANDED with semantic synonyms (semantic-terms.js) before
- * matching: a caption "Nhà ống mặt tiền" must answer a search for "nhà phố",
- * and "Biệt thự vườn" must answer "biệt thự". Expansion lives in one shared
- * table so the synonym pairs can never drift between the two Spaces that read
- * this dataset.
- *
- * Additive to the CLIP results, never a replacement: returning nothing leaves
- * the field exactly as it was before this feature existed.
- */
-export function searchAvatarInteriors(text, items, limit = RECENT_LIMIT) {
-  const folded = foldText(String(text || '').trim());
-  if (folded.length < 2 || !items?.length) return [];
-  const terms = folded.split(/\s+/).filter(term => term.length > 1);
-  // "nhà phố" -> [nha, pho, ong, biet, thu]: a caption spelled "nhà ống" or
-  // "biệt thự" is the same intent as the query, and lexical-only matching
-  // would never see it. See semantic-terms.js for why the table is narrow.
-  const matchTerms = expandQueryTerms(terms);
-  const scored = [];
-  for (const item of items) {
-    const haystack = foldText([item.title, item.description, ...(item.categories || []), ...(item.keywords || [])].join(' '));
-    let score = 0;
-    if (folded.length >= 3 && haystack.includes(folded)) score += 900;
-    let hits = 0;
-    for (const term of matchTerms) if (haystack.includes(term)) { score += 25; hits++; }
-    if (!hits) continue;
-    // Covering the whole query beats matching one rare word hard.
-    score += hits * 10;
-    // A single accidental 25-point term (e.g. "tu" matching one caption) is
-    // noise: unrelated interiors must not appear at all. Keep only interiors
-    // with a real match — either the whole-phrase 900 identity hit, or enough
-    // term coverage to reach a meaningful 60 points.
-    if (score < 900 && score < 60) continue;
-    scored.push({ ...item, score });
-  }
-  scored.sort((a, b) => b.score - a.score || (a.addedAt < b.addedAt ? 1 : -1));
-  return scored.slice(0, limit);
-}

src/catalogue.js

@@ -237,10 +237,6 @@ export function normalizeProduct(record) {
   if (!identity || !name) return null;
   return {
     sku: identity,
-    // Carried through so the viewer's share link can address the product by its
-    // readable slug. Already the canonical key in products-gallery.json, and
-    // vai-avatar's /share/p/ matches on it first.
-    slug,
     model: text(record.mod, record.model, sku),
     name,
     brand: text(record.brand),
@@ -253,11 +249,6 @@ export function normalizeProduct(record) {
     specs: specsOf(record.specs),
     feats: featuresOf(record),
     addedBy: text(record._addedBy, record._source),
-    // The recency of an add via vai-avatar's "Thêm SP". Preserved so the field
-    // can enlarge recently-added products the same way it enlarges recently
-    // published interiors; a brand-new Grandx/Garis row is as much "new" as the
-    // newest avatar interior is.
-    addedAt: record._added_at || record.addedAt || null,
   };
 }
 
@@ -905,40 +896,6 @@ function isTombstone(record) {
   return flag === true || flag === 1 || flag === 'true' || flag === '1';
 }
 
-/**
- * Image directories on the V.AISTUDIO Space that no longer exist (verified 404
- * on /resolve/main/). A URL under one of these can never render a photograph,
- * so a row whose LEAD image points here would paint a broken tile. The old
- * Eurogold export lived in /eurogold_img/ and /eurogold_tb_img/; the current
- * live sources live at www.eurogold.vn (see the conflict rows below).
- */
-const DEAD_IMAGE_DIRS = [
-  '/eurogold_img/',
-  '/eurogold_tb_img/',
-  '/demax_img/',
-  '/canzy_img/',
-  '/images/',
-];
-
-const DEAD_IMAGE_HOSTS = ['huggingface.co/spaces/bep40/v.aistudio'];
-
-/** True when a URL points into a V.AISTUDIO directory that no longer exists. */
-function isDeadImageUrl(url) {
-  if (typeof url !== 'string' || !url) return false;
-  const lower = url.toLowerCase();
-  if (!DEAD_IMAGE_HOSTS.some(host => lower.includes(host))) return false;
-  return DEAD_IMAGE_DIRS.some(dir => lower.includes(dir));
-}
-
-/** The first renderable URL in a record's gallery, or ''. */
-function leadImageOf(record) {
-  return imagesOf(record)[0] || '';
-}
-
-function leadIsDead(record) {
-  return isDeadImageUrl(leadImageOf(record));
-}
-
 /**
  * Build the product map from both live sources.
  *
@@ -969,37 +926,6 @@ export function buildCatalogue(addedRecords, promos, baseRecords) {
   function upsert(key, patch, supersede) {
     const existing = raw.get(key);
     if (!existing) { raw.set(key, { ...patch }); return; }
-    /**
-     * Prefer the row whose LEAD image can actually render.
-     *
-     * The base catalogue carries two rows for the same Eurogold/SKU in the
-     * conflict cases (one with a live www.eurogold.vn photo, one whose
-     * /eurogold_img/... URL is dead), and the plain merge below lets the LAST
-     * row overwrite the good photograph with a 404. Guarding the merge keeps
-     * the live image: a dead-lead patch only replaces the existing row when
-     * the existing row is dead too, so a good photo can never be clobbered by
-     * a broken one and a logo can never become a product's lead.
-     */
-    const existingDead = leadIsDead(existing);
-    const patchDead = leadIsDead(patch);
-    if (!existingDead && patchDead) {
-      // The patch may still carry a fresh name / price / specs; only its
-      // image fields are refused. Applying the rest of the patch but keeping
-      // the existing (live) gallery is what lets an edit land without
-      // clobbering a photograph. Base rows upsert without a `supersede`
-      // table, so the images are restored explicitly rather than via
-      // EDIT_SUPERSEDES.
-      const merged = { ...existing };
-      if (supersede) {
-        for (const [field, stale] of supersede) {
-          if (patch[field] === undefined) continue;
-          for (const name of stale) delete merged[name];
-        }
-      }
-      const liveImgs = imagesOf(existing);
-      raw.set(key, { ...merged, ...patch, imgs: liveImgs });
-      return;
-    }
     const merged = { ...existing };
     if (supersede) {
       for (const [field, stale] of supersede) {
@@ -1077,57 +1003,9 @@ export function buildCatalogue(addedRecords, promos, baseRecords) {
     const product = normalizeProduct(record);
     if (product) items.set(key, product);
   }
-  recoverDeadLeads(items);
   return items;
 }
 
-/**
- * Recover products whose ONLY photograph is a dead V.AISTUDIO URL.
- *
- * The /eurogold_img/ and /eurogold_tb_img/ exports were deleted from the
- * V.AISTUDIO Space, leaving a residue of products whose lead image 404s and
- * whose live twin (www.eurogold.vn) is missing from the base rows. For most
- * of them the dead filename is itself a SKU that DOES exist with a live
- * image:
- *
- *   EPD4635VX -> EPD4635.jpg  (one product, VX and non-VX variants)
- *   EUM101    -> EUM101L.jpg  (Liên hoàn / Liên hoàn hộp nhôm)
- *   EUC87848EB-> EUC87848GA.jpg (Chậu rửa bát chống xước)
- *   EAS1200G  -> EAS1200.jpg  (Giá mắc quần áo nâng hạ điện, G = gang trắng)
- *   ETT103B   -> ETT01B.jpg   (Thanh treo góc tủ áo)
- *
- * The filename is the identity the V.AISTUDIO admin gave the upload, so
- * mapping through it is a restore, not a guess. Only used when the product
- * actually HAS a dead lead and the target row exists with its own live lead,
- * and only the target's LEAD image is borrowed -- never a gallery, and never
- * a logo.
- */
-const EUROGOLD_DEAD_RECOVERY = {
-  'EPD4635VX': 'EPD4635', 'EUM101': 'EUM101L', 'ETW8080VX': 'ETW8080',
-  'ETW8090VX': 'ETW8090', 'EUC87848EB': 'EUC87848GA', 'EUC88050GA': 'EUC88050GE',
-  'EAS1200G': 'EAS1200', 'EAS1200P': 'EAS1200', 'ETT103B': 'ETT01B', 'ETT103M': 'ETT01B',
-};
-
-function recoverDeadLeads(items) {
-  if (!items) return;
-  for (const [key, product] of items) {
-    const lead = Array.isArray(product.images) ? product.images[0] : '';
-    if (!lead || !isDeadImageUrl(lead)) continue;
-    let targetSku = EUROGOLD_DEAD_RECOVERY[key.toUpperCase()];
-    if (!targetSku) {
-      // Fall back to the dead filename itself: "EPD4635.jpg" names SKU EPD4635.
-      const file = lead.split('/').pop().replace(/\.[a-z0-9]+$/i, '').toUpperCase();
-      if (file && file !== key.toUpperCase()) targetSku = file;
-    }
-    if (!targetSku) continue;
-    const target = items.get(targetSku);
-    if (!target) continue;
-    const targetLead = Array.isArray(target.images) ? target.images[0] : '';
-    if (!targetLead || isDeadImageUrl(targetLead)) continue;
-    product.images = [targetLead, ...product.images.filter(url => !isDeadImageUrl(url))];
-  }
-}
-
 /**
  * Content hash over identity plus the fields the UI renders.
  *

src/detail.js

@@ -1,369 +0,0 @@
-/**
- * What is known about the open photo, beyond the pixels.
- * =====================================================
- *
- * The worker already loads the whole interior index and hands each record
- * through untouched -- `image-embeddings.json` rows carry `title`,
- * `categories` and `source` -- and the catalogue loader already normalises
- * every product into `summary`, `specs` and `feats`. None of it was displayed.
- * The viewer showed a price and a few specs for a product, and for an interior
- * photograph it showed nothing at all: no title, no room, no categories, no
- * link back to the article the image came from.
- *
- * This module turns both record shapes into one presentable summary. It is a
- * port of `detailOf` from the vai-avatar Space's share-seo.ts, so the in-app
- * viewer and the /share/ landing page agree on what a photograph is called and
- * which room it shows. The two cannot import each other -- this is a static
- * Space with no server and vai-avatar is a separate repo -- so the logic is
- * duplicated rather than fetched, and both copies are tested against the real
- * datasets.
- *
- * Pure derivation only: no fetching, no globals, and nothing here runs in
- * the worker. It takes whatever the caller already has.
- */
-
-/**
- * Fold to a comparison key: lower case, no diacritics, no punctuation.
- *
- * `đ` needs its own replacement: it has no canonical decomposition, so NFD
- * alone leaves "Nhà Đông" and "Nha Dong" as different strings.
- */
-export function normKey(value) {
-  return String(value ?? '')
-    .normalize('NFD')
-    .replace(/[̀-ͯ]/g, '')
-    .replace(/đ/g, 'd')
-    .replace(/Đ/g, 'D')
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, ' ')
-    .trim();
-}
-
-/**
- * Strip the scraped HTML the index and catalogue carry.
- *
- * Worth doing twice over: the markup would otherwise be shown verbatim in the
- * panel, and an entity like `…` tokenizes as the junk word "hellip".
- */
-function plain(raw, max = 0) {
-  let text = String(raw ?? '');
-  // The scraper writes Python-style container reprs into some fields, so an
-  // empty description can literally be the two characters "[]".
-  if (!text || text === '[]' || text === '{}') return '';
-  text = text
-    .replace(/<[^>]*>/g, ' ')
-    .replace(/&#\d+;/g, ' ')
-    .replace(/&[a-z]+;/gi, ' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-  return max > 0 && text.length > max ? `${text.slice(0, max - 1).trimEnd()}…` : text;
-}
-
-/**
- * Rooms, as `match key -> display label`.
- *
- * The two halves differ deliberately. Matching folds diacritics away because
- * the scraped categories spell a room inconsistently; the label is the
- * correctly-spelled Vietnamese that belongs in a heading, since deriving it from
- * the key would print "Van Phong" with no accents at all.
- */
-const ROOMS = [
-  ['phong khach', 'Phòng khách'],
-  ['phong ngu', 'Phòng ngủ'],
-  ['phong tam', 'Phòng tắm'],
-  ['phong an', 'Phòng ăn'],
-  ['phong lam viec', 'Phòng làm việc'],
-  ['phong thong', 'Phòng thông'],
-  ['sanh', 'Sảnh'],
-  ['van phong', 'Văn phòng'],
-  ['ban cong', 'Ban công'],
-  ['san thuong', 'Sân thượng'],
-  ['hanh lang', 'Hành lang'],
-  ['cau thang', 'Cầu thang'],
-  ['garage', 'Garage'],
-  ['tang lau', 'Tầng lầu'],
-  ['nha ve sinh', 'Nhà vệ sinh'],
-  ['kho', 'Kho'],
-  ['bep', 'Bếp'],
-  ['baner', 'Banner'],
-  ['tap ket', 'Tấp kết'],
-];
-
-/**
- * Categories that describe the SOURCE ARTICLE, not the room.
- *
- * These are scraped page titles, so the same field mixes "NỘI THẤT CĂN HỘ" with
- * "BÁO GIÁ" and "GIỚI THIỆU". Showing an editorial section as if it were a room
- * is simply wrong, so these are kept out of the headline and shown as topics.
- */
-const EDITORIAL = [
-  'bao gia', 'gioi thieu', 'xay dung', 'sua nha', 'ai anh', 'tin tuc',
-  'kien thuc', 'video', 'hinh anh', 'thiet ke kien truc', 'blog', 'cap nhat',
-  'mua ban', 'lien he', 'tuyen dung',
-];
-
-/**
- * The room a photograph shows, if its categories name one.
- *
- * Matching is on WORD SET, not on the whole string: the categories prepend a
- * topic, so "NỘI THẤT VĂN PHÒNG" never matches "van phong" by prefix or
- * equality. Requiring every word of the room to be present, and scoring by how
- * specific the match is, makes both "phong khach" and "noi that phong khach"
- * resolve while "van phong" still cannot claim a category that only says "phong".
- */
-export function roomOf(categories) {
-  const wanted = ROOMS.map(([key, label]) => ({ label, words: new Set(normKey(key).split(' ')) }));
-  for (const category of categories) {
-    const have = new Set(normKey(category).split(' ').filter(Boolean));
-    if (!have.size) continue;
-    let best = null;
-    let bestScore = 0;
-    for (const room of wanted) {
-      let hits = 0;
-      for (const word of room.words) if (have.has(word)) hits++;
-      if (hits !== room.words.size) continue;
-      // Prefer the most specific room, so "phong khach" beats a bare "phong".
-      if (room.words.size > bestScore) { bestScore = room.words.size; best = room.label; }
-    }
-    if (best) return best;
-  }
-  return '';
-}
-
-/**
- * Removed: hostOf().
- *
- * It existed only to put the scraped origin's hostname in the fact table --
- * "Nguồn: daibau.vn", "Nguồn: malloca.com". Nothing reads that any more, and
- * keeping it would keep `source` and `sourceHost` alive in detailOf's return,
- * which is the part that matters: a field named `source` on a panel object is
- * an invitation for the next person to render it again.
- *
- * The origin URLs are still on the records themselves (image-embeddings.json
- * carries `source`, the catalogue carries `link`) and still go to vai-avatar,
- * where schema.org "license" carries the attribution for crawlers. What is gone
- * is naming them in front of a reader.
- */
-
-/**
- * The heading used when an interior record carries no title and no category.
- *
- * Exported so the viewer can tell "this photo is generically titled" apart from
- * "this photo has a real title", rather than repeating the literal in two files
- * and letting them drift apart.
- */
-export const GENERIC_HEADING = 'Ảnh nội thất';
-
-/**
- * Building and project names, which are a category but not a topic.
- *
- * "VINHOMES GRAND PARK" says which development a photograph belongs to, not
- * what it depicts. Naming it as a subject reads as a non-sequitur ("thuộc chủ
- * đề Vinhomes Grand Park"), so it is dropped from the sentence -- the title
- * almost always mentions the project anyway, and it reads better there.
- */
-const PROJECT = /vinhomes|masteri|elysian|gamuda|global\s*city|the\s*global/i;
-
-/**
- * Describe an interior photograph, in Vietnamese, from what the record has.
- *
- * The dataset carries no description field -- image-embeddings.json has id, url,
- * ar, blur, title, categories, source and nothing else -- so the panel used to
- * fall back to one fixed sentence that named nothing: "Ảnh trong bộ sưu tập thiết
- * kế nội thất Việt Nam của V.AI STUDIO". Every photograph read identically.
- *
- * What it does carry is a title and a category list, and those are enough to
- * say something specific and true about each photo. The sentence leads with the
- * room when the categories name one, names up to two topics, and otherwise --
- * which is 679 of the 1,222 records, mostly those tagged only with a project or
- * with an unaccented category -- it uses the title, because on those records
- * the title is the most informative field there is.
- *
- * Every clause is derived from a field on the record. Nothing is invented.
- *
- * The categories are scraped and untidy: "Uncategorized", unaccented
- * "XAY DUNG VA CAI TAO", "The Global City" and "THE GLOBAL CITY" both present,
- * and a handful of nothing at all. An unaccented category is dropped from the
- * sentence rather than rendered as-is, since "Thuộc chủ đề Xay dung va cai tao"
- * is worse than saying nothing -- the topic survives as a tag below, which is
- * where an unaccented label still reads fine.
- */
-function describeInterior(record, room, categories) {
-  const title = plain(record?.title, 160);
-  const accented = value => /[̀-ͯ]/.test(value.normalize('NFD'));
-
-  const topics = categories
-    .filter(value => {
-      const key = normKey(value);
-      return key
-        && key !== 'uncategorized'
-        && accented(value)
-        && !EDITORIAL.includes(key)
-        && !PROJECT.test(value)
-        && normKey(value) !== normKey(room);
-    })
-    .map(value => value.charAt(0).toUpperCase() + value.slice(1).toLowerCase());
-
-  // Drop a topic the title already says outright, so "Phòng khách đẹp" is not
-  // followed by a phrase restating "Phòng khách".
-  const titleKey = normKey(title);
-  const extra = topics.filter(topic => !titleKey.includes(normKey(topic)));
-
-  const parts = [];
-  if (room) parts.push(`Ảnh chụp ${room.toLowerCase()}`);
-  if (extra.length) {
-    // Two topics read as a list; more than two is noise, so name the first few
-    // and count the rest.
-    const named = extra.slice(0, 2).join(' và ');
-    const rest = extra.length - Math.min(2, extra.length);
-    parts.push(rest > 0 ? `thuộc chủ đề ${named} và ${rest} chủ đề khác` : `thuộc chủ đề ${named}`);
-  }
-  if (!parts.length) {
-    // No usable topic. The title is still worth saying -- it is the article's
-    // own headline, and on a record like "Sofa đã bàn giao cho căn hộ chung cư"
-    // it is the only description that exists.
-    if (title && title !== GENERIC_HEADING) {
-      return `Ảnh minh hoạ cho bài viết “${title}” trong bộ sưu tập thiết kế nội thất Việt Nam của V.AI STUDIO.`;
-    }
-    return 'Ảnh trong bộ sưu tập thiết kế nội thất Việt Nam của V.AI STUDIO.';
-  }
-  const sentence = parts.join(', ');
-  return `${sentence.charAt(0).toUpperCase()}${sentence.slice(1)}, trong bộ sưu tập thiết kế nội thất Việt Nam của V.AI STUDIO.`;
-}
-
-/**
- * Describe a catalogue product from its spec sheet when it has no summary.
- *
- * Two thirds of the catalogue -- 6,347 of the 9,631 gallery rows -- carries an
- * empty `summary`, because the field was never scraped from their source pages.
- * Their panel therefore had no prose at all: a product name, a spec table, a
- * feature list, and nothing connecting them.
- *
- * A spec sheet is a description in a different grammar. Naming the product's
- * kind and material in a sentence -- "Bếp ga âm tủ bằng inox 304, kích thước
- * 80cm, 3 vùng nấu" -- says what it is and what distinguishes it, from fields
- * that are already there. The keys are filtered so only the ones that describe
- * the object survive: prices, stock flags, warranty boilerplate and section
- * headings are noise in a sentence.
- *
- * Falls back to the feature list when there are no usable specs, and to the
- * brand and category when there is neither -- which is what the caller had
- * before, so a product with nothing at all still says something true.
- */
-const SPEC_SKIP = /nhóm sản phẩm|^loại|^giá|^giá bán|xuất xứ|^bảo hành|^tình trạng|^số lượng|^giao hàng|^liên hệ|thông tin|^hướng dẫn|^chính sách|^mã sản phẩm|^sku|^brand|^thương hiệu/i;
-
-/** Keys that name the object itself -- used first, in this order of preference. */
-const SPEC_HEADLINE = [
-  /^(loại sản phẩm|loại bếp|loại chậu|nhóm sản phẩm)/i,
-  /^(chất liệu|màu sắc|kiểu dáng|kích thước)/i,
-];
-
-function describeProduct(record, specs, feats) {
-  const usable = specs.filter(([key]) => key && !SPEC_SKIP.test(key));
-  if (!usable.length) {
-    if (feats.length) {
-      const named = feats.slice(0, 2).join(', ');
-      const rest = feats.length - Math.min(2, feats.length);
-      return `Sản phẩm nổi bật với ${named}${rest > 0 ? ` và ${rest} đặc điểm khác` : ''}.`;
-    }
-    return [plain(record.brand, 40), plain(record.category ?? record.c, 80)]
-      .filter(Boolean).join(' · ') || '';
-  }
-
-  const clauses = [];
-  for (const matcher of SPEC_HEADLINE) {
-    const hit = usable.find(([key]) => matcher.test(key));
-    // Take the first matching spec and drop it from the pool, so a later clause
-    // cannot restate the same field.
-    if (hit) clauses.push(hit[1]);
-  }
-  // Two headline fields, then the two most specific remaining facts -- enough to
-  // distinguish the product without turning the panel into the spec table it
-  // already shows.
-  for (const [key, value] of usable) {
-    if (clauses.length >= 4) break;
-    if (clauses.includes(value)) continue;
-    clauses.push(value);
-  }
-
-  const name = plain(record.name ?? record.n, 160) || plain(record.sku, 40);
-  const body = clauses.slice(0, 4).join(', ');
-  return name && body ? `${name}: ${body}.` : (name || body);
-}
-
-/**
- * Build the panel contents for one open record.
- *
- * `record` is whatever the field holds: an interior row ({ id, url, title,
- * categories, source }) or a catalogue product ({ sku, name, price, summary,
- * specs, feats, link, images }). Both are flattened to the same shape, so the
- * viewer renders one component for either.
- */
-
-export function detailOf(record) {
-  /**
-   * A product, or a photograph published on vai-avatar?
-   *
-   * `sku` alone cannot answer this. avatar-interiors.js gives every vai-avatar
-   * photograph a namespaced `sku` (`avatarimg:<id>`) precisely so it travels the
-   * same code path as a catalogue product -- same viewer, same panel, same
-   * neon -- and that is worth keeping. But it is not a catalogue identity, and
-   * keying the panel off its presence rendered every such photograph as a
-   * product: the heading was the literal `avatarimg:b68dc779370dc70e`, the
-   * description came from an empty spec sheet, and no room, category or tag
-   * appeared even though the record carries all of them.
-   *
-   * `avatarImageId` is what actually distinguishes them. It is present only on
-   * records read from the vai-avatar interior index, and nothing else in the
-   * catalogue has it.
-   */
-  const isProduct = Boolean(record?.sku) && !record?.avatarImageId;
-  const categories = Array.isArray(record?.categories)
-    ? record.categories.map(value => plain(value, 60)).filter(Boolean)
-    : [];
-  const room = roomOf(categories);
-  const roomKey = normKey(room);
-  const editorial = categories.filter(value => EDITORIAL.includes(normKey(value)));
-
-  const tags = (room ? [room] : []).concat(
-    categories.filter(value => normKey(value) !== roomKey && !EDITORIAL.includes(normKey(value))),
-  ).slice(0, 10);
-
-  const specs = Array.isArray(record?.specs)
-    ? record.specs
-      .filter(pair => Array.isArray(pair) && pair.length >= 2)
-      .map(([key, value]) => [plain(key, 60), plain(value, 160)])
-      .filter(([key, value]) => key && value)
-    : [];
-  const feats = Array.isArray(record?.feats)
-    ? record.feats.map(value => plain(value, 90)).filter(Boolean)
-    : [];
-
-  const facts = [];
-  let heading;
-  let description = plain(record?.summary ?? record?.sum ?? record?.desc, 400);
-
-  if (isProduct) {
-    heading = plain(record.name ?? record.n, 160) || plain(record.sku, 40);
-    if (!description) {
-      description = describeProduct(record, specs, feats)
-        || [plain(record.brand, 40), plain(record.category ?? record.c, 80)].filter(Boolean).join(' · ');
-    }
-    // The catalogue already normalises a full spec sheet and a feature list;
-    // showing four of each is what made the panel worth opening at all.
-    for (const [key, value] of specs.slice(0, 4)) facts.push([key, value]);
-    for (const feature of feats.slice(0, 3)) facts.push(['Tính năng', feature]);
-  } else {
-    heading = plain(record?.title, 160) || room || GENERIC_HEADING;
-    if (!description) description = describeInterior(record, room, categories);
-    if (record?.id) facts.push(['Mã ảnh', String(record.id)]);
-    if (room) facts.push(['Không gian', room]);
-  }
-
-  if (editorial.length) facts.push(['Chủ đề', editorial.join(', ')]);
-
-  // No `source`, no `sourceHost`. The panel describes what the reader is
-  // looking at; where it was scraped from is not part of that, and a field
-  // carrying it is only ever going to be rendered again.
-  return { heading, room, description, tags, facts, isProduct };
-}

src/image-loader.js

@@ -1,5 +1,5 @@
 /** Bounded download/decode queue, with at most two image insertions per frame. */
-export function createImageLoader({ concurrency = 12, cacheSize = 128 } = {}) {
+export function createImageLoader({ concurrency = 6, cacheSize = 64 } = {}) {
   const queue = [], completed = [];
   const active = new Set(), cache = new Map();
   let disposed = false, frame = 0, scheduled = false;
@@ -14,7 +14,7 @@ export function createImageLoader({ concurrency = 12, cacheSize = 128 } = {}) {
 
   function flush() {
     frame = 0;
-    for (let i = 0; i < 4 && completed.length; i++) {
+    for (let i = 0; i < 2 && completed.length; i++) {
       const job = completed.shift();
       if (job.cancelled) remember(job.image);
       else job.receive(job.image);
@@ -36,7 +36,7 @@ export function createImageLoader({ concurrency = 12, cacheSize = 128 } = {}) {
       active.add(job);
       const photo = job.image = new Image();
       photo.decoding = 'async';
-      photo.fetchPriority = job.priority < 24 ? 'high' : 'low';
+      photo.fetchPriority = job.priority < 12 ? 'high' : 'low';
       photo.src = job.url;
       // Decoding completes before this element is attached to the animated field.
       photo.decode().then(() => {

src/index.css

@@ -1,5 +1,4 @@
 @import 'tailwindcss';
-@import './neon-frame.css';
 
 :root { font-family: Arial, Helvetica, sans-serif; color: #deded7; background: #10110f; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
 * { box-sizing: border-box; }
@@ -8,92 +7,17 @@ button, input, a { -webkit-tap-highlight-color: transparent; }
 button, input { font: inherit; }
 button { cursor: pointer; }
 button:focus-visible, a:focus-visible { outline: 2px solid #d7e1d1; outline-offset: 5px; }
-
-/* ── V.AI STUDIO background ────────────────────────────────────────────────
- * The same artwork vai-avatar shows on its body: public/avatars/vaistudio_center.png,
- * copied here byte-for-byte so the two Spaces read as one brand (md5 checked).
- *
- * Rendered at 30% opacity as a separate fixed layer rather than as a
- * `background-image` on .app, because:
- *
- *   * opacity on the element would fade the photographs and the search pill
- *     along with it, and
- *   * `background-attachment: fixed` + `background-image` cannot be composed
- *     with the two dimming layers (.vignette / .grain) that already sit on top
- *     of the field, so the artwork would fight them instead of sitting under.
- *
- * `pointer-events: none` keeps it from swallowing clicks meant for a tile, and
- * z-index 0 puts it below .image-field (z-index auto, painted later) while
- * still above the base background colour.
- *
- * The image is 816x816 and deliberately centred-cropped on the logo, matching
- * vai-avatar's own mobile rule: on narrow portrait screens it is sized to full
- * width and tiled vertically so the artwork is never cropped to a logo sliver.
- */
-.brand-backdrop {
-  position: fixed; inset: 0; z-index: 0; pointer-events: none;
-  background-color: #10110f;
-  background-image: url('/brand/vaistudio_center.png');
-  background-size: cover;
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
-  opacity: .3;
-}
-@media (max-width: 768px) {
-  .brand-backdrop { background-position: center top; background-size: 100% auto; background-repeat: repeat; background-attachment: scroll; }
-}
 .app { min-height: 320px; background: #11120f; overflow: clip; }
-/* Above the backdrop, below the field's own dimming layers. */
-.app { background: transparent; }
 /* Unlike hidden, clip prevents focus/scrollIntoView from panning the canvas. */
 .image-field { position: absolute; inset: 0; overflow: clip; contain: strict; }
 .image-tile { position: absolute; left: 0; top: 0; display: block; border: 0; padding: 0; border-radius: 2px; background-color: #252823; background-size: cover; overflow: hidden; will-change: transform; transform-origin: center; box-shadow: 0 1px 5px #0002; }
-/* position:absolute so the share anchor's z-index:1 actually stacks above the
-   photograph. A z-index on a static element is ignored, and without this the
-   <img> -- appended after the anchor when the thumbnail loads -- paints on top
-   of it, so the share button opens the viewer instead of sharing. */
-.image-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: brightness(.92); transition: opacity 120ms ease, filter 120ms ease; }
+.image-tile img { width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: brightness(.92); transition: opacity 120ms ease, filter 120ms ease; }
 .image-tile img.loaded { opacity: 1; }
 .image-tile:hover { box-shadow: 0 10px 35px #0005; }
 .image-tile:hover img { filter: brightness(1); }
-/* z-index:1 is load-bearing. The tile holds two children -- the share anchor
-   and, once it loads, an <img> at width/height 100%. The image is appended
-   later, so without this it paints on top and every click lands on the
-   photograph: the share button opens the viewer it was meant to bypass. */
-/* Share link on the tile. Hidden until hover so the field stays a field: 150
-   photographs each wearing a button turns the plane into a control panel. It is
-   aria-hidden and tabIndex -1 (see ImageField), so this is purely a pointer
-   affordance -- the reachable share is the named link inside the viewer.
-   Sized in the tile's own coordinate space, so it scales with the photo. */
-.image-share { position: absolute; z-index: 1; right: 5px; top: 5px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #0d0f0bb8; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #e6ebe0; opacity: 0; transform: scale(.82); transition: opacity 160ms ease, transform 160ms ease, background 160ms ease, color 160ms ease; }
-.image-share svg { width: 13px; height: 13px; }
-.image-share:hover { background: #0d0f0be6; color: #ffffff; }
-.image-share[hidden] { display: none; }
-.image-tile:hover .image-share, .image-tile:focus-within .image-share { opacity: 1; transform: scale(1); }
-/* Top-ranked results are the ones most likely to be sent, so theirs show the
-   button without waiting for hover. */
-.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 120ms linear; } }
-/* Relevance is a soft per-photo treatment, not a second results layer.
- * neon-frame.css owns the one exception -- a ringed tile is never dimmed --
- * because that is a property of the ring, not of the fade. */
+/* Relevance is a soft per-photo treatment, not a second results layer. */
 .image-tile { opacity: var(--relevance-opacity, 1); filter: blur(var(--relevance-blur, 0px)); transition: opacity 650ms ease, filter 650ms ease; }
 .image-tile:hover, .image-tile:focus-visible { opacity: 1; filter: blur(0); }
-/*
-   Lift the hovered tile above its neighbours.
-   Required for the share button to be usable at all. Tiles overlap by design and
-   each tile's own z-index is a stable seed of its id (ImageField.jsx sets 1..100
-   from a hash), not its search rank -- so a tile stays buried under whichever
-   neighbour hashed higher, permanently. Measured on the idle field: of 79
-   in-viewport share buttons, 0 were the topmost element at their own centre --
-   13 were covered by another tile's photograph, 8 by another tile outright, and
-   the rest hit their own icon. There is no way to express "raise me above my
-   neighbours" for the button alone, because the button cannot be hovered until
-   it is on top. Scoped to .image-tile:hover, which also covers :focus-within, so
-   keyboard users reach the same affordance.
-*/
-.image-tile:hover, .image-tile:focus-within { z-index: 2147483647; }
 .vignette { position: absolute; inset: 0; pointer-events: none; z-index: 300; background: radial-gradient(ellipse at center, transparent 42%, #0c0d0b30 100%), linear-gradient(0deg, #10110f99, transparent 70px); }
 .grain { position: absolute; inset: 0; 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"); }
 .search-center { position: absolute; z-index: 400; width: clamp(350px, 36vw, 640px); max-width: calc(100% - 44px); left: 50%; top: 50%; transform: translate(-50%, -50%); }
@@ -105,35 +29,6 @@ button:focus-visible, a:focus-visible { outline: 2px solid #d7e1d1; outline-offs
 .clear-button { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; padding: 7px; color: #4c5449; border: 0; background: transparent; border-radius: 50%; transition: background 150ms; }
 .clear-button:hover { background: #0000000d; }
 .clear-button svg { width: 18px; height: 18px; }
-
-/* ── The neon frame lives in src/neon-frame.css ─────────────────────────────
- * Imported at the top of this file rather than kept inline, for one reason: it
- * also has to ship as dist/assets/neon-frame.css, which index.html loads after
- * the built app.css.
- *
- * The Space is `sdk: static`, so dist/ -- not src/ -- is what the browser gets.
- * Until the bundle is rebuilt from source, that built app.css still carries the
- * old `@keyframes neon-run { transform: rotate(1turn) }`, which rotated the
- * ring's mask along with its gradient and pulled the painted border off the
- * tile's edges. The override file is the fix that does not need a rebuild; this
- * import is what stops the next rebuild from dropping it.
- *
- * One definition, two delivery routes. They are kept in step deliberately: the
- * override is inert once the build includes these rules, rather than the two
- * quietly describing different effects.
- */
-
-/* ── Search status, footer, and the full-screen viewer ────────────────────
- * Restored wholesale. The previous edit removed this whole tail by accident
- * while stripping the size/position controls, which left every one of these
- * classes unstyled: opening a photo rendered a raw <dialog> with its default
- * UA box, the share toolbar stacked vertically as plain text, and the error
- * state had no card behind it. The controls were 12 selectors; what went with
- * them was everything after them in the file.
- */
-/* The progress hairline along the bottom of the pill. Restored with the rest
-   of the tail -- without it the loading bar rendered as a plain block and the
-   pill gained a visible box while the CLIP model downloaded. */
 .search-progress { position: absolute; bottom: 0; left: 24px; right: 24px; height: 1px; opacity: 0; overflow: hidden; transition: opacity 300ms; }
 .search-progress.visible { opacity: .5; }
 .search-progress span { display: block; height: 100%; background: #47513f; transition: width 300ms; animation: progress-glow 1.6s ease-in-out infinite; }
@@ -175,15 +70,10 @@ button:focus-visible, a:focus-visible { outline: 2px solid #d7e1d1; outline-offs
    (share, caption, close) under justify-content: space-between, so the caption
    is pushed to the middle and the share button to the leading edge. */
 .photo-share { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
-/* The label is the accessible name, and it doubles as the confirmation channel:
-   "Đã chia sẻ" appears here for 1.8s after a share. So the span must be
-   visually hidden, not display:none -- display:none takes the text out of the
-   accessibility tree too, leaving an icon-only button with no name at all, and
-   a phone-width button whose confirmation the reader can never see. */
 .photo-share svg { width: 17px; height: 17px; flex: none; }
 .photo-share:hover { background: #1b2115f2; border-color: #ffffff2e; color: #fff; }
 @media (max-width: 560px) {
-  .photo-share span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+  .photo-share span { display: none; }
   .photo-share { padding: 12px; }
 }
 .photo-toolbar svg { width: 22px; height: 22px; }
@@ -210,24 +100,6 @@ button:focus-visible, a:focus-visible { outline: 2px solid #d7e1d1; outline-offs
   .photo-step.is-next { right: 8px; }
 }
 
-/* Date chip in the time-navigation counter. Only visible when paging through
-   the interior list by addedAt: newest → oldest. */
-.photo-counter .photo-date {
-  display: inline-flex;
-  margin-left: 8px;
-  padding: 1px 7px;
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: .06em;
-  color: #9fd6a4;
-  background: #2a36227a;
-  border: 1px solid #4a6b3a33;
-  border-radius: 5px;
-}
-@media (max-width: 650px) {
-  .photo-counter .photo-date { display: none; }
-}
-
 /* Product caption inside the viewer: the same fields the detail card shows, so
    a photo opened from the product strip carries its context with it. */
 .photo-caption { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 18px; max-width: min(560px, calc(100vw - 48px)); padding: 12px 16px; border: 1px solid #ffffff17; border-radius: 10px; background: #0f130ccc; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
@@ -242,37 +114,6 @@ button:focus-visible, a:focus-visible { outline: 2px solid #d7e1d1; outline-offs
   .photo-counter { display: none; }
 }
 
-/* Detail card inside the viewer, for interiors and products alike: title,
-   description, room/topic tags, fact table and a link to the source article --
-   none of which the viewer showed before. Collapsed by default so the
-   photograph is the first impression on a phone. */
-.photo-detail { position: absolute; z-index: 2; left: 24px; bottom: 18px; width: min(460px, calc(100vw - 48px)); overflow: hidden; border: 1px solid #ffffff1f; border-radius: 12px; background: #0f130ce8; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
-.photo-detail-summary { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; }
-.photo-detail-summary::-webkit-details-marker { display: none; }
-.photo-detail-summary:hover { background: #ffffff0a; }
-.photo-detail-title { flex: 1; min-width: 0; overflow: hidden; font-size: 14px; line-height: 1.35; color: #e4e9dc; text-overflow: ellipsis; white-space: nowrap; }
-.photo-detail-price { flex: none; font-size: 13px; font-weight: 600; color: #9fd6a4; font-variant-numeric: tabular-nums; }
-.photo-detail-toggle { flex: none; padding: 3px 9px; font-size: 11px; color: #99a291; text-transform: uppercase; letter-spacing: .05em; border: 1px solid #ffffff1f; border-radius: 999px; transition: color 180ms; }
-.photo-detail[open] .photo-detail-toggle { color: #cdd6c4; border-color: #ffffff33; }
-.photo-detail-body { padding: 0 14px 13px; border-top: 1px solid #ffffff12; }
-.photo-detail-desc { margin: 11px 0 0; font-size: 13px; line-height: 1.6; color: #c3cabb; }
-.photo-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 11px 0 0; padding: 0; list-style: none; }
-.photo-detail-tags li { padding: 3px 9px; font-size: 11px; color: #b6c2ab; background: #ffffff0a; border: 1px solid #ffffff17; border-radius: 999px; }
-.photo-detail-facts { display: grid; gap: 4px; margin: 11px 0 0; font-size: 12px; }
-.photo-detail-facts > div { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 62%); gap: 10px; }
-.photo-detail-facts dt { color: #939d8a; overflow-wrap: anywhere; }
-.photo-detail-facts dd { margin: 0; color: #d5dbcd; overflow-wrap: anywhere; }
-/* The outbound "Xem bài gốc" link is gone from the panel; see PhotoViewer.
-   No replacement rule -- the source site now appears only as a "Nguồn" row in
-   the fact table. */
-/* When the price/spec caption is also on screen, the detail card moves to the
-   top instead: both are anchored bottom-left and would collide. */
-.photo-viewer:has(.photo-caption) .photo-detail { top: 76px; bottom: auto; }
-@media (max-width: 650px) {
-  .photo-detail { left: 12px; right: 12px; bottom: 12px; width: auto; }
-  .photo-viewer:has(.photo-caption) .photo-detail { top: 70px; }
-}
-
 /* Malloca product strip. Sits above the vignette so products stay legible
    over the photograph field, and below the search pill's stacking level. */
 @media (max-width: 650px) {

src/layout.js

@@ -5,121 +5,37 @@ export function seed(text) {
   return (hash >>> 0) / 4294967295;
 }
 
-/**
- * How many photographs the field holds.
- *
- * 150 on desktop / 96 on a phone, up from 96 / 56. The raise is deliberate: the
- * featured tiles are now 1.5x larger, so they occupy noticeably more of the
- * plane than before, and at the old counts the gaps between them read as empty
- * space rather than as a dense field. More ordinary tiles fills that space
- * without touching the emphasis -- the newest photographs still ring, and there
- * are still only ten of those.
- *
- * A phone is raised less than a desktop because tile AREA is bounded by the
- * viewport, not by the tile count: past ~100 the extra tiles fall below their own
- * thumbnail size and the field turns to grain.
- */
-export function fieldCount(width) { return width < 650 ? 96 : 150; }
+export function fieldCount(width) { return width < 650 ? 56 : 96; }
 
-/**
- * Tile size bounds for the user-facing size control.
- *
- * Below the lower bound the tiles stop being recognisable as photographs, and
- * above the upper bound a single tile covers the search pill and most of the
- * viewport, so the field stops reading as a collection at all.
- */
-export const MIN_TILE_SCALE = 0.6;
-export const MAX_TILE_SCALE = 1.8;
-
-/**
- * How far the whole plane may be pushed, in px, before it stops being
- * reachable. Larger than half the shortest likely viewport, so a photographer
- * can be moved out from under the search pill without being lost off-screen.
- */
-export const MAX_FIELD_OFFSET = 320;
-
-export function clampTileScale(value) {
-  const scale = Number(value);
-  return Number.isFinite(scale) ? Math.max(MIN_TILE_SCALE, Math.min(MAX_TILE_SCALE, scale)) : 1;
-}
-
-export function clampFieldOffset(value) {
-  const offset = Number(value);
-  return Number.isFinite(offset) ? Math.max(-MAX_FIELD_OFFSET, Math.min(MAX_FIELD_OFFSET, offset)) : 0;
-}
-
-/**
- * Size one tile.
- *
- * `tileScale` is the user's size multiplier and is applied to `unit` BEFORE the
- * per-photograph variance, so every tile grows and shrinks together and the
- * collection keeps its rhythm instead of the biggest photographs absorbing the
- * whole change.
- */
-export function dimensions(image, viewportWidth, tileScale = 1) {
-  const unit = Math.max(68, Math.min(168, viewportWidth / 10.25)) * tileScale;
+export function dimensions(image, viewportWidth) {
+  const unit = Math.max(68, Math.min(168, viewportWidth / 10.25));
   const area = unit * unit * (0.74 + seed(image.id + 'size') * 0.48);
   const ar = Math.max(0.5, Math.min(2, image.ar));
   return { width: Math.sqrt(area * ar), height: Math.sqrt(area / ar) };
 }
 
-export function scatter(image, index, count, width, height, offsetX = 0, offsetY = 0) {
+export function scatter(image, index, count, width, height) {
   const columns = Math.ceil(Math.sqrt(count * width / height));
   const rows = Math.ceil(count / columns);
   return {
-    x: -35 + (index % columns + 0.5 + (seed(image.id + 'x') - 0.5) * 0.44) * (width + 70) / columns + offsetX,
-    y: -40 + (Math.floor(index / columns) + 0.5 + (seed(image.id + 'y') - 0.5) * 0.48) * (height + 80) / rows + offsetY,
+    x: -35 + (index % columns + 0.5 + (seed(image.id + 'x') - 0.5) * 0.44) * (width + 70) / columns,
+    y: -40 + (Math.floor(index / columns) + 0.5 + (seed(image.id + 'y') - 0.5) * 0.48) * (height + 80) / rows,
     scale: 0.88 + seed(image.id + 'scale') * 0.20,
   };
 }
 
 /** One continuous layout for the whole collection, including non-matching photos. */
-export function fieldPosition(image, rank, count, width, height, offsetX = 0, offsetY = 0) {
+export function fieldPosition(image, rank, count, width, height) {
   const angle = rank * 2.399963229728653 + 0.54;
   const radius = Math.sqrt((rank + 0.6) / count);
-  // 0.62 instead of 0.68: the top results hug the centre -- and therefore the
-  // search pill -- more tightly, so the answer to a query sits visibly NEAR
-  // the box the visitor typed in, not pushed out towards the field's rim.
-  const x = width / 2 + Math.cos(angle) * radius * width * 0.62;
-  let y = Math.sin(angle) * radius * height * 0.66;
+  const x = width / 2 + Math.cos(angle) * radius * width * 0.68;
+  let y = Math.sin(angle) * radius * height * 0.70;
   // Ease the central photographs around the pill, without a separate results layer.
-  //
-  // Clearance has to account for the TILE, not just its centre. A featured tile
-  // is 1.5x its neighbours, so a distance tuned to clear an ordinary tile still
-  // lets a featured corner land under the pill. `dimensions()` is therefore
-  // called here for the real half-height, and the push grows with it.
   const clearance = Math.max(0, 1 - Math.abs(x - width / 2) / (width * 0.31));
-  // The tile is scaled by `scale` on top of its CSS size, and that scale reaches
-  // 1.32 for a central featured tile -- so the clearance has to be computed from
-  // the RENDERED half-extent. Measuring the unscaled box let a 289px tile clear
-  // the pill by 221px and still land on it.
-  const scale = 0.96 + seed(image.id + 'scale') * 0.18 + (1 - radius) * 0.18;
-  const size = dimensions(image, width, image?.featuredScale || 1);
-  const half = Math.max(size.width, size.height) / 2 * scale;
-  // PILL_HALF is the search box's own half-width plus margin, so "far enough" is
-  // measured from the box rather than from its centreline. The 22px margin
-  // (previously 34) lets a result settle closer to the box while still clearing
-  // the glass itself.
-  const pillHalf = (width < 650 ? 165 : 235) + 22;
-  // 80/118 was a generous shove; 74/96 keeps the same shape but brings the arc
-  // in so the top results read as "attached" to the pill rather than banished.
-  y += Math.sign(y || 1) * clearance * (width < 650 ? 60 : 92) * (1 - radius * 0.45);
-  // If the tile's own rendered box could still reach the pill, push it clear along
-  // y. Both conditions must hold: the tile is near the pill's row AND its column
-  // overlaps the pill's width. Only genuinely-overlapping tiles move, so the arc
-  // keeps its shape and tiles already clear are left alone.
-  if (clearance > 0
-    && Math.abs(y) < half + 40
-    && Math.abs(x - width / 2) < pillHalf + half) {
-    y += Math.sign(y || 1) * (half + 40 - Math.abs(y));
-  }
+  y += Math.sign(y || 1) * clearance * (width < 650 ? 65 : 95) * (1 - radius * 0.45);
   return {
-    x: x + offsetX, y: height / 2 + y + offsetY,
-    // The same `scale` the clearance was computed from. Recomputing it here
-    // would be a second, independently-evaluated expression for one number, and
-    // the clearance would silently stop matching what is drawn if the two ever
-    // drifted apart.
-    scale,
+    x, y: height / 2 + y,
+    scale: 0.96 + seed(image.id + 'scale') * 0.18 + (1 - radius) * 0.18,
   };
 }
 

src/merge.js

@@ -1,47 +1,77 @@
 /**
  * Fold Malloca products into the interior ranking, so both kinds of photograph
  * occupy the SAME field and travel the same path once opened.
+ *
+ * ── Why this is done by interleaving, not by embedding the products ──
+ * A product image could in principle be pushed through the same CLIP image
+ * tower as the interiors and baked into the 512-d matrix. That was rejected
+ * deliberately:
+ *
+ *   * The product set is written by vai-avatar at runtime, and a baked matrix
+ *     can only know what existed when it was built, so "Thêm SP" would stay
+ *     invisible until somebody re-ran an embed over the whole catalogue.
+ *   * There is no image tower in the pinned model repo to do it with: it ships
+ *     `text_model.onnx` and nothing else, so encoding product photos would need
+ *     a second model and a second download.
+ *
+ * The catalogue is small and live (a few hundred products, not thousands), so
+ * ranking it lexically per query is cheap. Its hits are then woven into the
+ * interior ranking by rank position, which is what makes a product appear
+ * among the interior photographs instead of in a separate bar.
+ *
+ * ── Why the interleaving is positional and not append-only ──
+ * Appending products after the interiors would make "bếp" show thirty kitchen
+ * photographs and then the ovens, which reads as a second result list rather
+ * than one field. Spacing them by rank puts each product roughly where its
+ * strength justifies it, so a query that matches both kinds of image produces
+ * one continuous, plausibly-ordered plane.
  */
 
 /** A product has to be worth showing, but not so many that interiors vanish. */
-const PRODUCT_LIMIT = 24;
+const PRODUCT_LIMIT = 12;
 
 /** Insert product `i` after roughly (i+1) * STRIDE interiors. */
 const STRIDE = 2;
 
-/** De-duplication keys, one namespace per kind of record. */
+/**
+ * De-duplication keys, one namespace per kind of record.
+ *
+ * Sharing a single set would mean an interior id and a product key competing
+ * for the same slot, so any collision silently DROPS a product from the field
+ * with no error. Tagging both sides removes the possibility rather than
+ * narrowing it: interior ids are opaque strings, and it is not the caller's
+ * job to know they happen to be 10 hex characters today.
+ */
 const interiorKey = id => `interior:${id}`;
 const productKey = sku => `malloca:${sku}`;
 
-import { exactMatches, hasDecisiveWinner } from './relevance.js';
-import { FEATURED_LIMIT } from './avatar-interiors.js';
-import { normalizeText } from './catalogue.js';
-import { productLikeTerms, isSpaceQuery } from './semantic-terms.js';
-
-const NAME_WORD_SYNONYMS = { ke: ['gia'], gia: ['ke'] };
-
-const DEAD_IMAGE_DIRS = [
-  '/eurogold_img/',
-  '/eurogold_tb_img/',
-  '/demax_img/',
-  '/canzy_img/',
-  '/images/',
-];
-
-function isDeadImageUrl(url) {
-  if (typeof url !== 'string' || !url) return false;
-  if (!/huggingface\.co\/spaces\/bep40\/v\.aistudio/i.test(url)) return false;
-  const lower = url.toLowerCase();
-  return DEAD_IMAGE_DIRS.some(dir => lower.includes(dir));
-}
-
+/**
+ * The image that represents a product in the field.
+ *
+ * Only absolute http(s) and inline data URLs are kept. Anything else -- a
+ * relative path, a blob, an object -- cannot be rendered by an <img> here, and
+ * a tile that renders nothing is worse than a product that stays in the
+ * catalogue and is reachable through search.
+ */
 function leadImage(product) {
   for (const value of product?.images ?? []) {
-    if (typeof value === 'string' && /^(https?:\/\/|data:image\/)/i.test(value) && !isDeadImageUrl(value)) return value;
+    if (typeof value === 'string' && /^(https?:\/\/|data:image\/)/i.test(value)) return value;
   }
   return '';
 }
 
+/**
+ * Product photographs are catalogue shots, not interiors, so they arrive with
+ * none of the geometry the field needs. Two defaults stand in for it:
+ *
+ *   id  -- every tile is keyed on it, and the product's own sku is the natural
+ *           stable identity. Layout seeds (position, size, phase) are derived
+ *           from it, so a product keeps the same place and scale across
+ *           searches instead of jumping when it re-ranks.
+ *   ar  -- dimensions() clamps this to [0.5, 2]. Without a value it computes
+ *           NaN and the tile collapses to no size at all. Product shots are
+ *           square-ish, so 1 is the honest default.
+ */
 function tileDefaults(product) {
   return {
     id: productKey(product.sku),
@@ -49,6 +79,20 @@ function tileDefaults(product) {
   };
 }
 
+/**
+ * Give every product the visual prominence of the photograph it sits beside.
+ *
+ * This is load-bearing rather than cosmetic. relevanceAppearance() dims and
+ * blurs any tile whose `score` is not a finite number -- it is written for
+ * cosine results -- so a product merged in WITHOUT a score would come out at
+ * 14% opacity and blurred, i.e. effectively invisible in the field. Borrowing
+ * the neighbouring interior score makes a product look exactly as relevant as
+ * the photograph next to it, which is the intended reading.
+ *
+ * A query that matches products but no interiors at all has no neighbour to
+ * copy; those get a descending synthetic score so the strongest hit is the
+ * brightest thing on screen.
+ */
 function assignRelevance(list) {
   const interiorAt = i => (i >= 0 && i < list.length && typeof list[i].score === 'number' ? i : -1);
   const floor = list.reduce((min, r) => (Number.isFinite(r.score) ? Math.min(min, r.score) : min), Infinity);
@@ -65,170 +109,42 @@ function assignRelevance(list) {
   return list;
 }
 
+/**
+ * Unwrap a catalogue hit.
+ *
+ * The worker ranks hits as `{ sku, score, product }`, while a caller that has
+ * already normalised them passes the product itself. Both carry a `sku`, so
+ * checking `product` FIRST is what stops the wrapper being mistaken for the
+ * record: the wrapper has no `images`, and taking it would drop the product.
+ */
 function unwrap(item) {
   if (!item || typeof item !== 'object') return null;
   if (item.product && typeof item.product === 'object') return item.product;
   return item;
 }
 
-const avatarInteriorKey = id => `avatar-interior:${id}`;
-
-function plainTile(record) {
-  return {
-    ...record,
-    ...tileDefaults(record),
-    id: avatarInteriorKey(record.avatarImageId),
-    score: Number.isFinite(record.score) ? record.score : 1,
-  };
-}
-
-function featuredTile(record, scale = 1.5) {
-  return {
-    ...record,
-    ...tileDefaults(record),
-    id: avatarInteriorKey(record.avatarImageId),
-    featured: true,
-    featuredScale: scale,
-    score: Number.isFinite(record.score) ? record.score : 1,
-  };
-}
-
+/**
+ * Produce one merged, de-duplicated list for the field.
+ *
+ * `interiors` are the CLIP-ranked photographs (already sorted, highest first);
+ * `products` are the lexically-ranked catalogue hits. Only the ORDER of the
+ * products is meaningful -- their scores come from token overlap, so they are
+ * not comparable with a cosine and are deliberately never blended into one.
+ */
 export function mergeResults(interiors, products, options = {}) {
   const productLimit = options.productLimit ?? PRODUCT_LIMIT;
   const interiorLimit = options.interiorLimit ?? 60;
 
   const seen = new Set();
   const out = [];
-
-  const fresh = [];
-  const ordered = (options.avatarInteriors ?? [])
-    .filter(item => item && typeof item === 'object' && item.avatarImageId)
-    .sort((a, b) => (a.addedAt < b.addedAt ? 1 : a.addedAt > b.addedAt ? -1 : 0));
-
-  const featuredCount = options.featuredLimit ?? FEATURED_LIMIT;
-  for (const [index, item] of ordered.entries()) {
-    const key = avatarInteriorKey(item.avatarImageId);
-    if (seen.has(key)) continue;
-    seen.add(key);
-    fresh.push(index < featuredCount ? featuredTile(item, options.avatarScale ?? 1.5) : plainTile(item));
-  }
-
-  const RING_LIMIT = options.recentProductRing ?? 12;
-  const showNewRow = String(options.query ?? "").trim().length === 0;
-  const recents = showNewRow
-    ? (options.recentProducts ?? [])
-        .filter(item => item && typeof item === 'object' && item.sku && !seen.has(productKey(item.sku)))
-        .sort((a, b) => (String(a.addedAt || '') < String(b.addedAt || '') ? 1 : String(a.addedAt || '') > String(b.addedAt || '') ? -1 : 0))
-    : [];
-  const freshProducts = [];
-  for (const [index, item] of recents.entries()) {
-    const src = leadImage(item);
-    if (!src) continue;
-    const key = productKey(item.sku);
-    if (seen.has(key)) continue;
-    seen.add(key);
-    const tile = {
-      ...item,
-      ...tileDefaults(item),
-      src,
-      score: Number.isFinite(item.score) ? item.score : 1,
-      featured: true,
-      featuredScale: options.recentScale ?? 1.45,
-    };
-    freshProducts.push(tile);
-    if (freshProducts.length >= RING_LIMIT) break;
-  }
-  for (let i = freshProducts.length - 1; i >= 0; i--) fresh.unshift(freshProducts[i]);
-  // `fresh` là avatar interiors (mới nhất + những ảnh khớp query). Luôn đưa vào
-  // field — trước đây chỉ đưa khi KHÔNG có query (showNewRow), nên một ảnh mới
-  // đăng trên vai-avatar có caption khớp "nhà phố" không bao giờ hiện khi tìm
-  // "nhà phố". Từ khóa query vẫn được tôn trọng: avatarInteriors đi qua
-  // searchAvatarInteriors ở App.jsx rồi mới tới đây, nên chỉ ảnh khớp xuất hiện.
-  out.unshift(...fresh);
-
-  const KEYWORD_FLOOR = options.keywordFloor ?? 300;
-  const productAnswerItems = (products ?? []).filter(item => {
-    const product = unwrap(item);
-    const src = leadImage(product);
-    return product?.sku && src;
-  });
-
-  const queryTokens = extractQueryTokens(options.query);
-  const productTokens = productLikeTerms(queryTokens);
-
-  const decisive = hasDecisiveWinner((products ?? []).map(hit => Number.isFinite(hit?.score) ? hit.score : 0));
-  const hasProductAnswer = productTokens.length >= 2
-    && productAnswerItems.some(item => {
-      const product = unwrap(item);
-      const score = Number.isFinite(item?.score) ? item.score : 0;
-      if (score < KEYWORD_FLOOR) return false;
-      const name = normalizeText(product.name || '');
-      return productTokens.every(token => {
-        if (wordIn(name, token)) return true;
-        const synonyms = NAME_WORD_SYNONYMS[token];
-        return !!synonyms && synonyms.some(alias => wordIn(name, alias));
-      });
-    });
-  /**
-   * Truy vấn THUẦN NGỮ NGHĨA thì không bao giờ crowd-out ảnh interiors.
-   *
-   * "bàn ghế" có thể khiến scorer dựng một sản phẩm "Bàn ghế gỗ óc chó" đạt
-   * 929 điểm (300 tất cả token trong tên + 100 tên chứa query + 2×16 title +
-   * 35 hits + ...) — vượt ngưỡng identity 700 dù KHÔNG phải trùng SKU/tên
-   * chính xác — và hasDecisiveWinner gỡ sạch ảnh khỏi field. Nhưng "bàn ghế",
-   * "nội thất", "phòng khách", "nhà phố" là câu hỏi về KHÔNG GIAN: người gõ
-   * chúng muốn xem ẢNH trước. Chỉ khi query mang token sản phẩm thật sự
-   * (productTokens.length > 0: "kệ xoong", "GP170BD", "máy hút mùi") thì
-   * identity/decisive mới được gỡ ảnh.
-   */
-  const spaceQuery = isSpaceQuery(options.query);
-  const pureSemanticQuery = productTokens.length === 0;
-  if (!pureSemanticQuery && (decisive || hasProductAnswer)) interiors = [];
-
-  /**
-   * Truy vấn KHÔNG GIAN thì không trả sản phẩm "vô tình trùng token".
-   *
-   * "phòng khách" làm scoreProduct() dựng 24 sản phẩm khóa cửa "dùng cho cửa
-   * phòng ngủ", tay nắm "phòng tắm", vòi rửa "phong cách Nhật" — mỗi cái ghim
-   * một từ lẻ ("khach", "phong") trong tên/spec dài. Chúng không phải là câu
-   * trả lời cho "phòng khách", và chúng cướp chỗ của ảnh nội thất thật.
-   *
-   * Quy tắc: với space-query, một sản phẩm chỉ được giữ nếu TÊN của nó chứa
-   * ít nhất một token "đặc tả" của query — tức token không phải từ ngữ nghĩa
-   * ("sofa phòng khách" → giữ sofa vì tên chứa "sofa"; "phòng ngủ" thuần
-   * không-gian → không SP, field là 100% ảnh). Trúng SKU/model chính xác
-   * (decisive, xử lý ở scoredHits qua isExact) vẫn luôn được giữ.
-   */
-  // Sản phẩm chỉ được ở lại nếu tên chứa một token đặc tả thật sự của query.
-  function staysInSpaceQuery(product) {
-    if (!spaceQuery || !product?.name) return true;
-    const name = normalizeText(product.name);
-    return productTokens.some(token => wordIn(name, token));
-  }
-
-  const cosineFloor = options.cosFloor ?? 0.18;
-  const cosineRel = options.cosRel ?? 0.45;
-  let topCosine = 0;
   for (const image of interiors ?? []) {
-    if (Number.isFinite(image?.score) && image.score > topCosine) topCosine = image.score;
-  }
-  const effectiveFloor = Math.max(cosineFloor, topCosine * cosineRel);
-  for (const image of interiors ?? []) {
-    const score = image?.score;
-    const filteredScore = score === undefined || !Number.isFinite(score) || score >= effectiveFloor;
-    if (!image?.id || !filteredScore || seen.has(interiorKey(image.id))) continue;
+    if (!image?.id || seen.has(interiorKey(image.id))) continue;
     seen.add(interiorKey(image.id));
     out.push(image);
     if (out.length >= interiorLimit) break;
   }
 
   const hits = [];
-  const exact = exactMatches(interiors ?? [], options.query ?? '', products ?? []);
-  const keywordFeatured = options.keywordFeatured ?? productLimit;
-
-  const scoredHits = [];
-  const isProductQuery = productTokens.length > 0;
-  const productFloor = options.productFloor ?? (isProductQuery ? 20 : 120);
   for (const item of products ?? []) {
     const product = unwrap(item);
     const src = leadImage(product);
@@ -236,64 +152,17 @@ export function mergeResults(interiors, products, options = {}) {
     const key = productKey(product.sku);
     if (seen.has(key)) continue;
     seen.add(key);
-    const isExact = exact.has(key);
-    const score = Number.isFinite(item?.score) ? item.score : 0;
-    if (score !== 0 && score < productFloor) continue;
-    // Space query: đừng để sản phẩm "trùng bừa một từ" chiếm field (xem
-    // staysInSpaceQuery). Trúng SKU/model chính xác vẫn giữ — isExact là kết
-    // quả của `exactMatches`, chỉ set khi có decisive winner >= 700.
-    if (!isExact && !staysInSpaceQuery(product)) continue;
-    scoredHits.push({ product, src, key, isExact, score });
-    if (scoredHits.length >= productLimit) break;
+    hits.push({ ...product, ...tileDefaults(product), src });
+    if (hits.length >= productLimit) break;
   }
-  const freshAdded = options.freshAdded ?? 4;
-  scoredHits.sort((a, b) => b.score - a.score);
-  const freshOrdered = scoredHits
-    .filter(hit => {
-      const at = hit.product?.addedAt;
-      return typeof at === 'string' ? at.length > 0 : Number.isFinite(at) && at > 0;
-    })
-    .sort((a, b) => String(b.product?.addedAt || '').localeCompare(String(a.product?.addedAt || '')));
-  const freshSkus = new Set(freshOrdered.slice(0, freshAdded).map(hit => hit.product.sku));
-  scoredHits.forEach((hit, rank) => {
-    // Products never ring (neon) on semantic queries (ban, ghe, noi that, nha
-    // pho, biet thu): the ring says "this IS the photo you asked for", and a
-    // kitchen accessory thumbnail next to a semantic query would say the
-    // opposite. Only real photographs (CLIP interiors, fresh vai-avatar shots)
-    // get the ring; decisive exact SKUs still ring.
-    const isSemanticQuery = productTokens.length === 0;
-    const featuredByKeyword = hit.isExact
-      || (rank < keywordFeatured && hit.score >= KEYWORD_FLOOR && !isSemanticQuery);
-    const fresh = freshSkus.has(hit.product.sku);
-    const featured = hit.isExact || featuredByKeyword || fresh;
-    const scale = hit.isExact ? (options.exactScale ?? 1.55)
-      : (fresh ? (options.freshScale ?? 1.45) : (options.keywordScale ?? 1.4));
-    hits.push({
-      ...hit.product,
-      ...tileDefaults(hit.product),
-      src: hit.src,
-      ...(featured ? { featured: true, featuredScale: scale } : {}),
-    });
-  });
   if (!hits.length) return out;
 
-  const featuredHits = hits.filter(hit => hit.featured);
-  const restHits = hits.filter(hit => !hit.featured);
-  for (let i = featuredHits.length - 1; i >= 0; i--) out.splice(i, 0, featuredHits[i]);
-  for (let i = restHits.length - 1; i >= 0; i--) {
-    out.splice(Math.min(out.length, (i + 1) * STRIDE), 0, restHits[i]);
+  /**
+   * Walk backwards while splicing. Inserting forwards would shift every later
+   * insertion point, so product 5 would land somewhere the loop already passed.
+   */
+  for (let i = hits.length - 1; i >= 0; i--) {
+    out.splice(Math.min(out.length, (i + 1) * STRIDE), 0, hits[i]);
   }
   return assignRelevance(out);
 }
-
-function extractQueryTokens(query) {
-  const text = normalizeText(String(query || '').trim());
-  if (!text) return [];
-  return text.split(/\s+/).filter(token => token.length > 1);
-}
-
-function wordIn(text, token) {
-  if (!text || !token) return false;
-  const escaped = token.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-  return new RegExp(`(^|[^a-z0-9])${escaped}($|[^a-z0-9])`).test(text);
-}

src/neon-frame.css

@@ -1,131 +0,0 @@
-/**
- * --neon-angle must be REGISTERED to be animatable: an unregistered custom
- * property is not a number the engine can interpolate, so a keyframe from 0deg
- * to 360deg would flip once at the midpoint instead of sweeping.
- *
- * `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.
- *
- * These rules are kept byte-compatible with dist/assets/neon-frame.css, which is
- * what the Space loads today on top of the built app.css. The build therefore
- * reproduces this frame rather than replacing it, and the override file becomes
- * a no-op instead of a divergence between two definitions of the same effect.
- */
-@property --neon-angle {
-  syntax: '<angle>';
-  inherits: false;
-  initial-value: 0deg;
-}
-
-.image-tile { --neon: #22f5d0; --neon-soft: #7ef9ff; --neon-run: 2.6s; }
-.image-tile.exact { --relevance-opacity: 1 !important; --relevance-blur: 0px !important; }
-/* A featured tile -- the exact answer, or a photograph just added on
-   vai-avatar -- is never dimmed either. Same reason: it is the thing being
-   pointed at, and a ring around something at 14% opacity is not a pointer. */
-.image-tile.featured { --relevance-opacity: 1 !important; --relevance-blur: 0px !important; }
-
-/* The ring is drawn on `.exact` AND `.featured`. They are not alternatives: the
-   brief asks for the running neon on the exact result in every query AND on the
-   newest photographs, so both ring. A featured tile that is also the exact
-   answer matches both selectors and still renders exactly one ring. */
-.image-tile.exact::before,
-.image-tile.featured::before {
-  content: ''; position: absolute; inset: 0; z-index: 2;
-  border-radius: 2px;
-  /* A 1px gap between the photo edge and the light keeps the frame legible
-     against the tile's dark background. */
-  padding: 1px;
-  /* `from var(--neon-angle)` is the whole effect. The layer itself never moves:
-     no transform, so the mask stays welded to the tile's edges and the gradient
-     is what sweeps. The stops are a white-hot head, a comet tail fading back
-     round to 250deg, and a clear gap before the head returns -- so the eye
-     reads one light travelling rather than a ring pulsing in place. */
-  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 exactly the bug
-     this replaced. Stated explicitly so a later edit cannot reintroduce it. */
-  transform: none;
-  pointer-events: none;
-}
-
-/* The halo: the same sweep from the same angle, spread wider and blurred, so
-   the light blooms off the edge instead of being cut flat against it. A
-   pseudo-element can only carry one background, and a neon frame needs both the
-   stroke and the glow -- hence two layers, one pseudo-element apart. */
-.image-tile.exact::after,
-.image-tile.featured::after {
-  content: ''; position: absolute; inset: 0; z-index: 1;
-  border-radius: 2px;
-  /* Half the previous padding, halving the ring width. */
-  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;
-  /* No box-shadow animation. A shadow's shape is the tile's shape, so it
-     breathes in place and can never run along the perimeter -- which is why it
-     is replaced by the gradient sweep above rather than merely re-timed. */
-  box-shadow: none;
-  pointer-events: 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. */
-@keyframes neon-run {
-  from { --neon-angle: 0deg; }
-  to { --neon-angle: 360deg; }
-}
-
-/*
- * Gate the animation behind @supports at-rule(@property).
- *
- * Without the registration the angle is an untyped token, so `neon-run` would
- * jump from 0deg to 360deg at the halfway point -- the ring would blink rather
- * than run, which is worse than the plain static ring it replaced. Declaring the
- * angle and then animating it unconditionally would put that blink on every
- * browser that has not shipped @property. Browsers outside the gate keep the
- * gradient, which is a lit neon border with the bright head parked at the top.
- */
-@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 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 outline 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; }
-}

src/product-search.js

@@ -1,312 +0,0 @@
-/**
- * Product search, ported from the vai-avatar Space so results match it exactly.
- * =========================================================================
- *
- * vai-avatar ranks its catalogue in `src/vaix-rag.js::scoreProduct()`. That
- * function encodes a lot of hard-won behaviour that a plain token-overlap
- * score does not have, and every rule below is carried over rather than
- * reinvented:
- *
- *   * an exact SKU / model / title match must surface FIRST and ideally alone
- *     (typing "GP170BD" is a lookup, not a browse);
- *   * millimetre sizes are compared NUMERICALLY, because the specs write them
- *     inconsistently ("900 mm", "900mm", "W565 x D280 x H650", "Khoang tủ: 900");
- *   * material words ("inox 304", "mây", "kính cường lực") are matched across
- *     title AND specs;
- *   * brand names are worth a large flat bonus;
- *   * multi-term matches are rewarded, so covering the whole query beats
- *     matching one rare word very hard.
- *
- * ── Why a separate module instead of extending searchCatalogue() ──
- * catalogue.js already ranks products, but it ranks them with weighted token
- * overlap, which is a genuinely different ranking. Dropping vai-avatar's rules
- * into that function would have meant shipping one scorer with two sets of
- * weights, where the older one's prefix bonus and the new one's exact-match
- * bonus both fire and neither is predictable. Keeping them apart means the
- * behaviour below is readable as vai-avatar's behaviour and can be diffed
- * against the original when it changes.
- *
- * The two modules agree on normalisation: catalogue.js exports normalizeText /
- * tokenize, and vai-avatar's `sd()` is the same fold (NFD, strip combining
- * marks, đ -> d, lowercase). Imported rather than reimplemented so the two
- * scorers can never drift on what "máy hút mùi" normalises to.
- */
-
-import { normalizeText, tokenize } from './catalogue.js';
-
-/** vai-avatar's `sd()`: fold diacritics so "Bếp từ" and "bep tu" match. */
-const sd = normalizeText;
-
-/**
- * vai-avatar's extractTerms(): split on whitespace, drop one-character noise.
- *
- * Deliberately NOT catalogue.js's tokenize(), which additionally applies a
- * Vietnamese stopword list. vai-avatar keeps those words ("tu" is both "từ"
- * and "tủ"), and dropping them here would make this Space disagree with the
- * one whose ranking it is supposed to reproduce.
- */
-export function extractTerms(query) {
-  return sd(query).split(/\s+/).filter(term => term.length > 1);
-}
-
-/**
- * Material words worth a bonus, copied from vai-avatar.
- *
- * These are searched in the RAW query (not the folded one) so an accented
- * query like "inox 304" still matches, then folded for the comparison.
- */
-const MATERIAL_WORDS = [
-  'inox 304', 'inox sus304', 'inox304', 'inox', 'sus304', 'sus 304',
-  'nan oval', 'nan vuông', 'nan tron', 'nan dẹt', 'nan det',
-  'khung nhôm', 'nhôm', 'hợp kim', 'kính', 'gốm', 'đá granite', 'da granite',
-  'mây', 'thép', 'gang', 'nhựa abs', 'abs', 'thủy tinh',
-];
-
-/** Brand bonuses, copied from vai-avatar. */
-const BRAND_NAMES = [
-  'malloca', 'eurogold', 'grob', 'canzy', 'demax', 'sunhouse',
-  'kangaroo', 'sharp', 'toshiba', 'panasonic', 'samsung', 'lg',
-  'electrolux', 'bosch', 'fischer',
-];
-
-/**
- * Synonym pairs folded at query time.
- *
- * "Kệ xoong" and "giá xoong" name the same kitchen rack: the catalogue's
- * Eurogold rows spell it "Giá xoong nồi..." while the query typing it from a
- * shop floor says "kệ". Folding one term onto the other in the NAME comparison
- * is what lets a Eurogold giá-xoong match a kệ-xoong query. Deliberately a
- * one-way fold of a specific pair (not a thesaurus) so "giá" (price) in a
- * price string can never accidentally match "kệ" (rack).
- */
-const NAME_TERM_SYNONYMS = {
-  ke: ['gia'],
-  gia: ['ke'],
-};
-
-/**
- * Does the folded name carry `term`, or one of its synonyms?
- *
- * The synonym only fires on the NAME field (never brand/category/summary), so
- * a "giá" (price) mention in a spec or description cannot inflate a rack
- * query, and only when the term is one of the rack words we actually fold.
- */
-function nameHas(nm, term) {
-  if (nm.includes(term)) return true;
-  const synonyms = NAME_TERM_SYNONYMS[term];
-  if (!synonyms) return false;
-  for (const alias of synonyms) {
-    if (nm.includes(alias)) return true;
-  }
-  return false;
-}
-
-/**
- * Every distinct millimetre value mentioned by a product.
- *
- * Two patterns, because sizes are written two ways in this catalogue: with an
- * explicit unit ("900 mm") and as a bare number next to a dimension letter
- * ("W565 x D280 x H650", "Khoang tủ: 900"). Matching on the NUMBER rather than
- * the surrounding text is what makes "700" find a 700mm rack and not a 7000mm
- * one, nor a rack whose only "700" is in its price.
- */
-function mmValues(text) {
-  const out = new Set();
-  const withUnit = /(\d{1,4})\s*mm/gi;
-  const withDimension = /[wdh]\s*[:=]?\s*(\d{1,4})/gi;
-  let match;
-  while ((match = withUnit.exec(text))) out.add(parseInt(match[1], 10));
-  while ((match = withDimension.exec(text))) out.add(parseInt(match[1], 10));
-  return out;
-}
-
-/**
- * Pull every field the scorer reads off a catalogue product into folded text.
- *
- * The product shape here is catalogue.js's normaliseProduct() output
- * ({ name, model, brand, category, summary, feats, specs }), where `specs` is
- * an array of [key, value] pairs rather than vai-avatar's plain object. That
- * difference is the only thing the port has to reconcile.
- */
-function fieldsOf(product) {
-  const specsText = sd((product.specs || []).map(([key, value]) => `${key} ${value}`).join(' '));
-  return {
-    name: sd(product.name || ''),
-    sku: sd(product.model || product.sku || ''),
-    brand: sd(product.brand || ''),
-    category: sd(product.category || ''),
-    summary: sd(product.summary || ''),
-    feats: sd((product.feats || []).join(' ')),
-    specsText,
-  };
-}
-
-/**
- * Score one product against one query. Ported from vai-avatar's scoreProduct.
- *
- * The bonuses are copied verbatim, including their magnitudes, because the
- * RELATIVE order of the rules is the behaviour: a 1000-point exact SKU must
- * still outrank a 300-point all-terms-in-title, which it only does if the
- * numbers stay as they are.
- */
-export function scoreProduct(product, query, terms) {
-  const { name: nm, sku: sk, brand: br, category: cat, summary, feats, specsText } = fieldsOf(product);
-  const rawQuery = sd(String(query || '').trim());
-  let score = 0;
-
-  // ── Exact model / SKU / title ────────────────────────────────────────────
-  // Typing a concrete model code is a lookup, so that product must come first.
-  // Both sides are compacted so "GP 170 BD" folds onto "gp170bd".
-  const compactQuery = rawQuery.replace(/[^a-z0-9]/g, '');
-  const compactName = nm.replace(/[^a-z0-9]/g, '');
-  const compactSku = sk.replace(/[^a-z0-9]/g, '');
-  if (compactQuery.length >= 4) {
-    if (compactSku === compactQuery) score += 1000;
-    else if (compactName === compactQuery) score += 900;
-    else if (compactName.includes(compactQuery) || compactSku.includes(compactQuery)) score += 550;
-    // The sku-as-substring tier must not fire for a TRIVIALLY SHORT sku. A
-    // query "eurogold" must not award 400 to a Grob product whose sku is
-    // "GOLD" (4 chars) just because "eurogold" happens to contain "gold" --
-    // that is why brand searches kept surfacing unrelated "gold" items above
-    // the Eurogold ones. A sku is a specific identity only when it is 5+
-    // characters (or strictly longer than half the query), so require both.
-    else if (compactSku.length >= Math.max(5, compactQuery.length / 2) && compactQuery.includes(compactSku)) score += 400;
-  }
-  // Every meaningful term present in the title is a strong signal too.
-  const significantTerms = terms.filter(term => term.length > 1 && !/^\d{2,4}mm/.test(term));
-  if (significantTerms.length && significantTerms.every(term => nameHas(nm, term))) score += 300;
-
-  const all = [nm, br, cat, sd(product.summary || ''), feats, specsText].join(' ');
-
-  // Note vai-avatar compares the ORIGINAL query here, not the folded one, so an
-  // accented query can still match an unaccented field exactly.
-  const rawTrimmed = String(query || '').trim();
-  if (nm === rawTrimmed) score += 200;
-  else if (sk === rawTrimmed) score += 180;
-  else if (nm.includes(rawTrimmed)) score += 100;
-  else if (sk.includes(rawTrimmed)) score += 80;
-  else if (all.includes(rawTrimmed)) score += 50;
-
-  // ── Size (mm) matching ──────────────────────────────────────────────────
-  const productMm = mmValues(`${nm} ${specsText} ${sd(product.summary || '')} ${feats} ${summary}`);
-  const queryMm = mmValues(rawTrimmed);
-  if ([...queryMm].some(value => productMm.has(value))) {
-    if (nm.includes(rawTrimmed)) score += 40;
-    else if (nm.split(' ').some(token => /^\d{1,4}mm$/i.test(token))) score += 55;
-    else if (specsText !== '') score += 50;
-    else score += 40;
-  } else if (queryMm.size) {
-    score -= 10;
-  }
-
-  // Size tokens written out in the query ("700mm") are worth more than a bare
-  // numeric match, because typing the unit means the size is deliberate.
-  for (const token of terms.filter(term => /^\d{2,4}\s*mm$/.test(term))) {
-    const compact = token.replace(/\s+/g, '');
-    if (nm.includes(compact)) score += 60;
-    else if (sk.includes(compact)) score += 40;
-    else if (all.includes(compact)) score += 25;
-  }
-
-  // ── Material ─────────────────────────────────────────────────────────────
-  for (const material of MATERIAL_WORDS) {
-    const folded = sd(material);
-    if (rawQuery.includes(folded) && (nm.includes(folded) || specsText.includes(folded) || sd(product.summary || '').includes(folded))) {
-      score += 30;
-      break;
-    }
-  }
-
-  // ── Per-term scoring ─────────────────────────────────────────────────────
-  let titleHits = 0;
-  const meaningful = terms.filter(term => term.length > 1 && !/^\d{2,4}\s*mm$/.test(term));
-  for (const term of meaningful) {
-    if (nameHas(nm, term)) { score += 16; titleHits++; }
-    else if (sk.includes(term)) score += 12;
-    else if (br.includes(term)) score += 8;
-    else if (cat.includes(term)) score += 10;
-    else if (all.includes(term)) score += 3;
-  }
-  // Covering more of the query beats matching one word hard.
-  if (titleHits >= 2) score += 35;
-  else if (titleHits === 1 && meaningful.length >= 2) score += 10;
-  for (const term of meaningful) if (cat.includes(term)) score += 6;
-
-  for (const brand of BRAND_NAMES) {
-    if (rawQuery.includes(brand) && br.includes(brand)) score += 50;
-  }
-  return score;
-}
-
-/**
- * Rank a catalogue against a query, vai-avatar's way.
- *
- * `items` is the Map that catalogue.js hands the worker. Returns the same
- * `{ sku, score, product }` shape searchCatalogue returns, so merge.js needs no
- * change to accept it.
- *
- * Scored results only: a product nobody matched is not a weak result, it is
- * not a result, and returning it would put an unrelated photograph in the
- * field next to the query that was typed.
- */
-export function searchLikeAvatar(text, items, limit = 24) {
-  const terms = extractTerms(text);
-  if (!terms.length || !items?.size) return [];
-  const scored = [];
-  for (const product of items.values()) {
-    const score = scoreProduct(product, String(text || '').trim(), terms);
-    // A score below 24 is a single weak token scrape, not an answer: it would
-    // paint an unrelated photograph next to the query typed. Kept in sync with
-    // the merge.js productFloor default (20) plus the two strongest weak tiers
-    // (16 title + 3+10 hit bonus) — anything under it is noise.
-    if (score >= 24) scored.push({ sku: product.sku, score, product });
-  }
-  scored.sort((a, b) => b.score - a.score || a.sku.localeCompare(b.sku));
-
-  /**
-   * Break equal-score ties so one brand-family does not swallow the field.
-   *
-   * "kệ xoong" matches ~70 racks across Grob/Hafele/Eurogold at the same
-   * score, and the plain sku tie-break above lets the alphabetically-first
-   * family (Grob's C1..., Hafele's 5...) take every slot -- Eurogold's E...
-   * rows never surface even though they are equally the answer. Round-robin
-   * WITHIN each equal-score group: one product per brand, repeated, so the
-   * field shows every family that actually matched, while a genuinely higher
-   * score still outranks a lower one.
-   */
-  if (scored.length > 1) {
-    const byScore = new Map();
-    for (const hit of scored) {
-      if (!byScore.has(hit.score)) byScore.set(hit.score, []);
-      byScore.get(hit.score).push(hit);
-    }
-    const ordered = Array.from(byScore.keys()).sort((a, b) => b - a);
-    const roundRobin = [];
-    for (const score of ordered) {
-      const group = byScore.get(score);
-      const grouped = new Map();
-      for (const hit of group) {
-        const brand = (hit.product?.brand || '').toLowerCase() || 'unknown';
-        if (!grouped.has(brand)) grouped.set(brand, []);
-        grouped.get(brand).push(hit);
-      }
-      let progress = true;
-      while (progress) {
-        progress = false;
-        for (const entries of grouped.values()) {
-          if (entries.length) {
-            roundRobin.push(entries.shift());
-            progress = true;
-          }
-        }
-      }
-    }
-    scored.length = 0;
-    scored.push(...roundRobin);
-  }
-
-  return scored.slice(0, limit);
-}
-
-/** Exported for the suggestion-style callers that only need folded tokens. */
-export { tokenize };