Style adjustments

demo.css

@@ -1,4 +1,5 @@
 .accordion {
+  --block-border-width: 0px;
   background-color: transparent;
 }
 .accordion > button {
@@ -8,37 +9,46 @@
   width: auto;
   margin-right: 4px;
 }
-
-.gr-group div {
-  gap: 0px;
+.accordion .tabs {
+  margin-top: 12px;
+}
+.accordion .tabitem > div {
+  --block-border-width: 1px;
 }
 
 .tabs, .tabitem, .tab-nav, .tab-nav > .selected {
   border-width: 0px;
 }
-
-#about {
-  padding: 20px 24px;
+.tabitem {
+  max-height: 600px;
+  overflow-y: auto;
+}
+.tabitem .markdown {
+  margin-top: 4px;
+  margin-left: 8px;
 }
 
 #gallery {
-  background-color: var(--bg);
-}
-#gallery > div:nth-child(2) {
-  overflow-y: hidden;
-}
-.dark #gallery {
-  background-color: var(--background-fill-primary);
+  --block-border-width: 0px;
+  background-color: transparent;
 }
 
 #intro {
   display: flex;
   align-items: center;
 }
+#intro > h1 > span {
+  color: #047857 !important;
+  font-style: italic;
+}
+#intro > h1 > span:is(.dark *) {
+  color: #10b981 !important;
+}
 #intro > svg {
   display: inline-block;
-  width: 1.75rem;
-  height: 1.75rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-top: 0.25rem;
   margin-left: 0.5rem;
   fill: #047857 !important;
   animation: spin 3s linear infinite reverse;
@@ -49,18 +59,3 @@
 @keyframes spin {
   100% { transform: rotate(360deg); }
 }
-
-#menu-tabs {
-  margin-top: 12px;
-}
-
-#prompt {
-  background-color: var(--bg);
-}
-.dark #prompt {
-  background-color: var(--background-fill-primary);
-}
-
-#random-seed > button {
-  margin-right: 8px;
-}

demo.py

@@ -34,7 +34,7 @@ def generate_btn_click(*args, **kwargs):
     if prompt is None or prompt.strip() == "":
         raise gr.Error("You must enter a prompt")
 
-    images = generate(*args, **kwargs)
+    images = generate(*args, **kwargs, Error=gr.Error)
     end = time.perf_counter()
     diff = end - start
     gr.Info(f"Generated {len(images)} images in {diff:.2f}s")
