Merge pull request #20 from apolinario/main

Add `download_button`
pngwn · Apr 18, 2024 · 9496dac · 9496dac
2 parents b0c834e + d330c3e
commit 9496dac
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 12 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -4,4 +4,4 @@
 	"trailingComma": "none",
 	"printWidth": 80,
 	"plugins": ["prettier-plugin-svelte"]
-}
+}
diff --git a/frontend/Index.svelte b/frontend/Index.svelte
@@ -12,6 +12,7 @@
 	export let visible = true;
 	export let value: [FileData | null, FileData | null] = [null, null];
 	export let label: string;
+	export let show_download_button: boolean;
 	export let show_label: boolean;
 	export let root: string;
 	export let height: number | undefined;
@@ -57,12 +58,14 @@
 	/>
 {:else}
 	<StaticImage
+		i18n={gradio.i18n}
 		{elem_id}
 		{elem_classes}
 		{visible}
 		bind:value
 		{label}
 		{show_label}
+		{show_download_button}
 		{loading_status}
 		{height}
 		{width}

diff --git a/frontend/package.json b/frontend/package.json
@@ -14,6 +14,7 @@
 		"@gradio/statustracker": "0.4.0",
 		"@gradio/upload": "0.5.1",
 		"@gradio/utils": "0.2.0",
+		"@gradio/wasm": "^0.10.0",
 		"cropperjs": "^1.5.12",
 		"d3-drag": "^3.0.0",
 		"d3-selection": "^3.0.0",

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/shared/Image.svelte b/frontend/shared/Image.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
 	import Slider from "../shared/Slider.svelte";
 	import { createEventDispatcher, tick, onMount } from "svelte";
-	import { BlockLabel, Empty } from "@gradio/atoms";
+	import { BlockLabel, Empty, IconButton } from "@gradio/atoms";
+   	import { Download } from "@gradio/icons";
 	import { Image } from "@gradio/icons";
 	import { type SelectData } from "@gradio/utils";
 	import ClearImage from "./ClearImage.svelte";
 
 	import { Upload } from "@gradio/upload";
+	import { DownloadLink } from "@gradio/wasm/svelte";
 
 	import { type FileData, normalise_file } from "@gradio/client";
 
@@ -17,7 +19,7 @@
 	export let root: string;
 	export let position: number;
 	export let upload_count: number = 2;
-	export let layer_images = true;
+	export let show_download_button = true;
 
 	let value_: [FileData | null, FileData | null] = value || [null, null];
 
@@ -77,6 +79,15 @@
 			}}
 		/>
 	{/if}
