A component that support colormaps/contrasted viewing while displaying images

[lmanan]

Hello. I wanted to ask if it would be possible to display images with a color map, or if there could be a way to adjust the contrast of the viewer while inputting images? For the application I am interested in, I would like to feed in some microscopy images to the trained model, which when wrapped with the PIL class, could appear quite dark.

I would imagine that the API for the Image class would then expand to include color_map as an additional attribute which could be specified by the user as one of the several maps provided by matplotlib package. Alternatively, there could be an internal calculation of a contrast factor depending upon the max and min intensity of the pixels in the image. Thanks!

[lmanan]

Just for reference, an exemplary image where it is hard to discern the underlying structure, is seen on the left in this screenshot:

[abidlabs]

Hi @MLbyML this is quite interesting. So to make sure I understand correctly, is your issue with how the input image is displayed when you upload it? At that point, there is no preprocessing involved -- it's literally the image you saved and uploaded. Shouldn't any adjustment be made before you save it?

[lmanan]

Hi @abidlabs Thank you for the reply! Yes, so my suggestion concerns how to display one-channel (gray scale) input images (which are common in fields like biomedical / astronomy imaging etc).

Shouldn't any adjustment be made before you save it?

Although what you say could be a solution, I wouldn't want to alter the image properties such as its mean intensity etc by performing an adjustment, prior to upload - as simply dragging and dropping the original image is convenient from a user perspective. Instead, I would like the possibility of enabling a color map since that preserves the original image intensities but would just 'map' these gray-scale intensities to an RGB tuple for the purpose of viewing. Does that make seem sensible?

[abidlabs]

I see, that makes sense. I didn't realize that these were grayscale images. So to confirm, you'd want to be able to adjust the contrast so that you can see the images more easily, but you do not want to propagate these contrast changes to the prediction function?

I think having a dedicated viewer for these images with adjustable contrast could work, but the way we'd implement it by adding another tool in the Image class (we currently have editor and select which support rich editing and easy cropping/panning, respectively). Do you know if there is an existing js library with such a tool?

[lmanan]

So to confirm, you'd want to be able to adjust the contrast so that you can see the images more easily, but you do not want to propagate these contrast changes to the prediction function?

Yes, exactly!

I think having a dedicated viewer for these images with adjustable contrast could work, but the way we'd implement it by adding another tool in the Image class (we currently have editor and select which support rich editing and easy cropping/panning, respectively). Do you know if there is an existing js library with such a tool?

I see. I think vtkjs allows one to adjust contrast while viewing. Thank you!

[abidlabs]

Hi! We've now made it possible for Gradio users to create their own custom components -- meaning that you can write some Python and JavaScript (Svelte), and publish it as a Gradio component. You can use it in your own Gradio apps, or share it so that anyone can use it in their Gradio apps. Here are some examples of custom Gradio components:

• A "Rich Textbox" that allows you to write bold/italics/colored text
• A "Folium Map Viewer" component that allows you to use interactive maps

You can see the source code for those components by clicking the "Files" icon and then clicking "src". The complete source code for the backend and frontend is visible. In particular, its very fast if you want to build off an existing component. We've put together a Guide: https://www.gradio.app/guides/five-minute-guide, and we're happy to help if you'd like to put together a custom component for this issue

[abidlabs]

I'll go ahead and close this issue since we are not planning to include this in the core Gradio library. But happy to help if you are interested in making this a custom Gradio component (feel free to ask questions in this issue).