@gradio/core 1.4.0 → 1.4.1

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @gradio/core
 
+## 1.4.1
+
+### Fixes
+
+- [#12566](https://github.com/gradio-app/gradio/pull/12566) [`7760161`](https://github.com/gradio-app/gradio/commit/7760161258abe6329b754dd6d2511fc3b61fed95) - Fix custom components in SSR Mode + Custom Component Examples.  Thanks @freddyaboulton!
+- [#12803](https://github.com/gradio-app/gradio/pull/12803) [`f4c3a6d`](https://github.com/gradio-app/gradio/commit/f4c3a6dcb45218722d3150baef953c731d3eccf2) - fix: gradio_api path in mount_gradio_app.  Thanks @shandowc!
+
+### Dependency updates
+
+- @gradio/utils@0.12.1
+- @gradio/statustracker@0.13.0
+- @gradio/gallery@0.17.4
+- @gradio/plot@0.10.6
+- @gradio/textbox@0.13.6
+- @gradio/html@0.12.0
+- @gradio/button@0.6.6
+- @gradio/code@0.17.5
+- @gradio/paramviewer@0.9.6
+- @gradio/checkbox@0.6.5
+- @gradio/image@0.26.0
+- @gradio/video@0.20.5
+- @gradio/file@0.14.5
+- @gradio/audio@0.23.0
+- @gradio/column@0.3.2
+- @gradio/dropdown@0.11.6
+
 ## 1.4.0
 
 ### Features

package/dist/src/init.svelte.d.ts

@@ -15,6 +15,7 @@ type Tab = {
     order?: number;
     component_id: number;
 };
+export declare function get_api_url(config: Omit<AppConfig, "api_url">): string;
 export declare class AppTree {
     #private;
     /** Need this to set i18n in re-render */

package/dist/src/init.svelte.js

@@ -8,6 +8,19 @@ const type_map = {
     walkthrough: "tabs",
     walkthroughstep: "tabitem"
 };
+export function get_api_url(config) {
+    // Handle api_prefix correctly when app is mounted at a subpath.
+    // config.root may not include a trailing slash, so we normalize its pathname
+    // before appending api_prefix to ensure correct URL construction.
+    const rootUrl = new URL(config.root);
+    const rootPath = rootUrl.pathname.endsWith("/")
+        ? rootUrl.pathname
+        : rootUrl.pathname + "/";
+    const apiPrefix = config.api_prefix.startsWith("/")
+        ? config.api_prefix
+        : "/" + config.api_prefix;
+    return new URL(rootPath.slice(0, -1) + apiPrefix, rootUrl.origin).toString();
+}
 export class AppTree {
     /** the raw component structure received from the backend */
     #component_payload;
@@ -45,9 +58,10 @@ export class AppTree {
             this.ready_resolve = resolve;
         });
         this.reactive_formatter = reactive_formatter;
+        const api_url = get_api_url(config);
         this.#config = {
             ...config,
-            api_url: new URL(config.api_prefix, config.root).toString()
+            api_url
         };
         this.#component_payload = components;
         this.#layout_payload = layout;
@@ -77,9 +91,10 @@ export class AppTree {
     reload(components, layout, dependencies, config) {
         this.#layout_payload = layout;
         this.#component_payload = components;
+        const api_url = get_api_url(config);
         this.#config = {
             ...config,
-            api_url: new URL(config.api_prefix, config.root).toString()
+            api_url
         };
         this.#dependency_payload = dependencies;
         this.root = this.create_node({ id: layout.id, children: [] }, new Map(), true);
@@ -469,7 +484,7 @@ function gather_props(id, props, dependencies, client, api_url, additional = {})
     _shared_props.client = client;
     _shared_props.id = id;
     _shared_props.interactive = determine_interactivity(id, _shared_props.interactive, _props.value, dependencies);
-    _shared_props.load_component = (name, variant) => get_component(name, "", api_url, variant).component;
+    _shared_props.load_component = (name, variant, component_class_id) => get_component(name, component_class_id || "", api_url, variant);
     _shared_props.visible =
         _shared_props.visible === undefined ? true : _shared_props.visible;
     _shared_props.loading_status = {};

package/dist/src/init.test.skip.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/init.test.skip.js

@@ -0,0 +1,627 @@
+import { describe, test, expect, vi } from "vitest";
+import { spy } from "tinyspy";
+import { setupWorker } from "msw/browser";
+import { http, HttpResponse } from "msw";
+import { Dependency, TargetMap } from "./types";
+import { process_frontend_fn, create_target_meta, determine_interactivity, process_server_fn, get_component } from "./_init";
+import { get_api_url } from "./init.svelte";
+import { commands } from "@vitest/browser/context";
+describe("process_frontend_fn", () => {
+    test("empty source code returns null", () => {
+        const source = "";
+        const fn = process_frontend_fn(source, false, 1, 1);
+        expect(fn).toBe(null);
+    });
+    test("falsey source code returns null: false", () => {
+        const source = false;
+        const fn = process_frontend_fn(source, false, 1, 1);
+        expect(fn).toBe(null);
+    });
+    test("falsey source code returns null: undefined", () => {
+        const source = undefined;
+        const fn = process_frontend_fn(source, false, 1, 1);
+        expect(fn).toBe(null);
+    });
+    test("falsey source code returns null: null", () => {
+        const source = null;
+        const fn = process_frontend_fn(source, false, 1, 1);
+        expect(fn).toBe(null);
+    });
+    test("source code returns a function", () => {
+        const source = "(arg) => arg";
+        const fn = process_frontend_fn(source, false, 1, 1);
+        expect(typeof fn).toBe("function");
+    });
+    test("arrays of values can be passed to the generated function", async () => {
+        const source = "(arg) => arg";
+        const fn = process_frontend_fn(source, false, 1, 1);
+        if (fn) {
+            await expect(fn([1])).resolves.toEqual([1]);
+        }
+    });
+    test("arrays of many values can be passed", async () => {
+        const source = "(...args) => args";
+        const fn = process_frontend_fn(source, false, 1, 1);
+        if (fn) {
+            await expect(fn([1, 2, 3, 4, 5, 6])).resolves.toEqual([1, 2, 3, 4, 5, 6]);
+        }
+    });
+    test("The generated function returns a promise", () => {
+        const source = "(arg) => arg";
+        const fn = process_frontend_fn(source, false, 1, 1);
+        if (fn) {
+            expect(fn([1])).toBeInstanceOf(Promise);
+        }
+    });
+    test("The generated function is callable and returns the expected value", async () => {
+        const source = "(arg) => arg";
+        const fn = process_frontend_fn(source, false, 1, 1);
+        if (fn) {
+            await expect(fn([1])).resolves.toEqual([1]);
+        }
+    });
+    test("The return value of the function is wrapped in an array if there is no backend function and the input length is 1", async () => {
+        const source = "(arg) => arg";
+        const fn = process_frontend_fn(source, false, 1, 1);
+        if (fn) {
+            await expect(fn([1])).resolves.toEqual([1]);
+        }
+    });
+    test("The return value of the function is not wrapped in an array if there is no backend function and the input length is greater than 1", async () => {
+        const source = "(arg) => arg";
+        const fn = process_frontend_fn(source, false, 2, 2);
+        if (fn) {
+            await expect(fn([1])).resolves.toEqual(1);
+        }
+    });
+    test("The return value of the function is wrapped in an array if there is a backend function and the input length is 1", async () => {
+        const source = "(arg) => arg";
+        const fn = process_frontend_fn(source, true, 1, 1);
+        if (fn) {
+            await expect(fn([1])).resolves.toEqual([1]);
+        }
+    });
+    test("The return value of the function is not wrapped in an array if there is a backend function and the input length is greater than 1", async () => {
+        const source = "(arg) => arg";
+        const fn = process_frontend_fn(source, true, 2, 2);
+        if (fn) {
+            await expect(fn([1])).resolves.toEqual(1);
+        }
+    });
+});
+describe("create_target_meta", () => {
+    test("creates a target map", () => {
+        const targets = [
+            [1, "change"],
+            [2, "input"],
+            [3, "load"]
+        ];
+        const fn_index = 0;
+        const target_map = {};
+        const result = create_target_meta(targets, fn_index, target_map);
+        expect(result).toEqual({
+            1: { change: [0] },
+            2: { input: [0] },
+            3: { load: [0] }
+        });
+    });
+    test("if the target already exists, it adds the new trigger to the list", () => {
+        const targets = [
+            [1, "change"],
+            [1, "input"],
+            [1, "load"]
+        ];
+        const fn_index = 1;
+        const target_map = {
+            1: { change: [0] }
+        };
+        const result = create_target_meta(targets, fn_index, target_map);
+        expect(result).toEqual({
+            1: { change: [0, 1], input: [1], load: [1] }
+        });
+    });
+    test("if the trigger already exists, it adds the new function to the list", () => {
+        const targets = [
+            [1, "change"],
+            [2, "change"],
+            [3, "change"]
+        ];
+        const fn_index = 1;
+        const target_map = {
+            1: { change: [0] },
+            2: { change: [0] },
+            3: { change: [0] }
+        };
+        const result = create_target_meta(targets, fn_index, target_map);
+        expect(result).toEqual({
+            1: { change: [0, 1] },
+            2: { change: [0, 1] },
+            3: { change: [0, 1] }
+        });
+    });
+    test("if the target and trigger already exist, it adds the new function to the list", () => {
+        const targets = [[1, "change"]];
+        const fn_index = 1;
+        const target_map = {
+            1: { change: [0] }
+        };
+        const result = create_target_meta(targets, fn_index, target_map);
+        expect(result).toEqual({
+            1: { change: [0, 1] }
+        });
+    });
+    test("if the target, trigger and function id already exist, it does not add duplicates", () => {
+        const targets = [[1, "change"]];
+        const fn_index = 0;
+        const target_map = {
+            1: { change: [0] }
+        };
+        const result = create_target_meta(targets, fn_index, target_map);
+        expect(result).toEqual({
+            1: { change: [0] }
+        });
+    });
+});
+describe("determine_interactivity", () => {
+    test("returns true if the prop is interactive = true", () => {
+        const result = determine_interactivity(0, true, "hi", new Set([0]), new Set([2]));
+        expect(result).toBe(true);
+    });
+    test("returns false if the prop is interactive = false", () => {
+        const result = determine_interactivity(0, false, "hi", new Set([0]), new Set([2]));
+        expect(result).toBe(false);
+    });
+    test("returns true if the component is an input", () => {
+        const result = determine_interactivity(0, undefined, "hi", new Set([0]), new Set([2]));
+        expect(result).toBe(true);
+    });
+    test("returns true if the component is not an input or output and the component has no default value: empty string", () => {
+        const result = determine_interactivity(2, undefined, "", new Set([0]), new Set([1]));
+        expect(result).toBe(true);
+    });
+    test("returns true if the component is not an input or output and the component has no default value: empty array", () => {
+        const result = determine_interactivity(2, undefined, [], new Set([0]), new Set([1]));
+        expect(result).toBe(true);
+    });
+    test("returns true if the component is not an input or output and the component has no default value: boolean", () => {
+        const result = determine_interactivity(2, undefined, false, new Set([0]), new Set([1]));
+        expect(result).toBe(true);
+    });
+    test("returns true if the component is not an input or output and the component has no default value: undefined", () => {
+        const result = determine_interactivity(2, undefined, undefined, new Set([0]), new Set([1]));
+        expect(result).toBe(true);
+    });
+    test("returns true if the component is not an input or output and the component has no default value: null", () => {
+        const result = determine_interactivity(2, undefined, null, new Set([0]), new Set([1]));
+        expect(result).toBe(true);
+    });
+    test("returns true if the component is not an input or output and the component has no default value: 0", () => {
+        const result = determine_interactivity(2, undefined, 0, new Set([0]), new Set([1]));
+        expect(result).toBe(true);
+    });
+    test("returns false if the component is not an input or output and the component has a default value", () => {
+        const result = determine_interactivity(2, undefined, "hello", new Set([0]), new Set([1]));
+        expect(result).toBe(false);
+    });
+});
+describe("process_server_fn", () => {
+    test("returns an object", () => {
+        const result = process_server_fn(1, ["fn1", "fn2"], {});
+        expect(result).toBeTypeOf("object");
+    });
+    test("returns an object with the correct keys", () => {
+        const result = process_server_fn(1, ["fn1", "fn2"], {});
+        expect(Object.keys(result)).toEqual(["fn1", "fn2"]);
+    });
+    test("returns an object with the correct keys and values", () => {
+        const app = {
+            component_server: async (id, fn, args) => {
+                return args;
+            }
+        };
+        const result = process_server_fn(1, ["fn1", "fn2"], app);
+        expect(Object.keys(result)).toEqual(["fn1", "fn2"]);
+        expect(result.fn1).toBeInstanceOf(Function);
+        expect(result.fn2).toBeInstanceOf(Function);
+    });
+    test("returned server functions should resolve to a promise", async () => {
+        const app = {
+            component_server: async (id, fn, args) => {
+                return args;
+            }
+        };
+        const result = process_server_fn(1, ["fn1", "fn2"], app);
+        const response = result.fn1("hello");
+        expect(response).toBeInstanceOf(Promise);
+    });
+    test("the functions call the clients component_server function with the correct arguments ", async () => {
+        const mock = spy(async (id, fn, args) => {
+            return args;
+        });
+        const app = {
+            component_server: mock
+        };
+        const result = process_server_fn(1, ["fn1", "fn2"], app);
+        const response = await result.fn1("hello");
+        expect(response).toBe("hello");
+        expect(mock.calls).toEqual([[1, "fn1", "hello"]]);
+    });
+    test("if there are no server functions, it returns an empty object", () => {
+        const result = process_server_fn(1, undefined, {});
+        expect(result).toEqual({});
+    });
+});
+describe("get_component", () => {
+    test("returns an object", () => {
+        const result = get_component("test-component-one", "class_id", "root", []);
+        expect(result.component).toBeTypeOf("object");
+    });
+    test("returns an object with the correct keys", () => {
+        const result = get_component("test-component-one", "class_id", "root", []);
+        expect(Object.keys(result)).toEqual([
+            "component",
+            "name",
+            "example_components"
+        ]);
+    });
+    test("the component key is a promise", () => {
+        const result = get_component("test-component-one", "class_id", "root", []);
+        expect(result.component).toBeInstanceOf(Promise);
+    });
+    test("the resolved component key is an object", async () => {
+        const result = get_component("test-component-one", "class_id", "root", []);
+        const o = await result.component;
+        expect(o).toBeTypeOf("object");
+    });
+    test("getting the same component twice should return the same promise", () => {
+        const result = get_component("test-component-one", "class_id", "root", []);
+        const result_two = get_component("test-component-one", "class_id", "root", []);
+        expect(result.component).toBe(result_two.component);
+    });
+    test("if example components are not provided, the  example_components key is undefined", async () => {
+        const result = get_component("dataset", "class_id", "root", []);
+        expect(result.example_components).toBe(undefined);
+    });
+    test("if the type is not a dataset, the  example_components key is undefined", async () => {
+        const result = get_component("test-component-one", "class_id", "root", []);
+        expect(result.example_components).toBe(undefined);
+    });
+    test("when the type is a dataset, returns an object with the correct keys and values and example components", () => {
+        const result = get_component("dataset", "class_id", "root", [
+            {
+                type: "test-component-one",
+                component_class_id: "example_class_id",
+                id: 1,
+                props: {
+                    value: "hi",
+                    interactive: false
+                },
+                has_modes: false,
+                instance: {},
+                component: {}
+            }
+        ], ["test-component-one"]);
+        expect(result.component).toBeTypeOf("object");
+        expect(result.example_components).toBeInstanceOf(Map);
+    });
+    test("when example components are returned, returns an object with the correct keys and values and example components", () => {
+        const result = get_component("dataset", "class_id", "root", [
+            {
+                type: "test-component-one",
+                component_class_id: "example_class_id",
+                id: 1,
+                props: {
+                    value: "hi",
+                    interactive: false
+                },
+                key: "test-component-one",
+                has_modes: false,
+                instance: {},
+                component: {}
+            }
+        ], ["test-component-one"]);
+        expect(result.example_components?.get("test-component-one")).toBeTypeOf("object");
+        expect(result.example_components?.get("test-component-one")).toBeInstanceOf(Promise);
+    });
+    test.skip("if the component is not found then it should request the component from the server", async () => {
+        const api_url = "example.com";
+        const id = "test-random";
+        const variant = "component";
+        const handlers = [
+            http.get(`${api_url}/custom_component/${id}/client/${variant}/style.css`, () => {
+                return new HttpResponse('console.log("boo")', {
+                    status: 200,
+                    headers: {
+                        "Content-Type": "text/css"
+                    }
+                });
+            })
+        ];
+        // vi.mock calls are always hoisted out of the test function to the top of the file
+        // so we need to use vi.hoisted to hoist the mock function above the vi.mock call
+        const { mock } = vi.hoisted(() => {
+            return { mock: vi.fn() };
+        });
+        vi.mock(`example.com/custom_component/test-random/client/component/index.js`, async () => {
+            mock();
+            return {
+                default: {
+                    default: "HELLO"
+                }
+            };
+        });
+        const worker = setupWorker(...handlers);
+        worker.start();
+        await get_component("test-random", id, api_url, []).component;
+        expect(mock).toHaveBeenCalled();
+        worker.stop();
+    });
+});
+describe("get_api_url", () => {
+    describe("root URL with trailing slash", () => {
+        test("root with trailing slash, api_prefix with leading slash", () => {
+            const config = {
+                root: "http://example.com/myapp/",
+                api_prefix: "/api",
+                theme: "default",
+                version: "1.0.0",
+                autoscroll: true
+            };
+            const result = get_api_url(config);
+            expect(result).toBe("http://example.com/myapp/api");
+        });
+        test("root with trailing slash, api_prefix without leading slash", () => {
+            const config = {
+                root: "http://example.com/myapp/",
+                api_prefix: "api",
+                theme: "default",
+                version: "1.0.0",
+                autoscroll: true
+            };
+            const result = get_api_url(config);
+            expect(result).toBe("http://example.com/myapp/api");
+        });
+        test("root at domain root with trailing slash", () => {
+            const config = {
+                root: "http://example.com/",
+                api_prefix: "/api",
+                theme: "default",
+                version: "1.0.0",
+                autoscroll: true
+            };
+            const result = get_api_url(config);
+            expect(result).toBe("http://example.com/api");
+        });
+    });
+    describe("root URL without trailing slash", () => {
+        test("root without trailing slash, api_prefix with leading slash", () => {
+            const config = {
+                root: "http://example.com/myapp",
+                api_prefix: "/api",
+                theme: "default",
+                version: "1.0.0",
+                autoscroll: true
+            };
+            const result = get_api_url(config);
+            expect(result).toBe("http://example.com/myapp/api");
+        });
+        test("root without trailing slash, api_prefix without leading slash", () => {
+            const config = {
+                root: "http://example.com/myapp",
+                api_prefix: "api",
+                theme: "default",
+                version: "1.0.0",
+                autoscroll: true
+            };
+            const result = get_api_url(config);
+            expect(result).toBe("http://example.com/myapp/api");
+        });
+        test("root at domain root without trailing slash", () => {
+            const config = {
+                root: "http://example.com",
+                api_prefix: "/api",
+                theme: "default",
+                version: "1.0.0",
+                autoscroll: true
+            };
+            const result = get_api_url(config);
+            expect(result).toBe("http://example.com/api");
+        });
+    });
+    describe("different root path combinations", () => {
+        test("root path is just '/'", () => {
+            const config = {
+                root: "http://example.com/",
+                api_prefix: "/api",
+                theme: "default",
+                version: "1.0.0",
+                autoscroll: true
+            };
+            const result = get_api_url(config);
+            expect(result).toBe("http://example.com/api");
+        });
+        test("root path is '/' without trailing slash", () => {
+            const config = {
+                root: "http://example.com",
+                api_prefix: "/api",
+                theme: "default",
+                version: "1.0.0",
+                autoscroll: true
+            };
+            const result = get_api_url(config);
+            expect(result).toBe("http://example.com/api");
+        });
+        test("root path is '/myapp'", () => {
+            const config = {
+                root: "http://example.com/myapp",
+                api_prefix: "/api",
+                theme: "default",
+                version: "1.0.0",
+                autoscroll: true
+            };
+            const result = get_api_url(config);
+            expect(result).toBe("http://example.com/myapp/api");
+        });
+        test("root path is '/myapp/'", () => {
+            const config = {
+                root: "http://example.com/myapp/",
+                api_prefix: "/api",
+                theme: "default",
+                version: "1.0.0",
+                autoscroll: true
+            };
+            const result = get_api_url(config);
+            expect(result).toBe("http://example.com/myapp/api");
+        });
+        test("root path is '/deep/nested/path'", () => {
+            const config = {
+                root: "http://example.com/deep/nested/path",
+                api_prefix: "/api",
+                theme: "default",
+                version: "1.0.0",
+                autoscroll: true
+            };
+            const result = get_api_url(config);
+            expect(result).toBe("http://example.com/deep/nested/path/api");
+        });
+        test("root path is '/deep/nested/path/'", () => {
+            const config = {
+                root: "http://example.com/deep/nested/path/",
+                api_prefix: "/api",
+                theme: "default",
+                version: "1.0.0",
+                autoscroll: true
+            };
+            const result = get_api_url(config);
+            expect(result).toBe("http://example.com/deep/nested/path/api");
+        });
+    });
+    describe("different api_prefix formats", () => {
+        test("api_prefix with leading slash", () => {
+            const config = {
+                root: "http://example.com/myapp",
+                api_prefix: "/api",
+                theme: "default",
+                version: "1.0.0",
+                autoscroll: true
+            };
+            const result = get_api_url(config);
+            expect(result).toBe("http://example.com/myapp/api");
+        });
+        test("api_prefix without leading slash", () => {
+            const config = {
+                root: "http://example.com/myapp",
+                api_prefix: "api",
+                theme: "default",
+                version: "1.0.0",
+                autoscroll: true
+            };
+            const result = get_api_url(config);
+            expect(result).toBe("http://example.com/myapp/api");
+        });
+        test("api_prefix with nested path and leading slash", () => {
+            const config = {
+                root: "http://example.com/myapp",
+                api_prefix: "/api/v1",
+                theme: "default",
+                version: "1.0.0",
+                autoscroll: true
+            };
+            const result = get_api_url(config);
+            expect(result).toBe("http://example.com/myapp/api/v1");
+        });
+        test("api_prefix with nested path without leading slash", () => {
+            const config = {
+                root: "http://example.com/myapp",
+                api_prefix: "api/v1",
+                theme: "default",
+                version: "1.0.0",
+                autoscroll: true
+            };
+            const result = get_api_url(config);
+            expect(result).toBe("http://example.com/myapp/api/v1");
+        });
+    });
+    describe("edge cases", () => {
+        test("root with port number", () => {
+            const config = {
+                root: "http://example.com:8080/myapp",
+                api_prefix: "/api",
+                theme: "default",
+                version: "1.0.0",
+                autoscroll: true
+            };
+            const result = get_api_url(config);
+            expect(result).toBe("http://example.com:8080/myapp/api");
+        });
+        test("root with HTTPS", () => {
+            const config = {
+                root: "https://example.com/myapp",
+                api_prefix: "/api",
+                theme: "default",
+                version: "1.0.0",
+                autoscroll: true
+            };
+            const result = get_api_url(config);
+            expect(result).toBe("https://example.com/myapp/api");
+        });
+        test("root with query parameters (should be ignored)", () => {
+            const config = {
+                root: "http://example.com/myapp?param=value",
+                api_prefix: "/api",
+                theme: "default",
+                version: "1.0.0",
+                autoscroll: true
+            };
+            const result = get_api_url(config);
+            expect(result).toBe("http://example.com/myapp/api");
+        });
+        test("root with hash (should be ignored)", () => {
+            const config = {
+                root: "http://example.com/myapp#section",
+                api_prefix: "/api",
+                theme: "default",
+                version: "1.0.0",
+                autoscroll: true
+            };
+            const result = get_api_url(config);
+            expect(result).toBe("http://example.com/myapp/api");
+        });
+    });
+    describe("consistency checks", () => {
+        test("same result regardless of root trailing slash", () => {
+            const baseConfig = {
+                api_prefix: "/api",
+                theme: "default",
+                version: "1.0.0",
+                autoscroll: true
+            };
+            const config1 = {
+                ...baseConfig,
+                root: "http://example.com/myapp"
+            };
+            const config2 = {
+                ...baseConfig,
+                root: "http://example.com/myapp/"
+            };
+            expect(get_api_url(config1)).toBe(get_api_url(config2));
+        });
+        test("same result regardless of api_prefix leading slash", () => {
+            const baseConfig = {
+                root: "http://example.com/myapp",
+                theme: "default",
+                version: "1.0.0",
+                autoscroll: true
+            };
+            const config1 = {
+                ...baseConfig,
+                api_prefix: "/api"
+            };
+            const config2 = {
+                ...baseConfig,
+                api_prefix: "api"
+            };
+            expect(get_api_url(config1)).toBe(get_api_url(config2));
+        });
+    });
+});

package/package.json

@@ -1,67 +1,67 @@
 {
   "name": "@gradio/core",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "type": "module",
   "devDependencies": {
-    "@gradio/accordion": "^0.5.32",
-    "@gradio/annotatedimage": "^0.11.4",
-    "@gradio/audio": "^0.22.4",
+    "@gradio/accordion": "^0.5.33",
     "@gradio/atoms": "^0.22.2",
+    "@gradio/annotatedimage": "^0.11.5",
+    "@gradio/audio": "^0.23.0",
     "@gradio/box": "^0.2.30",
-    "@gradio/button": "^0.6.5",
     "@gradio/browserstate": "^0.3.7",
-    "@gradio/chatbot": "^0.29.5",
-    "@gradio/checkbox": "^0.6.4",
-    "@gradio/checkboxgroup": "^0.9.4",
+    "@gradio/button": "^0.6.6",
+    "@gradio/chatbot": "^0.29.6",
+    "@gradio/checkbox": "^0.6.5",
+    "@gradio/checkboxgroup": "^0.10.0",
+    "@gradio/code": "^0.17.5",
     "@gradio/client": "^2.1.0",
-    "@gradio/code": "^0.17.4",
-    "@gradio/colorpicker": "^0.5.7",
     "@gradio/column": "^0.3.2",
-    "@gradio/datetime": "^0.4.4",
-    "@gradio/dataframe": "^0.21.7",
+    "@gradio/dataframe": "^0.22.0",
+    "@gradio/dataset": "^0.5.6",
+    "@gradio/colorpicker": "^0.5.8",
+    "@gradio/datetime": "^0.4.5",
     "@gradio/downloadbutton": "^0.4.18",
-    "@gradio/dataset": "^0.5.5",
-    "@gradio/dropdown": "^0.11.5",
-    "@gradio/file": "^0.14.4",
-    "@gradio/fallback": "^0.4.35",
-    "@gradio/fileexplorer": "^0.6.4",
-    "@gradio/gallery": "^0.17.3",
+    "@gradio/dropdown": "^0.11.6",
+    "@gradio/fallback": "^0.4.36",
+    "@gradio/file": "^0.14.5",
+    "@gradio/fileexplorer": "^0.6.5",
     "@gradio/form": "^0.3.1",
+    "@gradio/gallery": "^0.17.4",
     "@gradio/group": "^0.3.3",
-    "@gradio/html": "^0.11.1",
-    "@gradio/highlightedtext": "^0.11.3",
+    "@gradio/highlightedtext": "^0.11.4",
+    "@gradio/html": "^0.12.0",
     "@gradio/icons": "^0.15.1",
-    "@gradio/image": "^0.25.4",
-    "@gradio/imageeditor": "^0.18.7",
-    "@gradio/imageslider": "^0.4.4",
-    "@gradio/json": "^0.7.3",
-    "@gradio/label": "^0.6.4",
-    "@gradio/markdown": "^0.13.29",
-    "@gradio/multimodaltextbox": "^0.11.7",
-    "@gradio/number": "^0.8.4",
-    "@gradio/nativeplot": "^0.10.3",
-    "@gradio/paramviewer": "^0.9.5",
-    "@gradio/model3d": "^0.16.5",
-    "@gradio/plot": "^0.10.5",
-    "@gradio/sidebar": "^0.2.4",
-    "@gradio/radio": "^0.9.4",
-    "@gradio/simpledropdown": "^0.3.35",
-    "@gradio/simpleimage": "^0.9.6",
-    "@gradio/simpletextbox": "^0.3.37",
+    "@gradio/imageeditor": "^0.18.8",
+    "@gradio/image": "^0.26.0",
+    "@gradio/imageslider": "^0.4.5",
+    "@gradio/json": "^0.7.4",
+    "@gradio/model3d": "^0.16.6",
+    "@gradio/markdown": "^0.13.30",
+    "@gradio/multimodaltextbox": "^0.11.8",
+    "@gradio/label": "^0.6.5",
+    "@gradio/nativeplot": "^0.10.4",
+    "@gradio/number": "^0.8.5",
+    "@gradio/radio": "^0.10.0",
+    "@gradio/plot": "^0.10.6",
+    "@gradio/paramviewer": "^0.9.6",
     "@gradio/row": "^0.3.1",
+    "@gradio/simpleimage": "^0.9.7",
+    "@gradio/simpledropdown": "^0.3.36",
+    "@gradio/simpletextbox": "^0.3.38",
+    "@gradio/sidebar": "^0.2.5",
     "@gradio/state": "^0.2.3",
-    "@gradio/slider": "^0.7.7",
-    "@gradio/tabitem": "^0.6.6",
-    "@gradio/statustracker": "^0.12.5",
-    "@gradio/textbox": "^0.13.5",
+    "@gradio/slider": "^0.7.8",
+    "@gradio/statustracker": "^0.13.0",
     "@gradio/tabs": "^0.5.8",
+    "@gradio/tabitem": "^0.6.6",
+    "@gradio/textbox": "^0.13.6",
     "@gradio/theme": "^0.6.1",
     "@gradio/timer": "^0.4.9",
     "@gradio/upload": "^0.17.7",
-    "@gradio/utils": "^0.12.0",
+    "@gradio/utils": "^0.12.1",
     "@gradio/uploadbutton": "^0.9.18",
-    "@gradio/video": "^0.20.4",
-    "@gradio/vibeeditor": "^0.3.6"
+    "@gradio/vibeeditor": "^0.3.7",
+    "@gradio/video": "^0.20.5"
   },
   "msw": {
     "workerDirectory": "public"

package/src/i18n.test.ts

@@ -8,8 +8,31 @@ import {
 	afterEach
 } from "vitest";
 import { Lang, process_langs } from "./i18n";
-import languagesByAnyCode from "wikidata-lang/indexes/by_any_code";
+// wikidata-lang/indexes/by_any_code uses Node.js createRequire internally.
+// Import the raw JSON data and build the index directly for browser compatibility.
+import languages from "wikidata-lang/data/languages.json";
 import BCP47 from "./lang/BCP47_codes";
+
+const languagesByAnyCode: Record<string, any[]> = {};
+for (const langData of languages) {
+	for (const codeName of [
+		"wmCode",
+		"iso6391",
+		"iso6392",
+		"iso6393",
+		"iso6396"
+	]) {
+		const codes = (langData as Record<string, any>)[codeName];
+		if (!codes) continue;
+		for (const code of codes) {
+			if (languagesByAnyCode[code] == null) {
+				languagesByAnyCode[code] = [langData];
+			} else if (!languagesByAnyCode[code].includes(langData)) {
+				languagesByAnyCode[code].push(langData);
+			}
+		}
+	}
+}
 import {
 	get_initial_locale,
 	load_translations,
@@ -25,7 +48,10 @@ vi.mock("svelte-i18n", () => ({
 	locale: { set: vi.fn() },
 	_: vi.fn((key) => `translated_${key}`),
 	addMessages: vi.fn(),
-	init: vi.fn().mockResolvedValue(undefined)
+	init: vi.fn().mockResolvedValue(undefined),
+	getLocaleFromNavigator: vi.fn(() => "en"),
+	register: vi.fn(),
+	waitLocale: vi.fn().mockResolvedValue(undefined)
 }));
 
 const mock_translations: Record<string, string> = {

package/src/init.svelte.ts

@@ -40,6 +40,20 @@ const type_map = {
 	walkthrough: "tabs",
 	walkthroughstep: "tabitem"
 };
+
+export function get_api_url(config: Omit<AppConfig, "api_url">): string {
+	// Handle api_prefix correctly when app is mounted at a subpath.
+	// config.root may not include a trailing slash, so we normalize its pathname
+	// before appending api_prefix to ensure correct URL construction.
+	const rootUrl = new URL(config.root);
+	const rootPath = rootUrl.pathname.endsWith("/")
+		? rootUrl.pathname
+		: rootUrl.pathname + "/";
+	const apiPrefix = config.api_prefix.startsWith("/")
+		? config.api_prefix
+		: "/" + config.api_prefix;
+	return new URL(rootPath.slice(0, -1) + apiPrefix, rootUrl.origin).toString();
+}
 export class AppTree {
 	/** the raw component structure received from the backend */
 	#component_payload: ComponentMeta[];
@@ -91,9 +105,10 @@ export class AppTree {
 			this.ready_resolve = resolve;
 		});
 		this.reactive_formatter = reactive_formatter;
+		const api_url = get_api_url(config);
 		this.#config = {
 			...config,
-			api_url: new URL(config.api_prefix, config.root).toString()
+			api_url
 		};
 		this.#component_payload = components;
 		this.#layout_payload = layout;
@@ -144,9 +159,10 @@ export class AppTree {
 	) {
 		this.#layout_payload = layout;
 		this.#component_payload = components;
+		const api_url = get_api_url(config);
 		this.#config = {
 			...config,
-			api_url: new URL(config.api_prefix, config.root).toString()
+			api_url
 		};
 		this.#dependency_payload = dependencies;
 
@@ -671,8 +687,9 @@ function gather_props(
 
 	_shared_props.load_component = (
 		name: string,
-		variant: "base" | "component" | "example"
-	) => get_component(name, "", api_url, variant).component as LoadingComponent;
+		variant: "base" | "component" | "example",
+		component_class_id?: string
+	) => get_component(name, component_class_id || "", api_url, variant);
 
 	_shared_props.visible =
 		_shared_props.visible === undefined ? true : _shared_props.visible;

package/src/{init.test.ts → init.test.skip.ts}

@@ -1,6 +1,6 @@
 import { describe, test, expect, vi } from "vitest";
 import { spy } from "tinyspy";
-import { setupServer } from "msw/node";
+import { setupWorker } from "msw/browser";
 import { http, HttpResponse } from "msw";
 import type { client_return } from "@gradio/client";
 import { Dependency, TargetMap } from "./types";
@@ -11,6 +11,9 @@ import {
 	process_server_fn,
 	get_component
 } from "./_init";
+import { get_api_url } from "./init.svelte";
+import type { AppConfig } from "./types";
+import { commands } from "@vitest/browser/context";
 
 describe("process_frontend_fn", () => {
 	test("empty source code returns null", () => {
@@ -461,6 +464,8 @@ describe("get_component", () => {
 						value: "hi",
 						interactive: false
 					},
+					key: "test-component-one",
+
 					has_modes: false,
 					instance: {} as any,
 					component: {} as any
@@ -512,13 +517,307 @@ describe("get_component", () => {
 			}
 		);
 
-		const server = setupServer(...handlers);
-		server.listen();
+		const worker = setupWorker(...handlers);
+		worker.start();
 
 		await get_component("test-random", id, api_url, []).component;
 
 		expect(mock).toHaveBeenCalled();
 
-		server.close();
+		worker.stop();
+	});
+});
+
+describe("get_api_url", () => {
+	describe("root URL with trailing slash", () => {
+		test("root with trailing slash, api_prefix with leading slash", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/myapp/",
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/myapp/api");
+		});
+
+		test("root with trailing slash, api_prefix without leading slash", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/myapp/",
+				api_prefix: "api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/myapp/api");
+		});
+
+		test("root at domain root with trailing slash", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/",
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/api");
+		});
+	});
+
+	describe("root URL without trailing slash", () => {
+		test("root without trailing slash, api_prefix with leading slash", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/myapp",
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/myapp/api");
+		});
+
+		test("root without trailing slash, api_prefix without leading slash", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/myapp",
+				api_prefix: "api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/myapp/api");
+		});
+
+		test("root at domain root without trailing slash", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com",
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/api");
+		});
+	});
+
+	describe("different root path combinations", () => {
+		test("root path is just '/'", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/",
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/api");
+		});
+
+		test("root path is '/' without trailing slash", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com",
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/api");
+		});
+
+		test("root path is '/myapp'", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/myapp",
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/myapp/api");
+		});
+
+		test("root path is '/myapp/'", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/myapp/",
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/myapp/api");
+		});
+
+		test("root path is '/deep/nested/path'", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/deep/nested/path",
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/deep/nested/path/api");
+		});
+
+		test("root path is '/deep/nested/path/'", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/deep/nested/path/",
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/deep/nested/path/api");
+		});
+	});
+
+	describe("different api_prefix formats", () => {
+		test("api_prefix with leading slash", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/myapp",
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/myapp/api");
+		});
+
+		test("api_prefix without leading slash", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/myapp",
+				api_prefix: "api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/myapp/api");
+		});
+
+		test("api_prefix with nested path and leading slash", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/myapp",
+				api_prefix: "/api/v1",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/myapp/api/v1");
+		});
+
+		test("api_prefix with nested path without leading slash", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/myapp",
+				api_prefix: "api/v1",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/myapp/api/v1");
+		});
+	});
+
+	describe("edge cases", () => {
+		test("root with port number", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com:8080/myapp",
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com:8080/myapp/api");
+		});
+
+		test("root with HTTPS", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "https://example.com/myapp",
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("https://example.com/myapp/api");
+		});
+
+		test("root with query parameters (should be ignored)", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/myapp?param=value",
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/myapp/api");
+		});
+
+		test("root with hash (should be ignored)", () => {
+			const config: Omit<AppConfig, "api_url"> = {
+				root: "http://example.com/myapp#section",
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+			const result = get_api_url(config);
+			expect(result).toBe("http://example.com/myapp/api");
+		});
+	});
+
+	describe("consistency checks", () => {
+		test("same result regardless of root trailing slash", () => {
+			const baseConfig = {
+				api_prefix: "/api",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+
+			const config1: Omit<AppConfig, "api_url"> = {
+				...baseConfig,
+				root: "http://example.com/myapp"
+			};
+			const config2: Omit<AppConfig, "api_url"> = {
+				...baseConfig,
+				root: "http://example.com/myapp/"
+			};
+
+			expect(get_api_url(config1)).toBe(get_api_url(config2));
+		});
+
+		test("same result regardless of api_prefix leading slash", () => {
+			const baseConfig = {
+				root: "http://example.com/myapp",
+				theme: "default",
+				version: "1.0.0",
+				autoscroll: true
+			};
+
+			const config1: Omit<AppConfig, "api_url"> = {
+				...baseConfig,
+				api_prefix: "/api"
+			};
+			const config2: Omit<AppConfig, "api_url"> = {
+				...baseConfig,
+				api_prefix: "api"
+			};
+
+			expect(get_api_url(config1)).toBe(get_api_url(config2));
+		});
 	});
 });