Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
html`<div class="camera">
<video id="video" style="width: 400px; height: 300px">Video stream not available.</video>
</div>
<canvas id="canvas"> </canvas>
<div class="output">
<img id="photo" alt="The screen capture will appear in this box." />
</div>`
img_5933 = FileAttachment("IMG_5933.jpeg").image()
img_5928 = FileAttachment("IMG_5928.jpeg").image()
img_5929 = FileAttachment("IMG_5929.jpeg").image()
img_5930 = FileAttachment("IMG_5930.jpeg").image()
img_5934 = FileAttachment("IMG_5934.jpeg").image()
img_5935 = FileAttachment("IMG_5935.jpeg").image()
capture
photos = [img_5928, img_5929, img_5930, img_5933, img_5934, img_5935]
photo_embeddings = {
var embeddings = [];
for (var photo of photos) {
let embedding = await vision_model(
await processor(await transformers.RawImage.fromBlob(photo))
);
embeddings.push(embedding.image_embeds.data);
}
return embeddings;
}
navigator.mediaDevices
.getUserMedia({ video: true, audio: false })
.then((stream) => {
document.querySelector("#video").srcObject = stream;
document.querySelector("#video").play();
})
.catch((err) => {
console.error(`An error occurred: ${err}`);
})
viewof browse_image = Inputs.file()
md`Similarity score: ${(score * 100).toLocaleString()}%`
browse_image.image()
score = cosineSimilarity(
textEmbeddings.text_embeds.data,
embeddings.image_embeds.data
)
html`<textarea style="width: 100%; height: 10em">${JSON.stringify(
Array.from(textEmbeddings.text_embeds.data)
)}</textarea>`
transformers = import("https://cdn.jsdelivr.net/npm/@xenova/transformers")
processor = await transformers.AutoProcessor.from_pretrained(
"Xenova/clip-vit-base-patch16"
)
vision_model = await transformers.CLIPVisionModelWithProjection.from_pretrained(
"Xenova/clip-vit-base-patch16"
)
default_image = await transformers.RawImage.read(
"https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/football-match.jpg"
)
image = browse_image
? await transformers.RawImage.fromBlob(await browse_image.blob())
: await transformers.RawImage.read(
"https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/football-match.jpg"
)
image
image_inputs = await processor(image)
embeddings = await vision_model(image_inputs)
embeddings.image_embeds.data
tokenizer = await transformers.AutoTokenizer.from_pretrained(
"Xenova/clip-vit-base-patch16"
)
text_model = await transformers.CLIPTextModelWithProjection.from_pretrained(
"Xenova/clip-vit-base-patch16"
)
text_inputs = tokenizer(texts, { padding: true, truncation: true })
textEmbeddings = await text_model(text_inputs)
function dotProduct(a, b) {
let sum = 0;
for (let i = 0; i < a.length; i++) {
sum += a[i] * b[i];
}
return sum;
}
function magnitude(a) {
return Math.sqrt(dotProduct(a, a));
}
function cosineSimilarity(a, b) {
if (a.length !== b.length) {
throw new Error("Vectors must have the same dimensions");
}
const magA = magnitude(a);
const magB = magnitude(b);
if (magA === 0 || magB === 0) {
throw new Error(
"Magnitude of one of the vectors is zero, cannot calculate cosine similarity"
);
}
return dotProduct(a, b) / (magA * magB);
}
texts = [text]
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.