+    {#if value?.[1]?.url}
+        <div class="icon-buttons">
+                {#if show_download_button}
+                    <DownloadLink href={value[1].url} download={value[1].orig_name || "image"}>
+                        <IconButton Icon={Download} />
+                    </DownloadLink>
+                {/if}
+        </div>
+    {/if}
 	<Slider bind:position disabled={upload_count == 2 || !value?.[0]}>
 		<div
 			class="upload-wrap"
@@ -186,4 +197,22 @@
 	.empty-wrap {
 		pointer-events: none;
 	}
+    .icon-button {
+		position: absolute;
+		top: 0px;
+		right: 0px;
+		z-index: var(--layer-1);
+    }
+
+    .icon-buttons {
+        display: flex;
+        position: absolute;
+        right: 34px;
+        z-index: var(--layer-2);
+        top: 8px;
+    }
+
+    .icon-buttons .download-button-container {
+        margin: var(--size-1) 0;
+    }
 </style>
diff --git a/frontend/shared/ImagePreview.svelte b/frontend/shared/ImagePreview.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
 	import Slider from "./Slider.svelte";
 
-	import { BlockLabel, Empty } from "@gradio/atoms";
-
-	import { Image } from "@gradio/icons";
+	import { BlockLabel, Empty, IconButton } from "@gradio/atoms";
+	import { Image, Download } from "@gradio/icons";
 	import { type FileData, normalise_file } from "@gradio/client";
 	import type { I18nFormatter } from "@gradio/utils";
+	import { DownloadLink } from "@gradio/wasm/svelte";
 
 	export let value: [null | FileData, null | FileData] = [null, null];
 	export let label: string | undefined = undefined;
+	export let show_download_button = true;
 	export let show_label: boolean;
 	export let root: string;
 	export let i18n: I18nFormatter;
@@ -29,7 +30,13 @@
 {:else}
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<!-- svelte-ignore a11y-no-noninteractive-element-interactions-->
-
+	<div class="icon-buttons">
+		{#if show_download_button}
+			<DownloadLink href={value[1].url} download={value[1].orig_name || "image"}>
+				<IconButton Icon={Download} label={i18n("common.download")} />
+			</DownloadLink>
+		{/if}
+	</div>
 	<div class="slider-wrap" bind:clientWidth={el_width}>
 		<Slider bind:position>
 			<img src={value?.[0]?.url} alt="" loading="lazy" />
@@ -65,4 +72,22 @@
 	.hidden {
 		opacity: 0;
 	}
+    .icon-button {
+		position: absolute;
+		top: 0px;
+		right: 0px;
+		z-index: var(--layer-1);
+    }
+
+    .icon-buttons {
+        display: flex;
+        position: absolute;
+        right: 6px;
+        z-index: var(--layer-1);
+        top: 6px;
+    }
+
+    .icon-buttons .download-button-container {
+        margin: var(--size-1) 0;
+    }
 </style>
diff --git a/frontend/shared/InteractiveImage.svelte b/frontend/shared/InteractiveImage.svelte
@@ -3,6 +3,8 @@
 <script lang="ts">
 	import type { Gradio, SelectData, ShareData } from "@gradio/utils";
 	import Image from "./Image.svelte";
+
+	
 	import { normalise_file } from "@gradio/client";
 
 	import { Block } from "@gradio/atoms";
@@ -29,7 +31,6 @@
 	export let root: string;
 	export let position: number;
 	export let upload_count: number = 2;
-	export let layer_images = true;
 
 	export let gradio: Gradio<{
 		change: never;
@@ -94,7 +95,6 @@
 		{label}
 		{show_label}
 		{upload_count}
-		{layer_images}
 	>
 		<UploadText i18n={gradio.i18n} type="image" />
 	</Image>

diff --git a/frontend/shared/StaticImage.svelte b/frontend/shared/StaticImage.svelte
@@ -4,11 +4,13 @@
 	import type { Gradio, SelectData } from "@gradio/utils";
 	import StaticImage from "./ImagePreview.svelte";
 
-	import { Block } from "@gradio/atoms";
-
+	import { Block, IconButton } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
 	import type { FileData } from "@gradio/client";
+	import { DownloadLink } from "@gradio/wasm/svelte";
+	import {  Download } from "@gradio/icons";
+	import type { I18nFormatter } from "@gradio/utils";
 
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
@@ -18,10 +20,11 @@
 	export let show_label: boolean;
 	export let root: string;
 	export let upload_count: number = 2;
-
+	export let show_download_button = true;
 	export let height: number;
 	export let width: number | undefined;
 	export let layer_images = true;
+	export let i18n: I18nFormatter;
 
 	export let container = true;
 	export let scale: number | null = null;
@@ -58,6 +61,15 @@
 	{scale}
 	{min_width}
 >
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<!-- svelte-ignore a11y-no-noninteractive-element-interactions-->
+	<div class="icon-buttons">
+		{#if show_download_button && value && value[1]}
+			<DownloadLink href={value[1].url} download={value[1].orig_name || "image"}>
+				<IconButton Icon={Download} label={i18n("common.download")} />
+			</DownloadLink>
+		{/if}
+	</div>
 	<div
 		class="status-wrap"
 		class:half={is_half}
@@ -126,4 +138,11 @@
 	.status-wrap.half :global(.eta-bar) {
 		opacity: 0;
 	}
+	.icon-buttons {
+		display: flex;
+		position: absolute;
+		right: 6px;
+		z-index: var(--layer-1);
+		top: 6px;
+	}
 </style>