31:T86c,intro = { const t = md`# Hugging Face Spaces + Observable ### Sentence Embeddings Visualization Recently I've been exploring [Hugging face Spaces](https://huggingface.co/spaces) and [sentence-transformers](https://huggingface.co/sentence-transformers) to build an application to generate text embeddings and clustering visualization. Currently, the quickest way to build interactive ML apps with Python (backend/frontend), afaik, is to use [Streamlit](https://streamlit.io/) or [Gradio](https://www.gradio.app/). To embed an Observable notebook on Streamlit, you can use this custom component [streamlit-observable](https://github.com/asg017/streamlit-observable) This [Observable notebook](https://observablehq.com/@radames/hugging-face-spaces-observable-sentence-embeddings) is the frontend application for this [Hugging Face Spaces](https://huggingface.co/spaces/radames/sentence-embeddings-visualization) app.

Notes

This notebook explores another way to integrate Observable inside Hugging Face Spaces. Currently, [HF Spaces supports](https://huggingface.co/docs/hub/spaces#streamlit-and-gradio) Streamlit and Gradio or a simple static web page.

The concept here is to use this entire notebook as the frontend and data visualization application for the [ML Flask/Python](https://huggingface.co/spaces/radames/sentence-embeddings-visualization/blob/main/app.py#L37-L75) backend.

The index route renders a [simple HTML template](https://huggingface.co/spaces/radames/sentence-embeddings-visualization/blob/main/templates/index.html) containing [Observable Runtime API code](https://observablehq.com/@observablehq/downloading-and-embedding-notebooks).
A single function, triggered by a POST request to \`run-umap\`, returns a low dimensional representation of the original sentence transformers embeddings using UMAP and cluster analysis with HDBSCAN.
All the visualization and interactive magic happen on the Javascript code inside the Observable Notebook.

`; t.querySelectorAll("a").forEach((n) => (n.target = "_blank")); return t; }32:[{"id":"e0da59e360722e7431a45ec3ded343610b27033668d59e5e82ef92fd0ec1687ccad13096f54c49c4d7a8ad7a03c3ca5a9ef545a748f18cc7bd1604eabfdadd16","href":"https://static.observableusercontent.com/files/e0da59e360722e7431a45ec3ded343610b27033668d59e5e82ef92fd0ec1687ccad13096f54c49c4d7a8ad7a03c3ca5a9ef545a748f18cc7bd1604eabfdadd16","name":"words.txt","type":"text/plain","lastModified":1645431730858.043,"size":37689},{"id":"3222841008a9a48a6a68722282c20566fd4629820d54c94df1762a1cd78dde53de87f96f67b22bcf86229d0a76b3962a23c01781bfa5f0e752e47fb028cdbd37","href":"https://static.observableusercontent.com/files/3222841008a9a48a6a68722282c20566fd4629820d54c94df1762a1cd78dde53de87f96f67b22bcf86229d0a76b3962a23c01781bfa5f0e752e47fb028cdbd37","name":"senteces.txt","type":"text/plain","lastModified":1645431730948.613,"size":114905}] 2f:{"title":"Hugging Face Spaces + Observable","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"viewof sentences = {\n let initValues = \"\";\n if (tryme) {\n initValues =\n tryme === \"Words\"\n ? await FileAttachment(\"words.txt\").text()\n : await FileAttachment(\"senteces.txt\").text();\n }\n return Inputs.textarea({\n label: \"Senteces List\",\n pattern: \"\",\n placeholder: \"One sentece/word per line\",\n value: initValues,\n rows: 5\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"viewof params = Inputs.button(\"Submit\", {\n label: \"Run\",\n required: true,\n reduce: () => ({\n sentences: sentences.split(\"\\n\"),\n umap_options: umapOptions,\n cluster_options: clusterOptions\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":553,"value":"viewof tryme = {\n clear;\n return Inputs.radio([\"Words\", \"Senteces\"], { label: \"Try from examples\" });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":805,"value":"viewof clear = Inputs.button(\"Clear\", { label: \"Clear text area\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"datasets = {\n const t = md`\nDatasets: [words](https://github.com/first20hours/google-10000-english), [sentences](https://github.com/celarex/STS-CNN-STSbenchmark-Semantic-Similarity-Semantic-Textual-Similarity-CNN-HCTI-Tensorflow-Keras)\n`;\n t.querySelectorAll(\"a\").forEach((n) => (n.target = \"_blank\"));\n return t;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":637,"value":"dialog = {\n if (status.isLoading) {\n return html`\n Processing... \n`;\n }\n if (status.value) {\n return html`\n ${status.value} \n`;\n }\n return md``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"viewof scatter = {\n const el = DOM.element(\"div\");\n const w = 1000;\n yield el;\n\n el.style.position = \"relative\";\n el.style.boxShadow = \"0 0 20px rgb(0 0 0 / 20%\";\n el.style.height = `${(w * 9) / 16}px`;\n el.style.width = \"100%;\";\n //\n const scatterGL = new ScatterGL(el, {\n onHover: (point) => {\n mutable point = Object.assign(mutable point, { hover: point });\n },\n onClick: (point) => {\n mutable point = Object.assign(mutable point, { click: point });\n },\n renderMode: \"POINT\",\n styles: {\n point: {\n colorUnselected: \"rgba(120, 120, 120, 0.7)\",\n colorNoSelection: \"rgba(51, 51, 51, 0.7)\",\n colorSelected: \"rgba(255, 10, 10, 0.7)\",\n colorHover: \"rgba(255, 11, 79, 0.7)\",\n scaleDefault: 1.0,\n scaleSelected: 1.2,\n scaleHover: 2\n }\n }\n });\n // invalidation.then(() => scatterGL.scatterPlot.renderer.dispose());\n yield Object.assign(el, { value: scatterGL });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"#### UMAP Options","pinned":false,"hidden":false,"mode":"md"},{"id":95,"value":"viewof umapOptions = Inputs.form({\n metric: Inputs.select(\n [\n \"euclidean\",\n \"manhattan\",\n \"chebyshev\",\n \"minkowski\",\n \"canberra\",\n \"braycurtis\",\n \"mahalanobis\",\n \"wminkowski\",\n \"seuclidean\",\n \"cosine\",\n \"correlation\",\n \"haversine\",\n \"hamming\",\n \"jaccard\",\n \"dice\",\n \"russelrao\",\n \"kulsinski\",\n \"ll_dirichlet\",\n \"hellinger\",\n \"rogerstanimoto\",\n \"sokalmichener\",\n \"sokalsneath\",\n \"yule\"\n ],\n { value: \"euclidean\", label: \"Metric\" }\n ),\n n_components: Inputs.select([2, 3], {\n label: \"Number of Components\",\n value: 3\n }),\n n_neighbors: Inputs.range([0, 100], {\n step: 1,\n value: 15,\n label: \"Number of neighbors\"\n }),\n min_dist: Inputs.range([0, 1], {\n step: 0.001,\n value: 0.1,\n label: \"Minimum distance between embedded points\"\n }),\n spread: Inputs.range([0, 1], {\n step: 0.001,\n value: 1,\n label: \"Spread\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":733,"value":"umapbutton = Inputs.bind(\n Inputs.button(\"Submit\", {\n label: \"Update UMAP params\",\n required: true,\n reduce: () => ({\n sentences: sentences.split(\"\\n\"),\n umap_options: umapOptions,\n cluster_options: clusterOptions\n })\n }),\n viewof params\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"#### HDBSCAN Clustering Options","pinned":false,"hidden":false,"mode":"md"},{"id":258,"value":"viewof clusterOptions = Inputs.form({\n min_cluster_size: Inputs.range([0, 1000], {\n step: 1,\n value: 60,\n label: \"Smallest size group as cluster\"\n }),\n min_samples: Inputs.range([0, 1000], {\n step: 1,\n value: 15,\n label: \"The larger the value, clusters areas more dense\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":965,"value":"hdbcscanbutton = Inputs.bind(\n Inputs.button(\"Submit\", {\n label: \"Update HDBSCAN params\",\n required: true,\n reduce: () => ({\n sentences: sentences.split(\"\\n\"),\n umap_options: umapOptions,\n cluster_options: clusterOptions\n })\n }),\n viewof params\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"mutable status = ({ value: null, isLoading: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"update = {\n try {\n const dataset = new ScatterGL.Dataset(\n data.embeddings,\n params.sentences.map((label, i) => ({\n label: `${label} (${data.clusters[i]})`,\n labelIndex: i\n }))\n );\n scatter.render(dataset);\n scatter.setPointColorer((i) => convertColor(colorScale(data.clusters[i])));\n scatter.resize();\n } catch (e) {\n mutable status = { value: e, isLoading: false };\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"data = {\n const controller = new AbortController();\n invalidation.then(() => {\n controller.abort();\n mutable status = { value: null, isLoading: false };\n });\n\n try {\n mutable status = { value: null, isLoading: true };\n\n const res = await fetch(url, {\n credentials: \"include\",\n signal: controller.signal,\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\"\n },\n body: JSON.stringify({ data: params })\n });\n const data = await res.json();\n mutable status = { value: null, isLoading: false };\n\n if (res.ok) return data;\n if (!res.ok) {\n mutable status = { value: data.error, isLoading: false };\n\n throw data.error;\n }\n } catch (error) {\n throw error;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"mutable point = ({})","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"colorScale = d3\n .scaleSequentialQuantile(d3.interpolateRdYlBu)\n .domain(new Set(data.clusters))","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"function convertColor(color) {\n const c = d3.color(color);\n return (c.b << 16) + (c.g << 8) + c.r * 255;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"ScatterGL = {\n const { ScatterGL } = await require.alias({\n THREE: \"three@0.125/build/three.min.js\"\n })(\"scatter-gl@0.0.12\");\n return ScatterGL;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":903,"value":"url = {\n if (isDev) return \"http://localhost:3000/run-umap\";\n return document.referrer === \"https://observablehq.com/\"\n ? \"https://hf.space/gradioiframe/radames/sentence-embeddings-visualization/run-umap\"\n : \"run-umap\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":937,"value":"viewof isDev = Inputs.toggle({ label: \"isDev\", value: false })","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}