@gradio/image 0.23.2-dev.0 → 0.24.0-dev.2

package/dist/shared/Webcam.svelte

@@ -1,229 +1,265 @@
-<script>import { createEventDispatcher, onDestroy, onMount } from "svelte";
-import {
-  Camera,
-  Circle,
-  Square,
-  DropdownArrow,
-  Spinner
-} from "@gradio/icons";
-import { StreamingBar } from "@gradio/statustracker";
-import { prepare_files } from "@gradio/client";
-import WebcamPermissions from "./WebcamPermissions.svelte";
-import { fade } from "svelte/transition";
-import {
-  get_devices,
-  get_video_stream,
-  set_available_devices
-} from "./stream_utils";
-let video_source;
-let available_video_devices = [];
-let selected_device = null;
-let time_limit = null;
-let stream_state = "closed";
-export const modify_stream = (state) => {
-  if (state === "closed") {
-    time_limit = null;
-    stream_state = "closed";
-    value = null;
-  } else if (state === "waiting") {
-    stream_state = "waiting";
-  } else {
-    stream_state = "open";
-  }
-};
-export const set_time_limit = (time) => {
-  if (recording) time_limit = time;
-};
-let canvas;
-export let streaming = false;
-export let pending = false;
-export let root = "";
-export let stream_every = 1;
-export let mode = "image";
-export let mirror_webcam;
-export let include_audio;
-export let webcam_constraints = null;
-export let i18n;
-export let upload;
-export let value = null;
-const dispatch = createEventDispatcher();
-onMount(() => {
-  canvas = document.createElement("canvas");
-  if (streaming && mode === "image") {
-    window.setInterval(() => {
-      if (video_source && !pending) {
-        take_picture();
-      }
-    }, stream_every * 1e3);
-  }
-});
-const handle_device_change = async (event) => {
-  const target = event.target;
-  const device_id = target.value;
-  await get_video_stream(
-    include_audio,
-    video_source,
-    webcam_constraints,
-    device_id
-  ).then(async (local_stream) => {
-    stream = local_stream;
-    selected_device = available_video_devices.find(
-      (device) => device.deviceId === device_id
-    ) || null;
-    options_open = false;
-  });
-};
-async function access_webcam() {
-  try {
-    get_video_stream(include_audio, video_source, webcam_constraints).then(async (local_stream) => {
-      webcam_accessed = true;
-      available_video_devices = await get_devices();
-      stream = local_stream;
-    }).then(() => set_available_devices(available_video_devices)).then((devices) => {
-      available_video_devices = devices;
-      const used_devices = stream.getTracks().map((track) => track.getSettings()?.deviceId)[0];
-      selected_device = used_devices ? devices.find((device) => device.deviceId === used_devices) || available_video_devices[0] : available_video_devices[0];
-    });
-    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
-      dispatch("error", i18n("image.no_webcam_support"));
-    }
-  } catch (err) {
-    if (err instanceof DOMException && err.name == "NotAllowedError") {
-      dispatch("error", i18n("image.allow_webcam_access"));
-    } else {
-      throw err;
-    }
-  }
-}
-function take_picture() {
-  var context = canvas.getContext("2d");
-  if ((!streaming || streaming && recording) && video_source.videoWidth && video_source.videoHeight) {
-    canvas.width = video_source.videoWidth;
-    canvas.height = video_source.videoHeight;
-    context.drawImage(
-      video_source,
-      0,
-      0,
-      video_source.videoWidth,
-      video_source.videoHeight
-    );
-    if (mirror_webcam) {
-      context.scale(-1, 1);
-      context.drawImage(video_source, -video_source.videoWidth, 0);
-    }
-    if (streaming && (!recording || stream_state === "waiting")) {
-      return;
-    }
-    if (streaming) {
-      const image_data = canvas.toDataURL("image/jpeg");
-      dispatch("stream", image_data);
-      return;
-    }
-    canvas.toBlob(
-      (blob) => {
-        dispatch(streaming ? "stream" : "capture", blob);
-      },
-      `image/${streaming ? "jpeg" : "png"}`,
-      0.8
-    );
-  }
-}
-let recording = false;
-let recorded_blobs = [];
-let stream;
-let mimeType;
-let media_recorder;
-function take_recording() {
-  if (recording) {
-    media_recorder.stop();
-    let video_blob = new Blob(recorded_blobs, { type: mimeType });
-    let ReaderObj = new FileReader();
-    ReaderObj.onload = async function(e) {
-      if (e.target) {
-        let _video_blob = new File(
-          [video_blob],
-          "sample." + mimeType.substring(6)
-        );
-        const val = await prepare_files([_video_blob]);
-        let val_ = ((await upload(val, root))?.filter(Boolean))[0];
-        dispatch("capture", val_);
-        dispatch("stop_recording");
-      }
-    };
-    ReaderObj.readAsDataURL(video_blob);
-  } else if (typeof MediaRecorder !== "undefined") {
-    dispatch("start_recording");
-    recorded_blobs = [];
-    let validMimeTypes = ["video/webm", "video/mp4"];
-    for (let validMimeType of validMimeTypes) {
-      if (MediaRecorder.isTypeSupported(validMimeType)) {
-        mimeType = validMimeType;
-        break;
-      }
-    }
-    if (mimeType === null) {
-      console.error("No supported MediaRecorder mimeType");
-      return;
-    }
-    media_recorder = new MediaRecorder(stream, {
-      mimeType
-    });
-    media_recorder.addEventListener("dataavailable", function(e) {
-      recorded_blobs.push(e.data);
-    });
-    media_recorder.start(200);
-  }
-  recording = !recording;
-}
-let webcam_accessed = false;
-function record_video_or_photo({
-  destroy
-} = {}) {
-  if (mode === "image" && streaming) {
-    recording = !recording;
-  }
-  if (!destroy) {
-    if (mode === "image") {
-      take_picture();
-    } else {
-      take_recording();
-    }
-  }
-  if (!recording && stream) {
-    dispatch("close_stream");
-    stream.getTracks().forEach((track) => track.stop());
-    video_source.srcObject = null;
-    webcam_accessed = false;
-    window.setTimeout(() => {
-      value = null;
-    }, 500);
-    value = null;
-  }
-}
-let options_open = false;
-export function click_outside(node, cb) {
-  const handle_click = (event) => {
-    if (node && !node.contains(event.target) && !event.defaultPrevented) {
-      cb(event);
-    }
-  };
-  document.addEventListener("click", handle_click, true);
-  return {
-    destroy() {
-      document.removeEventListener("click", handle_click, true);
-    }
-  };
-}
-function handle_click_outside(event) {
-  event.preventDefault();
-  event.stopPropagation();
-  options_open = false;
-}
-onDestroy(() => {
-  if (typeof window === "undefined") return;
-  record_video_or_photo({ destroy: true });
-  stream?.getTracks().forEach((track) => track.stop());
-});
+<script lang="ts">
+	import { createEventDispatcher, onDestroy, onMount } from "svelte";
+	import {
+		Camera,
+		Circle,
+		Square,
+		DropdownArrow,
+		Spinner
+	} from "@gradio/icons";
+	import type { I18nFormatter } from "@gradio/utils";
+	import { StreamingBar } from "@gradio/statustracker";
+	import { type FileData, type Client, prepare_files } from "@gradio/client";
+	import WebcamPermissions from "./WebcamPermissions.svelte";
+	import { fade } from "svelte/transition";
+	import {
+		get_devices,
+		get_video_stream,
+		set_available_devices
+	} from "./stream_utils";
+	import type { Base64File } from "./types";
+
+	let video_source: HTMLVideoElement;
+	let available_video_devices: MediaDeviceInfo[] = [];
+	let selected_device: MediaDeviceInfo | null = null;
+
+	export let stream_state: "open" | "waiting" | "closed" = "closed";
+
+	let canvas: HTMLCanvasElement;
+	export let streaming = false;
+	export let pending = false;
+	export let root = "";
+	export let stream_every = 1;
+
+	export let mode: "image" | "video" = "image";
+	export let mirror_webcam: boolean;
+	export let include_audio: boolean;
+	export let webcam_constraints: { [key: string]: any } | null = null;
+	export let i18n: I18nFormatter;
+	export let upload: Client["upload"];
+	export let value: FileData | null | Base64File = null;
+	export let time_limit: number | null = null;
+	const dispatch = createEventDispatcher<{
+		stream: Blob | string;
+		capture: FileData | Blob | null;
+		error: string;
+		start_recording: undefined;
+		stop_recording: undefined;
+		close_stream: undefined;
+	}>();
+
+	onMount(() => {
+		canvas = document.createElement("canvas");
+		if (streaming && mode === "image") {
+			window.setInterval(() => {
+				if (video_source && !pending) {
+					take_picture();
+				}
+			}, stream_every * 1000);
+		}
+	});
+
+	const handle_device_change = async (event: InputEvent): Promise<void> => {
+		const target = event.target as HTMLInputElement;
+		const device_id = target.value;
+
+		await get_video_stream(
+			include_audio,
+			video_source,
+			webcam_constraints,
+			device_id
+		).then(async (local_stream) => {
+			stream = local_stream;
+			selected_device =
+				available_video_devices.find(
+					(device) => device.deviceId === device_id
+				) || null;
+			options_open = false;
+		});
+	};
+
+	async function access_webcam(): Promise<void> {
+		try {
+			get_video_stream(include_audio, video_source, webcam_constraints)
+				.then(async (local_stream) => {
+					webcam_accessed = true;
+					available_video_devices = await get_devices();
+					stream = local_stream;
+				})
+				.then(() => set_available_devices(available_video_devices))
+				.then((devices) => {
+					available_video_devices = devices;
+
+					const used_devices = stream
+						.getTracks()
+						.map((track) => track.getSettings()?.deviceId)[0];
+
+					selected_device = used_devices
+						? devices.find((device) => device.deviceId === used_devices) ||
+							available_video_devices[0]
+						: available_video_devices[0];
+				});
+
+			if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+				dispatch("error", i18n("image.no_webcam_support"));
+			}
+		} catch (err) {
+			if (err instanceof DOMException && err.name == "NotAllowedError") {
+				dispatch("error", i18n("image.allow_webcam_access"));
+			} else {
+				throw err;
+			}
+		}
+	}
+
+	function take_picture(): void {
+		if (
+			(!streaming || (streaming && recording)) &&
+			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;
+			context.drawImage(
+				video_source,
+				0,
+				0,
+				video_source.videoWidth,
+				video_source.videoHeight
+			);
+
+			if (mirror_webcam) {
+				context.scale(-1, 1);
+				context.drawImage(video_source, -video_source.videoWidth, 0);
+			}
+
+			if (streaming && (!recording || stream_state === "waiting")) {
+				return;
+			}
+			if (streaming) {
+				const image_data = canvas.toDataURL("image/jpeg");
+				dispatch("stream", image_data);
+				return;
+			}
+
+			canvas.toBlob(
+				(blob) => {
+					dispatch(streaming ? "stream" : "capture", blob);
+				},
+				`image/${streaming ? "jpeg" : "png"}`,
+				0.8
+			);
+		}
+	}
+
+	let recording = false;
+	let recorded_blobs: BlobPart[] = [];
+	let stream: MediaStream;
+	let mimeType: string;
+	let media_recorder: MediaRecorder;
+
+	function take_recording(): void {
+		if (recording) {
+			media_recorder.stop();
+			let video_blob = new Blob(recorded_blobs, { type: mimeType });
+			let ReaderObj = new FileReader();
+			ReaderObj.onload = async function (e): Promise<void> {
+				if (e.target) {
+					let _video_blob = new File(
+						[video_blob],
+						"sample." + mimeType.substring(6)
+					);
+					const val = await prepare_files([_video_blob]);
+					let val_ = (
+						(await upload(val, root))?.filter(Boolean) as FileData[]
+					)[0];
+					dispatch("capture", val_);
+					dispatch("stop_recording");
+				}
+			};
+			ReaderObj.readAsDataURL(video_blob);
+		} else if (typeof MediaRecorder !== "undefined") {
+			dispatch("start_recording");
+			recorded_blobs = [];
+			let validMimeTypes = ["video/webm", "video/mp4"];
+			for (let validMimeType of validMimeTypes) {
+				if (MediaRecorder.isTypeSupported(validMimeType)) {
+					mimeType = validMimeType;
+					break;
+				}
+			}
+			if (mimeType === null) {
+				console.error("No supported MediaRecorder mimeType");
+				return;
+			}
+			media_recorder = new MediaRecorder(stream, {
+				mimeType: mimeType
+			});
+			media_recorder.addEventListener("dataavailable", function (e) {
+				recorded_blobs.push(e.data);
+			});
+			media_recorder.start(200);
+		}
+		recording = !recording;
+	}
+
+	let webcam_accessed = false;
+
+	function record_video_or_photo({
+		destroy
+	}: { destroy?: boolean } = {}): void {
+		if (mode === "image" && streaming) {
+			recording = !recording;
+		}
+
+		if (!destroy) {
+			if (mode === "image") {
+				take_picture();
+			} else {
+				take_recording();
+			}
+		}
+
+		if (!recording && stream) {
+			dispatch("close_stream");
+		}
+	}
+
+	let options_open = false;
+
+	export function click_outside(node: Node, cb: any): any {
+		const handle_click = (event: MouseEvent): void => {
+			if (
+				node &&
+				!node.contains(event.target as Node) &&
+				!event.defaultPrevented
+			) {
+				cb(event);
+			}
+		};
+
+		document.addEventListener("click", handle_click, true);
+
+		return {
+			destroy() {
+				document.removeEventListener("click", handle_click, true);
+			}
+		};
+	}
+
+	function handle_click_outside(event: MouseEvent): void {
+		event.preventDefault();
+		event.stopPropagation();
+		options_open = false;
+	}
+
+	onDestroy(() => {
+		if (typeof window === "undefined") return;
+		record_video_or_photo({ destroy: true });
+		stream?.getTracks().forEach((track) => track.stop());
+	});
 </script>
 
 <div class="wrap">
