Handle gigabyte Images

🧩 Custom Components
1

You might think that use case is not too common, but once you go into industry images become VERY big lately.
I am talking about gigabytes sized raster images. That may be maps and satellite data, medical data, microscopy data.

Take any use case where you are interested in an overview and the details at the same time.

So far i found good support for map data. :+1: :world_map:
Can somebody point me to a hint where to start for arbitrary big image data? Resolution starts at 100k x 100k pixels, images grow up to 80GB in size. Most images are made up of layers of tiles at different resolution scales. Here is a list of file types of such image pyramids also called whole slides: https://www.pathomation.com/formats/

For a list of the most common whole slide viewers available, see here: 10 Open source Whole-Slide Image Viewers and Analysis Programs

In streamlit, we can run models on the tiles sequentially, also numerical analysis is not a problem but visualization is a pain in the ***.

Having a component that would allow to view big medical and industry images in streamlit would be such a valuable addon for a lot of communities. This could be the tipping point for streamlit to gain traction in medical and industry computer vision.

I found an opensource whole slide viewer JS library GitHub - openseadragon/openseadragon: An open-source, web-based viewer for zoomable images, implemented in pure JavaScript. but i don’t have any experience in JS nor TypeScript.
I am just leaving it here, maybe someone will find a way or can think of any other way to create a custom component that will finally allow us to actually SEE what we are doing.

Thanks again for all the awesome work and the great community :black_heart:

2

Agree, this would be great!

I have a very hacky solution right now, and even with this, it is an exciting feature to have working.

The solution is:

from streamlit.components.v1 import html

slide_file = 'test_slide.dzi'
flask_server = 'YOURSERVER'

openseadragon_html = f"""<div id="openseadragon" style="float:left; width: 75%; height: 800px; margin: 10px"></div>
               <script src="{flask_server}/static/js/openseadragon/openseadragon.min.js"></script>
               <script type="text/javascript">
                var viewer = OpenSeadragon({{
                    id: "openseadragon",
                    prefixUrl: "{flask_server}/static/js/openseadragon/images/",
                    tileSources: "{flask_server}/static/images/{slide_file}"
                }})</script>
            """
html(openseadragon_html, height = 800)

I’m using a separate server (with CORS) capable of serving OpenSeaDragon images. I was running a Flask server to do this. Couldn’t figure out a good way to get the streamlit app to resolve paths like /static/images/{slide_file} to point to the dzi files I had, so I made them accessible through a separate server. Super hacky.

Any advice for how to do this better?

I’ll keep thinking and maybe put together a Streamlit component if I come up with something…

1 Like
3

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.