@gradio/image 0.16.8 → 0.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/shared/ImageUploader.svelte +41 -12
  3. package/dist/shared/ImageUploader.svelte.d.ts +1 -0
  4. package/package.json +6 -6
  5. package/shared/ImageUploader.svelte +43 -12
  6. package/dist/shared/ClearImage.svelte +0 -16
  7. package/dist/shared/ClearImage.svelte.d.ts +0 -18
  8. package/shared/ClearImage.svelte +0 -18
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @gradio/image
2
2
 
3
+ ## 0.17.0
4
+
5
+ ### Features
6
+
7
+ - [#10054](https://github.com/gradio-app/gradio/pull/10054) [`458941c`](https://github.com/gradio-app/gradio/commit/458941c508f11d43debf1cef6950f330145e336d) - Allow full screen mode in interactive gr.Image. Thanks @hannahblair!
8
+
9
+ ### Dependency updates
10
+
11
+ - @gradio/atoms@0.11.2
12
+ - @gradio/utils@0.9.0
13
+ - @gradio/statustracker@0.9.6
14
+ - @gradio/upload@0.14.2
15
+
3
16
  ## 0.16.8
4
17
 
5
18
  ### Dependency updates
package/dist/shared/ImageUploader.svelte CHANGED
@@ -1,13 +1,12 @@
1
1
  <script>import { createEventDispatcher, tick } from "svelte";
2
- import { BlockLabel } from "@gradio/atoms";
3
- import { Image as ImageIcon } from "@gradio/icons";
2
+ import { BlockLabel, IconButtonWrapper, IconButton } from "@gradio/atoms";
3
+ import { Clear, Image as ImageIcon, Maximize, Minimize } from "@gradio/icons";
4
4
  import {
5
5
  } from "@gradio/utils";
6
6
  import { get_coordinates_of_clicked_image } from "./utils";
7
7
  import Webcam from "./Webcam.svelte";
8
8
  import { Upload } from "@gradio/upload";
9
9
  import { FileData } from "@gradio/client";
10
- import ClearImage from "./ClearImage.svelte";
11
10
  import { SelectSource } from "@gradio/atoms";
12
11
  import Image from "./Image.svelte";
13
12
  export let value = null;
@@ -26,6 +25,7 @@ export let stream_handler;
26
25
  export let stream_every;
27
26
  export let modify_stream;
28
27
  export let set_time_limit;
28
+ export let show_fullscreen_button = true;
29
29
  let upload_input;
30
30
  export let uploading = false;
31
31
  export let active_source = null;
@@ -87,19 +87,48 @@ async function handle_select_source(source) {
87
87
  break;
88
88
  }
89
89
  }
90
+ let is_full_screen = false;
91
+ let image_container;
92
+ const toggle_full_screen = async () => {
93
+ if (!is_full_screen) {
94
+ await image_container.requestFullscreen();
95
+ } else {
96
+ await document.exitFullscreen();
97
+ is_full_screen = !is_full_screen;
98
+ }
99
+ };
90
100
  </script>
91
101
 
92
102
  <BlockLabel {show_label} Icon={ImageIcon} label={label || "Image"} />
93
103
 
