mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2024-12-15 02:11:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

Allow full screen mode in interactive gr.Image (#10054)

Browse Source 
* allow full screen mode in interactive image

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
This commit is contained in:
Hannah 2024-11-27 20:03:12 +00:00 committed by GitHub
parent 5d36c8088d
commit 458941c508
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 49 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/dirty-cloths-heal.md Normal file
View File

@ -0,0 +1,6 @@
---
"@gradio/image": minor
"gradio": minor
---
feat:Allow full screen mode in interactive gr.Image

18
js/image/shared/ClearImage.svelte
View File

@ -1,18 +0,0 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { IconButton, IconButtonWrapper } from "@gradio/atoms";
import { Clear } from "@gradio/icons";
const dispatch = createEventDispatcher();
</script>
<IconButtonWrapper>
<IconButton
Icon={Clear}
label="Remove Image"
on:click={(event) => {
dispatch("remove_image");
event.stopPropagation();
}}
/>
</IconButtonWrapper>

55
js/image/shared/ImageUploader.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { createEventDispatcher, tick } from "svelte"; import { createEventDispatcher, tick } from "svelte";
import { BlockLabel } from "@gradio/atoms"; import { BlockLabel, IconButtonWrapper, IconButton } from "@gradio/atoms";
import { Image as ImageIcon } from "@gradio/icons"; import { Clear, Image as ImageIcon, Maximize, Minimize } from "@gradio/icons";
import { import {
type SelectData, type SelectData,
type I18nFormatter, type I18nFormatter,
@ -12,7 +12,6 @@
import { Upload } from "@gradio/upload"; import { Upload } from "@gradio/upload";
import { FileData, type Client } from "@gradio/client"; import { FileData, type Client } from "@gradio/client";
import ClearImage from "./ClearImage.svelte";
import { SelectSource } from "@gradio/atoms"; import { SelectSource } from "@gradio/atoms";
import Image from "./Image.svelte"; import Image from "./Image.svelte";
import type { Base64File } from "./types"; import type { Base64File } from "./types";
@ -37,6 +36,7 @@
export let modify_stream: (state: "open" | "closed" | "waiting") => void; export let modify_stream: (state: "open" | "closed" | "waiting") => void;
export let set_time_limit: (arg0: number) => void; export let set_time_limit: (arg0: number) => void;
export let show_fullscreen_button = true;
let upload_input: Upload; let upload_input: Upload;
export let uploading = false; export let uploading = false;
@ -119,19 +119,50 @@
break; break;
} }
} }
let is_full_screen = false;
let image_container: HTMLElement;
const toggle_full_screen = async (): Promise<void> => {
if (!is_full_screen) {
await image_container.requestFullscreen();
} else {
await document.exitFullscreen();
is_full_screen = !is_full_screen;
}
};
</script> </script>
<BlockLabel {show_label} Icon={ImageIcon} label={label || "Image"} /> <BlockLabel {show_label} Icon={ImageIcon} label={label || "Image"} />
<div data-testid="image" class="image-container"> <div data-testid="image" class="image-container" bind:this={image_container}>
{#if value?.url && !active_streaming} <IconButtonWrapper>
<ClearImage {#if value?.url && !active_streaming}
on:remove_image={() => { {#if !is_full_screen && show_fullscreen_button}
value = null; <IconButton
dispatch("clear"); Icon={Maximize}
}} label={is_full_screen ? "Exit full screen" : "View in full screen"}
/> on:click={toggle_full_screen}
{/if} />
{/if}
{#if is_full_screen && show_fullscreen_button}
<IconButton
Icon={Minimize}
label={is_full_screen ? "Exit full screen" : "View in full screen"}
on:click={toggle_full_screen}
/>
{/if}
<IconButton
Icon={Clear}
label="Remove Image"
on:click={(event) => {
value = null;
dispatch("clear");
event.stopPropagation();
}}
/>
{/if}
</IconButtonWrapper>
<div <div
class="upload-container" class="upload-container"
class:reduced-height={sources.length > 1} class:reduced-height={sources.length > 1}