@gradio/image 0.3.0-beta.7 → 0.3.0

package/shared/ImageUploader.svelte

@@ -0,0 +1,224 @@
+<script lang="ts">
+	import { createEventDispatcher, tick } from "svelte";
+	import { BlockLabel } from "@gradio/atoms";
+	import { Image } from "@gradio/icons";
+	import type { SelectData, I18nFormatter } from "@gradio/utils";
+	import { get_coordinates_of_clicked_image } from "./utils";
+	import {
+		Webcam as WebcamIcon,
+		ImagePaste,
+		Upload as UploadIcon
+	} from "@gradio/icons";
+	import Webcam from "./Webcam.svelte";
+	import { Toolbar, IconButton } from "@gradio/atoms";
+
+	import { Upload } from "@gradio/upload";
+	import { type FileData, normalise_file } from "@gradio/client";
+	import ClearImage from "./ClearImage.svelte";
+
+	export let value: null | FileData;
+	export let label: string | undefined = undefined;
+	export let show_label: boolean;
+
+	export let sources: ("clipboard" | "webcam" | "upload")[] = [
+		"upload",
+		"clipboard",
+		"webcam"
+	];
+	export let streaming = false;
+	export let pending = false;
+	export let mirror_webcam: boolean;
+	export let selectable = false;
+	export let root: string;
+	export let i18n: I18nFormatter;
+
+	let upload: Upload;
+	export let active_tool: "webcam" | null = null;
+
+	function handle_upload({ detail }: CustomEvent<FileData>): void {
+		value = normalise_file(detail, root, null);
+	}
+
+	async function handle_save(img_blob: Blob | any): Promise<void> {
+		pending = true;
+		const f = await upload.load_files([new File([img_blob], `webcam.png`)]);
+
+		value = f?.[0] || null;
+		if (!streaming) active_tool = null;
+
+		await tick();
+
+		dispatch(streaming ? "stream" : "change");
+		pending = false;
+	}
+
+	$: value && !value.url && (value = normalise_file(value, root, null));
+
+	const dispatch = createEventDispatcher<{
+		change?: never;
+		stream?: never;
+		clear?: never;
+		drag: boolean;
+		upload?: never;
+		select: SelectData;
+	}>();
+
+	let dragging = false;
+
+	$: dispatch("drag", dragging);
+
+	function handle_click(evt: MouseEvent): void {
+		let coordinates = get_coordinates_of_clicked_image(evt);
+		if (coordinates) {
+			dispatch("select", { index: coordinates, value: null });
+		}
+	}
+
+	const sources_meta = {
+		upload: {
+			icon: UploadIcon,
+			label: i18n("Upload"),
+			order: 0
+		},
+		webcam: {
+			icon: WebcamIcon,
+			label: i18n("Webcam"),
+			order: 1
+		},
+		clipboard: {
+			icon: ImagePaste,
+			label: i18n("Paste"),
+			order: 2
+		}
+	};
+
+	$: sources_list = sources.sort(
+		(a, b) => sources_meta[a].order - sources_meta[b].order
+	);
+
+	$: {
+		if (sources.length === 1 && sources[0] === "webcam") {
+			active_tool = "webcam";
+		}
+	}
+
+	async function handle_toolbar(
+		source: (typeof sources)[number]
+	): Promise<void> {
+		switch (source) {
+			case "clipboard":
+				navigator.clipboard.read().then(async (items) => {
+					for (let i = 0; i < items.length; i++) {
+						const type = items[i].types.find((t) => t.startsWith("image/"));
+						if (type) {
+							items[i].getType(type).then(async (blob) => {
+								const f = await upload.load_files([
+									new File([blob], `clipboard.${type.replace("image/", "")}`)
+								]);
+								f;
+								value = f?.[0] || null;
+							});
+							break;
+						}
+					}
+				});
+				break;
+			case "webcam":
+				active_tool = "webcam";
+				break;
+			case "upload":
+				upload.open_file_upload();
+				break;
+			default:
+				break;
+		}
+	}
+</script>
+
+<BlockLabel {show_label} Icon={Image} label={label || "Image"} />
+
+<div data-testid="image" class="image-container">
+	{#if value?.url}
+		<ClearImage on:remove_image={() => (value = null)} />
+	{/if}
+	<div class="upload-container">
+		<Upload
+			hidden={value !== null || active_tool === "webcam"}
+			bind:this={upload}
+			bind:dragging
+			filetype="image/*"
+			on:load={handle_upload}
+			on:error
+			{root}
+			disable_click={!sources.includes("upload")}
+		>
+			{#if value === null && !active_tool}
+				<slot />
+			{/if}
+		</Upload>
+		{#if active_tool === "webcam"}
+			<Webcam
+				on:capture={(e) => handle_save(e.detail)}
+				on:stream={(e) => handle_save(e.detail)}
+				on:error
+				on:drag
+				on:upload={(e) => handle_save(e.detail)}
+				{mirror_webcam}
+				{streaming}
+				mode="image"
+				include_audio={false}
+				{i18n}
+			/>
+		{:else if value !== null && !streaming}
+			<!-- svelte-ignore a11y-click-events-have-key-events-->
+			<!-- svelte-ignore a11y-no-noninteractive-element-interactions-->
+			<img
+				src={value.url}
+				alt={value.alt_text}
+				on:click={handle_click}
+				class:selectable
+			/>
+		{/if}
+	</div>
+	{#if sources.length > 1 || sources.includes("clipboard")}
+		<Toolbar show_border={!value?.url}>
+			{#each sources_list as source}
+				<IconButton
+					on:click={() => handle_toolbar(source)}
+					Icon={sources_meta[source].icon}
+					size="large"
+					padded={false}
+				/>
+			{/each}
+		</Toolbar>
+	{/if}
+</div>
+
+<style>
+	/* .image-container {
+		height: auto;
+	} */
+	img {
+		width: var(--size-full);
+		height: var(--size-full);
+	}
+
+	.upload-container {
+		height: 100%;
+		flex-shrink: 1;
+		max-height: 100%;
+	}
+
+	.image-container {
+		display: flex;
+		height: 100%;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		max-height: 100%;
+	}
+
+	.selectable {
+		cursor: crosshair;
+	}
+</style>

package/shared/Webcam.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount } from "svelte";
-	import { Camera, Circle, Square } from "@gradio/icons";
-	import type { I18nFormatter } from "js/utils/src";
+	import { createEventDispatcher, onMount, tick } from "svelte";
+	import { Camera, Circle, Square, DropdownArrow } from "@gradio/icons";
+	import type { I18nFormatter } from "@gradio/utils";
 
 	let video_source: HTMLVideoElement;
 	let canvas: HTMLCanvasElement;
@@ -22,7 +22,7 @@
 					is_example?: boolean;
 					is_file: boolean;
 			  }
-			| string;
+			| Blob;
 		error: string;
 		start_recording: undefined;
 		stop_recording: undefined;
@@ -30,11 +30,15 @@
 
 	onMount(() => (canvas = document.createElement("canvas")));
 
-	async function access_webcam(): Promise<void> {
+	async function access_webcam(device_id?: string): Promise<void> {
+		if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+			dispatch("error", i18n("image.no_webcam_support"));
+			return;
+		}
 		try {
 			stream = await navigator.mediaDevices.getUserMedia({
-				video: true,
-				audio: include_audio,
+				video: device_id ? { deviceId: { exact: device_id } } : true,
+				audio: include_audio
 			});
 			video_source.srcObject = stream;
 			video_source.muted = true;
@@ -62,8 +66,18 @@
 				video_source.videoHeight
 			);
 
-			var data = canvas.toDataURL("image/png");
-			dispatch(streaming ? "stream" : "capture", data);
+			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
+			);
 		}
 	}
 
@@ -105,7 +119,7 @@
 				return;
 			}
 			media_recorder = new MediaRecorder(stream, {
-				mimeType: mimeType,
+				mimeType: mimeType
 			});
 			media_recorder.addEventListener("dataavailable", function (e) {
 				recorded_blobs.push(e.data);
@@ -124,6 +138,46 @@
 			}
 		}, 500);
 	}
