@gradio/image 0.15.0 → 0.15.1

package/dist/shared/Webcam.svelte

@@ -0,0 +1,371 @@
+<script>import { createEventDispatcher, onMount } from "svelte";
+import { Camera, Circle, Square, DropdownArrow } from "@gradio/icons";
+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 canvas;
+export let streaming = false;
+export let pending = false;
+export let root = "";
+export let mode = "image";
+export let mirror_webcam;
+export let include_audio;
+export let i18n;
+export let upload;
+const dispatch = createEventDispatcher();
+onMount(() => canvas = document.createElement("canvas"));
+const handle_device_change = async (event) => {
+  const target = event.target;
+  const device_id = target.value;
+  await get_video_stream(include_audio, video_source, 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).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);
+    }
+    canvas.toBlob(
+      (blob) => {
+        dispatch(streaming ? "stream" : "capture", blob);
+      },
+      "image/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 value = ((await upload(val, root))?.filter(Boolean))[0];
+        dispatch("capture", value);
+        dispatch("stop_recording");
+      }
+    };
+    ReaderObj.readAsDataURL(video_blob);
+  } else {
+    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() {
+  if (mode === "image" && streaming) {
+    recording = !recording;
+  }
+  if (mode === "image") {
+    take_picture();
+  } else {
+    take_recording();
+  }
+  if (!recording && stream) {
+    stream.getTracks().forEach((track) => track.stop());
+    video_source.srcObject = null;
+    webcam_accessed = false;
+  }
+}
+if (streaming && mode === "image") {
+  window.setInterval(() => {
+    if (video_source && !pending) {
+      take_picture();
+    }
+  }, 500);
+}
+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;
+}
+</script>
+
+<div class="wrap">
+	<!-- svelte-ignore a11y-media-has-caption -->
+	<!-- need to suppress for video streaming https://github.com/sveltejs/svelte/issues/5967 -->
+	<video
+		bind:this={video_source}
+		class:flip={mirror_webcam}
+		class:hide={!webcam_accessed}
+	/>
+	{#if !webcam_accessed}
+		<div
+			in:fade={{ delay: 100, duration: 200 }}
+			title="grant webcam access"
+			style="height: 100%"
+		>
+			<WebcamPermissions on:click={async () => access_webcam()} />
+		</div>
+	{:else}
+		<div class="button-wrap">
+			<button
+				on:click={record_video_or_photo}
+				aria-label={mode === "image" ? "capture photo" : "start recording"}
+			>
+				{#if mode === "video" || streaming}
+					{#if recording}
+						<div class="icon red" title="stop recording">
+							<Square />
+						</div>
+					{:else}
+						<div class="icon red" title="start recording">
+							<Circle />
+						</div>
+					{/if}
+				{:else}
+					<div class="icon" title="capture photo">
+						<Camera />
+					</div>
+				{/if}
+			</button>
+			{#if !recording}
+				<button
+					class="icon"
+					on:click={() => (options_open = true)}
+					aria-label="select input source"
+				>
+					<DropdownArrow />
+				</button>
+			{/if}
+		</div>
+		{#if options_open && selected_device}
+			<select
+				class="select-wrap"
+				aria-label="select source"
+				use:click_outside={handle_click_outside}
+				on:change={handle_device_change}
+			>
+				<button
+					class="inset-icon"
+					on:click|stopPropagation={() => (options_open = false)}
+				>
+					<DropdownArrow />
+				</button>
+				{#if available_video_devices.length === 0}
+					<option value="">{i18n("common.no_devices")}</option>
+				{:else}
+					{#each available_video_devices as device}
+						<option
+							value={device.deviceId}
+							selected={selected_device.deviceId === device.deviceId}
+						>
+							{device.label}
+						</option>
+					{/each}
+				{/if}
+			</select>
+		{/if}
+	{/if}
+</div>
+
+<style>
+	.wrap {
+		position: relative;
+		width: var(--size-full);
+		height: var(--size-full);
+	}
+
+	.hide {
+		display: none;
+	}
+
+	video {
+		width: var(--size-full);
+		height: var(--size-full);
+		object-fit: cover;
+	}
+
+	.button-wrap {
+		position: absolute;
+		background-color: var(--block-background-fill);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-xl);
+		padding: var(--size-1-5);
+		display: flex;
+		bottom: var(--size-2);
+		left: 50%;
+		transform: translate(-50%, 0);
+		box-shadow: var(--shadow-drop-lg);
+		border-radius: var(--radius-xl);
+		line-height: var(--size-3);
+		color: var(--button-secondary-text-color);
+	}
+
+	@media (--screen-md) {
+		button {
+			bottom: var(--size-4);
+		}
+	}
+
+	@media (--screen-xl) {
+		button {
+			bottom: var(--size-8);
+		}
+	}
+
+	.icon {
+		opacity: 0.8;
+		width: 18px;
+		height: 18px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.red {
+		fill: red;
+		stroke: red;
+	}
+
+	.flip {
+		transform: scaleX(-1);
+	}
+
+	.select-wrap {
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		appearance: none;
+		color: var(--button-secondary-text-color);
+		background-color: transparent;
+		width: 95%;
+		font-size: var(--text-md);
+		position: absolute;
+		bottom: var(--size-2);
+		background-color: var(--block-background-fill);
+		box-shadow: var(--shadow-drop-lg);
+		border-radius: var(--radius-xl);
+		z-index: var(--layer-top);
+		border: 1px solid var(--border-color-primary);
+		text-align: left;
+		line-height: var(--size-4);
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		left: 50%;
+		transform: translate(-50%, 0);
+		max-width: var(--size-52);
+	}
+
+	.select-wrap > option {
+		padding: 0.25rem 0.5rem;
+		border-bottom: 1px solid var(--border-color-accent);
+		padding-right: var(--size-8);
+		text-overflow: ellipsis;
+		overflow: hidden;
+	}
+
+	.select-wrap > option:hover {
+		background-color: var(--color-accent);
+	}
+
+	.select-wrap > option:last-child {
+		border: none;
+	}
+
+	.inset-icon {
+		position: absolute;
+		top: 5px;
+		right: -6.5px;
+		width: var(--size-10);
+		height: var(--size-5);
+		opacity: 0.8;
+	}
+
+	@media (--screen-md) {
+		.wrap {
+			font-size: var(--text-lg);
+		}
+	}
+</style>

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

@@ -0,0 +1,33 @@
+import { SvelteComponent } from "svelte";
+import type { I18nFormatter } from "@gradio/utils";
+import { type FileData, type Client } from "@gradio/client";
+declare const __propDef: {
+    props: {
+        streaming?: boolean | undefined;
+        pending?: boolean | undefined;
+        root?: string | undefined;
+        mode?: ("image" | "video") | undefined;
+        mirror_webcam: boolean;
+        include_audio: boolean;
+        i18n: I18nFormatter;
+        upload: Client["upload"];
+        click_outside?: ((node: Node, cb: any) => any) | undefined;
+    };
+    events: {
+        stream: CustomEvent<undefined>;
+        capture: CustomEvent<Blob | FileData | null>;
+        error: CustomEvent<string>;
+        start_recording: CustomEvent<undefined>;
+        stop_recording: CustomEvent<undefined>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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 click_outside(): (node: Node, cb: any) => any;
+}
+export {};

package/dist/shared/WebcamPermissions.svelte

@@ -0,0 +1,42 @@
+<script>import { Webcam } from "@gradio/icons";
+import { createEventDispatcher } from "svelte";
+const dispatch = createEventDispatcher();
+</script>
+
+<button style:height="100%" on:click={() => dispatch("click")}>
+	<div class="wrap">
+		<span class="icon-wrap">
+			<Webcam />
+		</span>
+		{"Click to Access Webcam"}
+	</div>
+</button>
+
+<style>
+	button {
+		cursor: pointer;
+		width: var(--size-full);
+	}
+
+	.wrap {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		min-height: var(--size-60);
+		color: var(--block-label-text-color);
+		height: 100%;
+		padding-top: var(--size-3);
+	}
+
+	.icon-wrap {
+		width: 30px;
+		margin-bottom: var(--spacing-lg);
+	}
+
+	@media (--screen-md) {
+		.wrap {
+			font-size: var(--text-lg);
+		}
+	}
+</style>

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        click: CustomEvent<undefined>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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> {
+}
+export {};

package/dist/shared/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Image } from "./Image.svelte";
+export { default as StaticImage } from "./ImagePreview.svelte";

package/dist/shared/index.js

@@ -0,0 +1,2 @@
+export { default as Image } from "./Image.svelte";
+export { default as StaticImage } from "./ImagePreview.svelte";

package/dist/shared/stream_utils.d.ts

@@ -0,0 +1,5 @@
+export declare function get_devices(): Promise<MediaDeviceInfo[]>;
+export declare function handle_error(error: string): void;
+export declare function set_local_stream(local_stream: MediaStream | null, video_source: HTMLVideoElement): void;
+export declare function get_video_stream(include_audio: boolean, video_source: HTMLVideoElement, device_id?: string): Promise<MediaStream>;
+export declare function set_available_devices(devices: MediaDeviceInfo[]): MediaDeviceInfo[];

package/dist/shared/stream_utils.js

@@ -0,0 +1,31 @@
+export function get_devices() {
+    return navigator.mediaDevices.enumerateDevices();
+}
+export function handle_error(error) {
+    throw new Error(error);
+}
+export function set_local_stream(local_stream, video_source) {
+    video_source.srcObject = local_stream;
+    video_source.muted = true;
+    video_source.play();
+}
+export async function get_video_stream(include_audio, video_source, device_id) {
+    const size = {
+        width: { ideal: 1920 },
+        height: { ideal: 1440 }
+    };
+    const constraints = {
+        video: device_id ? { deviceId: { exact: device_id }, ...size } : size,
+        audio: include_audio
+    };
+    return navigator.mediaDevices
+        .getUserMedia(constraints)
+        .then((local_stream) => {
+        set_local_stream(local_stream, video_source);
+        return local_stream;
+    });
+}
+export function set_available_devices(devices) {
+    const cameras = devices.filter((device) => device.kind === "videoinput");
+    return cameras;
+}

package/dist/shared/utils.d.ts

@@ -0,0 +1 @@
+export declare const get_coordinates_of_clicked_image: (evt: MouseEvent) => [number, number] | null;

package/dist/shared/utils.js

@@ -0,0 +1,28 @@
+export const get_coordinates_of_clicked_image = (evt) => {
+    let image;
+    if (evt.currentTarget instanceof Element) {
+        image = evt.currentTarget.querySelector("img");
+    }
+    else {
+        return [NaN, NaN];
+    }
+    const imageRect = image.getBoundingClientRect();
+    const xScale = image.naturalWidth / imageRect.width;
+    const yScale = image.naturalHeight / imageRect.height;
+    if (xScale > yScale) {
+        const displayed_height = image.naturalHeight / xScale;
+        const y_offset = (imageRect.height - displayed_height) / 2;
+        var x = Math.round((evt.clientX - imageRect.left) * xScale);
+        var y = Math.round((evt.clientY - imageRect.top - y_offset) * xScale);
+    }
+    else {
+        const displayed_width = image.naturalWidth / yScale;
+        const x_offset = (imageRect.width - displayed_width) / 2;
+        var x = Math.round((evt.clientX - imageRect.left - x_offset) * yScale);
+        var y = Math.round((evt.clientY - imageRect.top) * yScale);
+    }
+    if (x < 0 || x >= image.naturalWidth || y < 0 || y >= image.naturalHeight) {
+        return null;
+    }
+    return [x, y];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/image",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -10,25 +10,44 @@
     "cropperjs": "^1.5.12",
     "lazy-brush": "^1.0.1",
     "resize-observer-polyfill": "^1.5.1",
-    "@gradio/atoms": "^0.8.0",
-    "@gradio/icons": "^0.7.1",
-    "@gradio/statustracker": "^0.7.5",
-    "@gradio/client": "^1.5.1",
-    "@gradio/utils": "^0.6.0",
-    "@gradio/wasm": "^0.13.0",
-    "@gradio/upload": "^0.12.3"
+    "@gradio/atoms": "^0.8.1",
+    "@gradio/client": "^1.5.2",
+    "@gradio/icons": "^0.7.2",
+    "@gradio/statustracker": "^0.7.6",
+    "@gradio/utils": "^0.6.1",
+    "@gradio/upload": "^0.12.4",
+    "@gradio/wasm": "^0.13.1"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.11.0"
+    "@gradio/preview": "^0.11.1"
   },
   "main_changeset": true,
   "main": "./Index.svelte",
   "exports": {
-    ".": "./Index.svelte",
-    "./shared": "./shared/index.ts",
-    "./example": "./Example.svelte",
-    "./base": "./shared/ImagePreview.svelte",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    ".": {
+      "gradio": "./Index.svelte",
+      "svelte": "./dist/Index.svelte",
+      "types": "./dist/Index.svelte.d.ts"
+    },
+    "./example": {
+      "gradio": "./Example.svelte",
+      "svelte": "./dist/Example.svelte",
+      "types": "./dist/Example.svelte.d.ts"
+    },
+    "./base": {
+      "gradio": "./shared/ImagePreview.svelte",
+      "svelte": "./dist/shared/ImagePreview.svelte",
+      "types": "./dist/shared/ImagePreview.svelte.d.ts"
+    },
+    "./shared": {
+      "gradio": "./shared/index.ts",
+      "svelte": "./dist/shared/index.js",
+      "types": "./dist/shared/index.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
   },
   "repository": {
     "type": "git",