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

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

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}