ui apis for dalle-mini

demo/blocks_joined/run.py

@@ -0,0 +1,59 @@
+from time import sleep
+import gradio as gr
+import os
+
+cheetah = os.path.join(os.path.dirname(__file__), "files/cheetah1.jpg")
+
+
+def img(text):
+    sleep(1)
+    return [
+        cheetah,
+        cheetah,
+        cheetah,
+        cheetah,
+        cheetah,
+        cheetah,
+        cheetah,
+        cheetah,
+        cheetah,
+    ]
+
+
+with gr.Blocks(css=".container { max-width: 800px; margin: auto; }") as demo:
+    gr.Markdown("<h1><center>DALL·E mini</center></h1>")
+    gr.Markdown(
+        "DALL·E mini is an AI model that generates images from any prompt you give!"
+    )
+    with gr.Group():
+        with gr.Box():
+            with gr.Row().style(mobile_collapse=False, equal_height=True):
+
+                text = gr.Textbox(
+                    label="Enter your prompt", show_label=False, max_lines=1
+                ).style(
+                    border=(True, False, True, True),
+                    margin=False,
+                    rounded=(True, False, False, True),
+                    container=False,
+                )
+                btn = gr.Button("Run").style(
+                    margin=False,
+                    rounded=(False, True, True, False),
+                )
+        gallery = gr.Gallery(label="Generated images", show_label=False).style(
+            grid=(
+                1,
+                3,
+            ),
+            height="auto",
+        )
+    btn.click(img, inputs=text, outputs=gallery)
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+
+# margin = (TOP, RIGHT, BOTTOM, LEFT)
+# rounded = (TOPLEFT, TOPRIGHT, BOTTOMRIGHT, BOTTOMLEFT)

gradio/__init__.py

@@ -5,7 +5,7 @@
 import gradio.outputs as outputs
 import gradio.processing_utils
 import gradio.templates
