Show image thumbnails when example directory is provided

CHANGELOG.md

@@ -41,8 +41,9 @@ demo.queue().launch()
 
 
 ## Bug Fixes:
-No changes to highlight.
-
+* Fixed issue where image thumbnails were not showing when an example directory was provided
+by by [@abidlabs](https://github.com/abidlabs) in [PR 2745](https://github.com/gradio-app/gradio/pull/2745) 
+
 ## Documentation Changes:
 No changes to highlight.
 

gradio/components.py

@@ -1574,6 +1574,9 @@ def stream(
             postprocess=postprocess,
         )
 
+    def as_example(self, input_data: str | None) -> str:
+        return os.path.abspath(input_data)
+
 
 @document("change", "clear", "play", "pause", "stop", "style")
 class Video(Changeable, Clearable, Playable, Uploadable, IOComponent, FileSerializable):

gradio/examples.py

@@ -92,7 +92,7 @@ def __init__(
     ):
         """
         Parameters:
-            examples: example inputs that can be clicked to populate specific components. Should be nested list, in which the outer list consists of samples and each inner list consists of an input corresponding to each input component. A string path to a directory of examples can also be provided. If there are multiple input components and a directory is provided, a log.csv file must be present in the directory to link corresponding inputs.
+            examples: example inputs that can be clicked to populate specific components. Should be nested list, in which the outer list consists of samples and each inner list consists of an input corresponding to each input component. A string path to a directory of examples can also be provided but it should be within the directory with the python file running the gradio app. If there are multiple input components and a directory is provided, a log.csv file must be present in the directory to link corresponding inputs.
             inputs: the component or list of components corresponding to the examples
             outputs: optionally, provide the component or list of components corresponding to the output of the examples. Required if `cache` is True.
             fn: optionally, provide the function to run to generate the outputs corresponding to the examples. Required if `cache` is True.
@@ -212,13 +212,14 @@ def __init__(
                     )
                     break
 
-        self.dataset = Dataset(
-            components=inputs_with_examples,
-            samples=non_none_examples,
-            type="index",
-            label=label,
-            elem_id=elem_id,
-        )
+        with utils.set_directory(working_directory):
+            self.dataset = Dataset(
+                components=inputs_with_examples,
+                samples=non_none_examples,
+                type="index",
+                label=label,
+                elem_id=elem_id,
+            )
 
         self.cached_folder = os.path.join(CACHED_FOLDER, str(self.dataset._id))
         self.cached_file = os.path.join(self.cached_folder, "log.csv")

gradio/interface.py

@@ -160,7 +160,7 @@ def __init__(
             fn: the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
             inputs: a single Gradio component, or list of Gradio components. Components can either be passed as instantiated objects, or referred to by their string shortcuts. The number of input components should match the number of parameters in fn. If set to None, then only the output components will be displayed.
             outputs: a single Gradio component, or list of Gradio components. Components can either be passed as instantiated objects, or referred to by their string shortcuts. The number of output components should match the number of values returned by fn. If set to None, then only the input components will be displayed.
-            examples: sample inputs for the function; if provided, appear below the UI components and can be clicked to populate the interface. Should be nested list, in which the outer list consists of samples and each inner list consists of an input corresponding to each input component. A string path to a directory of examples can also be provided. If there are multiple input components and a directory is provided, a log.csv file must be present in the directory to link corresponding inputs.
+            examples: sample inputs for the function; if provided, appear below the UI components and can be clicked to populate the interface. Should be nested list, in which the outer list consists of samples and each inner list consists of an input corresponding to each input component. A string path to a directory of examples can also be provided, but it should be within the directory with the python file running the gradio app. If there are multiple input components and a directory is provided, a log.csv file must be present in the directory to link corresponding inputs.
             cache_examples: If True, caches examples in the server for fast runtime in examples. The default option in HuggingFace Spaces is True. The default option elsewhere is False.
             examples_per_page: If examples are provided, how many to display per page.
             live: whether the interface should automatically rerun if any of the inputs change.

test/test_components.py

@@ -1046,7 +1046,7 @@ def test_dataframe_postprocess_only_dates(self):
 class TestDataset:
     def test_preprocessing(self):
         test_file_dir = pathlib.Path(pathlib.Path(__file__).parent, "test_files")
-        bus = pathlib.Path(test_file_dir, "bus.png")
+        bus = str(pathlib.Path(test_file_dir, "bus.png").resolve())
 
         dataset = gr.Dataset(
             components=["number", "textbox", "image", "html", "markdown"],

test/test_examples.py

@@ -42,6 +42,8 @@ def test_handle_directory_with_log_file(self):
             [gr.media_data.BASE64_IMAGE, "hello"],
             [gr.media_data.BASE64_IMAGE, "hi"],
         ]
+        for sample in examples.dataset.samples:
+            assert os.path.isabs(sample[0])
 
     @pytest.mark.asyncio
     async def test_no_preprocessing(self):