@@ -300,12 +336,12 @@ onDestroy(() => {
 				use:click_outside={handle_click_outside}
 				on:change={handle_device_change}
 			>
-				<button
+				<!-- <button
 					class="inset-icon"
 					on:click|stopPropagation={() => (options_open = false)}
 				>
 					<DropdownArrow />
-				</button>
+				</button> -->
 				{#if available_video_devices.length === 0}
 					<option value="">{i18n("common.no_devices")}</option>
 				{:else}

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

@@ -1,46 +1,47 @@
-import { SvelteComponent } from "svelte";
 import type { I18nFormatter } from "@gradio/utils";
 import { type FileData, type Client } from "@gradio/client";
 import type { Base64File } from "./types";
-declare const __propDef: {
-    props: {
-        modify_stream?: (state: "open" | "closed" | "waiting") => void;
-        set_time_limit?: (time: number) => void;
-        streaming?: boolean;
-        pending?: boolean;
-        root?: string;
-        stream_every?: number;
-        mode?: "image" | "video";
-        mirror_webcam: boolean;
-        include_audio: boolean;
-        webcam_constraints?: {
-            [key: string]: any;
-        } | null;
-        i18n: I18nFormatter;
-        upload: Client["upload"];
-        value?: FileData | null | Base64File;
-        click_outside?: (node: Node, cb: any) => any;
+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;
     };
-    events: {
-        stream: CustomEvent<string | Blob>;
-        capture: CustomEvent<any>;
-        error: CustomEvent<string>;
-        start_recording: CustomEvent<undefined>;
-        stop_recording: CustomEvent<undefined>;
-        close_stream: CustomEvent<undefined>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type WebcamProps = typeof __propDef.props;
-export type WebcamEvents = typeof __propDef.events;
-export type WebcamSlots = typeof __propDef.slots;
-export default class Webcam extends SvelteComponent<WebcamProps, WebcamEvents, WebcamSlots> {
-    get modify_stream(): (state: "open" | "closed" | "waiting") => void;
-    get set_time_limit(): (time: number) => void;
-    get click_outside(): (node: Node, cb: any) => any;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Webcam: $$__sveltets_2_IsomorphicComponent<{
+    stream_state?: "open" | "waiting" | "closed";
+    streaming?: boolean;
+    pending?: boolean;
+    root?: string;
+    stream_every?: number;
+    mode?: "image" | "video";
+    mirror_webcam: boolean;
+    include_audio: boolean;
+    webcam_constraints?: {
+        [key: string]: any;
+    } | null;
+    i18n: I18nFormatter;
+    upload: Client["upload"];
+    value?: FileData | null | Base64File;
+    time_limit?: number | null;
+    click_outside?: (node: Node, cb: any) => any;
+}, {
+    stream: CustomEvent<string | Blob>;
+    capture: CustomEvent<Blob | FileData | null>;
+    error: CustomEvent<string>;
+    start_recording: CustomEvent<undefined>;
+    stop_recording: CustomEvent<undefined>;
+    close_stream: CustomEvent<undefined>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    click_outside: (node: Node, cb: any) => any;
+}, string>;
+type Webcam = InstanceType<typeof Webcam>;
+export default Webcam;

package/dist/shared/WebcamPermissions.svelte

@@ -1,6 +1,10 @@
-<script>import { Webcam } from "@gradio/icons";
-import { createEventDispatcher } from "svelte";
-const dispatch = createEventDispatcher();
+<script lang="ts">
+	import { Webcam } from "@gradio/icons";
+	import { createEventDispatcher } from "svelte";
+
+	const dispatch = createEventDispatcher<{
+		click: undefined;
+	}>();
 </script>
 
 <button style:height="100%" on:click={() => dispatch("click")}>

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

@@ -1,18 +1,20 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        click: CustomEvent<undefined>;
-    } & {
-        [evt: string]: CustomEvent<any>;
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type WebcamPermissionsProps = typeof __propDef.props;
-export type WebcamPermissionsEvents = typeof __propDef.events;
-export type WebcamPermissionsSlots = typeof __propDef.slots;
-export default class WebcamPermissions extends SvelteComponent<WebcamPermissionsProps, WebcamPermissionsEvents, WebcamPermissionsSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const WebcamPermissions: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    click: CustomEvent<undefined>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type WebcamPermissions = InstanceType<typeof WebcamPermissions>;
+export default WebcamPermissions;