swap mode on the frontned to interactive to match the backend

.changeset/silly-shirts-feel.md

@@ -0,0 +1,27 @@
+---
+"@gradio/app": minor
+"@gradio/audio": minor
+"@gradio/button": minor
+"@gradio/checkbox": minor
+"@gradio/checkboxgroup": minor
+"@gradio/code": minor
+"@gradio/colorpicker": minor
+"@gradio/dataframe": minor
+"@gradio/dropdown": minor
+"@gradio/file": minor
+"@gradio/fileexplorer": minor
+"@gradio/highlightedtext": minor
+"@gradio/image": minor
+"@gradio/model3d": minor
+"@gradio/number": minor
+"@gradio/radio": minor
+"@gradio/simpledropdown": minor
+"@gradio/simpletextbox": minor
+"@gradio/slider": minor
+"@gradio/textbox": minor
+"@gradio/uploadbutton": minor
+"@gradio/video": minor
+"gradio": minor
+---
+
+feat:swap `mode` on the frontned to `interactive` to match the backend

guides/08_other-tutorials/creating-a-new-component.md

@@ -273,7 +273,7 @@ Here you will have three files, the first file is for the Svelte application, an
 
 	export let loading_status: LoadingStatus;
 
-	export let mode: "static" | "interactive";
+	export let interactive: boolean;
 </script>
 
 <Block
@@ -291,7 +291,7 @@ Here you will have three files, the first file is for the Svelte application, an
 		{show_label}
 		on:change
 		on:submit
-		disabled={mode === "static"}
+		disabled={!interactive}
 	/>
 </Block>
 ```
@@ -321,7 +321,7 @@ describe("ColorPicker", () => {
 		const { getByDisplayValue } = render(ColorPicker, {
 			loading_status,
 			show_label: true,
-			mode: "dynamic",
+			interactive: true,
 			value: "#000000",
 			label: "ColorPicker"
 		});
@@ -334,7 +334,7 @@ describe("ColorPicker", () => {
 		const { component, getByDisplayValue } = render(ColorPicker, {
 			loading_status,
 			show_label: true,
-			mode: "dynamic",
+			interactive: true,
 			value: "#000000",
 			label: "ColorPicker"
 		});

guides/cn/07_other-tutorials/creating-a-new-component.md

@@ -275,7 +275,7 @@ class TestColorPicker(unittest.TestCase):
 
 	export let loading_status: LoadingStatus;
 
-	export let mode: "static" | "interactive";
+	export let interactive: boolean;
 </script>
 
 <Block
@@ -293,7 +293,7 @@ class TestColorPicker(unittest.TestCase):
 		{show_label}
 		on:change
 		on:submit
-		disabled={mode === "static"}
+		disabled={!interactive}
 	/>
 </Block>
 ```
