new-ui (#2)

- Update UI (8caa43f5888e91e2d77ebec0eab2a48bd1c91bac)


Co-authored-by: Multimodal AI art <[email protected]>

app.py

@@ -39,9 +39,9 @@ class Model:
 
 
 models = [
-    Model("Stable Diffusion v1-4", "CompVis/stable-diffusion-v1-4"),
+    #Model("Stable Diffusion v1-4", "CompVis/stable-diffusion-v1-4"),
     # Model("Stable Diffusion v1-5", "runwayml/stable-diffusion-v1-5"),
-    # Model("anything-v4.0", "andite/anything-v4.0"),
+    Model("anything-v4.0", "andite/anything-v4.0"),
 ]
 
 MODELS = {m.name: m for m in models}
@@ -59,12 +59,12 @@ def error_str(error, title="Error"):
 
 
 def inference(
-    model_name,
     prompt,
+    neg_prompt,
     guidance,
     steps,
-    seed=0,
-    neg_prompt="",
+    seed,
+    model_name,
 ):
 
     print(psutil.virtual_memory())  # print memory usage
@@ -141,52 +141,61 @@ with gr.Blocks(css="style.css") as demo:
     gr.HTML(
         f"""
             <div class="finetuned-diffusion-div">
-              <div>
-                <h1>Stable Diffusion Latent Upscaler</h1>
+              <div style="text-align: center">
+                <h1>Anything v4 model + <a href="https://huggingface.co/stabilityai/sd-x2-latent-upscaler">Stable Diffusion Latent Upscaler</a></h1>
+                <p>
+                   Demo for the <a href="https://huggingface.co/andite/anything-v4.0">Anything v4</a> model hooked with the ultra-fast <a href="https://huggingface.co/stabilityai/sd-x2-latent-upscaler">Latent Upscaler</a>
+                  </p>
               </div>
-              <p>
-               Demo for <a href="https://huggingface.co/stabilityai/sd-x2-latent-upscaler">Latent Diffusion Upscaling</a>
-              </p>
-              <p>
-               Running on <b>{device}</b>
-              </p>
-              <p>You can also duplicate this space and upgrade to gpu by going to settings:<br>
+              <!-- 
+              <p>To skip the queue, you can duplicate this Space<br>
               <a style="display:inline-block" href="https://huggingface.co/spaces/patrickvonplaten/finetuned_diffusion?duplicate=true"><img src="https://img.shields.io/badge/-Duplicate%20Space-blue?labelColor=white&style=flat&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAP5JREFUOE+lk7FqAkEURY+ltunEgFXS2sZGIbXfEPdLlnxJyDdYB62sbbUKpLbVNhyYFzbrrA74YJlh9r079973psed0cvUD4A+4HoCjsA85X0Dfn/RBLBgBDxnQPfAEJgBY+A9gALA4tcbamSzS4xq4FOQAJgCDwV2CPKV8tZAJcAjMMkUe1vX+U+SMhfAJEHasQIWmXNN3abzDwHUrgcRGmYcgKe0bxrblHEB4E/pndMazNpSZGcsZdBlYJcEL9Afo75molJyM2FxmPgmgPqlWNLGfwZGG6UiyEvLzHYDmoPkDDiNm9JR9uboiONcBXrpY1qmgs21x1QwyZcpvxt9NS09PlsPAAAAAElFTkSuQmCC&logoWidth=14" alt="Duplicate Space"></a></p>
+              -->
             </div>
         """
     )
-    with gr.Row():
 
-        with gr.Column(scale=55):
-            with gr.Group():
+    with gr.Column(scale=100):
+        with gr.Group(visible=False):
                 model_name = gr.Dropdown(
                     label="Model",
                     choices=[m.name for m in models],
                     value=models[0].name,
+                    visible=False
                 )
 
-                with gr.Row():
-                    prompt = gr.Textbox(
-                        label="Prompt",
-                        show_label=False,
-                        max_lines=2,
-                        placeholder="Enter prompt.",
-                    ).style(container=False)
-                    generate = gr.Button(value="Generate").style(
-                        rounded=(False, True, True, False)
+        with gr.Row(elem_id="prompt-container").style(mobile_collapse=False, equal_height=True):
+                    with gr.Column():
+                        prompt = gr.Textbox(
+                            label="Enter your prompt",
+                            show_label=False,
+                            max_lines=1,
+                            placeholder="Enter your prompt",
+                            elem_id="prompt-text-input",
+                        ).style(
+                            border=(True, False, True, True),
+                            rounded=(True, False, False, True),
+                            container=False,
+                        )
+                        neg_prompt = gr.Textbox(
+                            label="Enter your negative prompt",
+                            show_label=False,
+                            max_lines=1,
+                            placeholder="Enter a negative prompt",
+                            elem_id="negative-prompt-text-input",
+                        ).style(
+                            border=(True, False, True, True),
+                            rounded=(True, False, False, True),
+                            container=False,
+                        )
+                    generate = gr.Button("Generate image").style(
+                        margin=False,
+                        rounded=(False, True, True, False),
+                        full_width=False,
                     )
-
-            low_res_image = gr.Image(label="512px Image", shape=(512, 512))
-            error_output = gr.Markdown()
-
-        with gr.Column(scale=45):
-            with gr.Tab("Options"):
+            
+        with gr.Accordion("Advanced Options", open=False):
                 with gr.Group():
-                    neg_prompt = gr.Textbox(
-                        label="Negative prompt",
-                        placeholder="What to exclude from the image",
-                    )
-
                     with gr.Row():
                         guidance = gr.Slider(
                             label="Guidance scale", value=7.5, maximum=15
@@ -202,36 +211,45 @@ with gr.Blocks(css="style.css") as demo:
                     seed = gr.Slider(
                         0, 2147483647, label="Seed (0 = random)", value=0, step=1
                     )
+            
 
-            up_res_image = gr.Image(label="1024px Image", shape=(1024, 1024))
+    with gr.Column(scale=100):
+        with gr.Row():
+            with gr.Column(scale=75):
+                up_res_image = gr.Image(label="Upscaled 1024px Image", shape=(1024, 1024))
+            with gr.Column(scale=25):
+                low_res_image = gr.Image(label="Original 512px Image", shape=(512, 512))
+        error_output = gr.Markdown()
 
     inputs = [
-        model_name,
         prompt,
+        neg_prompt,
         guidance,
         steps,
         seed,
-        neg_prompt,
+        model_name,
     ]
     outputs = [low_res_image, up_res_image, error_output]
     prompt.submit(inference, inputs=inputs, outputs=outputs)
     generate.click(inference, inputs=inputs, outputs=outputs)
 
-#    ex = gr.Examples(
-#        [
-#            [models[0].name, "a photo of an astronaut high resolution, unreal engine, ultra realistic", 7.5, 50, 33, ""]
-#        ],
-#        inputs=[model_name, prompt, guidance, steps, seed, neg_prompt],
-#        outputs=outputs,
-#        fn=inference,
-#        cache_examples=False,
-#    )
-
+    ex = gr.Examples(
+        [
+            ["a mecha robot in a favela", "low quality", 7.5, 25, 33, models[0].name],
+            ["the spirit of a tamagotchi wandering in the city of Paris", "low quality, bad render", 7.5, 50, 85, models[0].name],
+        ],
+        inputs=[prompt, neg_prompt, guidance, steps, seed, model_name],
+        outputs=outputs,
+        fn=inference,
+        cache_examples=True,
+    )
+    ex.dataset.headers = [""]
+    
     gr.HTML(
         """
     <div style="border-top: 1px solid #303030;">
       <br>
-      <p>Models by 🤗 Hugging Face and others. ❤️</p>
+      <p>Space by 🤗 Hugging Face, models by Stability AI, andite, linaqruf and others ❤️</p>
       <p>This space uses the <a href="https://github.com/LuChengTHU/dpm-solver">DPM-Solver++</a> sampler by <a href="https://arxiv.org/abs/2206.00927">Cheng Lu, et al.</a>.</p>
       <p>This is a Demo Space For:<br>
       <a href="https://huggingface.co/stabilityai/sd-x2-latent-upscaler">Stability AI's Latent Upscaler</a>

style.css

@@ -1,24 +1,36 @@
-.finetuned-diffusion-div div{
-    display:inline-flex;
-    align-items:center;
-    gap:.8rem;
-    font-size:1.75rem
+.container {
+    max-width: 960px
 }
-.finetuned-diffusion-div div h1{
-    font-weight:900;
-    margin-bottom:7px
+
+.finetuned-diffusion-div div {
+    align-items: center;
+    gap: .8rem;
+    font-size: 1.75rem
 }
-.finetuned-diffusion-div p{
-    margin-bottom:10px;
-    font-size:94%
+
+.finetuned-diffusion-div div h1 {
+    font-weight: 900;
+    margin-bottom: 7px
 }
-a{
-    text-decoration:underline
+
+.finetuned-diffusion-div div p {
+    font-size: 50%
 }
-.tabs{
-    margin-top:0;
-    margin-bottom:0
+
+.finetuned-diffusion-div p {
+    margin-bottom: 10px;
+    font-size: 94%
 }
-#gallery{
-    min-height:20rem
+
+a {
+    text-decoration: underline
 }
+
+.tabs {
+    margin-top: 0;
+    margin-bottom: 0
+}
+
+#gallery {
+    min-height: 20rem
+}