Jupyter AtlasUrl 404 cannot find file

[Tinkaa]

I am trying to display the confusion matrix of images in Colab. It loads the jsondata correctly, but doesn't display the images. When inspecting the console, it gives a 404 error that the sprite atlas file cannot be found, while I am sure the file is in the current folder.
Do you have any idea what is going wrong?

# Display the Dive visualization for the training data.
from IPython.core.display import display, HTML

# jsonstr = train_data.to_json(orient='records')
jsonstr = test_data.to_json(orient='records')
HTML_TEMPLATE = """<link rel="import" href="https://raw.githubusercontent.com/PAIR-code/facets/master/facets-dist/facets-jupyter.html">
       <facets-dive id="elem" height="600"></facets-dive>
       <script>
         var data = {jsonstr};
         document.querySelector("#elem").data = data;
         document.querySelector("#elem").atlasUrl = "/content/complete_atlas_image.jpg";
       </script>"""
html = HTML_TEMPLATE.format(jsonstr=jsonstr)
display(HTML(html))

[jimbojw]

Thank you for including the console output, this is helpful! I notice there's a 500 server error at the bottom when trying to access the complete_atlas_image.jpg. Could you expand that and paste the details?

[Tinkaa]

Of course, here you go :)

[jimbojw]

If you follow the link https://localhost:8080/content/complete_atlas_image.jpg in a new tab, what does it show?

[Tinkaa]

It shows "This site can’t be reached, localhost refused to connect."

So it seems it cannot find the image?
I also tried
from IPython.display import Image; Image('/content/complete_atlas_image.jpg')
And then it correctly displays the image.
I also tried running the code, while the complete_atlas_image is not uploaded to Colab, and then it gives exactly the same error (the 404 and 500) as when it is uploaded.

[jimbojw]

Ok thanks. Under the hood, Dive tries to download the image data from the URL that you supply to the atlasUrl property. That request originates from inside the HTML of the notebook's output cell. So the value that you provide to atlasUrl is currently being treated as a relative URL and uses the same protocol (http://), host and port (localhost:8080) as the output cell's content.

There are a couple of ways to proceed. The first step is to determine where your notebook is serving your /content/complete_atlas_image.jpg. Once you have the correct URL, you should be able to load it in a new tab and see your atlas.

If you know how to find the file from Python, one option is to start a SimpleHTTPServer to serve that file. This notebook shows how to serve a script file in that way. Your code would serve the image data, which you should be able to see loaded in a new tab: https://colab.research.google.com/notebooks/snippets/advanced_outputs.ipynb

[Tinkaa]

Thanks a lot for the suggestion!
I tried to find out where my Colab is serving the image, but I couldn't figure it out. So if anyone knows, I would be happy to hear :)

However, it turned out that the URL not pointing to the image was also the reason it was not working in my local Jupyter notebook. Here, I could find the correct URL (for future references: right-click on the image in the File Browser and choose Open in New Browser Tab )

So the issue is hereby semi-solved.

[rjadr]

I ran into the same issue. Saving the sprite image to this directory /usr/local/share/jupyter/nbextensions/google.colab/ solved it for me. You can then load the image: document.querySelector("#elem").atlasUrl = "/nbextensions/google.colab/complete_atlas_image.jpg";

[jimbojw]

Thank you RJ! 🙏