Highlights
New `ImageEditor` component ([6169](https://github.com/gradio-app/gradio/pull/6169) [`9caddc17b`](https://github.com/gradio-app/gradio/commit/9caddc17b1dea8da1af8ba724c6a5eab04ce0ed8))
A brand new component, completely separate from `Image` that provides simple editing capabilities.
- Set background images from file uploads, webcam, or just paste!
- Crop images with an improved cropping UI. App authors can event set specific crop size, or crop ratios (`1:1`, etc)
- Paint on top of any image (or no image) and erase any mistakes!
- The ImageEditor supports layers, confining draw and erase actions to that layer.
- More flexible access to data. The image component returns a composite image representing the final state of the canvas as well as providing the background and all layers as individual images.
- Fully customisable. All features can be enabled and disabled. Even the brush color swatches can be customised.
<video src="https://user-images.githubusercontent.com/12937446/284027169-31188926-fd16-4a1c-8718-998e7aae4695.mp4" autoplay muted></video>
py
def fn(im):
im["composite"] the full canvas
im["background"] the background image
im["layers"] a list of individual layers
im = gr.ImageEditor(
decide which sources you'd like to accept
sources=["upload", "webcam", "clipboard"],
set a cropsize constraint, can either be a ratio or a concrete [width, height]
crop_size="1:1",
enable crop (or disable it)
transforms=["crop"],
customise the brush
brush=Brush(
default_size="25", or leave it as 'auto'
color_mode="fixed", 'fixed' hides the user swatches and colorpicker, 'defaults' shows it
default_color="hotpink", html names are supported
colors=[
"rgba(0, 150, 150, 1)", rgb(a)
"fff", hex rgb
"hsl(360, 120, 120)" in fact any valid colorstring
]
),
brush=Eraser(default_size="25")
)
Thanks [pngwn](https://github.com/pngwn)!
Fixes
- [6497](https://github.com/gradio-app/gradio/pull/6497) [`1baed201b`](https://github.com/gradio-app/gradio/commit/1baed201b12ecb5791146aed9a86b576c3595130) - Fix SourceFileReloader to watch the module with a qualified name to avoid importing a module with the same name from a different path. Thanks [whitphx](https://github.com/whitphx)!
- [6502](https://github.com/gradio-app/gradio/pull/6502) [`070f71c93`](https://github.com/gradio-app/gradio/commit/070f71c933d846ce8e2fe11cdd9bc0f3f897f29f) - Ensure image editor crop and draw cursor works as expected when the scroll position changes. Thanks [pngwn](https://github.com/pngwn)!