-from gradio.blocks import Blocks, Column, Row, TabItem, Tabs
+from gradio.blocks import Blocks, Box, Column, Group, Row, TabItem, Tabs
 from gradio.components import (
     HTML,
     JSON,

gradio/blocks.py

@@ -686,3 +686,31 @@ def block_thread(
             self.server.close()
             if self.enable_queue:
                 queueing.close()
+
+
+class Group(BlockContext):
+    def get_config(self):
+        return {"type": "group", **super().get_config()}
+
+    @staticmethod
+    def update(
+        visible: Optional[bool] = None,
+    ):
+        return {
+            "visible": visible,
+            "__type__": "update",
+        }
+
+
+class Box(BlockContext):
+    def get_config(self):
+        return {"type": "box", **super().get_config()}
+
+    @staticmethod
+    def update(
+        visible: Optional[bool] = None,
+    ):
+        return {
+            "visible": visible,
+            "__type__": "update",
+        }

gradio/components.py

@@ -219,10 +219,13 @@ def deserialize(self, x):
 
     def style(
         self,
-        rounded: Optional[bool] = None,
+        rounded: Optional[bool | Tuple[bool, bool, bool, bool]] = None,
         bg_color: Optional[str] = None,
         text_color: Optional[str] = None,
         container_bg_color: Optional[str] = None,
+        margin: Optional[bool | Tuple[bool, bool, bool, bool]] = None,
+        border: Optional[bool | Tuple[bool, bool, bool, bool]] = None,
+        container: Optional[bool] = None,
     ):
         valid_colors = ["red", "yellow", "green", "blue", "purple", "black"]
         if rounded is not None:
@@ -236,6 +239,12 @@ def style(
         if container_bg_color is not None:
             assert container_bg_color in valid_colors
             self._style["container_bg_color"] = container_bg_color
+        if margin is not None:
+            self._style["margin"] = margin
+        if border is not None:
+            self._style["border"] = border
+        if container is not None:
+            self._style["container"] = container
         return self
 
 
@@ -597,17 +606,23 @@ def deserialize(self, x):
 
     def style(
         self,
-        rounded: Optional[bool] = None,
+        rounded: Optional[bool | Tuple[bool, bool, bool, bool]] = None,
         bg_color: Optional[str] = None,
         text_color: Optional[str] = None,
         container_bg_color: Optional[str] = None,
+        margin: Optional[bool | Tuple[bool, bool, bool, bool]] = None,
+        border: Optional[bool | Tuple[bool, bool, bool, bool]] = None,
+        container: Optional[bool] = None,
     ):
         return IOComponent.style(
             self,
             rounded=rounded,
             bg_color=bg_color,
             text_color=text_color,
             container_bg_color=container_bg_color,
+            margin=margin,
+            border=border,
+            container=container,
         )
 
 
@@ -754,7 +769,7 @@ def deserialize(self, y):
 
     def style(
         self,
-        rounded: Optional[bool] = None,
+        rounded: Optional[bool | Tuple[bool, bool, bool, bool]] = None,
         bg_color: Optional[str] = None,
         text_color: Optional[str] = None,
         container_bg_color: Optional[str] = None,
@@ -1200,7 +1215,7 @@ def deserialize(self, x):
 
     def style(
         self,
-        rounded: Optional[bool] = None,
+        rounded: Optional[bool | Tuple[bool, bool, bool, bool]] = None,
         bg_color: Optional[str] = None,
         text_color: Optional[str] = None,
         container_bg_color: Optional[str] = None,
@@ -1350,7 +1365,7 @@ def deserialize(self, x):
 
     def style(
         self,
-        rounded: Optional[bool] = None,
+        rounded: Optional[bool | Tuple[bool, bool, bool, bool]] = None,
         bg_color: Optional[str] = None,
         text_color: Optional[str] = None,
         container_bg_color: Optional[str] = None,
@@ -1725,7 +1740,7 @@ def deserialize(self, x):
 
     def style(
         self,
-        rounded: Optional[bool] = None,
+        rounded: Optional[bool | Tuple[bool, bool, bool, bool]] = None,
         bg_color: Optional[str] = None,
         text_color: Optional[str] = None,
         container_bg_color: Optional[str] = None,
@@ -3099,7 +3114,28 @@ def postprocess(self, y):
             output.append(img)
         return output
 
+    def style(
+        self,
+        rounded: Optional[bool | Tuple[bool, bool, bool, bool]] = None,
+        bg_color: Optional[str] = None,
+        text_color: Optional[str] = None,
+        margin: Optional[bool | Tuple[bool, bool, bool, bool]] = None,
+        grid: Optional[int] = None,
+        height: Optional[str] = None,
+    ):
+        if grid is not None:
+            self._style["grid"] = grid
+        return IOComponent.style(
+            self,
+            rounded=rounded,
+            bg_color=bg_color,
+            text_color=text_color,
+            margin=margin,
+            height=height,
+        )
+
 
+# max_grid=[3], grid_behavior="scale", height="auto"
 class Carousel(IOComponent):
     """
     Component displays a set of output components that can be scrolled through.
@@ -3577,10 +3613,11 @@ def update(
 
     def style(
         self,
-        rounded: Optional[bool] = None,
+        rounded: Optional[bool | Tuple[bool, bool, bool, bool]] = None,
         bg_color: Optional[str] = None,
         text_color: Optional[str] = None,
         full_width: Optional[str] = None,
+        margin: Optional[bool | Tuple[bool, bool, bool, bool]] = None,
     ):
         if rounded is not None:
             self._style["rounded"] = rounded
@@ -3590,6 +3627,8 @@ def style(
             self._style["text_color"] = text_color
         if full_width is not None:
             self._style["full_width"] = full_width
+        if margin is not None:
+            self._style["margin"] = margin
         return self
 
 

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

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Block } from "@gradio/atoms";
+	import { create_classes } from "@gradio/utils";
+	export let parent: string | null = null;
+	export let style: Record<string, unknown> = {};
+
+	if (typeof style.mobile_collapse !== "boolean") {
+		style.mobile_collapse = true;
+	}
+</script>
+
+<Block>
+	<slot />
+</Block>

ui/packages/app/src/components/Box/index.ts

@@ -0,0 +1,2 @@
+export { default as Component } from "./Box.svelte";
+export const modes = ["static"];

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

@@ -11,6 +11,7 @@
 	export let label: string;
 	export let elem_id: string = "";
 	export let value: Array<string> | null = null;
+	export let style: Record<string, unknown> = {};
 
 	let selected_image: number | null = null;
 
@@ -62,9 +63,28 @@
 			behavior: "smooth"
 		});
 	}
+
+	let grid_map = ["", "sm:", "md:", "lg:", "xl:", "2xl:"];
+
+	$: grid = style.grid
+		? Array(6)
+				.fill(0)
+				.map(
+					(_, i) =>
+						`${grid_map[i]}grid-cols-${
+							style.grid[i] || style.grid[style.grid.length - 1]
+						}`
+				)
+				.join(" ")
+		: `grid-cols-3 md:grid-cols-4 lg:grid-cols-6`;
+
+	$: can_zoom = window_height >= height;
+
+	let height = 0;
+	let window_height = 0;
 </script>
 
-<svelte:window />
+<svelte:window bind:innerHeight={window_height} />
 
 <Block variant="solid" color="grey" padding={false} {elem_id}>
 	<StatusTracker {...loading_status} />
@@ -77,7 +97,10 @@
 		{#if selected_image !== null}
 			<div
 				on:keydown={on_keydown}
-				class="absolute inset-0 z-10 flex flex-col bg-white/90 dark:bg-gray-900 backdrop-blur min-h-[350px] xl:min-h-[450px] max-h-[55vh]"
+				class="absolute inset-0 z-10 flex flex-col bg-white/90 dark:bg-gray-900 backdrop-blur   "
+				class:min-h-[350px]={style.height !== "auto"}
+				class:max-h-[55vh]={style.height !== "auto"}
+				class:xl:min-h-[450px]={style.height !== "auto"}
 			>
 				<ModifyUpload on:clear={() => (selected_image = null)} />
 
@@ -113,11 +136,18 @@
 		{/if}
 
 		<div
-			class="overflow-y-auto h-full p-2 min-h-[350px] xl:min-h-[450px] max-h-[55vh]"
+			bind:clientHeight={height}
+			class="overflow-y-auto h-full p-2"
+			class:min-h-[350px]={style.height !== "auto"}
+			class:max-h-[55vh]={style.height !== "auto"}
+			class:xl:min-h-[450px]={style.height !== "auto"}
 		>
-			<div class="pt-6 grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-2">
+			<div class=" grid  gap-2 {grid}" class:pt-6={show_label}>
 				{#each value as image, i}
-					<button class="gallery-item" on:click={() => (selected_image = i)}>
+					<button
+						class="gallery-item"
+						on:click={() => (selected_image = can_zoom ? i : selected_image)}
+					>
 						<img
 							alt=""
 							class="h-full w-full overflow-hidden object-contain"

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

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { create_classes } from "@gradio/utils";
+	export let parent: string | null = null;
+	export let style: Record<string, unknown> = {};
+
+	if (typeof style.mobile_collapse !== "boolean") {
+		style.mobile_collapse = true;
+	}
+</script>
+
+<div>
+	<slot />
+</div>
+
+<style>
+	div > :global(*:not(.absolute)) {
+		@apply rounded-none;
+	}
+
+	div > :global(*:first-child) {
+		@apply rounded-tl-lg rounded-tr-lg;
+	}
+
+	div > :global(*:last-child) {
+		@apply rounded-bl-lg rounded-br-lg;
+	}
+
+	div > :global(* + *:not(.absolute)) {
+		@apply border-t-0;
+	}
+</style>

ui/packages/app/src/components/Group/index.ts

@@ -0,0 +1,2 @@
+export { default as Component } from "./Group.svelte";
+export const modes = ["static"];

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

@@ -15,15 +15,22 @@
 	export let show_label: boolean;
 	export let max_lines: number | false;
 
+	export let style: Record<string, unknown> = {};
+
 	export let loading_status: LoadingStatus;
 
 	export let mode: "static" | "dynamic";
 </script>
 
-<Block {form_position} {elem_id}>
+<Block
+	{form_position}
+	{elem_id}
+	disable={typeof style.container === "boolean" && !style.container}
+>
 	<StatusTracker {...loading_status} />
 
 	<TextBox
+		{style}
 		bind:value
 		{label}
 		{show_label}

ui/packages/app/src/components/directory.ts

@@ -31,5 +31,7 @@ export const component_map: Record<string, any> = {
 	video: () => import("./Video"),
 	model3d: () => import("./Model3D"),
 	plot: () => import("./Plot"),
-	variable: () => import("./Variable")
+	variable: () => import("./Variable"),
+	group: () => import("./Group"),
+	box: () => import("./Box")
 };