|
<html> |
|
<head> |
|
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" /> |
|
<title>Candle Bert</title> |
|
</head> |
|
<body></body> |
|
</html> |
|
|
|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="UTF-8" /> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
<style> |
|
@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200;300;400&family=Source+Sans+3:wght@100;200;300;400;500;600;700;800;900&display=swap"); |
|
html, |
|
body { |
|
font-family: "Source Sans 3", sans-serif; |
|
} |
|
</style> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<script type="module" src="./code.js"></script> |
|
<script type="module"> |
|
import { hcl } from "https://cdn.skypack.dev/d3-color@3"; |
|
import { interpolateReds } from "https://cdn.skypack.dev/d3-scale-chromatic@3"; |
|
import { scaleLinear } from "https://cdn.skypack.dev/d3-scale@4"; |
|
import { |
|
getModelInfo, |
|
getEmbeddings, |
|
getWikiText, |
|
cosineSimilarity, |
|
} from "./utils.js"; |
|
|
|
const bertWorker = new Worker("./bertWorker.js", { |
|
type: "module", |
|
}); |
|
|
|
const inputContainerEL = document.querySelector("#input-container"); |
|
const textAreaEl = document.querySelector("#input-area"); |
|
const outputAreaEl = document.querySelector("#output-area"); |
|
const formEl = document.querySelector("#form"); |
|
const searchInputEl = document.querySelector("#search-input"); |
|
const formWikiEl = document.querySelector("#form-wiki"); |
|
const searchWikiEl = document.querySelector("#search-wiki"); |
|
const outputStatusEl = document.querySelector("#output-status"); |
|
const modelSelectEl = document.querySelector("#model"); |
|
|
|
const sentencesRegex = |
|
/(?<!\w\.\w.)(?<![A-Z][a-z]\.)(?<![A-Z]\.)(?<=\.|\?)\s/gm; |
|
|
|
let sentenceEmbeddings = []; |
|
let currInputText = ""; |
|
let isCalculating = false; |
|
|
|
function toggleTextArea(state) { |
|
if (state) { |
|
textAreaEl.hidden = false; |
|
textAreaEl.focus(); |
|
} else { |
|
textAreaEl.hidden = true; |
|
} |
|
} |
|
inputContainerEL.addEventListener("focus", (e) => { |
|
toggleTextArea(true); |
|
}); |
|
textAreaEl.addEventListener("blur", (e) => { |
|
toggleTextArea(false); |
|
}); |
|
textAreaEl.addEventListener("focusout", (e) => { |
|
toggleTextArea(false); |
|
if (currInputText === textAreaEl.value || isCalculating) return; |
|
populateOutputArea(textAreaEl.value); |
|
calculateEmbeddings(textAreaEl.value); |
|
}); |
|
|
|
modelSelectEl.addEventListener("change", (e) => { |
|
const query = new URLSearchParams(window.location.search); |
|
query.set("model", modelSelectEl.value); |
|
window.history.replaceState( |
|
{}, |
|
"", |
|
`${window.location.pathname}?${query}` |
|
); |
|
if (currInputText === "" || isCalculating) return; |
|
populateOutputArea(textAreaEl.value); |
|
calculateEmbeddings(textAreaEl.value); |
|
}); |
|
|
|
function populateOutputArea(text) { |
|
currInputText = text; |
|
const sentences = text.split(sentencesRegex); |
|
|
|
outputAreaEl.innerHTML = ""; |
|
for (const [id, sentence] of sentences.entries()) { |
|
const sentenceEl = document.createElement("span"); |
|
sentenceEl.id = `sentence-${id}`; |
|
sentenceEl.innerText = sentence + " "; |
|
outputAreaEl.appendChild(sentenceEl); |
|
} |
|
} |
|
formEl.addEventListener("submit", async (e) => { |
|
e.preventDefault(); |
|
if (isCalculating || currInputText === "") return; |
|
toggleInputs(true); |
|
const modelID = modelSelectEl.value; |
|
const { modelURL, tokenizerURL, configURL, search_prefix } = |
|
getModelInfo(modelID); |
|
|
|
const text = searchInputEl.value; |
|
const query = search_prefix + searchInputEl.value; |
|
outputStatusEl.classList.remove("invisible"); |
|
outputStatusEl.innerText = "Calculating embeddings for query..."; |
|
isCalculating = true; |
|
const out = await getEmbeddings( |
|
bertWorker, |
|
modelURL, |
|
tokenizerURL, |
|
configURL, |
|
modelID, |
|
[query] |
|
); |
|
outputStatusEl.classList.add("invisible"); |
|
const queryEmbeddings = out.output[0]; |
|
|
|
const distances = sentenceEmbeddings |
|
.map((embedding, id) => ({ |
|
id, |
|
similarity: cosineSimilarity(queryEmbeddings, embedding), |
|
})) |
|
.sort((a, b) => b.similarity - a.similarity) |
|
|
|
.slice(0, 10); |
|
|
|
const colorScale = scaleLinear() |
|
.domain([ |
|
distances[distances.length - 1].similarity, |
|
distances[0].similarity, |
|
]) |
|
.range([0, 1]) |
|
.interpolate(() => interpolateReds); |
|
outputAreaEl.querySelectorAll("span").forEach((el) => { |
|
el.style.color = "unset"; |
|
el.style.backgroundColor = "unset"; |
|
}); |
|
distances.forEach((d) => { |
|
const el = outputAreaEl.querySelector(`#sentence-${d.id}`); |
|
const color = colorScale(d.similarity); |
|
const fontColor = hcl(color).l < 70 ? "white" : "black"; |
|
el.style.color = fontColor; |
|
el.style.backgroundColor = color; |
|
}); |
|
|
|
outputAreaEl |
|
.querySelector(`#sentence-${distances[0].id}`) |
|
.scrollIntoView({ |
|
behavior: "smooth", |
|
block: "center", |
|
inline: "nearest", |
|
}); |
|
|
|
isCalculating = false; |
|
toggleInputs(false); |
|
}); |
|
async function calculateEmbeddings(text) { |
|
isCalculating = true; |
|
toggleInputs(true); |
|
const modelID = modelSelectEl.value; |
|
const { modelURL, tokenizerURL, configURL, document_prefix } = |
|
getModelInfo(modelID); |
|
|
|
const sentences = text.split(sentencesRegex); |
|
const allEmbeddings = []; |
|
outputStatusEl.classList.remove("invisible"); |
|
for (const [id, sentence] of sentences.entries()) { |
|
const query = document_prefix + sentence; |
|
outputStatusEl.innerText = `Calculating embeddings: sentence ${ |
|
id + 1 |
|
} of ${sentences.length}`; |
|
const embeddings = await getEmbeddings( |
|
bertWorker, |
|
modelURL, |
|
tokenizerURL, |
|
configURL, |
|
modelID, |
|
[query], |
|
updateStatus |
|
); |
|
allEmbeddings.push(embeddings); |
|
} |
|
outputStatusEl.classList.add("invisible"); |
|
sentenceEmbeddings = allEmbeddings.map((e) => e.output[0]); |
|
isCalculating = false; |
|
toggleInputs(false); |
|
} |
|
|
|
function updateStatus(data) { |
|
if ("status" in data) { |
|
if (data.status === "loading") { |
|
outputStatusEl.innerText = data.message; |
|
outputStatusEl.classList.remove("invisible"); |
|
} |
|
} |
|
} |
|
function toggleInputs(state) { |
|
const interactive = document.querySelectorAll(".interactive"); |
|
interactive.forEach((el) => { |
|
if (state) { |
|
el.disabled = true; |
|
} else { |
|
el.disabled = false; |
|
} |
|
}); |
|
} |
|
|
|
searchWikiEl.addEventListener("input", () => { |
|
searchWikiEl.setCustomValidity(""); |
|
}); |
|
|
|
formWikiEl.addEventListener("submit", async (e) => { |
|
e.preventDefault(); |
|
if ("example" in e.submitter.dataset) { |
|
searchWikiEl.value = e.submitter.innerText; |
|
} |
|
const text = searchWikiEl.value; |
|
|
|
if (isCalculating || text === "") return; |
|
try { |
|
const wikiText = await getWikiText(text); |
|
searchWikiEl.setCustomValidity(""); |
|
textAreaEl.innerHTML = wikiText; |
|
populateOutputArea(wikiText); |
|
calculateEmbeddings(wikiText); |
|
searchWikiEl.value = ""; |
|
} catch { |
|
searchWikiEl.setCustomValidity("Invalid Wikipedia article name"); |
|
searchWikiEl.reportValidity(); |
|
} |
|
}); |
|
document.addEventListener("DOMContentLoaded", () => { |
|
const query = new URLSearchParams(window.location.search); |
|
const modelID = query.get("model"); |
|
if (modelID) { |
|
modelSelectEl.value = modelID; |
|
modelSelectEl.dispatchEvent(new Event("change")); |
|
} |
|
}); |
|
</script> |
|
</head> |
|
<body class="container max-w-4xl mx-auto p-4"> |
|
<main class="grid grid-cols-1 gap-5 relative"> |
|
<span class="absolute text-5xl -ml-[1em]"> 🕯️ </span> |
|
<div> |
|
<h1 class="text-5xl font-bold">Candle BERT</h1> |
|
<h2 class="text-2xl font-bold">Rust/WASM Demo</h2> |
|
<p class="max-w-lg"> |
|
Running sentence embeddings and similarity search in the browser using |
|
the Bert Model written with |
|
<a |
|
href="https://github.com/huggingface/candle/" |
|
target="_blank" |
|
class="underline hover:text-blue-500 hover:no-underline" |
|
>Candle |
|
</a> |
|
and compiled to Wasm. Embeddings models from are from |
|
<a |
|
href="https://huggingface.co/sentence-transformers/" |
|
target="_blank" |
|
class="underline hover:text-blue-500 hover:no-underline"> |
|
Sentence Transformers |
|
</a> |
|
and |
|
<a |
|
href="https://huggingface.co/intfloat/" |
|
target="_blank" |
|
class="underline hover:text-blue-500 hover:no-underline"> |
|
Liang Wang - e5 Models |
|
</a> |
|
</p> |
|
</div> |
|
|
|
<div> |
|
<label for="model" class="font-medium block">Models Options: </label> |
|
<select |
|
id="model" |
|
class="border-2 border-gray-500 rounded-md font-light interactive disabled:cursor-not-allowed w-full max-w-max"> |
|
<option value="gte_tiny">gte_tiny (45.5 MB)</option> |
|
<option value="intfloat_e5_small_v2" selected> |
|
intfloat/e5-small-v2 (133 MB) |
|
</option> |
|
<option value="intfloat_e5_base_v2"> |
|
intfloat/e5-base-v2 (438 MB) |
|
</option> |
|
<option value="intfloat_multilingual_e5_small"> |
|
intfloat/multilingual-e5-small (471 MB) |
|
</option> |
|
<option value="sentence_transformers_all_MiniLM_L6_v2"> |
|
sentence-transformers/all-MiniLM-L6-v2 (90.9 MB) |
|
</option> |
|
<option value="sentence_transformers_all_MiniLM_L12_v2"> |
|
sentence-transformers/all-MiniLM-L12-v2 (133 MB) |
|
</option> |
|
</select> |
|
</div> |
|
<div> |
|
<h3 class="font-medium">Examples:</h3> |
|
<form |
|
id="form-wiki" |
|
class="flex text-xs rounded-md justify-between w-min gap-3"> |
|
<input type="submit" hidden /> |
|
|
|
<button data-example class="disabled:cursor-not-allowed interactive"> |
|
Pizza |
|
</button> |
|
<button data-example class="disabled:cursor-not-allowed interactive"> |
|
Paris |
|
</button> |
|
<button data-example class="disabled:cursor-not-allowed interactive"> |
|
Physics |
|
</button> |
|
<input |
|
type="text" |
|
id="search-wiki" |
|
title="Search Wikipedia article by title" |
|
class="font-light py-0 mx-1 resize-none outline-none w-32 disabled:cursor-not-allowed interactive" |
|
placeholder="Load Wikipedia article..." /> |
|
<button |
|
title="Search Wikipedia article and load into input" |
|
class="bg-gray-700 hover:bg-gray-800 text-white font-normal px-2 py-1 rounded disabled:bg-gray-300 disabled:cursor-not-allowed interactive"> |
|
Load |
|
</button> |
|
</form> |
|
</div> |
|
<form |
|
id="form" |
|
class="flex text-normal px-1 py-1 border border-gray-700 rounded-md items-center"> |
|
<input type="submit" hidden /> |
|
<input |
|
type="text" |
|
id="search-input" |
|
class="font-light w-full px-3 py-2 mx-1 resize-none outline-none interactive disabled:cursor-not-allowed" |
|
placeholder="Search query here..." /> |
|
<button |
|
class="bg-gray-700 hover:bg-gray-800 text-white font-normal py-2 w-16 rounded disabled:bg-gray-300 disabled:cursor-not-allowed interactive"> |
|
Search |
|
</button> |
|
</form> |
|
<div> |
|
<h3 class="font-medium">Input text:</h3> |
|
<div class="flex justify-between items-center"> |
|
<div class="rounded-md inline text-xs"> |
|
<span id="output-status" class="m-auto font-light invisible" |
|
>C</span |
|
> |
|
</div> |
|
</div> |
|
<div |
|
id="input-container" |
|
tabindex="0" |
|
class="min-h-[250px] bg-slate-100 text-gray-500 rounded-md p-4 flex flex-col gap-2 relative"> |
|
<textarea |
|
id="input-area" |
|
hidden |
|
value="" |
|
placeholder="Input text to perform semantic similarity search..." |
|
class="flex-1 resize-none outline-none left-0 right-0 top-0 bottom-0 m-4 absolute interactive disabled:invisible"></textarea> |
|
<p id="output-area" class="grid-rows-2"> |
|
Input text to perform semantic similarity search... |
|
</p> |
|
</div> |
|
</div> |
|
</main> |
|
</body> |
|
</html> |
|
|
