Clear Image Editor Value with None (#10370)

* Code

* Fix

* Add test

* Fix

* Format

* add changeset

* rm for now

* Revert "rm for now"

This reverts commit 3cfbe3c.

* rm for now

* tests

* fix tests

* Add tests

* lint

* Add code

* Fix

* trigger

* Add code

* test

* format

* add changeset

* Fix merge

* add changeset

---------

Co-authored-by: gradio-pr-bot <[email protected]>

.changeset/nice-streets-start.md

@@ -0,0 +1,6 @@
+---
+"@gradio/imageeditor": minor
+"gradio": minor
+---
+
+feat:Clear Image Editor Value with None

demo/image_editor_events/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: image_editor_events"]}, {"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": ["import gradio as gr\n", "\n", "def predict(im):\n", "    return im[\"composite\"]\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Group():\n", "        with gr.Row():\n", "            im = gr.ImageEditor(\n", "                type=\"numpy\",\n", "                crop_size=\"1:1\",\n", "                elem_id=\"image_editor\",\n", "            )\n", "            im_preview = gr.Image()\n", "    with gr.Group():\n", "        with gr.Row():\n", "\n", "            n_upload = gr.Label(\n", "                0,\n", "                label=\"upload\",\n", "                elem_id=\"upload\",\n", "            )\n", "            n_change = gr.Label(\n", "                0,\n", "                label=\"change\",\n", "                elem_id=\"change\",\n", "            )\n", "            n_input = gr.Label(\n", "                0,\n", "                label=\"input\",\n", "                elem_id=\"input\",\n", "            )\n", "            n_apply = gr.Label(\n", "                0,\n", "                label=\"apply\",\n", "                elem_id=\"apply\",\n", "            )\n", "    clear_btn = gr.Button(\"Clear\", elem_id=\"clear\")\n", "\n", "    im.upload(\n", "        lambda x: int(x) + 1, outputs=n_upload, inputs=n_upload, show_progress=\"hidden\"\n", "    )\n", "    im.change(\n", "        lambda x: int(x) + 1, outputs=n_change, inputs=n_change, show_progress=\"hidden\"\n", "    )\n", "    im.input(\n", "        lambda x: int(x) + 1, outputs=n_input, inputs=n_input, show_progress=\"hidden\"\n", "    )\n", "    im.apply(\n", "        lambda x: int(x) + 1, outputs=n_apply, inputs=n_apply, show_progress=\"hidden\"\n", "    )\n", "    im.change(predict, outputs=im_preview, inputs=im, show_progress=\"hidden\")\n", "    clear_btn.click(\n", "        lambda: None,\n", "        None,\n", "        im,\n", "    )\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: image_editor_events"]}, {"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": ["import gradio as gr\n", "import numpy as np\n", "\n", "def predict(im):\n", "    return im[\"composite\"]\n", "\n", "def verify_clear(im):\n", "    return int(not np.any(im['composite'])), im[\"composite\"]\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Group():\n", "        with gr.Row():\n", "            im = gr.ImageEditor(\n", "                type=\"numpy\",\n", "                crop_size=\"1:1\",\n", "                elem_id=\"image_editor\",\n", "            )\n", "            im_preview = gr.Image()\n", "    with gr.Group():\n", "        with gr.Row():\n", "\n", "            n_upload = gr.Label(\n", "                0,\n", "                label=\"upload\",\n", "                elem_id=\"upload\",\n", "            )\n", "            n_change = gr.Label(\n", "                0,\n", "                label=\"change\",\n", "                elem_id=\"change\",\n", "            )\n", "            n_input = gr.Label(\n", "                0,\n", "                label=\"input\",\n", "                elem_id=\"input\",\n", "            )\n", "            n_apply = gr.Label(\n", "                0,\n", "                label=\"apply\",\n", "                elem_id=\"apply\",\n", "            )\n", "            cleared_properly = gr.Number(label=\"cleared properly\")\n", "    clear_btn = gr.Button(\"Clear Button\", elem_id=\"clear\")\n", "\n", "    im.upload(\n", "        lambda x: int(x) + 1, outputs=n_upload, inputs=n_upload, show_progress=\"hidden\"\n", "    )\n", "    im.change(\n", "        lambda x: int(x) + 1, outputs=n_change, inputs=n_change, show_progress=\"hidden\"\n", "    )\n", "    im.input(\n", "        lambda x: int(x) + 1, outputs=n_input, inputs=n_input, show_progress=\"hidden\"\n", "    )\n", "    im.apply(\n", "        lambda x: int(x) + 1, outputs=n_apply, inputs=n_apply, show_progress=\"hidden\"\n", "    )\n", "    im.change(predict, outputs=im_preview, inputs=im, show_progress=\"hidden\")\n", "    clear_btn.click(\n", "        lambda: None,\n", "        None,\n", "        im,\n", "    ).then(verify_clear,\n", "           inputs=im,\n", "           outputs=[cleared_properly, im])\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/image_editor_events/run.py

@@ -1,8 +1,12 @@
 import gradio as gr
+import numpy as np
 
 def predict(im):
     return im["composite"]
 
+def verify_clear(im):
+    return int(not np.any(im['composite'])), im["composite"]
+
 with gr.Blocks() as demo:
     with gr.Group():
         with gr.Row():
@@ -35,7 +39,8 @@ def predict(im):
                 label="apply",
                 elem_id="apply",
             )
-    clear_btn = gr.Button("Clear", elem_id="clear")
+            cleared_properly = gr.Number(label="cleared properly")
+    clear_btn = gr.Button("Clear Button", elem_id="clear")
 
     im.upload(
         lambda x: int(x) + 1, outputs=n_upload, inputs=n_upload, show_progress="hidden"
@@ -54,7 +59,9 @@ def predict(im):
         lambda: None,
         None,
         im,
-    )
+    ).then(verify_clear,
+           inputs=im,
+           outputs=[cleared_properly, im])
 
 if __name__ == "__main__":
     demo.launch()

