From 458941c508f11d43debf1cef6950f330145e336d Mon Sep 17 00:00:00 2001
From: Hannah <hannahblair@users.noreply.github.com>
Date: Wed, 27 Nov 2024 20:03:12 +0000
Subject: [PATCH] Allow full screen mode in interactive gr.Image (#10054)

* 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>
---
 .changeset/dirty-cloths-heal.md      |  6 +++
 js/image/shared/ClearImage.svelte    | 18 ---------
 js/image/shared/ImageUploader.svelte | 55 ++++++++++++++++++++++------
 3 files changed, 49 insertions(+), 30 deletions(-)
 create mode 100644 .changeset/dirty-cloths-heal.md
 delete mode 100644 js/image/shared/ClearImage.svelte

diff --git a/.changeset/dirty-cloths-heal.md b/.changeset/dirty-cloths-heal.md
new file mode 100644
index 0000000000..c823827f0c
--- /dev/null
+++ b/.changeset/dirty-cloths-heal.md
@@ -0,0 +1,6 @@
+---
+"@gradio/image": minor
+"gradio": minor
+---
+
+feat:Allow full screen mode in interactive gr.Image
diff --git a/js/image/shared/ClearImage.svelte b/js/image/shared/ClearImage.svelte
deleted file mode 100644
index 8726267bbd..0000000000
--- a/js/image/shared/ClearImage.svelte
+++ /dev/null
@@ -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>
diff --git a/js/image/shared/ImageUploader.svelte b/js/image/shared/ImageUploader.svelte
index 75c7780083..3e3916b28b 100644
--- a/js/image/shared/ImageUploader.svelte
+++ b/js/image/shared/ImageUploader.svelte
@@ -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}