Add option to display gallery in preview mode (#3345)

* Add code + api

* CHANGELOG

CHANGELOG.md

@@ -26,7 +26,7 @@ By [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3297](https://git
 - Allow the setting of `brush_radius` for the `Image` component both as a default and via `Image.update()` by [@pngwn](https://github.com/pngwn) in [PR 3277](https://github.com/gradio-app/gradio/pull/3277)
 - Added `info=` argument to form components to enable extra context provided to users, by [@aliabid94](https://github.com/aliabid94) in [PR 3291](https://github.com/gradio-app/gradio/pull/3291)
 - Allow developers to access the username of a logged-in user from the `gr.Request()` object using the `.username` attribute by [@abidlabs](https://github.com/abidlabs) in [PR 3296](https://github.com/gradio-app/gradio/pull/3296)
-
+- Add `preview` option to `Gallery.style` that launches the gallery in preview mode when first loaded by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3345](https://github.com/gradio-app/gradio/pull/3345) 
 
 ## Bug Fixes:
 - Ensure `mirror_webcam` is always respected by [@pngwn](https://github.com/pngwn) in [PR 3245](https://github.com/gradio-app/gradio/pull/3245)

gradio/components.py

@@ -1241,7 +1241,9 @@ class Dropdown(Changeable, IOComponent, SimpleSerializable, FormComponent):
             if isinstance(value, str):
                 value = [value]
         if not multiselect and max_choices is not None:
-            warnings.warn("The `max_choices` parameter is ignored when `multiselect` is False.")
+            warnings.warn(
+                "The `max_choices` parameter is ignored when `multiselect` is False."
+            )
         self.max_choices = max_choices
         self.test_input = self.choices[0] if len(self.choices) else None
         self.interpret_by_tokens = False
@@ -3831,6 +3833,7 @@ class Gallery(IOComponent, TempFileManager, FileSerializable):
         grid: int | Tuple | None = None,
         height: str | None = None,
         container: bool | None = None,
+        preview: bool | None = None,
         **kwargs,
     ):
         """
@@ -3844,6 +3847,8 @@ class Gallery(IOComponent, TempFileManager, FileSerializable):
             self._style["grid"] = grid
         if height is not None:
             self._style["height"] = height
+        if preview is not None:
+            self._style["preview"] = preview
 
         return Component.style(self, container=container, **kwargs)
 

ui/packages/gallery/src/Gallery.svelte

@@ -16,6 +16,11 @@
 	export let value: Array<string> | Array<FileData> | null = null;
 	export let style: Styles = { grid: [2], height: "auto" };
 
+	// tracks whether the value of the gallery was reset
+	let was_reset: boolean = true;
+
+	$: was_reset = value == null || value.length == 0 ? true : was_reset;
+
 	$: _value =
 		value === null
 			? null
@@ -25,14 +30,24 @@
 						: [normalise_file(img, root, root_url), null]
 			  );
 
-	let prevValue: string[] | FileData[] | null = null;
+	let prevValue: string[] | FileData[] | null = value;
 	let selected_image: number | null = null;
 	$: if (prevValue !== value) {
-		// so that gallery preserves selected image after update
-		selected_image =
-			selected_image !== null && value !== null && selected_image < value.length
-				? selected_image
-				: null;
+		// When value is falsy (clear button or first load),
+		// style.preview determines the selected image
+		if (was_reset) {
+			selected_image = style.preview ? 0 : null;
+			was_reset = false;
+			// Otherwise we keep the selected_image the same if the
+			// gallery has at least as many elements as it did before
+		} else {
+			selected_image =
+				selected_image !== null &&
+				value !== null &&
+				selected_image < value.length
+					? selected_image
+					: null;
+		}
 		prevValue = value;
 	}
 

ui/packages/utils/src/styles.ts

@@ -10,6 +10,7 @@ export interface Styles {
 	color_map?: Record<string, string>;
 	label_container?: boolean;
 	gap?: boolean;
+	preview?: boolean;
 }
 
 type PartialRecord<K extends keyof any, T> = {