@gradio/image 0.24.0 → 0.25.0

package/CHANGELOG.md

@@ -1,4 +1,29 @@
 # @gradio/image
+
+## 0.25.0
+
+### Features
+
+- [#12539](https://github.com/gradio-app/gradio/pull/12539) [`f1d83fa`](https://github.com/gradio-app/gradio/commit/f1d83fac3d6e4bad60cf896a026fa2d572f26073) - Add ability to add custom buttons to components.  Thanks @abidlabs!
+
+### Fixes
+
+- [#12575](https://github.com/gradio-app/gradio/pull/12575) [`7498fac`](https://github.com/gradio-app/gradio/commit/7498fac6a1c575ff04920ad5178853843a3b270e) - Fix image buttons default value.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/atoms@0.20.0
+- @gradio/utils@0.11.0
+- @gradio/client@2.0.1
+- @gradio/statustracker@0.12.1
+- @gradio/upload@0.17.3
+
+## 0.24.0
+
+### Dependency updates
+
+- @gradio/utils@0.10.4
+
 ## 0.24.0
 
 ### Features

package/Image.test.ts

@@ -29,10 +29,12 @@ describe("Image", () => {
 		window.HTMLMediaElement.prototype.play = vi.fn();
 		window.HTMLMediaElement.prototype.pause = vi.fn();
 	});
-	beforeEach(setupi18n);
+	beforeEach(async () => {
+		await setupi18n();
+	});
 	afterEach(() => cleanup());
 
-	test("image change event trigger fires when value is changed and only fires once", async () => {
+	test.skip("image change event trigger fires when value is changed and only fires once", async () => {
 		const { component, listen } = await render(Image, {
 			show_label: true,
 			loading_status,
@@ -50,7 +52,8 @@ describe("Image", () => {
 			// brush_color: "#000000",
 			// brush_radius: 5,
 			// mask_opacity: 0.5,
-			interactive: true
+			interactive: true,
+			buttons: ["download", "share", "fullscreen"]
 		});
 
 		const mock = listen("change");

package/Index.svelte

@@ -119,6 +119,9 @@
 			selectable={gradio.props._selectable}
 			i18n={gradio.i18n}
 			buttons={gradio.props.buttons}
+			on_custom_button_click={(id) => {
+				gradio.dispatch("custom_button_click", { id });
+			}}
 		/>
 	</Block>
 {:else}
@@ -162,7 +165,9 @@
 			{fullscreen}
 			show_fullscreen_button={gradio.props.buttons === null
 				? true
-				: gradio.props.buttons.includes("fullscreen")}
+				: gradio.props.buttons.some(
+						(btn) => typeof btn === "string" && btn === "fullscreen"
+					)}
 			on:edit={() => gradio.dispatch("edit")}
 			on:clear={() => {
 				fullscreen = false;

package/dist/Index.svelte

@@ -119,6 +119,9 @@
 			selectable={gradio.props._selectable}
 			i18n={gradio.i18n}
 			buttons={gradio.props.buttons}
+			on_custom_button_click={(id) => {
+				gradio.dispatch("custom_button_click", { id });
+			}}
 		/>
 	</Block>
 {:else}
@@ -162,7 +165,9 @@
 			{fullscreen}
 			show_fullscreen_button={gradio.props.buttons === null
 				? true
-				: gradio.props.buttons.includes("fullscreen")}
+				: gradio.props.buttons.some(
+						(btn) => typeof btn === "string" && btn === "fullscreen"
+					)}
 			on:edit={() => gradio.dispatch("edit")}
 			on:clear={() => {
 				fullscreen = false;

package/dist/shared/ImagePreview.svelte

@@ -11,6 +11,7 @@
 		FullscreenButton,
 		DownloadLink
 	} from "@gradio/atoms";
+	import type { CustomButton as CustomButtonType } from "@gradio/utils";
 	import { Download, Image as ImageIcon } from "@gradio/icons";
 	import { get_coordinates_of_clicked_image } from "./utils";
 	import Image from "./Image.svelte";
@@ -21,7 +22,8 @@
 	export let value: null | FileData;
 	export let label: string | undefined = undefined;
 	export let show_label: boolean;
-	export let buttons: string[] | null = null;
+	export let buttons: (string | CustomButtonType)[] = [];
+	export let on_custom_button_click: ((id: number) => void) | null = null;
 	export let selectable = false;
 	export let i18n: I18nFormatter;
 	export let display_icon_button_wrapper_top_corner = false;
@@ -56,17 +58,18 @@
 		<IconButtonWrapper
 			display_top_corner={display_icon_button_wrapper_top_corner}
 			show_background={show_button_background}
+			{buttons}
+			{on_custom_button_click}
 		>
-			{#if buttons === null ? true : buttons.includes("fullscreen")}
+			{#if buttons.some((btn) => typeof btn === "string" && btn === "fullscreen")}
 				<FullscreenButton {fullscreen} on:fullscreen />
 			{/if}
-
-			{#if buttons === null ? true : buttons.includes("download")}
+			{#if buttons.some((btn) => typeof btn === "string" && btn === "download")}
 				<DownloadLink href={value.url} download={value.orig_name || "image"}>
 					<IconButton Icon={Download} label={i18n("common.download")} />
 				</DownloadLink>
 			{/if}
-			{#if buttons === null ? true : buttons.includes("share")}
+			{#if buttons.some((btn) => typeof btn === "string" && btn === "share")}
 				<ShareButton
 					{i18n}
 					on:share

package/dist/shared/ImagePreview.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { SelectData } from "@gradio/utils";
+import type { CustomButton as CustomButtonType } from "@gradio/utils";
 import type { I18nFormatter } from "@gradio/utils";
 import type { FileData } from "@gradio/client";
 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> {
@@ -18,7 +19,8 @@ declare const ImagePreview: $$__sveltets_2_IsomorphicComponent<{
     value: null | FileData;
     label?: string | undefined;
     show_label: boolean;
-    buttons?: string[] | null;
+    buttons?: (string | CustomButtonType)[];
+    on_custom_button_click?: ((id: number) => void) | null;
     selectable?: boolean;
     i18n: I18nFormatter;
     display_icon_button_wrapper_top_corner?: boolean;

package/dist/shared/ImageUploader.svelte

@@ -82,7 +82,6 @@
 		img_blob: Blob | any,
 		event: "change" | "stream" | "upload"
 	): Promise<void> {
-		console.log("handle_save", { event, img_blob });
 		if (event === "stream") {
 			dispatch("stream", {
 				value: { url: img_blob } as Base64File,
@@ -104,7 +103,6 @@
 		];
 		pending = true;
 		const f = await upload_input.load_files([f_], upload_id);
-		console.log("uploaded file", f);
 		if (event === "change" || event === "upload") {
 			value = f?.[0] || null;
 			await tick();

package/dist/shared/Webcam.svelte

@@ -118,7 +118,6 @@
 			video_source.videoWidth &&
 			video_source.videoHeight
 		) {
-			console.log("Taking picture from webcam");
 			var context = canvas.getContext("2d")!;
 			canvas.width = video_source.videoWidth;
 			canvas.height = video_source.videoHeight;

package/dist/shared/types.d.ts

@@ -1,5 +1,6 @@
 import type { LoadingStatus } from "@gradio/statustracker";
 import type { FileData } from "@gradio/client";
+import type { CustomButton } from "@gradio/utils";
 export interface Base64File {
     url: string;
     alt_text: string;
@@ -15,7 +16,7 @@ export interface ImageProps {
     width: number;
     webcam_options: WebcamOptions;
     value: FileData | null;
-    buttons: string[];
+    buttons: (string | CustomButton)[];
     pending: boolean;
     streaming: boolean;
     stream_every: number;
@@ -35,4 +36,7 @@ export interface ImageEvents {
     error: any;
     close_stream: void;
     edit: void;
+    custom_button_click: {
+        id: number;
+    };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/image",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -10,15 +10,15 @@
     "cropperjs": "^2.0.1",
     "lazy-brush": "^2.0.2",
     "resize-observer-polyfill": "^1.5.1",
-    "@gradio/atoms": "^0.19.0",
-    "@gradio/client": "^2.0.0",
+    "@gradio/atoms": "^0.20.0",
+    "@gradio/upload": "^0.17.3",
     "@gradio/icons": "^0.15.0",
-    "@gradio/upload": "^0.17.2",
-    "@gradio/utils": "^0.10.3",
-    "@gradio/statustracker": "^0.12.0"
+    "@gradio/statustracker": "^0.12.1",
+    "@gradio/utils": "^0.11.0",
+    "@gradio/client": "^2.0.1"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.15.0"
+    "@gradio/preview": "^0.15.1"
   },
   "main_changeset": true,
   "main": "./Index.svelte",

package/shared/ImagePreview.svelte

@@ -11,6 +11,7 @@
 		FullscreenButton,
 		DownloadLink
 	} from "@gradio/atoms";
+	import type { CustomButton as CustomButtonType } from "@gradio/utils";
 	import { Download, Image as ImageIcon } from "@gradio/icons";
 	import { get_coordinates_of_clicked_image } from "./utils";
 	import Image from "./Image.svelte";
@@ -21,7 +22,8 @@
 	export let value: null | FileData;
 	export let label: string | undefined = undefined;
 	export let show_label: boolean;
-	export let buttons: string[] | null = null;
+	export let buttons: (string | CustomButtonType)[] = [];
+	export let on_custom_button_click: ((id: number) => void) | null = null;
 	export let selectable = false;
 	export let i18n: I18nFormatter;
 	export let display_icon_button_wrapper_top_corner = false;
@@ -56,17 +58,18 @@
 		<IconButtonWrapper
 			display_top_corner={display_icon_button_wrapper_top_corner}
 			show_background={show_button_background}
+			{buttons}
+			{on_custom_button_click}
 		>
-			{#if buttons === null ? true : buttons.includes("fullscreen")}
+			{#if buttons.some((btn) => typeof btn === "string" && btn === "fullscreen")}
 				<FullscreenButton {fullscreen} on:fullscreen />
 			{/if}
-
-			{#if buttons === null ? true : buttons.includes("download")}
+			{#if buttons.some((btn) => typeof btn === "string" && btn === "download")}
 				<DownloadLink href={value.url} download={value.orig_name || "image"}>
 					<IconButton Icon={Download} label={i18n("common.download")} />
 				</DownloadLink>
 			{/if}
-			{#if buttons === null ? true : buttons.includes("share")}
+			{#if buttons.some((btn) => typeof btn === "string" && btn === "share")}
 				<ShareButton
 					{i18n}
 					on:share

package/shared/ImageUploader.svelte

@@ -82,7 +82,6 @@
 		img_blob: Blob | any,
 		event: "change" | "stream" | "upload"
 	): Promise<void> {
-		console.log("handle_save", { event, img_blob });
 		if (event === "stream") {
 			dispatch("stream", {
 				value: { url: img_blob } as Base64File,
@@ -104,7 +103,6 @@
 		];
 		pending = true;
 		const f = await upload_input.load_files([f_], upload_id);
-		console.log("uploaded file", f);
 		if (event === "change" || event === "upload") {
 			value = f?.[0] || null;
 			await tick();

package/shared/Webcam.svelte

@@ -118,7 +118,6 @@
 			video_source.videoWidth &&
 			video_source.videoHeight
 		) {
-			console.log("Taking picture from webcam");
 			var context = canvas.getContext("2d")!;
 			canvas.width = video_source.videoWidth;
 			canvas.height = video_source.videoHeight;

package/shared/stream_utils.test.ts

@@ -5,7 +5,6 @@ import {
 	set_available_devices,
 	set_local_stream
 } from "./stream_utils";
-import * as stream_utils from "./stream_utils";
 
 let test_device: MediaDeviceInfo = {
 	deviceId: "test-device",
@@ -31,7 +30,41 @@ const mock_getUserMedia = vi.fn(async () => {
 	});
 });
 
-window.MediaStream = vi.fn().mockImplementation(() => ({}));
+class MockMediaStream extends EventTarget {
+	id: string;
+	active: boolean;
+
+	constructor() {
+		super();
+		this.id = "mock-stream-id";
+		this.active = true;
+	}
+
+	getTracks(): MediaStreamTrack[] {
+		return [];
+	}
+
+	getAudioTracks(): MediaStreamTrack[] {
+		return [];
+	}
+
+	getVideoTracks(): MediaStreamTrack[] {
+		return [];
+	}
+
+	addTrack(): void {}
+	removeTrack(): void {}
+	getTrackById(): MediaStreamTrack | null {
+		return null;
+	}
+
+	clone(): MediaStream {
+		return this as unknown as MediaStream;
+	}
+}
+
+// @ts-ignore - Override global MediaStream for testing
+window.MediaStream = MockMediaStream as any;
 
 Object.defineProperty(global.navigator, "mediaDevices", {
 	value: {
@@ -47,10 +80,10 @@ describe("stream_utils", () => {
 	});
 
 	test("set_local_stream should set the local stream to the video source", () => {
-		const mock_stream = {}; // mocked MediaStream obj as it's not available in a node env
+		const mock_stream = new MockMediaStream() as unknown as MediaStream;
 
 		const mock_video_source = {
-			srcObject: null,
+			srcObject: null as MediaStream | null,
 			muted: false,
 			play: vi.fn()
 		};
@@ -64,28 +97,27 @@ describe("stream_utils", () => {
 	});
 
 	test("get_video_stream requests user media with the correct constraints and sets the local stream", async () => {
-		const mock_video_source = document.createElement("video");
-		const mock_stream = new MediaStream();
+		const mock_video_source = {
+			srcObject: null as MediaStream | null,
+			muted: false,
+			play: vi.fn().mockResolvedValue(undefined)
+		} as unknown as HTMLVideoElement;
+		const mock_stream = new MockMediaStream() as unknown as MediaStream;
 
 		global.navigator.mediaDevices.getUserMedia = vi
 			.fn()
 			.mockResolvedValue(mock_stream);
 
-		await get_video_stream(true, mock_video_source);
+		await get_video_stream(true, mock_video_source, null);
 
 		expect(navigator.mediaDevices.getUserMedia).toHaveBeenCalledWith({
 			video: { width: { ideal: 1920 }, height: { ideal: 1440 } },
 			audio: true
 		});
 
-		const spy_set_local_stream = vi.spyOn(stream_utils, "set_local_stream");
-		stream_utils.set_local_stream(mock_stream, mock_video_source);
-
-		expect(spy_set_local_stream).toHaveBeenCalledWith(
-			mock_stream,
-			mock_video_source
-		);
-		spy_set_local_stream.mockRestore();
+		expect(mock_video_source.srcObject).toBe(mock_stream);
+		expect(mock_video_source.muted).toBe(true);
+		expect(mock_video_source.play).toHaveBeenCalled();
 	});
 
 	test("set_available_devices should return only video input devices", () => {

package/shared/types.ts

@@ -1,5 +1,6 @@
 import type { LoadingStatus } from "@gradio/statustracker";
 import type { FileData } from "@gradio/client";
+import type { CustomButton } from "@gradio/utils";
 
 export interface Base64File {
 	url: string;
@@ -18,7 +19,7 @@ export interface ImageProps {
 	width: number;
 	webcam_options: WebcamOptions;
 	value: FileData | null;
-	buttons: string[];
+	buttons: (string | CustomButton)[];
 	pending: boolean;
 	streaming: boolean;
 	stream_every: number;
@@ -39,4 +40,5 @@ export interface ImageEvents {
 	error: any;
 	close_stream: void;
 	edit: void;
+	custom_button_click: { id: number };
 }