mirror of
https://github.com/gradio-app/gradio.git
synced 2025-01-30 11:00:11 +08:00
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 3cfbe3c577e365d9d14553e9a109bbe09f8170ac. * 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 <gradio-pr-bot@users.noreply.github.com>
This commit is contained in:
Freddy Boulton
GitHub
parent
3c2e12b5ba
commit
71c8b8abbf
6
.changeset/nice-streets-start.md
Normal file
6
.changeset/nice-streets-start.md
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
"@gradio/imageeditor": minor
|
||||
"gradio": minor
|
||||
---
|
||||
|
||||
feat:Clear Image Editor Value with None
|
||||
@ -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}
|
||||
@ -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 @@ with gr.Blocks() as demo:
|
||||
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 @@ with gr.Blocks() as demo:
|
||||
lambda: None,
|
||||
None,
|
||||
im,
|
||||
)
|
||||
).then(verify_clear,
|
||||
inputs=im,
|
||||
outputs=[cleared_properly, im])
|
||||
|
||||
if __name__ == "__main__":
|
||||
demo.launch()
|
||||
|
||||
@ -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}
|
||||
@ -17,6 +17,7 @@ with gr.Blocks() as demo:
|
||||
)
|
||||
|
||||
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 @@ with gr.Blocks() as demo:
|
||||
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 @@ with gr.Blocks() as demo:
|
||||
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 @@ with gr.Blocks() as demo:
|
||||
},
|
||||
],
|
||||
inputs=im,
|
||||
outputs=[example_ran],
|
||||
fn=lambda x: 1,
|
||||
run_on_click=True,
|
||||
)
|
||||
|
||||
if __name__ == "__main__":
|
||||
|
||||
@ -309,7 +309,7 @@ class ImageMask(components.ImageEditor):
|
||||
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,
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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");
|
||||
});
|
||||
|
||||
14
js/spa/test/image_editor_layers.spec.ts
Normal file
14
js/spa/test/image_editor_layers.spec.ts
Normal file
@ -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");
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user