mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-04-06 12:30:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

Share button (#4651)

Browse Source 
* changes

* changes

* changes

* changes

* changes

* changes

* changes

* changes

* changes

* changes

* changes

* changes

* changes

* restore

* merge

* del image'

* update pnpm lock

* changes

* changes

* changes

* changes

* changes

* Update CHANGELOG.md

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* changes

* fix

* changes

* changes

* changes

* changes

* changes

* changes

* changes

* changes

* changes

* changes

* chagnes

* changes

* changes

* changes

* changes

---------

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
Co-authored-by: pngwn <hello@pngwn.io>
This commit is contained in:
aliabid94 2023-07-05 19:50:17 -05:00 committed by GitHub
parent f76348de02
commit b8eb481473
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
41 changed files with 504 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.github/actions/install-frontend-deps/action.yml vendored
View File

@ -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

2
CHANGELOG.md
View File

@ -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:
@ -144,6 +145,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:

10
gradio/components/audio.py
View File

@ -67,6 +67,7 @@ class Audio(
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 @@ class Audio(
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 @@ class Audio(
)
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 @@ class Audio(
"value": self.value,
"streaming": self.streaming,
"autoplay": self.autoplay,
"show_share_button": self.show_share_button,
**IOComponent.get_config(self),
}
@ -151,6 +159,7 @@ class Audio(
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 @@ class Audio(
"visible": visible,
"value": value,
"autoplay": autoplay,
"show_share_button": show_share_button,
"__type__": "update",
}

10
gradio/components/chatbot.py
View File

@ -51,6 +51,7 @@ class Chatbot(Changeable, Selectable, IOComponent, JSONSerializable):
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 @@ class Chatbot(Changeable, Selectable, IOComponent, JSONSerializable):
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 @@ class Chatbot(Changeable, Selectable, IOComponent, JSONSerializable):
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 @@ class Chatbot(Changeable, Selectable, IOComponent, JSONSerializable):
"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 @@ class Chatbot(Changeable, Selectable, IOComponent, JSONSerializable):
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 @@ class Chatbot(Changeable, Selectable, IOComponent, JSONSerializable):
"visible": visible,
"value": value,
"height": height,
"show_share_button": show_share_button,
"__type__": "update",
}
return updated_config

10
gradio/components/gallery.py
View File

@ -53,6 +53,7 @@ class Gallery(IOComponent, GallerySerializable, Selectable):
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 @@ class Gallery(IOComponent, GallerySerializable, Selectable):
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 @@ class Gallery(IOComponent, GallerySerializable, Selectable):
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 @@ class Gallery(IOComponent, GallerySerializable, Selectable):
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 @@ class Gallery(IOComponent, GallerySerializable, Selectable):
"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 @@ class Gallery(IOComponent, GallerySerializable, Selectable):
"preview": self.preview,
"object_fit": self.object_fit,
"allow_preview": self.allow_preview,
"show_share_button": self.show_share_button,
**IOComponent.get_config(self),
}

11
gradio/components/image.py
View File

@ -80,6 +80,7 @@ class Image(
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 @@ class Image(
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 @@ class Image(
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 @@ class Image(
"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 @@ class Image(
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 @@ class Image(
"visible": visible,
"value": value,
"brush_radius": brush_radius,
"show_share_button": show_share_button,
"__type__": "update",
}

10
gradio/components/video.py
View File

@ -71,6 +71,7 @@ class Video(
mirror_webcam: bool = True,
include_audio: bool | None = None,
autoplay: bool = False,
show_share_button: bool | None = None,
**kwargs,
):
"""
@ -93,6 +94,7 @@ class Video(
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 @@ class Video(
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 @@ class Video(
"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 @@ class Video(
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 @@ class Video(
"visible": visible,
"value": value,
"autoplay": autoplay,
"show_share_button": show_share_button,
"__type__": "update",
}

6
gradio/test_data/blocks_configs.py
View File

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

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

@ -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.

BIN
guides/assets/share_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 693 KiB

1
js/_website/src/routes/+layout.svelte
View File

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

45
js/app/src/Blocks.svelte
View File

@ -19,6 +19,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";
@ -363,6 +364,20 @@
}
};
const trigger_share = (title: string | undefined, description: string) => {
if (space_id === null) {
return;
}
const discussion_url = new URL(
`https://huggingface.co/spaces/${space_id}/discussions/new`
);
if (title !== undefined && 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);
@ -371,6 +386,8 @@
const is_external_url = (link: string | null) =>
link && new URL(link, location.href).origin !== location.origin;
let attached_error_listeners: number[] = [];
let shareable_components: number[] = [];
async function handle_mount() {
await tick();
@ -405,6 +422,7 @@
handled_dependencies[i] = [-1];
}
// component events
target_instances
.filter((v) => !!v && !!v[1])
.forEach(([id, { instance }]: [number, ComponentMeta]) => {
@ -417,6 +435,33 @@
handled_dependencies[i].push(id);
});
});
// share events
components.forEach((c) => {
if (
c.props.show_share_button &&
!shareable_components.includes(c.id) // only one share listener per component
) {
shareable_components.push(c.id);
c.instance.$on("share", (event_data) => {
const { title, description } = event_data.detail as ShareData;
trigger_share(title, description);
});
}
});
components.forEach((c) => {
if (!attached_error_listeners.includes(c.id)) {
if (c.instance) {
attached_error_listeners.push(c.id);
c.instance.$on("error", (event_data: any) => {
messages = [
new_message(event_data.detail, -1, "error"),
...messages
];
});
}
}
});
}
function handle_destroy(id: number) {

1
js/app/src/Index.svelte
View File

@ -203,6 +203,7 @@
normalise_files: false
});
config = app.config;
window.__gradio_space__ = config.space_id;
status = {
message: "",

6
js/app/src/components/Audio/Audio.svelte
View File

@ -36,6 +36,7 @@
export let min_width: number | undefined = undefined;
export let loading_status: LoadingStatus;
export let autoplay = false;
export let show_share_button: boolean = false;
let _value: null | FileData;
$: _value = normalise_file(value, root, root_url);
@ -88,7 +89,7 @@
on:error={({ detail }) => {
loading_status = loading_status || {};
loading_status.status = "error";
loading_status.message = detail;
dispatch("error", detail);
}}
>
<UploadText type="audio" />
@ -97,9 +98,12 @@
<StaticAudio
{autoplay}
{show_label}
{show_share_button}
value={_value}
name={_value?.name || "audio_file"}
{label}
on:share
on:error
/>
{/if}
</Block>

4
js/app/src/components/Chatbot/Chatbot.svelte
View File

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

8
js/app/src/components/Gallery/Gallery.svelte
View File

@ -13,7 +13,8 @@
export let elem_id: string = "";
export let elem_classes: Array<string> = [];
export let visible: boolean = true;
export let value: Array<string> | Array<FileData> | null = null;
export let value: (FileData | string | [FileData | string, string])[] | null =
null;
export let container: boolean = false;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
@ -24,6 +25,7 @@
export let allow_preview: boolean = true;
export let object_fit: "contain" | "cover" | "fill" | "none" | "scale-down" =
"cover";
export let show_share_button: boolean = false;
</script>
<Block
@ -35,11 +37,14 @@
{container}
{scale}
{min_width}
allow_overflow={false}
height={typeof height === "number" ? height : undefined}
>
<StatusTracker {...loading_status} />
<Gallery
on:select
on:share
on:error
{label}
{value}
{show_label}
@ -51,5 +56,6 @@
{preview}
{object_fit}
{allow_preview}
{show_share_button}
/>
</Block>

16
js/app/src/components/Image/Image.svelte
View File

@ -28,9 +28,11 @@
export let min_width: number | undefined = undefined;
export let loading_status: LoadingStatus;
export let mode: "static" | "dynamic";
export let show_share_button: boolean = false;
const dispatch = createEventDispatcher<{
change: undefined;
error: string;
}>();
$: value, dispatch("change");
@ -59,7 +61,16 @@
>
<StatusTracker {...loading_status} />
{#if mode === "static"}
<StaticImage on:select {value} {label} {show_label} {selectable} />
<StaticImage
on:select
on:share
on:error
{value}
{label}
{show_label}
{selectable}
{show_share_button}
/>
{:else}
<Image
{brush_radius}
@ -75,10 +86,11 @@
on:drag={({ detail }) => (dragging = detail)}
on:upload
on:select
on:share
on:error={({ detail }) => {
loading_status = loading_status || {};
loading_status.status = "error";
loading_status.message = detail;
dispatch("error", detail);
}}
{label}
{show_label}

7
js/app/src/components/StatusTracker/StatusTracker.svelte
View File

@ -183,7 +183,7 @@
</script>
<div
class="wrap {variant}"
class="wrap {variant} {show_progress}"
class:hide={!status || status === "complete" || show_progress === "hidden"}
class:translucent={(variant === "center" &&
(status === "pending" || status === "error")) ||
@ -204,6 +204,7 @@
<div
class:meta-text-center={variant === "center"}
class:meta-text={variant === "default"}
class="progress-text"
>
{#if progress}
{#each progress as p}
@ -408,4 +409,8 @@
line-height: var(--line-lg);
font-family: var(--font);
}
.minimal .progress-text {
background: var(--block-background-fill);
}
</style>

2
js/app/src/components/StatusTracker/ToastContent.svelte
View File

@ -52,7 +52,7 @@
class="toast-close {type}"
type="button"
aria-label="Close"
data-testid="toast-close"
data-testid="toast-close"
>
<span aria-hidden="true">&#215;</span>
</button>

4
js/app/src/components/Video/Video.svelte
View File

@ -31,6 +31,7 @@
export let min_width: number | undefined = undefined;
export let mode: "static" | "dynamic";
export let autoplay = false;
export let show_share_button: boolean = true;
let _video: FileData | null = null;
let _subtitle: FileData | null = null;
@ -94,9 +95,12 @@
{label}
{show_label}
{autoplay}
{show_share_button}
on:play
on:pause
on:stop
on:share
on:error
/>
{:else}
<Video

3
js/atoms/package.json
View File

@ -8,6 +8,7 @@
"license": "ISC",
"private": true,
"dependencies": {
"@gradio/utils": "workspace:^0.0.1"
"@gradio/utils": "workspace:^0.0.1",
"@gradio/icons": "workspace:^0.0.1"
}
}

36
js/atoms/src/IconButton.svelte
View File

@ -1,9 +1,12 @@
<script lang="ts">
export let Icon: any;
export let label = "";
export let show_label: boolean = false;
export let pending: boolean = false;
</script>
<button on:click aria-label={label}>
<button on:click aria-label={label} title={label} class:pending>
{#if show_label}<span>{label}</span>{/if}
<div><Icon /></div>
</button>
@ -12,24 +15,47 @@
display: flex;
justify-content: center;
align-items: center;
gap: 1px;
z-index: var(--layer-1);
box-shadow: var(--shadow-drop);
border: 1px solid var(--button-secondary-border-color);
border-radius: var(--radius-sm);
background: var(--background-fill-primary);
width: var(--size-5);
height: var(--size-5);
padding: 2px;
color: var(--block-label-text-color);
}
button:hover {
cursor: pointer;
border: 2px solid var(--button-secondary-border-color-hover);
padding: 1px;
color: var(--block-label-text-color);
}
span {
padding: 0px 1px;
font-size: 10px;
}
div {
width: 60%;
height: 60%;
padding: 2px;
width: 14px;
height: 14px;
}
.pending {
animation: flash 0.5s infinite;
}
@keyframes flash {
0% {
opacity: 0.5;
}
50% {
opacity: 1;
}
100% {
opacity: 0.5;
}
}
</style>

37
js/atoms/src/ShareButton.svelte Normal file
View File

@ -0,0 +1,37 @@
<script lang="ts">
import IconButton from "./IconButton.svelte";
import { Community } from "@gradio/icons";
import { createEventDispatcher } from "svelte";
import type { ShareData } from "@gradio/utils";
import { ShareError } from "@gradio/utils";
``;
const dispatch = createEventDispatcher<{
share: ShareData;
error: string;
}>();
export let formatter: (arg0: any) => Promise<string>;
export let value: any;
let pending: boolean = false;
</script>
<IconButton
Icon={Community}
label="Share"
{pending}
on:click={async () => {
try {
pending = true;
const formatted = await formatter(value);
dispatch("share", {
description: formatted
});
} catch (e) {
console.error(e);
let message = e instanceof ShareError ? e.message : "Share failed.";
dispatch("error", message);
} finally {
pending = false;
}
}}
/>

1
js/atoms/src/index.ts
View File

@ -4,5 +4,6 @@ export { default as BlockLabel } from "./BlockLabel.svelte";
export { default as IconButton } from "./IconButton.svelte";
export { default as Empty } from "./Empty.svelte";
export { default as Info } from "./Info.svelte";
export { default as ShareButton } from "./ShareButton.svelte";
export const BLOCK_KEY = {};

1
js/audio/package.json
View File

@ -11,6 +11,7 @@
"@gradio/atoms": "workspace:^0.0.1",
"@gradio/button": "workspace:^0.0.1",
"@gradio/icons": "workspace:^0.0.1",
"@gradio/utils": "workspace:^0.0.1",
"@gradio/upload": "workspace:^0.0.1",
"extendable-media-recorder": "^7.0.2",
"extendable-media-recorder-wav-encoder": "^7.0.76",

24
js/audio/src/StaticAudio.svelte
View File

@ -9,7 +9,8 @@
<script lang="ts">
import { createEventDispatcher, tick } from "svelte";
import { BlockLabel } from "@gradio/atoms";
import { uploadToHuggingFace } from "@gradio/utils";
import { BlockLabel, ShareButton } from "@gradio/atoms";
import { Music } from "@gradio/icons";
import { loaded } from "./utils";
@ -19,6 +20,7 @@
export let name: string;
export let show_label = true;
export let autoplay: boolean;
export let show_share_button: boolean = false;
const dispatch = createEventDispatcher<{
change: AudioData;
@ -41,6 +43,21 @@
</script>
<BlockLabel {show_label} Icon={Music} float={false} label={label || "Audio"} />
{#if show_share_button && value !== null}
<div class="icon-button">
<ShareButton
on:error
on:share
formatter={async (value) => {
if (!value) return "";
let url = await uploadToHuggingFace(value.data, "url");
return `<audio controls src="${url}"></audio>`;
}}
{value}
/>
</div>
{/if}
{#if value === null}
<Empty size="small">
<Music />
@ -64,4 +81,9 @@
width: var(--size-full);
height: var(--size-14);
}
.icon-button {
position: absolute;
top: 6px;
right: 6px;
}
</style>

1
js/chatbot/package.json
View File

@ -8,6 +8,7 @@
"license": "ISC",
"private": true,
"dependencies": {
"@gradio/atoms": "workspace:^0.0.1",
"@gradio/icons": "workspace:^0.0.1",
"@gradio/theme": "workspace:^0.0.1",
"@gradio/upload": "workspace:^0.0.1",

20
js/chatbot/src/ChatBot.svelte
View File

@ -1,7 +1,8 @@
<script lang="ts">
import { copy } from "./utils";
import { copy, format_chat_for_sharing } from "./utils";
import "katex/dist/katex.min.css";
import { beforeUpdate, afterUpdate, createEventDispatcher } from "svelte";
import { ShareButton } from "@gradio/atoms";
import type { SelectData } from "@gradio/utils";
import type { ThemeMode } from "js/app/src/components/types";
import type { FileData } from "@gradio/upload";
@ -26,6 +27,7 @@
export let pending_message: boolean = false;
export let feedback: Array<string> | null = null;
export let selectable: boolean = false;
export let show_share_button: boolean = false;
export let theme_mode: ThemeMode;
$: if (theme_mode == "dark") {
@ -82,6 +84,16 @@
}
</script>
{#if show_share_button && value !== null && value.length > 0}
<div class="icon-button">
<ShareButton
on:error
on:share
formatter={format_chat_for_sharing}
{value}
/>
</div>
{/if}
<div class="wrap" bind:this={div}>
<div class="message-wrap" use:copy>
{#if value !== null}
@ -378,4 +390,10 @@
.message-wrap :global(pre) {
position: relative;
}
.icon-button {
position: absolute;
top: 6px;
right: 6px;
}
</style>

38
js/chatbot/src/utils.ts
View File

@ -3,6 +3,8 @@ import { markedHighlight } from "marked-highlight";
import Prism from "prismjs";
import "prismjs/components/prism-python";
import "prismjs/components/prism-latex";
import type { FileData } from "@gradio/upload";
import { uploadToHuggingFace } from "@gradio/utils";
const copy_icon = `<svg
xmlns="http://www.w3.org/2000/svg"
@ -186,3 +188,39 @@ async function copy_to_clipboard(value: string) {
}
export { marked };
export const format_chat_for_sharing = async (
chat: Array<[string | FileData | null, string | FileData | null]>
) => {
let messages = await Promise.all(
chat.map(async (message_pair) => {
return await Promise.all(
message_pair.map(async (message, i) => {
if (message === null) return "";
let speaker_emoji = i === 0 ? "😃" : "🤖";
let html_content = "";
if (typeof message === "string") {
html_content = message;
} else {
const file_url = await uploadToHuggingFace(message.data, "url");
if (message.mime_type?.includes("audio")) {
html_content = `<audio controls src="${file_url}"></audio>`;
} else if (message.mime_type?.includes("video")) {
html_content = file_url;
} else if (message.mime_type?.includes("image")) {
html_content = `<img src="${file_url}" />`;
}
}
return `${speaker_emoji}: ${html_content}`;
})
);
})
);
return messages
.map((message_pair) =>
message_pair.join(
message_pair[0] !== "" && message_pair[1] !== "" ? "\n" : ""
)
)
.join("\n");
};

38
js/gallery/src/Gallery.svelte
View File

@ -1,20 +1,23 @@
<script lang="ts">
import { BlockLabel, Empty } from "@gradio/atoms";
import { BlockLabel, Empty, ShareButton } from "@gradio/atoms";
import { ModifyUpload } from "@gradio/upload";
import type { SelectData } from "@gradio/utils";
import { createEventDispatcher } from "svelte";
import { tick } from "svelte";
import { Image } from "@gradio/icons";
import type { FileData } from "@gradio/upload";
import { normalise_file } from "@gradio/upload";
import { format_gallery_for_sharing } from "./utils";
export let container = true;
export let show_label = true;
export let label: string;
export let root = "";
export let root_url: null | string = null;
export let value: string[] | FileData[] | null = null;
export let value: (FileData | string | [FileData | string, string])[] | null =
null;
export let grid_cols: number | number[] | undefined = [2];
export let grid_rows: number | number[] | undefined = undefined;
export let height: number | "auto" = "auto";
@ -22,6 +25,7 @@
export let allow_preview = true;
export let object_fit: "contain" | "cover" | "fill" | "none" | "scale-down" =
"cover";
export let show_share_button: boolean = false;
const dispatch = createEventDispatcher<{
select: SelectData;
@ -32,16 +36,18 @@
$: was_reset = value == null || value.length == 0 ? true : was_reset;
let _value: [FileData, string | null][] | null = null;
$: _value =
value === null
? null
: value.map((img) =>
Array.isArray(img)
? [normalise_file(img[0], root, root_url), img[1]]
: [normalise_file(img, root, root_url), null]
? [normalise_file(img[0], root, root_url) as FileData, img[1]]
: [normalise_file(img, root, root_url) as FileData, null]
);
let prevValue: string[] | FileData[] | null = value;
let prevValue: (FileData | string | [FileData | string, string])[] | null =
value;
let selected_image = preview && value?.length ? 0 : null;
let old_selected_image: number | null = selected_image;
@ -177,9 +183,12 @@
<Empty unpadded_box={true} size="large"><Image /></Empty>
{:else}
{#if selected_image !== null && allow_preview}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div on:keydown={on_keydown} class="preview">
<ModifyUpload on:clear={() => (selected_image = null)} />
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<img
data-testid="detailed-image"
on:click={() => (selected_image = next)}
@ -229,6 +238,16 @@
style="{grid_cols_style} {grid_rows_style} --object-fit: {object_fit}; height: {height}"
class:pt-6={show_label}
>
{#if show_share_button}
<div class="icon-button">
<ShareButton
on:share
on:error
value={_value}
formatter={format_gallery_for_sharing}
/>
</div>
{/if}
{#each _value as [image, caption], i}
<button
class="thumbnail-item thumbnail-lg"
@ -350,6 +369,7 @@
}
.grid-wrap {
position: relative;
padding: var(--size-2);
height: var(--size-full);
overflow-y: auto;
@ -357,6 +377,7 @@
.grid-container {
display: grid;
position: relative;
grid-template-rows: var(--grid-rows);
grid-template-columns: var(--grid-cols);
gap: var(--spacing-lg);
@ -415,4 +436,11 @@
text-overflow: ellipsis;
white-space: nowrap;
}
.icon-button {
position: absolute;
top: 0px;
right: 0px;
z-index: var(--layer-1);
}
</style>

22
js/gallery/src/utils.ts
View File

@ -1,6 +1,18 @@
export const playable = (): boolean => {
// let video_element = document.createElement("video");
// let mime_type = mime.lookup(filename);
// return video_element.canPlayType(mime_type) != "";
return true; // FIX BEFORE COMMIT - mime import causing issues
import { uploadToHuggingFace } from "@gradio/utils";
import type { FileData } from "@gradio/upload";
export const format_gallery_for_sharing = async (
value: [FileData, string | null][] | null
) => {
if (!value) return "";
let urls = await Promise.all(
value.map(async ([image, _]) => {
if (image === null) return "";
return await uploadToHuggingFace(image.data, "url");
})
);
return `<div style="display: flex; flex-wrap: wrap; gap: 16px">${urls
.map((url) => `<img src="${url}" style="height: 400px" />`)
.join("")}</div>`;
};

6
js/icons/src/Community.svelte Normal file
View File

@ -0,0 +1,6 @@
<svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"
><path
d="M23,20a5,5,0,0,0-3.89,1.89L11.8,17.32a4.46,4.46,0,0,0,0-2.64l7.31-4.57A5,5,0,1,0,18,7a4.79,4.79,0,0,0,.2,1.32l-7.31,4.57a5,5,0,1,0,0,6.22l7.31,4.57A4.79,4.79,0,0,0,18,25a5,5,0,1,0,5-5ZM23,4a3,3,0,1,1-3,3A3,3,0,0,1,23,4ZM7,19a3,3,0,1,1,3-3A3,3,0,0,1,7,19Zm16,9a3,3,0,1,1,3-3A3,3,0,0,1,23,28Z"
fill="currentColor"
/></svg
>
Side by Side

After

Width:  |  Height:  |  Size: 408 B

1
js/icons/src/index.ts
View File

@ -8,6 +8,7 @@ export { default as Circle } from "./Circle.svelte";
export { default as Clear } from "./Clear.svelte";
export { default as Code } from "./Code.svelte";
export { default as Color } from "./Color.svelte";
export { default as Community } from "./Community.svelte";
export { default as Copy } from "./Copy.svelte";
export { default as Download } from "./Download.svelte";
export { default as DropdownArrow } from "./DropdownArrow.svelte";

24
js/image/src/StaticImage.svelte
View File

@ -1,8 +1,9 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import type { SelectData } from "@gradio/utils";
import { BlockLabel, Empty, IconButton } from "@gradio/atoms";
import { Download } from "@gradio/icons";
import { uploadToHuggingFace } from "@gradio/utils";
import { BlockLabel, Empty, IconButton, ShareButton } from "@gradio/atoms";
import { Download, Community } from "@gradio/icons";
import { get_coordinates_of_clicked_image } from "./utils";
import { Image } from "@gradio/icons";
@ -11,6 +12,7 @@
export let label: string | undefined = undefined;
export let show_label: boolean;
export let selectable: boolean = false;
export let show_share_button: boolean = false;
const dispatch = createEventDispatcher<{
change: string;
@ -31,7 +33,7 @@
{#if value === null}
<Empty unpadded_box={true} size="large"><Image /></Empty>
{:else}
<div class="download">
<div class="icon-buttons">
<a
href={value}
target={window.__is_colab__ ? "_blank" : null}
@ -39,6 +41,18 @@
>
<IconButton Icon={Download} label="Download" />
</a>
{#if show_share_button}
<ShareButton
on:share
on:error
formatter={async (value) => {
if (!value) return "";
let url = await uploadToHuggingFace(value, "base64");
return `<img src="${url}" />`;
}}
{value}
/>
{/if}
</div>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<img src={value} alt="" class:selectable on:click={handle_click} />
@ -55,9 +69,11 @@
cursor: crosshair;
}
.download {
.icon-buttons {
display: flex;
position: absolute;
top: 6px;
right: 6px;
gap: var(--size-1);
}
</style>

73
js/utils/src/utils.ts
View File

@ -3,3 +3,76 @@ export interface SelectData {
value: any;
selected?: boolean;
}
export interface ShareData {
description: string;
title?: string;
}
export class ShareError extends Error {
constructor(message: string) {
super(message);
this.name = "ShareError";
}
}
export const uploadToHuggingFace = async (
data: string,
type: "base64" | "url"
) => {
if (window.__gradio_space__ == null) {
throw new ShareError("Must be on Spaces to share.");
}
let blob: Blob;
let contentType: string;
let filename: string;
if (type === "url") {
const response = await fetch(data);
blob = await response.blob();
contentType = response.headers.get("content-type") || "";
filename = response.headers.get("content-disposition") || "";
} else {
blob = dataURLtoBlob(data);
contentType = data.split(";")[0].split(":")[1];
filename = "file" + contentType.split("/")[1];
}
const file = new File([blob], filename, { type: contentType });
// Send file to endpoint
const uploadResponse = await fetch("https://huggingface.co/uploads", {
method: "POST",
body: file,
headers: {
"Content-Type": file.type,
"X-Requested-With": "XMLHttpRequest"
}
});
// Check status of response
if (!uploadResponse.ok) {
if (
uploadResponse.headers.get("content-type")?.includes("application/json")
) {
const error = await uploadResponse.json();
throw new ShareError(`Upload failed: ${error.error}`);
}
throw new ShareError(`Upload failed.`);
}
// Return response if needed
const result = await uploadResponse.text();
return result;
};
function dataURLtoBlob(dataurl: string) {
var arr = dataurl.split(","),
mime = (arr[0].match(/:(.*?);/) as RegExpMatchArray)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}

1
js/video/package.json
View File

@ -9,6 +9,7 @@
"private": true,
"dependencies": {
"@gradio/atoms": "workspace:^0.0.1",
"@gradio/utils": "workspace:^0.0.1",
"@gradio/icons": "workspace:^0.0.1",
"@gradio/image": "workspace:^0.0.1",
"@gradio/upload": "workspace:^0.0.1"

23
js/video/src/StaticVideo.svelte
View File

@ -1,8 +1,10 @@
<script lang="ts">
import { createEventDispatcher, afterUpdate, tick } from "svelte";
import { BlockLabel, Empty, IconButton } from "@gradio/atoms";
import { BlockLabel, Empty, IconButton, ShareButton } from "@gradio/atoms";
import type { FileData } from "@gradio/upload";
import { Video, Download } from "@gradio/icons";
import type { ShareData } from "@gradio/utils";
import { uploadToHuggingFace } from "@gradio/utils";
import Player from "./Player.svelte";
@ -11,6 +13,7 @@
export let label: string | undefined = undefined;
export let show_label = true;
export let autoplay: boolean;
export let show_share_button: boolean = true;
let old_value: FileData | null = null;
let old_subtitle: FileData | null = null;
@ -59,7 +62,7 @@
{label}
/>
{/key}
<div class="download" data-testid="download-div">
<div class="icon-buttons" data-testid="download-div">
<a
href={value.data}
target={window.__is_colab__ ? "_blank" : null}
@ -67,13 +70,27 @@
>
<IconButton Icon={Download} label="Download" />
</a>
{#if show_share_button}
<ShareButton
on:error
on:share
{value}
formatter={async (value) => {
if (!value) return "";
let url = await uploadToHuggingFace(value.data, "url");
return url;
}}
/>
{/if}
</div>
{/if}
<style>
.download {
.icon-buttons {
display: flex;
position: absolute;
top: 6px;
right: 6px;
gap: var(--size-1);
}
</style>

16
pnpm-lock.yaml generated
View File

@ -1,4 +1,4 @@
lockfileVersion: '6.0'
lockfileVersion: '6.1'
settings:
autoInstallPeers: true
@ -428,6 +428,9 @@ importers:
js/atoms:
dependencies:
'@gradio/icons':
specifier: workspace:^0.0.1
version: link:../icons
'@gradio/utils':
specifier: workspace:^0.0.1
version: link:../utils
@ -446,6 +449,9 @@ importers:
'@gradio/upload':
specifier: workspace:^0.0.1
version: link:../upload
'@gradio/utils':
specifier: workspace:^0.0.1
version: link:../utils
extendable-media-recorder:
specifier: ^7.0.2
version: 7.0.2
@ -498,6 +504,9 @@ importers:
js/chatbot:
dependencies:
'@gradio/atoms':
specifier: workspace:^0.0.1
version: link:../atoms
'@gradio/icons':
specifier: workspace:^0.0.1
version: link:../icons
@ -833,6 +842,9 @@ importers:
'@gradio/upload':
specifier: workspace:^0.0.1
version: link:../upload
'@gradio/utils':
specifier: workspace:^0.0.1
version: link:../utils
js/wasm:
dependencies:
@ -5754,7 +5766,7 @@ packages:
peerDependencies:
'@sveltejs/kit': ^1.0.0
dependencies:
'@sveltejs/kit': 1.16.3(svelte@3.57.0)(vite@4.3.5)
'@sveltejs/kit': 1.16.3(svelte@3.59.2)(vite@4.3.9)
import-meta-resolve: 3.0.0
dev: true

4
test-strategy.md
View File

@ -2,7 +2,7 @@
Very brief, mildly aspirational test strategy document. This isn't where we are but it is where we want to get to.
This document does not detail how to setup an environment or how to run the tests locally nor does it contain any best practices that we try to follow when writing tests, that information exists in the [contributing guide]( https://github.com/gradio-app/gradio/blob/main/CONTRIBUTING.md).
This document does not detail how to setup an environment or how to run the tests locally nor does it contain any best practices that we try to follow when writing tests, that information exists in the [contributing guide](https://github.com/gradio-app/gradio/blob/main/CONTRIBUTING.md).
## Objectives
@ -101,7 +101,7 @@ Tests need to be executed in a number of environments and at different stages on
- **Locally**: it is important that developers can easily run most tests locally to ensure a passing suite before making a PR. There are some exceptions to this, certain tests may require access to secret values which we cannot make available to all possible contributors for practical security reasons. It is reasonable that it isn't possible to run these tests but they should be disabled by default when running locally.
- **CI** - It is _critical_ that all tests run successfully in CI with no exceptions. Not every tests is required to pass to satisfy CI checks for practical reasons but it is required that all tests should run in CI and notify us if something unexpected happens in order for the development team to take appropriate action.
For instructions on how to write and run tests see the [contributing guide]( https://github.com/gradio-app/gradio/blob/main/CONTRIBUTING.md).
For instructions on how to write and run tests see the [contributing guide](https://github.com/gradio-app/gradio/blob/main/CONTRIBUTING.md).
## Managing defects

2
test/test_blocks.py
View File

@ -1173,6 +1173,7 @@ class TestSpecificUpdate:
"min_width": None,
"scale": None,
"width": None,
"show_share_button": None,
}
)
assert specific_update == {
@ -1188,6 +1189,7 @@ class TestSpecificUpdate:
"min_width": None,
"scale": None,
"width": None,
"show_share_button": None,
"__type__": "update",
}

5
test/test_components.py
View File

@ -662,6 +662,7 @@ class TestImage:
"source": "upload",
"tool": "editor",
"name": "image",
"show_share_button": False,
"streaming": False,
"show_label": True,
"label": "Upload Your Image",
@ -833,6 +834,7 @@ class TestAudio:
"autoplay": False,
"source": "upload",
"name": "audio",
"show_share_button": False,
"streaming": False,
"show_label": True,
"label": "Upload Your Audio",
@ -870,6 +872,7 @@ class TestAudio:
assert audio_output.get_config() == {
"autoplay": False,
"name": "audio",
"show_share_button": False,
"streaming": False,
"show_label": True,
"label": None,
@ -1322,6 +1325,7 @@ class TestVideo:
"autoplay": False,
"source": "upload",
"name": "video",
"show_share_button": False,
"show_label": True,
"label": "Upload Your Video",
"container": True,
@ -1960,6 +1964,7 @@ class TestChatbot:
"show_label": True,
"interactive": None,
"name": "chatbot",
"show_share_button": False,
"visible": True,
"elem_id": None,
"elem_classes": None,