Refactors get_fetchable_url_or_file() to remove it from the frontend (

#7528) * fetch * add changeset * add changeset * simplify * add changeset * changes * format * add changeset * changes * format * fixes * lint * fix components * fixes * typing * format frontend * path * fixes * fix stories * lint * lint --------- Co-authored-by: gradio-pr-bot <[email protected]>
gradio-app · Feb 26, 2024 · eda33b3 · eda33b3
1 parent 8c9c98a
commit eda33b3
Show file tree

Hide file tree

Showing 32 changed files with 106 additions and 162 deletions.
diff --git a/.changeset/thin-beers-worry.md b/.changeset/thin-beers-worry.md
@@ -0,0 +1,15 @@
+---
+"@gradio/button": patch
+"@gradio/chatbot": patch
+"@gradio/client": patch
+"@gradio/dataframe": patch
+"@gradio/dataset": patch
+"@gradio/image": patch
+"@gradio/imageeditor": patch
+"@gradio/simpleimage": patch
+"@gradio/uploadbutton": patch
+"@gradio/video": patch
+"gradio": patch
+---
+
+feat:Refactors `get_fetchable_url_or_file()` to remove it from the frontend
diff --git a/client/js/src/index.ts b/client/js/src/index.ts
@@ -6,9 +6,4 @@ export {
 	api_factory
 } from "./client.js";
 export type { SpaceStatus } from "./types.js";
-export {
-	FileData,
-	upload,
-	get_fetchable_url_or_file,
-	prepare_files
-} from "./upload.js";
+export { FileData, upload, prepare_files } from "./upload.js";
diff --git a/client/js/src/upload.ts b/client/js/src/upload.ts
@@ -9,22 +9,6 @@ function is_url(str: string): boolean {
 	}
 }
 
