Share button

CHANGELOG.md

@@ -6,6 +6,7 @@
 - Spaces Duplication built into Gradio, by [@aliabid94](https://github.com/aliabid94) in [PR 4458](https://github.com/gradio-app/gradio/pull/4458)
 - The `api_name` parameter now accepts `False` as a value, which means it does not show up in named or unnamed endpoints. By [@abidlabs](https://github.com/aliabid94) in [PR 4683](https://github.com/gradio-app/gradio/pull/4683)
 - Added support for `pathlib.Path` in `gr.Video`, `gr.Gallery`, and `gr.Chatbot` by [sunilkumardash9](https://github.com/sunilkumardash9) in [PR 4581](https://github.com/gradio-app/gradio/pull/4581).
+- The `gr.Video`, `gr.Audio`, `gr.Image`, `gr.Chatbot`, and `gr.Gallery` components now include a share icon when deployed on Spaces. This behavior can be modified by setting the `shareable` parameter in the component classes. by [@aliabid94](https://github.com/aliabid94) in [PR 4651](https://github.com/gradio-app/gradio/pull/4651)
 
 ## Bug Fixes:
 

gradio/components/audio.py

@@ -67,6 +67,7 @@ def __init__(
         elem_classes: list[str] | str | None = None,
         format: Literal["wav", "mp3"] = "wav",
         autoplay: bool = False,
+        shareable: bool | 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.
         """
         valid_sources = ["upload", "microphone"]
         if source not in valid_sources:
@@ -106,6 +108,9 @@ def __init__(
             )
         self.format = format
         self.autoplay = autoplay
+        self.shareable = (
+            (utils.get_space() is not None) if shareable is None else shareable
+        )
         IOComponent.__init__(
             self,
             label=label,
@@ -129,6 +134,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

@@ -51,6 +51,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 | None = None,
         **kwargs,
     ):
         """
@@ -67,6 +68,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.
         """
         if color_map is not None:
             warn_deprecation("The 'color_map' parameter has been deprecated.")
@@ -80,6 +82,9 @@ def __init__(
         if latex_delimiters is None:
             latex_delimiters = [{"left": "$$", "right": "$$", "display": True}]
         self.latex_delimiters = latex_delimiters
+        self.shareable = (
+            (utils.get_space() is not None) if shareable is None else shareable
+        )
 
         IOComponent.__init__(
             self,
@@ -102,6 +107,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

@@ -53,6 +53,7 @@ def __init__(
         object_fit: Literal["contain", "cover", "fill", "none", "scale-down"]
         | None = None,
         allow_preview: bool = True,
+        shareable: bool | None = None,
         **kwargs,
     ):
         """
@@ -73,6 +74,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.
         """
         self.grid_cols = columns
         self.grid_rows = rows
@@ -86,6 +88,9 @@ 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.get_space() is not None) if shareable is None else shareable
+        )
         IOComponent.__init__(
             self,
             label=label,
@@ -145,6 +150,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

@@ -80,6 +80,7 @@ def __init__(
         elem_classes: list[str] | str | None = None,
         mirror_webcam: bool = True,
         brush_radius: float | None = None,
+        shareable: bool | 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.
         """
         self.brush_radius = brush_radius
         self.mirror_webcam = mirror_webcam
@@ -139,7 +141,9 @@ 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.get_space() is not None) if shareable is None else shareable
+        )
         IOComponent.__init__(
             self,
             label=label,
@@ -170,6 +174,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

@@ -71,6 +71,7 @@ def __init__(
         mirror_webcam: bool = True,
         include_audio: bool | None = None,
         autoplay: bool = False,
+        shareable: bool | None = None,
         **kwargs,
     ):
         """
@@ -92,6 +93,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.
         """
         self.format = format
         self.autoplay = autoplay
@@ -107,6 +109,9 @@ def __init__(
         self.include_audio = (
             include_audio if include_audio is not None else source == "upload"
         )
+        self.shareable = (
+            (utils.get_space() is not None) if shareable is None else shareable
+        )
         IOComponent.__init__(
             self,
             label=label,
@@ -132,6 +137,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,
             },
         },

guides/01_getting-started/03_sharing-your-app.md

@@ -33,14 +33,19 @@ Share links expire after 72 hours.
 If you'd like to have a permanent link to your Gradio demo on the internet, use Hugging Face Spaces. [Hugging Face Spaces](http://huggingface.co/spaces/) provides the infrastructure to permanently host your machine learning model for free! 
 
 After you have [created a free Hugging Face account](https://huggingface.co/join), you have three methods to deploy your Gradio app to Hugging Face Spaces:
+
 1. From terminal: run `gradio deploy` in your app directory. The CLI will gather some basic metadata and then launch your app. To update your space, you can re-run this command or enable the Github Actions option to automatically update the Spaces on `git push`.
+
 2. From your browser: Drag and drop a folder containing your Gradio model and all related files [here](https://huggingface.co/new-space).
+
 3. Connect Spaces with your Git repository and Spaces will pull the Gradio app from there. See [this guide how to host on Hugging Face Spaces](https://huggingface.co/blog/gradio-spaces) for more information. 
 
 <video autoplay muted loop>
   <source src="/assets/guides/hf_demo.mp4" type="video/mp4" />
 </video>
 
+Note: Some components, like `gr.Image`, will display a "Share" button only on Spaces, so that users can share generated output easily. You can disable this via `gr.Image(shareable=False)`
+
 ## Embedding Hosted Spaces
 
 Once you have hosted your app on Hugging Face Spaces (or on your own server), you may want to embed the demo on a different website, such as your blog or your portfolio. Embedding an interactive demo allows people to try out the machine learning model that you have built, without needing to download or install anything — right in their browser! The best part is that you can embed interactive demos even in static websites, such as GitHub pages.

js/app/src/Blocks.svelte

@@ -24,6 +24,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";
@@ -369,6 +370,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);
@@ -391,6 +406,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) => [
@@ -411,6 +427,7 @@
 				handled_dependencies[i] = [-1];
 			}
 
+			// component events
 			target_instances
 				.filter((v) => !!v && !!v[1])
 				.forEach(([id, { instance }]: [number, ComponentMeta]) => {
@@ -422,6 +439,21 @@
 					if (!handled_dependencies[i]) handled_dependencies[i] = [];
 					handled_dependencies[i].push(id);
 				});
+
+			// share events
+			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 { title, description } = event_data.detail as ShareData;
+						trigger_share(title, description);
+					});
+				}
+			});
 		});
 	}
 