demo/image_editor_layers/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: image_editor_layers"]}, {"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_layers/cheetah.jpg\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/image_editor_layers/layer1.png"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from pathlib import Path\n", "\n", "dir_ = Path(__file__).parent\n", "\n", "def predict(im):\n", "    return im, len(im['layers'])\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Row():\n", "        im = gr.ImageEditor(\n", "            type=\"numpy\",\n", "            interactive=True,\n", "        )\n", "        im_preview = gr.ImageEditor(\n", "            interactive=True,\n", "        )\n", "    \n", "    num_layers = gr.Number(value=0, label=\"Num Layers\")\n", "\n", "    set_background = gr.Button(\"Set Background\")\n", "    set_background.click(\n", "        lambda: {\n", "            \"background\": str(dir_ / \"cheetah.jpg\"),\n", "            \"layers\": None,\n", "            \"composite\": None,\n", "        },\n", "        None,\n", "        im,\n", "        show_progress=\"hidden\",\n", "    )\n", "    set_layers = gr.Button(\"Set Layers\")\n", "    set_layers.click(\n", "        lambda: {\n", "            \"background\": str(dir_ / \"cheetah.jpg\"),\n", "            \"layers\": [str(dir_ / \"layer1.png\")],\n", "            \"composite\": None,\n", "        },\n", "        None,\n", "        im,\n", "        show_progress=\"hidden\",\n", "    )\n", "    set_composite = gr.Button(\"Set Composite\")\n", "    set_composite.click(\n", "        lambda: {\n", "            \"background\": None,\n", "            \"layers\": None,\n", "            \"composite\": \"https://nationalzoo.si.edu/sites/default/files/animals/cheetah-003.jpg\",\n", "        },\n", "        None,\n", "        im,\n", "        show_progress=\"hidden\",\n", "    )\n", "\n", "    im.change(\n", "        predict,\n", "        outputs=[im_preview, num_layers],\n", "        inputs=im,\n", "    )\n", "\n", "    gr.Examples(\n", "        examples=[\n", "            \"https://upload.wikimedia.org/wikipedia/commons/0/09/TheCheethcat.jpg\",\n", "            {\n", "                \"background\": str(dir_ / \"cheetah.jpg\"),\n", "                \"layers\": [str(dir_ / \"layer1.png\")],\n", "                \"composite\": None,\n", "            },\n", "        ],\n", "        inputs=im,\n", "    )\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: image_editor_layers"]}, {"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_layers/cheetah.jpg\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/image_editor_layers/layer1.png"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from pathlib import Path\n", "\n", "dir_ = Path(__file__).parent\n", "\n", "def predict(im):\n", "    return im, len(im['layers'])\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Row():\n", "        im = gr.ImageEditor(\n", "            type=\"numpy\",\n", "            interactive=True,\n", "        )\n", "        im_preview = gr.ImageEditor(\n", "            interactive=True,\n", "        )\n", "    \n", "    num_layers = gr.Number(value=0, label=\"Num Layers\")\n", "    example_ran = gr.Number(value=0, label=\"Example Ran\")\n", "\n", "    set_background = gr.Button(\"Set Background\")\n", "    set_background.click(\n", "        lambda: {\n", "            \"background\": str(dir_ / \"cheetah.jpg\"),\n", "            \"layers\": None,\n", "            \"composite\": None,\n", "        },\n", "        None,\n", "        im,\n", "        show_progress=\"hidden\",\n", "    )\n", "    set_layers = gr.Button(\"Set Layers\")\n", "    set_layers.click(\n", "        lambda: {\n", "            \"background\": None,\n", "            \"layers\": [\"https://nationalzoo.si.edu/sites/default/files/animals/cheetah-003.jpg\"],\n", "            \"composite\": None,\n", "        },\n", "        None,\n", "        im,\n", "        show_progress=\"hidden\",\n", "    )\n", "    set_composite = gr.Button(\"Set Composite\")\n", "    set_composite.click(\n", "        lambda: {\n", "            \"background\": None,\n", "            \"layers\": None,\n", "            \"composite\": \"https://nationalzoo.si.edu/sites/default/files/animals/cheetah-003.jpg\",\n", "        },\n", "        None,\n", "        im,\n", "        show_progress=\"hidden\",\n", "    )\n", "    get_layers = gr.Button(\"Get Layers\")\n", "\n", "    get_layers.click(\n", "        predict,\n", "        outputs=[im_preview, num_layers],\n", "        inputs=im,\n", "    )\n", "\n", "    gr.Examples(\n", "        examples=[\n", "            \"https://upload.wikimedia.org/wikipedia/commons/0/09/TheCheethcat.jpg\",\n", "            {\n", "                \"background\": str(dir_ / \"cheetah.jpg\"),\n", "                \"layers\": [str(dir_ / \"layer1.png\")],\n", "                \"composite\": None,\n", "            },\n", "        ],\n", "        inputs=im,\n", "        outputs=[example_ran],\n", "        fn=lambda x: 1,\n", "        run_on_click=True,\n", "    )\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/image_editor_layers/run.py

@@ -17,6 +17,7 @@ def predict(im):
         )
 
     num_layers = gr.Number(value=0, label="Num Layers")
+    example_ran = gr.Number(value=0, label="Example Ran")
 
     set_background = gr.Button("Set Background")
     set_background.click(
@@ -32,8 +33,8 @@ def predict(im):
     set_layers = gr.Button("Set Layers")
     set_layers.click(
         lambda: {
-            "background": str(dir_ / "cheetah.jpg"),
-            "layers": [str(dir_ / "layer1.png")],
+            "background": None,
+            "layers": ["https://nationalzoo.si.edu/sites/default/files/animals/cheetah-003.jpg"],
             "composite": None,
         },
         None,
@@ -51,8 +52,9 @@ def predict(im):
         im,
         show_progress="hidden",
     )
+    get_layers = gr.Button("Get Layers")
 
-    im.change(
+    get_layers.click(
         predict,
         outputs=[im_preview, num_layers],
         inputs=im,
@@ -68,6 +70,9 @@ def predict(im):
             },
         ],
         inputs=im,
+        outputs=[example_ran],
+        fn=lambda x: 1,
+        run_on_click=True,
     )
 
 if __name__ == "__main__":

gradio/templates.py

@@ -309,7 +309,7 @@ def __init__(
         eraser: Eraser | None = None,
         brush: Brush | None = None,
         format: str = "webp",
-        layers: bool = True,
+        layers: bool = False,
         canvas_size: tuple[int, int] = (800, 800),
         fixed_canvas: bool = False,
         show_fullscreen_button: bool = True,

js/imageeditor/Index.svelte

@@ -225,6 +225,12 @@
 				loading_status.status = "error";
 				gradio.dispatch("error", detail);
 			}}
