somnid•3mo ago

Can Deno Jupyter output images like jpegs?

Docs aren't super clear about this. I naively thought this would work:

const img = await Deno.readFile("./my-image.jpg");

await Deno.jupyter.display({
    "image/jpeg" : img
})

const img = await Deno.readFile("./my-image.jpg");

await Deno.jupyter.display({
    "image/jpeg" : img
})

But it just does normal console.log of the object.

5 Replies

Mrcool 🇵🇸•3mo ago

It can but you have to give it on the right format, I think it needs a base64 encoded image, I'll have to lookup how I used to do this

somnidOP•3mo ago

import { encodeBase64 } from "jsr:@std/encoding";

export function arrayBufferToUrl(arrayBuffer: ArrayBuffer){
    return `data:image/jpeg;base64,${encodeBase64(arrayBuffer)}`;
}

const img = await Deno.readFile("./my-image.jpg");
const url = arrayBufferToUrl(img);

await Deno.jupyter.display({
    "image/jpeg" : url
}, { raw: true })

import { encodeBase64 } from "jsr:@std/encoding";

export function arrayBufferToUrl(arrayBuffer: ArrayBuffer){
    return `data:image/jpeg;base64,${encodeBase64(arrayBuffer)}`;
}

const img = await Deno.readFile("./my-image.jpg");
const url = arrayBufferToUrl(img);

await Deno.jupyter.display({
    "image/jpeg" : url
}, { raw: true })

Seems closer. I get a broken image icon with this. url works if I paste in the browser. Ah it's just the plain base64 string, no data url.

//works
import { encodeBase64 } from "jsr:@std/encoding";

const img = encodeBase64(await Deno.readFile("./my-image.jpg"));

await Deno.jupyter.display({
    "image/jpeg" : img
}, { raw: true })

//works
import { encodeBase64 } from "jsr:@std/encoding";

const img = encodeBase64(await Deno.readFile("./my-image.jpg"));

await Deno.jupyter.display({
    "image/jpeg" : img
}, { raw: true })

bartlomieju•3mo ago

Admitedelly we should have a helper API to display and images like we do for markdown or html

bartlomieju•3mo ago

Opened https://github.com/denoland/deno/pull/26284

GitHub

feat(jupyter): Add Deno.jupyter.image API by bartlomieju · Pull R...

Added an API for quickly displaying images: const data = Deno.readFileSync("./my-image.jpg"); Deno.jupyter.image(data);

somnidOP•3mo ago

Thanks