Semantic Search in the browser with Transformers.js and Marimo

import%20marimo%0A%0A__generated_with%20%3D%20%220.11.17%22%0Aapp%20%3D%20marimo.App(%0A%20%20%20%20width%3D%22medium%22%2C%0A%20%20%20%20app_title%3D%22Semantic%20Search%20in%20the%20browser%20with%20Transformers.js%20and%20Marimo%22%2C%0A)%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20import%20marimo%20as%20mo%0A%20%20%20%20return%20(mo%2C)%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20%20%20%20%20%23%20Semantic%20Search%20in%20the%20browser%20with%20Transformers.js%20and%20Marimo%0A%0A%20%20%20%20%20%20%20%20*By%20%5BHarry%20Vangberg%5D(https%3A%2F%2Fharry.vangberg.name)*%0A%0A%20%20%20%20%20%20%20%20%5BMarimo%5D(https%3A%2F%2Fmarimo.io%2F)%20is%20a%20next-gen%20reactive%20Python%20notebook.%20Notebooks%20can%20run%20in%20the%20browser%2C%20thanks%20to%20%5BPyodide%5D(https%3A%2F%2Fpyodide.org%2F)-powered%20%5BWASM%20export%5D(https%3A%2F%2Fdocs.marimo.io%2Fguides%2Fwasm%2F).%20In%20this%20notebook%20I%20will%20walk%20through%20using%20%5BTransformers.js%5D(https%3A%2F%2Fhuggingface.co%2Fdocs%2Ftransformers.js%2Fen%2Findex)%20from%20%5BHuggingFace%5D(https%3A%2F%2Fhuggingface.co%2F)%20in%20combination%20with%20Marimo%20to%20build%20a%20semantic%20search%20solution%20that%20runs%20entirely%20in%20the%20browser.%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20%20%20%20%20%23%23%20Sentences%0A%0A%20%20%20%20%20%20%20%20The%20input%20sentences%20that%20we%20want%20to%20search%3A%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20sentences%20%3D%20%5B%0A%20%20%20%20%20%20%20%20%22The%20giraffe%20stretched%20its%20long%20neck.%22%2C%0A%20%20%20%20%20%20%20%20%22The%20tiger%20prowled%20through%20the%20jungle.%22%2C%0A%20%20%20%20%20%20%20%20%22Boats%20float%20on%20the%20water.%22%2C%0A%20%20%20%20%20%20%20%20%22The%20monkey%20swung%20from%20tree%20to%20tree.%22%2C%0A%20%20%20%20%20%20%20%20%22Dogs%20bark%20at%20passing%20strangers.%22%2C%0A%20%20%20%20%20%20%20%20%22The%20dolphin%20jumped%20out%20of%20the%20ocean.%22%2C%0A%20%20%20%20%20%20%20%20%22Trains%20move%20along%20steel%20tracks.%22%2C%0A%20%20%20%20%20%20%20%20%22The%20owl%20hunted%20during%20the%20night.%22%2C%0A%20%20%20%20%20%20%20%20%22Bicycles%20require%20pedaling%20to%20move.%22%2C%0A%20%20%20%20%20%20%20%20%22The%20penguin%20waddled%20across%20the%20ice.%22%2C%0A%20%20%20%20%5D%0A%20%20%20%20return%20(sentences%2C)%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20%20%20%20%20%23%23%20Embeddings%0A%0A%20%20%20%20%20%20%20%20To%20generate%20vector%20embeddings%2C%20we%20will%20use%20%5BTransformers.js.py%5D(https%3A%2F%2Fgithub.com%2Fwhitphx%2Ftransformers.js.py)%2C%20a%20package%20that%20allows%20us%20to%20use%20Transformers.js%20from%20Pyodide.%20We%20use%20the%20feature%20extraction%20pipeline%20with%20the%20%5Ball-MiniLM-l6-v2%5D(https%3A%2F%2Fhuggingface.co%2Fsentence-transformers%2Fall-MiniLM-L6-v2)%20sentence%20transformer%20model.%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Aasync%20def%20_(sentences)%3A%0A%20%20%20%20import%20micropip%0A%0A%20%20%20%20await%20micropip.install(%22transformers-js-py%22)%0A%20%20%20%20from%20transformers_js_py%20import%20import_transformers_js%0A%0A%20%20%20%20transformers%20%3D%20await%20import_transformers_js()%0A%20%20%20%20pipeline%20%3D%20transformers.pipeline%0A%0A%0A%20%20%20%20async%20def%20get_embeddings(inputs)%3A%0A%20%20%20%20%20%20%20%20extractor%20%3D%20await%20pipeline(%22feature-extraction%22%2C%20%22Xenova%2Fall-MiniLM-L6-v2%22)%0A%20%20%20%20%20%20%20%20output%20%3D%20await%20extractor(inputs%2C%20%7B%22pooling%22%3A%20%22mean%22%2C%20%22normalize%22%3A%20True%7D)%0A%20%20%20%20%20%20%20%20return%20output.to_numpy()%0A%0A%0A%20%20%20%20embeddings%20%3D%20await%20get_embeddings(sentences)%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20embeddings%2C%0A%20%20%20%20%20%20%20%20get_embeddings%2C%0A%20%20%20%20%20%20%20%20import_transformers_js%2C%0A%20%20%20%20%20%20%20%20micropip%2C%0A%20%20%20%20%20%20%20%20pipeline%2C%0A%20%20%20%20%20%20%20%20transformers%2C%0A%20%20%20%20)%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20%20%20%20%20%23%23%20Search%0A%0A%20%20%20%20%20%20%20%20Finally%2C%20we%20have%20arrived.%20Whenever%20the%20text%20input%20below%20is%20updated%2C%20an%20embedding%20is%20generated%20from%20the%20search%20query.%20We%20use%20%5Bscikit-learn%5D(https%3A%2F%2Fscikit-learn.org%2F)%20to%20perform%20%5Bnearest%20neighbor%20search%5D(https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FNearest_neighbor_search)%20and%20return%20the%20three%20nearest%20sentences.%20Try%20to%20change%20the%20search%20query%20below%20to%20%22Animals%22.%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20search%20%3D%20mo.ui.text(%22Vehicles%22%2C%20placeholder%3D%22Search%22%2C%20debounce%3DFalse)%0A%20%20%20%20search%0A%20%20%20%20return%20(search%2C)%0A%0A%0A%40app.cell%0Aasync%20def%20_(embeddings%2C%20get_embeddings%2C%20search%2C%20sentences)%3A%0A%20%20%20%20from%20sklearn.neighbors%20import%20NearestNeighbors%0A%0A%20%20%20%20nn%20%3D%20NearestNeighbors(n_neighbors%3D3%2C%20algorithm%3D%22auto%22)%0A%20%20%20%20nn.fit(embeddings)%0A%0A%20%20%20%20search_embeddings%20%3D%20await%20get_embeddings(search.value)%0A%0A%20%20%20%20distances%2C%20indices%20%3D%20nn.kneighbors(search_embeddings%5B0%5D.reshape(1%2C%20-1))%0A%0A%20%20%20%20nearest_sentences%20%3D%20%5Bsentences%5Bidx%5D%20for%20idx%20in%20indices%5B0%5D%5D%0A%20%20%20%20nearest_sentences%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20NearestNeighbors%2C%0A%20%20%20%20%20%20%20%20distances%2C%0A%20%20%20%20%20%20%20%20indices%2C%0A%20%20%20%20%20%20%20%20nearest_sentences%2C%0A%20%20%20%20%20%20%20%20nn%2C%0A%20%20%20%20%20%20%20%20search_embeddings%2C%0A%20%20%20%20)%0A%0A%0Aif%20__name__%20%3D%3D%20%22__main__%22%3A%0A%20%20%20%20app.run()%0A