feat(demo): bilingual training-free recommendation pipeline visualization - #27
Merged
Conversation
…lization Introduce a static HTML/JS bundle under docs/demo/ that visualizes the four-module online pipeline (Interest Sketch → Semantic Search → Zero-Shot Rerank → MSCP Confidence) on a 26-recipe Food.com seed dataset. The bundle ships as React 18 + Babel standalone (no build step) and is bilingual via the ?lang= URL parameter (en/kr) with navigator.language fallback. URL parameters are preserved across language switches via URLSearchParams so attribution links (utm_source, etc.) survive toggles. Architecture is layered for separation of concerns: data/ holds the master taxonomy plus 26 seed recipes plus the four pipeline functions (buildSketch / semanticSearch / zeroShotRerank / computeConfidenceAndGround + runPipeline wrapper); src/i18n.js owns every user-facing string for both languages; src/components.jsx is locale-neutral and consumes a single L prop; src/app.jsx is the single entry that resolves the locale and mounts the App. JsonView HTML-escapes JSON before regex highlight to neutralize XSS via user query echo. Accessibility patches: form labels via htmlFor, aria-pressed/aria-checked on toggle buttons, role=tab/tablist with aria-current, role=region for the JSON output, hrefLang on lang switch, global :focus-visible ring. Responsive breakpoints at 1200/768/480 px; mobile stacks the sidebar above the main column and the tab bar becomes a horizontal scroller. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Add 28 zero-install unit tests under docs/demo/tests/ executed via Node's built-in node:test runner. pipeline.test.cjs (20 tests) loads the data + pipeline scripts in a vm context that simulates the browser window global, then exercises: - buildSketch keyword extraction, liked/disliked facet pulling, hard filter passthrough, ambiguity notes, and undefined-arg defaults - semanticSearch dietary/max_time filters, top30 cap, score floor, CF feature attachment - zeroShotRerank pass count, 1-indexed candidate ids, rationale keying - computeConfidenceAndGround topK cap, MSCP range, band classification, SID format guard, ranks-1..N invariant, allVotes desc ordering - runPipeline end-to-end on the cozy-vegetarian and spicy-quick presets - buildSid empty-flavors fallback (regression guard) i18n.test.cjs (8 tests) loads i18n.js in a separate vm context and verifies EN/KR top-level key parity, structural path parity (arrays expanded by index), preset id alignment with stable liked/disliked/ filters/topK across languages, tab id parity, otherLang shape after the URL-param refactor, and pipeline tKey alignment with runPipeline emitted timing keys. The shared loader (_loader.cjs) normalises cross-realm prototype identity via JSON roundtrip where deep-equality checks would otherwise fail on the vm context boundary. Run: cd docs/demo && node --test tests/*.test.cjs Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Add a Live Demo section to both README.md and README.ko.md (placed between the Phase 1 status paragraph and the table of contents) that links to docs/demo/index.html and explains the bilingual ?lang= switch and the client-only execution model. Embed three screenshots captured against the live demo: - desktop-en.png — primary view, 1440x900, EN locale, Final Recommendations tab - desktop-kr.png — same view in Korean, used as the primary image in README.ko.md - mobile-en.png — 375 wide, illustrates the stacked sidebar and single-column cards The KR README inverts the gallery order so the Korean view leads. The "More views" block is collapsed inside <details> so the README reads cleanly without overwhelming readers. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Add a static HTML/JS demo bundle under
docs/demo/that visualizes the four-module training-free recommendation pipeline (Interest Sketch → Semantic Search → Zero-Shot Rerank → MSCP Confidence) on a 26-recipe Food.com seed. Bilingual EN/KR via the?lang=URL parameter; no build step required.The PR is fully isolated: only adds files under
docs/demo/and edits the two top-level READMEs to link the demo. No Python or existing source touched.What's in each commit
feat(demo)— bundle:index.html,bright.css,data/{taxonomy,recipes,pipeline}.js,src/{i18n.js, components.jsx, app.jsx}(1663 LoC). XSS-safeJsonView, URL-param-preserving language switch, full a11y (htmlFor labels, ARIA roles, focus-visible ring), responsive at 1200/768/480.test(demo)— 28 zero-install Node tests (docs/demo/tests/) covering every pipeline function, end-to-end runs of the cozy-vegetarian and spicy-quick presets, and EN/KR i18n key parity.docs— three captured screenshots (desktop EN, desktop KR, mobile EN) + Live Demo section inREADME.mdandREADME.ko.md.Test plan
cd docs/demo && node --test tests/*.test.cjs→ 28 passuv run pytest→ 87 pass (no Python touched)<svg/onload>,<img onerror>) escaped not executeddocs/demo/index.htmlover a local HTTP server (e.g.python3 -m http.server --directory docs/demo) and click through the seven tabs in both languagesdocs/demo/via GitHub Pages for a live linkNotes
unpkgwith SRI integrity hashes; demo intentionally avoids a build pipeline to stay debuggable from "View Source".tabbar.scrollWidth=1028, clientWidth=336.🤖 Generated with Claude Code