@gradio/image 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @gradio/image
 
+## 0.7.0
+
+### Fixes
+
+- [#6933](https://github.com/gradio-app/gradio/pull/6933) [`9cefd2e`](https://github.com/gradio-app/gradio/commit/9cefd2e90a1d0cc4d3e4e953fc5b9b1a7afb68dd) - Refactor examples so they accept data in the same format as is returned by function, rename `.as_example()` to `.process_example()`.  Thanks [@abidlabs](https://github.com/abidlabs)!
+
+## 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

package/Example.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import Image from "./shared/Image.svelte";
+	import type { FileData } from "@gradio/client";
 
-	export let value: string;
+	export let value: null | FileData;
 	export let samples_dir: string;
 	export let type: "gallery" | "table";
 	export let selected = false;
@@ -13,7 +14,7 @@
 	class:gallery={type === "gallery"}
 	class:selected
 >
-	<Image src={samples_dir + value} alt="" />
+	<Image src={samples_dir + value?.path} alt="" />
 </div>
 
 <style>

package/package.json

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

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");
 				}
 			};