@gradio/image 0.7.1 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @gradio/image
 
+## 0.8.0
+
+### Features
+
+- [#7228](https://github.com/gradio-app/gradio/pull/7228) [`2e6672c`](https://github.com/gradio-app/gradio/commit/2e6672c815e39fd6af78353e66661100b9102cd4) - Allow start/pause of streaming image input. Only access the webcam while it's needed.  Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
+- [#7309](https://github.com/gradio-app/gradio/pull/7309) [`200e251`](https://github.com/gradio-app/gradio/commit/200e2518e4d449aa82819a8d119e912bd1d95c15) - Add `gr.Image` interaction test + `gr.ImageEditor` interaction test improvement.  Thanks [@hannahblair](https://github.com/hannahblair)!
+
+### Fixes
+
+- [#7192](https://github.com/gradio-app/gradio/pull/7192) [`8dd6f4b`](https://github.com/gradio-app/gradio/commit/8dd6f4bc1901792f05cd59e86df7b1dbab692739) - Handle the case where examples is `null` for all components.  Thanks [@abidlabs](https://github.com/abidlabs)!
+- [#7325](https://github.com/gradio-app/gradio/pull/7325) [`733ca26`](https://github.com/gradio-app/gradio/commit/733ca266bb1ba9049ed7309b8f0614199682e173) - Ensure examples Images displays as expected.  Thanks [@hannahblair](https://github.com/hannahblair)!
+
 ## 0.7.1
 
 ### Patch Changes
@@ -342,4 +354,4 @@ Thanks [@pngwn](https://github.com/pngwn)!
 
 ### Features
 
-- [#4979](https://github.com/gradio-app/gradio/pull/4979) [`44ac8ad0`](https://github.com/gradio-app/gradio/commit/44ac8ad08d82ea12c503dde5c78f999eb0452de2) - Allow setting sketch color default. Thanks [@aliabid94](https://github.com/aliabid94)!
+- [#4979](https://github.com/gradio-app/gradio/pull/4979) [`44ac8ad0`](https://github.com/gradio-app/gradio/commit/44ac8ad08d82ea12c503dde5c78f999eb0452de2) - Allow setting sketch color default. Thanks [@aliabid94](https://github.com/aliabid94)!

package/Example.svelte

@@ -13,8 +13,11 @@
 	class:table={type === "table"}
 	class:gallery={type === "gallery"}
 	class:selected
+	class:border={value}
 >
-	<Image src={samples_dir + value?.path} alt="" />
+	{#if value}
+		<Image src={samples_dir + value.path} alt="" />
+	{/if}
 </div>
 
 <style>
@@ -26,10 +29,12 @@
 	.container.selected {
 		border-color: var(--border-color-accent);
 	}
+	.border.table {
+		border: 2px solid var(--border-color-primary);
+	}
 
 	.container.table {
 		margin: 0 auto;
-		border: 2px solid var(--border-color-primary);
 		border-radius: var(--radius-lg);
 		overflow: hidden;
 		width: var(--size-20);
@@ -38,8 +43,8 @@
 	}
 
 	.container.gallery {
-		height: var(--size-20);
-		max-height: var(--size-20);
+		width: var(--size-20);
+		max-width: var(--size-20);
 		object-fit: cover;
 	}
 </style>

package/Image.stories.svelte

@@ -1,10 +1,22 @@
-<script lang="ts">
-	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+<script context="module">
+	import { Template, Story } from "@storybook/addon-svelte-csf";
 	import StaticImage from "./Index.svelte";
 	import { userEvent, within } from "@storybook/testing-library";
-</script>
+	import { allModes } from "../storybook/modes";
 
-<Meta title="Components/Image" component={Image} />
+	export const meta = {
+		title: "Components/Image",
+		component: StaticImage,
+		parameters: {
+			chromatic: {
+				modes: {
+					desktop: allModes["desktop"],
+					mobile: allModes["mobile"]
+				}
+			}
+		}
+	};
+</script>
 
 <Template let:args>
 	<div
@@ -60,8 +72,7 @@
 		const webcamButton = await canvas.findByLabelText("Capture from camera");
 		userEvent.click(webcamButton);
 
-		userEvent.click(await canvas.findByTitle("select video source"));
-		userEvent.click(await canvas.findByLabelText("select source"));
+		userEvent.click(await canvas.findByTitle("grant webcam access"));
 		userEvent.click(await canvas.findByLabelText("Upload file"));
 		userEvent.click(await canvas.findByLabelText("Paste from clipboard"));
 	}}

package/ImageExample.stories.svelte

@@ -0,0 +1,29 @@
+<script>
+	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+	import Image from "./Example.svelte";
+</script>
+
+<Meta title="Components/Image/Example" component={Image} />
+
+<Template let:args>
+	<Image {...args} />
+</Template>
+
+<Story
+	name="Image file"
+	args={{
+		samples_dir: "",
+		value: {
+			path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+			url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+			orig_name: "cheetah.jpg"
+		}
+	}}
+/>
+
+<Story
+	name="Null"
+	args={{
+		value: null
+	}}
+/>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/image",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -10,13 +10,13 @@
     "cropperjs": "^1.5.12",
     "lazy-brush": "^1.0.1",
     "resize-observer-polyfill": "^1.5.1",
-    "@gradio/atoms": "^0.5.0",
+    "@gradio/atoms": "^0.5.1",
+    "@gradio/client": "^0.11.0",
     "@gradio/icons": "^0.3.2",
-    "@gradio/client": "^0.10.1",
-    "@gradio/statustracker": "^0.4.4",
-    "@gradio/upload": "^0.7.0",
-    "@gradio/utils": "^0.2.1",
-    "@gradio/wasm": "^0.5.1"
+    "@gradio/statustracker": "^0.4.5",
+    "@gradio/wasm": "^0.6.0",
+    "@gradio/upload": "^0.7.1",
+    "@gradio/utils": "^0.2.2"
   },
   "main_changeset": true,
   "main": "./Index.svelte",

package/shared/Image.svelte

@@ -35,3 +35,9 @@
 
 <!-- svelte-ignore a11y-missing-attribute -->
 <img src={resolved_src} {...$$restProps} />
+
+<style>
+	img {
+		object-fit: cover;
+	}
+</style>

package/shared/Webcam.svelte

@@ -1,9 +1,17 @@
 <script lang="ts">
 	import { createEventDispatcher, onMount } from "svelte";
-	import { Camera, Circle, Square, DropdownArrow } from "@gradio/icons";
+	import {
+		Camera,
+		Circle,
+		Square,
+		DropdownArrow,
+		Webcam as WebcamIcon
+	} from "@gradio/icons";
 	import type { I18nFormatter } from "@gradio/utils";
 	import type { FileData } from "@gradio/client";
 	import { prepare_files, upload } from "@gradio/client";
+	import WebcamPermissions from "./WebcamPermissions.svelte";
+	import { fade } from "svelte/transition";
 
 	let video_source: HTMLVideoElement;
 	let canvas: HTMLCanvasElement;
@@ -42,6 +50,7 @@
 			video_source.srcObject = stream;
 			video_source.muted = true;
 			video_source.play();
+			webcam_accessed = true;
 		} catch (err) {
 			if (err instanceof DOMException && err.name == "NotAllowedError") {
 				dispatch("error", i18n("image.allow_webcam_access"));
@@ -53,8 +62,11 @@
 
 	function take_picture(): void {
 		var context = canvas.getContext("2d")!;
-
-		if (video_source.videoWidth && video_source.videoHeight) {
+		if (
+			(!streaming || (streaming && recording)) &&
+			video_source.videoWidth &&
+			video_source.videoHeight
+		) {
 			canvas.width = video_source.videoWidth;
 			canvas.height = video_source.videoHeight;
 			context.drawImage(
@@ -131,7 +143,23 @@
 		recording = !recording;
 	}
 
-	access_webcam();
+	let webcam_accessed = false;
+
+	function record_video_or_photo(): void {
+		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(() => {
@@ -185,14 +213,22 @@
 <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} />
-	{#if !streaming}
+	<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">
+			<WebcamPermissions on:click={async () => access_webcam()} />
+		</div>
+	{:else}
 		<div class="button-wrap">
 			<button
-				on:click={mode === "image" ? take_picture : take_recording}
+				on:click={record_video_or_photo}
 				aria-label={mode === "image" ? "capture photo" : "start recording"}
 			>
-				{#if mode === "video"}
+				{#if mode === "video" || streaming}
 					{#if recording}
 						<div class="icon red" title="stop recording">
 							<Square />
@@ -208,15 +244,13 @@
 					</div>
 				{/if}
 			</button>
-
 			{#if !recording}
 				<button
+					class="icon"
 					on:click={select_source}
-					aria-label={mode === "image" ? "capture photo" : "start recording"}
+					aria-label="select input source"
 				>
-					<div class="icon" title="select video source">
-						<DropdownArrow />
-					</div>
+					<DropdownArrow />
 				</button>
 			{/if}
 		</div>
@@ -253,6 +287,10 @@
 		height: var(--size-full);
 	}
 
+	.hide {
+		display: none;
+	}
+
 	video {
 		width: var(--size-full);
 		height: var(--size-full);
@@ -353,4 +391,10 @@
 		height: var(--size-5);
 		opacity: 0.8;
 	}
+
+	@media (--screen-md) {
+		.wrap {
+			font-size: var(--text-lg);
+		}
+	}
 </style>

package/shared/WebcamPermissions.svelte

@@ -0,0 +1,46 @@
+<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")}>
+	<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>