2b:null 2c:["$","title",null,{"children":"Sentence Embeddings and Dimension Reduction in the Browser | Hugging Face | Observable"}] 31:T43e,# Sentence Embeddings and Dimension Reduction in the Browser [Transformers.js](https://huggingface.co/docs/transformers.js/index) is bringing state-of-the-art Machine Learning to the web, eliminating the need for a server. Inspired by the [Hugging Face’s transformers python library](https://huggingface.co/docs/transformers/index), is developed by [Xenova](https://github.com/xenova/transformers.js). It makes use of the [ONNX Runtime](https://onnxruntime.ai/) to run models in the browser. This notebook offers a brief guide on how to run the latest [feature-extraction](https://huggingface.co/tasks/feature-extraction) pipeline with one very popular model, [Sentence-transformers all-MiniLM-L6-v2](https://huggingface.co/sentence-transformers/all-MiniLM-L6-v2). This model is downloaded over two million times a month and is now also available as [ONNX weights](https://huggingface.co/Xenova/all-MiniLM-L6-v2). Finally, we run the embeddings through the Dimension Reduction JS library and run it through Dimension Reduction JS library [DruidJS](https://github.com/saehm/DruidJS)32:T860,create_parameter_form = (dr_method) => { switch (dr_method) { case "ISOMAP": case "LLE": case "LTSA": return html``; break; case "SAMMON": return html``; break; case "TSNE": return html``; break; case "UMAP": return html``; break; case "TriMap": return html``; break; case "LSP": return html``; break; case "LDA": return html`

