Displaying Media with Gradio
Explore how to display and interact with images and audio in Gradio by using its customizable media components. Understand how to upload, display, and process media files, and integrate pretrained Hugging Face models for image classification. Build simple audio playback applications for practical use cases.
Displaying media
Gradio has many other components that can be used to interact with users in the UI. In this lesson, we will go over some of the common Gradio components that will be useful for displaying media, and allow users to interact with the UI in meaningful ways. We will get to see how Gradio abstracts away the complexities of this interaction and makes it very easy to work with images and audio files.
Image
With any application, it is very common to have images. This could be just for displaying images, interacting with images such as uploading image files or taking snapshots from a webcam. Particularly in the data space and generative AI, images are also frequently used in many machine learning pipelines, so it is important to have good integration with handling images. In this lesson, we will look at how Gradio allows us to interact with images.
Image in Gradio
Gradio has an Image component, that allows users to upload images as input, or display images as an output. This can all be achieved in just a few short lines of code, and we can use the Interface class to wrap this together into a UI.
We can instantiate the Image component using gr.Image(), or using the shortcut string 'image'.
Many initialization parameters allow us to customize the Image component. These include things such as specifying whether we want color or black/white images, even the source of the image, such as whether it is from an upload, or snapshots from a webcam. Gradio Image component is extremely customizable, and it can all ...