@@ -323,7 +323,7 @@ describe("ColorPicker", () => {
 		const { getByDisplayValue } = render(ColorPicker, {
 			loading_status,
 			show_label: true,
-			mode: "dynamic",
+			interactive: true,
 			value: "#000000",
 			label: "ColorPicker"
 		});
@@ -336,7 +336,7 @@ describe("ColorPicker", () => {
 		const { component, getByDisplayValue } = render(ColorPicker, {
 			loading_status,
 			show_label: true,
-			mode: "dynamic",
+			interactive: true,
 			value: "#000000",
 			label: "ColorPicker"
 		});

js/app/src/Blocks.svelte

@@ -45,7 +45,7 @@
 	let rootNode: ComponentMeta = {
 		id: layout.id,
 		type: "column",
-		props: { mode: "static" },
+		props: { interactive: false },
 		has_modes: false,
 		instance: null as unknown as ComponentMeta["instance"],
 		component: null as unknown as ComponentMeta["component"],
@@ -119,24 +119,24 @@
 	>();
 
 	let _component_map = new Map<
-		`${ComponentMeta["type"]}_${ComponentMeta["props"]["mode"]}`,
+		`${ComponentMeta["type"]}_${ComponentMeta["props"]["interactive"]}`,
 		Promise<{ name: ComponentMeta["type"]; component: LoadedComponent }>
 	>();
 
 	async function walk_layout(
 		node: LayoutNode,
-		type_map: Map<number, ComponentMeta["props"]["mode"]>,
+		type_map: Map<number, ComponentMeta["props"]["interactive"]>,
 		instance_map: { [id: number]: ComponentMeta },
 		component_map: Map<
-			`${ComponentMeta["type"]}_${ComponentMeta["props"]["mode"]}`,
+			`${ComponentMeta["type"]}_${ComponentMeta["props"]["interactive"]}`,
 			Promise<{ name: ComponentMeta["type"]; component: LoadedComponent }>
 		>
 	): Promise<void> {
 		ready = false;
 		let instance = instance_map[node.id];
 
 		const _component = (await component_map.get(
-			`${instance.type}_${type_map.get(node.id) || "static"}`
+			`${instance.type}_${type_map.get(node.id) || "false"}`
 		))!.component;
 		instance.component = _component.default;
 
@@ -180,7 +180,7 @@
 		const _rootNode: typeof rootNode = {
 			id: layout.id,
 			type: "column",
-			props: { mode: "static" },
+			props: { interactive: false },
 			has_modes: false,
 			instance: null as unknown as ComponentMeta["instance"],
 			component: null as unknown as ComponentMeta["component"],
@@ -191,10 +191,13 @@
 			Promise<{ name: ComponentMeta["type"]; component: LoadedComponent }>
 		>();
 		const __component_map = new Map<
-			`${ComponentMeta["type"]}_${ComponentMeta["props"]["mode"]}`,
+			`${ComponentMeta["type"]}_${ComponentMeta["props"]["interactive"]}`,
 			Promise<{ name: ComponentMeta["type"]; component: LoadedComponent }>
 		>();
-		const __type_for_id = new Map<number, ComponentMeta["props"]["mode"]>();
+		const __type_for_id = new Map<
+			number,
+			ComponentMeta["props"]["interactive"]
+		>();
 		const _instance_map = components.reduce(
 			(acc, next) => {
 				acc[next.id] = next;
@@ -204,13 +207,13 @@
 		);
 		components.forEach((c) => {
 			if ((c.props as any).interactive === false) {
-				(c.props as any).mode = "static";
+				(c.props as any).interactive = false;
 			} else if ((c.props as any).interactive === true) {
-				(c.props as any).mode = "interactive";
+				(c.props as any).interactive = true;
 			} else if (dynamic_ids.has(c.id)) {
-				(c.props as any).mode = "interactive";
+				(c.props as any).interactive = true;
 			} else {
-				(c.props as any).mode = "static";
+				(c.props as any).interactive = false;
 			}
 
 			if ((c.props as any).server_fns) {
@@ -226,7 +229,7 @@
 				});
 				(c.props as any).server = server;
 			}
-			__type_for_id.set(c.id, c.props.mode);
+			__type_for_id.set(c.id, c.props.interactive);
 
 			if (c.type === "dataset") {
 				const example_component_map = new Map();
@@ -261,7 +264,7 @@
 				variant: "component"
 			});
 			_component_set.add(_c);
-			__component_map.set(`${c.type}_${c.props.mode}`, _c);
+			__component_map.set(`${c.type}_${c.props.interactive}`, _c);
 		});
 
 		Promise.all(Array.from(_component_set)).then(() => {

js/app/src/types.ts

@@ -11,7 +11,7 @@ export interface ComponentMeta {
 	type: string;
 	id: number;
 	has_modes: boolean;
-	props: Record<string, unknown> & { mode: "interactive" | "static" };
+	props: Record<string, unknown> & { interactive: boolean };
 	instance: SvelteComponent;
 	component: ComponentType<SvelteComponent>;
 	documentation?: Documentation;

js/app/test/components.test.ts

@@ -57,34 +57,34 @@ const components = [
 	[
 		"StaticAnnotatedImage",
 		StaticAnnotatedImage,
-		{ height: 100, width: 100, value: null, mode: "static" }
+		{ height: 100, width: 100, value: null, interactive: false }
 	],
-	["InteractiveAudio", InteractiveAudio, { mode: "interactive" }],
-	["StaticAudio", StaticAudio, { mode: "static" }],
+	["InteractiveAudio", InteractiveAudio, { interactive: true }],
+	["StaticAudio", StaticAudio, { interactive: false }],
 
-	["StaticChatbot", StaticChatbot, { mode: "static" }],
-	["InteractiveCheckbox", InteractiveCheckbox, { mode: "interactive" }],
-	["StaticCheckbox", StaticCheckbox, { mode: "static" }],
+	["StaticChatbot", StaticChatbot, { interactive: false }],
+	["InteractiveCheckbox", InteractiveCheckbox, { interactive: true }],
+	["StaticCheckbox", StaticCheckbox, { interactive: false }],
 	[
 		"InteractiveCheckboxGroup",
 		InteractiveCheckboxGroup,
-		{ choices: ["a", "b", "c"], mode: "interactive" }
+		{ choices: ["a", "b", "c"], interactive: true }
 	],
 	[
 		"StaticCheckboxGroup",
 		StaticCheckboxGroup,
-		{ choices: ["a", "b", "c"], mode: "static" }
+		{ choices: ["a", "b", "c"], interactive: false }
 	],
-	["InteractiveColorPicker", InteractiveColorPicker, { mode: "interactive" }],
-	["StaticColorPicker", StaticColorPicker, { mode: "static" }],
+	["InteractiveColorPicker", InteractiveColorPicker, { interactive: true }],
+	["StaticColorPicker", StaticColorPicker, { interactive: false }],
 	[
 		"InteractiveDataFrame",
 		InteractiveDataframe,
 		{
 			value: [[1, 2, 3]],
 			col_count: [3, "fixed"],
 			row_count: [3, "fixed"],
-			mode: "interactive"
+			interactive: true
 		}
 	],
 	[
@@ -94,53 +94,53 @@ const components = [
 			value: [[1, 2, 3]],
 			col_count: [3, "fixed"],
 			row_count: [3, "fixed"],
-			mode: "static"
+			interactive: false
 		}
 	],
 	[
 		"InteractiveDropdown",
 		InteractiveDropdown,
-		{ choices: ["a", "b", "c"], mode: "interactive" }
+		{ choices: ["a", "b", "c"], interactive: true }
 	],
 	[
 		"StaticDropdown",
 		StaticDropdown,
-		{ choices: ["a", "b", "c"], mode: "static" }
+		{ choices: ["a", "b", "c"], interactive: false }
 	],
-	["InteractiveFile", InteractiveFile, { mode: "interactive" }],
-	["StaticFile", StaticFile, { mode: "static" }],
+	["InteractiveFile", InteractiveFile, { interactive: true }],
+	["StaticFile", StaticFile, { interactive: false }],
 
-	["StaticGallery", StaticGallery, { mode: "static" }],
+	["StaticGallery", StaticGallery, { interactive: false }],
 
-	["StaticHTML", StaticHTML, { mode: "static" }],
+	["StaticHTML", StaticHTML, { interactive: false }],
 
-	["StaticHighlightedText", StaticHighlightedText, { mode: "static" }],
+	["StaticHighlightedText", StaticHighlightedText, { interactive: false }],
 
-	["StaticJson", StaticJson, { mode: "static" }],
+	["StaticJson", StaticJson, { interactive: false }],
 
-	["StaticLabel", StaticLabel, { mode: "static" }],
+	["StaticLabel", StaticLabel, { interactive: false }],
 
-	["StaticMarkdown", StaticMarkdown, { mode: "static" }],
-	["InteractiveModel3D", InteractiveModel3D, { mode: "interactive" }],
-	["StaticModel3D", StaticModel3D, { mode: "static" }],
-	["InteractiveNumber", InteractiveNumber, { mode: "interactive" }],
-	["StaticNumber", StaticNumber, { mode: "static" }],
-	["InteractiveRadio", InteractiveRadio, { mode: "interactive" }],
-	["StaticRadio", StaticRadio, { mode: "static" }],
-	["InteractiveSlider", InteractiveSlider, { mode: "interactive" }],
-	["StaticSlider", StaticSlider, { mode: "static" }],
+	["StaticMarkdown", StaticMarkdown, { interactive: false }],
+	["InteractiveModel3D", InteractiveModel3D, { interactive: true }],
+	["StaticModel3D", StaticModel3D, { interactive: false }],
+	["InteractiveNumber", InteractiveNumber, { interactive: true }],
+	["StaticNumber", StaticNumber, { interactive: false }],
+	["InteractiveRadio", InteractiveRadio, { interactive: true }],
+	["StaticRadio", StaticRadio, { interactive: false }],
+	["InteractiveSlider", InteractiveSlider, { interactive: true }],
+	["StaticSlider", StaticSlider, { interactive: false }],
 	[
 		"InteractiveTextbox",
 		InteractiveTextbox,
-		{ container: false, mode: "interactive" }
+		{ container: false, interactive: true }
 	],
-	["StaticTextbox", StaticTextbox, { container: false, mode: "static" }],
+	["StaticTextbox", StaticTextbox, { container: false, interactive: false }],
 	// ["InteractiveTimeSeries", InteractiveTimeSeries, {}],
 	// ["StaticTimeSeries", StaticTimeSeries, {}],
-	["InteractiveUploadButton", InteractiveUploadButton, { mode: "interactive" }],
-	["StaticUploadButton", StaticUploadButton, { mode: "static" }],
-	["InteractiveVideo", InteractiveVideo, { mode: "interactive" }],
-	["StaticVideo", StaticVideo, { mode: "static" }]
+	["InteractiveUploadButton", InteractiveUploadButton, { interactive: true }],
+	["StaticUploadButton", StaticUploadButton, { interactive: false }],
+	["InteractiveVideo", InteractiveVideo, { interactive: true }],
+	["StaticVideo", StaticVideo, { interactive: false }]
 ] as const;
 
 describe("all components should apply provided class names", () => {

js/audio/Index.svelte

@@ -16,7 +16,7 @@
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
-	export let mode: "static" | "interactive";
+	export let interactive: boolean;
 	export let value: null | FileData = null;
 	export let sources:
 		| ["microphone"]
@@ -102,7 +102,7 @@
 	};
 </script>
 
-{#if mode === "static"}
+{#if !interactive}
 	<Block
 		variant={"solid"}
 		border_mode={dragging ? "focus" : "base"}

js/button/Index.svelte

@@ -12,7 +12,7 @@
 	export let visible = true;
 	export let value: string;
 	export let variant: "primary" | "secondary" | "stop" = "secondary";
-	export let mode: "static" | "interactive" = "interactive";
+	export let interactive: boolean;
 	export let size: "sm" | "lg" = "lg";
 	export let scale: number | null = null;
 	export let icon: string | null = null;
@@ -38,7 +38,7 @@
 	{visible}
 	{root}
 	{root_url}
-	disabled={mode === "static"}
+	disabled={!interactive}
 	on:click={() => gradio.dispatch("click")}
 >
 	{gradio.i18n(value)}

js/checkbox/Index.svelte

@@ -27,7 +27,7 @@
 		select: SelectData;
 		input: never;
 	}>;
-	export let mode: "static" | "interactive";
+	export let interactive: boolean;
 
 	function handle_change(): void {
 		gradio.dispatch("change");
@@ -57,7 +57,7 @@
 	<BaseCheckbox
 		bind:value
 		{label}
-		{mode}
+		{interactive}
 		on:change={handle_change}
 		on:select={(e) => gradio.dispatch("select", e.detail)}
 	/>