Allow styling height for Image and Video, also dynamic logic change (#1503)

* changes

* changes

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

demo/blocks_hello/run.py

@@ -19,4 +19,6 @@ with demo:
                inputs=inp, 
                outputs=out)
 
+    gr.Image("lion.jpg").style(height=54, width=240)
+
 demo.launch()

gradio/components.py

@@ -1596,7 +1596,11 @@ class Image(Editable, Clearable, Changeable, Streamable, IOComponent):
     def style(
         self,
         rounded: Optional[bool | Tuple[bool, bool, bool, bool]] = None,
+        height: Optional[int] = None,
+        width: Optional[int] = None,
     ):
+        self._style["height"] = height
+        self._style["width"] = width
         return IOComponent.style(
             self,
             rounded=rounded,
@@ -1770,7 +1774,11 @@ class Video(Changeable, Clearable, Playable, IOComponent):
     def style(
         self,
         rounded: Optional[bool | Tuple[bool, bool, bool, bool]] = None,
+        height: Optional[int] = None,
+        width: Optional[int] = None,
     ):
+        self._style["height"] = height
+        self._style["width"] = width
         return IOComponent.style(
             self,
             rounded=rounded,

ui/packages/app/src/Blocks.svelte

@@ -23,9 +23,9 @@
 			visible?: boolean;
 			elem_id?: string;
 			[key: string]: unknown;
+			value?: unknown;
 		};
 		instance?: SvelteComponentTyped;
-		value?: unknown;
 		component?: any;
 		children?: Array<Component>;
 	}
@@ -109,11 +109,11 @@
 		return false;
 	}
 
-	const dynamic_ids = components.reduce((acc, { id }) => {
+	const dynamic_ids = components.reduce((acc, { id, props }) => {
 		const is_input = is_dep(id, "inputs", dependencies);
 		const is_output = is_dep(id, "outputs", dependencies);
 
-		if (!is_input && !is_output) acc.add(id); // default dynamic
+		if (!is_input && !is_output && !props.value) acc.add(id); // default dynamic
 		if (is_input) acc.add(id);
 
 		return acc;

ui/packages/app/src/components/Gallery/Gallery.svelte

@@ -16,7 +16,6 @@
 	export let value: Array<string> | null = null;
 	export let style: Styles = {};
 
-	$: console.log(">", value);
 	let selected_image: number | null = null;
 
 	$: previous =

ui/packages/app/src/components/Image/Image.svelte

@@ -35,7 +35,7 @@
 	color={dragging ? "green" : "grey"}
 	padding={false}
 	{elem_id}
-	style={{ rounded: style.rounded }}
+	style={{ rounded: style.rounded, height: style.height, width: style.width }}
 	{visible}
 >
 	<StatusTracker {...loading_status} />

ui/packages/app/src/components/Video/Video.svelte

@@ -34,7 +34,7 @@
 	color={dragging ? "green" : "grey"}
 	padding={false}
 	{elem_id}
-	style={{ rounded: style.rounded }}
+	style={{ rounded: style.rounded, height: style.height, width: style.width }}
 	{visible}
 >
 	<StatusTracker {...loading_status} />

ui/packages/atoms/src/Block.svelte

@@ -65,19 +65,25 @@
 			? get_styles({ rounded: rounded }, ["rounded"]).classes
 			: "";
 	$: visible_style = get_styles({ visible }, ["visible"]).classes;
+	$: size_style =
+		"" +
+		(typeof style.width === "number" ? `height: ${style.width}px; ` : "") +
+		(typeof style.width === "number" ? `width: ${style.width}px;` : "");
 </script>
 
 <svelte:element
 	this={tag}
 	data-testid={test_id}
 	id={elem_id}
-	class="w-full overflow-hidden {styles[variant]} {rounded
+	class="overflow-hidden {styles[variant]} {rounded
 		? styles[color]
 		: ''} {form_class} {classes} {rounded_style} {visible_style}"
+	class:w-full={!style.width}
 	class:gr-panel={padding}
 	class:form={form_position}
 	class:gr-box-unrounded={!rounded && form_position}
 	class:gr-box={!form_position}
+	style={size_style || null}
 >
 	<slot />
 </svelte:element>

ui/packages/utils/src/styles.ts

@@ -7,7 +7,8 @@ export interface Styles {
 	margin?: BoolOrTuple;
 	container?: boolean;
 	grid?: number | Array<number>;
-	height?: "auto" | string;
+	height?: "auto" | string | number;
+	width?: "auto" | string | number;
 	full_width?: boolean;
 	equal_height?: boolean;
 	mobile_collapse?: boolean;