js/app/src/components/Audio/Audio.svelte

@@ -36,6 +36,7 @@
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;
 	export let autoplay = false;
+	export let shareable: boolean = false;
 
 	let _value: null | FileData;
 	$: _value = normalise_file(value, root, root_url);
@@ -97,9 +98,11 @@
 		<StaticAudio
 			{autoplay}
 			{show_label}
+			{shareable}
 			value={_value}
 			name={_value?.name || "audio_file"}
 			{label}
+			on:share
 		/>
 	{/if}
 </Block>

js/app/src/components/Chatbot/Chatbot.svelte

@@ -29,6 +29,7 @@
 	export let root_url: null | string;
 	export let selectable: boolean = false;
 	export let theme_mode: ThemeMode;
+	export let shareable: boolean = false;
 
 	const redirect_src_url = (src: string) =>
 		src.replace('src="/file', `src="${root}file`);
@@ -78,12 +79,14 @@
 		{/if}
 		<ChatBot
 			{selectable}
+			{shareable}
 			{theme_mode}
 			value={_value}
 			{latex_delimiters}
 			pending_message={loading_status?.status === "pending"}
 			on:change
 			on:select
+			on:share
 		/>
 	</div>
 </Block>

js/app/src/components/Gallery/Gallery.svelte

@@ -24,6 +24,7 @@
 	export let allow_preview: boolean = true;
 	export let object_fit: "contain" | "cover" | "fill" | "none" | "scale-down" =
 		"cover";
+	export let shareable: boolean = false;
 </script>
 
 <Block
@@ -40,6 +41,7 @@
 	<StatusTracker {...loading_status} />
 	<Gallery
 		on:select
+		on:share
 		{label}
 		{value}
 		{show_label}
@@ -51,5 +53,6 @@
 		{preview}
 		{object_fit}
 		{allow_preview}
+		{shareable}
 	/>
 </Block>