testing

Author: pngwn

demo/blocks_flipper/image.png

@@ -1,29 +1,51 @@
-import numpy as np
+# 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 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 flip_image(x):
-    return np.fliplr(x)
+def save_image(image):
+    image.save("colorede.png")
+    return image
+
 
 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)
-    
+    image = gr.Image(value="image.png", interactive=True, tool="color-sketch")
+    button = gr.Button()
+    button.click(save_image, inputs=image, outputs=[])
+
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()

demo/blocks_flipper/run.py

@@ -14,6 +14,7 @@
 	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;
@@ -32,6 +33,7 @@
 
 	$: {
 		if (mounted && value_img !== last_value_img) {
+			console.log("boo");
 			last_value_img = value_img;
 
 			clear();
@@ -150,6 +152,7 @@
 
 		canvas_observer = new ResizeObserver((entries, observer, ...rest) => {
 			handle_canvas_resize(entries, observer);
+			console.log("RESIZE OBSERVER");
 		});
 		canvas_observer.observe(canvas_container);
 
@@ -281,6 +284,7 @@
 	let old_container_height = 0;
 
 	let handle_canvas_resize = async () => {
+		console.log("RESIZE");
 		if (
 			width === old_width &&
 			height === old_height &&
@@ -289,6 +293,7 @@
 			return;
 		}
 		const dimensions = { width: width, height: height };
+		console.log({ dimensions });
 
 		const container_dimensions = {
 			height: container_height,
@@ -311,7 +316,8 @@
 			old_height = height;
 			old_width = width;
 			old_container_height = container_height;
-		}, 100);
+		}, 10);
+		await tick();
 
 		clear();
 	};
@@ -325,6 +331,7 @@
 
 	$: {
 		if (width || height) {
+			console.log("WIDTH?HEIGHT RESIZE");
 			handle_canvas_resize();
 		}
 	}
@@ -334,6 +341,7 @@
 		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);