Share button

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Allow the web component `space`, `src`, and `host` attributes to be updated dynamically by [@pngwn](https://github.com/pngwn) in [PR 4461](https://github.com/gradio-app/gradio/pull/4461)
 - Spaces Duplication built into Gradio, by [@aliabid94](https://github.com/aliabid94) in [PR 4458](https://github.com/gradio-app/gradio/pull/4458)
+- Spaces sharing built into Gradio, by [@aliabid94](https://github.com/aliabid94) in [PR 4651](https://github.com/gradio-app/gradio/pull/4651)
 
 ## Bug Fixes:
 

gradio/components/audio.py

@@ -13,7 +13,7 @@
 from gradio_client.serializing import FileSerializable
 
 from gradio import processing_utils, utils
-from gradio.components.base import IOComponent, _Keywords
+from gradio.components.base import Component, IOComponent, _Keywords
 from gradio.events import (
     Changeable,
     Clearable,
@@ -67,6 +67,7 @@ def __init__(
         elem_classes: list[str] | str | None = None,
         format: Literal["wav", "mp3"] = "wav",
         autoplay: bool = False,
+        shareable: bool | str | Component | list[Component | str] | None = None,
         **kwargs,
     ):
         """
@@ -86,6 +87,7 @@ def __init__(
             elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
             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.
             format: The file format to save audio files. Either 'wav' or 'mp3'. wav files are lossless but will tend to be larger files. mp3 files tend to be smaller. Default is wav. Applies both when this component is used as an input (when `type` is "format") and when this component is used as an output.
+            shareable: If True, will allow user to share generation on Hugging Face Spaces Discussions. Can also provide a list of strings and Components that will be concatenated into the title post.
         """
         valid_sources = ["upload", "microphone"]
         if source not in valid_sources:
@@ -106,6 +108,7 @@ def __init__(
             )
         self.format = format
         self.autoplay = autoplay
+        self.shareable = utils.format_shareable_title(shareable)
         IOComponent.__init__(
             self,
             label=label,
@@ -129,6 +132,7 @@ def get_config(self):
             "value": self.value,
             "streaming": self.streaming,
             "autoplay": self.autoplay,
+            "shareable": self.shareable,
             **IOComponent.get_config(self),
         }
 

gradio/components/chatbot.py

@@ -10,7 +10,7 @@
 from gradio_client.serializing import JSONSerializable
 
 from gradio import utils
-from gradio.components.base import IOComponent, _Keywords
+from gradio.components.base import Component, IOComponent, _Keywords
 from gradio.deprecation import warn_deprecation, warn_style_method_deprecation
 from gradio.events import (
     Changeable,
@@ -50,6 +50,7 @@ def __init__(
         elem_classes: list[str] | str | None = None,
         height: int | None = None,
         latex_delimiters: list[dict[str, str | bool]] | None = None,
+        shareable: bool | str | Component | list[Component | str] | None = None,
         **kwargs,
     ):
         """
@@ -66,6 +67,7 @@ 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.
             height: height of the component in pixels.
             latex_delimiters: A list of dicts of the form {"left": open delimiter (str), "right": close delimiter (str), "display": whether to display in newline (bool)} that will be used to render LaTeX expressions. If not provided, `latex_delimiters` is set to `[{ "left": "$$", "right": "$$", "display": True }]`, so only expressions enclosed in $$ delimiters will be rendered as LaTeX, and in a new line. Pass in an empty list to disable LaTeX rendering. For more information, see the [KaTeX documentation](https://katex.org/docs/autorender.html).
+            shareable: If True, will allow user to share generation on Hugging Face Spaces Discussions. Can also provide a list of strings and Components that will be concatenated into the title post.
         """
         if color_map is not None:
             warn_deprecation("The 'color_map' parameter has been deprecated.")
@@ -79,6 +81,7 @@ def __init__(
         if latex_delimiters is None:
             latex_delimiters = [{"left": "$$", "right": "$$", "display": True}]
         self.latex_delimiters = latex_delimiters
+        self.shareable = utils.format_shareable_title(shareable)
 
         IOComponent.__init__(
             self,
@@ -101,6 +104,7 @@ def get_config(self):
             "latex_delimiters": self.latex_delimiters,
             "selectable": self.selectable,
             "height": self.height,
+            "shareable": self.shareable,
             **IOComponent.get_config(self),
         }
 

gradio/components/gallery.py

@@ -10,7 +10,7 @@
 from PIL import Image as _Image  # using _ to minimize namespace pollution
 
 from gradio import utils
-from gradio.components.base import IOComponent, _Keywords
+from gradio.components.base import Component, IOComponent, _Keywords
 from gradio.deprecation import warn_deprecation, warn_style_method_deprecation
 from gradio.events import (
     EventListenerMethod,
@@ -50,6 +50,7 @@ def __init__(
         object_fit: Literal["contain", "cover", "fill", "none", "scale-down"]
         | None = None,
         allow_preview: bool = True,
+        shareable: bool | str | Component | list[Component | str] | None = None,
         **kwargs,
     ):
         """
@@ -70,6 +71,7 @@ def __init__(
             preview: If True, will display the Gallery in preview mode, which shows all of the images as thumbnails and allows the user to click on them to view them in full size.
             object_fit: CSS object-fit property for the thumbnail images in the gallery. Can be "contain", "cover", "fill", "none", or "scale-down".
             allow_preview: If True, images in the gallery will be enlarged when they are clicked. Default is True.
+            shareable: If True, will allow user to share generation on Hugging Face Spaces Discussions. Can also provide a list of strings and Components that will be concatenated into the title post.
         """
         self.grid_cols = columns
         self.grid_rows = rows
@@ -83,6 +85,7 @@ def __init__(
         Uses event data gradio.SelectData to carry `value` referring to caption of selected image, and `index` to refer to index.
         See EventData documentation on how to use this event data.
         """
+        self.shareable = utils.format_shareable_title(shareable)
         IOComponent.__init__(
             self,
             label=label,
@@ -142,6 +145,7 @@ def get_config(self):
             "preview": self.preview,
             "object_fit": self.object_fit,
             "allow_preview": self.allow_preview,
+            "shareable": self.shareable,
             **IOComponent.get_config(self),
         }
 

gradio/components/image.py

@@ -15,7 +15,7 @@
 from PIL import Image as _Image  # using _ to minimize namespace pollution
 
 from gradio import processing_utils, utils
-from gradio.components.base import IOComponent, _Keywords
+from gradio.components.base import Component, IOComponent, _Keywords
 from gradio.deprecation import warn_style_method_deprecation
 from gradio.events import (
     Changeable,
@@ -80,6 +80,7 @@ def __init__(
         elem_classes: list[str] | str | None = None,
         mirror_webcam: bool = True,
         brush_radius: float | None = None,
+        shareable: bool | str | Component | list[Component | str] | None = None,
         **kwargs,
     ):
         """
@@ -106,6 +107,7 @@ 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
+            shareable: If True, will allow user to share generation on Hugging Face Spaces Discussions. Can also provide a list of strings and Components that will be concatenated into the title post.
         """
         self.brush_radius = brush_radius
         self.mirror_webcam = mirror_webcam
@@ -139,7 +141,7 @@ def __init__(
         Uses event data gradio.SelectData to carry `index` to refer to the [x, y] coordinates of the clicked pixel.
         See EventData documentation on how to use this event data.
         """
-
+        self.shareable = utils.format_shareable_title(shareable)
         IOComponent.__init__(
             self,
             label=label,
@@ -170,6 +172,7 @@ def get_config(self):
             "mirror_webcam": self.mirror_webcam,
             "brush_radius": self.brush_radius,
             "selectable": self.selectable,
+            "shareable": self.shareable,
             **IOComponent.get_config(self),
         }
 

gradio/components/video.py

@@ -13,7 +13,7 @@
 from gradio_client.serializing import VideoSerializable
 
 from gradio import processing_utils, utils, wasm_utils
-from gradio.components.base import IOComponent, _Keywords
+from gradio.components.base import Component, IOComponent, _Keywords
 from gradio.deprecation import warn_style_method_deprecation
 from gradio.events import Changeable, Clearable, Playable, Recordable, Uploadable
 
@@ -67,6 +67,7 @@ def __init__(
         mirror_webcam: bool = True,
         include_audio: bool | None = None,
         autoplay: bool = False,
+        shareable: bool | str | Component | list[Component | str] | None = None,
         **kwargs,
     ):
         """
@@ -88,6 +89,7 @@ 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.
             include_audio: Whether the component should record/retain the audio track for a video. By default, audio is excluded for webcam videos and included for uploaded videos.
+            shareable: If True, will allow user to share generation on Hugging Face Spaces Discussions. Can also provide a list of strings and Components that will be concatenated into the title post.
         """
         self.format = format
         self.autoplay = autoplay
@@ -103,6 +105,7 @@ def __init__(
         self.include_audio = (
             include_audio if include_audio is not None else source == "upload"
         )
+        self.shareable = utils.format_shareable_title(shareable)
         IOComponent.__init__(
             self,
             label=label,
@@ -128,6 +131,7 @@ def get_config(self):
             "mirror_webcam": self.mirror_webcam,
             "include_audio": self.include_audio,
             "autoplay": self.autoplay,
+            "shareable": self.shareable,
             **IOComponent.get_config(self),
         }
 

gradio/test_data/blocks_configs.py

@@ -62,6 +62,7 @@
                 "container": True,
                 "min_width": 160,
                 "name": "image",
+                "shareable": False,
                 "visible": True,
             },
             "serializer": "ImgSerializable",
@@ -133,6 +134,7 @@
                 "container": True,
                 "min_width": 160,
                 "name": "image",
+                "shareable": False,
                 "visible": True,
             },
             "serializer": "ImgSerializable",
@@ -376,6 +378,7 @@
                 "container": True,
                 "min_width": 160,
                 "name": "image",
+                "shareable": False,
                 "visible": True,
             },
             "serializer": "ImgSerializable",
@@ -447,6 +450,7 @@
                 "container": True,
                 "min_width": 160,
                 "name": "image",
+                "shareable": False,
                 "visible": True,
             },
             "serializer": "ImgSerializable",
@@ -689,6 +693,7 @@
                 "mirror_webcam": True,
                 "tool": "editor",
                 "name": "image",
+                "shareable": False,
                 "selectable": False,
             },
         },
@@ -739,6 +744,7 @@
                 "streaming": False,
                 "mirror_webcam": True,
                 "name": "image",
+                "shareable": False,
                 "selectable": False,
             },
         },

gradio/utils.py

@@ -113,6 +113,20 @@ def get_space() -> str | None:
     return None
 
 
+def format_shareable_title(
+    shareable: bool | str | Component | list[Component | str] | None,
+) -> bool | list[str | int]:
+    from gradio.components import Component
+
+    if isinstance(shareable, bool):
+        return shareable
+    if shareable is None:
+        return get_space() is not None
+    if isinstance(shareable, (Component, str)):
+        shareable = [shareable]
+    return [item._id if isinstance(item, Component) else item for item in shareable]
+
+
 def readme_to_html(article: str) -> str:
     try:
         response = requests.get(article, timeout=3)

js/app/src/Blocks.svelte

@@ -22,6 +22,7 @@
 	import type { ThemeMode } from "./components/types";
 	import Toast from "./components/StatusTracker/Toast.svelte";
 	import type { ToastMessage } from "./components/StatusTracker/types";
+	import type { ShareData } from "@gradio/utils";
 
 	import logo from "./images/logo.svg";
 	import api_logo from "./api_docs/img/api-logo.svg";
@@ -367,6 +368,20 @@
 		}
 	};
 
