Allow concurrent renders (#10059)

* changes

* changes

* changes

* add changeset

* changes

* changes

* changes

* changes

* Update gradio/blocks.py

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

---------

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>

Author: 4 people

.changeset/icy-moments-rescue.md

@@ -0,0 +1,5 @@
+---
+"gradio": patch
+---
+
+fix:Allow concurrent renders

demo/render_heavy_concurrently/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: render_heavy_concurrently"]}, {"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", "import random\n", "\n", "with gr.Blocks() as demo:\n", "\n", "    with gr.Row():\n", "\n", "        @gr.render()\n", "        def render():\n", "            for _ in range(500):\n", "                gr.Textbox(str(random.randint(0, 100)))\n", "            gr.Button(\"DONE 1\")\n", "\n", "        @gr.render()\n", "        def render2():\n", "            for _ in range(500):\n", "                gr.Textbox(str(random.randint(0, 100)))\n", "            gr.Button(\"DONE 2\")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.queue(default_concurrency_limit=64).launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/render_heavy_concurrently/run.py

@@ -0,0 +1,21 @@
+import gradio as gr
+import random
+
+with gr.Blocks() as demo:
+
+    with gr.Row():
+
+        @gr.render()
+        def render():
+            for _ in range(500):
+                gr.Textbox(str(random.randint(0, 100)))
+            gr.Button("DONE 1")
+
+        @gr.render()
+        def render2():
+            for _ in range(500):
+                gr.Textbox(str(random.randint(0, 100)))
+            gr.Button("DONE 2")
+
+if __name__ == "__main__":
+    demo.queue(default_concurrency_limit=64).launch()

gradio/blocks.py

@@ -896,7 +896,10 @@ def get_layout(block: Block):
         config["layout"] = get_layout(root_block)
 
         config["components"] = []
-        for _id, block in self.blocks.items():
+        blocks_items = list(
+            self.blocks.items()
+        )  # freeze as list to prevent concurrent re-renders from changing the dict during loop, see https://github.com/gradio-app/gradio/issues/9991
+        for _id, block in blocks_items:
             if renderable:
                 if _id not in rendered_ids:
                     continue

js/spa/test/render_heavy_concurrently.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from "@self/tootils";
+
+test("1000 total textboxes render", async ({ page }) => {
+	await page.getByText("DONE 1", { exact: false }).click();
+	await page.getByText("DONE 2", { exact: false }).click();
+
+	const textboxes = await page.getByLabel("Textbox").all();
+	expect(textboxes).toHaveLength(1000);
+});