@gradio/core 1.0.0-dev.3 → 1.0.0

package/dist/src/api_docs/PercentileChart.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+	import { format_latency } from "./utils";
+
+	export let p50: number;
+	export let p90: number;
+	export let p99: number;
+
+	$: max_latency = Math.max(p50, p90, p99);
+</script>
+
+<div class="tooltip-chart">
+	<div class="tooltip-arrow"></div>
+	<div class="chart-bars">
+		<div class="chart-bar-container">
+			<div class="chart-bar-label">p50</div>
+			<div class="chart-bar-wrapper">
+				<div
+					class="chart-bar"
+					style="width: {(p50 / max_latency) * 100}%"
+				></div>
+			</div>
+			<div class="chart-bar-value">{format_latency(p50)}</div>
+		</div>
+		<div class="chart-bar-container">
+			<div class="chart-bar-label">p90</div>
+			<div class="chart-bar-wrapper">
+				<div
+					class="chart-bar"
+					style="width: {(p90 / max_latency) * 100}%"
+				></div>
+			</div>
+			<div class="chart-bar-value">{format_latency(p90)}</div>
+		</div>
+		<div class="chart-bar-container">
+			<div class="chart-bar-label">p99</div>
+			<div class="chart-bar-wrapper">
+				<div
+					class="chart-bar"
+					style="width: {(p99 / max_latency) * 100}%"
+				></div>
+			</div>
+			<div class="chart-bar-value">{format_latency(p99)}</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	.tooltip-chart {
+		background: var(--background-fill-primary);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-md);
+		padding: var(--size-3);
+		box-shadow: var(--shadow-drop-lg);
+		min-width: 200px;
+		position: relative;
+	}
+
+	.tooltip-arrow {
+		position: absolute;
+		bottom: -8px;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 0;
+		height: 0;
+		border-left: 8px solid transparent;
+		border-right: 8px solid transparent;
+		border-top: 8px solid var(--border-color-primary);
+	}
+
+	.tooltip-arrow::after {
+		content: "";
+		position: absolute;
+		bottom: 1px;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 0;
+		height: 0;
+		border-left: 7px solid transparent;
+		border-right: 7px solid transparent;
+		border-top: 7px solid var(--background-fill-primary);
+	}
+
+	.chart-bars {
+		display: flex;
+		flex-direction: column;
+		gap: var(--size-2);
+	}
+
+	.chart-bar-container {
+		display: flex;
+		align-items: center;
+		gap: var(--size-2);
+	}
+
+	.chart-bar-label {
+		font-size: var(--text-sm);
+		font-weight: var(--weight-semibold);
+		color: var(--body-text-color);
+		min-width: 30px;
+	}
+
+	.chart-bar-wrapper {
+		flex: 1;
+		height: 16px;
+		background: var(--background-fill-secondary);
+		border-radius: var(--radius-sm);
+		overflow: hidden;
+		position: relative;
+	}
+
+	.chart-bar {
+		height: 100%;
+		background: var(--color-accent);
+		border-radius: var(--radius-sm);
+		transition: width 0.3s ease;
+	}
+
+	.chart-bar-value {
+		font-size: var(--text-sm);
+		color: var(--body-text-color);
+		min-width: 50px;
+		text-align: right;
+		font-family: var(--font-mono);
+	}
+</style>

package/dist/src/api_docs/PercentileChart.svelte.d.ts

