https://github.com/oaarnikoivu/semantic-combobox
Using embeddings from a pre-trained language model to provide semantic search capabilities in a combobox interface, directly in the browser.
https://github.com/oaarnikoivu/semantic-combobox
combobox react semantic-search shadcn-ui similarity-search transformersjs web-worker-react
Last synced: 6 months ago
JSON representation
Using embeddings from a pre-trained language model to provide semantic search capabilities in a combobox interface, directly in the browser.
- Host: GitHub
- URL: https://github.com/oaarnikoivu/semantic-combobox
- Owner: oaarnikoivu
- Created: 2025-03-02T14:05:33.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-02T19:17:31.000Z (over 1 year ago)
- Last Synced: 2025-03-02T19:23:16.738Z (over 1 year ago)
- Topics: combobox, react, semantic-search, shadcn-ui, similarity-search, transformersjs, web-worker-react
- Language: TypeScript
- Homepage: https://codesandbox.io/p/devbox/github/oaarnikoivu/semantic-combobox
- Size: 70.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Semantic Combobox
Using embeddings from a pre-trained language model to provide semantic search capabilities in a combobox interface, directly in the browser.
[Demo](https://codesandbox.io/p/devbox/github/oaarnikoivu/semantic-combobox)
## Made with
- [shadcn/ui Combobox](https://ui.shadcn.com/docs/components/combobox)
- [Transformers.js](https://huggingface.co/docs/transformers.js/en/index)
## How it works
1. The application loads a BERT model in a Web Worker
2. Sentences are converted to vector embeddings when the app initializes
3. As you type in the search box, your query is converted to an embedding
4. The app computes cosine similarity between your query and all sentences
5. Results are sorted by similarity and displayed in real-time
## Project structure
- `src/pipeline.ts`: Transformers pipeline class using the singleton pattern for lazily creating a single instance of the pipeline
- `src/components/semantic-combobox.tsx`: Main component with UI logic
- `src/worker.ts`: Web Worker for handling similarity search
- `src/hooks/use-semantic-search.ts`: Hook for handling semantic search
- `src/types.ts`: Shared type definitions
- `src/constants.ts`: Constants