94
- <div data-testid="image" class="image-container">
95
- {#if value?.url && !active_streaming}
96
- <ClearImage
97
- on:remove_image={() => {
98
- value = null;
99
- dispatch("clear");
100
- }}
101
- />
102
- {/if}
104
+ <div data-testid="image" class="image-container" bind:this={image_container}>
105
+ <IconButtonWrapper>
106
+ {#if value?.url && !active_streaming}
107
+ {#if !is_full_screen && show_fullscreen_button}
108
+ <IconButton
109
+ Icon={Maximize}
110
+ label={is_full_screen ? "Exit full screen" : "View in full screen"}
111
+ on:click={toggle_full_screen}
112
+ />
113
+ {/if}
114
+ {#if is_full_screen && show_fullscreen_button}
115
+ <IconButton
116
+ Icon={Minimize}
117
+ label={is_full_screen ? "Exit full screen" : "View in full screen"}
118
+ on:click={toggle_full_screen}
119
+ />
120
+ {/if}
121
+ <IconButton
122
+ Icon={Clear}
123
+ label="Remove Image"
124
+ on:click={(event) => {
125
+ value = null;
126
+ dispatch("clear");
127
+ event.stopPropagation();
128
+ }}
129
+ />
130
+ {/if}
131
+ </IconButtonWrapper>
103
132
  <div
104
133
  class="upload-container"
105
134
  class:reduced-height={sources.length > 1}
package/dist/shared/ImageUploader.svelte.d.ts CHANGED
@@ -20,6 +20,7 @@ declare const __propDef: {
20
20
  stream_every: number;
21
21
  modify_stream: (state: "open" | "closed" | "waiting") => void;
22
22
  set_time_limit: (arg0: number) => void;
23
+ show_fullscreen_button?: boolean | undefined;
23
24
  uploading?: boolean | undefined;
24
25
  active_source?: ("clipboard" | "upload" | "microphone" | "webcam" | null) | undefined;
25
26
  dragging?: boolean | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/image",
3
- "version": "0.16.8",
3
+ "version": "0.17.0",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -10,12 +10,12 @@
10
10
  "cropperjs": "^1.5.12",
11
11
  "lazy-brush": "^1.0.1",
12
12
  "resize-observer-polyfill": "^1.5.1",
13
- "@gradio/atoms": "^0.11.1",
14
- "@gradio/icons": "^0.8.1",
15
- "@gradio/statustracker": "^0.9.5",
16
- "@gradio/upload": "^0.14.1",
17
- "@gradio/utils": "^0.8.0",
13
+ "@gradio/atoms": "^0.11.2",
18
14
  "@gradio/client": "^1.8.0",
15
+ "@gradio/icons": "^0.8.1",
16
+ "@gradio/upload": "^0.14.2",
17
+ "@gradio/statustracker": "^0.9.6",
18
+ "@gradio/utils": "^0.9.0",
19
19
  "@gradio/wasm": "^0.15.0"
20
20
  },
21
21
  "devDependencies": {
package/shared/ImageUploader.svelte CHANGED
@@ -1,7 +1,7 @@
1
1
  <script lang="ts">
2
2
  import { createEventDispatcher, tick } from "svelte";
3
- import { BlockLabel } from "@gradio/atoms";
4
- import { Image as ImageIcon } from "@gradio/icons";
3
+ import { BlockLabel, IconButtonWrapper, IconButton } from "@gradio/atoms";
4
+ import { Clear, Image as ImageIcon, Maximize, Minimize } from "@gradio/icons";
5
5
  import {
6
6
  type SelectData,
7
7
  type I18nFormatter,
@@ -12,7 +12,6 @@
12
12
 
13
13
  import { Upload } from "@gradio/upload";
14
14
  import { FileData, type Client } from "@gradio/client";
15
- import ClearImage from "./ClearImage.svelte";
16
15
  import { SelectSource } from "@gradio/atoms";
17
16
  import Image from "./Image.svelte";
18
17
  import type { Base64File } from "./types";
@@ -37,6 +36,7 @@
37
36
 
38
37
  export let modify_stream: (state: "open" | "closed" | "waiting") => void;
39
38
  export let set_time_limit: (arg0: number) => void;
39
+ export let show_fullscreen_button = true;
40
40
 
41
41
  let upload_input: Upload;
42
42
  export let uploading = false;
@@ -119,19 +119,50 @@
119
119
  break;
120
120
  }
121
121
  }
122
+
123
+ let is_full_screen = false;
124
+ let image_container: HTMLElement;
125
+
126
+ const toggle_full_screen = async (): Promise<void> => {
127
+ if (!is_full_screen) {
128
+ await image_container.requestFullscreen();
129
+ } else {
130
+ await document.exitFullscreen();
131
+ is_full_screen = !is_full_screen;
132
+ }
133
+ };
122
134
  </script>
123
135
 
124
136
  <BlockLabel {show_label} Icon={ImageIcon} label={label || "Image"} />
125
137
 
126
- <div data-testid="image" class="image-container">
127
- {#if value?.url && !active_streaming}
128
- <ClearImage
129
- on:remove_image={() => {
130
- value = null;
131
- dispatch("clear");
132
- }}
133
- />
134
- {/if}
138
+ <div data-testid="image" class="image-container" bind:this={image_container}>
139
+ <IconButtonWrapper>
140
+ {#if value?.url && !active_streaming}
141
+ {#if !is_full_screen && show_fullscreen_button}
142
+ <IconButton
143
+ Icon={Maximize}
144
+ label={is_full_screen ? "Exit full screen" : "View in full screen"}
145
+ on:click={toggle_full_screen}
146
+ />
147
+ {/if}
148
+ {#if is_full_screen && show_fullscreen_button}
149
+ <IconButton
150
+ Icon={Minimize}
151
+ label={is_full_screen ? "Exit full screen" : "View in full screen"}
152
+ on:click={toggle_full_screen}
153
+ />
154
+ {/if}
155
+ <IconButton
156
+ Icon={Clear}
157
+ label="Remove Image"
158
+ on:click={(event) => {
159
+ value = null;
160
+ dispatch("clear");
161
+ event.stopPropagation();
162
+ }}
163
+ />
164
+ {/if}
165
+ </IconButtonWrapper>
135
166
  <div
136
167
  class="upload-container"
137
168
  class:reduced-height={sources.length > 1}
package/dist/shared/ClearImage.svelte DELETED
@@ -1,16 +0,0 @@
1
- <script>import { createEventDispatcher } from "svelte";
2
- import { IconButton, IconButtonWrapper } from "@gradio/atoms";
3
- import { Clear } from "@gradio/icons";
4
- const dispatch = createEventDispatcher();
5
- </script>
6
-
7
- <IconButtonWrapper>
8
- <IconButton
9
- Icon={Clear}
10
- label="Remove Image"
11
- on:click={(event) => {
12
- dispatch("remove_image");
13
- event.stopPropagation();
14
- }}
15
- />
16
- </IconButtonWrapper>
package/dist/shared/ClearImage.svelte.d.ts DELETED
@@ -1,18 +0,0 @@
1
- import { SvelteComponent } from "svelte";
2
- declare const __propDef: {
3
- props: {
4
- [x: string]: never;
5
- };
6
- events: {
7
- remove_image: CustomEvent<any>;
8
- } & {
9
- [evt: string]: CustomEvent<any>;
10
- };
11
- slots: {};
12
- };
13
- export type ClearImageProps = typeof __propDef.props;
14
- export type ClearImageEvents = typeof __propDef.events;
15
- export type ClearImageSlots = typeof __propDef.slots;
16
- export default class ClearImage extends SvelteComponent<ClearImageProps, ClearImageEvents, ClearImageSlots> {
17
- }
18
- export {};
package/shared/ClearImage.svelte DELETED
@@ -1,18 +0,0 @@
1
- <script lang="ts">
2
- import { createEventDispatcher } from "svelte";
3
- import { IconButton, IconButtonWrapper } from "@gradio/atoms";
4
- import { Clear } from "@gradio/icons";
5
-
6
- const dispatch = createEventDispatcher();
7
- </script>
8
-
9
- <IconButtonWrapper>
10
- <IconButton
11
- Icon={Clear}
12
- label="Remove Image"
13
- on:click={(event) => {
14
- dispatch("remove_image");
15
- event.stopPropagation();
16
- }}
17
- />
18
- </IconButtonWrapper>