From fc39cbdd9b1a9f5509b4e1447f9b286491e1cd48 Mon Sep 17 00:00:00 2001
From: pngwn <hello@pngwn.io>
Date: Mon, 6 Mar 2023 16:04:42 +0000
Subject: [PATCH] ensure image is always drawn (#3386)

* ensure image is always drawn

* fix demo

* notebooks

* clean
---
 CHANGELOG.md                        |   2 +-
 demo/blocks_mask/colorede.png       | Bin 9281 -> 0 bytes
 demo/blocks_mask/run.ipynb          |   2 +-
 ui/packages/image/src/Sketch.svelte |   6 +++++-
 4 files changed, 7 insertions(+), 3 deletions(-)
 delete mode 100644 demo/blocks_mask/colorede.png

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f730ddad1c..44009bd6a1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,7 @@
 No changes to highlight.
 
 ## Bug Fixes:
-No changes to highlight.
+- Ensure uploaded images are always shown in the sketch tool by [@pngwn](https://github.com/pngwn) in [PR 3386](https://github.com/gradio-app/gradio/pull/3386)
 
 ## Documentation Changes:
 No changes to highlight.
diff --git a/demo/blocks_mask/colorede.png b/demo/blocks_mask/colorede.png
deleted file mode 100644
index a8e196f9a62b87ee52b8bed95e482fbd6da55bb4..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 9281
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

diff --git a/demo/blocks_mask/run.ipynb b/demo/blocks_mask/run.ipynb
index fd1c67f86e..47d91349e5 100644
--- a/demo/blocks_mask/run.ipynb
+++ b/demo/blocks_mask/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: blocks_mask"]}, {"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/blocks_mask/colorede.png\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/blocks_mask/image.png\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/blocks_mask/lion.jpg\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/blocks_mask/lion.webp"]}, {"cell_type": "code", "execution_count": null, "id": 44380577570523278879349135829904343037, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from gradio.components import Markdown as md\n", "from PIL import Image\n", "\n", "demo = gr.Blocks()\n", "\n", "io1a = gr.Interface(lambda x: x, gr.Image(), gr.Image())\n", "io1b = gr.Interface(lambda x: x, gr.Image(source=\"webcam\"), gr.Image())\n", "\n", "io2a = gr.Interface(lambda x: x, gr.Image(source=\"canvas\"), gr.Image())\n", "io2b = gr.Interface(lambda x: x, gr.Sketchpad(), gr.Image())\n", "io2c = gr.Interface(\n", "    lambda x: x, gr.Image(source=\"canvas\", shape=(512, 512)), gr.Image()\n", ")\n", "\n", "io3a = gr.Interface(\n", "    lambda x: [x[\"mask\"], x[\"image\"]],\n", "    gr.Image(source=\"upload\", tool=\"sketch\"),\n", "    [gr.Image(), gr.Image()],\n", ")\n", "\n", "io3b = gr.Interface(\n", "    lambda x: [x[\"mask\"], x[\"image\"]],\n", "    gr.ImageMask(),\n", "    [gr.Image(), gr.Image()],\n", ")\n", "\n", "io3b2 = gr.Interface(\n", "    lambda x: [x[\"mask\"], x[\"image\"]],\n", "    gr.ImageMask(),\n", "    [gr.Image(), gr.Image()],\n", ")\n", "\n", "io3b3 = gr.Interface(\n", "    lambda x: [x[\"mask\"], x[\"image\"]],\n", "    gr.ImageMask(),\n", "    [gr.Image(), gr.Image()],\n", ")\n", "\n", "io3c = gr.Interface(\n", "    lambda x: [x[\"mask\"], x[\"image\"]],\n", "    gr.Image(source=\"webcam\", tool=\"sketch\"),\n", "    [gr.Image(), gr.Image()],\n", ")\n", "\n", "io4a = gr.Interface(\n", "    lambda x: x, gr.Image(source=\"canvas\", tool=\"color-sketch\"), gr.Image()\n", ")\n", "io4b = gr.Interface(lambda x: x, gr.Paint(), gr.Image())\n", "\n", "io5a = gr.Interface(\n", "    lambda x: x, gr.Image(source=\"upload\", tool=\"color-sketch\"), gr.Image()\n", ")\n", "io5b = gr.Interface(lambda x: x, gr.ImagePaint(), gr.Image())\n", "io5c = gr.Interface(\n", "    lambda x: x, gr.Image(source=\"webcam\", tool=\"color-sketch\"), gr.Image()\n", ")\n", "\n", "\n", "def save_image(image):\n", "    image.save(\"colorede.png\")\n", "    return image\n", "\n", "\n", "img = Image.new(\"RGB\", (512, 512), (150, 150, 150))\n", "img.save(\"image.png\", \"PNG\")\n", "\n", "io5d = gr.Interface(\n", "    save_image,\n", "    gr.Image(\"image.png\", source=\"upload\", tool=\"color-sketch\", type=\"pil\"),\n", "    gr.Image(),\n", ")\n", "\n", "with demo:\n", "    md(\"# Different Ways to Use the Image Input Component\")\n", "    md(\n", "        \"**1a. Standalone Image Upload: `gr.Interface(lambda x: x, gr.Image(), gr.Image())`**\"\n", "    )\n", "    io1a.render()\n", "    md(\n", "        \"**1b. Standalone Image from Webcam: `gr.Interface(lambda x: x, gr.Image(source='webcam'), gr.Image())`**\"\n", "    )\n", "    io1b.render()\n", "    md(\n", "        \"**2a. Black and White Sketchpad: `gr.Interface(lambda x: x, gr.Image(source='canvas'), gr.Image())`**\"\n", "    )\n", "    io2a.render()\n", "    md(\n", "        \"**2b. Black and White Sketchpad: `gr.Interface(lambda x: x, gr.Sketchpad(), gr.Image())`**\"\n", "    )\n", "    io2b.render()\n", "    md(\"**2c. Black and White Sketchpad with `shape=(512,512)`**\")\n", "    io2c.render()\n", "    md(\"**3a. Binary Mask with image upload:**\")\n", "    md(\n", "        \"\"\"```python\n", "gr.Interface(\n", "    lambda x: [x['mask'], x['image']],\n", "    gr.Image(source='upload', tool='sketch'),\n", "    [gr.Image(), gr.Image()],\n", ")\n", "```\n", "\"\"\"\n", "    )\n", "    io3a.render()\n", "    md(\"**3b. Binary Mask with image upload:**\")\n", "    md(\n", "        \"\"\"```python\n", "gr.Interface(\n", "    lambda x: [x['mask'], x['image']],\n", "    gr.ImageMask(),\n", "    [gr.Image(), gr.Image()],\n", ")\n", "```\n", "\"\"\"\n", "    )\n", "    io3b.render()\n", "    md(\"**3c. Binary Mask with webcam upload:**\")\n", "    md(\n", "        \"\"\"```python\n", "gr.Interface(\n", "    lambda x: [x['mask'], x['image']],\n", "    gr.Image(source='webcam', tool='sketch'),\n", "    [gr.Image(), gr.Image()],\n", ")\n", "```\n", "\"\"\"\n", "    )\n", "    io3c.render()\n", "    md(\n", "        \"**4a. Color Sketchpad: `gr.Interface(lambda x: x, gr.Image(source='canvas', tool='color-sketch'), gr.Image())`**\"\n", "    )\n", "    io4a.render()\n", "    md(\"**4b. Color Sketchpad: `gr.Interface(lambda x: x, gr.Paint(), gr.Image())`**\")\n", "    io4b.render()\n", "    md(\n", "        \"**5a. Color Sketchpad with image upload: `gr.Interface(lambda x: x, gr.Image(source='upload', tool='color-sketch'), gr.Image())`**\"\n", "    )\n", "    io5a.render()\n", "    md(\n", "        \"**5b. Color Sketchpad with image upload: `gr.Interface(lambda x: x, gr.ImagePaint(), gr.Image())`**\"\n", "    )\n", "    io5b.render()\n", "    md(\n", "        \"**5c. Color Sketchpad with webcam upload: `gr.Interface(lambda x: x, gr.Image(source='webcam', tool='color-sketch'), gr.Image())`**\"\n", "    )\n", "    io5c.render()\n", "    md(\"**Tabs**\")\n", "    with gr.Tab(\"One\"):\n", "        io3b2.render()\n", "    with gr.Tab(\"Two\"):\n", "        io3b3.render()\n", "    md(\"**5d. Color Sketchpad with image upload and a default images**\")\n", "    io5d.render()\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: blocks_mask"]}, {"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/blocks_mask/image.png\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/blocks_mask/lion.jpg\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/blocks_mask/lion.webp"]}, {"cell_type": "code", "execution_count": null, "id": 44380577570523278879349135829904343037, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from gradio.components import Markdown as md\n", "from PIL import Image\n", "\n", "demo = gr.Blocks()\n", "\n", "io1a = gr.Interface(lambda x: x, gr.Image(), gr.Image())\n", "io1b = gr.Interface(lambda x: x, gr.Image(source=\"webcam\"), gr.Image())\n", "\n", "io2a = gr.Interface(lambda x: x, gr.Image(source=\"canvas\"), gr.Image())\n", "io2b = gr.Interface(lambda x: x, gr.Sketchpad(), gr.Image())\n", "io2c = gr.Interface(\n", "    lambda x: x, gr.Image(source=\"canvas\", shape=(512, 512)), gr.Image()\n", ")\n", "\n", "io3a = gr.Interface(\n", "    lambda x: [x[\"mask\"], x[\"image\"]],\n", "    gr.Image(source=\"upload\", tool=\"sketch\"),\n", "    [gr.Image(), gr.Image()],\n", ")\n", "\n", "io3b = gr.Interface(\n", "    lambda x: [x[\"mask\"], x[\"image\"]],\n", "    gr.ImageMask(),\n", "    [gr.Image(), gr.Image()],\n", ")\n", "\n", "io3b2 = gr.Interface(\n", "    lambda x: [x[\"mask\"], x[\"image\"]],\n", "    gr.ImageMask(),\n", "    [gr.Image(), gr.Image()],\n", ")\n", "\n", "io3b3 = gr.Interface(\n", "    lambda x: [x[\"mask\"], x[\"image\"]],\n", "    gr.ImageMask(),\n", "    [gr.Image(), gr.Image()],\n", ")\n", "\n", "io3c = gr.Interface(\n", "    lambda x: [x[\"mask\"], x[\"image\"]],\n", "    gr.Image(source=\"webcam\", tool=\"sketch\"),\n", "    [gr.Image(), gr.Image()],\n", ")\n", "\n", "io4a = gr.Interface(\n", "    lambda x: x, gr.Image(source=\"canvas\", tool=\"color-sketch\"), gr.Image()\n", ")\n", "io4b = gr.Interface(lambda x: x, gr.Paint(), gr.Image())\n", "\n", "io5a = gr.Interface(\n", "    lambda x: x, gr.Image(source=\"upload\", tool=\"color-sketch\"), gr.Image()\n", ")\n", "io5b = gr.Interface(lambda x: x, gr.ImagePaint(), gr.Image())\n", "io5c = gr.Interface(\n", "    lambda x: x, gr.Image(source=\"webcam\", tool=\"color-sketch\"), gr.Image()\n", ")\n", "\n", "\n", "def save_image(image):\n", "    image.save(\"colorede.png\")\n", "    return image\n", "\n", "\n", "img = Image.new(\"RGB\", (512, 512), (150, 150, 150))\n", "img.save(\"image.png\", \"PNG\")\n", "\n", "io5d = gr.Interface(\n", "    save_image,\n", "    gr.Image(\"image.png\", source=\"upload\", tool=\"color-sketch\", type=\"pil\"),\n", "    gr.Image(),\n", ")\n", "\n", "with demo:\n", "    md(\"# Different Ways to Use the Image Input Component\")\n", "    md(\n", "        \"**1a. Standalone Image Upload: `gr.Interface(lambda x: x, gr.Image(), gr.Image())`**\"\n", "    )\n", "    io1a.render()\n", "    md(\n", "        \"**1b. Standalone Image from Webcam: `gr.Interface(lambda x: x, gr.Image(source='webcam'), gr.Image())`**\"\n", "    )\n", "    io1b.render()\n", "    md(\n", "        \"**2a. Black and White Sketchpad: `gr.Interface(lambda x: x, gr.Image(source='canvas'), gr.Image())`**\"\n", "    )\n", "    io2a.render()\n", "    md(\n", "        \"**2b. Black and White Sketchpad: `gr.Interface(lambda x: x, gr.Sketchpad(), gr.Image())`**\"\n", "    )\n", "    io2b.render()\n", "    md(\"**2c. Black and White Sketchpad with `shape=(512,512)`**\")\n", "    io2c.render()\n", "    md(\"**3a. Binary Mask with image upload:**\")\n", "    md(\n", "        \"\"\"```python\n", "gr.Interface(\n", "    lambda x: [x['mask'], x['image']],\n", "    gr.Image(source='upload', tool='sketch'),\n", "    [gr.Image(), gr.Image()],\n", ")\n", "```\n", "\"\"\"\n", "    )\n", "    io3a.render()\n", "    md(\"**3b. Binary Mask with image upload:**\")\n", "    md(\n", "        \"\"\"```python\n", "gr.Interface(\n", "    lambda x: [x['mask'], x['image']],\n", "    gr.ImageMask(),\n", "    [gr.Image(), gr.Image()],\n", ")\n", "```\n", "\"\"\"\n", "    )\n", "    io3b.render()\n", "    md(\"**3c. Binary Mask with webcam upload:**\")\n", "    md(\n", "        \"\"\"```python\n", "gr.Interface(\n", "    lambda x: [x['mask'], x['image']],\n", "    gr.Image(source='webcam', tool='sketch'),\n", "    [gr.Image(), gr.Image()],\n", ")\n", "```\n", "\"\"\"\n", "    )\n", "    io3c.render()\n", "    md(\n", "        \"**4a. Color Sketchpad: `gr.Interface(lambda x: x, gr.Image(source='canvas', tool='color-sketch'), gr.Image())`**\"\n", "    )\n", "    io4a.render()\n", "    md(\"**4b. Color Sketchpad: `gr.Interface(lambda x: x, gr.Paint(), gr.Image())`**\")\n", "    io4b.render()\n", "    md(\n", "        \"**5a. Color Sketchpad with image upload: `gr.Interface(lambda x: x, gr.Image(source='upload', tool='color-sketch'), gr.Image())`**\"\n", "    )\n", "    io5a.render()\n", "    md(\n", "        \"**5b. Color Sketchpad with image upload: `gr.Interface(lambda x: x, gr.ImagePaint(), gr.Image())`**\"\n", "    )\n", "    io5b.render()\n", "    md(\n", "        \"**5c. Color Sketchpad with webcam upload: `gr.Interface(lambda x: x, gr.Image(source='webcam', tool='color-sketch'), gr.Image())`**\"\n", "    )\n", "    io5c.render()\n", "    md(\"**Tabs**\")\n", "    with gr.Tab(\"One\"):\n", "        io3b2.render()\n", "    with gr.Tab(\"Two\"):\n", "        io3b3.render()\n", "    md(\"**5d. Color Sketchpad with image upload and a default images**\")\n", "    io5d.render()\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/ui/packages/image/src/Sketch.svelte b/ui/packages/image/src/Sketch.svelte
index 7dec6920a0..a22e586073 100644
--- a/ui/packages/image/src/Sketch.svelte
+++ b/ui/packages/image/src/Sketch.svelte
@@ -107,7 +107,11 @@
 	let line_count = 0;
 
 	function draw_cropped_image() {
-		if (!shape) return { x: 0, y: 0, width, height };
+		if (!shape) {
+			ctx.temp.drawImage(value_img, 0, 0, width, height);
+			return;
+		}
+
 		let _width = value_img.naturalWidth;
 		let _height = value_img.naturalHeight;