class labels `; break; default: return html``; break; } }33:[{"id":"4317d73e3abbf9c8af5d3a098a1a15a08f46828d6dbab6690ed327195bb26b65832908d41d2e1f5bc938ed615b3b8d7c3b8b371d31cb1080f511ba4422756396","href":"https://static.observableusercontent.com/files/4317d73e3abbf9c8af5d3a098a1a15a08f46828d6dbab6690ed327195bb26b65832908d41d2e1f5bc938ed615b3b8d7c3b8b371d31cb1080f511ba4422756396","name":"data.jpg","type":"image/jpeg","lastModified":1685771755211.369,"size":79607},{"id":"3bf421f77eb91979ece7dc37330c369c27cf3159bc2e88d2f54541b27aadc2c5495e9b980d40bf6940aa1ad156b52352ab054f250c72b0edc612720e6e3d9c70","href":"https://static.observableusercontent.com/files/3bf421f77eb91979ece7dc37330c369c27cf3159bc2e88d2f54541b27aadc2c5495e9b980d40bf6940aa1ad156b52352ab054f250c72b0edc612720e6e3d9c70","name":"d.json","type":"application/json","lastModified":1685771755211.369,"size":612873},{"id":"07e581f56aec83575dab4817f94f7254f1242e4e0c7bf2849182d374f3695e3729a3c5757ef53d77f50546cded60c1b9df32acc93615ec90ed1f8abf681335f1","href":"https://static.observableusercontent.com/files/07e581f56aec83575dab4817f94f7254f1242e4e0c7bf2849182d374f3695e3729a3c5757ef53d77f50546cded60c1b9df32acc93615ec90ed1f8abf681335f1","name":"data.json","type":"application/json","lastModified":1693592168782.427,"size":785866}] 2f:{"id":"12ca0ac4b618465e","slug":"sentence-embeddings-and-dimension-reduction-in-the-browse","title":"Sentence Embeddings and Dimension Reduction in the Browser","thumbnail":"f1de67f884586fc8247797093c2a30e4e6d537e237deb3951d52c40d840afba7","access_level":"public","create_time":"$D2023-06-03T05:55:55.211Z","update_time":"$D2023-09-15T22:13:59.064Z","view_time":null,"first_public_time":"$D2023-06-03T06:16:51.444Z","fork":true,"stars":48,"starred":false,"owner":{"type":"team","id":"08f80506ae76fdf3","login":"huggingface","name":"Hugging Face","avatar_url":"https://avatars-next.observableusercontent.com/798cf3379d3840e4759a43470c74a7225fe5d81c88a08e763c446c93eff8797c","tier":"pro"},"version":1147,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"06bc2aaa9d8c4a54","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":null}],"members":[{"type":"individual","id":"bf1872cca880d345","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":null,"role":"editor"},{"type":"team","id":"08f80506ae76fdf3","login":"huggingface","name":"Hugging Face","avatar_url":"https://avatars-next.observableusercontent.com/798cf3379d3840e4759a43470c74a7225fe5d81c88a08e763c446c93eff8797c","tier":"pro","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":33,"collection":{"id":"b266593bd5204dc4","slug":"javascript-toolkits","title":"🤗 JavaScript Guides 📚","owner":{"id":"08f80506ae76fdf3","login":"huggingface","name":"Hugging Face"}},"type":"notebook","body":{"title":"Sentence Embeddings and Dimension Reduction in the Browser","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":697,"value":"### Loading [transformers.js](https://www.npmjs.com/package/@xenova/transformers) from npm ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":242,"value":"transformers = import(\"https://cdn.jsdelivr.net/npm/@xenova/transformers@2.6.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":703,"value":"Create a pipeline for `feature-extraction` and point to the desired model `Xenova/all-MiniLM-L6-v2`, you can find all ONNX compatible models on the [hub](https://huggingface.co/models?other=transformers.js). This step might require some loading time depending on your internet connection, as the model + ONNX runtime combined are approximately 35MB.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":253,"value":"extractor = await transformers.pipeline(\n \"feature-extraction\",\n \"Xenova/all-MiniLM-L6-v2\",\n { quantized: false }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":282,"value":"We'll use data from this [Dataset](https://huggingface.co/datasets/diffusers-parti-prompts/sd-v2.1), which includes over 1600 text-to-image prompts benchmark data, along with the respective image files generated by Stable Diffusion v2.1.\n\n${await FileAttachment(\"data.jpg\").image({width: 600})}\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":266,"value":"data = await FileAttachment(\"data.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":915,"value":"sample = {\n const shuffled = d3.shuffle(data.slice());\n return shuffled.slice(0, 200);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":719,"value":"Extracting the embeddings is straightforward. Simply run\n\n```extractor(\"YOUR SENTENCE\", { pooling: \"mean\", normalize: true })```.\n\nHere, we're mapping all the Prompts and running them in parallel as a Promise\nFor each `embeddings` row we have a data vector size 384, property of the `all-MiniLM-L6-v2` model","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":309,"value":"embeddings = await Promise.all(\n sample.map((row) =>\n extractor(row.Category + \": \" + row.Prompt, {\n pooling: \"mean\",\n normalize: true\n })\n )\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":974,"value":"With embeddings data now we send it to a worker running [Druid.js](https://github.com/saehm/DruidJS) with the selected Reduction Method","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":31,"value":"reducerResult = Generators.queue(\n worker(\n function dr({ method, data, parameters }) {\n const D = new druid[method](data, parameters);\n const next = D.generator().next();\n if (next.done) {\n return D.transform();\n }\n return D.generator();\n },\n {\n method: druid_method,\n data: embeddings.map((row) => row.data),\n parameters: reducerParams\n },\n `\nimportScripts(${JSON.stringify(\n await require.resolve(\"@saehrimnir/druidjs@0.6.3\")\n )});\n`\n )\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":380,"value":"dataToPlot = sample.map((row, id) => ({\n ...row,\n x: reducerResult[id][0],\n y: reducerResult[id][1]\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":980,"value":"## Visualize with [Plot](https://observablehq.com/plot/)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8,"value":"viewof druid_method = Inputs.select(\n [\n \"UMAP\",\n \"TSNE\",\n \"TriMap\",\n \"PCA\",\n \"LLE\",\n \"LTSA\",\n \"ISOMAP\",\n \"FASTMAP\",\n \"MDS\",\n \"LSP\",\n // \"LDA\",\n \"TopoMap\",\n \"SAMMON\"\n ].sort(d3.ascending),\n {\n label: \"Please pick a Dimensionality Reduction Method.\",\n // value: \"UMAP\"\n value: \"UMAP\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":434,"value":"viewof reducerParams = form(create_parameter_form(druid_method))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":988,"value":"**Reduction Method**: ${druid_method}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":220,"value":"Plot.plot({\n marginTop: 10,\n inset: 10,\n color: {\n scheme: \"Paired\",\n legend: true,\n columns: 3\n },\n legend: {\n marginTop: 50\n },\n marks: [\n Plot.dot(dataToPlot, {\n x: \"x\",\n y: \"y\",\n fill: \"Category\",\n r: 5,\n opacity: 0.8\n // strokeWidth: 4,\n // stroke: \"Category\"\n }),\n Plot.tip(\n dataToPlot,\n Plot.pointer({\n stroke: \"Category\",\n\n channels: { Note: \"Note\", sport: \"sport\" },\n\n x: \"x\",\n y: \"y\",\n title: (d) => [d.Category, d.Prompt].join(\"\\n\\n\")\n })\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":995,"value":"Since the dataset of prompts includes a link to the corresponding generated text-to-image file, let's take a moment to visualize it as well.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":397,"value":"{\n const plt = Plot.plot({\n marginTop: 50,\n marginBottom: 50,\n inset: 50,\n width: width,\n height: width,\n marks: [\n Plot.image(dataToPlot, {\n x: \"x\",\n y: \"y\",\n src: (x) => x.images.src,\n width: 50,\n title: \"x\"\n }),\n Plot.tip(\n dataToPlot,\n Plot.pointer({\n stroke: \"Category\",\n\n channels: { Note: \"Note\", sport: \"sport\" },\n\n x: \"x\",\n y: \"y\",\n title: (d) => [d.Category, d.Prompt].join(\"\\n\\n\")\n })\n )\n ]\n });\n const selection = d3.select(plt);\n selection.on(\"mousemove\", (evt) => {\n const tipdata = plt.value;\n if (tipdata) {\n const image = selection.select(`image[href='${tipdata.images.src}']`);\n image.raise();\n }\n });\n\n return plt;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":963,"value":"### Extras\n\n\nThanks to [Fil](https://observablehq.com/@fil/) for the worker util
\nThanks to [Rene Cutura](https://observablehq.com/@saehrimnir/hello-druidjs) for Druid.js
\nThanks to [Observable](https://observablehq.com/plot/) for Plot\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":432,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"druid = \"🤯\" // placeholder for Observable to allow the *dr* function to exist; the worker uses importScripts","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"import { worker } from \"@fil/worker\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":437,"value":"import { form } from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":358,"value":"mutable status = \"\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"