somnid•14mo 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.

7 Replies

Mrcool 🇵🇸•14mo 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•14mo 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•14mo ago

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

bartlomieju•14mo 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•14mo ago

Thanks

zdubtub•3d ago

Hope it's cool if I revive this thread for a very similar question I'm trying to create an audio player in the cell output of my notebook and I've gotten it pretty close thanks to the fact that this thread helped me realize that Deno.jupyter has specialized functions for different types of media I didn't see one for audio, so I figured I would try Deno.jupyter.html

const { html } = Deno.jupyter;
html`<audio controls style="width: 100%;">
  <source src="/Users/brian.soraham/Audio/GAS - Pop - 04 Pop 4.wav" type="audio/wav">
  Your browser does not support the audio element.
</audio>
`

const { html } = Deno.jupyter;
html`<audio controls style="width: 100%;">
  <source src="/Users/brian.soraham/Audio/GAS - Pop - 04 Pop 4.wav" type="audio/wav">
  Your browser does not support the audio element.
</audio>
`

This renders an html5 audio player, but the controls are disabled i.e. I can't play the audio file I have on my laptop I verified that this html should work by just creating an html file with this exact content and opening it in my browser I was able to play the file Forgive me if I'm doing something really stupid! I am a seasoned developer who knows only the basics about ts/js/css/html. For some reason I decided I should make my life difficult and try to build a prototype of my current obsession-idea with ts because I might want to make it into an electron app.... some day

zdubtub•3d ago

Nvm for now I figured out why this is happening. Now I just have to fix it...

Can Deno Jupyter output images like jpegs?

Did you find this page helpful?