@gradio/image 0.5.3 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @gradio/image
 
+## 0.6.0
+
+### Features
+
+- [#6133](https://github.com/gradio-app/gradio/pull/6133) [`f742d0e`](https://github.com/gradio-app/gradio/commit/f742d0e861c8e25c5d77d9102c9d50f94b0d3383) - Lite: Support AnnotatedImage on Wasm.  Thanks [@whitphx](https://github.com/whitphx)!
+- [#6931](https://github.com/gradio-app/gradio/pull/6931) [`6c863af`](https://github.com/gradio-app/gradio/commit/6c863af92fa9ceb5c638857eb22cc5ddb718d549) - Fix functional tests.  Thanks [@aliabid94](https://github.com/aliabid94)!
+- [#6897](https://github.com/gradio-app/gradio/pull/6897) [`fb9c6ca`](https://github.com/gradio-app/gradio/commit/fb9c6cacd7ca4598c000f1f97d7d39a8c4463519) - Lite: Chatbot.  Thanks [@whitphx](https://github.com/whitphx)!
+
+### Fixes
+
+- [#6942](https://github.com/gradio-app/gradio/pull/6942) [`b1b78c2`](https://github.com/gradio-app/gradio/commit/b1b78c2168e24fb65251a9b9b6cbc9382179a8ca) - Fix `.select` for `gr.Image`, `gr.CheckboxGroup`.  Thanks [@abidlabs](https://github.com/abidlabs)!
+
+## 0.5.4
+
+### Fixes
+
+- [#6865](https://github.com/gradio-app/gradio/pull/6865) [`15c97c6`](https://github.com/gradio-app/gradio/commit/15c97c6d346c475141d20615b5a865e9c44bdc76) - Fix webcam when `streaming=True`.  Thanks [@hannahblair](https://github.com/hannahblair)!
+
 ## 0.5.3
 
 ### Fixes

package/Image.stories.svelte

@@ -84,3 +84,18 @@
 		interactive: true
 	}}
 />
+
+<Story
+	name="interactive webcam with streaming"
+	args={{
+		sources: ["webcam"],
+		show_download_button: true,
+		interactive: true,
+		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"
+		},
+		streaming: true
+	}}
+/>

package/Index.svelte

@@ -65,7 +65,7 @@
 	}>;
 
 	$: url = _value?.url;
-	$: url && gradio.dispatch("change");
+	$: url, gradio.dispatch("change");
 
 	let dragging: boolean;
 	let active_source: sources = null;
@@ -134,7 +134,6 @@
 			on:edit={() => gradio.dispatch("edit")}
 			on:clear={() => {
 				gradio.dispatch("clear");
-				gradio.dispatch("change");
 			}}
 			on:stream={() => gradio.dispatch("stream")}
 			on:drag={({ detail }) => (dragging = detail)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/image",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -11,18 +11,19 @@
     "lazy-brush": "^1.0.1",
     "resize-observer-polyfill": "^1.5.1",
     "@gradio/atoms": "^0.4.1",
-    "@gradio/client": "^0.9.3",
-    "@gradio/icons": "^0.3.2",
-    "@gradio/statustracker": "^0.4.3",
-    "@gradio/upload": "^0.5.6",
+    "@gradio/client": "^0.10.0",
     "@gradio/utils": "^0.2.0",
-    "@gradio/wasm": "^0.4.0"
+    "@gradio/upload": "^0.5.8",
+    "@gradio/statustracker": "^0.4.3",
+    "@gradio/wasm": "^0.4.1",
+    "@gradio/icons": "^0.3.2"
   },
   "main_changeset": true,
   "main": "./Index.svelte",
   "exports": {
     ".": "./Index.svelte",
     "./example": "./Example.svelte",
+    "./shared": "./shared/index.ts",
     "./package.json": "./package.json"
   }
 }

package/shared/Image.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
 	import type { HTMLImgAttributes } from "svelte/elements";
-	type $$Props = HTMLImgAttributes;
+	interface Props extends HTMLImgAttributes {
+		"data-testid"?: string;
+	}
+	type $$Props = Props;
 
 	import { resolve_wasm_src } from "@gradio/wasm/svelte";
 
@@ -15,7 +18,7 @@
 	$: {
 		// In normal (non-Wasm) Gradio, the `<img>` element should be rendered with the passed `src` props immediately
 		// without waiting for `resolve_wasm_src()` to resolve.
-		// If it waits, a black image is displayed until the async task finishes
+		// If it waits, a blank image is displayed until the async task finishes
 		// and it leads to undesirable flickering.
 		// So set `src` to `resolved_src` here.
 		resolved_src = src;

package/shared/ImageUploader.svelte

@@ -122,7 +122,7 @@
 				<slot />
 			{/if}
 		</Upload>
-		{#if active_source === "webcam" && !value}
+		{#if active_source === "webcam" && (streaming || (!streaming && !value))}
 			<Webcam
 				on:capture={(e) => handle_save(e.detail)}
 				on:stream={(e) => handle_save(e.detail)}

package/shared/index.ts

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

package/shared/utils.ts

@@ -1,7 +1,12 @@
 export const get_coordinates_of_clicked_image = (
 	evt: MouseEvent
 ): [number, number] | null => {
-	let image = evt.currentTarget as HTMLImageElement;
+	let image;
+	if (evt.currentTarget instanceof Element) {
+		image = evt.currentTarget.querySelector("img") as HTMLImageElement;
+	} else {
+		return [NaN, NaN];
+	}
 
 	const imageRect = image.getBoundingClientRect();
 	const xScale = image.naturalWidth / imageRect.width;