@gradio/image 0.4.2 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @gradio/image
 
+## 0.5.0
+
+### Features
+
+- [#6726](https://github.com/gradio-app/gradio/pull/6726) [`21cfb0a`](https://github.com/gradio-app/gradio/commit/21cfb0acc309bb1a392f4d8a8e42f6be864c5978) - Remove the styles from the Image/Video primitive components and Fix the container styles.  Thanks [@whitphx](https://github.com/whitphx)!
+- [#6398](https://github.com/gradio-app/gradio/pull/6398) [`67ddd40`](https://github.com/gradio-app/gradio/commit/67ddd40b4b70d3a37cb1637c33620f8d197dbee0) - Lite v4.  Thanks [@whitphx](https://github.com/whitphx)!
+- [#6399](https://github.com/gradio-app/gradio/pull/6399) [`053bec9`](https://github.com/gradio-app/gradio/commit/053bec98be1127e083414024e02cf0bebb0b5142) - Improve CSS token documentation in Storybook.  Thanks [@hannahblair](https://github.com/hannahblair)!
+
+### Fixes
+
+- [#6709](https://github.com/gradio-app/gradio/pull/6709) [`6a9151d`](https://github.com/gradio-app/gradio/commit/6a9151d5c9432c724098da7d88a539aaaf5ffe88) - Remove progress animation on streaming.  Thanks [@aliabid94](https://github.com/aliabid94)!
+
 ## 0.4.2
 
 ### Fixes

package/Example.svelte

@@ -17,6 +17,11 @@
 </div>
 
 <style>
+	.container :global(img) {
+		width: 100%;
+		height: 100%;
+	}
+
 	.container.selected {
 		border-color: var(--border-color-accent);
 	}
@@ -25,13 +30,13 @@
 		margin: 0 auto;
 		border: 2px solid var(--border-color-primary);
 		border-radius: var(--radius-lg);
+		overflow: hidden;
 		width: var(--size-20);
 		height: var(--size-20);
 		object-fit: cover;
 	}
 
 	.container.gallery {
-		border: 2px solid var(--border-color-primary);
 		height: var(--size-20);
 		max-height: var(--size-20);
 		object-fit: cover;

package/Image.stories.svelte

@@ -34,9 +34,9 @@
 	name="Static Image with label and download button"
 	args={{
 		value: {
-			path: "https://i.ibb.co/6BgKdSj/groot.jpg",
-			url: "https://i.ibb.co/6BgKdSj/groot.jpg",
-			orig_name: "groot.jpg"
+			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"
 		},
 		show_label: true,
 		show_download_button: true
@@ -47,9 +47,9 @@
 	name="Static Image with no label or download button"
 	args={{
 		value: {
-			path: "https://i.ibb.co/6BgKdSj/groot.jpg",
-			url: "https://i.ibb.co/6BgKdSj/groot.jpg",
-			orig_name: "groot.jpg"
+			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"
 		},
 		show_label: false,
 		show_download_button: false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/image",
-  "version": "0.4.2",
+  "version": "0.5.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.3.1",
-    "@gradio/client": "^0.8.2",
-    "@gradio/icons": "^0.3.1",
-    "@gradio/statustracker": "^0.4.1",
-    "@gradio/upload": "^0.5.2",
+    "@gradio/atoms": "^0.4.0",
+    "@gradio/client": "^0.9.0",
+    "@gradio/icons": "^0.3.2",
+    "@gradio/upload": "^0.5.3",
+    "@gradio/wasm": "^0.4.0",
     "@gradio/utils": "^0.2.0",
-    "@gradio/wasm": "^0.3.0"
+    "@gradio/statustracker": "^0.4.2"
   },
   "main_changeset": true,
   "main": "./Index.svelte",

package/shared/Image.svelte

@@ -5,19 +5,30 @@
 	import { resolve_wasm_src } from "@gradio/wasm/svelte";
 
 	export let src: HTMLImgAttributes["src"] = undefined;
-</script>
 
-{#await resolve_wasm_src(src) then resolved_src}
-	<!-- svelte-ignore a11y-missing-attribute -->
-	<img src={resolved_src} {...$$restProps} />
-{:catch error}
-	<p style="color: red;">{error.message}</p>
-{/await}
+	let resolved_src: typeof src;
+
+	// The `src` prop can be updated before the Promise from `resolve_wasm_src` is resolved.
+	// In such a case, the resolved value for the old `src` has to be discarded,
+	// This variable `latest_src` is used to pick up only the value resolved for the latest `src` prop.
+	let latest_src: typeof src;
+	$: {
+		// 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
+		// and it leads to undesirable flickering.
+		// So set `src` to `resolved_src` here.
+		resolved_src = src;
 
-<style>
-	img {
-		width: 100%;
-		height: 100%;
-		border-radius: var(--radius-lg);
+		latest_src = src;
+		const resolving_src = src;
+		resolve_wasm_src(resolving_src).then((s) => {
+			if (latest_src === resolving_src) {
+				resolved_src = s;
+			}
+		});
 	}
-</style>
+</script>
+
+<!-- svelte-ignore a11y-missing-attribute -->
+<img src={resolved_src} {...$$restProps} />

package/shared/ImagePreview.svelte

@@ -5,8 +5,10 @@
 	import { BlockLabel, Empty, IconButton, ShareButton } from "@gradio/atoms";
 	import { Download } from "@gradio/icons";
 	import { get_coordinates_of_clicked_image } from "./utils";
+	import Image from "./Image.svelte";
+	import { DownloadLink } from "@gradio/wasm/svelte";
 
-	import { Image } from "@gradio/icons";
+	import { Image as ImageIcon } from "@gradio/icons";
 	import { type FileData, normalise_file } from "@gradio/client";
 	import type { I18nFormatter } from "@gradio/utils";
 
@@ -31,19 +33,19 @@
 	};
 </script>
 
-<BlockLabel {show_label} Icon={Image} label={label || i18n("image.image")} />
+<BlockLabel
+	{show_label}
+	Icon={ImageIcon}
+	label={label || i18n("image.image")}
+/>
 {#if value === null || !value.url}
-	<Empty unpadded_box={true} size="large"><Image /></Empty>
+	<Empty unpadded_box={true} size="large"><ImageIcon /></Empty>
 {:else}
 	<div class="icon-buttons">
 		{#if show_download_button}
-			<a
-				href={value.url}
-				target={window.__is_colab__ ? "_blank" : null}
-				download={value.orig_name || "image"}
-			>
+			<DownloadLink href={value.url} download={value.orig_name || "image"}>
 				<IconButton Icon={Download} label={i18n("common.download")} />
-			</a>
+			</DownloadLink>
 		{/if}
 		{#if show_share_button}
 			<ShareButton
@@ -60,12 +62,14 @@
 		{/if}
 	</div>
 	<button on:click={handle_click}>
-		<img src={value.url} alt="" class:selectable loading="lazy" />
+		<div class:selectable class="image-container">
+			<Image src={value.url} alt="" loading="lazy" />
+		</div>
 	</button>
 {/if}
 
 <style>
-	img,
+	.image-container :global(img),
 	button {
 		width: var(--size-full);
 		height: var(--size-full);

package/shared/ImageUploader.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher, tick } from "svelte";
 	import { BlockLabel } from "@gradio/atoms";
-	import { Image } from "@gradio/icons";
+	import { Image as ImageIcon } from "@gradio/icons";
 	import type { SelectData, I18nFormatter } from "@gradio/utils";
 	import { get_coordinates_of_clicked_image } from "./utils";
 	import {
@@ -15,6 +15,7 @@
 	import { Upload } from "@gradio/upload";
 	import { type FileData, normalise_file } from "@gradio/client";
 	import ClearImage from "./ClearImage.svelte";
+	import Image from "./Image.svelte";
 
 	export let value: null | FileData;
 	export let label: string | undefined = undefined;
@@ -54,7 +55,8 @@
 		pending = false;
 	}
 
-	$: if (uploading) value = null;
+	$: active_streaming = streaming && active_tool === "webcam";
+	$: if (uploading && !active_streaming) value = null;
 
 	$: value && !value.url && (value = normalise_file(value, root, null));
 
@@ -140,10 +142,10 @@
 	}
 </script>
 
-<BlockLabel {show_label} Icon={Image} label={label || "Image"} />
+<BlockLabel {show_label} Icon={ImageIcon} label={label || "Image"} />
 
 <div data-testid="image" class="image-container">
-	{#if value?.url}
+	{#if value?.url && !active_streaming}
 		<ClearImage
 			on:remove_image={() => {
 				value = null;
@@ -182,13 +184,10 @@
 			/>
 		{:else if value !== null && !streaming}
 			<!-- svelte-ignore a11y-click-events-have-key-events-->
-			<!-- svelte-ignore a11y-no-noninteractive-element-interactions-->
-			<img
-				src={value.url}
-				alt={value.alt_text}
-				on:click={handle_click}
-				class:selectable
-			/>
+			<!-- svelte-ignore a11y-no-static-element-interactions-->
+			<div class:selectable class="image-frame" on:click={handle_click}>
+				<Image src={value.url} alt={value.alt_text} />
+			</div>
 		{/if}
 	</div>
 	{#if sources.length > 1 || sources.includes("clipboard")}
@@ -207,10 +206,7 @@
 </div>
 
 <style>
-	/* .image-container {
-		height: auto;
-	} */
-	img {
+	.image-frame :global(img) {
 		width: var(--size-full);
 		height: var(--size-full);
 	}

package/shared/Webcam.svelte

@@ -189,11 +189,11 @@
 			>
 				{#if mode === "video"}
 					{#if recording}
-						<div class="icon" title="stop recording">
+						<div class="icon red" title="stop recording">
 							<Square />
 						</div>
 					{:else}
-						<div class="icon" title="start recording">
+						<div class="icon red" title="start recording">
 							<Circle />
 						</div>
 					{/if}
@@ -297,6 +297,11 @@
 		align-items: center;
 	}
 
+	.red {
+		fill: red;
+		stroke: red;
+	}
+
 	.flip {
 		transform: scaleX(-1);
 	}