Merge branch 'main' into tab-space-height

.github/actions/install-frontend-deps/action.yml

@@ -41,6 +41,10 @@ runs:
       if: steps.frontend-cache.outputs.cache-hit != 'true' || inputs.always-install-pnpm == 'true'
       shell: bash
       run: pnpm i --frozen-lockfile
+    - name: Build Css
+      if: inputs.always-install-pnpm == 'true'
+      shell: bash
+      run: pnpm css
     - name: Build frontend
       if: inputs.skip_build == 'false' && steps.frontend-cache.outputs.cache-hit != 'true'
       shell: bash

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 `show_share_button` parameter in the component classes. by [@aliabid94](https://github.com/aliabid94) in [PR 4651](https://github.com/gradio-app/gradio/pull/4651)
 
 ## Bug Fixes:
 
@@ -145,6 +146,7 @@ def start_process(name):
 - Ensure code is correctly formatted and copy button is always present in Chatbot by [@pngwn](https://github.com/pngwn) in [PR 4527](https://github.com/gradio-app/gradio/pull/4527)
 - `show_label` will not automatically be set to `True` in `gr.BarPlot.update` by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 4531](https://github.com/gradio-app/gradio/pull/4531)
 - `gr.BarPlot` group text now respects darkmode by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 4531](https://github.com/gradio-app/gradio/pull/4531)
+- Fix dispatched errors from within components [@aliabid94](https://github.com/aliabid94) in [PR 4786](https://github.com/gradio-app/gradio/pull/4786)
 
 ## Other Changes:
 

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,
+        show_share_button: bool | None = None,
         **kwargs,
     ):
         """
@@ -87,6 +88,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.
             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.
             autoplay: Whether to automatically play the audio when the component is used as an output. Note: browsers will not autoplay audio files if the user has not interacted with the page yet.
+            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.
         """
         valid_sources = ["upload", "microphone"]
         if source not in valid_sources:
@@ -107,6 +109,11 @@ def __init__(
             )
         self.format = format
         self.autoplay = autoplay
+        self.show_share_button = (
+            (utils.get_space() is not None)
+            if show_share_button is None
+            else show_share_button
+        )
         IOComponent.__init__(
             self,
             label=label,
@@ -130,6 +137,7 @@ def get_config(self):
             "value": self.value,
             "streaming": self.streaming,
             "autoplay": self.autoplay,
+            "show_share_button": self.show_share_button,
             **IOComponent.get_config(self),
         }
 
@@ -151,6 +159,7 @@ def update(
         interactive: bool | None = None,
         visible: bool | None = None,
         autoplay: bool | None = None,
+        show_share_button: bool | None = None,
     ):
         return {
             "source": source,
@@ -163,6 +172,7 @@ def update(
             "visible": visible,
             "value": value,
             "autoplay": autoplay,
+            "show_share_button": show_share_button,
             "__type__": "update",
         }
 

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,
+        show_share_button: 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).
+            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.
         """
         if color_map is not None:
             warn_deprecation("The 'color_map' parameter has been deprecated.")
@@ -80,6 +82,11 @@ def __init__(
         if latex_delimiters is None:
             latex_delimiters = [{"left": "$$", "right": "$$", "display": True}]
         self.latex_delimiters = latex_delimiters
+        self.show_share_button = (
+            (utils.get_space() is not None)
+            if show_share_button is None
+            else show_share_button
+        )
 
         IOComponent.__init__(
             self,
@@ -102,6 +109,7 @@ def get_config(self):
             "latex_delimiters": self.latex_delimiters,
             "selectable": self.selectable,
             "height": self.height,
+            "show_share_button": self.show_share_button,
             **IOComponent.get_config(self),
         }
 
@@ -117,6 +125,7 @@ def update(
         min_width: int | None = None,
         visible: bool | None = None,
         height: int | None = None,
+        show_share_button: bool | None = None,
     ):
         updated_config = {
             "label": label,
@@ -127,6 +136,7 @@ def update(
             "visible": visible,
             "value": value,
             "height": height,
+            "show_share_button": show_share_button,
             "__type__": "update",
         }
         return updated_config

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,
+        show_share_button: 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.
+            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.grid_cols = columns
         self.grid_rows = rows
@@ -86,6 +88,11 @@ 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.show_share_button = (
+            (utils.get_space() is not None)
+            if show_share_button is None
+            else show_share_button
+        )
         IOComponent.__init__(
             self,
             label=label,
@@ -117,6 +124,7 @@ def update(
         object_fit: Literal["contain", "cover", "fill", "none", "scale-down"]
         | None = None,
         allow_preview: bool | None = None,
+        show_share_button: bool | None = None,
     ):
         updated_config = {
             "label": label,
@@ -132,6 +140,7 @@ def update(
             "preview": preview,
             "object_fit": object_fit,
             "allow_preview": allow_preview,
+            "show_share_button": show_share_button,
             "__type__": "update",
         }
         return updated_config
@@ -145,6 +154,7 @@ def get_config(self):
             "preview": self.preview,
             "object_fit": self.object_fit,
             "allow_preview": self.allow_preview,
+            "show_share_button": self.show_share_button,
             **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,
+        show_share_button: 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
+            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.mirror_webcam = mirror_webcam
@@ -139,7 +141,11 @@ 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.show_share_button = (
+            (utils.get_space() is not None)
+            if show_share_button is None
+            else show_share_button
+        )
         IOComponent.__init__(
             self,
             label=label,
@@ -170,6 +176,7 @@ def get_config(self):
             "mirror_webcam": self.mirror_webcam,
             "brush_radius": self.brush_radius,
             "selectable": self.selectable,
+            "show_share_button": self.show_share_button,
             **IOComponent.get_config(self),
         }
 
@@ -186,6 +193,7 @@ def update(
         interactive: bool | None = None,
         visible: bool | None = None,
         brush_radius: float | None = None,
+        show_share_button: bool | None = None,
     ):
         return {
             "height": height,
@@ -199,6 +207,7 @@ def update(
             "visible": visible,
             "value": value,
             "brush_radius": brush_radius,
+            "show_share_button": show_share_button,
             "__type__": "update",
         }
 

gradio/components/video.py

@@ -71,6 +71,7 @@ def __init__(
         mirror_webcam: bool = True,
         include_audio: bool | None = None,
         autoplay: bool = False,
+        show_share_button: bool | None = None,
         **kwargs,
     ):
         """
@@ -93,6 +94,7 @@ def __init__(
             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.
             autoplay: Whether to automatically play the video when the component is used as an output. Note: browsers will not autoplay video files if the user has not interacted with the page yet.
+            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.format = format
         self.autoplay = autoplay
@@ -108,6 +110,11 @@ def __init__(
         self.include_audio = (
             include_audio if include_audio is not None else source == "upload"
         )
+        self.show_share_button = (
+            (utils.get_space() is not None)
+            if show_share_button is None
+            else show_share_button
+        )
         IOComponent.__init__(
             self,
             label=label,
@@ -133,6 +140,7 @@ def get_config(self):
             "mirror_webcam": self.mirror_webcam,
             "include_audio": self.include_audio,
             "autoplay": self.autoplay,
+            "show_share_button": self.show_share_button,
             **IOComponent.get_config(self),
         }
 
@@ -153,6 +161,7 @@ def update(
         interactive: bool | None = None,
         visible: bool | None = None,
         autoplay: bool | None = None,
+        show_share_button: bool | None = None,
     ):
         return {
             "source": source,
@@ -167,6 +176,7 @@ def update(
             "visible": visible,
             "value": value,
             "autoplay": autoplay,
+            "show_share_button": show_share_button,
             "__type__": "update",
         }
 

gradio/test_data/blocks_configs.py

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

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

@@ -33,14 +33,21 @@ 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="https://github.com/gradio-app/gradio/blob/main/guides/assets/hf_demo.mp4?raw=true" type="video/mp4" />
 </video>
 
+Note: Some components, like `gr.Image`, will display a "Share" button only on Spaces, so that users can share the generated output to the Discussions page of the Space easily. You can disable this with `show_share_button`, such as `gr.Image(show_share_button=False)`. 
+
+![Image with show_share_button=True](/assets/share_icon.png)
+
 ## 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/_website/src/routes/+layout.svelte

@@ -2,6 +2,7 @@
 	declare global {
 		interface Window {
 			__gradio_mode__: "app" | "website";
+			__gradio_space__: string | null;
 		}
 	}
 	import type { media_query as MQ } from "../utils";