mirror of
https://github.com/gradio-app/gradio.git
synced 2025-02-17 11:29:58 +08:00
Fix bug where ImageEditor always sends empty layers list to the backend (#10306)
* Add code * add changeset * lint * empty --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
This commit is contained in:
parent
1e253ff127
commit
9fc988ebaf
.changeset
demo/image_editor_layers
js/imageeditor/shared/layers
6
.changeset/lucky-radios-tickle.md
Normal file
6
.changeset/lucky-radios-tickle.md
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
"@gradio/imageeditor": patch
|
||||
"gradio": patch
|
||||
---
|
||||
|
||||
fix:Fix bug where ImageEditor always sends empty layers list to the backend
|
@ -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\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", " 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,\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", "\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}
|
@ -4,7 +4,7 @@ from pathlib import Path
|
||||
dir_ = Path(__file__).parent
|
||||
|
||||
def predict(im):
|
||||
return im
|
||||
return im, len(im['layers'])
|
||||
|
||||
with gr.Blocks() as demo:
|
||||
with gr.Row():
|
||||
@ -15,6 +15,8 @@ with gr.Blocks() as demo:
|
||||
im_preview = gr.ImageEditor(
|
||||
interactive=True,
|
||||
)
|
||||
|
||||
num_layers = gr.Number(value=0, label="Num Layers")
|
||||
|
||||
set_background = gr.Button("Set Background")
|
||||
set_background.click(
|
||||
@ -52,7 +54,7 @@ with gr.Blocks() as demo:
|
||||
|
||||
im.change(
|
||||
predict,
|
||||
outputs=im_preview,
|
||||
outputs=[im_preview, num_layers],
|
||||
inputs=im,
|
||||
)
|
||||
|
||||
|
@ -176,7 +176,7 @@ export function layer_manager(): LayerManager {
|
||||
composite.filters = [erase_filter];
|
||||
|
||||
container.addChild(layer_container);
|
||||
|
||||
_layers.push(layer_scene);
|
||||
that.layers.update((s) => [...s, layer_scene]);
|
||||
that.active_layer.set(layer_scene);
|
||||
|
||||
@ -191,8 +191,9 @@ export function layer_manager(): LayerManager {
|
||||
undo: function () {
|
||||
container.removeChild(layer_container);
|
||||
|
||||
const _layers = get(that.layers);
|
||||
that.layers.set(_layers.filter((_, i) => i !== layer_number));
|
||||
_layers = get(that.layers);
|
||||
_layers = _layers.filter((_, i) => i !== layer_number);
|
||||
that.layers.set(_layers);
|
||||
const new_layer = _layers[layer_number - 1] || _layers[0] || null;
|
||||
that.active_layer.set(new_layer);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user