+
+	async function select_source(): Promise<void> {
+		const devices = await navigator.mediaDevices.enumerateDevices();
+		video_sources = devices.filter((device) => device.kind === "videoinput");
+		options_open = true;
+	}
+
+	let video_sources: MediaDeviceInfo[] = [];
+	async function selectVideoSource(device_id: string): Promise<void> {
+		await access_webcam(device_id);
+		options_open = false;
+	}
+
+	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;
+	}
 </script>
 
 <div class="wrap">
@@ -131,26 +185,59 @@
 	<!-- need to suppress for video streaming https://github.com/sveltejs/svelte/issues/5967 -->
 	<video bind:this={video_source} class:flip={mirror_webcam} />
 	{#if !streaming}
-		<button
-			on:click={mode === "image" ? take_picture : take_recording}
-			aria-label={mode === "image" ? "capture photo" : "start recording"}
-		>
-			{#if mode === "video"}
-				{#if recording}
-					<div class="icon" title="stop recording">
-						<Square />
-					</div>
+		<div class:capture={!recording} class="button-wrap">
+			<button
+				on:click={mode === "image" ? take_picture : take_recording}
+				aria-label={mode === "image" ? "capture photo" : "start recording"}
+			>
+				{#if mode === "video"}
+					{#if recording}
+						<div class="icon" title="stop recording">
+							<Square />
+						</div>
+					{:else}
+						<div class="icon" title="start recording">
+							<Circle />
+						</div>
+					{/if}
 				{:else}
-					<div class="icon" title="start recording">
-						<Circle />
+					<div class="icon" title="capture photo">
+						<Camera />
 					</div>
 				{/if}
-			{:else}
-				<div class="icon" title="capture photo">
-					<Camera />
-				</div>
+			</button>
+
+			{#if !recording}
+				<button
+					on:click={select_source}
+					aria-label={mode === "image" ? "capture photo" : "start recording"}
+				>
+					<div class="icon" title="select video source">
+						<DropdownArrow />
+					</div>
+
+					{#if options_open}
+						<div class="select-wrap" use:click_outside={handle_click_outside}>
+							<!-- svelte-ignore a11y-click-events-have-key-events-->
+							<!-- svelte-ignore a11y-no-static-element-interactions-->
+							<span
+								class="inset-icon"
+								on:click|stopPropagation={() => (options_open = false)}
+							>
+								<DropdownArrow />
+							</span>
+							{#each video_sources as source}
+								<!-- svelte-ignore a11y-click-events-have-key-events-->
+								<!-- svelte-ignore a11y-no-static-element-interactions-->
+								<div on:click={() => selectVideoSource(source.deviceId)}>
+									{source.label}
+								</div>
+							{/each}
+						</div>
+					{/if}
+				</button>
 			{/if}
-		</button>
+		</div>
 	{/if}
 </div>
 
@@ -167,7 +254,7 @@
 		height: var(--size-full);
 	}
 
-	button {
+	.button-wrap {
 		display: flex;
 		position: absolute;
 		right: 0px;
@@ -180,7 +267,15 @@
 		border-radius: var(--radius-xl);
 		background-color: rgba(0, 0, 0, 0.9);
 		width: var(--size-10);
-		height: var(--size-10);
+		height: var(--size-8);
+		padding: var(--size-2-5);
+		padding-right: var(--size-1);
+		z-index: var(--layer-3);
+	}
+
+	.capture {
+		width: var(--size-14);
+		transform: translateX(var(--size-2-5));
 	}
 
 	@media (--screen-md) {
@@ -197,12 +292,60 @@
 
 	.icon {
 		opacity: 0.8;
-		width: 50%;
-		height: 50%;
+		width: 100%;
+		height: 100%;
 		color: white;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
 	}
 
 	.flip {
 		transform: scaleX(-1);
 	}
+
+	.select-wrap {
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		appearance: none;
+		background-color: transparent;
+		border: none;
+		width: auto;
+		font-size: 1rem;
+		/* padding: 0.5rem; */
+		width: max-content;
+		position: absolute;
+		top: 0;
+		right: 0;
+		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-accent);
+		text-align: left;
+		overflow: hidden;
+	}
+
+	.select-wrap > div {
+		padding: 0.25rem 0.5rem;
+		border-bottom: 1px solid var(--border-color-accent);
+		padding-right: var(--size-8);
+	}
+
+	.select-wrap > div:hover {
+		background-color: var(--color-accent);
+	}
+
+	.select-wrap > div:last-child {
+		border: none;
+	}
+
+	.inset-icon {
+		position: absolute;
+		top: 5px;
+		right: -6.5px;
+		width: var(--size-10);
+		height: var(--size-5);
+		opacity: 0.8;
+	}
 </style>

package/shared/Cropper.svelte

@@ -1,33 +0,0 @@
-<svelte:options accessors={true} />
-
-<script lang="ts">
-	import Cropper from "cropperjs";
-	import { onMount, createEventDispatcher } from "svelte";
-
-	export let image: string;
-	let el: HTMLImageElement;
-
-	const dispatch = createEventDispatcher();
-	let cropper: Cropper;
-
-	export function destroy(): void {
-		cropper.destroy();
-	}
-
-	export function create(): void {
-		if (cropper) {
-			destroy();
-		}
-		cropper = new Cropper(el, {
-			autoCropArea: 1,
-			cropend(): void {
-				const image_data = cropper.getCroppedCanvas().toDataURL();
-				dispatch("crop", image_data);
-			}
-		});
-
-		dispatch("crop", image);
-	}
-</script>
-
-<img src={image} bind:this={el} alt="" />