Fix example loading for custom components (#7981)

* format

* add changeset

* add changeset

* Update component

* Add tests

* Add code

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/quiet-laws-joke.md

@@ -0,0 +1,6 @@
+---
+"@gradio/app": patch
+"gradio": patch
+---
+
+fix:Fix example loading for custom components

demo/gradio_pdf_demo/requirements.txt

@@ -1 +1 @@
-gradio_pdf==0.0.3
+gradio_pdf==0.0.7

demo/gradio_pdf_demo/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: gradio_pdf_demo"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio gradio_pdf==0.0.3 "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from gradio_pdf import PDF\n", "\n", "\n", "demo = gr.Interface(lambda x: x,\n", "                    PDF(),\n", "                    gr.File())\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: gradio_pdf_demo"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio gradio_pdf==0.0.7 "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/gradio_pdf_demo/contract.pdf"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from gradio_pdf import PDF\n", "from pathlib import Path\n", "\n", "current_dir = Path(__file__).parent\n", "\n", "demo = gr.Interface(lambda x: x,\n", "                    PDF(),\n", "                    gr.File(),\n", "                    examples=[[str(current_dir / \"contract.pdf\")]])\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/gradio_pdf_demo/run.py

@@ -1,10 +1,13 @@
 import gradio as gr
 from gradio_pdf import PDF
+from pathlib import Path
 
+current_dir = Path(__file__).parent
 
 demo = gr.Interface(lambda x: x,
                     PDF(),
-                    gr.File())
+                    gr.File(),
+                    examples=[[str(current_dir / "contract.pdf")]])
 
 if __name__ == "__main__":
     demo.launch()

js/app/src/init.ts

@@ -118,12 +118,15 @@ export function create_components(): {
 			{} as { [id: number]: ComponentMeta }
 		);
 
-		walk_layout(layout).then(() => {
+		walk_layout(layout, root).then(() => {
 			layout_store.set(_rootNode);
 		});
 	}
 
-	async function walk_layout(node: LayoutNode): Promise<ComponentMeta> {
+	async function walk_layout(
+		node: LayoutNode,
+		root: string
+	): Promise<ComponentMeta> {
 		const instance = instance_map[node.id];
 
 		instance.component = (await constructor_map.get(
@@ -162,7 +165,7 @@ export function create_components(): {
 
 		if (node.children) {
 			instance.children = await Promise.all(
-				node.children.map((v) => walk_layout(v))
+				node.children.map((v) => walk_layout(v, root))
 			);
 		}
 

js/app/test/gradio_pdf_demo.spec.ts

@@ -19,3 +19,7 @@ test("Custom PDF component demo can be loaded and inference function works .", a
 	const download = await downloadPromise;
 	await expect(download.suggestedFilename()).toBe("contract.pdf");
 });
+
+test("Custom PDF component examples load properly .", async ({ page }) => {
+	expect(page.locator("canvas")).toBeVisible();
+});

test/requirements.txt

@@ -84,7 +84,7 @@ fsspec==2024.2.0
     #   torch
 gradio-client==0.10.0
     # via gradio
-gradio-pdf==0.0.3
+gradio-pdf==0.0.7
     # via -r requirements.in
 h11==0.12.0
     # via