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