beautified the app

app.py

@@ -1,4 +1,4 @@
-from huggingface_hub import model_info, hf_hub_download
+from huggingface_hub import hf_hub_download, model_info
 import gradio as gr
 import json
 
@@ -54,11 +54,11 @@ def format_output(pipeline_id, memory_mapping, variant=None, controlnet_mapping=
         for component, memory in memory_mapping.items():
             markdown_str += f"* {component}: {format_size(memory)}\n"
     if controlnet_mapping:
-        markdown_str += "\n## ControlNet(s)\n"
+        markdown_str += f"\n## ControlNet(s) ({variant})\n"
         for controlnet_id, memory in controlnet_mapping.items():
             markdown_str += f"* {controlnet_id}: {format_size(memory)}\n"
     if t2i_adapter_mapping:
-        markdown_str += "\n## T2I-Adapters(s)\n"
+        markdown_str += f"\n## T2I-Adapters(s) ({variant})\n"
         for t2_adapter_id, memory in t2i_adapter_mapping.items():
             markdown_str += f"* {t2_adapter_id}: {format_size(memory)}\n"
 
@@ -202,49 +202,78 @@ def get_component_wise_memory(
     return format_output(pipeline_id, component_wise_memory, variant, controlnet_mapping, t2_adapter_mapping)
 
 
-with gr.Interface(
-    title="Compute component-wise memory of a 🧨 Diffusers pipeline.",
-    description="Pipelines containing text encoders with sharded checkpoints are also supported"
-    " (PixArt-Alpha, for example) 🤗 See instructions below the form on how to pass"
-    " `controlnet_id` or `t2_adapter_id`.",
-    article=ARTICLE,
-    fn=get_component_wise_memory,
-    inputs=[
-        gr.components.Textbox(lines=1, label="pipeline_id", info="Example: runwayml/stable-diffusion-v1-5"),
-        gr.components.Textbox(lines=1, label="controlnet_id", info="Example: lllyasviel/sd-controlnet-canny"),
-        gr.components.Textbox(lines=1, label="t2i_adapter_id", info="Example: TencentARC/t2iadapter_color_sd14v1"),
-        gr.components.Textbox(lines=1, label="hf_token", info="Pass this in case of private/gated repositories."),
-        gr.components.Radio(
-            ALLOWED_VARIANTS,
-            label="variant",
-            info="Precision to use for calculation.",
-        ),
-        gr.components.Textbox(lines=1, label="revision", info="Repository revision to use."),
-        gr.components.Radio(
-            [".bin", ".safetensors"],
-            label="extension",
-            info="Extension to use.",
-        ),
-    ],
-    outputs=[gr.Markdown(label="Output")],
-    examples=[
-        ["runwayml/stable-diffusion-v1-5", None, None, None, "fp32", None, ".safetensors"],
-        ["PixArt-alpha/PixArt-XL-2-1024-MS", None, None, None, "fp32", None, ".safetensors"],
-        ["runwayml/stable-diffusion-v1-5", "lllyasviel/sd-controlnet-canny", None, None, "fp32", None, ".safetensors"],
-        [
-            "stabilityai/stable-diffusion-xl-base-1.0",
-            None,
-            "TencentARC/t2i-adapter-lineart-sdxl-1.0,TencentARC/t2i-adapter-canny-sdxl-1.0",
-            None,
-            "fp16",
-            None,
-            ".safetensors",
-        ],
-        ["stabilityai/stable-cascade", None, None, None, "bf16", None, ".safetensors"],
-        ["Deci/DeciDiffusion-v2-0", None, None, None, "fp32", None, ".safetensors"],
-    ],
-    theme=gr.themes.Soft(),
-    allow_flagging="never",
-    cache_examples=False,
-) as demo:
-    demo.launch(show_error=True)
+with gr.Blocks(theme=gr.themes.Soft()) as demo:
+    with gr.Column():
+        gr.Markdown(
+            """<img src="https://huggingface.co/spaces/hf-accelerate/model-memory-usage/resolve/main/measure_model_size.png" style="float: left;" width="150" height="175"><h1>🧨 Diffusers Pipeline Memory Calculator</h1>
+    This tool will help you to gauge the memory requirements of a Diffusers pipeline. Pipelines containing text encoders with sharded checkpoints are also supported
+    (PixArt-Alpha, for example) 🤗 See instructions below the form on how to pass `controlnet_id` or `t2_adapter_id`. When performing inference, expect to add up to an
+    additional 20% to this as found by [EleutherAI](https://blog.eleuther.ai/transformer-math/). 
+    """
+        )
+        out_text = gr.Markdown()
+        with gr.Row():
+            pipeline_id = gr.Textbox(lines=1, label="pipeline_id", info="Example: runwayml/stable-diffusion-v1-5")
+        with gr.Row():
+            controlnet_id = gr.Textbox(lines=1, label="controlnet_id", info="Example: lllyasviel/sd-controlnet-canny")
+            t2i_adapter_id = gr.Textbox(
+                lines=1, label="t2i_adapter_id", info="Example: TencentARC/t2iadapter_color_sd14v1"
+            )
+        with gr.Row():
+            token = gr.Textbox(lines=1, label="hf_token", info="Pass this in case of private/gated repositories.")
+            variant = gr.Radio(
+                ALLOWED_VARIANTS,
+                label="variant",
+                info="Precision to use for calculation.",
+            )
+            revision = gr.Textbox(lines=1, label="revision", info="Repository revision to use.")
+            extension = gr.Radio(
+                [".bin", ".safetensors"],
+                label="extension",
+                info="Extension to use.",
+            )
+        with gr.Row():
+            btn = gr.Button("Calculate Memory Usage")
+
+        gr.Markdown("## Examples")
+        gr.Examples(
+            [
+                ["runwayml/stable-diffusion-v1-5", None, None, None, "fp32", None, ".safetensors"],
+                ["PixArt-alpha/PixArt-XL-2-1024-MS", None, None, None, "fp32", None, ".safetensors"],
+                [
+                    "runwayml/stable-diffusion-v1-5",
+                    "lllyasviel/sd-controlnet-canny",
+                    None,
+                    None,
+                    "fp32",
+                    None,
+                    ".safetensors",
+                ],
+                [
+                    "stabilityai/stable-diffusion-xl-base-1.0",
+                    None,
+                    "TencentARC/t2i-adapter-lineart-sdxl-1.0,TencentARC/t2i-adapter-canny-sdxl-1.0",
+                    None,
+                    "fp16",
+                    None,
+                    ".safetensors",
+                ],
+                ["stabilityai/stable-cascade", None, None, None, "bf16", None, ".safetensors"],
+                ["Deci/DeciDiffusion-v2-0", None, None, None, "fp32", None, ".safetensors"],
+            ],
+            [pipeline_id, controlnet_id, t2i_adapter_id, token, variant, revision, extension],
+            out_text,
+            get_component_wise_memory,
+            cache_examples=False,
+        )
+
+        gr.Markdown(ARTICLE)
+
+    btn.click(
+        get_component_wise_memory,
+        inputs=[pipeline_id, controlnet_id, t2i_adapter_id, token, variant, revision, extension],
+        outputs=[out_text],
+        api_name=False,
+    )
+
+demo.launch(show_error=True)