Menu improvements

app.css

@@ -19,6 +19,10 @@
   --block-border-width: 1px;
 }
 
+#embeddings .token {
+  border-radius: 4px;
+}
+
 .gallery {
   background-color: var(--bg);
 }
@@ -30,11 +34,11 @@
 }
 .gallery, .gallery > .grid-wrap {
   height: 100%;
-  max-height: 574px;
+  max-height: 550px;
 }
 @media (min-width: 640px) {
   .gallery, .gallery > .grid-wrap {
-    height: 574px;
+    height: 550px;
     max-height: none;
   }
 }
@@ -105,7 +109,7 @@
   border-width: 0px;
 }
 .tabitem {
-  max-height: 698px;
+  max-height: 656px;
   overflow-x: hidden;
   overflow-y: auto;
   padding: 0 0 8px;

app.js

@@ -2,13 +2,15 @@
   const menu = document.querySelector("#menu");
   const menuButton = menu.querySelector("button");
   const menuSpan = menuButton.querySelector("span:first-child");
+  const content = document.querySelector("#content");
 
-  const updateMenuText = () => {
+  const updateMenu = () => {
     const isOpen = menuButton.classList.contains("open");
-    menuSpan.textContent = isOpen ? "Close menu" : "Open menu";
+    menuSpan.textContent = isOpen ? "Hide menu" : "Show menu";
+    content.style.display = isOpen ? "none" : "flex";
   };
 
-  const observer = new MutationObserver(updateMenuText);
+  const observer = new MutationObserver(updateMenu);
   observer.observe(menuButton, { attributes: true, attributeFilter: ["class"] });
-  updateMenuText();
+  updateMenu();
 }

app.py

@@ -87,7 +87,7 @@ with gr.Blocks(
     with gr.Accordion(
         elem_classes=["accordion"],
         elem_id="menu",
-        label="Open menu",
+        label="Show menu",
         open=False,
     ):
         with gr.Tabs():
@@ -106,6 +106,7 @@ with gr.Blocks(
                             filterable=False,
                             value=Config.MODEL,
                             label="Model",
+                            min_width=240,
                         )
                         scheduler = gr.Dropdown(
                             choices=Config.SCHEDULERS,
@@ -120,14 +121,15 @@ with gr.Blocks(
                         style = gr.Dropdown(
                             value=Config.STYLE,
                             label="Style",
-                            min_width=200,
                             choices=[("None", None)] + [(s["name"], s["id"]) for s in styles],
                         )
                         embeddings = gr.Dropdown(
+                            elem_id="embeddings",
                             label="Embeddings",
                             choices=[(f"<{e}>", e) for e in Config.EMBEDDINGS],
                             multiselect=True,
                             value=[Config.EMBEDDING],
+                            min_width=240,
                         )
 
                     with gr.Row():
@@ -179,7 +181,6 @@ with gr.Blocks(
                             value="448,576",
                             filterable=False,
                             label="Aspect Ratio",
-                            min_width=180,
                         )
                         scale = gr.Dropdown(
                             choices=[(f"{s}x", s) for s in Config.SCALES],
@@ -253,49 +254,52 @@ with gr.Blocks(
             with gr.TabItem("ℹ️ Usage"):
                 gr.Markdown(read_file("usage.md"), elem_classes=["markdown"])
 
-    with gr.Group():
-        output_images = gr.Gallery(
-            elem_classes=["gallery"],
-            show_share_button=False,
-            interactive=False,
-            show_label=False,
-            object_fit="cover",
-            label="Output",
-            format="png",
-            columns=2,
-        )
-        prompt = gr.Textbox(
-            placeholder="corgi, beach, 8k",
-            show_label=False,
-            label="Prompt",
-            value=None,
-            lines=2,
-        )
-
-    with gr.Row():
-        generate_btn = gr.Button("Generate", variant="primary")
-        random_btn = gr.Button(
-            elem_classes=["icon-button", "popover"],
-            variant="secondary",
-            elem_id="random",
-            min_width=0,
-            value="🎲",
-        )
-        refresh_btn = gr.Button(
-            elem_classes=["icon-button", "popover"],
-            variant="secondary",
-            elem_id="refresh",
-            min_width=0,
-            value="🔄",
-        )
-        clear_btn = gr.ClearButton(
-            elem_classes=["icon-button", "popover"],
-            components=[output_images],
-            variant="secondary",
-            elem_id="clear",
-            min_width=0,
-            value="🗑️",
-        )
+    # Main content
+    with gr.Column(elem_id="content"):
+        with gr.Group():
+            output_images = gr.Gallery(
+                elem_classes=["gallery"],
+                show_share_button=False,
+                interactive=False,
+                show_label=False,
+                object_fit="cover",
+                label="Output",
+                format="png",
+                columns=2,
+            )
+            prompt = gr.Textbox(
+                placeholder="corgi, beach, 8k",
+                show_label=False,
+                label="Prompt",
+                value=None,
+                lines=2,
+            )
+
+        # Buttons
+        with gr.Row():
+            generate_btn = gr.Button("Generate", variant="primary")
+            random_btn = gr.Button(
+                elem_classes=["icon-button", "popover"],
+                variant="secondary",
+                elem_id="random",
+                min_width=0,
+                value="🎲",
+            )
+            refresh_btn = gr.Button(
+                elem_classes=["icon-button", "popover"],
+                variant="secondary",
+                elem_id="refresh",
+                min_width=0,
+                value="🔄",
+            )
+            clear_btn = gr.ClearButton(
+                elem_classes=["icon-button", "popover"],
+                components=[output_images],
+                variant="secondary",
+                elem_id="clear",
+                min_width=0,
+                value="🗑️",
+            )
 
     random_btn.click(random_fn, inputs=[], outputs=[prompt], show_api=False)
 

partials/head.html

@@ -1,8 +1,8 @@
 <style>
   /* gradio styles go in head */
-  @media (min-width: 1024px) {
+  @media (min-width: 1536px) {
     gradio-app > .gradio-container {
-      max-width: 960px !important;
+      max-width: 1280px !important;
     }
   }
 </style>