Images and image widget not appearing.

[CapeHobbit]

Hi,
I'd love to use this toolkit. I compare satellite imagery and this offers a lot of really useful capability in a training context. However, when I implement the test case under my environment no image widget or images appears. There is no error reported, so its a bit hard to debug. I have attached a pretty useless screenshot below, but its all I have, sorry!

I am running on MacOS Big Sur 11.3 with an Anaconda implementation of Python 3.9. My environment for this work is pretty sparse, and uses notebook version 6.4.12. Any help appreciated.

[kolibril13]

Hi @CapeHobbit!
Thanks for this report, and I am happy to hear that this widget is useful in training context.
This might be a similar issue like #38 , @hdocmsu was also using anaconda there.
I've written a debugging script that you can find here:
#38 (comment)
can you run that once and paste the output here?
Maybe you can even start some debugging with that script.

[CapeHobbit]

Wow, thanks for the very quick reply. I took a look through #38 - and it seems that I have a similar to issue to where this was left at the end. The code runs fine under Jupyter-Lab (3.4.4), but not under classic notebook - where I get blank. The "%%compare --height 220" suggestion has no effect, but I think I am past that point anyway. I am also pretty sure that there is nothing wrong with my Jupyter installation, which is fairly bare-bones.

I ran the specified tests, all seem to work as expected. Results are attached in a rendered notebook (.ipynb renamed to .txt to enable attachments, which I hope works).
Compare_view_test.txt

Perhaps something has changed in the implementation of Jupyter's own cell magics? Can I ask what version of Jupyter-notebook you run with, so I can attempt to test that?

[kolibril13]

My Python installation: Python 3.9.13, virtual environment, JupyterLab Version 3.4.3.
I don't have the time for looking deeper into this, but go ahead if you are interested! :)
Note that the same problem with the blank output happens also in VS Code:

There is also an issue about this #6 and in the last comment #6 (comment) @christopher-besch writes it might be a problem with "jupyter_compare_view attaching it's source to a parent that doesn't exist in VSC but is present in Jupyter Lab directly"

[christopher-besch]

jupyter_compare_view looks for the jp-Notebook HTML class in the DOM (i.e. all the HTML elements displayed by your browser). If this class doesn't exist, it fails and should print something in the browser console. Could you open said console (F12 on Firefox, bing open browser console in <your browser> if you're using something else) and copy the output into this Issue, please?

It would also help if you could search for the jp-Notebook class, again in the browser console. If you don't know how to do that, you can also run document.body.innerHTML in the console and copy the output into the Issue. Be aware that this would publish any private information present on the page, so be careful.

[hdocmsu]

FYI: jupyter_compare_view works for my Jupyter lab (V3.4.6) notebook (but not working on classic notebook and also not working on VScode Jupiter notebook). My python version is 3.10.4.

Feature Request: It would be great if you could develop this further such that the output (overlay images and interactive slide bar/circle) can be exported to HTML format and embedded into markdown or HTML for the www blog post or website.

[christopher-besch]

Unfortunately GitHub Markdown doesn't allow script tags. Therefore compare_view can't be used here.

[hdocmsu]

Unfortunately GitHub Markdown doesn't allow script tags. Therefore compare_view can't be used here.

I did not mean to use script tags in markdown. I meant, "Can you export the output to an HTML file instead of displaying it on the Jupyter Notebooks?" Given the output in HTML format, I can embed it into my website/blog.

[christopher-besch]

Yeah, that is supported. Just use the normal Jupyter Notebook export as HTML feature.

[hdocmsu]

Yeah, that is supported. Just use the normal Jupyter Notebook export as HTML feature.

Yes, it works with Jupiter notebook export as HTML. However, the exported HTML contains both code and output. I was wondering if you could create functionality that only export the compare_view output? That makes it nice and clean when embedded in the blog or website. Thanks.

[kolibril13]

I don't know if this is possible, but you can maybe you can have a look at voila: https://github.com/voila-dashboards/voila

[christopher-besch]

If you want to only compare the images on your website, take a look at compare_view. It's the backend behind jupyter_compare_view and allows you to do just that.
This is basically all you need to put on your website:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/public/dist/browser_compare_view.js"></script>

<canvas id="canvas_id" style="width: 100%"></canvas>
<script>
    compare_view.load(
        [
            "https://raw.githubusercontent.com/Octoframes/compare_view/main/public/images/banner_grey.png",
            "https://raw.githubusercontent.com/Octoframes/compare_view/main/public/images/banner_colour.png",
        ],
        "canvas_id"
    );
</script>

So download the images from Jupyter Notebook, put them in your website's static directory and add the code snippet. All this is documented here.

[hdocmsu]

Thanks @christopher-besch , The html snippet above works!

[kolibril13]

@CapeHobbit : this issue might be solved, can you once test latest release?
pip install jupyter_compare_view --upgrade
that should give you version 0.2.0 which has a completely new pipeline to display the compare view canvas.