Allow setting sketch color default (#4979)

* changes * add changeset * changes * changes * changes * changes * changes * changes * changes * changes * changes --------- Co-authored-by: pngwn <hello@pngwn.io> Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
gradio-app · Jul 25, 2023 · 44ac8ad · 44ac8ad · vercel · Jul 25, 2023
1 parent 3f8c210
commit 44ac8ad
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 89 deletions.
diff --git a/.changeset/smooth-dragons-ask.md b/.changeset/smooth-dragons-ask.md
@@ -0,0 +1,7 @@
+---
+"@gradio/app": minor
+"@gradio/image": minor
+"gradio": minor
+---
+
+feat:Allow setting sketch color default
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@
 - Added autofocus argument to Textbox by [@aliabid94](https://github.com/aliabid94) in [PR 4978](https://github.com/gradio-app/gradio/pull/4978) 
 - The `gr.ChatInterface` UI now converts the "Submit" button to a "Stop" button in ChatInterface while streaming, which can be used to pause generation. By [@abidlabs](https://github.com/abidlabs) in [PR 4971](https://github.com/gradio-app/gradio/pull/4971).
 - Add a `border_color_accent_subdued` theme variable to add a subdued border color to accented items. This is used by chatbot user messages. Set the value of this variable in `Default` theme to `*primary_200`. By [@freddyaboulton](https://github.com/freddyaboulton) in [PR 4989](https://github.com/gradio-app/gradio/pull/4989)
+- Add default sketch color argument `brush_color`. Also, masks drawn on images are now slightly translucent (and mask color can also be set via brush_color). By [@aliabid94](https://github.com/aliabid94) in [PR 4979](https://github.com/gradio-app/gradio/pull/4979)
 
 ### Bug Fixes:
 

diff --git a/gradio/components/image.py b/gradio/components/image.py
@@ -81,6 +81,8 @@ def __init__(
         elem_classes: list[str] | str | None = None,
         mirror_webcam: bool = True,
         brush_radius: float | None = None,
+        brush_color: str = "#000000",
+        mask_opacity: float = 0.7,
         show_share_button: bool | None = None,
         **kwargs,
     ):
@@ -109,9 +111,13 @@ def __init__(
             elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
             mirror_webcam: If True webcam will be mirrored. Default is True.
             brush_radius: Size of the brush for Sketch. Default is None which chooses a sensible default
+            brush_color: Color of the brush for Sketch as hex string. Default is "#000000".
+            mask_opacity: Opacity of mask drawn on image, as a value between 0 and 1.
             show_share_button: If True, will show a share icon in the corner of the component that allows user to share outputs to Hugging Face Spaces Discussions. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.
         """
         self.brush_radius = brush_radius
+        self.brush_color = brush_color
+        self.mask_opacity = mask_opacity
         self.mirror_webcam = mirror_webcam
         valid_types = ["numpy", "pil", "filepath"]
         if type not in valid_types:
@@ -178,6 +184,8 @@ def get_config(self):
             "streaming": self.streaming,
             "mirror_webcam": self.mirror_webcam,
             "brush_radius": self.brush_radius,
+            "brush_color": self.brush_color,
+            "mask_opacity": self.mask_opacity,
             "selectable": self.selectable,
             "show_share_button": self.show_share_button,
             "show_download_button": self.show_download_button,
@@ -198,6 +206,8 @@ def update(
         interactive: bool | None = None,
         visible: bool | None = None,
         brush_radius: float | None = None,
+        brush_color: str | None = None,
+        mask_opacity: float | None = None,
         show_share_button: bool | None = None,
     ):
         return {
@@ -213,6 +223,8 @@ def update(
             "visible": visible,
             "value": value,
             "brush_radius": brush_radius,
+            "brush_color": brush_color,
+            "mask_opacity": mask_opacity,
             "show_share_button": show_share_button,
             "__type__": "update",
         }
@@ -276,6 +288,10 @@ def preprocess(
 
         if self.tool == "sketch" and self.source in ["upload", "webcam"]:
             mask_im = processing_utils.decode_base64_to_image(mask)
+
+            if mask_im.mode == "RGBA":  # whiten any opaque pixels in the mask
+                alpha_data = mask_im.getchannel("A").convert("L")
+                mask_im = _Image.merge("RGB", [alpha_data, alpha_data, alpha_data])
             return {
                 "image": self._format_image(im),
                 "mask": self._format_image(mask_im),

diff --git a/gradio/templates.py b/gradio/templates.py
@@ -68,6 +68,7 @@ def __init__(
         elem_id: str | None = None,
         mirror_webcam: bool = True,
         brush_radius: float | None = None,
+        brush_color: str = "#000000",
         **kwargs,
     ):
         super().__init__(
@@ -86,6 +87,7 @@ def __init__(
             elem_id=elem_id,
             mirror_webcam=mirror_webcam,
             brush_radius=brush_radius,
+            brush_color=brush_color,
             **kwargs,
         )
 
@@ -115,6 +117,7 @@ def __init__(
         elem_id: str | None = None,
         mirror_webcam: bool = True,
         brush_radius: float | None = None,
+        brush_color: str = "#000000",
         **kwargs,
     ):
         super().__init__(
@@ -133,6 +136,7 @@ def __init__(
             elem_id=elem_id,
             mirror_webcam=mirror_webcam,
             brush_radius=brush_radius,
+            brush_color=brush_color,
             **kwargs,
         )
 
@@ -162,6 +166,7 @@ def __init__(
         elem_id: str | None = None,
         mirror_webcam: bool = True,
         brush_radius: float | None = None,
+        brush_color: str = "#000000",
         **kwargs,
     ):
         super().__init__(
@@ -180,6 +185,7 @@ def __init__(
             elem_id=elem_id,
             mirror_webcam=mirror_webcam,
             brush_radius=brush_radius,
+            brush_color=brush_color,
             **kwargs,
         )
 
@@ -209,6 +215,7 @@ def __init__(
         elem_id: str | None = None,
         mirror_webcam: bool = True,
         brush_radius: float | None = None,
+        brush_color: str = "#000000",
         **kwargs,
     ):
         super().__init__(
@@ -227,6 +234,7 @@ def __init__(
             elem_id=elem_id,
             mirror_webcam=mirror_webcam,
             brush_radius=brush_radius,
+            brush_color=brush_color,
             **kwargs,
         )
 
@@ -256,6 +264,7 @@ def __init__(
         elem_id: str | None = None,
         mirror_webcam: bool = True,
         brush_radius: float | None = None,
+        brush_color: str = "#000000",
         **kwargs,
     ):
         super().__init__(
@@ -274,6 +283,7 @@ def __init__(
             elem_id=elem_id,
             mirror_webcam=mirror_webcam,
             brush_radius=brush_radius,
+            brush_color=brush_color,
             **kwargs,
         )
 
@@ -303,6 +313,7 @@ def __init__(
         elem_id: str | None = None,
         mirror_webcam: bool = True,
         brush_radius: float | None = None,
+        brush_color: str = "#000000",
         **kwargs,
     ):
         super().__init__(
@@ -321,6 +332,7 @@ def __init__(
             elem_id=elem_id,
             mirror_webcam=mirror_webcam,
             brush_radius=brush_radius,
+            brush_color=brush_color,
             **kwargs,
         )
 

diff --git a/gradio/test_data/blocks_configs.py b/gradio/test_data/blocks_configs.py
@@ -54,6 +54,8 @@
             "type": "image",
             "props": {
                 "image_mode": "RGB",
+                "brush_color": "#000000",
+                "mask_opacity": 0.7,
                 "source": "upload",
                 "tool": "editor",
                 "streaming": False,
@@ -127,6 +129,8 @@
             "type": "image",
             "props": {
                 "image_mode": "RGB",
+                "brush_color": "#000000",
+                "mask_opacity": 0.7,
                 "source": "upload",
                 "tool": "editor",
                 "streaming": False,
@@ -375,6 +379,8 @@
             "type": "image",
             "props": {
                 "image_mode": "RGB",
+                "brush_color": "#000000",
+                "mask_opacity": 0.7,
                 "source": "upload",
                 "tool": "editor",
                 "streaming": False,
@@ -448,6 +454,8 @@
             "type": "image",
             "props": {
                 "image_mode": "RGB",
+                "brush_color": "#000000",
+                "mask_opacity": 0.7,
                 "source": "upload",
                 "tool": "editor",
                 "streaming": False,
@@ -699,6 +707,8 @@
             "type": "image",
             "props": {
                 "image_mode": "RGB",
+                "brush_color": "#000000",
+                "mask_opacity": 0.7,
                 "source": "upload",
                 "streaming": False,
                 "mirror_webcam": True,
@@ -750,6 +760,8 @@
             "type": "image",
             "props": {
                 "image_mode": "RGB",
+                "brush_color": "#000000",
+                "mask_opacity": 0.7,
                 "source": "upload",
                 "tool": "editor",
                 "streaming": False,

diff --git a/js/app/src/components/Image/Image.svelte b/js/app/src/components/Image/Image.svelte
@@ -25,6 +25,8 @@
 	export let mirror_webcam: boolean;
 	export let shape: [number, number];
 	export let brush_radius: number;
+	export let brush_color: string;
+	export let mask_opacity: number;
 	export let selectable = false;
 	export let container = true;
 	export let scale: number | null = null;
@@ -78,11 +80,13 @@
 	{:else}
 		<Image
 			{brush_radius}
+			{brush_color}
 			{shape}
 			bind:value
 			{source}
 			{tool}
 			{selectable}
+			{mask_opacity}
 			on:edit
 			on:clear
 			on:stream

diff --git a/js/image/src/Image.svelte b/js/image/src/Image.svelte
@@ -28,6 +28,8 @@
 	export let pending: boolean = false;
 	export let mirror_webcam: boolean;
 	export let brush_radius: number;
+	export let brush_color = "#000000";
+	export let mask_opacity;
 	export let selectable: boolean = false;
 
 	let sketch: Sketch;
@@ -139,9 +141,6 @@
 			mode = "editor";
 		}
 	}
-
-	$: brush_color = mode == "mask" ? "#000000" : "#000";
-
 	let value_img;
 	let max_height;
 	let max_width;
@@ -238,6 +237,7 @@
 						bind:this={sketch}
 						bind:brush_radius
 						bind:brush_color
+						{mask_opacity}
 						on:change={handle_save}
 						{mode}
 						width={img_width || max_width}