Skip to main content
The Image component allows users to upload or display images.

​
Basic usage

import gradio as gr

def sepia(image):
    # Apply sepia filter
    return image

gr.Interface(fn=sepia, inputs=gr.Image(), outputs=gr.Image()).launch()

​
Constructor

​
value
str | PIL.Image | np.ndarray | Callable | None
default:"None"
Default image to display. Can be filepath, URL, PIL Image, or numpy array
​
format
str
default:"'webp'"
File format for saving (e.g., “png”, “jpg”, “webp”)
​
type
Literal['numpy', 'pil', 'filepath']
default:"'numpy'"
Format passed to prediction function:
  • "numpy" - numpy array with shape (height, width, 3), values 0-255
  • "pil" - PIL Image object
  • "filepath" - string path to temporary file
​
sources
list[Literal['upload', 'webcam', 'clipboard']] | None
default:"None"
Input sources:
  • "upload" - File upload box
  • "webcam" - Webcam capture
  • "clipboard" - Paste from clipboard
Defaults to all three if not streaming
​
image_mode
Literal['RGB', 'RGBA', 'L', ...] | None
default:"'RGB'"
PIL image mode. “RGB” for color, “L” for grayscale
​
height
int | str | None
default:"None"
Component height in pixels or CSS units
​
width
int | str | None
default:"None"
Component width in pixels or CSS units
​
streaming
bool
default:"False"
If True, automatically streams webcam feed in live interfaces
​
buttons
list[Literal['download', 'share', 'fullscreen'] | Button] | None
default:"None"
Buttons to display. By default, all built-in buttons are shown

​
Events

  • change - Triggered when image changes
  • upload - Triggered when image is uploaded
  • clear - Triggered when image is cleared
  • stream - Triggered during streaming
  • select - Triggered when image is selected
  • input - Triggered on input

​
Examples

​
PIL image input

import gradio as gr
from PIL import Image, ImageFilter

def blur_image(image):
    return image.filter(ImageFilter.BLUR)

gr.Interface(
    fn=blur_image,
    inputs=gr.Image(type="pil"),
    outputs=gr.Image(type="pil")
).launch()

​
Webcam only

import gradio as gr

gr.Interface(
    fn=lambda img: img,
    inputs=gr.Image(sources=["webcam"]),
    outputs=gr.Image()
).launch()

​
Grayscale images

import gradio as gr

gr.Image(
    image_mode="L",  # Grayscale
    label="Black and white image"
)