Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Handle gradio apps using state in the JS Client #8439

Merged
merged 21 commits into from
Jun 5, 2024
Merged
Show file tree
Hide file tree
Changes from 15 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/young-poets-change.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@gradio/client": patch
"gradio": patch
---

fix:Handle spaces using `state` in the JS Client
3 changes: 2 additions & 1 deletion client/js/src/client.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import type {
DuplicateOptions,
EndpointInfo,
JsApiData,
PredictReturn,
SpaceStatus,
Status,
SubmitReturn,
Expand Down Expand Up @@ -114,7 +115,7 @@ export class Client {
endpoint: string | number,
data: unknown[] | Record<string, unknown>,
event_data?: unknown
) => Promise<SubmitReturn>;
) => Promise<PredictReturn>;
open_stream: () => Promise<void>;
private resolve_config: (endpoint: string) => Promise<Config | undefined>;
private resolve_cookies: () => Promise<void>;
Expand Down
62 changes: 61 additions & 1 deletion client/js/src/helpers/data.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ import type {
Config,
EndpointInfo,
JsApiData,
DataType
DataType,
Dependency,
ComponentMeta
} from "../types";

export function update_object(
Expand Down Expand Up @@ -118,3 +120,61 @@ export function post_message<Res = any>(
window.parent.postMessage(message, origin, [channel.port2]);
});
}

/**
* Handles the payload by filtering out state inputs and returning an array of resolved payload values.
* We send null values for state inputs to the server, but we don't want to include them in the resolved payload.
*
* @param resolved_payload - The resolved payload values received from the client or the server
* @param dependency - The dependency object.
* @param components - The array of component metadata.
* @param with_null_state - Optional. Specifies whether to include null values for state inputs. Default is false.
* @returns An array of resolved payload values, filtered based on the dependency and component metadata.
*/
export function handle_payload(
resolved_payload: unknown[],
dependency: Dependency,
components: ComponentMeta[],
with_null_state = false
): any[] {
try {
let payload_index = 0;
let updated_payload: unknown[] = [];

dependency.inputs.forEach((input_id) => {
const component = components.find((c) => c.id === input_id);
if (component?.type === "state") {
if (with_null_state) {
updated_payload.push(null);
}
if (!with_null_state) payload_index++;
} else {
const value = resolved_payload[payload_index];
updated_payload.push(value);
payload_index++;
}
});

return updated_payload;
} catch (e) {
console.error(e);
return resolved_payload;
}
}

export function build_payload(
resolved_payload: unknown[],
dependency: Dependency,
components: ComponentMeta[]
): any[] {
let updated_payload: unknown[] = [];

dependency.inputs.map((input_id: number, index: number): any => {
const component = components.find((c: any) => c.id === input_id);
if (component?.type === "state") {
return null;
}
updated_payload.push(resolved_payload[index]);
});
pngwn marked this conversation as resolved.
Show resolved Hide resolved
return updated_payload;
}
1 change: 0 additions & 1 deletion client/js/src/test/api_info.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import { initialise_server } from "./server";
import { transformed_api_info } from "./test_data";

const server = initialise_server();
const IS_NODE = process.env.TEST_MODE === "node";

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
Expand Down
108 changes: 107 additions & 1 deletion client/js/src/test/data.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import {
update_object,
walk_and_store_blobs,
skip_queue,
post_message
post_message,
handle_payload
} from "../helpers/data";
import { NodeBlob } from "../client";
import { config_response, endpoint_info } from "./test_data";
Expand Down Expand Up @@ -276,3 +277,108 @@ describe("post_message", () => {
]);
});
});

