From e880977e6716a004d435169d7f4584754877ded3 Mon Sep 17 00:00:00 2001 From: Abubakar Abid Date: Thu, 6 Aug 2026 12:55:59 -0700 Subject: [PATCH 01/19] Add browser-local run history and loading --- client/js/src/index.ts | 8 + client/js/src/test/run_history.test.ts | 159 ++++++++++ client/js/src/utils/run_history.ts | 221 +++++++++++++ client/js/src/utils/submit.ts | 41 ++- gradio/routes.py | 16 +- js/spa/index.html | 1 + js/spa/src/Index.svelte | 67 +++- js/spa/src/RunHistory.svelte | 423 +++++++++++++++++++++++++ js/spa/src/RunValue.svelte | 69 ++++ test/test_routes.py | 7 + 10 files changed, 1000 insertions(+), 12 deletions(-) create mode 100644 client/js/src/test/run_history.test.ts create mode 100644 client/js/src/utils/run_history.ts create mode 100644 js/spa/src/RunHistory.svelte create mode 100644 js/spa/src/RunValue.svelte diff --git a/client/js/src/index.ts b/client/js/src/index.ts index 6ea916ad113..2aa4e7fc02b 100644 --- a/client/js/src/index.ts +++ b/client/js/src/index.ts @@ -5,6 +5,14 @@ export { submit } from "./utils/submit"; export { upload_files } from "./utils/upload_files"; export { FileData, upload, prepare_files } from "./upload"; export { handle_file } from "./helpers/data"; +export { + clear_run_history, + consume_run_history_replay, + read_run_history, + stage_run_history_replay, + type StoredRunComponent, + type StoredRun +} from "./utils/run_history"; export type { SpaceStatus, diff --git a/client/js/src/test/run_history.test.ts b/client/js/src/test/run_history.test.ts new file mode 100644 index 00000000000..1b61196dd22 --- /dev/null +++ b/client/js/src/test/run_history.test.ts @@ -0,0 +1,159 @@ +import { afterEach, describe, expect, test } from "vitest"; + +import { + clear_run_history, + consume_run_history_replay, + read_run_history, + stage_run_history_replay, + start_run_history, + update_run_history, + update_run_inputs +} from "../utils/run_history"; + +const root = "http://localhost:7860/my-app/"; + +afterEach(() => clear_run_history(root)); + +describe("run history", () => { + test("stores runs per app root with the page and inputs", () => { + const id = start_run_history({ + root, + endpoint: "/predict", + api_name: "/predict", + fn_index: 0, + inputs: ["hello"], + input_components: [ + { + type: "textbox", + component_class_id: "textbox-id", + props: { label: "Prompt" } + } + ] + }); + + const runs = read_run_history(root); + expect(runs).toHaveLength(1); + expect(runs[0]).toMatchObject({ + id, + endpoint: "/predict", + api_name: "/predict", + inputs: ["hello"], + status: "running", + input_components: [ + { + type: "textbox", + component_class_id: "textbox-id", + props: { label: "Prompt" } + } + ], + page: `${window.location.pathname}${window.location.search}` + }); + expect(read_run_history("http://localhost:7860/other-app/")).toEqual([]); + }); + + test("replaces inputs with their upload-processed values", () => { + const id = start_run_history({ + root, + endpoint: "/predict", + api_name: "/predict", + fn_index: 0, + inputs: [new File(["hello"], "hello.txt")] + }); + + update_run_inputs(root, id, [ + { path: "/tmp/hello.txt", url: "/gradio_api/file=/tmp/hello.txt" } + ]); + + expect(read_run_history(root)[0].inputs).toEqual([ + { path: "/tmp/hello.txt", url: "/gradio_api/file=/tmp/hello.txt" } + ]); + }); + + test("updates outputs and completion state", () => { + const id = start_run_history({ + root, + endpoint: "/predict", + api_name: "/predict", + fn_index: 0, + inputs: ["hello"] + }); + + update_run_history(root, id, { + type: "data", + endpoint: "/predict", + fn_index: 0, + data: ["hello hello"] + }); + update_run_history(root, id, { + type: "status", + endpoint: "/predict", + fn_index: 0, + queue: false, + stage: "complete", + time: new Date("2025-05-16T21:45:00Z") + }); + + expect(read_run_history(root)[0]).toMatchObject({ + outputs: ["hello hello"], + status: "completed", + completed_at: "2025-05-16T21:45:00.000Z" + }); + }); + + test("records failed runs and their error message", () => { + const id = start_run_history({ + root, + endpoint: 3, + api_name: "Function 3", + fn_index: 3, + inputs: [{ circular: null }] + }); + + update_run_history(root, id, { + type: "status", + endpoint: "/predict", + fn_index: 3, + queue: true, + stage: "error", + message: "generation failed" + }); + + expect(read_run_history(root)[0]).toMatchObject({ + status: "failed", + error: "generation failed" + }); + }); + + test("keeps only the newest 100 runs", () => { + for (let index = 0; index < 105; index++) { + start_run_history({ + root, + endpoint: "/predict", + api_name: "/predict", + fn_index: 0, + inputs: [index] + }); + } + + const runs = read_run_history(root); + expect(runs).toHaveLength(100); + expect(runs[0].inputs).toEqual([104]); + expect(runs.at(-1)?.inputs).toEqual([5]); + }); + + test("stages a run once so it can be loaded on its saved page", () => { + const id = start_run_history({ + root, + endpoint: "/predict", + api_name: "/predict", + fn_index: 0, + inputs: ["hello"] + }); + const run = read_run_history(root).find((item) => item.id === id)!; + + stage_run_history_replay(root, run); + + expect(consume_run_history_replay(root)).toEqual(run); + expect(consume_run_history_replay(root)).toBeNull(); + }); +}); diff --git a/client/js/src/utils/run_history.ts b/client/js/src/utils/run_history.ts new file mode 100644 index 00000000000..82b35cbc14f --- /dev/null +++ b/client/js/src/utils/run_history.ts @@ -0,0 +1,221 @@ +import type { GradioEvent } from "../types"; + +const STORAGE_PREFIX = "gradio:run-history:v1:"; +const REPLAY_PREFIX = "gradio:run-history:replay:v1:"; +const MAX_RUNS = 100; + +export type RunStatus = "running" | "completed" | "failed"; + +export interface StoredRunComponent { + type: string; + component_class_id: string; + props: Record; +} + +export interface StoredRun { + id: string; + endpoint: string | number; + api_name: string; + fn_index: number; + page: string; + inputs: unknown; + outputs: unknown | null; + input_components?: StoredRunComponent[]; + output_components?: StoredRunComponent[]; + status: RunStatus; + error?: string; + started_at: string; + completed_at?: string; +} + +interface StartRunOptions { + root: string; + endpoint: string | number; + api_name: string; + fn_index: number; + inputs: unknown; + input_components?: StoredRunComponent[]; + output_components?: StoredRunComponent[]; +} + +function storage_key(root: string): string | null { + if (typeof window === "undefined") return null; + + try { + if (!window.localStorage) return null; + const root_url = new URL(root || "/", window.location.href); + const path = root_url.pathname.replace(/\/$/, "") || "/"; + return `${STORAGE_PREFIX}${path}`; + } catch { + return null; + } +} + +function replay_key(root: string): string | null { + const key = storage_key(root); + return key ? key.replace(STORAGE_PREFIX, REPLAY_PREFIX) : null; +} + +function make_id(): string { + if (typeof crypto !== "undefined" && crypto.randomUUID) { + return crypto.randomUUID(); + } + return `${Date.now()}-${Math.random().toString(36).slice(2)}`; +} + +function clone_for_storage(value: unknown): unknown { + const seen = new WeakSet(); + try { + return JSON.parse( + JSON.stringify(value, (_key, item) => { + if (typeof item === "bigint") return item.toString(); + if (typeof item === "object" && item !== null) { + if (seen.has(item)) return "[Circular]"; + seen.add(item); + } + return item; + }) + ); + } catch { + return "[Unserializable value]"; + } +} + +export function read_run_history(root: string): StoredRun[] { + const key = storage_key(root); + if (!key) return []; + + try { + const value = JSON.parse(window.localStorage.getItem(key) || "[]"); + return Array.isArray(value) ? value : []; + } catch { + return []; + } +} + +function write_run_history(root: string, runs: StoredRun[]): void { + const key = storage_key(root); + if (!key) return; + + let next = runs.slice(0, MAX_RUNS); + while (next.length > 0) { + try { + window.localStorage.setItem(key, JSON.stringify(next)); + return; + } catch { + next = next.slice(0, -1); + } + } + try { + window.localStorage.removeItem(key); + } catch { + // Run history must never interfere with an app submission. + } +} + +export function clear_run_history(root: string): void { + const key = storage_key(root); + if (!key) return; + try { + window.localStorage.removeItem(key); + } catch { + // Storage may be disabled by the browser. + } +} + +export function stage_run_history_replay(root: string, run: StoredRun): void { + const key = replay_key(root); + if (!key) return; + try { + window.sessionStorage.setItem(key, JSON.stringify(run)); + } catch { + // Session storage may be disabled by the browser. + } +} + +export function consume_run_history_replay(root: string): StoredRun | null { + const key = replay_key(root); + if (!key) return null; + try { + const value = window.sessionStorage.getItem(key); + window.sessionStorage.removeItem(key); + return value ? (JSON.parse(value) as StoredRun) : null; + } catch { + return null; + } +} + +export function start_run_history(options: StartRunOptions): string | null { + const key = storage_key(options.root); + if (!key) return null; + + const run: StoredRun = { + id: make_id(), + endpoint: options.endpoint, + api_name: options.api_name, + fn_index: options.fn_index, + page: `${window.location.pathname}${window.location.search}`, + inputs: clone_for_storage(options.inputs), + outputs: null, + ...(options.input_components + ? { + input_components: clone_for_storage( + options.input_components + ) as StoredRunComponent[] + } + : {}), + ...(options.output_components + ? { + output_components: clone_for_storage( + options.output_components + ) as StoredRunComponent[] + } + : {}), + status: "running", + started_at: new Date().toISOString() + }; + write_run_history(options.root, [run, ...read_run_history(options.root)]); + return run.id; +} + +export function update_run_inputs( + root: string, + id: string | null, + inputs: unknown +): void { + if (!id) return; + + const runs = read_run_history(root); + const run = runs.find((item) => item.id === id); + if (!run) return; + run.inputs = clone_for_storage(inputs); + write_run_history(root, runs); +} + +export function update_run_history( + root: string, + id: string | null, + event: GradioEvent +): void { + if (!id) return; + + const runs = read_run_history(root); + const run = runs.find((item) => item.id === id); + if (!run) return; + + if (event.type === "data") { + run.outputs = clone_for_storage(event.data); + } else if (event.type === "status" && event.stage === "complete") { + run.status = "completed"; + run.completed_at = (event.time || new Date()).toISOString(); + } else if (event.type === "status" && event.stage === "error") { + run.status = "failed"; + run.error = + typeof event.message === "string" + ? event.message + : JSON.stringify(event.message || "Unknown error"); + run.completed_at = (event.time || new Date()).toISOString(); + } + + write_run_history(root, runs); +} diff --git a/client/js/src/utils/submit.ts b/client/js/src/utils/submit.ts index db642d823a3..89b3c383818 100644 --- a/client/js/src/utils/submit.ts +++ b/client/js/src/utils/submit.ts @@ -29,6 +29,11 @@ import { } from "../constants"; import { apply_diff_stream, close_stream } from "./stream"; import { Client } from "../client"; +import { + start_run_history, + update_run_history, + update_run_inputs +} from "./run_history"; export function submit( this: Client, @@ -73,12 +78,42 @@ export function submit( ); let resolved_data = map_data_to_params(data, endpoint_info); - - let stream: EventSource | null; let protocol = config.protocol ?? "ws"; if (protocol === "ws") { throw new Error(WS_PROTOCOL_MSG); } + const history_endpoint = + typeof dependency.api_name === "string" + ? `/${dependency.api_name}` + : endpoint; + const history_api_name = + typeof dependency.api_name === "string" + ? `/${dependency.api_name}` + : `Function ${fn_index}`; + const component_metadata = (id: number) => { + const component = config.components.find((item) => item.id === id); + if (!component) return undefined; + return { + type: component.type, + component_class_id: component.component_class_id, + props: component.props + }; + }; + const history_run_id = start_run_history({ + root: config.root, + endpoint: history_endpoint, + api_name: history_api_name, + fn_index, + inputs: resolved_data, + input_components: dependency.inputs + .map(component_metadata) + .filter((item) => item !== undefined), + output_components: dependency.outputs + .map(component_metadata) + .filter((item) => item !== undefined) + }); + + let stream: EventSource | null; let event_id_final = ""; let event_id_cb: () => string = () => event_id_final; @@ -103,6 +138,7 @@ export function submit( // event subscription methods function fire_event(event: GradioEvent): void { + update_run_history(config!.root, history_run_id, event); if (all_events || events_to_publish[event.type]) { push_event(event); } @@ -180,6 +216,7 @@ export function submit( "input", true ); + update_run_inputs(config.root, history_run_id, input_data || []); payload = { data: input_data || [], event_data, diff --git a/gradio/routes.py b/gradio/routes.py index 764326eb524..51e0baf5de2 100644 --- a/gradio/routes.py +++ b/gradio/routes.py @@ -614,9 +614,10 @@ def main( ): mimetypes.add_type("application/javascript", ".js") blocks = app.get_blocks() + is_run_history = request.url.path.rstrip("/").endswith(f"{API_PREFIX}/runs") root = route_utils.get_root_url( request=request, - route_path=f"/{page}", + route_path=f"{API_PREFIX}/runs" if is_run_history else f"/{page}", root_path=app.root_path or request.scope.get("root_path") or blocks.custom_mount_path, @@ -678,6 +679,11 @@ def main( request=request, name=template, context={ + "base_url": ( + "../../" if request.url.path.endswith("/") else "../" + ) + if is_run_history + else "./", "config": config, "gradio_api_info": gradio_api_info, }, @@ -695,6 +701,14 @@ def main( "the frontend by running /scripts/build_frontend.sh" ) from err + @router.get("/runs", response_class=HTMLResponse) + @router.get("/runs/", response_class=HTMLResponse) + def run_history( + request: fastapi.Request, + user: str = Depends(get_current_user), + ): + return main(request, user) + @app.get("/gradio_api/deep_link") def deep_link(session_hash: str): if session_hash in app.state_holder: diff --git a/js/spa/index.html b/js/spa/index.html index 706a3f680e9..77f367a8ca5 100644 --- a/js/spa/index.html +++ b/js/spa/index.html @@ -11,6 +11,7 @@ > + import { onMount, onDestroy } from "svelte"; - import type { SpaceStatus } from "@gradio/client"; + import { + consume_run_history_replay, + type SpaceStatus, + type StoredRun + } from "@gradio/client"; import { Embed } from "@gradio/core"; import type { ThemeMode } from "@gradio/core"; import { StatusTracker } from "@gradio/statustracker"; import { _ } from "svelte-i18n"; import { setupi18n } from "@gradio/core"; import { init } from "@huggingface/space-header"; + import RunHistory from "./RunHistory.svelte"; let i18n_ready = $state(false); setupi18n().then(() => { @@ -145,7 +150,40 @@ let loading_text = $state("Loading..."); let active_theme_mode: ThemeMode = $state("system"); - let api_url: string; + let api_url = $state(""); + let run_history = $state(false); + + function restore_run(config: Config, run: StoredRun | null): void { + if (!run) return; + const dependency = config.dependencies.find( + (item) => + item.id === run.fn_index || + (typeof item.api_name === "string" && + `/${item.api_name.replace(/^\//, "")}` === run.api_name) + ); + if (!dependency) return; + + const inputs = Array.isArray(run.inputs) + ? run.inputs + : Object.values(run.inputs as Record); + const outputs = Array.isArray(run.outputs) + ? run.outputs + : run.outputs === null + ? [] + : [run.outputs]; + for (const [index, id] of dependency.inputs.entries()) { + const component = config.components.find((item) => item.id === id); + if (component && index < inputs.length) { + component.props.value = inputs[index]; + } + } + for (const [index, id] of dependency.outputs.entries()) { + const component = config.components.find((item) => item.id === id); + if (component && index < outputs.length) { + component.props.value = outputs[index]; + } + } + } $effect(() => { if (config?.app_id) { @@ -341,10 +379,16 @@ onMount(async () => { if (!wrapper) return; active_theme_mode = handle_theme_mode(wrapper); + run_history = window.location.pathname + .replace(/\/$/, "") + .endsWith("/gradio_api/runs"); //@ts-ignore const server_port = window.__GRADIO__SERVER_PORT__; + const app_path = run_history + ? window.location.pathname.replace(/gradio_api\/runs\/?$/, "") + : window.location.pathname; api_url = BUILD_MODE === "dev" || gradio_dev_mode === "dev" ? `http://localhost:${ @@ -352,7 +396,7 @@ }` : space || src || - new URL(location.pathname, location.origin).href.replace(/\/$/, ""); + new URL(app_path, location.origin).href.replace(/\/$/, ""); const deep_link = new URLSearchParams(window.location.search).get( "deep_link" @@ -376,6 +420,7 @@ } config = app.get_url_config() as unknown as Config; + restore_run(config, consume_run_history_replay(config.root)); window.__gradio_space__ = config.space_id; if (app.config?.i18n_translations) { @@ -466,11 +511,13 @@ }); let loader_status: "pending" | "error" | "complete" | "generating" = $derived( - !ready && status.load_status !== "error" - ? "pending" - : !ready && status.load_status === "error" - ? "error" - : status.load_status + run_history + ? status.load_status + : !ready && status.load_status !== "error" + ? "pending" + : !ready && status.load_status === "error" + ? "error" + : status.load_status ); $effect(() => { @@ -586,7 +633,7 @@ bind:wrapper > {#if i18n_ready} - {#if (loader_status === "pending" || loader_status === "error") && !(config && config?.auth_required)} + {#if !run_history && (loader_status === "pending" || loader_status === "error") && !(config && config?.auth_required)} s} {app_mode} /> + {:else if config && css_ready && run_history} + {:else if config && Blocks && css_ready} + import { onMount } from "svelte"; + import { + clear_run_history, + read_run_history, + stage_run_history_replay, + type StoredRun, + type StoredRunComponent + } from "@gradio/client"; + import RunValue from "./RunValue.svelte"; + + interface Props { + root: string; + } + + let { root }: Props = $props(); + let runs: StoredRun[] = $state([]); + + let groups = $derived.by(() => { + const grouped = new Map(); + for (const run of runs) { + const current = grouped.get(run.api_name) || []; + current.push(run); + grouped.set(run.api_name, current); + } + return Array.from(grouped.entries()); + }); + + function refresh(): void { + runs = read_run_history(root); + } + + onMount(() => { + refresh(); + window.addEventListener("storage", refresh); + return () => window.removeEventListener("storage", refresh); + }); + + function values(value: unknown): unknown[] { + if (Array.isArray(value)) return value; + if (value && typeof value === "object") { + return Object.values(value as Record); + } + return value === null || value === undefined ? [] : [value]; + } + + function summarize(value: unknown): string { + if (value === null || value === undefined) return "No value"; + if (typeof value === "string") return value || "Empty value"; + try { + return JSON.stringify(value); + } catch { + return String(value); + } + } + + function label(meta: StoredRunComponent | undefined, index: number): string { + const component_label = meta?.props?.label; + if (typeof component_label === "string" && component_label) { + return component_label; + } + return meta?.type || `Value ${index + 1}`; + } + + function format_time(value: string): string { + return new Intl.DateTimeFormat(undefined, { + dateStyle: "medium", + timeStyle: "short" + }).format(new Date(value)); + } + + function load(run: StoredRun): void { + stage_run_history_replay(root, run); + const app_url = new URL(root, window.location.href); + let target = new URL(run.page || app_url.pathname, app_url); + if (target.origin !== app_url.origin) target = app_url; + window.location.assign(target); + } + + function clear_all(): void { + if (!window.confirm("Clear all saved runs for this app?")) return; + clear_run_history(root); + refresh(); + } + + +
+
+
+

Run history

+

Runs are saved privately in this browser.

+
+ {#if runs.length} + + {/if} +
+ + {#if groups.length === 0} +
+

No runs yet

+

Use the app, then return here to load previous runs.

+
+ {:else} + {#each groups as [api_name, endpoint_runs]} +
+
+ + {api_name} + {endpoint_runs.length} + {endpoint_runs.length === 1 ? "run" : "runs"} +
+ + {#each endpoint_runs as run (run.id)} + {@const input_values = values(run.inputs)} + {@const output_values = values(run.outputs)} +
+
+

Inputs

+ {#each input_values as value, index} + {@const meta = run.input_components?.[index]} +
+ {label(meta, index)} + {#if meta} + + {:else} + {summarize(value)} + {/if} +
+ {/each} +
+
+

Outputs

+ {#if output_values.length} + {#each output_values as value, index} + {@const meta = run.output_components?.[index]} +
+ {label(meta, index)} + {#if meta} + + {:else} + {summarize(value)} + {/if} +
+ {/each} + {:else} +
No saved output
+ {/if} +
+
+ +
+
+ + + {run.status === "completed" + ? "Completed" + : run.status === "failed" + ? "Failed" + : "Running"} + + {#if run.error}{run.error}{/if} +
+
+ {/each} +
+ {/each} + {/if} +
+ + diff --git a/js/spa/src/RunValue.svelte b/js/spa/src/RunValue.svelte new file mode 100644 index 00000000000..8f71829d50d --- /dev/null +++ b/js/spa/src/RunValue.svelte @@ -0,0 +1,69 @@ + + +
+ + diff --git a/test/test_routes.py b/test/test_routes.py index 3a499325e9a..fc31c0aaac2 100644 --- a/test/test_routes.py +++ b/test/test_routes.py @@ -59,6 +59,13 @@ def test_get_main_route(self, test_client): response = test_client.get("/") assert response.status_code == 200 + def test_get_run_history_route(self, test_client): + response = test_client.get(f"{API_PREFIX}/runs") + assert response.status_code == 200 + assert " Date: Thu, 6 Aug 2026 13:15:19 -0700 Subject: [PATCH 02/19] Refine run history controls and storage UI --- client/js/src/index.ts | 1 + client/js/src/test/run_history.test.ts | 23 +++++ client/js/src/utils/run_history.ts | 7 ++ js/spa/src/RunHistory.svelte | 138 +++++++++++++++++++++---- js/spa/src/RunValue.svelte | 9 ++ 5 files changed, 159 insertions(+), 19 deletions(-) diff --git a/client/js/src/index.ts b/client/js/src/index.ts index 2aa4e7fc02b..c88277df104 100644 --- a/client/js/src/index.ts +++ b/client/js/src/index.ts @@ -8,6 +8,7 @@ export { handle_file } from "./helpers/data"; export { clear_run_history, consume_run_history_replay, + delete_run_history, read_run_history, stage_run_history_replay, type StoredRunComponent, diff --git a/client/js/src/test/run_history.test.ts b/client/js/src/test/run_history.test.ts index 1b61196dd22..cf124ccfe11 100644 --- a/client/js/src/test/run_history.test.ts +++ b/client/js/src/test/run_history.test.ts @@ -3,6 +3,7 @@ import { afterEach, describe, expect, test } from "vitest"; import { clear_run_history, consume_run_history_replay, + delete_run_history, read_run_history, stage_run_history_replay, start_run_history, @@ -141,6 +142,28 @@ describe("run history", () => { expect(runs.at(-1)?.inputs).toEqual([5]); }); + test("deletes an individual run", () => { + const first = start_run_history({ + root, + endpoint: "/predict", + api_name: "/predict", + fn_index: 0, + inputs: ["first"] + }); + start_run_history({ + root, + endpoint: "/predict", + api_name: "/predict", + fn_index: 0, + inputs: ["second"] + }); + + delete_run_history(root, first!); + + expect(read_run_history(root)).toHaveLength(1); + expect(read_run_history(root)[0].inputs).toEqual(["second"]); + }); + test("stages a run once so it can be loaded on its saved page", () => { const id = start_run_history({ root, diff --git a/client/js/src/utils/run_history.ts b/client/js/src/utils/run_history.ts index 82b35cbc14f..4c4ded5767a 100644 --- a/client/js/src/utils/run_history.ts +++ b/client/js/src/utils/run_history.ts @@ -123,6 +123,13 @@ export function clear_run_history(root: string): void { } } +export function delete_run_history(root: string, id: string): void { + write_run_history( + root, + read_run_history(root).filter((run) => run.id !== id) + ); +} + export function stage_run_history_replay(root: string, run: StoredRun): void { const key = replay_key(root); if (!key) return; diff --git a/js/spa/src/RunHistory.svelte b/js/spa/src/RunHistory.svelte index f60a6ca95a3..5b724d85274 100644 --- a/js/spa/src/RunHistory.svelte +++ b/js/spa/src/RunHistory.svelte @@ -2,6 +2,7 @@ import { onMount } from "svelte"; import { clear_run_history, + delete_run_history, read_run_history, stage_run_history_replay, type StoredRun, @@ -82,13 +83,42 @@ clear_run_history(root); refresh(); } + + function delete_run(run: StoredRun): void { + if (!window.confirm("Delete this saved run?")) return; + delete_run_history(root, run.id); + refresh(); + }

Run history

-

Runs are saved privately in this browser.

+
+ Runs ({runs.length}) logged in +
+ Local Storage +
+
+ Local StorageThis browser + ✓ +
+
+ Local FileComing soon +
+
+ Hugging Face BucketComing soon +
+
+
+ , privately in this browser. +
{#if runs.length} @@ -112,7 +142,7 @@ >
{#each endpoint_runs as run (run.id)} {@const input_values = values(run.inputs)} @@ -154,9 +184,6 @@
No saved output
{/if} -
- -
+ {#if run.error}{run.error}{/if} +
{/each} @@ -207,13 +238,81 @@ font-weight: var(--weight-semibold, 600); line-height: 1.2; } - .page-header p, + .storage-copy, .empty p { margin: 6px 0 0; color: var(--body-text-color-subdued, #71717a); } + .storage-copy { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 5px; + } + .storage-picker { + display: inline-block; + position: relative; + } + .storage-picker summary { + display: inline-flex; + align-items: center; + gap: 5px; + padding: 3px 8px; + border: 1px solid var(--border-color-primary, #d4d4d8); + border-radius: 999px; + background: var(--background-fill-secondary, #f4f4f5); + color: var(--body-text-color, #27272a); + font-size: 13px; + font-weight: 600; + cursor: pointer; + list-style: none; + } + .storage-picker summary::-webkit-details-marker { + display: none; + } + .storage-picker[open] summary { + border-color: var(--border-color-accent, #f97316); + } + .storage-menu { + position: absolute; + top: calc(100% + 8px); + left: 0; + z-index: 10; + width: 250px; + padding: 6px; + border: 1px solid var(--border-color-primary, #e4e4e7); + border-radius: var(--radius-lg, 8px); + background: var(--block-background-fill, #fff); + box-shadow: var(--shadow-drop-lg, 0 12px 28px rgb(0 0 0 / 15%)); + } + .storage-option { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + padding: 9px 10px; + border-radius: 6px; + } + .storage-option.active { + background: var(--background-fill-secondary, #f4f4f5); + color: var(--body-text-color, #27272a); + } + .storage-option.disabled { + color: var(--body-text-color-subdued, #71717a); + opacity: 0.7; + } + .storage-option strong, + .storage-option small { + display: block; + } + .storage-option small { + margin-top: 2px; + font-size: 11px; + font-weight: 400; + } .clear, - .load { + .load, + .delete { border: var(--button-border-width, 1px) solid var(--button-secondary-border-color, #d4d4d8); border-radius: var(--button-medium-radius, 8px); @@ -232,11 +331,20 @@ padding: 8px 12px; } .load { - min-width: 112px; - padding: 10px 16px; + padding: 5px 10px; + font-size: 13px; + } + .delete { + margin-left: auto; + padding: 5px 10px; + border-color: transparent; + background: transparent; + box-shadow: none; + color: var(--body-text-color-subdued, #71717a); } .clear:hover, - .load:hover { + .load:hover, + .delete:hover { border-color: var(--button-secondary-border-color-hover, #a1a1aa); background: var(--button-secondary-background-fill-hover, #f4f4f5); color: var(--button-secondary-text-color-hover, #18181b); @@ -280,7 +388,7 @@ .table-header, .run { display: grid; - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 132px; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .table-header { gap: 16px; @@ -339,11 +447,6 @@ color: var(--body-text-color-subdued, #71717a); font-style: italic; } - .run-action { - display: flex; - align-items: center; - justify-content: flex-end; - } .metadata { grid-column: 1 / -1; gap: 10px; @@ -411,9 +514,6 @@ .run-values h3 { display: block; } - .run-action { - justify-content: flex-start; - } .metadata { grid-column: 1; align-items: flex-start; diff --git a/js/spa/src/RunValue.svelte b/js/spa/src/RunValue.svelte index 8f71829d50d..83ef507aebb 100644 --- a/js/spa/src/RunValue.svelte +++ b/js/spa/src/RunValue.svelte @@ -28,8 +28,17 @@ Promise.all([loaded.component, loaded.runtime]).then( ([component, runtime]) => { if (disposed) return; + const choices = Array.isArray(meta.props.choices) + ? meta.props.choices + : (meta.type === "dropdown" || meta.type === "radio") && value != null + ? (Array.isArray(value) ? value : [value]).map((item) => [ + String(item), + item + ]) + : undefined; const props = { ...meta.props, + ...(choices ? { choices } : {}), value, type: "table", selected: false, From 77d5c5714e158405e0ddb1f8b25b834b0c91aada Mon Sep 17 00:00:00 2001 From: Abubakar Abid Date: Thu, 6 Aug 2026 13:41:35 -0700 Subject: [PATCH 03/19] Simplify storage label and emphasize loading --- js/spa/src/RunHistory.svelte | 117 ++++++++++++----------------------- 1 file changed, 39 insertions(+), 78 deletions(-) diff --git a/js/spa/src/RunHistory.svelte b/js/spa/src/RunHistory.svelte index 5b724d85274..2a99bb24b02 100644 --- a/js/spa/src/RunHistory.svelte +++ b/js/spa/src/RunHistory.svelte @@ -97,28 +97,12 @@

Run history

Runs ({runs.length}) logged in -
- Local Storage -
-
- Local StorageThis browser - ✓ -
-
- Local FileComing soon -
-
- Hugging Face BucketComing soon -
-
-
+ Local Storage , privately in this browser.
+
+ Local File and Hugging Face Bucket storage are not implemented yet. +
{#if runs.length} @@ -199,7 +183,9 @@ ? "Failed" : "Running"} - + {#if run.error}{run.error}{/if} Date: Thu, 6 Aug 2026 14:47:34 -0700 Subject: [PATCH 04/19] Condense run history header --- js/spa/src/RunHistory.svelte | 27 +++++++++++++++++---------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/js/spa/src/RunHistory.svelte b/js/spa/src/RunHistory.svelte index 2a99bb24b02..28c5640b23a 100644 --- a/js/spa/src/RunHistory.svelte +++ b/js/spa/src/RunHistory.svelte @@ -93,16 +93,13 @@
-
+

Run history

Runs ({runs.length}) logged in Local Storage , privately in this browser.
-
- Local File and Hugging Face Bucket storage are not implemented yet. -
{#if runs.length} @@ -224,9 +221,15 @@ font-weight: var(--weight-semibold, 600); line-height: 1.2; } + .title-line { + display: flex; + align-items: baseline; + gap: 14px; + white-space: nowrap; + } .storage-copy, .empty p { - margin: 6px 0 0; + margin: 0; color: var(--body-text-color-subdued, #71717a); } .storage-copy { @@ -244,11 +247,6 @@ font-size: 0.9em; font-weight: 600; } - .storage-note { - margin-top: 4px; - color: var(--body-text-color-subdued, #71717a); - font-size: 11px; - } .clear, .delete { border: var(--button-border-width, 1px) solid @@ -466,6 +464,15 @@ .history-page { padding-inline: 16px; } + .page-header, + .title-line { + align-items: flex-start; + flex-direction: column; + } + .title-line { + gap: 6px; + white-space: normal; + } .table-header { display: none; } From 6acafb4c2d33092315efd4c5d0b1086718ef96fc Mon Sep 17 00:00:00 2001 From: Abubakar Abid Date: Thu, 6 Aug 2026 14:59:41 -0700 Subject: [PATCH 05/19] Link run history from settings --- js/core/src/api_docs/Settings.svelte | 30 ++++++++++++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) diff --git a/js/core/src/api_docs/Settings.svelte b/js/core/src/api_docs/Settings.svelte index 68212f0dcc1..972c6cb6b9c 100644 --- a/js/core/src/api_docs/Settings.svelte +++ b/js/core/src/api_docs/Settings.svelte @@ -165,6 +165,13 @@ Start Recording
+ diff --git a/test/test_routes.py b/test/test_routes.py index ea9bcf1e0d6..156a89ffad1 100644 --- a/test/test_routes.py +++ b/test/test_routes.py @@ -1340,6 +1340,32 @@ def test_config_show_api_reflects_mount_flag(): assert config["footer_links"] == ["gradio", "settings"] +def test_run_history_is_a_default_footer_link(): + with gr.Blocks() as demo: + gr.Markdown("Hello") + try: + app, _, _ = demo.launch(prevent_thread_lock=True) + client = TestClient(app) + config = client.get("/config").json() + assert config["footer_links"] == ["api", "gradio", "settings", "history"] + finally: + demo.close() + + +def test_footer_links_can_exclude_run_history(): + with gr.Blocks() as demo: + gr.Markdown("Hello") + try: + app, _, _ = demo.launch( + prevent_thread_lock=True, footer_links=["api", "gradio", "settings"] + ) + client = TestClient(app) + config = client.get("/config").json() + assert "history" not in config["footer_links"] + finally: + demo.close() + + def test_empty_footer_links(): with gr.Blocks() as demo: gr.Markdown("Hello") From 6e812c742ff80acd75df3539b9aecdbd452e4bd2 Mon Sep 17 00:00:00 2001 From: Abubakar Abid Date: Mon, 10 Aug 2026 11:38:37 -0700 Subject: [PATCH 08/19] Time streamed runs by elapsed time, not their last chunk A generator reports `duration` per chunk, so the value on `process_completed` covers only the final iteration. A 1.4s streaming run was showing up as "Completed in 1ms". Track whether a run generated or streamed, and fall back to the measured elapsed time for those. Co-Authored-By: Claude Opus 5 (1M context) --- client/js/src/test/run_history.test.ts | 45 ++++++++++++++++++++++++++ client/js/src/utils/run_history.ts | 15 +++++++-- 2 files changed, 58 insertions(+), 2 deletions(-) diff --git a/client/js/src/test/run_history.test.ts b/client/js/src/test/run_history.test.ts index 8a20e525cfd..1c50a34dbc0 100644 --- a/client/js/src/test/run_history.test.ts +++ b/client/js/src/test/run_history.test.ts @@ -129,6 +129,51 @@ describe.skipIf(!in_browser)("run history", () => { }); }); + test("times a streamed run by its elapsed time, not its last chunk", () => { + const id = start_run_history({ + root, + endpoint: "/predict", + api_name: "/predict", + fn_index: 0, + inputs: ["hello"] + }); + const started_at = read_run_history(root)[0].started_at; + + update_run_history(root, id, { + type: "status", + endpoint: "/predict", + fn_index: 0, + queue: true, + stage: "pending", + original_msg: "process_starts", + time: new Date(Date.parse(started_at) + 100) + }); + update_run_history(root, id, { + type: "status", + endpoint: "/predict", + fn_index: 0, + queue: true, + stage: "generating", + time: new Date(Date.parse(started_at) + 400) + }); + // A generator reports the duration of its final chunk only, which would + // make a multi-second run look instantaneous. + update_run_history(root, id, { + type: "status", + endpoint: "/predict", + fn_index: 0, + queue: true, + stage: "complete", + cache_duration: 0.001, + time: new Date(Date.parse(started_at) + 1600) + }); + + expect(read_run_history(root)[0]).toMatchObject({ + streamed: true, + duration_ms: 1500 + }); + }); + test("measures the runtime from when the queue starts the function", () => { const id = start_run_history({ root, diff --git a/client/js/src/utils/run_history.ts b/client/js/src/utils/run_history.ts index ba0992c0b06..878814de51f 100644 --- a/client/js/src/utils/run_history.ts +++ b/client/js/src/utils/run_history.ts @@ -32,6 +32,8 @@ export interface StoredRun { duration_ms?: number; /** How long the run waited in the queue before the function started. */ queued_ms?: number; + /** Whether the run produced its output in chunks, i.e. came from a generator. */ + streamed?: boolean; } interface StartRunOptions { @@ -265,6 +267,11 @@ export function update_run_history( event.original_msg === "process_starts" ) { mark_process_start(run, event.time); + } else if ( + event.type === "status" && + (event.stage === "generating" || event.stage === "streaming") + ) { + run.streamed = true; } else if (event.type === "status" && event.stage === "complete") { run.status = "completed"; mark_complete(run, event); @@ -293,9 +300,13 @@ function mark_complete(run: StoredRun, event: StatusMessage): void { const completed = event.time || new Date(); run.completed_at = completed.toISOString(); // `cache_duration` is how long the function took on the server, which the - // queue reports on every completed run (not just cached ones). + // queue reports on every completed run (not just cached ones). A generator + // reports it per chunk though, so the final value covers only the last one + // and the elapsed time is the honest number for a streamed run. const server_duration = - typeof event.cache_duration === "number" && event.cache_duration >= 0 + !run.streamed && + typeof event.cache_duration === "number" && + event.cache_duration >= 0 ? event.cache_duration * 1000 : null; run.duration_ms = From caa04ddb5300813a1e2a01e116d94bc5e73225f6 Mon Sep 17 00:00:00 2001 From: Abubakar Abid Date: Mon, 10 Aug 2026 12:15:46 -0700 Subject: [PATCH 09/19] Rework the run history entry points and row chrome - Rename the footer link to "Runs" and move it left of "Use via API". The `footer_links` value is now "runs" too, matching both the label and the `/gradio_api/runs` route. - Replace the history icon. The old one's arrowhead barbs both splayed the same way, so it read as a broken check mark rather than an arrow following the arc; use the standard clock-with-counterclockwise-arrow glyph, which also stays legible at footer size. - Give the run history page a footer, so it is not a dead end. Its first item leads back to the app. This lives in a new `PageFooter` component in js/core rather than being duplicated, since only the links that work outside `Blocks` belong on these pages: the API docs and settings panels are not mounted there. - Move the play glyph off the endpoint heading and onto "Load run", where it describes an action rather than decorating a label. - Make the per-endpoint run count a pill so it reads at a glance. - Show a failed run's message on hover instead of inline, with an info icon and a dotted underline to advertise it, plus the text for screen readers. The messages are long and only relevant to the one row that failed. - Fold the run count into the page title: "Run history (3) logged in ...". Co-Authored-By: Claude Opus 5 (1M context) --- gradio/blocks.py | 6 +- gradio/routes.py | 6 +- gradio/server.py | 2 +- js/core/package.json | 5 + js/core/src/Blocks.svelte | 25 +++-- js/core/src/PageFooter.svelte | 80 +++++++++++++++ js/core/src/api_docs/img/app-logo.svg | 5 + js/core/src/api_docs/img/history-logo.svg | 6 +- js/core/src/lang/en.json | 6 +- js/spa/src/Index.svelte | 2 +- js/spa/src/RunHistory.svelte | 113 ++++++++++++++++------ test/test_routes.py | 4 +- 12 files changed, 203 insertions(+), 57 deletions(-) create mode 100644 js/core/src/PageFooter.svelte create mode 100644 js/core/src/api_docs/img/app-logo.svg diff --git a/gradio/blocks.py b/gradio/blocks.py index 56a7385dc8b..46e7d14d001 100644 --- a/gradio/blocks.py +++ b/gradio/blocks.py @@ -2664,7 +2664,7 @@ def launch( ssl_verify: bool = True, quiet: bool = False, footer_links: list[ - Literal["api", "gradio", "settings", "history"] | dict[str, str] + Literal["api", "gradio", "settings", "runs"] | dict[str, str] ] | None = None, allowed_paths: list[str] | None = None, @@ -2718,7 +2718,7 @@ def launch( ssl_keyfile_password: If a password is provided, will use this with the ssl certificate for https. ssl_verify: If False, skips certificate validation which allows self-signed certificates to be used. quiet: If True, suppresses most print statements. - footer_links: The links to display in the footer of the app. Accepts a list, where each element of the list must be one of "api", "gradio", "settings", or "history" corresponding to the API docs, "built with Gradio", the settings page, and the run history page respectively. The "history" link only appears once the browser has saved runs for this app. If None, all four links will be shown in the footer. An empty list means that no footer is shown. + footer_links: The links to display in the footer of the app. Accepts a list, where each element of the list must be one of "api", "gradio", "settings", or "runs" corresponding to the API docs, "built with Gradio", the settings page, and the run history page respectively. The "runs" link only appears once the browser has saved runs for this app. If None, all four links will be shown in the footer. An empty list means that no footer is shown. allowed_paths: List of complete filepaths or parent directories that gradio is allowed to serve. Must be absolute paths. Warning: if you provide directories, any files in these directories or their subdirectories are accessible to all users of your app. Can be set by comma separated environment variable GRADIO_ALLOWED_PATHS. These files are generally assumed to be secure and will be displayed in the browser when possible. blocked_paths: List of complete filepaths or parent directories that gradio is not allowed to serve (i.e. users of your app are not allowed to access). Must be absolute paths. Warning: takes precedence over `allowed_paths` and all other directories exposed by Gradio by default. Can be set by comma separated environment variable GRADIO_BLOCKED_PATHS. root_path: The root path (or "mount point") of the application, if it's not served from the root ("/") of the domain. Often used when the application is behind a reverse proxy that forwards requests to the application. For example, if the application is served at "https://example.com/myapp", the `root_path` should be set to "/myapp". A full URL beginning with http:// or https:// can be provided, which will be used as the root path in its entirety. Can be set by environment variable GRADIO_ROOT_PATH. Defaults to "". @@ -2825,7 +2825,7 @@ def reverse(text): self.footer_links = ( footer_links if footer_links is not None - else ["api", "gradio", "settings", "history"] + else ["api", "gradio", "settings", "runs"] ) if allowed_paths: diff --git a/gradio/routes.py b/gradio/routes.py index 768a3bcbb67..79769935f6a 100644 --- a/gradio/routes.py +++ b/gradio/routes.py @@ -2493,7 +2493,7 @@ def mount_gradio_app( server_name: str = "0.0.0.0", server_port: int = 7860, footer_links: ( - list[Literal["api", "gradio", "settings", "history"] | dict[str, str]] | None + list[Literal["api", "gradio", "settings", "runs"] | dict[str, str]] | None ) = None, app_kwargs: dict[str, Any] | None = None, *, @@ -2538,7 +2538,7 @@ def mount_gradio_app( favicon_path: If a path to a file (.png, .gif, or .ico) is provided, it will be used as the favicon for this gradio app's page. show_error: If True, any errors in the gradio app will be displayed in an alert modal and printed in the browser console log. Otherwise, errors will only be visible in the terminal session running the Gradio app. max_file_size: The maximum file size in bytes that can be uploaded. Can be a string of the form "", where value is any positive integer and unit is one of "b", "kb", "mb", "gb", "tb". If None, no limit is set. - footer_links: The links to display in the footer of the app. Accepts a list, where each element of the list must be one of "api", "gradio", "settings", or "history" corresponding to the API docs, "built with Gradio", the settings page, and the run history page respectively. The "history" link only appears once the browser has saved runs for this app. If None, all four links will be shown in the footer. An empty list means that no footer is shown. + footer_links: The links to display in the footer of the app. Accepts a list, where each element of the list must be one of "api", "gradio", "settings", or "runs" corresponding to the API docs, "built with Gradio", the settings page, and the run history page respectively. The "runs" link only appears once the browser has saved runs for this app. If None, all four links will be shown in the footer. An empty list means that no footer is shown. ssr_mode: If True, the Gradio app will be rendered using server-side rendering mode, which is typically more performant and provides better SEO, but this requires Node 20+ to be installed on the system. If False, the app will be rendered using client-side rendering mode. If None, will use GRADIO_SSR_MODE environment variable or default to False. node_server_name: The name of the Node server to use for SSR. If None, will use GRADIO_NODE_SERVER_NAME environment variable or search for a node binary in the system. i18n: If provided, the i18n instance to use for this gradio app. @@ -2569,7 +2569,7 @@ def read_main(): blocks.dev_mode = False if footer_links is None: - footer_links = ["api", "gradio", "settings", "history"] + footer_links = ["api", "gradio", "settings", "runs"] blocks.footer_links = footer_links blocks.max_file_size = utils._parse_file_size(max_file_size) blocks.config = blocks.get_config_file() diff --git a/gradio/server.py b/gradio/server.py index 56105c305b3..5bbfe78b9da 100644 --- a/gradio/server.py +++ b/gradio/server.py @@ -243,7 +243,7 @@ def launch( ssl_verify: bool = True, quiet: bool = False, footer_links: list[ - Literal["api", "gradio", "settings", "history"] | dict[str, str] + Literal["api", "gradio", "settings", "runs"] | dict[str, str] ] | None = None, allowed_paths: list[str] | None = None, diff --git a/js/core/package.json b/js/core/package.json index a002cc6a640..6287966a480 100644 --- a/js/core/package.json +++ b/js/core/package.json @@ -79,6 +79,11 @@ "svelte": "./dist/src/Login.svelte", "types": "./dist/src/Login.svelte.d.ts" }, + "./page_footer": { + "gradio": "./src/PageFooter.svelte", + "svelte": "./dist/src/PageFooter.svelte", + "types": "./dist/src/PageFooter.svelte.d.ts" + }, "./navbar_store": { "gradio": "./src/navbar_store.ts", "import": "./src/navbar_store.ts", diff --git a/js/core/src/Blocks.svelte b/js/core/src/Blocks.svelte index 9190b211e7d..f5cfc7fd522 100644 --- a/js/core/src/Blocks.svelte +++ b/js/core/src/Blocks.svelte @@ -524,6 +524,17 @@ bind:clientHeight={footer_height} aria-label="Gradio footer navigation" > + {#if footer_links.includes("runs") && run_count > 0} + + {$reactive_formatter("common.runs")} + {$reactive_formatter("common.runs")} + +
·
+ {/if} {#if footer_links.includes("api")} - {#if footer_links.includes("history") && run_count > 0} -
·
- - {$reactive_formatter("common.run_history")} - {$reactive_formatter("common.run_history")} - - {/if}
·
{#if footer_links.includes("settings")}
·
diff --git a/js/core/src/PageFooter.svelte b/js/core/src/PageFooter.svelte new file mode 100644 index 00000000000..fecb46685dc --- /dev/null +++ b/js/core/src/PageFooter.svelte @@ -0,0 +1,80 @@ + + + +{#if footer_links.length > 0} + +{/if} + + diff --git a/js/core/src/api_docs/img/app-logo.svg b/js/core/src/api_docs/img/app-logo.svg new file mode 100644 index 00000000000..4bc90320f04 --- /dev/null +++ b/js/core/src/api_docs/img/app-logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/js/core/src/api_docs/img/history-logo.svg b/js/core/src/api_docs/img/history-logo.svg index 3842d66a62c..98495cf81a4 100644 --- a/js/core/src/api_docs/img/history-logo.svg +++ b/js/core/src/api_docs/img/history-logo.svg @@ -1,5 +1,3 @@ - - - - + + diff --git a/js/core/src/lang/en.json b/js/core/src/lang/en.json index b75fbc87c77..3f7251946c4 100644 --- a/js/core/src/lang/en.json +++ b/js/core/src/lang/en.json @@ -71,8 +71,10 @@ "logo": "logo", "or": "or", "remove": "Remove", - "run_history": "History", - "run_history_description": "View runs saved in this browser", + "runs": "Runs", + "runs_description": "View runs saved in this browser", + "back_to_app": "App", + "back_to_app_description": "Return to the app", "settings": "Settings", "share": "Share", "submit": "Submit", diff --git a/js/spa/src/Index.svelte b/js/spa/src/Index.svelte index 6e96c6fa7cd..fa7336edca8 100644 --- a/js/spa/src/Index.svelte +++ b/js/spa/src/Index.svelte @@ -693,7 +693,7 @@ {app_mode} /> {:else if config && css_ready && run_history} - + {:else if config && Blocks && css_ready} )[]; } - let { root }: Props = $props(); + let { root, footer_links = [] }: Props = $props(); + + let app_url = $derived(new URL(root, window.location.href).href); let runs: StoredRun[] = $state([]); let groups = $derived.by(() => { @@ -140,7 +145,7 @@

Run history

- Runs ({runs.length}) logged in + ({runs.length}) logged in Local Storage, privately in this browser.
- {api_name} {endpoint_runs.length} @@ -229,8 +233,39 @@ class:failed={run.status === "failed"} class:running={run.status === "running"} > - - {status_label(run)} + {#if run.error} + + + + {status_label(run)} + + + {:else} + + {status_label(run)} + {/if} {#if run.duration_ms !== undefined} in {format_duration(run.duration_ms)}{format_time(run.started_at)} - {#if run.error}{run.error}{/if}
- + @@ -256,6 +290,8 @@ {/each} {/if} + +
diff --git a/test/test_routes.py b/test/test_routes.py index 156a89ffad1..6f2ccffea23 100644 --- a/test/test_routes.py +++ b/test/test_routes.py @@ -1347,7 +1347,7 @@ def test_run_history_is_a_default_footer_link(): app, _, _ = demo.launch(prevent_thread_lock=True) client = TestClient(app) config = client.get("/config").json() - assert config["footer_links"] == ["api", "gradio", "settings", "history"] + assert config["footer_links"] == ["api", "gradio", "settings", "runs"] finally: demo.close() @@ -1361,7 +1361,7 @@ def test_footer_links_can_exclude_run_history(): ) client = TestClient(app) config = client.get("/config").json() - assert "history" not in config["footer_links"] + assert "runs" not in config["footer_links"] finally: demo.close() From cbce97540fcb0ce5b10954dd0342032c848e2a80 Mon Sep 17 00:00:00 2001 From: Abubakar Abid Date: Mon, 10 Aug 2026 12:31:02 -0700 Subject: [PATCH 10/19] Reveal a failed run's message on hover instead of via `title` The dotted underline promised a message that never arrived: a native `title` tooltip is slow enough to miss and cannot be clicked. Replace it with a real bubble that appears immediately on hover, toggles on click for touch, shows on keyboard focus, and dismisses on Escape. Escape also drops focus, since pressing a key would otherwise promote the trigger to `:focus-visible` and keep the message on screen after dismissing it. The info icon goes away too, as the underline already advertises the message, so a failed run gets the same status dot as every other run. The groups no longer clip their overflow, so a bubble cannot be cut off; the header rounds its own corners instead. Also fold the run count into the heading: "Run history (3)". Co-Authored-By: Claude Opus 5 (1M context) --- js/spa/src/RunHistory.svelte | 112 +++++++++++++++++++++++------------ 1 file changed, 73 insertions(+), 39 deletions(-) diff --git a/js/spa/src/RunHistory.svelte b/js/spa/src/RunHistory.svelte index 271d61d00d7..b32326f1c2b 100644 --- a/js/spa/src/RunHistory.svelte +++ b/js/spa/src/RunHistory.svelte @@ -119,6 +119,25 @@ return run.status === "failed" ? "Failed" : "Running"; } + // Hover reveals the error, but tapping has to work too, and a touch device + // has no hover to offer. + let open_error: string | null = $state(null); + + function toggle_error(id: string): void { + open_error = open_error === id ? null : id; + } + + function close_error(event: KeyboardEvent): void { + if (event.key !== "Escape") return; + open_error = null; + // Pressing a key promotes the trigger to `:focus-visible`, which would + // keep the message on screen even though it was just dismissed. + const active = document.activeElement; + if (active instanceof HTMLElement && active.matches(".error-trigger")) { + active.blur(); + } + } + function load(run: StoredRun): void { stage_run_history_replay(root, run); const app_url = new URL(root, window.location.href); @@ -140,12 +159,14 @@ } + +
-

Run history

+

Run history ({runs.length})

- ({runs.length}) logged in + logged in Local Storage, privately in this browser. + {#if run.error} - - + + - - - - - {status_label(run)} {:else} - {status_label(run)} {/if} {#if run.duration_ms !== undefined} @@ -400,7 +408,8 @@ border-color: var(--color-accent, #ea580c); } .group { - overflow: hidden; + /* Not `overflow: hidden`, so an error bubble is never clipped. The + header rounds its own corners instead. */ margin-top: 24px; border: 1px solid var(--border-color-primary, #e4e4e7); border-radius: var(--radius-xl, 12px); @@ -411,6 +420,7 @@ gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border-color-primary, #e4e4e7); + border-radius: var(--radius-xl, 12px) var(--radius-xl, 12px) 0 0; background: var(--background-fill-secondary, #fafafa); font-size: var(--text-lg, 18px); font-weight: var(--weight-semibold, 600); @@ -512,23 +522,47 @@ border-radius: 50%; background: currentColor; } - .has-error { + .error-anchor { display: inline-flex; - align-items: center; - gap: 6px; + position: relative; + } + .error-trigger { + padding: 0; + border: 0; + background: none; + color: inherit; + font: inherit; + font-weight: 600; cursor: help; - } - .info { - width: 13px; - height: 13px; - flex-shrink: 0; - } - /* Signals that hovering reveals the error message. */ - .has-error .status-word { + /* Signals that there is a message to reveal. */ text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 3px; } + .error-bubble { + display: none; + position: absolute; + bottom: calc(100% + 7px); + left: 0; + z-index: 5; + box-sizing: border-box; + width: max-content; + max-width: min(320px, 60vw); + padding: 6px 9px; + border-radius: var(--radius-md, 6px); + background: var(--body-text-color, #27272a); + color: var(--background-fill-primary, #fff); + font-weight: 400; + font-size: 12px; + line-height: 1.4; + white-space: normal; + box-shadow: 0 2px 8px rgb(0 0 0 / 18%); + } + .error-anchor:hover .error-bubble, + .error-trigger:focus-visible ~ .error-bubble, + .error-anchor.open .error-bubble { + display: block; + } .visually-hidden { position: absolute; width: 1px; From 7602b957d0a249652afc0e043e68a8c0c9f2ff9a Mon Sep 17 00:00:00 2001 From: Abubakar Abid Date: Mon, 10 Aug 2026 12:53:00 -0700 Subject: [PATCH 11/19] Only record real API endpoints, and never let saving break an app Gradio wires up its own dependencies for loading examples, flagging and clearing, and `gr.Examples` marks all of them "undocumented". Two of them fire on page load when examples are preloaded, so simply opening an app with cached examples added two runs to the history before the user touched anything, and clicking an example added more. Record only "public" dependencies, which is also the set a user could call as an API and so matches what "runs" means. Run history is a side effect of submitting, never the point of it, so route every exported function through a helper that swallows and logs failures. Storage quota, a value that will not serialise, a browser with storage disabled, or a listener that throws can no longer propagate into `submit`. Co-Authored-By: Claude Opus 5 (1M context) --- client/js/src/test/run_history.test.ts | 61 +++++++++++++++++ client/js/src/utils/run_history.ts | 92 ++++++++++++++++++++++---- client/js/src/utils/submit.ts | 45 ++++++++----- 3 files changed, 167 insertions(+), 31 deletions(-) diff --git a/client/js/src/test/run_history.test.ts b/client/js/src/test/run_history.test.ts index 1c50a34dbc0..46ea23370cc 100644 --- a/client/js/src/test/run_history.test.ts +++ b/client/js/src/test/run_history.test.ts @@ -337,6 +337,67 @@ describe.skipIf(!in_browser)("run history", () => { expect(notified).toBe(3); }); + test("never throws, whatever it is handed", () => { + const circular: Record = {}; + circular.self = circular; + + // A value that cannot be serialised, and a storage that rejects writes. + const set = window.localStorage.setItem; + window.localStorage.setItem = () => { + throw new Error("storage is full"); + }; + try { + expect(() => + start_run_history({ + root, + endpoint: "/predict", + api_name: "/predict", + fn_index: 0, + inputs: [circular, BigInt(3), () => "fn"] + }) + ).not.toThrow(); + expect(() => read_run_history(root)).not.toThrow(); + expect(() => clear_run_history(root)).not.toThrow(); + expect(() => delete_run_history(root, "missing")).not.toThrow(); + expect(() => + update_run_history(root, "missing", { + type: "status", + endpoint: "/predict", + fn_index: 0, + queue: false, + stage: "complete" + }) + ).not.toThrow(); + expect(() => update_run_inputs(root, "missing", [1])).not.toThrow(); + } finally { + window.localStorage.setItem = set; + } + }); + + test("survives a listener that throws", () => { + let reached = false; + const unsubscribe = on_run_history_change(() => { + throw new Error("listener blew up"); + }); + const second = on_run_history_change(() => { + reached = true; + }); + + expect(() => + start_run_history({ + root, + endpoint: "/predict", + api_name: "/predict", + fn_index: 0, + inputs: ["hello"] + }) + ).not.toThrow(); + expect(reached).toBe(true); + + unsubscribe(); + second(); + }); + test("stages a run once so it can be loaded on its saved page", () => { const id = start_run_history({ root, diff --git a/client/js/src/utils/run_history.ts b/client/js/src/utils/run_history.ts index 878814de51f..2fba9b8ccf1 100644 --- a/client/js/src/utils/run_history.ts +++ b/client/js/src/utils/run_history.ts @@ -4,6 +4,20 @@ const STORAGE_PREFIX = "gradio:run-history:v1:"; const REPLAY_PREFIX = "gradio:run-history:replay:v1:"; const MAX_RUNS = 100; +/** + * Run history is a side effect of submitting, never the point of it, so no + * failure in here may propagate into the caller and break the app. Every + * exported function routes through this. + */ +function safely(operation: () => T, fallback: T): T { + try { + return operation(); + } catch (error) { + console.warn("Could not update the run history.", error); + return fallback; + } +} + export type RunStatus = "running" | "completed" | "failed"; export interface StoredRunComponent { @@ -100,7 +114,7 @@ function clone_for_storage(value: unknown): unknown { } } -export function read_run_history(root: string): StoredRun[] { +function read_run_history_impl(root: string): StoredRun[] { const key = storage_key(root); if (!key) return []; @@ -132,7 +146,7 @@ function write_run_history(root: string, runs: StoredRun[]): void { } } -export function clear_run_history(root: string): void { +function clear_run_history_impl(root: string): void { const key = storage_key(root); if (!key) return; try { @@ -143,10 +157,10 @@ export function clear_run_history(root: string): void { notify_run_history_change(); } -export function delete_run_history(root: string, id: string): void { +function delete_run_history_impl(root: string, id: string): void { write_run_history( root, - read_run_history(root).filter((run) => run.id !== id) + read_run_history_impl(root).filter((run) => run.id !== id) ); notify_run_history_change(); } @@ -169,7 +183,7 @@ function notify_run_history_change(): void { * * @returns a function that unsubscribes. */ -export function on_run_history_change(listener: () => void): () => void { +function on_run_history_change_impl(listener: () => void): () => void { if (typeof window === "undefined") return () => {}; window.addEventListener(CHANGE_EVENT, listener); window.addEventListener("storage", listener); @@ -179,7 +193,7 @@ export function on_run_history_change(listener: () => void): () => void { }; } -export function stage_run_history_replay(root: string, run: StoredRun): void { +function stage_run_history_replay_impl(root: string, run: StoredRun): void { const key = replay_key(root); if (!key) return; try { @@ -189,7 +203,7 @@ export function stage_run_history_replay(root: string, run: StoredRun): void { } } -export function consume_run_history_replay(root: string): StoredRun | null { +function consume_run_history_replay_impl(root: string): StoredRun | null { const key = replay_key(root); if (!key) return null; try { @@ -201,7 +215,7 @@ export function consume_run_history_replay(root: string): StoredRun | null { } } -export function start_run_history(options: StartRunOptions): string | null { +function start_run_history_impl(options: StartRunOptions): string | null { const key = storage_key(options.root); if (!key) return null; @@ -230,33 +244,36 @@ export function start_run_history(options: StartRunOptions): string | null { status: "running", started_at: new Date().toISOString() }; - write_run_history(options.root, [run, ...read_run_history(options.root)]); + write_run_history(options.root, [ + run, + ...read_run_history_impl(options.root) + ]); notify_run_history_change(); return run.id; } -export function update_run_inputs( +function update_run_inputs_impl( root: string, id: string | null, inputs: unknown ): void { if (!id) return; - const runs = read_run_history(root); + const runs = read_run_history_impl(root); const run = runs.find((item) => item.id === id); if (!run) return; run.inputs = clone_for_storage(inputs); write_run_history(root, runs); } -export function update_run_history( +function update_run_history_impl( root: string, id: string | null, event: GradioEvent ): void { if (!id) return; - const runs = read_run_history(root); + const runs = read_run_history_impl(root); const run = runs.find((item) => item.id === id); if (!run) return; @@ -316,3 +333,52 @@ function mark_complete(run: StoredRun, event: StatusMessage): void { completed.getTime() - Date.parse(run.process_started_at || run.started_at) ); } + +// Public API. Each of these is a no-op if anything goes wrong. + +export function read_run_history(root: string): StoredRun[] { + return safely(() => read_run_history_impl(root), []); +} + +export function clear_run_history(root: string): void { + safely(() => clear_run_history_impl(root), undefined); +} + +export function delete_run_history(root: string, id: string): void { + safely(() => delete_run_history_impl(root, id), undefined); +} + +export function stage_run_history_replay(root: string, run: StoredRun): void { + safely(() => stage_run_history_replay_impl(root, run), undefined); +} + +export function consume_run_history_replay(root: string): StoredRun | null { + return safely(() => consume_run_history_replay_impl(root), null); +} + +export function start_run_history(options: StartRunOptions): string | null { + return safely(() => start_run_history_impl(options), null); +} + +export function update_run_inputs( + root: string, + id: string | null, + inputs: unknown +): void { + safely(() => update_run_inputs_impl(root, id, inputs), undefined); +} + +export function update_run_history( + root: string, + id: string | null, + event: GradioEvent +): void { + safely(() => update_run_history_impl(root, id, event), undefined); +} + +export function on_run_history_change(listener: () => void): () => void { + return safely( + () => on_run_history_change_impl(() => safely(listener, undefined)), + () => {} + ); +} diff --git a/client/js/src/utils/submit.ts b/client/js/src/utils/submit.ts index c760a46c45b..4a5c7bf4a59 100644 --- a/client/js/src/utils/submit.ts +++ b/client/js/src/utils/submit.ts @@ -101,24 +101,33 @@ export function submit( props: component.props }; }; - const history_run_id = start_run_history({ - root: config.root, - endpoint: history_endpoint, - api_name: history_api_name, - fn_index, - // Aligned to `dependency.inputs` the same way the submitted payload is, - // so this placeholder matches the components until the uploaded files - // are swapped in by `update_run_inputs` below. - inputs: handle_payload( - resolved_data, - dependency, - config.components, - "input", - true - ), - input_components: dependency.inputs.map(component_metadata), - output_components: dependency.outputs.map(component_metadata) - }); + // Only real API endpoints count as runs. Gradio's own example loading, + // flagging and clear-button dependencies are all "undocumented" or + // "private", and the ones that preload examples fire on page load, so + // recording them would fill the history before the user does anything. + const is_api_endpoint = + dependency.api_visibility === undefined || + dependency.api_visibility === "public"; + const history_run_id = !is_api_endpoint + ? null + : start_run_history({ + root: config.root, + endpoint: history_endpoint, + api_name: history_api_name, + fn_index, + // Aligned to `dependency.inputs` the same way the submitted payload + // is, so this placeholder matches the components until the uploaded + // files are swapped in by `update_run_inputs` below. + inputs: handle_payload( + resolved_data, + dependency, + config.components, + "input", + true + ), + input_components: dependency.inputs.map(component_metadata), + output_components: dependency.outputs.map(component_metadata) + }); let stream: EventSource | null; let event_id_final = ""; From b4ab0ce15d5ad314b97c82dbda534c677fb233cf Mon Sep 17 00:00:00 2001 From: Abubakar Abid Date: Mon, 10 Aug 2026 13:20:59 -0700 Subject: [PATCH 12/19] Key run history on the app id, and reshape values for the previews MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Storage was keyed on the app's URL path, so stopping one app and starting a different one on the same port made them share a history. Key on `app_id` instead. That id is regenerated whenever an app starts, so a restart now begins a fresh history — including in reload mode — which is the accepted trade for keeping apps separate. That does mean every restart orphans a history, so prune the ones left behind rather than let the browser accumulate every history an app ever had until it runs out of room for the current one. Pruning also runs before giving up on the oldest runs of the current app when a write hits the quota. The Example renderers are reused for previews, but they were written for the values in an `Examples` dataset, which are not always shaped like the live values a run produces: a dataframe arrives as `{headers, data}` where the renderer wants rows of cells, and audio and file renderers print their value as text, so a `FileData` came out as "[object Object]". Reshape the value for the renderer instead of falling back to JSON, and fall back to text only when a renderer draws nothing at all. Summaries also read a `gr.Label` as its winning label and `gr.HighlightedText` as its sentence, and a sub-millisecond run now reads "<1ms" rather than "0ms". Co-Authored-By: Claude Opus 5 (1M context) --- client/js/src/test/run_history.test.ts | 185 ++++++++++++++++--------- client/js/src/utils/run_history.ts | 153 ++++++++++++++------ client/js/src/utils/submit.ts | 6 +- js/core/src/Blocks.svelte | 3 +- js/core/src/api_docs/Settings.svelte | 3 +- js/spa/src/Index.svelte | 8 +- js/spa/src/RunHistory.svelte | 23 ++- js/spa/src/RunValue.svelte | 23 +-- js/spa/src/run_value.ts | 80 +++++++++++ 9 files changed, 344 insertions(+), 140 deletions(-) create mode 100644 js/spa/src/run_value.ts diff --git a/client/js/src/test/run_history.test.ts b/client/js/src/test/run_history.test.ts index 46ea23370cc..684e0858cfc 100644 --- a/client/js/src/test/run_history.test.ts +++ b/client/js/src/test/run_history.test.ts @@ -13,15 +13,19 @@ import { update_run_inputs } from "../utils/run_history"; -const root = "http://localhost:7860/my-app/"; +const app_id = "app-under-test"; +const other_app = "some-other-app"; const in_browser = typeof window !== "undefined"; -afterEach(() => clear_run_history(root)); +afterEach(() => { + clear_run_history(app_id); + clear_run_history(other_app); +}); describe.skipIf(!in_browser)("run history", () => { - test("stores runs per app root with the page and inputs", () => { + test("stores runs per app id with the page and inputs", () => { const id = start_run_history({ - root, + app_id, endpoint: "/predict", api_name: "/predict", fn_index: 0, @@ -35,7 +39,7 @@ describe.skipIf(!in_browser)("run history", () => { ] }); - const runs = read_run_history(root); + const runs = read_run_history(app_id); expect(runs).toHaveLength(1); expect(runs[0]).toMatchObject({ id, @@ -52,43 +56,43 @@ describe.skipIf(!in_browser)("run history", () => { ], page: `${window.location.pathname}${window.location.search}` }); - expect(read_run_history("http://localhost:7860/other-app/")).toEqual([]); + expect(read_run_history(other_app)).toEqual([]); }); test("replaces inputs with their upload-processed values", () => { const id = start_run_history({ - root, + app_id, endpoint: "/predict", api_name: "/predict", fn_index: 0, inputs: [new File(["hello"], "hello.txt")] }); - update_run_inputs(root, id, [ + update_run_inputs(app_id, id, [ { path: "/tmp/hello.txt", url: "/gradio_api/file=/tmp/hello.txt" } ]); - expect(read_run_history(root)[0].inputs).toEqual([ + expect(read_run_history(app_id)[0].inputs).toEqual([ { path: "/tmp/hello.txt", url: "/gradio_api/file=/tmp/hello.txt" } ]); }); test("updates outputs and completion state", () => { const id = start_run_history({ - root, + app_id, endpoint: "/predict", api_name: "/predict", fn_index: 0, inputs: ["hello"] }); - update_run_history(root, id, { + update_run_history(app_id, id, { type: "data", endpoint: "/predict", fn_index: 0, data: ["hello hello"] }); - update_run_history(root, id, { + update_run_history(app_id, id, { type: "status", endpoint: "/predict", fn_index: 0, @@ -97,7 +101,7 @@ describe.skipIf(!in_browser)("run history", () => { time: new Date("2025-05-16T21:45:00Z") }); - expect(read_run_history(root)[0]).toMatchObject({ + expect(read_run_history(app_id)[0]).toMatchObject({ outputs: ["hello hello"], status: "completed", completed_at: "2025-05-16T21:45:00.000Z" @@ -106,14 +110,14 @@ describe.skipIf(!in_browser)("run history", () => { test("records the runtime reported by the server", () => { const id = start_run_history({ - root, + app_id, endpoint: "/predict", api_name: "/predict", fn_index: 0, inputs: ["hello"] }); - update_run_history(root, id, { + update_run_history(app_id, id, { type: "status", endpoint: "/predict", fn_index: 0, @@ -123,7 +127,7 @@ describe.skipIf(!in_browser)("run history", () => { time: new Date("2025-05-16T21:45:00Z") }); - expect(read_run_history(root)[0]).toMatchObject({ + expect(read_run_history(app_id)[0]).toMatchObject({ duration_ms: 1250, completed_at: "2025-05-16T21:45:00.000Z" }); @@ -131,15 +135,15 @@ describe.skipIf(!in_browser)("run history", () => { test("times a streamed run by its elapsed time, not its last chunk", () => { const id = start_run_history({ - root, + app_id, endpoint: "/predict", api_name: "/predict", fn_index: 0, inputs: ["hello"] }); - const started_at = read_run_history(root)[0].started_at; + const started_at = read_run_history(app_id)[0].started_at; - update_run_history(root, id, { + update_run_history(app_id, id, { type: "status", endpoint: "/predict", fn_index: 0, @@ -148,7 +152,7 @@ describe.skipIf(!in_browser)("run history", () => { original_msg: "process_starts", time: new Date(Date.parse(started_at) + 100) }); - update_run_history(root, id, { + update_run_history(app_id, id, { type: "status", endpoint: "/predict", fn_index: 0, @@ -158,7 +162,7 @@ describe.skipIf(!in_browser)("run history", () => { }); // A generator reports the duration of its final chunk only, which would // make a multi-second run look instantaneous. - update_run_history(root, id, { + update_run_history(app_id, id, { type: "status", endpoint: "/predict", fn_index: 0, @@ -168,7 +172,7 @@ describe.skipIf(!in_browser)("run history", () => { time: new Date(Date.parse(started_at) + 1600) }); - expect(read_run_history(root)[0]).toMatchObject({ + expect(read_run_history(app_id)[0]).toMatchObject({ streamed: true, duration_ms: 1500 }); @@ -176,15 +180,15 @@ describe.skipIf(!in_browser)("run history", () => { test("measures the runtime from when the queue starts the function", () => { const id = start_run_history({ - root, + app_id, endpoint: "/predict", api_name: "/predict", fn_index: 0, inputs: ["hello"] }); - const started_at = read_run_history(root)[0].started_at; + const started_at = read_run_history(app_id)[0].started_at; - update_run_history(root, id, { + update_run_history(app_id, id, { type: "status", endpoint: "/predict", fn_index: 0, @@ -193,7 +197,7 @@ describe.skipIf(!in_browser)("run history", () => { original_msg: "process_starts", time: new Date(Date.parse(started_at) + 400) }); - update_run_history(root, id, { + update_run_history(app_id, id, { type: "status", endpoint: "/predict", fn_index: 0, @@ -203,7 +207,7 @@ describe.skipIf(!in_browser)("run history", () => { }); // The queue wait is reported separately so it does not inflate the runtime. - expect(read_run_history(root)[0]).toMatchObject({ + expect(read_run_history(app_id)[0]).toMatchObject({ queued_ms: 400, duration_ms: 1000 }); @@ -211,15 +215,15 @@ describe.skipIf(!in_browser)("run history", () => { test("falls back to the elapsed time when the server reports none", () => { const id = start_run_history({ - root, + app_id, endpoint: "/predict", api_name: "/predict", fn_index: 0, inputs: ["hello"] }); - const started_at = read_run_history(root)[0].started_at; + const started_at = read_run_history(app_id)[0].started_at; - update_run_history(root, id, { + update_run_history(app_id, id, { type: "status", endpoint: "/predict", fn_index: 0, @@ -228,21 +232,21 @@ describe.skipIf(!in_browser)("run history", () => { time: new Date(Date.parse(started_at) + 250) }); - const run = read_run_history(root)[0]; + const run = read_run_history(app_id)[0]; expect(run.duration_ms).toBe(250); expect(run.queued_ms).toBeUndefined(); }); test("records failed runs and their error message", () => { const id = start_run_history({ - root, + app_id, endpoint: 3, api_name: "Function 3", fn_index: 3, inputs: [{ circular: null }] }); - update_run_history(root, id, { + update_run_history(app_id, id, { type: "status", endpoint: "/predict", fn_index: 3, @@ -251,17 +255,17 @@ describe.skipIf(!in_browser)("run history", () => { message: "generation failed" }); - expect(read_run_history(root)[0]).toMatchObject({ + expect(read_run_history(app_id)[0]).toMatchObject({ status: "failed", error: "generation failed" }); - expect(read_run_history(root)[0].duration_ms).toBeGreaterThanOrEqual(0); + expect(read_run_history(app_id)[0].duration_ms).toBeGreaterThanOrEqual(0); }); test("keeps only the newest 100 runs", () => { for (let index = 0; index < 105; index++) { start_run_history({ - root, + app_id, endpoint: "/predict", api_name: "/predict", fn_index: 0, @@ -269,7 +273,7 @@ describe.skipIf(!in_browser)("run history", () => { }); } - const runs = read_run_history(root); + const runs = read_run_history(app_id); expect(runs).toHaveLength(100); expect(runs[0].inputs).toEqual([104]); expect(runs.at(-1)?.inputs).toEqual([5]); @@ -277,24 +281,24 @@ describe.skipIf(!in_browser)("run history", () => { test("deletes an individual run", () => { const first = start_run_history({ - root, + app_id, endpoint: "/predict", api_name: "/predict", fn_index: 0, inputs: ["first"] }); start_run_history({ - root, + app_id, endpoint: "/predict", api_name: "/predict", fn_index: 0, inputs: ["second"] }); - delete_run_history(root, first!); + delete_run_history(app_id, first!); - expect(read_run_history(root)).toHaveLength(1); - expect(read_run_history(root)[0].inputs).toEqual(["second"]); + expect(read_run_history(app_id)).toHaveLength(1); + expect(read_run_history(app_id)[0].inputs).toEqual(["second"]); }); test("notifies this tab when runs are added, deleted or cleared", () => { @@ -302,7 +306,7 @@ describe.skipIf(!in_browser)("run history", () => { const unsubscribe = on_run_history_change(() => notified++); const id = start_run_history({ - root, + app_id, endpoint: "/predict", api_name: "/predict", fn_index: 0, @@ -311,7 +315,7 @@ describe.skipIf(!in_browser)("run history", () => { expect(notified).toBe(1); // Progress updates are not structural, so they must not notify. - update_run_history(root, id, { + update_run_history(app_id, id, { type: "status", endpoint: "/predict", fn_index: 0, @@ -320,15 +324,15 @@ describe.skipIf(!in_browser)("run history", () => { }); expect(notified).toBe(1); - delete_run_history(root, id!); + delete_run_history(app_id, id!); expect(notified).toBe(2); - clear_run_history(root); + clear_run_history(app_id); expect(notified).toBe(3); unsubscribe(); start_run_history({ - root, + app_id, endpoint: "/predict", api_name: "/predict", fn_index: 0, @@ -337,6 +341,63 @@ describe.skipIf(!in_browser)("run history", () => { expect(notified).toBe(3); }); + test("keeps a separate history per app id", () => { + start_run_history({ + app_id, + endpoint: "/predict", + api_name: "/predict", + fn_index: 0, + inputs: ["mine"] + }); + start_run_history({ + app_id: other_app, + endpoint: "/predict", + api_name: "/predict", + fn_index: 0, + inputs: ["theirs"] + }); + + expect(read_run_history(app_id)[0].inputs).toEqual(["mine"]); + expect(read_run_history(other_app)[0].inputs).toEqual(["theirs"]); + }); + + test("does nothing at all without an app id", () => { + expect( + start_run_history({ + app_id: undefined, + endpoint: "/predict", + api_name: "/predict", + fn_index: 0, + inputs: ["hello"] + }) + ).toBeNull(); + expect(read_run_history(undefined)).toEqual([]); + expect(read_run_history(null)).toEqual([]); + expect(read_run_history("")).toEqual([]); + }); + + test("drops the histories of app instances that are long gone", () => { + // Each restart of an app mints a new id, so without pruning the browser + // would hold every history the app ever had. + const ids = Array.from({ length: 14 }, (_, index) => `restart-${index}`); + for (const id of ids) { + start_run_history({ + app_id: id, + endpoint: "/predict", + api_name: "/predict", + fn_index: 0, + inputs: [id] + }); + } + + const remaining = ids.filter((id) => read_run_history(id).length > 0); + expect(remaining.length).toBeLessThanOrEqual(8); + // The newest instance always survives. + expect(remaining).toContain(ids.at(-1)); + + ids.forEach(clear_run_history); + }); + test("never throws, whatever it is handed", () => { const circular: Record = {}; circular.self = circular; @@ -349,18 +410,18 @@ describe.skipIf(!in_browser)("run history", () => { try { expect(() => start_run_history({ - root, + app_id, endpoint: "/predict", api_name: "/predict", fn_index: 0, inputs: [circular, BigInt(3), () => "fn"] }) ).not.toThrow(); - expect(() => read_run_history(root)).not.toThrow(); - expect(() => clear_run_history(root)).not.toThrow(); - expect(() => delete_run_history(root, "missing")).not.toThrow(); + expect(() => read_run_history(app_id)).not.toThrow(); + expect(() => clear_run_history(app_id)).not.toThrow(); + expect(() => delete_run_history(app_id, "missing")).not.toThrow(); expect(() => - update_run_history(root, "missing", { + update_run_history(app_id, "missing", { type: "status", endpoint: "/predict", fn_index: 0, @@ -368,7 +429,7 @@ describe.skipIf(!in_browser)("run history", () => { stage: "complete" }) ).not.toThrow(); - expect(() => update_run_inputs(root, "missing", [1])).not.toThrow(); + expect(() => update_run_inputs(app_id, "missing", [1])).not.toThrow(); } finally { window.localStorage.setItem = set; } @@ -385,7 +446,7 @@ describe.skipIf(!in_browser)("run history", () => { expect(() => start_run_history({ - root, + app_id, endpoint: "/predict", api_name: "/predict", fn_index: 0, @@ -400,18 +461,18 @@ describe.skipIf(!in_browser)("run history", () => { test("stages a run once so it can be loaded on its saved page", () => { const id = start_run_history({ - root, + app_id, endpoint: "/predict", api_name: "/predict", fn_index: 0, inputs: ["hello"] }); - const run = read_run_history(root).find((item) => item.id === id)!; + const run = read_run_history(app_id).find((item) => item.id === id)!; - stage_run_history_replay(root, run); + stage_run_history_replay(app_id, run); - expect(consume_run_history_replay(root)).toEqual(run); - expect(consume_run_history_replay(root)).toBeNull(); + expect(consume_run_history_replay(app_id)).toEqual(run); + expect(consume_run_history_replay(app_id)).toBeNull(); }); }); @@ -433,14 +494,14 @@ describe.skipIf(in_browser)("run history outside the browser", () => { test("is a no-op without storage", () => { expect( start_run_history({ - root, + app_id, endpoint: "/predict", api_name: "/predict", fn_index: 0, inputs: ["hello"] }) ).toBeNull(); - expect(read_run_history(root)).toEqual([]); - expect(consume_run_history_replay(root)).toBeNull(); + expect(read_run_history(app_id)).toEqual([]); + expect(consume_run_history_replay(app_id)).toBeNull(); }); }); diff --git a/client/js/src/utils/run_history.ts b/client/js/src/utils/run_history.ts index 2fba9b8ccf1..92325b7662d 100644 --- a/client/js/src/utils/run_history.ts +++ b/client/js/src/utils/run_history.ts @@ -1,8 +1,16 @@ import type { GradioEvent, StatusMessage } from "../types"; -const STORAGE_PREFIX = "gradio:run-history:v1:"; -const REPLAY_PREFIX = "gradio:run-history:replay:v1:"; +// Keyed on the app id, so two different apps served on the same port never +// share a history. The id is regenerated whenever an app starts, so a restart +// begins a fresh history and leaves the previous one orphaned; `prune_apps` +// keeps those from accumulating. +const KEY_ROOT = "gradio:run-history:"; +const STORAGE_PREFIX = `${KEY_ROOT}v2:`; +const REPLAY_PREFIX = `${KEY_ROOT}replay:v2:`; const MAX_RUNS = 100; +const MAX_APPS = 8; + +export type AppId = string | number | null | undefined; /** * Run history is a side effect of submitting, never the point of it, so no @@ -51,7 +59,7 @@ export interface StoredRun { } interface StartRunOptions { - root: string; + app_id: AppId; endpoint: string | number; api_name: string; fn_index: number; @@ -71,24 +79,67 @@ export function run_history_url( return `${root.replace(/\/+$/, "")}${api_prefix}/runs`; } -function storage_key(root: string): string | null { +function storage_key(app_id: AppId): string | null { if (typeof window === "undefined") return null; + if (app_id === null || app_id === undefined || app_id === "") return null; try { if (!window.localStorage) return null; - const root_url = new URL(root || "/", window.location.href); - const path = root_url.pathname.replace(/\/$/, "") || "/"; - return `${STORAGE_PREFIX}${path}`; + return `${STORAGE_PREFIX}${app_id}`; } catch { return null; } } -function replay_key(root: string): string | null { - const key = storage_key(root); +function replay_key(app_id: AppId): string | null { + const key = storage_key(app_id); return key ? key.replace(STORAGE_PREFIX, REPLAY_PREFIX) : null; } +/** When a run was most recently saved under a key, for deciding what to drop. */ +function last_saved_at(key: string): number { + try { + const runs = JSON.parse(window.localStorage.getItem(key) || "[]"); + // Runs are stored newest first. + return Array.isArray(runs) && runs.length + ? Date.parse(runs[0]?.started_at) || 0 + : 0; + } catch { + return 0; + } +} + +/** + * Drops the histories of long-gone app instances. Every restart mints a new app + * id, so without this the browser would keep every history an app ever had and + * eventually run out of room for the current one. + */ +function prune_apps(current_key: string): void { + const keys = Object.keys(window.localStorage).filter((key) => + key.startsWith(KEY_ROOT) + ); + const stale = [ + // Keys written by an older layout can never be read again. + ...keys.filter( + (key) => !key.startsWith(STORAGE_PREFIX) && !key.startsWith(REPLAY_PREFIX) + ), + ...keys + .filter((key) => key.startsWith(STORAGE_PREFIX) && key !== current_key) + .sort((a, b) => last_saved_at(b) - last_saved_at(a)) + .slice(MAX_APPS - 1) + ]; + for (const key of stale) { + try { + window.localStorage.removeItem(key); + window.localStorage.removeItem( + key.replace(STORAGE_PREFIX, REPLAY_PREFIX) + ); + } catch { + // Nothing to do if the browser will not let us clean up. + } + } +} + function make_id(): string { if (typeof crypto !== "undefined" && crypto.randomUUID) { return crypto.randomUUID(); @@ -114,8 +165,8 @@ function clone_for_storage(value: unknown): unknown { } } -function read_run_history_impl(root: string): StoredRun[] { - const key = storage_key(root); +function read_run_history_impl(app_id: AppId): StoredRun[] { + const key = storage_key(app_id); if (!key) return []; try { @@ -126,16 +177,24 @@ function read_run_history_impl(root: string): StoredRun[] { } } -function write_run_history(root: string, runs: StoredRun[]): void { - const key = storage_key(root); +function write_run_history(app_id: AppId, runs: StoredRun[]): void { + const key = storage_key(app_id); if (!key) return; let next = runs.slice(0, MAX_RUNS); + let pruned = false; while (next.length > 0) { try { window.localStorage.setItem(key, JSON.stringify(next)); return; } catch { + // Reclaim the space held by app instances that are long gone before + // giving up on the oldest runs of the current one. + if (!pruned) { + pruned = true; + prune_apps(key); + continue; + } next = next.slice(0, -1); } } @@ -146,8 +205,8 @@ function write_run_history(root: string, runs: StoredRun[]): void { } } -function clear_run_history_impl(root: string): void { - const key = storage_key(root); +function clear_run_history_impl(app_id: AppId): void { + const key = storage_key(app_id); if (!key) return; try { window.localStorage.removeItem(key); @@ -157,10 +216,10 @@ function clear_run_history_impl(root: string): void { notify_run_history_change(); } -function delete_run_history_impl(root: string, id: string): void { +function delete_run_history_impl(app_id: AppId, id: string): void { write_run_history( - root, - read_run_history_impl(root).filter((run) => run.id !== id) + app_id, + read_run_history_impl(app_id).filter((run) => run.id !== id) ); notify_run_history_change(); } @@ -193,8 +252,8 @@ function on_run_history_change_impl(listener: () => void): () => void { }; } -function stage_run_history_replay_impl(root: string, run: StoredRun): void { - const key = replay_key(root); +function stage_run_history_replay_impl(app_id: AppId, run: StoredRun): void { + const key = replay_key(app_id); if (!key) return; try { window.sessionStorage.setItem(key, JSON.stringify(run)); @@ -203,8 +262,8 @@ function stage_run_history_replay_impl(root: string, run: StoredRun): void { } } -function consume_run_history_replay_impl(root: string): StoredRun | null { - const key = replay_key(root); +function consume_run_history_replay_impl(app_id: AppId): StoredRun | null { + const key = replay_key(app_id); if (!key) return null; try { const value = window.sessionStorage.getItem(key); @@ -216,9 +275,13 @@ function consume_run_history_replay_impl(root: string): StoredRun | null { } function start_run_history_impl(options: StartRunOptions): string | null { - const key = storage_key(options.root); + const key = storage_key(options.app_id); if (!key) return null; + // A new app id means a new key, so clear out the ones left behind before + // adding to this one. + prune_apps(key); + const run: StoredRun = { id: make_id(), endpoint: options.endpoint, @@ -244,36 +307,36 @@ function start_run_history_impl(options: StartRunOptions): string | null { status: "running", started_at: new Date().toISOString() }; - write_run_history(options.root, [ + write_run_history(options.app_id, [ run, - ...read_run_history_impl(options.root) + ...read_run_history_impl(options.app_id) ]); notify_run_history_change(); return run.id; } function update_run_inputs_impl( - root: string, + app_id: AppId, id: string | null, inputs: unknown ): void { if (!id) return; - const runs = read_run_history_impl(root); + const runs = read_run_history_impl(app_id); const run = runs.find((item) => item.id === id); if (!run) return; run.inputs = clone_for_storage(inputs); - write_run_history(root, runs); + write_run_history(app_id, runs); } function update_run_history_impl( - root: string, + app_id: AppId, id: string | null, event: GradioEvent ): void { if (!id) return; - const runs = read_run_history_impl(root); + const runs = read_run_history_impl(app_id); const run = runs.find((item) => item.id === id); if (!run) return; @@ -301,7 +364,7 @@ function update_run_history_impl( mark_complete(run, event); } - write_run_history(root, runs); + write_run_history(app_id, runs); } function mark_process_start(run: StoredRun, time: Date | undefined): void { @@ -336,24 +399,24 @@ function mark_complete(run: StoredRun, event: StatusMessage): void { // Public API. Each of these is a no-op if anything goes wrong. -export function read_run_history(root: string): StoredRun[] { - return safely(() => read_run_history_impl(root), []); +export function read_run_history(app_id: AppId): StoredRun[] { + return safely(() => read_run_history_impl(app_id), []); } -export function clear_run_history(root: string): void { - safely(() => clear_run_history_impl(root), undefined); +export function clear_run_history(app_id: AppId): void { + safely(() => clear_run_history_impl(app_id), undefined); } -export function delete_run_history(root: string, id: string): void { - safely(() => delete_run_history_impl(root, id), undefined); +export function delete_run_history(app_id: AppId, id: string): void { + safely(() => delete_run_history_impl(app_id, id), undefined); } -export function stage_run_history_replay(root: string, run: StoredRun): void { - safely(() => stage_run_history_replay_impl(root, run), undefined); +export function stage_run_history_replay(app_id: AppId, run: StoredRun): void { + safely(() => stage_run_history_replay_impl(app_id, run), undefined); } -export function consume_run_history_replay(root: string): StoredRun | null { - return safely(() => consume_run_history_replay_impl(root), null); +export function consume_run_history_replay(app_id: AppId): StoredRun | null { + return safely(() => consume_run_history_replay_impl(app_id), null); } export function start_run_history(options: StartRunOptions): string | null { @@ -361,19 +424,19 @@ export function start_run_history(options: StartRunOptions): string | null { } export function update_run_inputs( - root: string, + app_id: AppId, id: string | null, inputs: unknown ): void { - safely(() => update_run_inputs_impl(root, id, inputs), undefined); + safely(() => update_run_inputs_impl(app_id, id, inputs), undefined); } export function update_run_history( - root: string, + app_id: AppId, id: string | null, event: GradioEvent ): void { - safely(() => update_run_history_impl(root, id, event), undefined); + safely(() => update_run_history_impl(app_id, id, event), undefined); } export function on_run_history_change(listener: () => void): () => void { diff --git a/client/js/src/utils/submit.ts b/client/js/src/utils/submit.ts index 4a5c7bf4a59..6c941f5fd64 100644 --- a/client/js/src/utils/submit.ts +++ b/client/js/src/utils/submit.ts @@ -111,7 +111,7 @@ export function submit( const history_run_id = !is_api_endpoint ? null : start_run_history({ - root: config.root, + app_id: config.app_id, endpoint: history_endpoint, api_name: history_api_name, fn_index, @@ -154,7 +154,7 @@ export function submit( // event subscription methods function fire_event(event: GradioEvent): void { - update_run_history(config!.root, history_run_id, event); + update_run_history(config!.app_id, history_run_id, event); if (all_events || events_to_publish[event.type]) { push_event(event); } @@ -232,7 +232,7 @@ export function submit( "input", true ); - update_run_inputs(config.root, history_run_id, input_data || []); + update_run_inputs(config.app_id, history_run_id, input_data || []); payload = { data: input_data || [], event_data, diff --git a/js/core/src/Blocks.svelte b/js/core/src/Blocks.svelte index f5cfc7fd522..baa3e8ea435 100644 --- a/js/core/src/Blocks.svelte +++ b/js/core/src/Blocks.svelte @@ -209,7 +209,7 @@ let run_count = $state(0); function refresh_run_count(): void { - run_count = read_run_history(root).length; + run_count = read_run_history(app.config?.app_id).length; } function handle_connection_lost(): void { @@ -679,6 +679,7 @@ }} pwa_enabled={app.config.pwa} {root} + app_id={app.config?.app_id} {space_id} i18n={$reactive_formatter} /> diff --git a/js/core/src/api_docs/Settings.svelte b/js/core/src/api_docs/Settings.svelte index 169f82f65df..0a9e7d00b0a 100644 --- a/js/core/src/api_docs/Settings.svelte +++ b/js/core/src/api_docs/Settings.svelte @@ -15,6 +15,7 @@ let { root, + app_id, space_id, pwa_enabled, allow_zoom = $bindable(), @@ -65,7 +66,7 @@ let run_count = $state(0); function refreshRunCount(): void { - run_count = read_run_history(root).length; + run_count = read_run_history(app_id).length; } function handleLanguageChange(value: string): void { diff --git a/js/spa/src/Index.svelte b/js/spa/src/Index.svelte index fa7336edca8..babcbef1bf3 100644 --- a/js/spa/src/Index.svelte +++ b/js/spa/src/Index.svelte @@ -421,7 +421,7 @@ } config = app.get_url_config() as unknown as Config; - restore_run(config, consume_run_history_replay(config.root)); + restore_run(config, consume_run_history_replay(config.app_id)); window.__gradio_space__ = config.space_id; if (app.config?.i18n_translations) { @@ -693,7 +693,11 @@ {app_mode} /> {:else if config && css_ready && run_history} - + {:else if config && Blocks && css_ready} )[]; } - let { root, footer_links = [] }: Props = $props(); + let { root, app_id, footer_links = [] }: Props = $props(); let app_url = $derived(new URL(root, window.location.href).href); let runs: StoredRun[] = $state([]); @@ -34,7 +36,7 @@ }); function refresh(): void { - runs = read_run_history(root); + runs = read_run_history(app_id); } onMount(() => { @@ -50,16 +52,6 @@ return value === null || value === undefined ? [] : [value]; } - function summarize(value: unknown): string { - if (value === null || value === undefined) return "No value"; - if (typeof value === "string") return value || "Empty value"; - try { - return JSON.stringify(value); - } catch { - return String(value); - } - } - function label( meta: StoredRunComponent | null | undefined, index: number @@ -94,6 +86,7 @@ } function format_duration(ms: number): string { + if (ms < 1) return "<1ms"; if (ms < 1000) return `${Math.round(ms)}ms`; if (ms < 10000) return `${(ms / 1000).toFixed(2)}s`; if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`; @@ -139,7 +132,7 @@ } function load(run: StoredRun): void { - stage_run_history_replay(root, run); + stage_run_history_replay(app_id, run); const app_url = new URL(root, window.location.href); let target = new URL(run.page || app_url.pathname, app_url); if (target.origin !== app_url.origin) target = app_url; @@ -148,13 +141,13 @@ function clear_all(): void { if (!window.confirm("Clear all saved runs for this app?")) return; - clear_run_history(root); + clear_run_history(app_id); refresh(); } function delete_run(run: StoredRun): void { if (!window.confirm("Delete this saved run?")) return; - delete_run_history(root, run.id); + delete_run_history(app_id, run.id); refresh(); } diff --git a/js/spa/src/RunValue.svelte b/js/spa/src/RunValue.svelte index 3d253d890f0..d4c1d658402 100644 --- a/js/spa/src/RunValue.svelte +++ b/js/spa/src/RunValue.svelte @@ -2,6 +2,7 @@ import { mount, unmount } from "svelte"; import type { StoredRunComponent } from "@gradio/client"; import { load_component } from "virtual:component-loader"; + import { summarize, to_example_value } from "./run_value"; interface Props { component: StoredRunComponent; @@ -31,16 +32,6 @@ unpreviewable = !loaded?.component; }); - function summarize(item: unknown): string { - if (item === null || item === undefined) return "No value"; - if (typeof item === "string") return item || "Empty value"; - try { - return JSON.stringify(item); - } catch { - return String(item); - } - } - $effect(() => { const mount_target = target; if (!mount_target || !loaded?.component) return; @@ -61,7 +52,7 @@ const props = { ...meta.props, ...(choices ? { choices } : {}), - value, + value: to_example_value(meta.type, value), type: "table", selected: false, root, @@ -73,6 +64,16 @@ props }) : mount(component.default, { target: mount_target, props }); + + // Some renderers bail out entirely on a value they do not + // recognise, which would otherwise leave a blank cell. + requestAnimationFrame(() => { + if (disposed) return; + const drew_nothing = + mount_target.children.length === 0 && + !mount_target.textContent?.trim(); + if (drew_nothing) unpreviewable = true; + }); }) .catch(() => { if (!disposed) unpreviewable = true; diff --git a/js/spa/src/run_value.ts b/js/spa/src/run_value.ts new file mode 100644 index 00000000000..5616e5c1358 --- /dev/null +++ b/js/spa/src/run_value.ts @@ -0,0 +1,80 @@ +/** + * Helpers for previewing a saved run's values. + * + * The run history reuses Gradio's compact Example renderers, but those were + * written for the values in an `Examples` dataset, which are not always shaped + * like the live values a run actually produces. Rather than give up and print + * JSON, reshape the value into what the renderer expects. + */ + +interface FileLike { + orig_name?: string; + path?: string; + url?: string; +} + +function file_label(value: unknown): string { + if (Array.isArray(value)) return value.map(file_label).join(", "); + if (value && typeof value === "object") { + const file = value as FileLike; + const name = file.orig_name || file.path || file.url; + if (typeof name === "string") return name.split("/").pop() || name; + } + return typeof value === "string" ? value : ""; +} + +/** + * Reshapes a live component value into the shape that component's Example + * renderer understands. Values it does not recognise are passed through. + */ +export function to_example_value(type: string, value: unknown): unknown { + if (value === null || value === undefined) return value; + + // The renderer draws rows of cells; a live dataframe is `{headers, data}`. + if (type === "dataframe") { + const frame = value as { headers?: unknown[]; data?: unknown[][] }; + if (Array.isArray(frame.data)) { + return Array.isArray(frame.headers) + ? [frame.headers, ...frame.data] + : frame.data; + } + return value; + } + + // These renderers print their value as text, so a `FileData` would come out + // as "[object Object]". Give them the file name instead. + if (type === "audio" || type === "file" || type === "uploadbutton") { + return file_label(value) || value; + } + + return value; +} + +/** A short, human-readable stand-in for a value with no usable preview. */ +export function summarize(value: unknown): string { + if (value === null || value === undefined) return "No value"; + if (typeof value === "string") return value || "Empty value"; + if (typeof value !== "object") return String(value); + + // `gr.Label`: report the winning label rather than every confidence. + const label = (value as { label?: unknown }).label; + if (typeof label === "string") return label; + + // `gr.HighlightedText`: read as the sentence it highlights. + if ( + Array.isArray(value) && + value.length > 0 && + value.every((item) => item && typeof item === "object" && "token" in item) + ) { + return value.map((item) => (item as { token: string }).token).join(""); + } + + const file = file_label(value); + if (file) return file; + + try { + return JSON.stringify(value); + } catch { + return String(value); + } +} From 930b90ac08263e43a4b084611dcfd511a4f5a13d Mon Sep 17 00:00:00 2001 From: Abubakar Abid Date: Mon, 10 Aug 2026 13:38:52 -0700 Subject: [PATCH 13/19] Stop the dataframe overlay covering the page, and widen the file-name fallback MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The dataframe renderer draws a "more rows" gradient as an absolutely positioned child. The preview cell was not a containing block, so the gradient sized itself against the page instead: a 1280x1015 white wash over the whole run that swallowed the clicks meant for Load run. Make the cell a containing block so nothing a renderer positions can escape it, and hide that gradient, which fades towards a table background the cell does not have. Only the image, video, gallery and image-editor renderers draw a file by reading `url` off the value; everything else prints what it is handed. Replace the list of renderers to hand a file name with an allowlist of the ones that render files, so a component that is not recognised — `gr.Model3D`, which was showing "[object Object]" — degrades to its file name rather than to that. Recording is now decided by what triggered a run rather than by API visibility. Visibility was the wrong signal: `gr.ChatInterface` submits chat through an "undocumented" dependency and exposes a separate "public" endpoint for API callers, so filtering on it dropped every real chat run. Walk back up the `.then()` chain instead and skip runs rooted at the page loading or at Gradio filling in an example, plus bookkeeping events whose whole output is server-side state. Co-Authored-By: Claude Opus 5 (1M context) --- client/js/src/utils/submit.ts | 87 ++++++++++++++++++++++++----------- js/spa/src/RunValue.svelte | 11 +++++ js/spa/src/run_value.ts | 31 +++++++++++-- 3 files changed, 99 insertions(+), 30 deletions(-) diff --git a/client/js/src/utils/submit.ts b/client/js/src/utils/submit.ts index 6c941f5fd64..b6a5d155055 100644 --- a/client/js/src/utils/submit.ts +++ b/client/js/src/utils/submit.ts @@ -101,33 +101,66 @@ export function submit( props: component.props }; }; - // Only real API endpoints count as runs. Gradio's own example loading, - // flagging and clear-button dependencies are all "undocumented" or - // "private", and the ones that preload examples fire on page load, so - // recording them would fill the history before the user does anything. - const is_api_endpoint = - dependency.api_visibility === undefined || - dependency.api_visibility === "public"; - const history_run_id = !is_api_endpoint - ? null - : start_run_history({ - app_id: config.app_id, - endpoint: history_endpoint, - api_name: history_api_name, - fn_index, - // Aligned to `dependency.inputs` the same way the submitted payload - // is, so this placeholder matches the components until the uploaded - // files are swapped in by `update_run_inputs` below. - inputs: handle_payload( - resolved_data, - dependency, - config.components, - "input", - true - ), - input_components: dependency.inputs.map(component_metadata), - output_components: dependency.outputs.map(component_metadata) - }); + // A run is something the user asked for. Walk back up the `.then()` chain + // to whatever triggered it: the page loading, or Gradio filling in an + // example, means this fired on the user's behalf rather than at their + // request, and recording it would fill the history before they have done + // anything. Visibility is not the signal here — `gr.ChatInterface` sends + // its chat submissions through an "undocumented" dependency, and its one + // "public" endpoint is for API callers rather than the UI. + const triggered_incidentally = (): boolean => { + const seen = new Set(); + let current: typeof dependency | undefined = dependency; + while (current && !seen.has(current.id)) { + seen.add(current.id); + const triggers = (current.targets || []).filter( + ([, event]) => event !== "then" + ); + if (triggers.length) { + return triggers.every( + ([component_id, event]) => + event === "load" || + config.components.find((item) => item.id === component_id) + ?.type === "dataset" + ); + } + const parent: number | undefined | null = current.trigger_after; + current = + parent === undefined || parent === null + ? undefined + : config.dependencies.find((item) => item.id === parent); + } + return false; + }; + // Bookkeeping events whose whole output is server-side state have nothing + // to preview and nothing to restore, so they are not runs either. + const only_writes_state = + dependency.outputs.length > 0 && + dependency.outputs.every((id) => { + const type = config.components.find((item) => item.id === id)?.type; + return type === "state" || type === "browserstate"; + }); + const history_run_id = + triggered_incidentally() || only_writes_state + ? null + : start_run_history({ + app_id: config.app_id, + endpoint: history_endpoint, + api_name: history_api_name, + fn_index, + // Aligned to `dependency.inputs` the same way the submitted payload + // is, so this placeholder matches the components until the uploaded + // files are swapped in by `update_run_inputs` below. + inputs: handle_payload( + resolved_data, + dependency, + config.components, + "input", + true + ), + input_components: dependency.inputs.map(component_metadata), + output_components: dependency.outputs.map(component_metadata) + }); let stream: EventSource | null; let event_id_final = ""; diff --git a/js/spa/src/RunValue.svelte b/js/spa/src/RunValue.svelte index d4c1d658402..8673bd94003 100644 --- a/js/spa/src/RunValue.svelte +++ b/js/spa/src/RunValue.svelte @@ -98,6 +98,11 @@