Image editor

.changeset/few-tips-appear.md

@@ -0,0 +1,57 @@
+---
+"@gradio/app": minor
+"@gradio/atoms": minor
+"@gradio/icons": minor
+"@gradio/image": minor
+"@gradio/imageeditor": minor
+"@gradio/preview": minor
+"@gradio/statustracker": minor
+"@gradio/upload": minor
+"gradio": minor
+---
+
+feat:
+
+#### New `ImageEditor` component
+
+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")
+)
+
+```

.config/eslint.config.js

@@ -29,7 +29,17 @@ const js_rules = {
 	complexity: "error",
 	"no-else-return": "error",
 	"no-useless-return": "error",
-	"no-undef": "error"
+	"no-undef": "error",
+	"valid-jsdoc": [
+		"error",
+		{
+			requireReturn: false,
+			requireParamDescription: true,
+			requireReturnDescription: true,
+			requireReturnType: false,
+			requireParamType: false
+		}
+	]
 };
 
 const ts_rules = {

demo/image_editor/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: image_editor"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/image_editor/cheetah.jpg"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import time\n", "\n", "\n", "def sleep(im):\n", "    time.sleep(5)\n", "    return [im[\"background\"], im[\"layers\"][0], im[\"layers\"][1], im[\"composite\"]]\n", "\n", "\n", "with gr.Blocks() as demo:\n", "    im = gr.ImageEditor(\n", "        type=\"pil\",\n", "        crop_size=\"1:1\",\n", "    )\n", "\n", "    with gr.Group():\n", "        with gr.Row():\n", "            im_out_1 = gr.Image(type=\"pil\")\n", "            im_out_2 = gr.Image(type=\"pil\")\n", "            im_out_3 = gr.Image(type=\"pil\")\n", "            im_out_4 = gr.Image(type=\"pil\")\n", "\n", "    btn = gr.Button()\n", "    im.change(sleep, outputs=[im_out_1, im_out_2, im_out_3, im_out_4], inputs=im)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/image_editor/run.py

@@ -0,0 +1,27 @@
+import gradio as gr
+import time
+
+
+def sleep(im):
+    time.sleep(5)
+    return [im["background"], im["layers"][0], im["layers"][1], im["composite"]]
+
+
+with gr.Blocks() as demo:
+    im = gr.ImageEditor(
+        type="pil",
+        crop_size="1:1",
+    )
+
+    with gr.Group():
+        with gr.Row():
+            im_out_1 = gr.Image(type="pil")
+            im_out_2 = gr.Image(type="pil")
+            im_out_3 = gr.Image(type="pil")
+            im_out_4 = gr.Image(type="pil")
+
+    btn = gr.Button()
+    im.change(sleep, outputs=[im_out_1, im_out_2, im_out_3, im_out_4], inputs=im)
+
+if __name__ == "__main__":
+    demo.launch()

gradio/__init__.py

@@ -37,6 +37,7 @@
     HighlightedText,
     Highlightedtext,
     Image,
+    ImageEditor,
     Json,
     Label,
     LinePlot,
@@ -82,17 +83,15 @@
 from gradio.routes import Request, mount_gradio_app
 from gradio.templates import (
     Files,
-    # ImageMask,
-    # ImagePaint,
+    ImageMask,
     List,
     Matrix,
     Mic,
     Microphone,
     Numpy,
-    # Paint,
-    # Pil,
+    Paint,
     PlayableVideo,
-    # Sketchpad,
+    Sketchpad,
     TextArea,
 )
 from gradio.themes import Base as Theme

gradio/blocks.py

@@ -207,7 +207,7 @@ def get_config(self):
         for parameter in signature.parameters.values():
             if hasattr(self, parameter.name):
                 value = getattr(self, parameter.name)
-                config[parameter.name] = value
+                config[parameter.name] = utils.convert_to_dict_if_dataclass(value)
         for e in self.events:
             to_add = e.config_data()
             if to_add:

gradio/components/__init__.py

@@ -28,6 +28,7 @@
 from gradio.components.highlighted_text import HighlightedText
 from gradio.components.html import HTML
 from gradio.components.image import Image
+from gradio.components.image_editor import ImageEditor
 from gradio.components.json_component import JSON
 from gradio.components.label import Label
 from gradio.components.line_plot import LinePlot
@@ -108,4 +109,5 @@
     "Video",
     "StreamingInput",
     "StreamingOutput",
+    "ImageEditor",
 ]