describe("handle_payload", () => {
it("should return a payload with null in place of `state` when with_null_state is true", () => {
const resolved_payload = [2];
const dependency = {
inputs: [1, 2]
};
const components = [
{ id: 1, type: "number" },
{ id: 2, type: "state" }
];
const with_null_state = true;
const result = handle_payload(
resolved_payload,
// @ts-ignore
dependency,
components,
with_null_state
);
expect(result).toEqual([2, null]);
});
it("should return a payload with null in place of two `state` components when with_null_state is true", () => {
const resolved_payload = ["hello", "goodbye"];
const dependency = {
inputs: [1, 2, 3, 4]
};
const components = [
{ id: 1, type: "textbox" },
{ id: 2, type: "state" },
{ id: 3, type: "textbox" },
{ id: 4, type: "state" }
];
const with_null_state = true;
const result = handle_payload(
resolved_payload,
// @ts-ignore
dependency,
components,
with_null_state
);
expect(result).toEqual(["hello", null, "goodbye", null]);
});

it("should return a payload without the state component value when with_null_state is false", () => {
const resolved_payload = ["hello", null];
const dependency = {
inputs: [2, 3]
};
const components = [
{ id: 2, type: "textbox" },
{ id: 3, type: "state" }
];
const with_null_state = false;
const result = handle_payload(
resolved_payload,
// @ts-ignore
dependency,
components,
with_null_state
);
expect(result).toEqual(["hello"]);
});

it("should return a payload without the two state component values when with_null_state is false", () => {
const resolved_payload = ["hello", null, "world", null];
const dependency = {
inputs: [2, 3, 4, 5]
};
const components = [
{ id: 2, type: "textbox" },
{ id: 3, type: "state" },
{ id: 4, type: "textbox" },
{ id: 5, type: "state" }
];
const with_null_state = false;
const result = handle_payload(
resolved_payload,
// @ts-ignore
dependency,
components,
with_null_state
);
expect(result).toEqual(["hello", "world"]);
});

it("should return the same payload where no state components are defined", () => {
const resolved_payload = ["hello", "world"];
const dependency = {
inputs: [2, 3]
};
const components = [
{ id: 2, type: "textbox" },
{ id: 3, type: "textbox" }
];
const with_null_state = true;
const result = handle_payload(
resolved_payload,
// @ts-ignore
dependency,
components,
with_null_state
);
expect(result).toEqual(["hello", "world"]);
});
});
53 changes: 51 additions & 2 deletions client/js/src/types.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
// API Data Types

import { hardware_types } from "./helpers/spaces";
import type { SvelteComponent } from "svelte";
import type { ComponentType } from "svelte";

export interface ApiData {
label: string;
Expand Down Expand Up @@ -62,7 +64,7 @@ export type PredictFunction = (
endpoint: string | number,
data: unknown[] | Record<string, unknown>,
event_data?: unknown
) => Promise<SubmitReturn>;
) => Promise<PredictReturn>;

// Event and Submission Types

Expand Down Expand Up @@ -90,6 +92,14 @@ export type SubmitReturn = {
destroy: () => void;
};

export type PredictReturn = {
type: EventType;
time: Date;
data: unknown;
endpoint: string;
fn_index: number;
};

// Space Status Types

export type SpaceStatus = SpaceStatusNormal | SpaceStatusError;
Expand Down Expand Up @@ -128,7 +138,7 @@ export interface Config {
analytics_enabled: boolean;
connect_heartbeat: boolean;
auth_message: string;
components: any[];
components: ComponentMeta[];
css: string | null;
js: string | null;
head: string | null;
Expand All @@ -153,6 +163,45 @@ export interface Config {
max_file_size?: number;
}

// todo: DRY up types
export interface ComponentMeta {
type: string;
id: number;
has_modes: boolean;
props: SharedProps;
instance: SvelteComponent;
component: ComponentType<SvelteComponent>;
documentation?: Documentation;
children?: ComponentMeta[];
parent?: ComponentMeta;
value?: any;
component_class_id: string;
key: string | number | null;
rendered_in?: number;
}

interface SharedProps {
elem_id?: string;
elem_classes?: string[];
components?: string[];
server_fns?: string[];
interactive: boolean;
[key: string]: unknown;
root_url?: string;
}

export interface Documentation {
type?: TypeDescription;
description?: TypeDescription;
example_data?: string;
}

interface TypeDescription {
input_payload?: string;
response_object?: string;
payload?: string;
}

export interface Dependency {
id: number;
targets: [number, string][];
Expand Down
8 changes: 4 additions & 4 deletions client/js/src/utils/predict.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { Client } from "../client";
import type { Dependency, SubmitReturn } from "../types";
import type { Dependency, PredictReturn } from "../types";

export async function predict(
this: Client,
endpoint: string | number,
data: unknown[] | Record<string, unknown>
): Promise<SubmitReturn> {
): Promise<PredictReturn> {
let data_returned = false;
let status_complete = false;
let dependency: Dependency;
Expand Down Expand Up @@ -38,7 +38,7 @@ export async function predict(
// if complete message comes before data, resolve here
if (status_complete) {
app.destroy();
resolve(d as SubmitReturn);
resolve(d as PredictReturn);
}
data_returned = true;
result = d;
Expand All @@ -50,7 +50,7 @@ export async function predict(
// if complete message comes after data, resolve here
if (data_returned) {
app.destroy();
resolve(result as SubmitReturn);
resolve(result as PredictReturn);
}
}
});
Expand Down
4 changes: 3 additions & 1 deletion client/js/src/utils/stream.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,9 @@ export async function open_stream(this: Client): Promise<void> {
} else if (event_callbacks[event_id] && config) {
if (
_data.msg === "process_completed" &&
["sse", "sse_v1", "sse_v2", "sse_v2.1"].includes(config.protocol)
["sse", "sse_v1", "sse_v2", "sse_v2.1", "sse_v3"].includes(
config.protocol
)
) {
unclosed_events.delete(event_id);
if (unclosed_events.size === 0) {
Expand Down
Loading