Upload app.py

app.py

@@ -30,11 +30,8 @@ def set_model(current_model):
     current_model = models[current_model]
     return gr.update(label=(f"{current_model}"))
 
-def send_it1(inputs, model_choice, neg_input, height, width, steps, cfg, seed): #negative_prompt,
-        #proc1 = models2[model_choice]
-        #output1 = proc1(inputs)
+def send_it1(inputs, model_choice, neg_input, height, width, steps, cfg, seed):
         output1 = gen_fn(model_choice, inputs, neg_input, height, width, steps, cfg, seed)
-        #negative_prompt=negative_prompt
         return (output1)
 
 # https://huggingface.co/docs/api-inference/detailed_parameters
@@ -84,63 +81,83 @@ def gen_fn(model_index, prompt, nprompt="", height=None, width=None, steps=None,
     return result
 
 css="""
-#container { max-width: 1200px; margin: 0 auto; !important; }
-.output { width=112px; height=112px; !important; }
-.gallery { width=100%; min_height=768px; !important; }
-.guide { text-align: center; !important; }
+.gradio-container {background-image: linear-gradient(#254150, #1e2f40, #182634) !important;
+ color: #ffaa66 !important; font-family: 'IBM Plex Sans', sans-serif !important;}
+h1 {font-size: 6em; color: #ffc99f; margin-top: 30px; margin-bottom: 30px;
+ text-shadow: 3px 3px 0 rgba(0, 0, 0, 1) !important;}
+h3 {color: #ffc99f; !important;}
+h4 {display: inline-block; color: #ffffff !important;}
+.wrapper img {font-size: 98% !important; white-space: nowrap !important; text-align: center !important;
+display: inline-block !important; color: #ffffff !important;}
+.wrapper {color: #ffffff !important;}
+.text-gray-500 {color: #ffc99f !important;}
+.gr-box {background-image: linear-gradient(#182634, #1e2f40, #254150) !important;
+ border-top-color: #000000 !important; border-right-color: #ffffff !important;
+ border-bottom-color: #ffffff !important; border-left-color: #000000 !important;}
+.gr-input {color: #ffc99f; !important; background-color: #254150 !important;}
+:root {--neutral-100: #000000 !important;}
+.gr-button {color: #ffffff !important; text-shadow: 1px 1px 0 rgba(0, 0, 0, 1) !important;
+background-image: linear-gradient(#76635a, #d2a489) !important; border-radius: 24px !important;
+border: solid 1px !important; border-top-color: #ffc99f !important; border-right-color: #000000 !important;
+border-bottom-color: #000000 !important; border-left-color: #ffc99f !important; padding: 6px 30px;}
+.gr-button:active {color: #ffc99f !important; font-size: 98% !important;
+text-shadow: 0px 0px 0 rgba(0, 0, 0, 1) !important; background-image: linear-gradient(#d2a489, #76635a) !important;
+border-top-color: #000000 !important; border-right-color: #ffffff !important;
+border-bottom-color: #ffffff !important; border-left-color: #000000 !important;}
+.gr-button:hover {filter: brightness(130%);}
 """
 
-with gr.Blocks(theme='Nymbo/Nymbo_Theme', fill_width=True, css=css) as myface:
-    gr.HTML("""
+with gr.Blocks(fill_width=True, css=css) as myface:
+    gr.HTML(f"""
      <div style="text-align: center; max-width: 1200px; margin: 0 auto;">
               <div>
                 <style>
-                    h1 {
+                    h1 {{
                     font-size: 6em;
                     color: #ffc99f;
                     margin-top: 30px;
                     margin-bottom: 30px;
                     text-shadow: 3px 3px 0 rgba(0, 0, 0, 1) !important;
-                   }
-                   h3 {
+                   }}
+                   h3 {{
                     color: #ffc99f; !important;
-                   }
-                   h4 {
+                   }}
+                   h4 {{
                     display: inline-block;
                     color: #ffffff !important;
-                   }
-                   .wrapper img {
+                   }}
+                   .wrapper img {{
                     font-size: 98% !important;
                     white-space: nowrap !important;
                     text-align: center !important;
                     display: inline-block !important;
                     color: #ffffff !important;
-                   }
-                   .wrapper {
+                   }}
+                   .wrapper {{
                     color: #ffffff !important;
-                   }
-                   .gradio-container {
+                   }}
+                   .gradio-container {{
                    background-image: linear-gradient(#254150, #1e2f40, #182634) !important;
                    color: #ffaa66 !important;
                    font-family: 'IBM Plex Sans', sans-serif !important;
-                   }
-                   .text-gray-500 {
+                   }}
+                   .text-gray-500 {{
                    color: #ffc99f !important;
-                   }
-                   .gr-box {
+                   }}
+                   .gr-box {{
     background-image: linear-gradient(#182634, #1e2f40, #254150) !important;
     border-top-color: #000000 !important;
     border-right-color: #ffffff !important;
     border-bottom-color: #ffffff !important;
     border-left-color: #000000 !important;
-                   }
-                   .gr-input {
+                   }}
+                   .gr-input {{
                    color: #ffc99f; !important;
                    background-color: #254150 !important;
-                   }
-                   :root {
+                   }}
+                   :root {{
     --neutral-100: #000000 !important;
-                   }
+                   }}
                 </style>
                 <body>
                 <div class="center"><h1>Blitz Diffusion</h1>
@@ -148,7 +165,7 @@ with gr.Blocks(theme='Nymbo/Nymbo_Theme', fill_width=True, css=css) as myface:
                 </body>
               </div>
               <p style="margin-bottom: 1px; color: #ffaa66;">
-              <h3>899 Stable Diffusion models, but why? For your enjoyment!</h3></p>
+              <h3>{int(len(models))} Stable Diffusion models, but why? For your enjoyment!</h3></p>
               <br><div class="wrapper">9.3 <img src="https://huggingface.co/Yntec/DucHaitenLofi/resolve/main/NEW.webp" alt="NEW!" style="width:32px;height:16px;">This has become a legacy backup copy of old <u><a href="https://huggingface.co/spaces/Yntec/ToyWorld">ToyWorld</a></u>'s UI! Newer models added dailty over there! 25 new models since last update!</div>
               <p style="margin-bottom: 1px; font-size: 98%">
               <br><h4>If a model is already loaded each new image takes less than <b>10</b> seconds to generate!</h4></p>
@@ -156,79 +173,48 @@ with gr.Blocks(theme='Nymbo/Nymbo_Theme', fill_width=True, css=css) as myface:
               <br><div class="wrapper">Generate 6 images from 1 prompt at the <u><a href="https://huggingface.co/spaces/Yntec/PrintingPress">PrintingPress</a></u>, and use 6 different models at <u><a href="https://huggingface.co/spaces/Yntec/diffusion80xx">Huggingface Diffusion!</a></u>!
         </p></p>
             </div>
-            """)
+            """, elem_classes="gr-box")
     with gr.Row():
         with gr.Column(scale=100):
-            #Model selection dropdown    
-            model_name1 = gr.Dropdown(label="Select Model", choices=[m for m in models], type="index", value=current_model, interactive=True)
+            #Model selection dropdown
+            model_name1 = gr.Dropdown(label="Select Model", choices=[m for m in models], type="index",
+                                      value=current_model, interactive=True, elem_classes=["gr-box", "gr-input"])
     with gr.Row():
         with gr.Column(scale=100):
             with gr.Group():
-                magic1 = gr.Textbox(label="Your Prompt", lines=4) #Positive
-                with gr.Accordion("Advanced", open=False, visible=True):
-                    neg_input = gr.Textbox(label='Negative prompt:', lines=1)
+                magic1 = gr.Textbox(label="Your Prompt", lines=4, elem_classes=["gr-box", "gr-input"]) #Positive
+                with gr.Accordion("Advanced", open=False, visible=True, elem_classes="gr-box"):
+                    neg_input = gr.Textbox(label='Negative prompt', lines=1, elem_classes=["gr-box", "gr-input"])
                     with gr.Row():
-                        width = gr.Slider(label="Width", info="If 0, the default value is used.", maximum=1216, step=32, value=0)
-                        height = gr.Slider(label="Height", info="If 0, the default value is used.", maximum=1216, step=32, value=0)
+                        width = gr.Slider(label="Width", info="If 0, the default value is used.", maximum=1216, step=32, value=0, elem_classes=["gr-box", "gr-input"])
+                        height = gr.Slider(label="Height", info="If 0, the default value is used.", maximum=1216, step=32, value=0, elem_classes=["gr-box", "gr-input"])
                     with gr.Row():
-                        steps = gr.Slider(label="Number of inference steps", info="If 0, the default value is used.", maximum=100, step=1, value=0)
-                        cfg = gr.Slider(label="Guidance scale", info="If 0, the default value is used.", maximum=30.0, step=0.1, value=0)
-                        seed = gr.Slider(label="Seed", info="Randomize Seed if -1.", minimum=-1, maximum=MAX_SEED, step=1, value=-1)
-        #with gr.Column(scale=100):
-            #negative_prompt=gr.Textbox(label="Negative Prompt", lines=1)
-            gr.HTML("""<style>           .gr-button {
-            color: #ffffff !important;
-            text-shadow: 1px 1px 0 rgba(0, 0, 0, 1) !important;
-            background-image: linear-gradient(#76635a, #d2a489) !important;
-            border-radius: 24px !important;
-            border: solid 1px !important;
-            border-top-color: #ffc99f !important;
-            border-right-color: #000000 !important;
-            border-bottom-color: #000000 !important;
-            border-left-color: #ffc99f !important;
-            padding: 6px 30px;
-}
-.gr-button:active {
-            color: #ffc99f !important;
-            font-size: 98% !important;
-            text-shadow: 0px 0px 0 rgba(0, 0, 0, 1) !important;
-            background-image: linear-gradient(#d2a489, #76635a) !important;
-            border-top-color: #000000 !important;
-            border-right-color: #ffffff !important;
-            border-bottom-color: #ffffff !important;
-            border-left-color: #000000 !important;
-}
-.gr-button:hover {
-  filter: brightness(130%);
-}
-</style>""")
-            run = gr.Button("Generate Image")
+                        steps = gr.Slider(label="Number of inference steps", info="If 0, the default value is used.", maximum=100, step=1, value=0, elem_classes=["gr-box", "gr-input"])
+                        cfg = gr.Slider(label="Guidance scale", info="If 0, the default value is used.", maximum=30.0, step=0.1, value=0, elem_classes=["gr-box", "gr-input"])
+                        seed = gr.Slider(label="Seed", info="Randomize Seed if -1.", minimum=-1, maximum=MAX_SEED, step=1, value=-1, elem_classes=["gr-box", "gr-input"])
+            run = gr.Button("Generate Image", elem_classes="gr-button")
+
     with gr.Row():
         with gr.Column():
-            output1 = gr.Image(label=(f"{current_model}"), show_download_button=True, elem_classes="output",
-                               interactive=False, show_share_button=False, format=".png")
+            output1 = gr.Image(label=(f"{current_model}"), show_download_button=True,
+                               interactive=False, show_share_button=False, format=".png", elem_classes="gr-box")
                 
     with gr.Row():
         with gr.Column(scale=50):
-            input_text=gr.Textbox(label="Use this box to extend an idea automagically, by typing some words and clicking Extend Idea", lines=2)
-            see_prompts=gr.Button("Extend Idea -> overwrite the contents of the `Your Prompt´ box above")
-            use_short=gr.Button("Copy the contents of this box to the `Your Prompt´ box above")
+            input_text=gr.Textbox(label="Use this box to extend an idea automagically, by typing some words and clicking Extend Idea", lines=2, elem_classes=["gr-box", "gr-input"])
+            see_prompts=gr.Button("Extend Idea -> overwrite the contents of the `Your Prompt´ box above", elem_classes="gr-button")
+            use_short=gr.Button("Copy the contents of this box to the `Your Prompt´ box above", elem_classes="gr-button")
     def short_prompt(inputs):
         return (inputs)
     
     model_name1.change(set_model, inputs=model_name1, outputs=[output1])
-    
-    #run.click(send_it1, inputs=[magic1, model_name1, neg_input, height, width, steps, cfg, seed], outputs=[output1])
-    
     gr.on(
         triggers=[run.click, magic1.submit],
         fn=send_it1,
         inputs=[magic1, model_name1, neg_input, height, width, steps, cfg, seed],
         outputs=[output1],
     )
-
     use_short.click(short_prompt, inputs=[input_text], outputs=magic1)
-    
     see_prompts.click(text_it1, inputs=[input_text], outputs=magic1)
     
 myface.queue(default_concurrency_limit=200, max_size=200)