@@ -42,6 +42,7 @@ def generate_btn_click(*args, **kwargs):
 
 
 with gr.Blocks(
+    head=read_file("head.html"),
     css="./demo.css",
     js="./demo.js",
     theme=gr.themes.Default(
@@ -59,22 +60,17 @@ with gr.Blocks(
     ).set(
         block_background_fill=gr.themes.colors.gray.c50,
         block_background_fill_dark=gr.themes.colors.gray.c900,
-        block_border_width="0px",
-        block_border_width_dark="0px",
         block_shadow="0 0 #0000",
         block_shadow_dark="0 0 #0000",
-        block_title_text_weight=500,
-        form_gap_width="0px",
-        section_header_text_weight=500,
     ),
 ) as demo:
     gr.HTML(read_file("intro.html"))
     output_images = gr.Gallery(
-        height=320,
         label="Output",
         show_label=False,
-        columns=4,
+        columns=1,
         interactive=False,
+        show_share_button=False,
         elem_id="gallery",
     )
     prompt = gr.Textbox(
@@ -83,7 +79,6 @@ with gr.Blocks(
         lines=2,
         placeholder="corgi, at the beach, cute",
         value=None,
-        elem_id="prompt",
     )
     generate_btn = gr.Button("Generate", variant="primary", elem_classes=[])
 
@@ -93,7 +88,7 @@ with gr.Blocks(
         elem_id="menu",
         elem_classes=["accordion"],
     ):
-        with gr.Tabs(elem_id="menu-tabs"):
+        with gr.Tabs():
             with gr.TabItem("⚙️ Settings"):
                 with gr.Group():
                     negative_prompt = gr.Textbox(
@@ -116,6 +111,7 @@ with gr.Blocks(
                             value="1:1",
                             filterable=False,
                         )
+                        seed = gr.Number(label="Seed", value=0)
 
                     with gr.Row():
                         guidance_scale = gr.Slider(
@@ -123,7 +119,7 @@ with gr.Blocks(
                             minimum=1.0,
                             maximum=15.0,
                             step=0.1,
-                            value=7,
+                            value=7.5,
                         )
                         inference_steps = gr.Slider(
                             label="Inference Steps",
@@ -133,57 +129,67 @@ with gr.Blocks(
                             value=30,
                         )
 
-                    with gr.Column():
-                        seed = gr.Number(label="Seed", value=0)
-                        with gr.Row():
-                            random_seed_btn = gr.Button(
-                                "🎲 Random",
-                                variant="secondary",
-                                size="sm",
-                                scale=1,
-                            )
-                            increment_seed = gr.Checkbox(
-                                label="Autoincrement",
-                                value=True,
-                                scale=8,
-                                elem_classes=["checkbox"],
-                                elem_id="increment-seed",
-                            )
-
-            with gr.TabItem("🧠 Model"):
-                model = gr.Dropdown(
-                    label="Model",
-                    choices=[
-                        "fluently/Fluently-v4",
-                        "Lykon/dreamshaper-8",
-                        "prompthero/openjourney-v4",
-                        "runwayml/stable-diffusion-v1-5",
-                        "SG161222/Realistic_Vision_V5.1_Novae",
-                    ],
-                    value="Lykon/dreamshaper-8",
-                )
-                scheduler = gr.Dropdown(
-                    label="Scheduler",
-                    choices=[
-                        "DEIS 2M",
-                        "DPM++ 2M",
-                        "DPM2 a",
-                        "Euler a",
-                        "Heun",
-                        "LMS",
-                        "PNDM",
-                    ],
-                    value="DEIS 2M",
-                    elem_id="scheduler",
-                )
-                use_karras = gr.Checkbox(
-                    label="Karras σ",
-                    value=True,
-                    elem_classes=["checkbox"],
-                )
-
-            with gr.TabItem("ℹ️ About", elem_id="about"):
-                gr.Markdown(read_file("about.md"))
+                    with gr.Row():
+                        model = gr.Dropdown(
+                            label="Model",
+                            choices=[
+                                "fluently/Fluently-v4",
+                                "Linaqruf/anything-v3-1",
+                                "Lykon/dreamshaper-8",
+                                "prompthero/openjourney-v4",
+                                "runwayml/stable-diffusion-v1-5",
+                                "SG161222/Realistic_Vision_V5.1_Novae",
+                            ],
+                            value="Lykon/dreamshaper-8",
+                        )
+                        scheduler = gr.Dropdown(
+                            label="Scheduler",
+                            choices=[
+                                "DEIS 2M",
+                                "DPM++ 2M",
+                                "DPM2 a",
+                                "Euler a",
+                                "Heun",
+                                "LMS",
+                                "PNDM",
+                            ],
+                            value="DEIS 2M",
+                            elem_id="scheduler",
+                        )
+
+                    with gr.Row():
+                        use_karras = gr.Checkbox(
+                            label="Use Karras σ",
+                            value=True,
+                            elem_classes=["checkbox"],
+                            scale=2,
+                        )
+                        increment_seed = gr.Checkbox(
+                            label="Autoincrement seed",
+                            value=True,
+                            elem_classes=["checkbox"],
+                            elem_id="increment-seed",
+                            scale=2,
+                        )
+                        random_seed_btn = gr.Button(
+                            "🎲 Random seed",
+                            variant="secondary",
+                            size="sm",
+                            scale=1,
+                        )
+
+            with gr.TabItem("🛠️ Advanced"):
+                gr.Markdown("_Coming soon..._", elem_classes=["markdown"])
+
+            with gr.TabItem("ℹ️ Info"):
+                gr.Markdown(read_file("info.md"), elem_classes=["markdown"])
+
+    # change gallery columns when num_images changes
+    num_images.change(
+        lambda n: gr.Gallery(columns=n),
+        inputs=[num_images],
+        outputs=[output_images],
+    )
 
     # update the random seed using JavaScript
     random_seed_btn.click(None, outputs=[seed], js="() => Math.floor(Math.random() * 2**32)")

head.html

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

intro.html

@@ -1,7 +1,7 @@
 <div id="intro">
-  <h1>Stable Diffusion <em>Zero</em></h1>
+  <h1>Stable Diffusion <span>Zero</span></h1>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 15 15">
     <path d="M7.48877 6.75C7.29015 6.75 7.09967 6.82902 6.95923 6.96967C6.81879 7.11032 6.73989 7.30109 6.73989 7.5C6.73989 7.69891 6.81879 7.88968 6.95923 8.03033C7.09967 8.17098 7.29015 8.25 7.48877 8.25C7.68738 8.25 7.87786 8.17098 8.0183 8.03033C8.15874 7.88968 8.23764 7.69891 8.23764 7.5C8.23764 7.30109 8.15874 7.11032 8.0183 6.96967C7.87786 6.82902 7.68738 6.75 7.48877 6.75ZM7.8632 0C11.2331 0 11.3155 2.6775 9.54818 3.5625C8.80679 3.93 8.47728 4.7175 8.335 5.415C8.69446 5.565 9.00899 5.7975 9.24863 6.0975C12.0195 4.5975 15 5.19 15 7.875C15 11.25 12.3265 11.325 11.4428 9.5475C11.0684 8.805 10.2746 8.475 9.57813 8.3325C9.42836 8.6925 9.19621 9 8.89665 9.255C10.3869 12.0225 9.79531 15 7.11433 15C3.74438 15 3.67698 12.315 5.44433 11.43C6.17823 11.0625 6.50774 10.2825 6.65751 9.5925C6.29056 9.4425 5.96855 9.2025 5.72891 8.9025C2.96555 10.3875 0 9.8025 0 7.125C0 3.75 2.666 3.6675 3.54967 5.445C3.92411 6.1875 4.71043 6.51 5.40689 6.6525C5.54918 6.2925 5.78882 5.9775 6.09586 5.7375C4.60559 2.97 5.1972 0 7.8632 0Z"></path>
   </svg>
 </div>
-<p>Stable Diffusion 1.5 with extras. Powered by 🤗 <a href="https://huggingface.co/spaces/zero-gpu-explorers/README" target="_blank" rel="noopener noreferrer">ZeroGPU</a>.</p>
+<p>Stable Diffusion 1.5 powered by 🤗 <a href="https://huggingface.co/spaces/zero-gpu-explorers/README" target="_blank" rel="noopener noreferrer">ZeroGPU</a>.</p>