@gradio/image 0.3.0-beta.5

package/interactive/Webcam.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">
+	import { createEventDispatcher, onMount } from "svelte";
+	import { Camera, Circle, Square } from "@gradio/icons";
+	import type { I18nFormatter } from "js/utils/src";
+
+	let video_source: HTMLVideoElement;
+	let canvas: HTMLCanvasElement;
+	export let streaming = false;
+	export let pending = false;
+
+	export let mode: "image" | "video" = "image";
+	export let mirror_webcam: boolean;
+	export let include_audio: boolean;
+	export let i18n: I18nFormatter;
+
+	const dispatch = createEventDispatcher<{
+		stream: undefined;
+		capture:
+			| {
+					data: FileReader["result"];
+					name: string;
+					is_example?: boolean;
+					is_file: boolean;
+			  }
+			| string;
+		error: string;
+		start_recording: undefined;
+		stop_recording: undefined;
+	}>();
+
+	onMount(() => (canvas = document.createElement("canvas")));
+
+	async function access_webcam(): Promise<void> {
+		try {
+			stream = await navigator.mediaDevices.getUserMedia({
+				video: true,
+				audio: include_audio
+			});
+			video_source.srcObject = stream;
+			video_source.muted = true;
+			video_source.play();
+		} catch (err) {
+			if (err instanceof DOMException && err.name == "NotAllowedError") {
+				dispatch("error", i18n("image.allow_webcam_access"));
+			} else {
+				throw err;
+			}
+		}
+	}
+
+	function take_picture(): void {
+		var context = canvas.getContext("2d")!;
+
+		if (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
+			);
+
+			var data = canvas.toDataURL("image/png");
+			dispatch(streaming ? "stream" : "capture", data);
+		}
+	}
+
+	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 = function (e): void {
+				if (e.target) {
+					dispatch("capture", {
+						data: e.target.result,
+						name: "sample." + mimeType.substring(6),
+						is_example: false,
+						is_file: false
+					});
+					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: mimeType
+			});
+			media_recorder.addEventListener("dataavailable", function (e) {
+				recorded_blobs.push(e.data);
+			});
+			media_recorder.start(200);
+		}
+		recording = !recording;
+	}
+
+	access_webcam();
+
+	if (streaming && mode === "image") {
+		window.setInterval(() => {
+			if (video_source && !pending) {
+				take_picture();
+			}
+		}, 500);
+	}
+</script>
+
+<div class="wrap">
+	<!-- svelte-ignore a11y-media-has-caption -->
+	<video bind:this={video_source} class:flip={mirror_webcam} />
+	{#if !streaming}
+		<button on:click={mode === "image" ? take_picture : take_recording}>
+			{#if mode === "video"}
+				{#if recording}
+					<div class="icon">
+						<Square />
+					</div>
+				{:else}
+					<div class="icon">
+						<Circle />
+					</div>
+				{/if}
+			{:else}
+				<div class="icon">
+					<Camera />
+				</div>
+			{/if}
+		</button>
+	{/if}
+</div>
+
+<style>
+	.wrap {
+		position: relative;
+		width: var(--size-full);
+		height: var(--size-full);
+		min-height: var(--size-60);
+	}
+
+	video {
+		width: var(--size-full);
+		height: var(--size-full);
+	}
+
+	button {
+		display: flex;
+		position: absolute;
+		right: 0px;
+		bottom: var(--size-2);
+		left: 0px;
+		justify-content: center;
+		align-items: center;
+		margin: auto;
+		box-shadow: var(--shadow-drop-lg);
+		border-radius: var(--radius-xl);
+		background-color: rgba(0, 0, 0, 0.9);
+		width: var(--size-10);
+		height: var(--size-10);
+	}
+
+	@media (--screen-md) {
+		button {
+			bottom: var(--size-4);
+		}
+	}
+
+	@media (--screen-xl) {
+		button {
+			bottom: var(--size-8);
+		}
+	}
+
+	.icon {
+		opacity: 0.8;
+		width: 50%;
+		height: 50%;
+		color: white;
+	}
+
+	.flip {
+		transform: scaleX(-1);
+	}
+</style>

package/interactive/index.ts

@@ -0,0 +1,2 @@
+export { default as Webcam } from "./Webcam.svelte";
+export { default } from "./InteractiveImage.svelte";

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@gradio/image",
+  "version": "0.3.0-beta.5",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "main": "./index.svelte",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "dependencies": {
+    "cropperjs": "^1.5.12",
+    "lazy-brush": "^1.0.1",
+    "resize-observer-polyfill": "^1.5.1",
+    "@gradio/atoms": "^0.2.0-beta.3",
+    "@gradio/icons": "^0.2.0-beta.0",
+    "@gradio/statustracker": "^0.3.0-beta.5",
+    "@gradio/upload": "^0.3.0-beta.3",
+    "@gradio/utils": "^0.2.0-beta.3"
+  },
+  "main_changeset": true,
+  "exports": {
+    "./package.json": "./package.json",
+    "./interactive": "./interactive/index.ts",
+    "./static": "./static/index.ts",
+    "./example": "./example/index.ts"
+  }
+}

package/shared/utils.ts

@@ -0,0 +1,24 @@
+export const get_coordinates_of_clicked_image = (
+	evt: MouseEvent
+): [number, number] | null => {
+	let image = evt.currentTarget as HTMLImageElement;
+
+	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/static/ImagePreview.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import type { SelectData } from "@gradio/utils";
+	import { uploadToHuggingFace } from "@gradio/utils";
+	import { BlockLabel, Empty, IconButton, ShareButton } from "@gradio/atoms";
+	import { Download } from "@gradio/icons";
+	import { get_coordinates_of_clicked_image } from "../shared/utils";
+
+	import { Image } from "@gradio/icons";
+	import { type FileData, normalise_file } from "@gradio/upload";
+	import type { I18nFormatter } from "@gradio/utils";
+
+	export let value: null | FileData;
+	let value_: null | FileData;
+	export let label: string | undefined = undefined;
+	export let show_label: boolean;
+	export let show_download_button = true;
+	export let selectable = false;
+	export let show_share_button = false;
+	export let root: string;
+	export let i18n: I18nFormatter;
+
+	const dispatch = createEventDispatcher<{
+		change: string;
+		select: SelectData;
+	}>();
+
+	$: value && dispatch("change", value.data);
+
+	$: if (value !== value_) {
+		value_ = value;
+		normalise_file(value_, root, null);
+	}
+
+	const handle_click = (evt: MouseEvent): void => {
+		let coordinates = get_coordinates_of_clicked_image(evt);
+		if (coordinates) {
+			dispatch("select", { index: coordinates, value: null });
+		}
+	};
+</script>
+
+<BlockLabel {show_label} Icon={Image} label={label || i18n("image.image")} />
+{#if value_ === null}
+	<Empty unpadded_box={true} size="large"><Image /></Empty>
+{:else}
+	<div class="icon-buttons">
+		{#if show_download_button}
+			<a
+				href={value_.data}
+				target={window.__is_colab__ ? "_blank" : null}
+				download={"image"}
+			>
+				<IconButton Icon={Download} label={i18n("common.download")} />
+			</a>
+		{/if}
+		{#if show_share_button}
+			<ShareButton
+				{i18n}
+				on:share
+				on:error
+				formatter={async (value) => {
+					if (!value) return "";
+					let url = await uploadToHuggingFace(value, "base64");
+					return `<img src="${url}" />`;
+				}}
+				{value}
+			/>
+		{/if}
+	</div>
+	<!-- TODO: fix -->
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<!-- svelte-ignore a11y-no-noninteractive-element-interactions-->
+	<img src={value_.data} alt="" class:selectable on:click={handle_click} loading="lazy"/>
+{/if}
+
+<style>
+	img {
+		width: var(--size-full);
+		height: var(--size-full);
+		object-fit: contain;
+	}
+
+	.selectable {
+		cursor: crosshair;
+	}
+
+	.icon-buttons {
+		display: flex;
+		position: absolute;
+		top: 6px;
+		right: 6px;
+		gap: var(--size-1);
+	}
+</style>

package/static/StaticImage.svelte

@@ -0,0 +1,76 @@
+<svelte:options accessors={true} />
+
+<script lang="ts">
+	import type { Gradio, SelectData } from "@gradio/utils";
+	import StaticImage from "./ImagePreview.svelte";
+
+	import { Block } from "@gradio/atoms";
+
+	import { StatusTracker } from "@gradio/statustracker";
+	import type { FileData } from "js/upload/src";
+	import type { LoadingStatus } from "@gradio/statustracker";
+
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let visible = true;
+	export let value: null | FileData = null;
+	export let label: string;
+	export let show_label: boolean;
+	export let show_download_button: boolean;
+	export let root: string;
+
+	export let height: number | undefined;
+	export let width: number | undefined;
+
+	export let selectable = false;
+	export let container = true;
+	export let scale: number | null = null;
+	export let min_width: number | undefined = undefined;
+	export let loading_status: LoadingStatus;
+	export let show_share_button = false;
+	export let gradio: Gradio<{
+		change: never;
+		error: string;
+		select: SelectData;
+		share: ShareData;
+	}>;
+
+	$: value, gradio.dispatch("change");
+	let dragging: boolean;
+
+	$: value = !value ? null : value;
+</script>
+
+<Block
+	{visible}
+	variant={"solid"}
+	border_mode={dragging ? "focus" : "base"}
+	padding={false}
+	{elem_id}
+	{elem_classes}
+	height={height || undefined}
+	{width}
+	allow_overflow={false}
+	{container}
+	{scale}
+	{min_width}
+>
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+	/>
+	<StaticImage
+		on:select={({ detail }) => gradio.dispatch("select", detail)}
+		on:share={({ detail }) => gradio.dispatch("share", detail)}
+		on:error={({ detail }) => gradio.dispatch("error", detail)}
+		{root}
+		{value}
+		{label}
+		{show_label}
+		{show_download_button}
+		{selectable}
+		{show_share_button}
+		i18n={gradio.i18n}
+	/>
+</Block>

package/static/index.ts

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