@gradio/image 0.5.4 → 0.6.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @gradio/image
 
+## 0.6.1
+
+### Fixes
+
+- [#6885](https://github.com/gradio-app/gradio/pull/6885) [`640b7fe`](https://github.com/gradio-app/gradio/commit/640b7fe05276e11720b4341cadf088491395e53d) - Fix issue with Webcam Recording.  Thanks [@dawoodkhan82](https://github.com/dawoodkhan82)!
+- [#6967](https://github.com/gradio-app/gradio/pull/6967) [`5e00162`](https://github.com/gradio-app/gradio/commit/5e0016267f1d683e2daab82ee4a33d2f09513a34) - Make <Gallery /> Wasm-compatible.  Thanks [@whitphx](https://github.com/whitphx)!
+
+## 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

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.4",
+  "version": "0.6.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -11,17 +11,18 @@
     "lazy-brush": "^1.0.1",
     "resize-observer-polyfill": "^1.5.1",
     "@gradio/atoms": "^0.4.1",
-    "@gradio/client": "^0.9.4",
+    "@gradio/client": "^0.10.0",
     "@gradio/icons": "^0.3.2",
-    "@gradio/statustracker": "^0.4.3",
+    "@gradio/upload": "^0.6.0",
     "@gradio/utils": "^0.2.0",
-    "@gradio/upload": "^0.5.7",
-    "@gradio/wasm": "^0.4.0"
+    "@gradio/statustracker": "^0.4.3",
+    "@gradio/wasm": "^0.5.0"
   },
   "main_changeset": true,
   "main": "./Index.svelte",
   "exports": {
     ".": "./Index.svelte",
+    "./shared": "./shared/index.ts",
     "./example": "./Example.svelte",
     "./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

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

package/shared/Webcam.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount, tick } from "svelte";
+	import { createEventDispatcher, onMount } from "svelte";
 	import { Camera, Circle, Square, DropdownArrow } from "@gradio/icons";
 	import type { I18nFormatter } from "@gradio/utils";
+	import type { FileData } from "@gradio/client";
+	import { prepare_files, upload } from "@gradio/client";
 
 	let video_source: HTMLVideoElement;
 	let canvas: HTMLCanvasElement;
 	export let streaming = false;
 	export let pending = false;
+	export let root = "";
 
 	export let mode: "image" | "video" = "image";
 	export let mirror_webcam: boolean;
@@ -15,7 +18,7 @@
 
 	const dispatch = createEventDispatcher<{
 		stream: undefined;
-		capture: Blob;
+		capture: FileData | Blob | null;
 		error: string;
 		start_recording: undefined;
 		stop_recording: undefined;
@@ -88,15 +91,17 @@
 			media_recorder.stop();
 			let video_blob = new Blob(recorded_blobs, { type: mimeType });
 			let ReaderObj = new FileReader();
-			ReaderObj.onload = function (e): void {
+			ReaderObj.onload = async function (e): Promise<void> {
 				if (e.target) {
-					dispatch("capture", {
-						//@ts-ignore
-						data: e.target.result,
-						name: "sample." + mimeType.substring(6),
-						is_example: false,
-						is_file: false
-					});
+					let _video_blob = new File(
+						[video_blob],
+						"sample." + mimeType.substring(6)
+					);
+					const val = await prepare_files([_video_blob]);
+					let value = (
+						(await upload(val, root))?.filter(Boolean) as FileData[]
+					)[0];
+					dispatch("capture", value);
 					dispatch("stop_recording");
 				}
 			};

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;