-export function get_fetchable_url_or_file(
-	path: string | null,
-	server_url: string,
-	proxy_url: string | null
-): string {
-	if (path == null) {
-		return proxy_url ? `/proxy=${proxy_url}file=` : `${server_url}/file=`;
-	}
-	if (is_url(path)) {
-		return path;
-	}
-	return proxy_url
-		? `/proxy=${proxy_url}file=${path}`
-		: `${server_url}/file=${path}`;
-}
-
 export async function upload(
 	file_data: FileData[],
 	root: string,

diff --git a/gradio/blocks.py b/gradio/blocks.py
@@ -234,6 +234,9 @@ def move_resource_to_block_cache(
         """Moves a file or downloads a file from a url to a block's cache directory, adds
         to to the block's temp_files, and returns the path to the file in cache. This
         ensures that the file is accessible to the Block and can be served to users.
+
+        Note: this method is not used in any core Gradio components, but is kept here
+        for backwards compatibility with custom components created with gradio<=4.20.0.
         """
         if url_or_file_path is None:
             return None
@@ -258,6 +261,27 @@ def move_resource_to_block_cache(
 
         return temp_file_path
 
+    def serve_static_file(self, url_or_file_path: str | Path | None) -> dict | None:
+        """If a file is a local file, moves it to the block's cache directory and returns
+        a FileData-type dictionary corresponding to the file. If the file is a URL, returns a
+        FileData-type dictionary corresponding to the URL. This ensures that the file is
+        accessible in the frontend and can be served to users.
+
+        Examples:
+        >>> block.serve_static_file("https://gradio.app/logo.png") -> {"path": "https://gradio.app/logo.png", "url": "https://gradio.app/logo.png"}
+        >>> block.serve_static_file("logo.png") -> {"path": "logo.png", "url": "/file=logo.png"}
+        """
+        if url_or_file_path is None:
+            return None
+        if isinstance(url_or_file_path, Path):
+            url_or_file_path = str(url_or_file_path)
+
+        if client_utils.is_http_url_like(url_or_file_path):
+            return FileData(path=url_or_file_path, url=url_or_file_path).model_dump()
+        else:
+            data = {"path": url_or_file_path}
+            return processing_utils.move_files_to_cache(data, self)
+
 
 class BlockContext(Block):
     def __init__(
@@ -1328,7 +1352,6 @@ def preprocess_data(
                     inputs_cached = processing_utils.move_files_to_cache(
                         inputs[i],
                         block,
-                        add_urls=True,
                         check_in_upload_folder=not explicit_call,
                     )
                     if getattr(block, "data_model", None) and inputs_cached is not None:
@@ -1459,9 +1482,8 @@ def postprocess_data(
 
                 outputs_cached = processing_utils.move_files_to_cache(
                     prediction_value,
-                    block,  # type: ignore
+                    block,
                     postprocess=True,
-                    add_urls=True,
                 )
                 output.append(outputs_cached)
 

diff --git a/gradio/components/base.py b/gradio/components/base.py
@@ -199,7 +199,6 @@ def __init__(
             initial_value,
             self,  # type: ignore
             postprocess=True,
-            add_urls=True,
         )
 
         if callable(load_fn):

diff --git a/gradio/components/button.py b/gradio/components/button.py
@@ -62,7 +62,7 @@ def __init__(
             scale=scale,
             min_width=min_width,
         )
-        self.icon = self.move_resource_to_block_cache(icon)
+        self.icon = self.serve_static_file(icon)
         self.variant = variant
         self.size = size
         self.link = link

diff --git a/gradio/components/chatbot.py b/gradio/components/chatbot.py
@@ -9,7 +9,7 @@
 from gradio_client import utils as client_utils
 from gradio_client.documentation import document
 
-from gradio import processing_utils, utils
+from gradio import utils
 from gradio.components.base import Component
 from gradio.data_classes import FileData, GradioModel, GradioRootModel
 from gradio.events import Events
@@ -123,13 +123,13 @@ def __init__(
             render=render,
             value=value,
         )
-        self.avatar_images: list[str | None] = [None, None]
+        self.avatar_images: list[dict | None] = [None, None]
         if avatar_images is None:
             pass
         else:
             self.avatar_images = [
-                processing_utils.move_resource_to_block_cache(avatar_images[0], self),
-                processing_utils.move_resource_to_block_cache(avatar_images[1], self),
+                self.serve_static_file(avatar_images[0]),
+                self.serve_static_file(avatar_images[1]),
             ]
 
     def _preprocess_chat_messages(

diff --git a/gradio/components/dataset.py b/gradio/components/dataset.py
@@ -95,7 +95,8 @@ def __init__(
                     # custom components
                     example[i] = component.as_example(ex)
                     example[i] = processing_utils.move_files_to_cache(
-                        example[i], component
+                        example[i],
+                        component,
                     )
         self.type = type
         self.label = label

diff --git a/gradio/components/upload_button.py b/gradio/components/upload_button.py
@@ -101,7 +101,7 @@ def __init__(
             min_width=min_width,
             interactive=interactive,
         )
-        self.icon = self.move_resource_to_block_cache(icon)
+        self.icon = self.serve_static_file(icon)
 
     def api_info(self) -> dict[str, list[str]]:
         if self.file_count == "single":

diff --git a/gradio/helpers.py b/gradio/helpers.py
@@ -210,7 +210,9 @@ def __init__(
                     if isinstance(prediction_value, (GradioRootModel, GradioModel)):
                         prediction_value = prediction_value.model_dump()
                     prediction_value = processing_utils.move_files_to_cache(
-                        prediction_value, component, postprocess=True
+                        prediction_value,
+                        component,
+                        postprocess=True,
                     )
                     sub.append(prediction_value)
                 self.processed_examples.append(sub)

diff --git a/gradio/processing_utils.py b/gradio/processing_utils.py
@@ -29,7 +29,7 @@
 log = logging.getLogger(__name__)
 
 if TYPE_CHECKING:
-    from gradio.components.base import Component
+    from gradio.blocks import Block
 
 #########################
 # GENERAL
@@ -228,7 +228,7 @@ def save_base64_to_cache(
 
 
 def move_resource_to_block_cache(
-    url_or_file_path: str | Path | None, block: Component
+    url_or_file_path: str | Path | None, block: Block
 ) -> str | None:
     """This method has been replaced by Block.move_resource_to_block_cache(), but is
     left here for backwards compatibility for any custom components created in Gradio 4.2.0 or earlier.
@@ -238,9 +238,8 @@ def move_resource_to_block_cache(
 
 def move_files_to_cache(
     data: Any,
-    block: Component,
+    block: Block,
     postprocess: bool = False,
-    add_urls=False,
     check_in_upload_folder=False,
 ) -> dict:
     """Move any files in `data` to cache and (optionally), adds URL prefixes (/file=...) needed to access the cached file.
@@ -252,8 +251,6 @@ def move_files_to_cache(
         data: The input or output data for a component. Can be a dictionary or a dataclass
         block: The component whose data is being processed
         postprocess: Whether its running from postprocessing
-        root_url: The root URL of the local server, if applicable
-        add_urls: Whether to add URLs to the payload
         check_in_upload_folder: If True, instead of moving the file to cache, checks if the file is in already in cache (exception if not).
     """
 
@@ -263,7 +260,7 @@ def _move_to_cache(d: dict):
         # postprocess, it means the component can display a URL
         # without it being served from the gradio server
         # This makes it so that the URL is not downloaded and speeds up event processing
-        if payload.url and postprocess:
+        if payload.url and postprocess and client_utils.is_http_url_like(payload.url):
             payload.path = payload.url
         elif not block.proxy_url:
             # If the file is on a remote server, do not move it to cache.
@@ -280,18 +277,17 @@ def _move_to_cache(d: dict):
                 raise ValueError("Did not determine a file path for the resource.")
             payload.path = temp_file_path
 
-        if add_urls:
-            url_prefix = "/stream/" if payload.is_stream else "/file="
-            if block.proxy_url:
-                proxy_url = block.proxy_url.rstrip("/")
-                url = f"/proxy={proxy_url}{url_prefix}{payload.path}"
-            elif client_utils.is_http_url_like(payload.path) or payload.path.startswith(
-                f"{url_prefix}"
-            ):
-                url = payload.path
-            else:
-                url = f"{url_prefix}{payload.path}"
-            payload.url = url
+        url_prefix = "/stream/" if payload.is_stream else "/file="
+        if block.proxy_url:
+            proxy_url = block.proxy_url.rstrip("/")
+            url = f"/proxy={proxy_url}{url_prefix}{payload.path}"
+        elif client_utils.is_http_url_like(payload.path) or payload.path.startswith(
+            f"{url_prefix}"
+        ):
+            url = payload.path
+        else:
+            url = f"{url_prefix}{payload.path}"
+        payload.url = url
 
         return payload.model_dump()
 

diff --git a/guides/05_custom-components/05_frontend.md b/guides/05_custom-components/05_frontend.md
@@ -104,7 +104,6 @@ The `Example.svelte` file should expose the following props:
     export let value: string;
     export let type: "gallery" | "table";
     export let selected = false;
-    export let samples_dir: string;
     export let index: number;
 ```
 
@@ -114,8 +113,6 @@ The `Example.svelte` file should expose the following props:
 
 * `selected`: You can also adjust how the examples are displayed if a user "selects" a particular example by using the selected variable.
 
-* `samples_dir`: A URL to prepend to `value` if your example is fetching a file from the server
-
 * `index`: The current index of the selected value.
 
 * Any additional props your "non-example" component takes!

diff --git a/guides/05_custom-components/07_pdf-component-example.md b/guides/05_custom-components/07_pdf-component-example.md
@@ -472,7 +472,6 @@ To do so, we're going to add some of the pdf rendering logic in `Index.svelte` t
 ```ts
 <script lang="ts">
 	export let value: string;
-	export let samples_dir: string;
 	export let type: "gallery" | "table";
 	export let selected = false;
 	import pdfjsLib from "pdfjs-dist";
@@ -505,7 +504,7 @@ To do so, we're going to add some of the pdf rendering logic in `Index.svelte` t
 			});
 		}
 
-	$: get_doc(samples_dir + value);
+	$: get_doc(value);
 </script>
 
 <div
@@ -590,11 +589,6 @@ class PDF(Component):
 
     def example_inputs(self):
         return "https://gradio-builds.s3.amazonaws.com/assets/pdf-guide/fw9.pdf"
-
-    def as_example(self, input_data: str | None) -> str | None:
-        if input_data is None:
-            return None
-        return processing_utils.move_resource_to_block_cache(input_data, self)
 ```
 
 ## Step 10: Add a demo and publish!

diff --git a/js/button/Button.stories.svelte b/js/button/Button.stories.svelte
@@ -65,7 +65,10 @@
 <Story
 	name="Button with external image icon"
 	args={{
-		icon: "https://huggingface.co/front/assets/huggingface_logo-noborder.svg"
+		icon: {
+			url: "https://huggingface.co/front/assets/huggingface_logo-noborder.svg",
+			path: "https://huggingface.co/front/assets/huggingface_logo-noborder.svg"
+		}
 	}}
 />
 <Story

diff --git a/js/button/Index.svelte b/js/button/Index.svelte
@@ -3,7 +3,8 @@
 </script>
 
 <script lang="ts">
-	import type { Gradio, ShareData } from "@gradio/utils";
+	import type { Gradio } from "@gradio/utils";
+	import { type FileData } from "@gradio/client";
 
 	import Button from "./shared/Button.svelte";
 
@@ -15,14 +16,12 @@
 	export let interactive: boolean;
 	export let size: "sm" | "lg" = "lg";
 	export let scale: number | null = null;
-	export let icon: string | null = null;
+	export let icon: FileData | null = null;
 	export let link: string | null = null;
 	export let min_width: number | undefined = undefined;
 	export let gradio: Gradio<{
 		click: never;
 	}>;
-	export let root = "";
-	export let proxy_url: null | string = null;
 </script>
 
 <Button
@@ -36,8 +35,6 @@
 	{icon}
 	{min_width}
 	{visible}
-	{root}
-	{proxy_url}
 	disabled={!interactive}
 	on:click={() => gradio.dispatch("click")}
 >

diff --git a/js/button/shared/Button.svelte b/js/button/shared/Button.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { get_fetchable_url_or_file } from "@gradio/client";
+	import { type FileData } from "@gradio/client";
 
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
@@ -8,13 +8,10 @@
 	export let size: "sm" | "lg" = "lg";
 	export let value: string | null = null;
 	export let link: string | null = null;
-	export let icon: string | null = null;
+	export let icon: FileData | null = null;
 	export let disabled = false;
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
-	export let root = "";
-	export let proxy_url: string | null = null;
-	$: icon_path = get_fetchable_url_or_file(icon, root, proxy_url);
 </script>
 
 {#if link && link.length > 0}
@@ -34,7 +31,7 @@
 		id={elem_id}
 	>
 		{#if icon}
-			<img class="button-icon" src={icon_path} alt={`${value} icon`} />
+			<img class="button-icon" src={icon.url} alt={`${value} icon`} />
 		{/if}
 		<slot />
 	</a>
@@ -52,7 +49,7 @@
 		{disabled}
 	>
 		{#if icon}
-			<img class="button-icon" src={icon_path} alt={`${value} icon`} />
+			<img class="button-icon" src={icon.url} alt={`${value} icon`} />
 		{/if}
 		<slot />
 	</button>