Improve navigation

DOCS.md

@@ -1,14 +1,14 @@
-# Diffusion ZERO
+## Usage
 
 TL;DR: Enter a prompt or roll the `🎲` and press `Generate`.
 
-## Prompting
+### Prompting
 
 Positive and negative prompts are embedded by [Compel](https://github.com/damian0815/compel) for weighting. See [syntax features](https://github.com/damian0815/compel/blob/main/doc/syntax.md) to learn more.
 
 Use `+` or `-` to increase the weight of a token. The weight grows exponentially when chained. For example, `blue+` means 1.1x more attention is given to `blue`, while `blue++` means 1.1^2 more, and so on. The same applies to `-`.
 
-For groups of tokens, wrap them in parentheses and multiply by a float between 0 and 2. For example, `a (birthday cake)1.3 on a table` will increase the weight of both `birthday` and `cake` by 1.3x. This also means the entire scene will be more birthday-like, not just the cake. To counteract this, you can use `-` inside the parentheses on specific tokens, e.g., `a (birthday-- cake)1.3`, to reduce the birthday aspect.
+Groups of tokens can be weighted together by wrapping in parantheses and multiplying by a float between 0 and 2. For example, `(masterpiece, best quality)1.2` will increase the weight of both `masterpiece` and `best quality` by 1.2x.
 
 This is the same syntax used in [InvokeAI](https://invoke-ai.github.io/InvokeAI/features/PROMPTS/) and it differs from AUTOMATIC1111:
 
@@ -19,13 +19,13 @@ This is the same syntax used in [InvokeAI](https://invoke-ai.github.io/InvokeAI/
 | `(blue)1.2` | `(blue:1.2)`  |
 | `(blue)0.8` | `(blue:0.8)`  |
 
-### Arrays
+#### Arrays
 
 Arrays allow you to generate multiple different images from a single prompt. For example, `an adult [[blonde,brunette]] [[man,woman]]` will expand into **4** different prompts. This implementation was inspired by [Fooocus](https://github.com/lllyasviel/Fooocus/pull/1503).
 
 > NB: Make sure to set `Images` to the number of images you want to generate. Otherwise, only the first prompt will be used.
 
-## Models
+### Models
 
 Each model checkpoint has a different aesthetic:
 
@@ -38,7 +38,7 @@ Each model checkpoint has a different aesthetic:
 * [SG161222/Realistic_Vision_V5](https://huggingface.co/SG161222/Realistic_Vision_V5.1_noVAE): realistic
 * [XpucT/Deliberate_v6](https://huggingface.co/XpucT/Deliberate): general purpose stylized
 
-## LoRA
+### LoRA
 
 Apply up to 2 LoRA (low-rank adaptation) adapters with adjustable strength:
 
@@ -47,7 +47,7 @@ Apply up to 2 LoRA (low-rank adaptation) adapters with adjustable strength:
 
 > NB: The trigger words are automatically appended to the positive prompt for you.
 
-## Embeddings
+### Embeddings
 
 Select one or more [textual inversion](https://huggingface.co/docs/diffusers/en/using-diffusers/textual_inversion_inference) embeddings:
 
@@ -57,13 +57,13 @@ Select one or more [textual inversion](https://huggingface.co/docs/diffusers/en/
 
 > NB: The trigger token is automatically appended to the negative prompt for you.
 
-## Styles
+### Styles
 
 [Styles](https://huggingface.co/spaces/adamelliotfields/diffusion/blob/main/data/styles.json) are prompt templates that wrap your positive and negative prompts. They were originally derived from the [twri/sdxl_prompt_styler](https://github.com/twri/sdxl_prompt_styler) Comfy node, but have since been entirely rewritten.
 
 Start by framing a simple subject like `portrait of a young adult woman` or `landscape of a mountain range` and experiment.
 
-### Anime
+#### Anime
 
 The `Anime: *` styles work the best with Dreamshaper. When using the anime-specific Anything model, you should use the `Anime: Anything` style with the following settings:
 
@@ -73,37 +73,35 @@ The `Anime: *` styles work the best with Dreamshaper. When using the anime-speci
 
 You subject should be a few simple tokens like `girl, brunette, blue eyes, armor, nebula, celestial`. Experiment with `Clip Skip` and `Karras`. Finish with the `Perfection Style` LoRA on a moderate setting and upscale. 
 
-## Scale
+### Scale
 
 Rescale up to 4x using [Real-ESRGAN](https://github.com/xinntao/Real-ESRGAN) with weights from [ai-forever](ai-forever/Real-ESRGAN). Necessary for high-resolution images.
 
-## Image-to-Image
+### Image-to-Image
 
 The `🖼️ Image` tab enables the image-to-image and IP-Adapter pipelines.
 
-### Strength
+#### Strength
 
-Denoising strength is essentially how much the generation will differ from the input image. A value of `0` will be identical to the original, while `1` will be a completely new image. You may want to also increase the number of inference steps. Only applies to the image-to-image input.
+Initial image strength (known as _denoising strength_) is essentially how much the generation will differ from the input image. A value of `0` will be identical to the original, while `1` will be a completely new image. You may want to also increase the number of inference steps.
 
-### IP-Adapter
+> 💡 Denoising strength only applies to the `Initial Image` input; it doesn't affect ControlNet or IP-Adapter.
 
-In an image-to-image pipeline, the input image is used as the initial latent. With [IP-Adapter](https://github.com/tencent-ailab/IP-Adapter), the input image is processed by a separate image encoder and the encoded features are used as conditioning along with the text prompt.
-
-For capturing faces, enable `IP-Adapter Face` to use the full-face model. You should use an input image that is mostly a face and it should be high quality. You can generate fake portraits with Realistic Vision to experiment. Note that you'll never get true identity preservation without an advanced pipeline like [InstantID](https://github.com/instantX-research/InstantID), which combines many techniques.
+#### ControlNet
 
-## ControlNet
+In [ControlNet](https://github.com/lllyasviel/ControlNet), the input image is used to get a feature map from an _annotator_. These are computer vision models used for tasks like edge detection and pose estimation. ControlNet models are trained to understand these feature maps. Read the [Diffusers docs](https://huggingface.co/docs/diffusers/using-diffusers/controlnet) to learn more.
 
-The `🎮 Control` tab enables the [ControlNet](https://github.com/lllyasviel/ControlNet) pipelines. Read the [Diffusers docs](https://huggingface.co/docs/diffusers/using-diffusers/controlnet) to learn more.
+Currently, the only annotator available is [Canny](https://huggingface.co/lllyasviel/control_v11p_sd15_canny) (edge detection).
 
-### Annotators
+#### IP-Adapter
 
-In ControlNet, the input image is a feature map produced by an _annotator_. These are computer vision models used for tasks like edge detection and pose estimation. ControlNet models are trained to understand these feature maps.
+In an image-to-image pipeline, the input image is used as the initial latent. With [IP-Adapter](https://github.com/tencent-ailab/IP-Adapter), the input image is processed by a separate image encoder and the encoded features are used as conditioning along with the text prompt.
 
-> NB: Control images will be automatically resized to the nearest multiple of 64 (e.g., 513 -> 512).
+For capturing faces, enable `IP-Adapter Face` to use the full-face model. You should use an input image that is mostly a face and it should be high quality. You can generate fake portraits with Realistic Vision to experiment.
 
-## Advanced
+### Advanced
 
-### DeepCache
+#### DeepCache
 
 [DeepCache](https://github.com/horseee/DeepCache) caches lower UNet layers and reuses them every `Interval` steps. Trade quality for speed:
 * `1`: no caching (default)
@@ -111,14 +109,14 @@ In ControlNet, the input image is a feature map produced by an _annotator_. Thes
 * `3`: balanced
 * `4`: more speed
 
-### FreeU
+#### FreeU
 
 [FreeU](https://github.com/ChenyangSi/FreeU) re-weights the contributions sourced from the UNet’s skip connections and backbone feature maps. Can sometimes improve image quality.
 
-### Clip Skip
+#### Clip Skip
 
 When enabled, the last CLIP layer is skipped. Can sometimes improve image quality.
 
-### Tiny VAE
+#### Tiny VAE
 
 Enable [madebyollin/taesd](https://github.com/madebyollin/taesd) for near-instant latent decoding with a minor loss in detail. Useful for development.

app.css

@@ -67,24 +67,6 @@
 #intro > div > svg:is(.dark *) {
   fill: #10b981 !important;
 }
-#intro nav {
-  display: flex;
-  column-gap: 0.5rem;
-}
-#intro nav a, #intro nav span {
-  white-space: nowrap;
-  font-family: monospace;
-}
-#intro nav span {
-  font-weight: 500;
-  color: var(--body-text-color);
-}
-#intro nav a {
-  color: var(--body-text-color-subdued);
-}
-#intro nav a:hover {
-  color: var(--body-text-color);
-}
 
 .popover {
   position: relative;
@@ -117,6 +99,11 @@
   content: var(--seed, "-1");
 }
 
+#settings h3 {
+  color: var(--block-title-text-color) !important;
+  margin-top: 8px !important;
+}
+
 .tabs, .tabitem, .tab-nav, .tab-nav > .selected {
   border-width: 0px;
 }

app.py

@@ -15,7 +15,16 @@ from lib import (
     read_file,
 )
 
-# the CSS `content` attribute expects a string so we need to wrap the number in quotes
+# Update refresh button hover text
+seed_js = """
+(seed) => {
+    const button = document.getElementById("refresh");
+    button.style.setProperty("--seed", `"${seed}"`);
+    return seed;
+}
+"""
+
+# The CSS `content` attribute expects a string so we need to wrap the number in quotes
 refresh_seed_js = """
 () => {
     const n = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER);
@@ -25,14 +34,7 @@ refresh_seed_js = """
 }
 """
 
-seed_js = """
-(seed) => {
-    const button = document.getElementById("refresh");
-    button.style.setProperty("--seed", `"${seed}"`);
-    return seed;
-}
-"""
-
+# Update width and height on aspect ratio change
 aspect_ratio_js = """
 (ar, w, h) => {
     if (!ar) return [w, h];
@@ -42,46 +44,27 @@ aspect_ratio_js = """
 """
 
 
-def image_prompt_fn(images, locked=False):
-    if locked:
-        return gr.Dropdown(
-            choices=[("🔒", -2)],
-            interactive=False,
-            value=-2,
-        )
-    else:
-        return gr.Dropdown(
-            choices=[("None", -1)] + [(str(i + 1), i) for i, _ in enumerate(images or [])],
-            interactive=True,
-            value=-1,
-        )
-
-
-async def gallery_fn(images, image, control_image, ip_image):
-    return (
-        image_prompt_fn(images, locked=image is not None),
-        image_prompt_fn(images, locked=control_image is not None),
-        image_prompt_fn(images, locked=ip_image is not None),
-    )
-
-
-# Handle selecting an image from the gallery:
-# * -2 is the lock icon
-# * -1 is None
-async def image_select_fn(images, image, i):
-    if i == -2:
-        return gr.Image(image)
-    if i == -1:
-        return gr.Image(None)
-    return gr.Image(images[i][0]) if i > -1 else None
+# Show "Custom" aspect ratio when manually changing width or height, or one of the predefined ones
+custom_aspect_ratio_js = """
+(w, h) => {
+    if (w === 384 && h === 672) return "384,672";
+    if (w === 448 && h === 576) return "448,576";
+    if (w === 512 && h === 512) return "512,512"; 
+    if (w === 576 && h === 448) return "576,448";
+    if (w === 672 && h === 384) return "672,384";
+    return null;
+}
+"""
 
 
+# Random prompt function
 async def random_fn():
     prompts = read_file("data/prompts.json")
     prompts = json.loads(prompts)
     return gr.Textbox(value=random.choice(prompts))
 
 
+# Transform the raw inputs before generation
 async def generate_fn(*args, progress=gr.Progress(track_tqdm=True)):
     if len(args) > 0:
         prompt = args[0]
@@ -90,11 +73,11 @@ async def generate_fn(*args, progress=gr.Progress(track_tqdm=True)):
     if prompt is None or prompt.strip() == "":
         raise gr.Error("You must enter a prompt")
 
-    # always the last arguments
+    # These are always the last arguments
     DISABLE_IMAGE_PROMPT, DISABLE_CONTROL_IMAGE_PROMPT, DISABLE_IP_IMAGE_PROMPT = args[-3:]
     gen_args = list(args[:-3])
 
-    # the first two arguments are the prompt and negative prompt
+    # First two arguments are the prompt and negative prompt
     if DISABLE_IMAGE_PROMPT:
         gen_args[2] = None
     if DISABLE_CONTROL_IMAGE_PROMPT:
@@ -106,7 +89,7 @@ async def generate_fn(*args, progress=gr.Progress(track_tqdm=True)):
         if Config.ZERO_GPU:
             progress((0, 100), desc="ZeroGPU init")
 
-        # the remaining arguments are the alert handlers and progress bar
+        # Remaining arguments are the alert handlers and progress bar
         images = await async_call(
             generate,
             *gen_args,
@@ -144,7 +127,7 @@ with gr.Blocks(
         block_background_fill_dark=gr.themes.colors.gray.c900,
     ),
 ) as demo:
-    # override image inputs without clearing them
+    # Disable image inputs without clearing them
     DISABLE_IMAGE_PROMPT = gr.State(False)
     DISABLE_IP_IMAGE_PROMPT = gr.State(False)
     DISABLE_CONTROL_IMAGE_PROMPT = gr.State(False)
@@ -152,7 +135,7 @@ with gr.Blocks(
     gr.HTML(read_file("./partials/intro.html"))
 
     with gr.Tabs():
-        with gr.TabItem("🏠 Text"):
+        with gr.TabItem("🏠 Home"):
             with gr.Column():
                 output_images = gr.Gallery(
                     elem_classes=["gallery"],
@@ -172,8 +155,6 @@ with gr.Blocks(
                     max_lines=3,
                     lines=3,
                 )
-
-                # Buttons
                 with gr.Row():
                     generate_btn = gr.Button("Generate", variant="primary")
                     random_btn = gr.Button(
@@ -199,8 +180,187 @@ with gr.Blocks(
                         value="🗑️",
                     )
 
-        # img2img tab
-        with gr.TabItem("🖼️ Image"):
+        with gr.TabItem("⚙️ Settings", elem_id="settings"):
+            # Prompt settings
+            gr.HTML("<h3>Prompt</h3>")
+            with gr.Row():
+                negative_prompt = gr.Textbox(
+                    label="Negative Prompt",
+                    value="nsfw+",
+                    lines=1,
+                )
+                styles = json.loads(read_file("data/styles.json"))
+                style_ids = list(styles.keys())
+                style_ids = [sid for sid in style_ids if not sid.startswith("_")]
+                style = gr.Dropdown(
+                    value=Config.STYLE,
+                    label="Style Template",
+                    choices=[("None", "none")] + [(styles[sid]["name"], sid) for sid in style_ids],
+                )
+
+            # Model settings
+            gr.HTML("<h3>Model</h3>")
+            with gr.Row():
+                model = gr.Dropdown(
+                    choices=Config.MODELS,
+                    value=Config.MODEL,
+                    filterable=False,
+                    label="Checkpoint",
+                    min_width=240,
+                )
+                scheduler = gr.Dropdown(
+                    choices=Config.SCHEDULERS.keys(),
+                    value=Config.SCHEDULER,
+                    elem_id="scheduler",
+                    label="Scheduler",
+                    filterable=False,
+                )
+            with gr.Row():
+                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():
+                with gr.Group(elem_classes=["gap-0"]):
+                    lora_1 = gr.Dropdown(
+                        min_width=240,
+                        label="LoRA #1",
+                        value="none",
+                        choices=[("None", "none")]
+                        + [
+                            (lora["name"], lora_id) for lora_id, lora in Config.CIVIT_LORAS.items()
+                        ],
+                    )
+                    lora_1_weight = gr.Slider(
+                        value=0.0,
+                        minimum=0.0,
+                        maximum=1.0,
+                        step=0.1,
+                        show_label=False,
+                    )
+                with gr.Group(elem_classes=["gap-0"]):
+                    lora_2 = gr.Dropdown(
+                        min_width=240,
+                        label="LoRA #2",
+                        value="none",
+                        choices=[("None", "none")]
+                        + [
+                            (lora["name"], lora_id) for lora_id, lora in Config.CIVIT_LORAS.items()
+                        ],
+                    )
+                    lora_2_weight = gr.Slider(
+                        value=0.0,
+                        minimum=0.0,
+                        maximum=1.0,
+                        step=0.1,
+                        show_label=False,
+                    )
+
+            # Generation settings
+            gr.HTML("<h3>Generation</h3>")
+            with gr.Row():
+                guidance_scale = gr.Slider(
+                    value=Config.GUIDANCE_SCALE,
+                    label="Guidance Scale",
+                    minimum=1.0,
+                    maximum=15.0,
+                    step=0.1,
+                )
+                inference_steps = gr.Slider(
+                    value=Config.INFERENCE_STEPS,
+                    label="Inference Steps",
+                    minimum=1,
+                    maximum=50,
+                    step=1,
+                )
+                deepcache_interval = gr.Slider(
+                    value=Config.DEEPCACHE_INTERVAL,
+                    label="DeepCache",
+                    minimum=1,
+                    maximum=4,
+                    step=1,
+                )
+            with gr.Row():
+                width = gr.Slider(
+                    value=Config.WIDTH,
+                    label="Width",
+                    minimum=256,
+                    maximum=768,
+                    step=32,
+                )
+                height = gr.Slider(
+                    value=Config.HEIGHT,
+                    label="Height",
+                    minimum=256,
+                    maximum=768,
+                    step=32,
+                )
+                aspect_ratio = gr.Dropdown(
+                    value=f"{Config.WIDTH},{Config.HEIGHT}",
+                    label="Aspect Ratio",
+                    filterable=False,
+                    choices=[
+                        ("Custom", None),
+                        ("4:7 (384x672)", "384,672"),
+                        ("7:9 (448x576)", "448,576"),
+                        ("1:1 (512x512)", "512,512"),
+                        ("9:7 (576x448)", "576,448"),
+                        ("7:4 (672x384)", "672,384"),
+                    ],
+                )
+            with gr.Row():
+                file_format = gr.Dropdown(
+                    choices=["png", "jpeg", "webp"],
+                    label="File Format",
+                    filterable=False,
+                    value="png",
+                )
+                num_images = gr.Dropdown(
+                    choices=list(range(1, 5)),
+                    value=Config.NUM_IMAGES,
+                    filterable=False,
+                    label="Images",
+                )
+                scale = gr.Dropdown(
+                    choices=[(f"{s}x", s) for s in Config.SCALES],
+                    filterable=False,
+                    value=Config.SCALE,
+                    label="Scale",
+                )
+                seed = gr.Number(
+                    value=Config.SEED,
+                    label="Seed",
+                    minimum=-1,
+                    maximum=(2**64) - 1,
+                )
+            with gr.Row():
+                use_karras = gr.Checkbox(
+                    elem_classes=["checkbox"],
+                    label="Karras σ",
+                    value=True,
+                )
+                use_taesd = gr.Checkbox(
+                    elem_classes=["checkbox"],
+                    label="Tiny VAE",
+                    value=False,
+                )
+                use_freeu = gr.Checkbox(
+                    elem_classes=["checkbox"],
+                    label="FreeU",
+                    value=False,
+                )
+                use_clip_skip = gr.Checkbox(
+                    elem_classes=["checkbox"],
+                    label="Clip skip",
+                    value=False,
+                )
+
+            # Image-to-Image settings
+            gr.HTML("<h3>Image-to-Image</h3>")
             with gr.Row():
                 image_prompt = gr.Image(
                     show_share_button=False,
@@ -224,36 +384,6 @@ with gr.Blocks(
                     format="png",
                     type="pil",
                 )
-
-            with gr.Row():
-                image_select = gr.Dropdown(
-                    info="Use a gallery image for initial latents",
-                    choices=[("None", -1)],
-                    label="Initial Image",
-                    interactive=True,
-                    filterable=False,
-                    min_width=100,
-                    value=-1,
-                )
-                control_image_select = gr.Dropdown(
-                    info="Use a gallery image for ControlNet",
-                    label="ControlNet Image",
-                    choices=[("None", -1)],
-                    interactive=True,
-                    filterable=False,
-                    min_width=100,
-                    value=-1,
-                )
-                ip_image_select = gr.Dropdown(
-                    info="Use a gallery image for IP-Adapter",
-                    label="IP-Adapter Image",
-                    choices=[("None", -1)],
-                    interactive=True,
-                    filterable=False,
-                    min_width=100,
-                    value=-1,
-                )
-
             with gr.Row():
                 denoising_strength = gr.Slider(
                     label="Initial Image Strength",
@@ -269,7 +399,6 @@ with gr.Blocks(
                     value=Config.ANNOTATOR,
                     filterable=False,
                 )
-
             with gr.Row():
                 disable_image = gr.Checkbox(
                     label="Disable Initial Image",
@@ -292,202 +421,19 @@ with gr.Blocks(
                     value=False,
                 )
 
-        with gr.TabItem("⚙️ Menu"):
-            with gr.Group():
-                negative_prompt = gr.Textbox(
-                    label="Negative Prompt",
-                    value="nsfw+",
-                    lines=2,
-                )
-
-                with gr.Row():
-                    model = gr.Dropdown(
-                        choices=Config.MODELS,
-                        value=Config.MODEL,
-                        filterable=False,
-                        label="Model",
-                        min_width=240,
-                    )
-                    scheduler = gr.Dropdown(
-                        choices=Config.SCHEDULERS.keys(),
-                        value=Config.SCHEDULER,
-                        elem_id="scheduler",
-                        label="Scheduler",
-                        filterable=False,
-                    )
-
-                with gr.Row():
-                    styles = json.loads(read_file("data/styles.json"))
-                    style_ids = list(styles.keys())
-                    style_ids = [sid for sid in style_ids if not sid.startswith("_")]
-                    style = gr.Dropdown(
-                        value=Config.STYLE,
-                        label="Style",
-                        min_width=240,
-                        choices=[("None", "none")]
-                        + [(styles[sid]["name"], sid) for sid in style_ids],
-                    )
-                    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():
-                    with gr.Group(elem_classes=["gap-0"]):
-                        lora_1 = gr.Dropdown(
-                            min_width=240,
-                            label="LoRA #1",
-                            value="none",
-                            choices=[("None", "none")]
-                            + [
-                                (lora["name"], lora_id)
-                                for lora_id, lora in Config.CIVIT_LORAS.items()
-                            ],
-                        )
-                        lora_1_weight = gr.Slider(
-                            value=0.0,
-                            minimum=0.0,
-                            maximum=1.0,
-                            step=0.1,
-                            show_label=False,
-                        )
-                    with gr.Group(elem_classes=["gap-0"]):
-                        lora_2 = gr.Dropdown(
-                            min_width=240,
-                            label="LoRA #2",
-                            value="none",
-                            choices=[("None", "none")]
-                            + [
-                                (lora["name"], lora_id)
-                                for lora_id, lora in Config.CIVIT_LORAS.items()
-                            ],
-                        )
-                        lora_2_weight = gr.Slider(
-                            value=0.0,
-                            minimum=0.0,
-                            maximum=1.0,
-                            step=0.1,
-                            show_label=False,
-                        )
-
-                with gr.Row():
-                    guidance_scale = gr.Slider(
-                        value=Config.GUIDANCE_SCALE,
-                        label="Guidance Scale",
-                        minimum=1.0,
-                        maximum=15.0,
-                        step=0.1,
-                    )
-                    inference_steps = gr.Slider(
-                        value=Config.INFERENCE_STEPS,
-                        label="Inference Steps",
-                        minimum=1,
-                        maximum=50,
-                        step=1,
-                    )
-                    deepcache_interval = gr.Slider(
-                        value=Config.DEEPCACHE_INTERVAL,
-                        label="DeepCache",
-                        minimum=1,
-                        maximum=4,
-                        step=1,
-                    )
-
-                with gr.Row():
-                    width = gr.Slider(
-                        value=Config.WIDTH,
-                        label="Width",
-                        minimum=256,
-                        maximum=768,
-                        step=32,
-                    )
-                    height = gr.Slider(
-                        value=Config.HEIGHT,
-                        label="Height",
-                        minimum=256,
-                        maximum=768,
-                        step=32,
-                    )
-                    aspect_ratio = gr.Dropdown(
-                        value=f"{Config.WIDTH},{Config.HEIGHT}",
-                        label="Aspect Ratio",
-                        filterable=False,
-                        choices=[
-                            ("Custom", None),
-                            ("4:7 (384x672)", "384,672"),
-                            ("7:9 (448x576)", "448,576"),
-                            ("1:1 (512x512)", "512,512"),
-                            ("9:7 (576x448)", "576,448"),
-                            ("7:4 (672x384)", "672,384"),
-                        ],
-                    )
-
-                with gr.Row():
-                    file_format = gr.Dropdown(
-                        choices=["png", "jpeg", "webp"],
-                        label="File Format",
-                        filterable=False,
-                        value="png",
-                    )
-                    num_images = gr.Dropdown(
-                        choices=list(range(1, 5)),
-                        value=Config.NUM_IMAGES,
-                        filterable=False,
-                        label="Images",
-                    )
-                    scale = gr.Dropdown(
-                        choices=[(f"{s}x", s) for s in Config.SCALES],
-                        filterable=False,
-                        value=Config.SCALE,
-                        label="Scale",
-                    )
-                    seed = gr.Number(
-                        value=Config.SEED,
-                        label="Seed",
-                        minimum=-1,
-                        maximum=(2**64) - 1,
-                    )
-
-                with gr.Row():
-                    use_karras = gr.Checkbox(
-                        elem_classes=["checkbox"],
-                        label="Karras σ",
-                        value=True,
-                    )
-                    use_taesd = gr.Checkbox(
-                        elem_classes=["checkbox"],
-                        label="Tiny VAE",
-                        value=False,
-                    )
-                    use_freeu = gr.Checkbox(
-                        elem_classes=["checkbox"],
-                        label="FreeU",
-                        value=False,
-                    )
-                    use_clip_skip = gr.Checkbox(
-                        elem_classes=["checkbox"],
-                        label="Clip skip",
-                        value=False,
-                    )
+        with gr.TabItem("ℹ️ Info"):
+            gr.Markdown(read_file("DOCS.md"))
 
+    # Random prompt on click
     random_btn.click(random_fn, inputs=[], outputs=[prompt], show_api=False)
 
+    # Update seed on click
     refresh_btn.click(None, inputs=[], outputs=[seed], js=refresh_seed_js)
 
+    # Update seed button hover text
     seed.change(None, inputs=[seed], outputs=[], js=seed_js)
 
-    # input events are only user input; change events are both user and programmatic
-    aspect_ratio.input(
-        None,
-        inputs=[aspect_ratio, width, height],
-        outputs=[width, height],
-        js=aspect_ratio_js,
-    )
-
+    # Update image prompts file format
     file_format.change(
         lambda f: (
             gr.Gallery(format=f),
@@ -500,76 +446,32 @@ with gr.Blocks(
         show_api=False,
     )
 
-    # lock the input images so you don't lose them when the gallery updates
-    output_images.change(
-        gallery_fn,
-        inputs=[output_images, image_prompt, control_image_prompt, ip_image_prompt],
-        outputs=[image_select, control_image_select, ip_image_select],
-        show_api=False,
-    )
-
-    # show the selected image in the image input
-    image_select.change(
-        image_select_fn,
-        inputs=[output_images, image_prompt, image_select],
-        outputs=[image_prompt],
-        show_api=False,
-    )
-    control_image_select.change(
-        image_select_fn,
-        inputs=[output_images, control_image_prompt, control_image_select],
-        outputs=[control_image_prompt],
-        show_api=False,
-    )
-    ip_image_select.change(
-        image_select_fn,
-        inputs=[output_images, ip_image_prompt, ip_image_select],
-        outputs=[ip_image_prompt],
-        show_api=False,
-    )
-
-    # reset the dropdown on clear
-    image_prompt.clear(
-        image_prompt_fn,
-        inputs=[output_images],
-        outputs=[image_select],
-        show_api=False,
-    )
-    control_image_prompt.clear(
-        image_prompt_fn,
-        inputs=[output_images],
-        outputs=[control_image_select],
-        show_api=False,
-    )
-    ip_image_prompt.clear(
-        image_prompt_fn,
-        inputs=[output_images],
-        outputs=[ip_image_select],
-        show_api=False,
+    # Update width and height on aspect ratio change
+    aspect_ratio.input(
+        None,
+        inputs=[aspect_ratio, width, height],
+        outputs=[width, height],
+        js=aspect_ratio_js,
     )
 
-    # show "Custom" aspect ratio when manually changing width or height
+    # Show "Custom" aspect ratio when manually changing width or height
     gr.on(
         triggers=[width.input, height.input],
         fn=None,
-        inputs=[],
+        inputs=[width, height],
         outputs=[aspect_ratio],
-        js="() => { return null; }",
+        js=custom_aspect_ratio_js,
     )
 
-    # toggle image prompts by updating session state
+    # Toggle image prompts by updating session state
     gr.on(
         triggers=[disable_image.input, disable_control_image.input, disable_ip_image.input],
-        fn=lambda disable_image, disable_control_image, disable_ip_image: (
-            disable_image,
-            disable_control_image,
-            disable_ip_image,
-        ),
+        fn=lambda image, control_image, ip_image: (image, control_image, ip_image),
         inputs=[disable_image, disable_control_image, disable_ip_image],
         outputs=[DISABLE_IMAGE_PROMPT, DISABLE_CONTROL_IMAGE_PROMPT, DISABLE_IP_IMAGE_PROMPT],
     )
 
-    # generate images
+    # Generate images
     gr.on(
         triggers=[generate_btn.click, prompt.submit],
         fn=generate_fn,

partials/intro.html

@@ -7,18 +7,7 @@
       <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>
-  <div>
-    <nav>
-      <span>1.5</span>
-      <a href="https://huggingface.co/spaces/adamelliotfields/diffusion-xl" target="_blank" rel="noopener noreferrer">XL</a>
-      <a href="https://huggingface.co/spaces/adamelliotfields/diffusion-flux" target="_blank" rel="noopener noreferrer">FLUX.1</a>
-      <a href="https://huggingface.co/spaces/adamelliotfields/diffusion/blob/main/DOCS.md" target="_blank" rel="noopener noreferrer">Docs</a>
-      <a href="https://adamelliotfields-diffusion.hf.space" target="_blank" rel="noopener noreferrer">
-        <svg style="display: inline-block" width="16px" height="16px" viewBox="0 0 12 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet">
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 1.75H9.75C9.88807 1.75 10 1.86193 10 2V4.25C10 4.38807 9.88807 4.5 9.75 4.5C9.61193 4.5 9.5 4.38807 9.5 4.25V2.60355L6.42678 5.67678C6.32915 5.77441 6.17085 5.77441 6.07322 5.67678C5.97559 5.57915 5.97559 5.42085 6.07322 5.32322L9.14645 2.25H7.5C7.36193 2.25 7.25 2.13807 7.25 2C7.25 1.86193 7.36193 1.75 7.5 1.75Z" fill="currentColor"></path>
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M6 2.5C6 2.22386 5.77614 2 5.5 2H2.69388C2.50985 2 2.33336 2.07311 2.20323 2.20323C2.0731 2.33336 2 2.50986 2 2.69389V8.93885C2 9.12288 2.0731 9.29933 2.20323 9.42953C2.33336 9.55963 2.50985 9.63273 2.69388 9.63273H8.93884C9.12287 9.63273 9.29941 9.55963 9.42951 9.42953C9.55961 9.29933 9.63271 9.12288 9.63271 8.93885V6.5C9.63271 6.22386 9.40885 6 9.13271 6C8.85657 6 8.63271 6.22386 8.63271 6.5V8.63273H3V3H5.5C5.77614 3 6 2.77614 6 2.5Z" fill="currentColor" fill-opacity="0.3"></path>
-        </svg>
-      </a>
-    </nav>
-  </div>
+  <p>
+    Stable Diffusion on ZeroGPU.
+  </p>
 </div>