@@ -0,0 +1,22 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const PercentileChart: $$__sveltets_2_IsomorphicComponent<{
+    p50: number;
+    p90: number;
+    p99: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PercentileChart = InstanceType<typeof PercentileChart>;
+export default PercentileChart;

package/dist/src/dependency.d.ts

@@ -21,6 +21,8 @@ export declare class Dependency {
     triggers: [number, "success" | "failure" | "all"][];
     original_trigger_id: number | null;
     show_progress_on: number[] | null;
+    component_prop_inputs: number[];
+    show_progress: "full" | "minimal" | "hidden";
     functions: {
         frontend?: (...args: unknown[]) => Promise<unknown[]>;
         backend: boolean;
@@ -115,9 +117,10 @@ export declare class DependencyManager {
      * Gathers the current state of the inputs
      *
      * @param ids the ids of the components to gather state from
+     * @param prop_indices the indices (relative to ids array) that should return all component props instead of just the value
      * @returns an array of the current state of the components, in the same order as the ids
      */
-    gather_state(ids: number[]): Promise<(unknown | null)[]>;
+    gather_state(ids: number[], prop_indices?: number[]): Promise<(unknown | null)[]>;
     /** Sets the event arguments for a specific component
      *
      * @param id the id of the component to set the event arguments for

package/dist/src/dependency.js

@@ -24,6 +24,8 @@ export class Dependency {
     // in the case of chained events, it would be the id of the initial trigger
     original_trigger_id = null;
     show_progress_on = null;
+    component_prop_inputs = [];
+    show_progress;
     functions;
     constructor(dep_config) {
         this.id = dep_config.id;
@@ -31,6 +33,7 @@ export class Dependency {
         this.inputs = dep_config.inputs;
         this.outputs = dep_config.outputs;
         this.connection_type = dep_config.connection;
+        this.show_progress = dep_config.show_progress;
         this.functions = {
             frontend: dep_config.js
                 ? process_frontend_fn(dep_config.js, dep_config.backend_fn, dep_config.inputs.length, dep_config.outputs.length)
@@ -45,6 +48,7 @@ export class Dependency {
         this.cancels = dep_config.cancels;
         this.trigger_modes = dep_config.trigger_mode;
         this.show_progress_on = dep_config.show_progress_on || null;
+        this.component_prop_inputs = dep_config.component_prop_inputs || [];
         for (let i = 0; i < dep_config.event_specific_args?.length || 0; i++) {
             const key = dep_config.event_specific_args[i];
             this.event_args[key] = dep_config[key] ?? null;
@@ -117,31 +121,30 @@ export class DependencyManager {
     loading_stati = new LoadingStatus();
     constructor(dependencies, client, update_state_cb, get_state_cb, rerender_cb, log_cb, add_to_api_calls) {
         this.add_to_api_calls = add_to_api_calls;
-        this.client = client;
         this.log_cb = log_cb;
-        // this.update_state_cb = update_state_cb;
-        // this.get_state_cb = get_state_cb;
-        // this.rerender_cb = rerender_cb;
-        this.reload(dependencies, update_state_cb, get_state_cb, rerender_cb);
+        this.update_state_cb = update_state_cb;
+        this.get_state_cb = get_state_cb;
+        this.rerender_cb = rerender_cb;
+        this.reload(dependencies, update_state_cb, get_state_cb, rerender_cb, client);
     }
     reload(dependencies, update_state, get_state, rerender, client) {
         const { by_id, by_event } = this.create(dependencies);
         this.dependencies_by_event = by_event;
         this.dependencies_by_fn = by_id;
+        this.client = client;
+        this.update_state_cb = update_state;
+        this.get_state_cb = get_state;
+        this.rerender_cb = rerender;
         for (const [dep_id, dep] of this.dependencies_by_fn) {
             for (const [output_id] of dep.targets) {
                 this.set_event_args(output_id, dep.event_args);
             }
         }
-        this.client = client;
-        this.update_state_cb = update_state;
-        this.get_state_cb = get_state;
-        this.rerender_cb = rerender;
         this.register_loading_stati(by_id);
     }
     register_loading_stati(deps) {
         for (const [_, dep] of deps) {
-            this.loading_stati.register(dep.id, dep.show_progress_on || dep.outputs, dep.inputs);
+            this.loading_stati.register(dep.id, dep.show_progress_on || dep.outputs, dep.inputs, dep.show_progress);
         }
     }
     clear_loading_status(component_id) {
@@ -206,7 +209,7 @@ export class DependencyManager {
                     });
                     this.update_loading_stati_state();
                 }
-                const data_payload = await this.gather_state(dep.inputs);
+                const data_payload = await this.gather_state(dep.inputs, dep.component_prop_inputs);
                 const unset_args = await Promise.all(dep.targets.map(([output_id]) => this.set_event_args(output_id, dep.event_args)));
                 const { success, failure, all } = dep.get_triggers();
                 try {
@@ -241,7 +244,7 @@ export class DependencyManager {
                         unset_args.forEach((fn) => fn());
                     }
                     else if (dep_submission.type === "data") {
-                        this.handle_data(dep.outputs, dep_submission.data);
+                        await this.handle_data(dep.outputs, dep_submission.data);
                         unset_args.forEach((fn) => fn());
                     }
                     else {
@@ -268,7 +271,7 @@ export class DependencyManager {
                             if (result === null)
                                 continue;
                             if (result.type === "data") {
-                                this.handle_data(dep.outputs, result.data);
+                                await this.handle_data(dep.outputs, result.data);
                             }
                             if (result.type === "status") {
                                 if (result.original_msg === "process_starts" &&
@@ -356,6 +359,12 @@ export class DependencyManager {
                                 }
                             }
                             if (result.type === "render") {
+                                this.loading_stati.update({
+                                    status: "complete",
+                                    fn_index: dep.id,
+                                    stream_state: null
+                                });
+                                this.update_loading_stati_state();
                                 const { layout, components, render_id, dependencies } = result.data;
                                 this.rerender_cb(components, layout);
                                 // update dependencies
@@ -470,7 +479,7 @@ export class DependencyManager {
      * @param data the data to update the components with
      * */
     async handle_data(outputs, data) {
-        outputs.forEach(async (output_id, i) => {
+        await Promise.all(outputs.map(async (output_id, i) => {
             const _data = data[i] === undefined ? NOVALUE : data[i];
             if (_data === NOVALUE)
                 return;
@@ -498,16 +507,20 @@ export class DependencyManager {
             else {
                 await this.update_state_cb(output_id, { value: _data }, false);
             }
-        });
+        }));
     }
     /**
      * Gathers the current state of the inputs
      *
      * @param ids the ids of the components to gather state from
+     * @param prop_indices the indices (relative to ids array) that should return all component props instead of just the value
      * @returns an array of the current state of the components, in the same order as the ids
      */
-    async gather_state(ids) {
-        return (await Promise.all(ids.map((id) => this.get_state_cb(id)))).map((state) => {
+    async gather_state(ids, prop_indices = []) {
+        return (await Promise.all(ids.map((id) => this.get_state_cb(id)))).map((state, index) => {
+            if (prop_indices.includes(index)) {
+                return state ?? null;
+            }
             return state?.value ?? null;
         });
     }
@@ -519,7 +532,9 @@ export class DependencyManager {
      */
     async set_event_args(id, args) {
         let current_args = {};
-        const current_state = await this.get_state_cb(id);
+        const current_state = await this.get_state_cb?.(id);
+        if (!current_state)
+            return () => { };
         for (const [key] of Object.entries(args)) {
             current_args[key] = current_state?.[key] ?? null;
         }

package/dist/src/types.d.ts

@@ -71,6 +71,7 @@ export interface Dependency {
     like_user_message: boolean;
     event_specific_args: ("time_limit" | "stream_every" | "like_user_message")[];
     js_implementation: string | null;
+    component_prop_inputs: number[];
 }
 interface TypeDescription {
     input_payload?: string;

package/package.json

@@ -1,68 +1,67 @@
 {
   "name": "@gradio/core",
-  "version": "1.0.0-dev.3",
+  "version": "1.0.0",
   "type": "module",
   "devDependencies": {
-    "@gradio/accordion": "^0.5.25-dev.1",
-    "@gradio/annotatedimage": "^0.10.1-dev.2",
-    "@gradio/audio": "^0.20.0-dev.4",
-    "@gradio/box": "^0.2.26-dev.1",
-    "@gradio/atoms": "^0.19.0-dev.1",
-    "@gradio/browserstate": "^0.3.3-dev.0",
-    "@gradio/button": "^0.5.14-dev.2",
-    "@gradio/chatbot": "^0.28.0-dev.3",
-    "@gradio/checkboxgroup": "^0.8.0-dev.2",
-    "@gradio/checkbox": "^0.5.0-dev.1",
-    "@gradio/client": "^2.0.0-dev.2",
-    "@gradio/colorpicker": "^0.5.0-dev.2",
-    "@gradio/column": "^0.2.2",
-    "@gradio/dataframe": "^0.21.0-dev.3",
-    "@gradio/code": "^0.16.0-dev.3",
-    "@gradio/dataset": "^0.5.0-dev.3",
-    "@gradio/datetime": "^0.3.23-dev.1",
-    "@gradio/downloadbutton": "^0.4.13-dev.1",
-    "@gradio/file": "^0.13.1-dev.2",
-    "@gradio/dropdown": "^0.10.6-dev.2",
-    "@gradio/fallback": "^0.4.30-dev.1",
-    "@gradio/form": "^0.2.26-dev.1",
-    "@gradio/fileexplorer": "^0.5.42-dev.2",
-    "@gradio/html": "^0.8.0-dev.1",
-    "@gradio/highlightedtext": "^0.9.14-dev.1",
-    "@gradio/image": "^0.24.0-dev.2",
-    "@gradio/group": "^0.2.1",
-    "@gradio/icons": "^0.15.0-dev.0",
-    "@gradio/imageeditor": "^0.18.2-dev.2",
-    "@gradio/gallery": "^0.15.35-dev.3",
-    "@gradio/imageslider": "^0.3.1-dev.2",
-    "@gradio/label": "^0.5.22-dev.1",
-    "@gradio/json": "^0.5.32-dev.1",
-    "@gradio/markdown": "^0.13.23-dev.1",
-    "@gradio/model3d": "^0.15.1-dev.2",
-    "@gradio/multimodaltextbox": "^0.11.0-dev.2",
-    "@gradio/nativeplot": "^0.9.0-dev.2",
-    "@gradio/paramviewer": "^0.9.0-dev.1",
-    "@gradio/number": "^0.7.2-dev.1",
-    "@gradio/plot": "^0.9.25-dev.1",
-    "@gradio/radio": "^0.8.0-dev.1",
-    "@gradio/row": "^0.2.2",
-    "@gradio/sidebar": "^0.1.24-dev.1",
-    "@gradio/simpleimage": "^0.9.1-dev.2",
-    "@gradio/simpletextbox": "^0.3.31-dev.1",
-    "@gradio/simpledropdown": "^0.3.30-dev.1",
-    "@gradio/sketchbox": "^0.6.18-dev.1",
-    "@gradio/slider": "^0.7.0-dev.2",
-    "@gradio/state": "^0.1.2",
-    "@gradio/statustracker": "^0.12.0-dev.1",
-    "@gradio/tabs": "^0.5.2-dev.0",
-    "@gradio/tabitem": "^0.6.2-dev.0",
-    "@gradio/theme": "^0.5.0-dev.0",
-    "@gradio/timer": "^0.4.6-dev.0",
-    "@gradio/textbox": "^0.12.0-dev.2",
-    "@gradio/upload": "^0.17.2-dev.2",
-    "@gradio/utils": "^0.10.3-dev.0",
-    "@gradio/uploadbutton": "^0.9.13-dev.1",
-    "@gradio/video": "^0.17.0-dev.2",
-    "@gradio/vibeeditor": "^0.3.1-dev.2"
+    "@gradio/accordion": "^0.5.25",
+    "@gradio/audio": "^0.20.0",
+    "@gradio/atoms": "^0.19.0",
+    "@gradio/box": "^0.2.26",
+    "@gradio/browserstate": "^0.3.3",
+    "@gradio/button": "^0.5.14",
+    "@gradio/annotatedimage": "^0.10.1",
+    "@gradio/chatbot": "^0.28.0",
+    "@gradio/checkbox": "^0.5.0",
+    "@gradio/client": "^2.0.0",
+    "@gradio/checkboxgroup": "^0.8.0",
+    "@gradio/column": "^0.3.0",
+    "@gradio/code": "^0.16.0",
+    "@gradio/colorpicker": "^0.5.0",
+    "@gradio/dataframe": "^0.21.0",
+    "@gradio/dataset": "^0.5.0",
+    "@gradio/downloadbutton": "^0.4.13",
+    "@gradio/datetime": "^0.3.23",
+    "@gradio/dropdown": "^0.10.6",
+    "@gradio/file": "^0.13.1",
+    "@gradio/fallback": "^0.4.30",
+    "@gradio/fileexplorer": "^0.5.42",
+    "@gradio/group": "^0.3.0",
+    "@gradio/gallery": "^0.15.35",
+    "@gradio/form": "^0.2.26",
+    "@gradio/highlightedtext": "^0.9.14",
+    "@gradio/html": "^0.8.0",
+    "@gradio/icons": "^0.15.0",
+    "@gradio/image": "^0.24.0",
+    "@gradio/imageeditor": "^0.18.2",
+    "@gradio/imageslider": "^0.3.1",
+    "@gradio/json": "^0.5.32",
+    "@gradio/model3d": "^0.15.1",
+    "@gradio/markdown": "^0.13.23",
+    "@gradio/label": "^0.5.22",
+    "@gradio/multimodaltextbox": "^0.11.0",
+    "@gradio/nativeplot": "^0.9.0",
+    "@gradio/paramviewer": "^0.9.0",
+    "@gradio/number": "^0.7.2",
+    "@gradio/plot": "^0.9.25",
+    "@gradio/row": "^0.3.0",
+    "@gradio/radio": "^0.8.0",
+    "@gradio/sidebar": "^0.1.24",
+    "@gradio/simpledropdown": "^0.3.30",
+    "@gradio/simpleimage": "^0.9.1",
+    "@gradio/simpletextbox": "^0.3.31",
+    "@gradio/slider": "^0.7.0",
+    "@gradio/state": "^0.2.0",
+    "@gradio/statustracker": "^0.12.0",
+    "@gradio/tabitem": "^0.6.2",
+    "@gradio/tabs": "^0.5.2",
+    "@gradio/textbox": "^0.12.0",
+    "@gradio/theme": "^0.5.0",
+    "@gradio/timer": "^0.4.6",
+    "@gradio/uploadbutton": "^0.9.13",
+    "@gradio/upload": "^0.17.2",
+    "@gradio/vibeeditor": "^0.3.1",
+    "@gradio/utils": "^0.10.3",
+    "@gradio/video": "^0.17.0"
   },
   "msw": {
     "workerDirectory": "public"

package/src/Blocks.svelte

@@ -67,7 +67,8 @@
 		search_params,
 		render_complete = false,
 		ready = $bindable(false),
-		reload_count = $bindable(0)
+		reload_count = $bindable(0),
+		add_new_message = $bindable()
 	}: {
 		root: string;
 		components: ComponentMeta[];
@@ -95,6 +96,7 @@
 		render_complete: boolean;
 		ready: boolean;
 		reload_count: number;
+		add_new_message: (title: string, message: string, type: string) => void;
 	} = $props();
 
 	components.forEach((comp) => {
@@ -173,11 +175,14 @@
 	}
 
 	let api_calls: Payload[] = $state([]);
+	let last_api_call: Payload | null = $state(null);
 	// We need a callback to add to api_calls from the DependencyManager
 	// We can't update a state variable from inside the DependencyManager because
 	// svelte won't see it and won't update the UI.
 	let add_to_api_calls = (payload: Payload): void => {
-		api_calls = [...api_calls, payload];
+		last_api_call = payload;
+		if (!api_recorder_visible) return;
+		api_calls = [...api_calls, last_api_call];
 	};
 
 	let dep_manager = new DependencyManager(
@@ -228,7 +233,7 @@
 	let ApiDocs: ComponentType<ApiDocsInterface> | null = null;
 	let ApiRecorder: ComponentType<ApiRecorderInterface> | null = null;
 	let Settings: ComponentType<SettingsInterface> | null = null;
-	let VibeEditor: ComponentType | null = null;
+	let VibeEditor: any = $state(null);
 
 	async function loadApiDocs(): Promise<void> {
 		if (!ApiDocs || !ApiRecorder) {
@@ -312,6 +317,8 @@
 		});
 	}
 
+	add_new_message = new_message;
+
 	let _error_id = -1;
 
 	const MESSAGE_QUOTE_RE = /^'([^]+)'$/;
@@ -387,6 +394,10 @@
 			dep_manager.dispatch_load_events();
 		});
 
+		if (vibe_mode) {
+			void loadVibeEditor();
+		}
+
 		return () => {
 			mut.disconnect();
 			res.disconnect();
@@ -520,6 +531,7 @@
 					{space_id}
 					{api_calls}
 					{username}
+					{last_api_call}
 				/>
 			</div>
 		</div>
@@ -554,6 +566,10 @@
 			</div>
 		</div>
 	{/if}
+
+	{#if vibe_mode && VibeEditor}
+		<svelte:component this={VibeEditor} {app} {root} />
+	{/if}
 </div>
 
 {#if messages}

package/src/api_docs/ApiDocs.svelte

@@ -29,6 +29,7 @@
 	export let space_id: string | null;
 	export let root_node: ComponentMeta;
 	export let username: string | null;
+	export let last_api_call: Payload | null = null;
 
 	const js_docs =
 		"https://www.gradio.app/guides/getting-started-with-the-js-client";
@@ -54,6 +55,20 @@
 	export let api_calls: Payload[] = [];
 	let current_language: "python" | "javascript" | "bash" | "mcp" = "python";
 
+	$: sorted_dependencies = (() => {
+		const valid = dependencies.filter(
+			(dep) =>
+				dep.api_visibility === "public" &&
+				info?.named_endpoints?.["/" + dep.api_name]
+		);
+		if (info && last_api_call) {
+			const mostRecent = valid.find((dep) => dep.id === last_api_call.fn_index);
+			const others = valid.filter((dep) => dep.id !== last_api_call.fn_index);
+			return mostRecent ? [mostRecent, ...others] : valid;
+		}
+		return valid;
+	})();
+
 	function set_query_param(key: string, value: string) {
 		const url = new URL(window.location.href);
 		url.searchParams.set(key, value);
@@ -407,6 +422,7 @@
 							{file_data_present}
 							{mcp_docs}
 							{analytics}
+							{root}
 							bind:config_snippets
 						/>
 					</div>
@@ -465,8 +481,8 @@
 				{/if}
 
 				<div class:hidden={current_language === "mcp"}>
-					{#each dependencies as dependency}
-						{#if dependency.api_visibility === "public" && info.named_endpoints["/" + dependency.api_name]}
+					{#each sorted_dependencies as dependency}
+						{#if info.named_endpoints["/" + dependency.api_name]}
 							<div class="endpoint-container">
 								<CodeSnippet
 									endpoint_parameters={info.named_endpoints[
@@ -482,6 +498,7 @@
 										"/" + dependency.api_name
 									].description}
 									{analytics}
+									{last_api_call}
 									bind:markdown_code_snippets
 								/>
 

package/src/api_docs/ApiRecorder.svelte

@@ -4,9 +4,6 @@
 
 	export let api_calls: Payload[] = [];
 	export let dependencies: Dependency[];
-
-	$: console.log("API CALLS UPDATED:", api_calls);
-	$: console.log("DEPENDENCIES:", dependencies);
 </script>
 
 <div id="api-recorder">