Fixes SVG Icons (#9765)

* add code

* add changeset

* Set as static instead

* Update tangy-eyes-begin.md

* address

* static

* add code

* revert

* Edit changeset

* guide changes

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

.changeset/tangy-eyes-begin.md

@@ -0,0 +1,5 @@
+---
+"gradio": patch
+---
+
+fix:Fixes bug where SVG icons could not be used in Buttons/Chatbots.

gradio/processing_utils.py

@@ -6,6 +6,7 @@
 import ipaddress
 import json
 import logging
+import mimetypes
 import os
 import shutil
 import socket
@@ -658,6 +659,14 @@ async def async_move_files_to_cache(
         keep_in_cache: If True, the file will not be deleted from cache when the server is shut down.
     """
 
+    def _mark_svg_as_safe(payload: FileData):
+        # If the app has not launched, this path can be considered an "allowed path"
+        # This is mainly so that svg files can be displayed inline for button/chatbot icons
+        if (
+            (blocks := LocalContext.blocks.get()) is None or not blocks.is_running
+        ) and (mimetypes.guess_type(payload.path)[0] == "image/svg+xml"):
+            utils.set_static_paths([payload.path])
+
     async def _move_to_cache(d: dict):
         payload = FileData(**d)
         # If the gradio app developer is returning a URL from
@@ -695,7 +704,7 @@ async def _move_to_cache(d: dict):
         else:
             url = f"{url_prefix}{payload.path}"
         payload.url = url
-
+        _mark_svg_as_safe(payload)
         return payload.model_dump()
 
     if isinstance(data, (GradioRootModel, GradioModel)):

gradio/utils.py

@@ -1079,11 +1079,11 @@ def set_static_paths(paths: list[str | Path]) -> None:
     """
     Set the static paths to be served by the gradio app.
 
-    Static files are not moved to the gradio cache and are served directly from the file system.
+    Static files are are served directly from the file system instead of being copied. They are served to users with The Content-Disposition HTTP header set to "inline"
+    when sending these files to users. This indicates that the file should be displayed directly in the browser window if possible.
     This function is useful when you want to serve files that you know will not be modified during the lifetime of the gradio app (like files used in gr.Examples).
     By setting static paths, your app will launch faster and it will consume less disk space.
     Calling this function will set the static paths for all gradio applications defined in the same interpreter session until it is called again or the session ends.
-    To clear out the static paths, call this function with an empty list.
 
     Parameters:
         paths: List of filepaths or directory names to be served by the gradio app. If it is a directory name, ALL files located within that directory will be considered static and not moved to the gradio cache. This also means that ALL files in that directory will be accessible over the network.

guides/04_additional-features/08_file-access.md

@@ -4,35 +4,42 @@ Sharing your Gradio app with others (by hosting it on Spaces, on your own server
 
 This guide explains which files are exposed as well as some best practices for making sure the files on your machine are secure.
 
+## Files Gradio allows users to access 
+
+- **Static files that you explicitly set via the `gr.set_static_paths` function**. This parameter allows you to pass in a list of directories or filenames that will be considered static. This means that they will not be copied to the cache and will be served directly from your computer. This can help save disk space and reduce the time your app takes to launch but be mindful of possible security implications. (By default, this parameter is an empty list).
+
+
+- **Files in the `allowed_paths` parameter in `launch()`**. This parameter allows you to pass in a list of additional directories or exact filepaths you'd like to allow users to have access to. (By default, this parameter is an empty list).
+
+- **Files in Gradio's cache**. After you launch your Gradio app, Gradio copies certain files into a temporary cache and makes these files accessible to users. Let's unpack this in more detail below.
+
 ## The Gradio cache
 
-First, it's important to understand that Gradio copies files to a `cache` directory before returning them to the frontend. This prevents files from being overwritten by one user while they are still needed by another user of your application. For example, if your prediction function returns a video file, then Gradio will move that video to the `cache` after your prediction function runs and returns a URL the frontend can use to show the video. Any file in the `cache` is available via URL to all users of your running application.
+First, it's important to understand why Gradio has a cache at all. Gradio copies files to a cache directory before returning them to the frontend. This prevents files from being overwritten by one user while they are still needed by another user of your application. For example, if your prediction function returns a video file, then Gradio will move that video to the cache after your prediction function runs and returns a URL the frontend can use to show the video. Any file in the cache is available via URL to all users of your running application.
 
 Tip: You can customize the location of the cache by setting the `GRADIO_TEMP_DIR` environment variable to an absolute path, such as `/home/usr/scripts/project/temp/`. 
 
-## The files Gradio will move to the cache
+### Files Gradio moves to the cache
 
-Before placing a file in the cache, Gradio will check to see if the file meets at least one of following criteria:
+Gradio moves three kinds of files into the cache
 
-1. It was uploaded by a user.
-2. It is in the `allowed_paths` parameter of the `Blocks.launch` method.
-3. It is in the current working directory of the python interpreter.
-4. It is in the temp directory obtained by `tempfile.gettempdir()`.
-5. It was specified by the developer before runtime, e.g. cached examples or default values of components.
+1. Files specified by the developer before runtime, e.g. cached examples, default values of components, or files passed into parameters such as the `avatar_images` of `gr.Chatbot`
+2. File paths returned by a prediction function in your Gradio application, if they ALSO meet one of the conditions below:
 
-Note: files in the current working directory whose name starts with a period (`.`) will not be moved to the cache, since they often contain sensitive information. 
 
-If none of these criteria are met, the prediction function that is returning that file will raise an exception instead of moving the file to cache. Gradio performs this check so that arbitrary files on your machine cannot be accessed.
+* It is in the `allowed_paths` parameter of the `Blocks.launch` method.
+* It is in the current working directory of the python interpreter.
+* It is in the temp directory obtained by `tempfile.gettempdir()`.
 
-Tip: If at any time Gradio blocks a file that you would like it to process, add its path to the `allowed_paths` parameter.
+**Note:** files in the current working directory whose name starts with a period (`.`) will not be moved to the cache, even if they are returned from a prediction function, since they often contain sensitive information. 
 
-## The files Gradio will allow others to access 
+If none of these criteria are met, the prediction function that is returning that file will raise an exception instead of moving the file to cache. Gradio performs this check so that arbitrary files on your machine cannot be accessed.
 
-In short, these are the files located in the `cache` and any other additional paths **YOU** grant access to via `allowed_paths` or `gr.set_static_paths`.
+3. Files uploaded by a user to your Gradio app (e.g. through the `File` or `Image` input components).
 
-- **The `allowed_paths` parameter in `launch()`**. This parameter allows you to pass in a list of additional directories or exact filepaths you'd like to allow users to have access to. (By default, this parameter is an empty list).
 
-- **Static files that you explicitly set via the `gr.set_static_paths` function**. This parameter allows you to pass in a list of directories or filenames that will be considered static. This means that they will not be copied to the cache and will be served directly from your computer. This can help save disk space and reduce the time your app takes to launch but be mindful of possible security implications.
+Tip: If at any time Gradio blocks a file that you would like it to process, add its path to the `allowed_paths` parameter.
+
 
 ## The files Gradio will not allow others to access