Render decorator 2 (#8110)

* changes * add changeset * changes * changes * changes * changes * changes * changes * changeas * changes * add changeset * changes * add changeset * changes * changes * changes * changes * changes * changes * changes * changes * add changeset * changes * cganges * changes * changes * changes * changes * add changeset * changes * chagnes * changes * changes * changes * changes * remove console log * changes * changes * changes * changes * changes --------- Co-authored-by: Ali Abid <aliabid94@gmail.com> Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
gradio-app · May 6, 2024 · 5436031 · 5436031
1 parent be2b1e1
commit 5436031
Show file tree

Hide file tree

Showing 61 changed files with 528 additions and 78 deletions.
diff --git a/.changeset/rich-signs-bow.md b/.changeset/rich-signs-bow.md
@@ -0,0 +1,7 @@
+---
+"@gradio/app": minor
+"@gradio/client": minor
+"gradio": minor
+---
+
+feat:Render decorator 2
diff --git a/client/js/src/types.ts b/client/js/src/types.ts
@@ -220,12 +220,13 @@ export interface FileData {
 
 // Event and Listener Types
 
-export type EventType = "data" | "status" | "log";
+export type EventType = "data" | "status" | "log" | "render";
 
 export interface EventMap {
 	data: Payload;
 	status: Status;
 	log: LogMessage;
+	render: RenderMessage;
 }
 
 export type Event<K extends EventType> = {
@@ -239,6 +240,13 @@ export interface LogMessage {
 	log: string;
 	level: "warning" | "info";
 }
+export interface RenderMessage {
+	fn_index: number;
+	data: {
+		components: any[];
+		layout: any;
+	};
+}
 
 export interface Status {
 	queue: boolean;

diff --git a/client/js/src/utils/submit.ts b/client/js/src/utils/submit.ts
@@ -594,6 +594,14 @@ export function submit(
 											endpoint: _endpoint,
 											fn_index
 										});
+										if (data.render_config) {
+											fire_event({
+												type: "render",
+												data: data.render_config,
+												endpoint: _endpoint,
+												fn_index
+											});
+										}
 
 										if (complete) {
 											fire_event({

diff --git a/demo/render_merge/run.ipynb b/demo/render_merge/run.ipynb
@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: render_merge"]}, {"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": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    text_count = gr.Slider(1, 10, step=1, label=\"Textbox Count\")\n", "\n", "    @gr.render(inputs=[text_count], triggers=[text_count.change])\n", "    def render_count(count):\n", "        for i in range(count):\n", "            gr.Textbox(key=i)\n", "\n", "    gr.Button(\"Merge\")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
diff --git a/demo/render_merge/run.py b/demo/render_merge/run.py
@@ -0,0 +1,14 @@
+import gradio as gr
+
+with gr.Blocks() as demo:
+    text_count = gr.Slider(1, 10, step=1, label="Textbox Count")
+
+    @gr.render(inputs=[text_count], triggers=[text_count.change])
+    def render_count(count):
+        for i in range(count):
+            gr.Textbox(key=i)
+
+    gr.Button("Merge")
+
+if __name__ == "__main__":
+    demo.launch()
diff --git a/demo/render_split/run.ipynb b/demo/render_split/run.ipynb
@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: render_split"]}, {"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": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    input_text = gr.Textbox(label=\"input\")\n", "    mode = gr.Radio([\"textbox\", \"button\"], value=\"textbox\")\n", "\n", "    @gr.render(inputs=[input_text, mode], triggers=[input_text.submit])\n", "    def show_split(text, mode):\n", "        if len(text) == 0:\n", "            gr.Markdown(\"## No Input Provided\")\n", "        else:\n", "            for letter in text:\n", "                if mode == \"textbox\":\n", "                    gr.Textbox(letter)\n", "                else:\n", "                    gr.Button(letter)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
diff --git a/demo/render_split/run.py b/demo/render_split/run.py
@@ -0,0 +1,19 @@
+import gradio as gr
+
+with gr.Blocks() as demo:
+    input_text = gr.Textbox(label="input")
+    mode = gr.Radio(["textbox", "button"], value="textbox")
+
+    @gr.render(inputs=[input_text, mode], triggers=[input_text.submit])
+    def show_split(text, mode):
+        if len(text) == 0:
+            gr.Markdown("## No Input Provided")
+        else:
+            for letter in text:
+                if mode == "textbox":
+                    gr.Textbox(letter)
+                else:
+                    gr.Button(letter)
+
+if __name__ == "__main__":
+    demo.launch()
diff --git a/gradio/__init__.py b/gradio/__init__.py
@@ -81,6 +81,7 @@
 from gradio.interface import Interface, TabbedInterface, close_all
 from gradio.layouts import Accordion, Column, Group, Row, Tab, TabItem, Tabs
 from gradio.oauth import OAuthProfile, OAuthToken
+from gradio.renderable import render
 from gradio.routes import Request, mount_gradio_app
 from gradio.templates import (
     Files,

diff --git a/gradio/_simple_templates/simpledropdown.py b/gradio/_simple_templates/simpledropdown.py
@@ -30,6 +30,7 @@ def __init__(
         elem_id: str | None = None,
         elem_classes: list[str] | str | None = None,
         render: bool = True,
+        key: int | str | None = None,
     ):
         """
         Parameters:
@@ -46,6 +47,7 @@ def __init__(
             elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
             elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
             render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
+            key: if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.
         """
         self.choices = (
             [tuple(c) if isinstance(c, (tuple, list)) else (str(c), c) for c in choices]
@@ -65,6 +67,7 @@ def __init__(
             elem_classes=elem_classes,
             value=value,
             render=render,
+            key=key,
         )
 
     def api_info(self) -> dict[str, Any]:

diff --git a/gradio/_simple_templates/simpleimage.py b/gradio/_simple_templates/simpleimage.py
@@ -43,6 +43,7 @@ def __init__(
         elem_id: str | None = None,
         elem_classes: list[str] | str | None = None,
         render: bool = True,
+        key: int | str | None = None,
     ):
         """
         Parameters:
@@ -59,6 +60,7 @@ def __init__(
             elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
             elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
             render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
+            key: if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.
         """
         self.show_download_button = show_download_button
         super().__init__(
@@ -73,6 +75,7 @@ def __init__(
             elem_id=elem_id,
             elem_classes=elem_classes,
             render=render,
+            key=key,
             value=value,
         )
 

diff --git a/gradio/_simple_templates/simpletextbox.py b/gradio/_simple_templates/simpletextbox.py
@@ -33,6 +33,7 @@ def __init__(
         elem_id: str | None = None,
         elem_classes: list[str] | str | None = None,
         render: bool = True,
+        key: int | str | None = None,
     ):
         """
         Parameters:
@@ -49,6 +50,7 @@ def __init__(
             elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
             elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
             render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
+            key: if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.
         """
         self.placeholder = placeholder
         self.rtl = rtl
@@ -64,6 +66,7 @@ def __init__(
             elem_classes=elem_classes,
             value=value,
             render=render,
+            key=key,
         )
 
     def preprocess(self, payload: str | None) -> str | None: