@gradio/image 0.14.0 → 0.16.0-beta.1

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

@@ -0,0 +1,32 @@
+import { SvelteComponent } from "svelte";
+import type { SelectData } from "@gradio/utils";
+import { type FileData } from "@gradio/client";
+import type { I18nFormatter } from "@gradio/utils";
+declare const __propDef: {
+    props: {
+        value: null | FileData;
+        label?: string | undefined;
+        show_label: boolean;
+        show_download_button?: boolean | undefined;
+        selectable?: boolean | undefined;
+        show_share_button?: boolean | undefined;
+        i18n: I18nFormatter;
+        show_fullscreen_button?: boolean | undefined;
+    };
+    events: {
+        share: CustomEvent<import("@gradio/utils").ShareData>;
+        error: CustomEvent<string>;
+        load: CustomEvent<void | undefined> | undefined;
+        change: CustomEvent<string>;
+        select: CustomEvent<SelectData>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ImagePreviewProps = typeof __propDef.props;
+export type ImagePreviewEvents = typeof __propDef.events;
+export type ImagePreviewSlots = typeof __propDef.slots;
+export default class ImagePreview extends SvelteComponent<ImagePreviewProps, ImagePreviewEvents, ImagePreviewSlots> {
+}
+export {};

package/dist/shared/ImageUploader.svelte

@@ -0,0 +1,198 @@
+<script>import { createEventDispatcher, tick } from "svelte";
+import { BlockLabel } from "@gradio/atoms";
+import { Image as ImageIcon } from "@gradio/icons";
+import {
+} from "@gradio/utils";
+import { get_coordinates_of_clicked_image } from "./utils";
+import Webcam from "./Webcam.svelte";
+import { Upload } from "@gradio/upload";
+import { FileData } from "@gradio/client";
+import ClearImage from "./ClearImage.svelte";
+import { SelectSource } from "@gradio/atoms";
+import Image from "./Image.svelte";
+export let value;
+export let label = void 0;
+export let show_label;
+export let sources = ["upload", "clipboard", "webcam"];
+export let streaming = false;
+export let pending = false;
+export let mirror_webcam;
+export let selectable = false;
+export let root;
+export let i18n;
+export let max_file_size = null;
+export let upload;
+export let stream_handler;
+export let stream_every;
+export let modify_stream;
+export let set_time_limit;
+let upload_input;
+let uploading = false;
+export let active_source = null;
+function handle_upload({ detail }) {
+  if (!streaming) {
+    value = detail;
+    dispatch("upload");
+  }
+}
+function handle_clear() {
+  value = null;
+  dispatch("clear");
+  dispatch("change", null);
+}
+async function handle_save(img_blob, event) {
+  pending = true;
+  const f = await upload_input.load_files([
+    new File([img_blob], `image/${streaming ? "jpeg" : "png"}`)
+  ]);
+  if (event === "change" || event === "upload") {
+    value = f?.[0] || null;
+    await tick();
+    dispatch("change");
+  } else {
+    dispatch("stream", { value: f?.[0] || null, is_value_data: true });
+  }
+  pending = false;
+}
+$:
+  active_streaming = streaming && active_source === "webcam";
+$:
+  if (uploading && !active_streaming)
+    value = null;
+const dispatch = createEventDispatcher();
+export let dragging = false;
+$:
+  dispatch("drag", dragging);
+function handle_click(evt) {
+  let coordinates = get_coordinates_of_clicked_image(evt);
+  if (coordinates) {
+    dispatch("select", { index: coordinates, value: null });
+  }
+}
+$:
+  if (!active_source && sources) {
+    active_source = sources[0];
+  }
+async function handle_select_source(source) {
+  switch (source) {
+    case "clipboard":
+      upload_input.paste_clipboard();
+      break;
+    default:
+      break;
+  }
+}
+</script>
+
+<BlockLabel {show_label} Icon={ImageIcon} label={label || "Image"} />
+
+<div data-testid="image" class="image-container">
+	{#if value?.url && !active_streaming}
+		<ClearImage
+			on:remove_image={() => {
+				value = null;
+				dispatch("clear");
+			}}
+		/>
+	{/if}
+	<div
+		class="upload-container"
+		class:reduced-height={sources.length > 1}
+		style:width={value ? "auto" : "100%"}
+	>
+		<Upload
+			hidden={value !== null || active_source === "webcam"}
+			bind:this={upload_input}
+			bind:uploading
+			bind:dragging
+			filetype={active_source === "clipboard" ? "clipboard" : "image/*"}
+			on:load={handle_upload}
+			on:error
+			{root}
+			{max_file_size}
+			disable_click={!sources.includes("upload") || value !== null}
+			{upload}
+			{stream_handler}
+		>
+			{#if value === null}
+				<slot />
+			{/if}
+		</Upload>
+		{#if active_source === "webcam" && (streaming || (!streaming && !value))}
+			<Webcam
+				{root}
+				{value}
+				on:capture={(e) => handle_save(e.detail, "change")}
+				on:stream={(e) => handle_save(e.detail, "stream")}
+				on:error
+				on:drag
+				on:upload={(e) => handle_save(e.detail, "upload")}
+				on:close_stream
+				{mirror_webcam}
+				{stream_every}
+				{streaming}
+				mode="image"
+				include_audio={false}
+				{i18n}
+				{upload}
+				bind:modify_stream
+				bind:set_time_limit
+			/>
+		{:else if value !== null && !streaming}
+			<!-- svelte-ignore a11y-click-events-have-key-events-->
+			<!-- svelte-ignore a11y-no-static-element-interactions-->
+			<div class:selectable class="image-frame" on:click={handle_click}>
+				<Image src={value.url} alt={value.alt_text} />
+			</div>
+		{/if}
+	</div>
+	{#if sources.length > 1 || sources.includes("clipboard")}
+		<SelectSource
+			{sources}
+			bind:active_source
+			{handle_clear}
+			handle_select={handle_select_source}
+		/>
+	{/if}
+</div>
+
+<style>
+	.image-frame :global(img) {
+		width: var(--size-full);
+		height: var(--size-full);
+		object-fit: scale-down;
+	}
+
+	.image-frame {
+		object-fit: cover;
+		width: 100%;
+		height: 100%;
+	}
+
+	.upload-container {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		height: 100%;
+		flex-shrink: 1;
+		max-height: 100%;
+	}
+
+	.reduced-height {
+		height: calc(100% - var(--size-10));
+	}
+
+	.image-container {
+		display: flex;
+		height: 100%;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		max-height: 100%;
+	}
+
+	.selectable {
+		cursor: crosshair;
+	}
+</style>

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

@@ -0,0 +1,47 @@
+import { SvelteComponent } from "svelte";
+import { type SelectData, type I18nFormatter, type ValueData } from "@gradio/utils";
+import { FileData, type Client } from "@gradio/client";
+declare const __propDef: {
+    props: {
+        value: null | FileData;
+        label?: string | undefined;
+        show_label: boolean;
+        sources?: ("upload" | "clipboard" | "microphone" | "webcam" | null)[] | undefined;
+        streaming?: boolean | undefined;
+        pending?: boolean | undefined;
+        mirror_webcam: boolean;
+        selectable?: boolean | undefined;
+        root: string;
+        i18n: I18nFormatter;
+        max_file_size?: (number | null) | undefined;
+        upload: Client["upload"];
+        stream_handler: Client["stream"];
+        stream_every: number;
+        modify_stream: (state: "open" | "closed" | "waiting") => void;
+        set_time_limit: (arg0: number) => void;
+        active_source?: ("upload" | "clipboard" | "microphone" | "webcam" | null) | undefined;
+        dragging?: boolean | undefined;
+    };
+    events: {
+        error: CustomEvent<string> | CustomEvent<any>;
+        drag: CustomEvent<any>;
+        close_stream: CustomEvent<undefined>;
+        change?: CustomEvent<undefined> | undefined;
+        stream: CustomEvent<ValueData>;
+        clear?: CustomEvent<undefined> | undefined;
+        upload?: CustomEvent<undefined> | undefined;
+        select: CustomEvent<SelectData>;
+        end_stream: CustomEvent<never>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ImageUploaderProps = typeof __propDef.props;
+export type ImageUploaderEvents = typeof __propDef.events;
+export type ImageUploaderSlots = typeof __propDef.slots;
+export default class ImageUploader extends SvelteComponent<ImageUploaderProps, ImageUploaderEvents, ImageUploaderSlots> {
+}
+export {};

package/dist/shared/Webcam.svelte

@@ -0,0 +1,431 @@
+<script>import { createEventDispatcher, 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 i18n;
+export let upload;
+export let value = null;
+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);
+    }
+    if (streaming && (!recording || stream_state === "waiting")) {
+      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 {
+    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) {
+    dispatch("close_stream");
+    stream.getTracks().forEach((track) => track.stop());
+    video_source.srcObject = null;
+    webcam_accessed = false;
+    window.setTimeout(() => {
+      value = null;
+    }, 500);
+    value = null;
+  }
+}
+if (streaming && mode === "image") {
+  window.setInterval(() => {
+    if (video_source && !pending) {
+      take_picture();
+    }
+  }, stream_every * 1e3);
+}
+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">
+	<StreamingBar {time_limit} />
+	<!-- 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 || (webcam_accessed && !!value)}
+	/>
+	<!-- svelte-ignore a11y-missing-attribute -->
+	<img
+		src={value?.url}
+		class:hide={!webcam_accessed || (webcam_accessed && !value)}
+	/>
+	{#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 streaming && stream_state === "waiting"}
+						<div class="icon-with-text" style="width:var(--size-24);">
+							<div class="icon color-primary" title="spinner">
+								<Spinner />
+							</div>
+							{i18n("audio.waiting")}
+						</div>
+					{:else if (streaming && stream_state === "open") || (!streaming && recording)}
+						<div class="icon-with-text">
+							<div class="icon color-primary" title="stop recording">
+								<Square />
+							</div>
+							{i18n("audio.stop")}
+						</div>
+					{:else}
+						<div class="icon-with-text">
+							<div class="icon color-primary" title="start recording">
+								<Circle />
+							</div>
+							{i18n("audio.record")}
+						</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);
+	}
+
+	.icon-with-text {
+		width: var(--size-20);
+		align-items: center;
+		margin: 0 var(--spacing-xl);
+		display: flex;
+		justify-content: space-evenly;
+	}
+
+	@media (--screen-md) {
+		button {
+			bottom: var(--size-4);
+		}
+	}
+
+	@media (--screen-xl) {
+		button {
+			bottom: var(--size-8);
+		}
+	}
+
+	.icon {
+		width: 18px;
+		height: 18px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.color-primary {
+		fill: var(--primary-600);
+		stroke: var(--primary-600);
+	}
+
+	.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>