+	const trigger_share = (title: string, description: string) => {
+		if (space_id === null) {
+			return;
+		}
+		const discussion_url = new URL(
+			`https://huggingface.co/spaces/${space_id}/discussions/new`
+		);
+		if (title.length > 0) {
+			discussion_url.searchParams.set("title", title);
+		}
+		discussion_url.searchParams.set("description", description);
+		window.open(discussion_url.toString(), "_blank");
+	};
+
 	function handle_error_close(e: Event & { detail: number }) {
 		const _id = e.detail;
 		messages = messages.filter((m) => m.id !== _id);
@@ -389,6 +404,7 @@
 				a[i].setAttribute("target", "_blank");
 		}
 
+		let shareable_components: Array<number> = [];
 		dependencies.forEach((dep, i) => {
 			let { targets, trigger, inputs, outputs } = dep;
 			const target_instances: [number, ComponentMeta][] = targets.map((t) => [
@@ -409,6 +425,7 @@
 				handled_dependencies[i] = [-1];
 			}
 
+			// component events
 			target_instances
 				.filter((v) => !!v && !!v[1])
 				.forEach(([id, { instance }]: [number, ComponentMeta]) => {
@@ -420,6 +437,53 @@
 					if (!handled_dependencies[i]) handled_dependencies[i] = [];
 					handled_dependencies[i].push(id);
 				});
+
+			// share events
+			const FORM_INPUTS = [
+				"checkbox",
+				"dropdown",
+				"number",
+				"textbox",
+				"radio",
+				"slider"
+			];
+			outputs.forEach((output_id: number) => {
+				const output_component = instance_map[output_id];
+				if (
+					output_component.props.shareable &&
+					!shareable_components.includes(output_id) // only one share listener per component
+				) {
+					shareable_components.push(output_id);
+					output_component.instance.$on("share", (event_data) => {
+						const { description, title } = event_data.detail as ShareData;
+						let post_title = "";
+						if (title === true) {
+							post_title = inputs
+								.filter((input_id) =>
+									FORM_INPUTS.includes(instance_map[input_id].type)
+								)
+								.map((input_id) => instance_map[input_id].props.value)
+								.filter((v) => v != null)
+								.join(", ");
+						} else if (Array.isArray(title)) {
+							post_title = title
+								.map((val) => {
+									if (typeof val === "string") {
+										return val;
+									} else if (typeof val === "number") {
+										if (instance_map[val]) {
+											return instance_map[val].props.value;
+										} else {
+											return "";
+										}
+									}
+								})
+								.join("");
+						}
+						trigger_share(post_title, description);
+					});
+				}
+			});
 		});
 	}