HDR image loading, saving and visualizing

[zzt76]

Is your feature request related to a problem? Please describe.
I haven't found a similar problem in issues.

Describe the solution you'd like
Hi, I wonder if there's a way to load/save hdr, exr image from/to gradio.image or gradio.file. For example:

background = gr.ImageEditor(sources=['upload'], type="numpy", crop_size=(512, 512))
input_depth_hdr = gr.Image(label='Depth HDR', sources=['upload'], type="numpy")
pred_bg_btn = gr.Button(value="Estimate intrinsics from background")

pred_bg_btn.click(fn=predict_bg_intrinsics, inputs=[predictors_input], outputs=[input_depth_hdr]) # Where the output will be in values higher than 1, e.g., [0, 10.0]

[abidlabs]

Can you provide more information about HDR images? I'd like to understand a bit more whether we could support this format natively or whether we'd need a custom component

[zzt76]

HDR image is a kind of image that its values are in the range of [0, +inf]. You could read it using tev, and see all the values in the image. HDR image is originally used for representation for radiance,, but it's now also used for metric maps like depth maps. For example, for this HDR radiance image, it contains high dynamic range radiance values, which will provide more details on darker or brighter areas.

Normally, for visualization, we use several different approaches to tonemap it back to LDR image. 1. Min-max scale; 2. Reinhard tonemapping; 3. Manutik tonemapping; 4. Drago tonemapping, etc..

Here are some examples of HDR radiance image in *.hdr format. openrooms_hdr_demo.zip

I'm planning to use Gradio only for visualization and param-adjusting now. And save, load, and modify the HDR images using torch.save() and torch.load().

[abidlabs]

Thanks @zzt76 for explaining. This is outside of core Gradio (it looks like we can't process these image files natively so we'd need to add a special library). This is actually perfectly suited for custom components. T

o elaborate, we've 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: https://huggingface.co/spaces/abidlabs/gradio_rich_textbox
• A "Folium Map Viewer" component that allows you to use interactive maps: https://huggingface.co/spaces/freddyaboulton/gradio_folium

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. If you'd like to get started, we've put together a Guide: https://www.gradio.app/guides/five-minute-guide, and we're happy to help you create a custom component to view HDR images. Would you be interested?

[zzt76]

Yeah, this custom component looks exactly what I need! Thanks a lot for your help!

[abidlabs]

Awesome, I'll close this issue for now, but looking forward to your custom component! Let us know if you have any questions (you can ask in this thread)