html`<div style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr">${faucets
.reverse()
.map(
(img) =>
`<div style="font-size: 0.7em; font-family: sans-serif; word-wrap: break-word;"><img style="width: 95%" src="https://www.plumbershaven.com/${img[0]}"><br>${img[0]}<br>${img[1]}</div>`
)
.join("")}</div>`
text = debounce(viewof input)
hex_embedding = {
const controller = new AbortController();
invalidation.then(() => controller.abort());
try {
return (
await (
await fetch(
`https://clip-datasette-on-fly.fly.dev/_memory.json?sql=select+hex(llm_embed(%27clip%27%2C+%3Aq))+as+x&q=${encodeURIComponent(
text
)}&_shape=array`,
{ signal: controller.signal }
)
).json()
)[0].x;
} catch {
return "";
}
}
input_embedding = hexToFloatArray(hex_embedding)
md`[View in Datasette](${faucets_url.replace(".json", "")})`
sql = `
select value from json_each(faiss_search_with_scores('faucets', 'embeddings', faiss_encode(:data), 8))
`
faucets_url = `https://faucet-finder.fly.dev/faucets.json?sql=${encodeSQL(
sql
)}&data=${encodeURIComponent(
JSON.stringify(input_embedding)
)}&_shape=arrayfirst&_json=value`
function encodeSQL(s) {
return encodeURIComponent(s).replace(/\(/g, "%28").replace(/\)/g, "%29");
}
faucets = (
await fetch(
`https://faucet-finder.fly.dev/faucets.json?sql=select+value+from+json_each(faiss_search_with_scores(%27faucets%27%2C+%27embeddings%27%2C+faiss_encode(%3Adata)%2C+8))&data=${encodeURIComponent(
JSON.stringify(input_embedding)
)}&_shape=arrayfirst&_json=value`
)
).json()
function hexToFloatArray(hexString) {
const buffer = new ArrayBuffer(hexString.length / 2);
const view = new DataView(buffer);
const floatArray = [];
for (let i = 0; i < hexString.length; i += 2) {
const byteValue = parseInt(hexString.substr(i, 2), 16);
view.setUint8(i / 2, byteValue);
}
for (let i = 0; i < buffer.byteLength; i += 4) {
const floatValue = view.getFloat32(i, true); // true for little-endian
floatArray.push(floatValue);
}
return floatArray;
}
function debounce(input, delay = 1000) {
return Generators.observe((notify) => {
let timer = null;
let value;
// On input, check if we recently reported a value.
// If we did, do nothing and wait for a delay;
// otherwise, report the current value and set a timeout.
function inputted() {
if (timer !== null) return;
notify((value = input.value));
timer = setTimeout(delayed, delay);
}
// After a delay, check if the last-reported value is the current value.
// If it’s not, report the new value.
function delayed() {
timer = null;
if (value === input.value) return;
notify((value = input.value));
}
input.addEventListener("input", inputted), inputted();
return () => input.removeEventListener("input", inputted);
});
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
