From 5e0016267f1d683e2daab82ee4a33d2f09513a34 Mon Sep 17 00:00:00 2001 From: "Yuichiro Tachibana (Tsuchiya)" Date: Tue, 9 Jan 2024 11:34:46 +0900 Subject: [PATCH] Make Wasm-compatible (#6967) * Use @gradio/image/shared/Image.svelte in the Gallery component for Wasm support * Make the download button on the Gallery component Wasm-compatible * add changeset --------- Co-authored-by: gradio-pr-bot --- .changeset/kind-flowers-punch.md | 8 ++++++++ js/app/src/Index.svelte | 2 ++ js/app/src/lite/index.ts | 3 ++- js/gallery/package.json | 1 + js/gallery/shared/Gallery.svelte | 26 ++++++++++++++------------ js/image/package.json | 1 + pnpm-lock.yaml | 3 +++ 7 files changed, 31 insertions(+), 13 deletions(-) create mode 100644 .changeset/kind-flowers-punch.md diff --git a/.changeset/kind-flowers-punch.md b/.changeset/kind-flowers-punch.md new file mode 100644 index 0000000000..f05015299c --- /dev/null +++ b/.changeset/kind-flowers-punch.md @@ -0,0 +1,8 @@ +--- +"@gradio/app": patch +"@gradio/gallery": patch +"@gradio/image": patch +"gradio": patch +--- + +fix:Make Wasm-compatible diff --git a/js/app/src/Index.svelte b/js/app/src/Index.svelte index 1f10f7c249..e1456a1bac 100644 --- a/js/app/src/Index.svelte +++ b/js/app/src/Index.svelte @@ -97,6 +97,8 @@ loading_text = (event as CustomEvent).detail + "..."; }); } + export let fetch_implementation: typeof fetch = fetch; + setContext("fetch_implementation", fetch_implementation); export let space: string | null; export let host: string | null; diff --git a/js/app/src/lite/index.ts b/js/app/src/lite/index.ts index 163123c4fe..c2e317be37 100644 --- a/js/app/src/lite/index.ts +++ b/js/app/src/lite/index.ts @@ -160,7 +160,8 @@ export function create(options: Options): GradioAppController { worker_proxy, client, upload_files, - mount_css: overridden_mount_css + mount_css: overridden_mount_css, + fetch_implementation: overridden_fetch } }); } diff --git a/js/gallery/package.json b/js/gallery/package.json index 9a085e9ffc..2ca6a89369 100644 --- a/js/gallery/package.json +++ b/js/gallery/package.json @@ -14,6 +14,7 @@ "@gradio/statustracker": "workspace:^", "@gradio/upload": "workspace:^", "@gradio/utils": "workspace:^", + "@gradio/wasm": "workspace:^", "dequal": "^2.0.2" }, "main": "./Index.svelte", diff --git a/js/gallery/shared/Gallery.svelte b/js/gallery/shared/Gallery.svelte index 5312604574..3899018553 100644 --- a/js/gallery/shared/Gallery.svelte +++ b/js/gallery/shared/Gallery.svelte @@ -2,11 +2,12 @@ import { BlockLabel, Empty, ShareButton } from "@gradio/atoms"; import { ModifyUpload } from "@gradio/upload"; import type { SelectData } from "@gradio/utils"; + import { Image } from "@gradio/image/shared"; import { dequal } from "dequal"; - import { createEventDispatcher } from "svelte"; + import { createEventDispatcher, getContext } from "svelte"; import { tick } from "svelte"; - import { Download, Image } from "@gradio/icons"; + import { Download, Image as ImageIcon } from "@gradio/icons"; import { normalise_file, type FileData } from "@gradio/client"; import { format_gallery_for_sharing } from "./utils"; import { IconButton } from "@gradio/atoms"; @@ -166,10 +167,11 @@ // and their remote URLs are directly passed to the client as `value[].image.url`. // The `download` attribute of the tag doesn't work for remote URLs (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download), // so we need to download the image via JS as below. + const fetch_implementation = getContext("fetch_implementation"); async function download(file_url: string, name: string): Promise { let response; try { - response = await fetch(file_url); + response = await fetch_implementation(file_url); } catch (error) { if (error instanceof TypeError) { // If CORS is not allowed (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#checking_that_the_fetch_was_successful), @@ -199,10 +201,10 @@ {#if show_label} - + {/if} {#if value == null || resolved_value == null || resolved_value.length === 0} - + {:else} {#if selected_image && allow_preview} @@ -265,7 +267,7 @@ class:selected={selected_index === i} aria-label={"Thumbnail " + (i + 1) + " of " + resolved_value.length} > - (selected_index = i)} aria-label={"Thumbnail " + (i + 1) + " of " + resolved_value.length} > - {entry.caption img { + .thumbnail-lg > :global(img) { width: var(--size-full); height: var(--size-full); overflow: hidden; diff --git a/js/image/package.json b/js/image/package.json index 0d7ad5fe0c..476ada3738 100644 --- a/js/image/package.json +++ b/js/image/package.json @@ -22,6 +22,7 @@ "main": "./Index.svelte", "exports": { ".": "./Index.svelte", + "./shared": "./shared/index.ts", "./example": "./Example.svelte", "./shared": "./shared/index.ts", "./package.json": "./package.json" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 51b6648c28..88bba55f8a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -944,6 +944,9 @@ importers: '@gradio/utils': specifier: workspace:^ version: link:../utils + '@gradio/wasm': + specifier: workspace:^ + version: link:../wasm dequal: specifier: ^2.0.2 version: 2.0.2