Merge branch 'v4' into cli-command-list-templates

.changeset/five-islands-joke.md

@@ -0,0 +1,48 @@
+---
+"@gradio/accordion": minor
+"@gradio/annotatedimage": minor
+"@gradio/app": minor
+"@gradio/audio": minor
+"@gradio/box": minor
+"@gradio/chatbot": minor
+"@gradio/checkbox": minor
+"@gradio/checkboxgroup": minor
+"@gradio/client": minor
+"@gradio/code": minor
+"@gradio/colorpicker": minor
+"@gradio/column": minor
+"@gradio/dataframe": minor
+"@gradio/dataset": minor
+"@gradio/dropdown": minor
+"@gradio/fallback": minor
+"@gradio/file": minor
+"@gradio/fileexplorer": minor
+"@gradio/form": minor
+"@gradio/gallery": minor
+"@gradio/group": minor
+"@gradio/highlightedtext": minor
+"@gradio/html": minor
+"@gradio/image": minor
+"@gradio/json": minor
+"@gradio/label": minor
+"@gradio/markdown": minor
+"@gradio/model3d": minor
+"@gradio/number": minor
+"@gradio/plot": minor
+"@gradio/preview": minor
+"@gradio/radio": minor
+"@gradio/row": minor
+"@gradio/slider": minor
+"@gradio/state": minor
+"@gradio/tabitem": minor
+"@gradio/tabs": minor
+"@gradio/textbox": minor
+"@gradio/uploadbutton": minor
+"@gradio/video": minor
+"gradio": minor
+"imageslider": minor
+"newtext": minor
+"website": minor
+---
+
+feat:Format js in v4 branch

.changeset/green-olives-shake.md

@@ -0,0 +1,6 @@
+---
+"@gradio/dataset": minor
+"gradio": minor
+---
+
+feat:pass props to example components and to example outputs

