From 1eb4c2012065c678d722477f3555ec45a9e78c14 Mon Sep 17 00:00:00 2001 From: pngwn Date: Mon, 8 Apr 2024 18:12:14 +0100 Subject: [PATCH] ensure kwargs are always in sync across the whole application (#7963) * ensure kwargs are always in sync across the whole application * add changeset * fix test * update accordion test --------- Co-authored-by: gradio-pr-bot --- .changeset/angry-states-juggle.md | 6 ++++++ demo/blocks_flipper/run.ipynb | 2 +- demo/blocks_flipper/run.py | 11 +++++++++-- js/app/build_plugins.ts | 7 +++---- js/app/src/RenderComponent.svelte | 4 +--- js/app/test/blocks_flipper.spec.ts | 7 ++++++- js/app/vite.config.ts | 2 +- 7 files changed, 27 insertions(+), 12 deletions(-) create mode 100644 .changeset/angry-states-juggle.md diff --git a/.changeset/angry-states-juggle.md b/.changeset/angry-states-juggle.md new file mode 100644 index 0000000000..38ddfda04c --- /dev/null +++ b/.changeset/angry-states-juggle.md @@ -0,0 +1,6 @@ +--- +"@gradio/app": patch +"gradio": patch +--- + +fix:ensure kwargs are always in sync across the whole application diff --git a/demo/blocks_flipper/run.ipynb b/demo/blocks_flipper/run.ipynb index 716f3af30f..c54cfb2704 100644 --- a/demo/blocks_flipper/run.ipynb +++ b/demo/blocks_flipper/run.ipynb @@ -1 +1 @@ -{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: blocks_flipper"]}, {"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 numpy as np\n", "import gradio as gr\n", "\n", "\n", "def flip_text(x):\n", " return x[::-1]\n", "\n", "\n", "def flip_image(x):\n", " return np.fliplr(x)\n", "\n", "\n", "with gr.Blocks() as demo:\n", " gr.Markdown(\"Flip text or image files using this demo.\")\n", " with gr.Tab(\"Flip Text\"):\n", " text_input = gr.Textbox()\n", " text_output = gr.Textbox()\n", " text_button = gr.Button(\"Flip\")\n", " with gr.Tab(\"Flip Image\"):\n", " with gr.Row():\n", " image_input = gr.Image()\n", " image_output = gr.Image()\n", " image_button = gr.Button(\"Flip\")\n", "\n", " with gr.Accordion(\"Open for More!\", open=False):\n", " gr.Markdown(\"Look at me...\")\n", " temp_slider = gr.Slider(minimum=0.0, maximum=1.0, value=0.1, step=0.1, interactive=True, label=\"Slide me\")\n", " temp_slider.change(lambda x:x, [temp_slider])\n", "\n", " text_button.click(flip_text, inputs=text_input, outputs=text_output)\n", " image_button.click(flip_image, inputs=image_input, outputs=image_output)\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5} \ No newline at end of file +{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: blocks_flipper"]}, {"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 numpy as np\n", "import gradio as gr\n", "\n", "\n", "def flip_text(x):\n", " return x[::-1]\n", "\n", "\n", "def flip_image(x):\n", " return np.fliplr(x)\n", "\n", "\n", "with gr.Blocks() as demo:\n", " gr.Markdown(\"Flip text or image files using this demo.\")\n", " with gr.Tab(\"Flip Text\"):\n", " text_input = gr.Textbox()\n", " text_output = gr.Textbox()\n", " text_button = gr.Button(\"Flip\")\n", " with gr.Tab(\"Flip Image\"):\n", " with gr.Row():\n", " image_input = gr.Image()\n", " image_output = gr.Image()\n", " image_button = gr.Button(\"Flip\")\n", "\n", " with gr.Accordion(\"Open for More!\", open=False):\n", " gr.Markdown(\"Look at me...\")\n", " temp_slider = gr.Slider(\n", " minimum=0.0,\n", " maximum=1.0,\n", " value=0.1,\n", " step=0.1,\n", " interactive=True,\n", " label=\"Slide me\",\n", " )\n", " temp_slider.change(lambda x: x, [temp_slider])\n", "\n", " text_button.click(flip_text, inputs=text_input, outputs=text_output)\n", " image_button.click(flip_image, inputs=image_input, outputs=image_output)\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5} \ No newline at end of file diff --git a/demo/blocks_flipper/run.py b/demo/blocks_flipper/run.py index 6bcdb5987c..1af65ea291 100644 --- a/demo/blocks_flipper/run.py +++ b/demo/blocks_flipper/run.py @@ -24,8 +24,15 @@ with gr.Blocks() as demo: with gr.Accordion("Open for More!", open=False): gr.Markdown("Look at me...") - temp_slider = gr.Slider(minimum=0.0, maximum=1.0, value=0.1, step=0.1, interactive=True, label="Slide me") - temp_slider.change(lambda x:x, [temp_slider]) + temp_slider = gr.Slider( + minimum=0.0, + maximum=1.0, + value=0.1, + step=0.1, + interactive=True, + label="Slide me", + ) + temp_slider.change(lambda x: x, [temp_slider]) text_button.click(flip_text, inputs=text_input, outputs=text_output) image_button.click(flip_image, inputs=image_input, outputs=image_output) diff --git a/js/app/build_plugins.ts b/js/app/build_plugins.ts index c51e142f3c..4f58bea666 100644 --- a/js/app/build_plugins.ts +++ b/js/app/build_plugins.ts @@ -72,10 +72,9 @@ export function generate_dev_entry({ enable }: { enable: boolean }): Plugin { if (!enable) return; const new_code = code.replace(RE_SVELTE_IMPORT, (str, $1, $2) => { - return `const ${$1.replace( - / as /g, - ": " - )} = window.__gradio__svelte__internal;`; + return `const ${$1 + .replace(/\* as /, "") + .replace(/ as /g, ": ")} = window.__gradio__svelte__internal;`; }); return { diff --git a/js/app/src/RenderComponent.svelte b/js/app/src/RenderComponent.svelte index dcb1080528..d0ee81f026 100644 --- a/js/app/src/RenderComponent.svelte +++ b/js/app/src/RenderComponent.svelte @@ -28,9 +28,7 @@ construct(_target, args: Record[]) { //@ts-ignore const instance = new _target(...args); - const props = Object.getOwnPropertyNames(instance).filter( - (s) => !s.startsWith("$") - ); + const props = Object.keys(instance.$$.props); function report(props: string) { return function (propargs: any) { diff --git a/js/app/test/blocks_flipper.spec.ts b/js/app/test/blocks_flipper.spec.ts index 8dcb3e99d4..672277683f 100644 --- a/js/app/test/blocks_flipper.spec.ts +++ b/js/app/test/blocks_flipper.spec.ts @@ -4,6 +4,11 @@ test("accordion stays open when interacting with the slider", async ({ page }) => { await page.getByRole("button", { name: "Open for More! ▼" }).click(); - await page.getByLabel("range slider for Slide me").fill("0.5"); + + await page.getByLabel("Textbox").nth(0).fill("123"); + + await page.getByRole("button", { name: "Flip" }).click(); + await expect(page.getByLabel("Textbox").nth(1)).toHaveValue("321"); + await expect(page.getByText("Look at me...")).toBeVisible(); }); diff --git a/js/app/vite.config.ts b/js/app/vite.config.ts index a9d7580e2d..ca4251b808 100644 --- a/js/app/vite.config.ts +++ b/js/app/vite.config.ts @@ -139,7 +139,7 @@ export default defineConfig(({ mode }) => { compilerOptions: { dev: true, discloseVersion: false, - accessors: mode === "test" + accessors: true }, hot: !process.env.VITEST && !production, preprocess: sveltePreprocess({