4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:T4fa,

In-browser AI search

transformers.jsreal

React ↗See the code →

real neural embeddings — no server, no API cost

Say: "vibe search for real = 171" — the actual model from 51's simulation, running in the page. Type a feeling, get ranked products with similarity scores.

52:Ta8b,.card { border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; display: flex; flex-direction: column; } .card > header { display: flex; align-items: baseline; gap: .8rem; padding: 1.1rem 1.2rem .9rem; border-bottom: 1px solid var(--line); } .card .num { font-family: var(--mono); color: var(--acc); font-size: 1.05rem; } .card h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; flex: 1; } .tags { display: flex; gap: .35rem; } .tags i { font: 400 .62rem/1 var(--mono); font-style: normal; color: var(--dim); border: 1px solid var(--line); border-radius: 99px; padding: .28em .6em; white-space: nowrap; } .demo { min-height: 250px; position: relative; display: flex; align-items: center; justify-content: center; background: var(--bg2); overflow: hidden; flex: 1; } .order { padding: .85rem 1.2rem; font-family: var(--mono); font-size: .72rem; color: var(--dim); border-top: 1px solid var(--line); } .order b { color: var(--txt); font-weight: 500; } .btn { font: 500 .8rem/1 var(--mono); color: var(--txt); background: transparent; border: 1px solid rgba(255,255,255,.25); border-radius: 99px; padding: .8em 1.6em; transition: border-color .3s; } .btn:hover { border-color: var(--acc); color: var(--acc); } .demo .btn.corner { position: absolute; top: 12px; right: 12px; padding: .55em 1em; font-size: .68rem; z-index: 5; } .ai-card .num { color: var(--acc2) !important; } .brief a.btn { text-decoration: none; text-align: center; } /* ---------- Section AA · heavy tech ---------- */ .heavy { width: 90%; font: 400 .7rem var(--mono); color: var(--txt); display: flex; flex-direction: column; gap: .7rem; } .heavy .hv-status { color: var(--dim); min-height: 1.4em; } .heavy .hv-status b { color: var(--acc); } .heavy input[type=text], .heavy textarea { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 8px; color: var(--txt); font: 400 .72rem var(--mono); padding: .6rem .8rem; width: 100%; } .heavy textarea { height: 58px; resize: none; } .heavy table { width: 100%; border-collapse: collapse; } .heavy td, .heavy th { padding: .4rem .5rem; border-bottom: 1px solid var(--line); text-align: left; color: var(--dim); } .heavy th { color: var(--txt); } .hv-hits { display: flex; flex-direction: column; gap: .4rem; } .hv-hit { border: 1px solid rgba(122,92,255,.35); border-radius: 8px; padding: .55rem .8rem; display: flex; justify-content: space-between; } .hv-hit b { color: var(--acc); font-weight: 500; } .demo:has(.hascheck input:checked) .hasbtn { border-color: var(--acc); color: var(--acc); pointer-events: auto; opacity: 1; }53:T162d,// @ts-nocheck — generated wrapper; inlined pattern JS is imperative DOM code, not authored TS. "use client"; // in-browser AI search (transformers.js) — Motion Menu import { useEffect, useRef } from "react"; const MARKUP = "

171

In-browser AI search

transformers.jsreal

React \u2197 See the code \u2192

\n \n

real neural embeddings \u2014 no server, no API cost

\n \n

Say: \"vibe search for real = 171\" \u2014 the actual model from 51's simulation, running in the page. Type a feeling, get ranked products with similarity scores.