+			on:receive_null={() =>
+				(value = {
+					background: null,
+					layers: [],
+					composite: null
+				})}
 			on:error
 			{brush}
 			{eraser}

js/imageeditor/shared/InteractiveImageEditor.svelte

@@ -65,6 +65,7 @@
 		clear?: never;
 		upload?: never;
 		change?: never;
+		receive_null?: never;
 	}>();
 
 	let editor: ImageEditor;
@@ -80,7 +81,12 @@
 	$: if (bg) dispatch("upload");
 
 	export async function get_data(): Promise<ImageBlobs> {
-		const blobs = await editor.get_blobs();
+		let blobs;
+		try {
+			blobs = await editor.get_blobs();
+		} catch (e) {
+			return { background: null, layers: [], composite: null };
+		}
 
 		const bg = blobs.background
 			? upload(
@@ -121,11 +127,11 @@
 		if (!editor) return;
 		if (value == null) {
 			editor.handle_remove();
+			dispatch("receive_null");
 		}
 	}
 
 	$: handle_value(value);
-
 	$: crop_constraint = crop_size;
 	let bg = false;
 	let history = false;

js/spa/test/image_editor_events.spec.ts

@@ -65,3 +65,23 @@ test("apply events work as expected", async ({ page }) => {
 	await apply_button.click();
 	await expect(apply_text).toContainText("1");
 });
+
+test("image editor can be cleared twice by setting value to None", async ({
+	page
+}) => {
+	await page.getByLabel("Draw button").first().click();
+	await page.getByLabel("Draw button").first().click();
+	const canvas = page.locator("canvas").first();
+	await canvas.click({ position: { x: 100, y: 100 } });
+	await page.getByRole("button", { name: "Clear Button" }).click();
+	await page.waitForTimeout(1000);
+
+	await page.getByLabel("Draw button").first().click();
+	await page.getByLabel("Draw button").first().click();
+	const canvas_2 = page.locator("canvas").first();
+	await canvas_2.click({ position: { x: 100, y: 100 } });
+	await canvas_2.click({ position: { x: 101, y: 100 } });
+	await page.getByRole("button", { name: "Clear Button" }).click();
+
+	await expect(page.getByLabel("cleared properly")).toHaveValue("1");
+});

js/spa/test/image_editor_layers.spec.ts

@@ -0,0 +1,14 @@
+import { test, expect } from "@self/tootils";
+
+test("ImageEditor layers are properly set", async ({ page }) => {
+	await page.getByRole("button", { name: "Set Layers" }).click();
+	await page.getByRole("button", { name: "Get Layers" }).click();
+	await expect(page.getByLabel("Num Layers")).toHaveValue("1");
+});
+
+test("Clicking on examples should properly run the function", async ({
+	page
+}) => {
+	await page.locator(".gallery > .gallery-item").first().click();
+	await expect(page.getByLabel("Example Ran")).toHaveValue("1");
+});