@gradio/image 0.19.0 → 0.20.1

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @gradio/image
 
+## 0.20.1
+
+### Fixes
+
+- [#10327](https://github.com/gradio-app/gradio/pull/10327) [`e0cb47f`](https://github.com/gradio-app/gradio/commit/e0cb47f0c5040049fb942a381c0335de4bf77d67) - Fix webcam.  Thanks @Col0ring!
+
+### Dependency updates
+
+- @gradio/atoms@0.13.1
+- @gradio/statustracker@0.10.1
+- @gradio/client@1.10.0
+- @gradio/icons@0.10.0
+- @gradio/upload@0.14.5
+
+## 0.20.0
+
+### Features
+
+- [#10192](https://github.com/gradio-app/gradio/pull/10192) [`4fc7fb7`](https://github.com/gradio-app/gradio/commit/4fc7fb777c42af537e4af612423fa44029657d41) - Ensure components can be remounted with their previous data.  Thanks @pngwn!
+
+### Fixes
+
+- [#10269](https://github.com/gradio-app/gradio/pull/10269) [`890eaa3`](https://github.com/gradio-app/gradio/commit/890eaa3a9e53dab5bcb16c5d017ae0470109b8fb) - Allow displaying SVG images securely in `gr.Image` and `gr.Gallery` components.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/atoms@0.13.0
+- @gradio/utils@0.10.0
+- @gradio/upload@0.14.4
+- @gradio/client@1.9.0
+- @gradio/icons@0.9.0
+- @gradio/statustracker@0.10.0
+- @gradio/wasm@0.16.0
+
 ## 0.19.0
 
 ### Features

package/dist/shared/ImageUploader.svelte

@@ -31,9 +31,20 @@ let upload_input;
 export let uploading = false;
 export let active_source = null;
 export let webcam_constraints = void 0;
-function handle_upload({ detail }) {
+async function handle_upload({
+  detail
+}) {
   if (!streaming) {
-    value = detail;
+    if (detail.path?.toLowerCase().endsWith(".svg") && detail.url) {
+      const response = await fetch(detail.url);
+      const svgContent = await response.text();
+      value = {
+        ...detail,
+        url: `data:image/svg+xml,${encodeURIComponent(svgContent)}`
+      };
+    } else {
+      value = detail;
+    }
     dispatch("upload");
   }
 }

package/dist/shared/Webcam.svelte

@@ -1,4 +1,4 @@
-<script>import { createEventDispatcher, onMount } from "svelte";
+<script>import { createEventDispatcher, onDestroy, onMount } from "svelte";
 import {
   Camera,
   Circle,
@@ -152,7 +152,7 @@ function take_recording() {
       }
     };
     ReaderObj.readAsDataURL(video_blob);
-  } else {
+  } else if (typeof MediaRecorder !== "undefined") {
     dispatch("start_recording");
     recorded_blobs = [];
     let validMimeTypes = ["video/webm", "video/mp4"];
@@ -177,14 +177,18 @@ function take_recording() {
   recording = !recording;
 }
 let webcam_accessed = false;
-function record_video_or_photo() {
+function record_video_or_photo({
+  destroy
+} = {}) {
   if (mode === "image" && streaming) {
     recording = !recording;
   }
-  if (mode === "image") {
-    take_picture();
-  } else {
-    take_recording();
+  if (!destroy) {
+    if (mode === "image") {
+      take_picture();
+    } else {
+      take_recording();
+    }
   }
   if (!recording && stream) {
     dispatch("close_stream");
@@ -216,6 +220,12 @@ function handle_click_outside(event) {
   event.stopPropagation();
   options_open = false;
 }
+onDestroy(() => {
+  if (typeof window === "undefined")
+    return;
+  record_video_or_photo({ destroy: true });
+  stream?.getTracks().forEach((track) => track.stop());
+});
 </script>
 
 <div class="wrap">
@@ -243,7 +253,7 @@ function handle_click_outside(event) {
 	{:else}
 		<div class="button-wrap">
 			<button
-				on:click={record_video_or_photo}
+				on:click={() => record_video_or_photo()}
 				aria-label={mode === "image" ? "capture photo" : "start recording"}
 			>
 				{#if mode === "video" || streaming}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/image",
-  "version": "0.19.0",
+  "version": "0.20.1",
   "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.12.0",
-    "@gradio/client": "^1.8.0",
-    "@gradio/icons": "^0.8.1",
-    "@gradio/statustracker": "^0.9.7",
-    "@gradio/upload": "^0.14.3",
-    "@gradio/utils": "^0.9.0",
-    "@gradio/wasm": "^0.15.0"
+    "@gradio/atoms": "^0.13.1",
+    "@gradio/icons": "^0.10.0",
+    "@gradio/client": "^1.10.0",
+    "@gradio/statustracker": "^0.10.1",
+    "@gradio/upload": "^0.14.5",
+    "@gradio/utils": "^0.10.0",
+    "@gradio/wasm": "^0.16.0"
   },
   "devDependencies": {
     "@gradio/preview": "^0.13.0"

package/shared/ImageUploader.svelte

@@ -45,10 +45,20 @@
 
 	export let webcam_constraints: { [key: string]: any } | undefined = undefined;
 
-	function handle_upload({ detail }: CustomEvent<FileData>): void {
-		// only trigger streaming event if streaming
+	async function handle_upload({
+		detail
+	}: CustomEvent<FileData>): Promise<void> {
 		if (!streaming) {
-			value = detail;
+			if (detail.path?.toLowerCase().endsWith(".svg") && detail.url) {
+				const response = await fetch(detail.url);
+				const svgContent = await response.text();
+				value = {
+					...detail,
+					url: `data:image/svg+xml,${encodeURIComponent(svgContent)}`
+				};
+			} else {
+				value = detail;
+			}
 			dispatch("upload");
 		}
 	}

package/shared/Webcam.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount } from "svelte";
+	import { createEventDispatcher, onDestroy, onMount } from "svelte";
 	import {
 		Camera,
 		Circle,
@@ -198,7 +198,7 @@
 				}
 			};
 			ReaderObj.readAsDataURL(video_blob);
-		} else {
+		} else if (typeof MediaRecorder !== "undefined") {
 			dispatch("start_recording");
 			recorded_blobs = [];
 			let validMimeTypes = ["video/webm", "video/mp4"];
@@ -225,15 +225,21 @@
 
 	let webcam_accessed = false;
 
-	function record_video_or_photo(): void {
+	function record_video_or_photo({
+		destroy
+	}: { destroy?: boolean } = {}): void {
 		if (mode === "image" && streaming) {
 			recording = !recording;
 		}
-		if (mode === "image") {
-			take_picture();
-		} else {
-			take_recording();
+
+		if (!destroy) {
+			if (mode === "image") {
+				take_picture();
+			} else {
+				take_recording();
+			}
 		}
+
 		if (!recording && stream) {
 			dispatch("close_stream");
 			stream.getTracks().forEach((track) => track.stop());
@@ -273,6 +279,12 @@
 		event.stopPropagation();
 		options_open = false;
 	}
+
+	onDestroy(() => {
+		if (typeof window === "undefined") return;
+		record_video_or_photo({ destroy: true });
+		stream?.getTracks().forEach((track) => track.stop());
+	});
 </script>
 
 <div class="wrap">
@@ -300,7 +312,7 @@
 	{:else}
 		<div class="button-wrap">
 			<button
-				on:click={record_video_or_photo}
+				on:click={() => record_video_or_photo()}
 				aria-label={mode === "image" ? "capture photo" : "start recording"}
 			>
 				{#if mode === "video" || streaming}