fix #3248

demo/blocks_flipper/run.py

@@ -1,51 +1,32 @@
-# import numpy as np
-# import gradio as gr
-
-# def flip_text(x):
-#     return x[::-1]
-
-# def flip_image(x):
-#     return np.fliplr(x)
-
-# with gr.Blocks() as demo:
-#     gr.Markdown("Flip text or image files using this demo.")
-#     with gr.Tab("Flip Text"):
-#         text_input = gr.Textbox()
-#         text_output = gr.Textbox()
-#         text_button = gr.Button("Flip")
-#     with gr.Tab("Flip Image"):
-#         with gr.Row():
-#             image_input = gr.Image()
-#             image_output = gr.Image()
-#         image_button = gr.Button("Flip")
-
-#     with gr.Accordion("Open for More!"):
-#         gr.Markdown("Look at me...")
-
-#     text_button.click(flip_text, inputs=text_input, outputs=text_output)
-#     image_button.click(flip_image, inputs=image_input, outputs=image_output)
-
-# if __name__ == "__main__":
-#     demo.launch()
-
+import numpy as np
 import gradio as gr
-from PIL import Image
 
-img = Image.new("RGB", (512, 512), (0, 0, 0))
-img.save("image.png", "PNG")
 
-print(img)
+def flip_text(x):
+    return x[::-1]
 
 
-def save_image(image):
-    image.save("colorede.png")
-    return image
+def flip_image(x):
+    return np.fliplr(x)
 
 
 with gr.Blocks() as demo:
-    image = gr.Image(value="image.png", interactive=True, tool="color-sketch")
-    button = gr.Button()
-    button.click(save_image, inputs=image, outputs=[])
+    gr.Markdown("Flip text or image files using this demo.")
+    with gr.Tab("Flip Text"):
+        text_input = gr.Textbox()
+        text_output = gr.Textbox()
+        text_button = gr.Button("Flip")
+    with gr.Tab("Flip Image"):
+        with gr.Row():
+            image_input = gr.Image()
+            image_output = gr.Image()
+        image_button = gr.Button("Flip")
+
+    with gr.Accordion("Open for More!"):
+        gr.Markdown("Look at me...")
+
+    text_button.click(flip_text, inputs=text_input, outputs=text_output)
+    image_button.click(flip_image, inputs=image_input, outputs=image_output)
 
 if __name__ == "__main__":
     demo.launch()

demo/blocks_mask/run.py

@@ -1,5 +1,6 @@
 import gradio as gr
 from gradio.components import Markdown as md
+from PIL import Image
 
 demo = gr.Blocks()
 
@@ -53,6 +54,21 @@
 )
 
 
+def save_image(image):
+    image.save("colorede.png")
+    return image
+
+
+img = Image.new("RGB", (512, 512), (150, 150, 150))
+img.save("image.png", "PNG")
+
+io5d = gr.Interface(
+    save_image,
+    gr.Image("image.png", source="upload", tool="color-sketch", type="pil"),
+    gr.Image(),
+)
+
+
 with demo:
     md("# Different Ways to Use the Image Input Component")
     md(
@@ -130,6 +146,8 @@
         io3b2.render()
     with gr.Tab("Two"):
         io3b3.render()
+    md("**5d. Color Sketchpad with image upload and a default images**")
+    io5d.render()
 
 
 if __name__ == "__main__":

ui/packages/image/src/Image.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	// @ts-nocheck
-	import { createEventDispatcher, tick } from "svelte";
+	import { createEventDispatcher, tick, onMount } from "svelte";
 	import { BlockLabel } from "@gradio/atoms";
 	import { Image, Sketch as SketchIcon } from "@gradio/icons";
 
@@ -98,7 +98,7 @@
 	$: dispatch("drag", dragging);
 
 	function handle_image_load(event: Event) {
-		const element = event.composedPath()[0] as HTMLImageElement;
+		const element = event.currentTarget as HTMLImageElement;
 		img_width = element.naturalWidth;
 		img_height = element.naturalHeight;
 		container_height = element.getBoundingClientRect().height;
@@ -158,6 +158,14 @@
 			}
 		}
 	}
+
+	onMount(async () => {
+		if (tool === "color-sketch" && value && typeof value === "string") {
+			static_image = value;
+			await tick();
+			handle_image_load({ currentTarget: value_img });
+		}
+	});
 </script>
 
 <BlockLabel
@@ -242,7 +250,7 @@
 			{:else}
 				<img
 					src={value.image || value}
-					alt=""
+					alt="hello"
 					class:webcam={source === "webcam" && mirror_webcam}
 				/>
 			{/if}

ui/packages/image/src/Sketch.svelte

@@ -14,7 +14,6 @@
 	export let brush_color = "#0b0f19";
 	export let brush_radius = 50;
 	export let source;
-	$: console.log($$props.width, old_height);
 
 	export let width = 400;
 	export let height = 200;
@@ -33,7 +32,6 @@
 
 	$: {
 		if (mounted && value_img !== last_value_img) {
-			console.log("boo");
 			last_value_img = value_img;
 
 			clear();
@@ -152,7 +150,6 @@
 
 		canvas_observer = new ResizeObserver((entries, observer, ...rest) => {
 			handle_canvas_resize(entries, observer);
-			console.log("RESIZE OBSERVER");
 		});
 		canvas_observer.observe(canvas_container);
 
@@ -284,7 +281,6 @@
 	let old_container_height = 0;
 
 	let handle_canvas_resize = async () => {
-		console.log("RESIZE");
 		if (
 			width === old_width &&
 			height === old_height &&
@@ -293,7 +289,6 @@
 			return;
 		}
 		const dimensions = { width: width, height: height };
-		console.log({ dimensions });
 
 		const container_dimensions = {
 			height: container_height,
@@ -331,7 +326,6 @@
 
 	$: {
 		if (width || height) {
-			console.log("WIDTH?HEIGHT RESIZE");
 			handle_canvas_resize();
 		}
 	}
@@ -341,7 +335,6 @@
 		await tick();
 
 		const dpr = window.devicePixelRatio || 1;
-		console.log(dpr, dimensions);
 		canvas.width = dimensions.width * (scale ? dpr : 1);
 		canvas.height = dimensions.height * (scale ? dpr : 1);