On this article, you’ll find out how sentence embeddings work and how you can construct a totally client-side semantic search engine utilizing Transformers.js, with no server, no API key, and no backend infrastructure required.<\/p>\n
Matters we are going to cowl embrace:<\/p>\n
How sentence embeddings and cosine similarity type the muse of semantic search.
\nThe right way to generate and cache embeddings utilizing the Transformers.js feature-extraction pipeline, together with batching and Internet Employee offloading.
\nThe right way to construct a whole, reusable SemanticSearch class and persist its index throughout web page masses.<\/p>\n
![\"Building](\"https:\/\/machinelearningmastery.com\/wp-content\/uploads\/2026\/06\/mlm-building-semantic-search-with-transformers-js-and-sentence-embeddings-feat.png\")
<\/p>\nConstructing Semantic Search with Transformers.js and Sentence Embeddings<\/p>\n<\/div>\n
Introduction<\/h2>\n
You\u2019ve in all probability shipped this bug earlier than, the place a consumer sorts \u201creasonably priced laptop computer\u201d into your search bar and will get zero outcomes. However you recognize the database has dozens of laptop computer articles. They\u2019re simply all titled \u201cfinances pocket book.\u201d The phrases are totally different. The that means is similar. Key phrase search treats each as unrelated strings.<\/p>\n
This isn\u2019t an edge case. It\u2019s the core limitation of key phrase matching: it compares characters, not ideas. It doesn\u2019t know that \u201ccancel\u201d and \u201creturn\u201d describe associated actions, that \u201cdamaged\u201d and \u201cfaulty\u201d imply the identical factor, or that \u201cI can\u2019t log in\u201d and \u201caccount entry problem\u201d are the identical downside phrased two alternative ways.<\/p>\n
What Sentence Embeddings Truly Are<\/h2>\n
Semantic search fixes this by evaluating that means. And with Transformers.js, you may construct it totally within the browser with no server, no API key, and no backend infrastructure. This tutorial walks via the total pipeline: how sentence embeddings work, how you can generate them, how cosine similarity scores relevance, and how you can wire all of it right into a working data base search utility.<\/p>\n
A transformer mannequin can’t course of uncooked textual content. Earlier than any computation occurs, a sentence must develop into numbers. Embeddings are the results of that conversion: a sentence represented as an inventory of floating-point values known as a vector.<\/p>\n
The important thing property isn\u2019t simply that sentences develop into numbers. It\u2019s that sentences with comparable that means develop into vectors which might be geometrically shut to one another in the identical vector area.<\/p>\n
The mannequin used all through this tutorial, sentence-transformers\/all-MiniLM-L6-v2, maps each sentence to a degree in a 384-dimensional vector area. The mannequin was fine-tuned on over 1 billion sentence pairs particularly to be taught this geometric property. \u201cI must cancel my order\u201d and \u201cHow do I return a product?\u201d find yourself shut collectively. \u201cThe climate is gorgeous immediately\u201d finally ends up removed from each.<\/p>\n
The 384 dimensions aren\u2019t human-readable. You’ll be able to\u2019t take a look at dimension 47 and say what it encodes. What issues for search isn’t any particular person dimension however the distance between two vectors. Brief distance means comparable that means. Giant distance means unrelated.<\/p>\n
![\"A](\"https:\/\/machinelearningmastery.com\/wp-content\/uploads\/2026\/06\/MLM-Shittu-A-3D-scatter-plot-diagram-illustrating-how-semantically-similar-sentences-cluster-together-in-vector-space.png\")
<\/p>\nA 3D scatter plot diagram illustrating how semantically comparable sentences cluster collectively in vector area (click on to enlarge)<\/p>\n<\/div>\n
Pooling and Normalization<\/h2>\n
The uncooked transformer mannequin outputs one vector per token; each phrase and subword in a sentence will get its personal vector. For semantic search, you want one vector per sentence.<\/p>\n
Imply pooling handles this by averaging all token vectors, weighted by the eye masks, so padding tokens don\u2019t contribute. Normalization then scales the consequence to unit size (magnitude = 1), which simplifies the similarity calculation lined within the subsequent part.<\/p>\n
In Transformers.js, each occur robotically once you move { pooling: \u2018imply\u2019, normalize: true } to the pipeline name. With out these choices, you get token-level embeddings, that are helpful for duties like named entity recognition, however not for sentence-level search.<\/p>\n
The Function-Extraction Pipeline<\/h2>\n
The feature-extraction job is totally different from each different Transformers.js pipeline. Duties like text-classification or question-answering return human-readable outputs: labels, scores, strings. feature-extraction returns the uncooked vector representations that the mannequin computed internally. You\u2019re working one degree decrease, getting the numbers that every one higher-level duties are constructed on prime of.<\/p>\n
\nimport { pipeline } from ‘https:\/\/cdn.jsdelivr.web\/npm\/@huggingface\/transformers@3.0.2’;
\n
\n\/\/ Load the feature-extraction pipeline
\n\/\/ Xenova\/all-MiniLM-L6-v2 is the ONNX-converted model of
\n\/\/ sentence-transformers\/all-MiniLM-L6-v2 — similar mannequin weights, browser-compatible format
\nconst extractor = await pipeline(
\n ‘feature-extraction’,
\n ‘Xenova\/all-MiniLM-L6-v2’,
\n { dtype: ‘q8’ } \/\/ 8-bit quantization: smaller obtain (~23 MB), good accuracy
\n);
\n
\n\/\/ Embed a single sentence
\n\/\/ pooling: ‘imply’ — averages all token vectors into one sentence vector
\n\/\/ normalize: true — scales the consequence to unit size (wanted for cosine similarity)
\nconst output = await extractor(‘I need assistance with my order’, {
\n pooling: ‘imply’,
\n normalize: true
\n});
\n
\nconsole.log(output);
\n\/\/ Tensor {
\n\/\/ dims: [1, 384], \/\/ 1 sentence, 384 dimensions
\n\/\/ kind: ‘float32’,
\n\/\/ knowledge: Float32Array(384) \/\/ the precise numbers
\n\/\/ }
\n
\n\/\/ Convert to a plain JavaScript array to be used in your personal code
\nconst vector = output.tolist()[0]; \/\/ [0.045, 0.073, -0.012, …] — 384 numbers
\nconsole.log(`Vector size: ${vector.size}`); \/\/ 384<\/p>\n
1<\/p>\n
2<\/p>\n
3<\/p>\n
4<\/p>\n
5<\/p>\n
6<\/p>\n
7<\/p>\n
8<\/p>\n
9<\/p>\n
10<\/p>\n
11<\/p>\n
12<\/p>\n
13<\/p>\n
14<\/p>\n
15<\/p>\n
16<\/p>\n
17<\/p>\n
18<\/p>\n
19<\/p>\n
20<\/p>\n
21<\/p>\n
22<\/p>\n
23<\/p>\n
24<\/p>\n
25<\/p>\n
26<\/p>\n
27<\/p>\n
28<\/p>\n
29<\/p>\n<\/div>\n
import<\/span> <\/span>{<\/span> <\/span>pipeline<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>‘https:\/\/cdn.jsdelivr.web\/npm\/@huggingface\/transformers@3.0.2’<\/span>;<\/span><\/p>\n \u00a0<\/p>\n \/\/ Load the feature-extraction pipeline<\/span><\/p>\n \/\/ Xenova\/all-MiniLM-L6-v2 is the ONNX-converted model of<\/span><\/p>\n \/\/ sentence-transformers\/all-MiniLM-L6-v2 — similar mannequin weights, browser-compatible format<\/span><\/p>\n const<\/span> <\/span>extractor<\/span> <\/span>=<\/span> <\/span>await <\/span>pipeline<\/span>(<\/span><\/p>\n \u00a0\u00a0<\/span>‘feature-extraction’<\/span>,<\/span><\/p>\n \u00a0\u00a0<\/span>‘Xenova\/all-MiniLM-L6-v2’<\/span>,<\/span><\/p>\n \u00a0\u00a0<\/span>{<\/span> <\/span>dtype<\/span>:<\/span> <\/span>‘q8’<\/span> <\/span>}<\/span>\u00a0\u00a0<\/span>\/\/ 8-bit quantization: smaller obtain (~23 MB), good accuracy<\/span><\/p>\n )<\/span>;<\/span><\/p>\n \u00a0<\/p>\n \/\/ Embed a single sentence<\/span><\/p>\n \/\/ pooling: ‘imply’\u00a0\u00a0— averages all token vectors into one sentence vector<\/span><\/p>\n \/\/ normalize: true\u00a0\u00a0— scales the consequence to unit size (wanted for cosine similarity)<\/span><\/p>\n const<\/span> <\/span>output<\/span> <\/span>=<\/span> <\/span>await <\/span>extractor<\/span>(<\/span>‘I need assistance with my order’<\/span>,<\/span> <\/span>{<\/span><\/p>\n \u00a0\u00a0<\/span>pooling<\/span>:<\/span> <\/span>‘imply’<\/span>,<\/span><\/p>\n \u00a0\u00a0<\/span>normalize<\/span>:<\/span> <\/span>true<\/span><\/p>\n }<\/span>)<\/span>;<\/span><\/p>\n \u00a0<\/p>\n console<\/span>.<\/span>log<\/span>(<\/span>output<\/span>)<\/span>;<\/span><\/p>\n \/\/ Tensor {<\/span><\/p>\n \/\/\u00a0\u00a0 dims: [1, 384],\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ 1 sentence, 384 dimensions<\/span><\/p>\n \/\/\u00a0\u00a0 kind: ‘float32’,<\/span><\/p>\n \/\/\u00a0\u00a0 knowledge: Float32Array(384)\u00a0\u00a0\/\/ the precise numbers<\/span><\/p>\n \/\/ }<\/span><\/p>\n \u00a0<\/p>\n \/\/ Convert to a plain JavaScript array to be used in your personal code<\/span><\/p>\n const<\/span> <\/span>vector<\/span> <\/span>=<\/span> <\/span>output<\/span>.<\/span>tolist<\/span>(<\/span>)<\/span>[<\/span>0<\/span>]<\/span>;<\/span>\u00a0\u00a0<\/span>\/\/ [0.045, 0.073, -0.012, …] — 384 numbers<\/span><\/p>\n console<\/span>.<\/span>log<\/span>(<\/span>`<\/span>Vector <\/span>size<\/span>:<\/span> <\/span>$<\/span>{<\/span>vector<\/span>.<\/span>size<\/span>}<\/span>`<\/span>)<\/span>;<\/span>\u00a0\u00a0<\/span>\/\/ 384<\/span><\/p>\n<\/div><\/div><\/div>\n What this code does:<\/p>\n pipeline() downloads and initializes the mannequin on first run (the browser caches it after that, so subsequent web page masses are instantaneous) The Tensor object returned by feature-extraction has three fields price figuring out:<\/p>\n dims is the form [n_sentences, 384]. Go one sentence and dims[0] is 1. Go ten sentences in a batch and dims[0] is 10. The second dimension is all the time 384 for this mannequin .tolist() converts the tensor to a nested JavaScript array, one interior array per sentence. output.tolist()[0] offers the vector for the primary sentence as a plain array of 384 numbers.<\/p>\n Passing an array of strings to the extractor processes all of them in a single mannequin name. That is considerably sooner than calling the pipeline as soon as per sentence, as a result of the transformer processes all inputs in parallel inside one ahead move.<\/p>\n \n\/\/ Embed a number of paperwork in a single name — all the time choose this over looping
1<\/p>\n 2<\/p>\n 3<\/p>\n 4<\/p>\n 5<\/p>\n 6<\/p>\n 7<\/p>\n 8<\/p>\n 9<\/p>\n 10<\/p>\n 11<\/p>\n 12<\/p>\n 13<\/p>\n 14<\/p>\n 15<\/p>\n 16<\/p>\n 17<\/p>\n 18<\/p>\n 19<\/p>\n 20<\/p>\n<\/div>\n \/\/ Embed a number of paperwork in a single name — all the time choose this over looping<\/span><\/p>\n const<\/span> <\/span>sentences<\/span> <\/span>=<\/span> <\/span>[<\/span><\/p>\n \u00a0\u00a0<\/span>‘How do I track my shipment?’<\/span>,<\/span><\/p>\n \u00a0\u00a0<\/span>‘What is your return policy?’<\/span>,<\/span><\/p>\n \u00a0\u00a0<\/span>‘How can I reset my password?’<\/span>,<\/span><\/p>\n \u00a0\u00a0<\/span>‘Do you offer international delivery?’<\/span><\/p>\n ]<\/span>;<\/span><\/p>\n \u00a0<\/p>\n const<\/span> <\/span>batchOutput<\/span> <\/span>=<\/span> <\/span>await <\/span>extractor<\/span>(<\/span>sentences<\/span>,<\/span> <\/span>{<\/span><\/p>\n \u00a0\u00a0<\/span>pooling<\/span>:<\/span> <\/span>‘imply’<\/span>,<\/span><\/p>\n \u00a0\u00a0<\/span>normalize<\/span>:<\/span> <\/span>true<\/span><\/p>\n }<\/span>)<\/span>;<\/span><\/p>\n \u00a0<\/p>\n \/\/ batchOutput.dims = [4, 384] — 4 sentences, every with 384 dimensions<\/span><\/p>\n console<\/span>.<\/span>log<\/span>(<\/span>`<\/span>Batch <\/span>form<\/span>:<\/span> <\/span>[<\/span>$<\/span>{<\/span>batchOutput<\/span>.<\/span>dims<\/span>}<\/span>]<\/span>`<\/span>)<\/span>;<\/span><\/p>\n \u00a0<\/p>\n \/\/ Convert to array of arrays — one 384-element array per sentence<\/span><\/p>\n const<\/span> <\/span>vectors<\/span> <\/span>=<\/span> <\/span>batchOutput<\/span>.<\/span>tolist<\/span>(<\/span>
\nYou then name the extractor with a string and the 2 choices that provide you with a single, normalized sentence vector
\nThe result’s a Tensor object; calling .tolist()[0] converts it to a plain JavaScript array of 384 numbers you may work with straight<\/p>\nUnderstanding the Output Tensor<\/h3>\n
\nkind is \u2018float32\u2018, that means every of the 384 values is a 32-bit floating-point quantity
\nknowledge is a Float32Array containing all of the numbers in row-major order. For a batch of three sentences, it is a flat array of three \u00d7 384 = 1,152 numbers<\/p>\nBatching: Embed A number of Sentences at As soon as<\/h2>\n
\nconst sentences = [
\n ‘How do I track my shipment?’,
\n ‘What is your return policy?’,
\n ‘How can I reset my password?’,
\n ‘Do you offer international delivery?’
\n];
\n
\nconst batchOutput = await extractor(sentences, {
\n pooling: ‘imply’,
\n normalize: true
\n});
\n
\n\/\/ batchOutput.dims = [4, 384] — 4 sentences, every with 384 dimensions
\nconsole.log(`Batch form: [${batchOutput.dims}]`);
\n
\n\/\/ Convert to array of arrays — one 384-element array per sentence
\nconst vectors = batchOutput.tolist();
\nconsole.log(`Variety of vectors: ${vectors.size}`); \/\/ 4
\nconsole.log(`Every vector has: ${vectors[0].size} dimensions`); \/\/ 384<\/p>\n