"; export function BrowserAiSearchTransformersJs() { const hostRef = useRef(null); useEffect(() => { const host = hostRef.current; if (!host) return; const $ = (s: string) => host.querySelector(s) as HTMLElement | null; let disposed = false; const cleanup: Array<() => void> = []; (async () => { if (disposed) return; try { /* ---- 171 · in-browser AI search (transformers.js) ---- */ { const PRODUCTS = [ 'Luna cuff — hammered silver, quiet everyday bracelet', 'Vesper statement cuff — bold heavy silver piece', 'Aster pendant — delicate romantic necklace', 'Pearl drop earrings — classic wedding jewelry', 'Onyx signet ring — dark heavy masculine ring', 'Slate cord bracelet — minimal matte texture band', 'Walnut sit-stand desk — warm wood office furniture', 'Task chair mesh — ergonomic office seating', 'Brass floor lamp — warm ambient living room light', 'Rust wool rug — soft earthy floor textile', ]; const status = document.getElementById('tf-status'); const query = document.getElementById('tf-query'); const hits = document.getElementById('tf-hits'); let embedder = null, productVecs = null; const cos = (a, b) => { let dot = 0, na = 0, nb = 0; for (let i = 0; i < a.length; i++) { dot += a[i] * b[i]; na += a[i] * a[i]; nb += b[i] * b[i]; } return dot / (Math.sqrt(na) * Math.sqrt(nb)); }; document.getElementById('tf-load').addEventListener('click', async function () { this.disabled = true; try { status.innerHTML = 'loading all-MiniLM-L6-v2…'; const { pipeline } = await import('https://cdn.jsdelivr.net/npm/@huggingface/transformers@4.2.0'); embedder = await pipeline('feature-extraction', 'Xenova/all-MiniLM-L6-v2', { device: 'wasm', dtype: 'q8', progress_callback: (p) => { if (p.status === 'progress' && p.progress) status.innerHTML = `loading model… ${Math.round(p.progress)}%`; }, }); status.textContent = 'embedding the catalog…'; productVecs = []; for (const p of PRODUCTS) { const out = await embedder(p, { pooling: 'mean', normalize: true }); productVecs.push(Array.from(out.data)); } status.innerHTML = 'ready — real neural search, running on your device'; query.disabled = false; query.focus(); } catch (err) { status.textContent = 'model load failed: ' + err.message.slice(0, 80); this.disabled = false; } }); let deb = null; query.addEventListener('input', () => { clearTimeout(deb); deb = setTimeout(async () => { if (!embedder || !query.value.trim()) { hits.innerHTML = ''; return; } const out = await embedder(query.value, { pooling: 'mean', normalize: true }); const qv = Array.from(out.data); const ranked = PRODUCTS.map((p, i) => [p, cos(qv, productVecs[i])]).sort((a, b) => b[1] - a[1]).slice(0, 3); hits.innerHTML = ranked.map(([p, s]) => `

${p.split(' — ')[0]}${(s * 100).toFixed(1)}%

`).join(''); gsap.from('.hv-hit', { opacity: 0, y: 8, duration: 0.35, stagger: 0.07 }); }, 350); }); } } catch (err: any) { console.warn("[motion-menu] browser-ai-search-transformers-js failed to start:", err); } })(); return () => { disposed = true; cleanup.forEach((fn) => { try { fn(); } catch (_) {} }); }; }, []); return

; } export default BrowserAiSearchTransformersJs; 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","gsap",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/gsap","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"gsap"}]]}]}]]}],["$","$L4e",null,{"registryDependencies":[]}]]}],["$","$L4f",null,{"sourceUrl":"https://motion-menu-two.vercel.app/r/browser-ai-search-transformers-js.json","proxyUrl":"https://shadcnregistry.com/r/motion-menu/browser-ai-search-transformers-js","itemId":"@motion-menu/browser-ai-search-transformers-js"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"motion-menu/browser-ai-search-transformers-js.html","content":"$51","type":"registry:file","target":"motion-menu/browser-ai-search-transformers-js.html"},{"path":"motion-menu/browser-ai-search-transformers-js.css","content":"$52","type":"registry:file","target":"motion-menu/browser-ai-search-transformers-js.css"},{"path":"components/motion-menu/browser-ai-search-transformers-js.tsx","content":"$53","type":"registry:component"}]}]]}],"$L54"]}]

In Browser AI Search (transformers.js)

Installation

Files

motion-menu

components

Styles