demo/examples_component/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: examples_component"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('images')\n", "!wget -q -O images/cheetah1.jpg https://github.com/gradio-app/gradio/raw/main/demo/examples_component/images/cheetah1.jpg\n", "!wget -q -O images/lion.jpg https://github.com/gradio-app/gradio/raw/main/demo/examples_component/images/lion.jpg\n", "!wget -q -O images/lion.webp https://github.com/gradio-app/gradio/raw/main/demo/examples_component/images/lion.webp\n", "!wget -q -O images/logo.png https://github.com/gradio-app/gradio/raw/main/demo/examples_component/images/logo.png"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import os\n", "\n", "def flip(i):\n", "    return i.rotate(180)\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Row():\n", "        with gr.Column():\n", "            img_i = gr.Image(label=\"Input Image\", type=\"pil\")\n", "        with gr.Column():\n", "            img_o = gr.Image(label=\"Output Image\")\n", "    with gr.Row():\n", "        btn = gr.Button(value=\"Flip Image\")\n", "    btn.click(flip, inputs=[img_i], outputs=[img_o])\n", "\n", "    gr.Examples(\n", "        [ \n", "            os.path.join(os.path.abspath(''), \"images/cheetah1.jpg\"),\n", "            os.path.join(os.path.abspath(''), \"images/lion.jpg\"),\n", "        ],\n", "        img_i,\n", "        img_o,\n", "        flip\n", "    )\n", "    \n", "demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: examples_component"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('images')\n", "!wget -q -O images/cheetah1.jpg https://github.com/gradio-app/gradio/raw/main/demo/examples_component/images/cheetah1.jpg\n", "!wget -q -O images/lion.jpg https://github.com/gradio-app/gradio/raw/main/demo/examples_component/images/lion.jpg\n", "!wget -q -O images/lion.webp https://github.com/gradio-app/gradio/raw/main/demo/examples_component/images/lion.webp\n", "!wget -q -O images/logo.png https://github.com/gradio-app/gradio/raw/main/demo/examples_component/images/logo.png"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import os\n", "\n", "\n", "def flip(i):\n", "    return i.rotate(180)\n", "\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Row():\n", "        with gr.Column():\n", "            img_i = gr.Image(label=\"Input Image\", type=\"pil\")\n", "        with gr.Column():\n", "            img_o = gr.Image(label=\"Output Image\")\n", "    with gr.Row():\n", "        btn = gr.Button(value=\"Flip Image\")\n", "    btn.click(flip, inputs=[img_i], outputs=[img_o])\n", "\n", "    gr.Examples(\n", "        [\n", "            os.path.join(os.path.abspath(''), \"images/cheetah1.jpg\"),\n", "            os.path.join(os.path.abspath(''), \"images/lion.jpg\"),\n", "        ],\n", "        img_i,\n", "        img_o,\n", "        flip,\n", "    )\n", "\n", "demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/examples_component/run.py

@@ -1,9 +1,11 @@
 import gradio as gr
 import os
 
+
 def flip(i):
     return i.rotate(180)
 
+
 with gr.Blocks() as demo:
     with gr.Row():
         with gr.Column():
@@ -15,13 +17,13 @@ def flip(i):
     btn.click(flip, inputs=[img_i], outputs=[img_o])
 
     gr.Examples(
-        [ 
+        [
             os.path.join(os.path.dirname(__file__), "images/cheetah1.jpg"),
             os.path.join(os.path.dirname(__file__), "images/lion.jpg"),
         ],
         img_i,
         img_o,
-        flip
+        flip,
     )
-    
-demo.launch()
+
+demo.launch()

gradio/blocks.py

@@ -588,11 +588,8 @@ def get_block_instance(id: int) -> Block:
             else:
                 raise ValueError(f"Cannot find block with id {id}")
             cls = component_or_layout_class(block_config["type"])
-            block_config["props"].pop("type", None)
-            block_config["props"].pop("name", None)
-            block_config["props"].pop("selectable", None)
-            block_config["props"].pop("streamable", None)
-            block_config["props"].pop("server_fns", None)
+
+            block_config["props"] = utils.recover_kwargs(block_config["props"])
 
             # If a Gradio app B is loaded into a Gradio app A, and B itself loads a
             # Gradio app C, then the root_urls of the components in A need to be the

gradio/components/dataset.py

@@ -6,6 +6,7 @@
 
 from gradio_client.documentation import document, set_documentation_group
 
+import gradio.utils as utils
 from gradio.components.base import (
     Component,
     get_component_instance,
@@ -66,6 +67,13 @@ def __init__(
         self.scale = scale
         self.min_width = min_width
         self._components = [get_component_instance(c) for c in components]
+        self.component_props = [
+            utils.recover_kwargs(
+                component.get_config(),
+                ["value"],
+            )
+            for component in self._components
+        ]
 
         # Narrow type to Component
         assert all(
@@ -95,10 +103,16 @@ def skip_api(self):
 
     def get_config(self):
         config = super().get_config()
-        config["components"] = [
-            component.get_block_name() for component in self._components
-        ]
-        config["component_ids"] = [component._id for component in self._components]
+
+        config["components"] = []
+        config["component_props"] = self.component_props
+        config["component_ids"] = []
+
+        for component in self._components:
+            config["components"].append(component.get_block_name())
+
+            config["component_ids"].append(component._id)
+
         return config
 
     def preprocess(self, x: Any) -> Any:

gradio/helpers.py

@@ -259,7 +259,16 @@ def create(self) -> None:
 
         async def load_example(example_id):
             processed_example = self.non_none_processed_examples[example_id]
-            return utils.resolve_singleton(processed_example)
+            examples = utils.resolve_singleton(processed_example)
+
+            return (
+                update(value=examples, **self.dataset.component_props[0])
+                if not isinstance(examples, list)
+                else [
+                    update(value=ex, **self.dataset.component_props[i])
+                    for i, ex in enumerate(examples)
+                ]
+            )
 
         if Context.root_block:
             self.load_input_event = self.dataset.click(

gradio/utils.py

@@ -950,3 +950,12 @@ def find_user_stack_level() -> int:
         frame = frame.f_back
         n += 1
     return n
+
+
+def recover_kwargs(config: dict, additional_keys_to_ignore: list[str] | None = None):
+    not_kwargs = ["type", "name", "selectable", "server_fns", "streamable"]
+    return {
+        k: v
+        for k, v in config.items()
+        if k not in not_kwargs and k not in (additional_keys_to_ignore or [])
+    }

js/app/build_plugins.ts

@@ -274,8 +274,6 @@ const component_map = {
 };
 `;
 
-	console.log(component_map);
-
 	return `${component_map}\n\n${readFileSync(loader_path, "utf8")}`;
 }
 

js/dataset/Index.svelte

@@ -4,6 +4,7 @@
 	import type { Gradio, SelectData } from "@gradio/utils";
 	import { get_fetchable_url_or_file } from "@gradio/upload";
 	export let components: string[];
+	export let component_props: Record<string, any>[];
 	export let component_map: Map<
 		string,
 		Promise<{
@@ -141,6 +142,7 @@
 					{#if component_meta.length && component_map.get(components[0])}
 						<svelte:component
 							this={component_meta[0][0].component}
+							{...component_props[0]}
 							value={sample_row[0]}
 							{samples_dir}
 							type="gallery"
@@ -185,6 +187,7 @@
 									>
 										<svelte:component
 											this={component}
+											{...component_props[j]}
 											{value}
 											{samples_dir}
 											type="table"

test/test_components.py

@@ -2178,11 +2178,13 @@ def test_as_example_returns_file_basename(component):
     assert component.as_example(None) == ""
 
 
-@patch("gradio.components.Component.as_example")
-@patch("gradio.components.Image.as_example")
-@patch("gradio.components.File.as_example")
-@patch("gradio.components.Dataframe.as_example")
-@patch("gradio.components.Model3D.as_example")
+@patch(
+    "gradio.components.Component.as_example", spec=gr.components.Component.as_example
+)
+@patch("gradio.components.Image.as_example", spec=gr.Image.as_example)
+@patch("gradio.components.File.as_example", spec=gr.File.as_example)
+@patch("gradio.components.Dataframe.as_example", spec=gr.DataFrame.as_example)
+@patch("gradio.components.Model3D.as_example", spec=gr.Model3D.as_example)
 def test_dataset_calls_as_example(*mocks):
     gr.Dataset(
         components=[gr.Dataframe(), gr.File(), gr.Image(), gr.Model3D(), gr.Textbox()],

test/test_helpers.py

@@ -481,10 +481,40 @@ def concatenate(str1, str2):
         client = TestClient(app)
 
         response = client.post("/api/load_example/", json={"data": [0]})
-        assert response.json()["data"] == ["Hello,"]
+        assert response.json()["data"] == [
+            {
+                "lines": 1,
+                "max_lines": 20,
+                "show_label": True,
+                "container": True,
+                "min_width": 160,
+                "autofocus": False,
+                "autoscroll": True,
+                "rtl": False,
+                "show_copy_button": False,
+                "__type__": "update",
+                "visible": True,
+                "value": "Hello,",
+            }
+        ]
 
         response = client.post("/api/load_example/", json={"data": [1]})
-        assert response.json()["data"] == ["Michael"]
+        assert response.json()["data"] == [
+            {
+                "lines": 1,
+                "max_lines": 20,
+                "show_label": True,
+                "container": True,
+                "min_width": 160,
+                "autofocus": False,
+                "autoscroll": True,
+                "rtl": False,
+                "show_copy_button": False,
+                "__type__": "update",
+                "visible": True,
+                "value": "Michael",
+            }
+        ]
 
     def test_end_to_end_cache_examples(self):
         def concatenate(str1, str2):