Update app.py

app.py

@@ -36,13 +36,17 @@ for item, saved_name in zip(sdxl_loras, saved_names):
     item["saved_name"] = saved_name
 
 css = '''
-#title{text-align:center}
-#plus_column{align-self: center}
-#plus_button{font-size: 250%; text-align: center;margin-bottom: 44.75px}
-.gradio-container{width: 700px !important; margin: 0 auto !important}
+#title{text-align:center;}
+#title h1{font-size: 250%}
+.plus_column{align-self: center}
+.plus_button{font-size: 235% !important; text-align: center;margin-bottom: 19px}
 #prompt input{width: calc(100% - 160px);border-top-right-radius: 0px;border-bottom-right-radius: 0px;}
-#run_button{position:absolute;margin-top: 57px;right: 0;margin-right: 0.8em;border-bottom-left-radius: 0px;
+#run_button{position:absolute;margin-top: 12px;right: 0;margin-right: 1.5em;border-bottom-left-radius: 0px;
     border-top-left-radius: 0px;}
+.random_column{align-self: center}
+@media (max-width: 1024px) {
+.roulette_group{flex-direction: column}
+}
 '''
 
 #@spaces.GPU
@@ -51,7 +55,7 @@ original_pipe = copy.deepcopy(pipe)
 
 def merge_and_run(prompt, negative_prompt, shuffled_items, lora_1_scale=0.5, lora_2_scale=0.5, progress=gr.Progress(track_tqdm=True)):
   pipe = copy.deepcopy(original_pipe)
-  pipe.to(device)  
+  pipe.to("cuda")  
   print("Loading LoRAs")
   pipe.load_lora_weights(shuffled_items[0]['saved_name'])
   pipe.fuse_lora(lora_1_scale)
@@ -69,7 +73,7 @@ def merge_and_run(prompt, negative_prompt, shuffled_items, lora_1_scale=0.5, lor
 
 def get_description(item):
       trigger_word = item["trigger_word"]
-      return f"LoRA trigger word: `{trigger_word}`" if trigger_word else "No trigger word, will be applied automatically", trigger_word
+      return f"Trigger: `{trigger_word}`" if trigger_word else "No trigger word, will be applied automatically", trigger_word
     
 def shuffle_images():
     compatible_items = [item for item in sdxl_loras if item['is_compatible']]
@@ -91,30 +95,39 @@ with gr.Blocks(css=css) as demo:
   shuffled_items = gr.State()
   title = gr.HTML(
         '''<h1>LoRA Roulette 🎲</h1>
-        <h4>This 2 LoRAs are loaded to SDXL at random, find a fun way to combine them 🎨</h4>
         ''',
         elem_id="title"
   )
-  with gr.Row():
-    with gr.Column(min_width=10, scale=6):
-      lora_1 = gr.Image(interactive=False, height=300)
-      lora_1_prompt = gr.Markdown(visible=False)
-    with gr.Column(min_width=10, scale=1, elem_id="plus_column"):
-      plus = gr.HTML("+", elem_id="plus_button")
-    with gr.Column(min_width=10, scale=6):
-      lora_2 = gr.Image(interactive=False, height=300)
-      lora_2_prompt = gr.Markdown(visible=False)
-  with gr.Row():
-    prompt = gr.Textbox(label="Your prompt", info="arrange the trigger words of the two LoRAs in a coherent sentence", interactive=True, elem_id="prompt")
-    run_btn = gr.Button("Run", elem_id="run_button")
+  with gr.Row(elem_classes="roulette_group"):
+    with gr.Column(min_width=10, scale=16, elem_classes="plus_column"):
+        gr.HTML("<p>This 2 random LoRAs are loaded to SDXL, find a fun way to combine them 🎨</p>")
+        with gr.Row():
+            with gr.Column(min_width=10, scale=8, elem_classes="random_column"):
+              lora_1 = gr.Image(interactive=False, height=263)
+              lora_1_prompt = gr.Markdown(visible=False)
+            with gr.Column(min_width=10, scale=1, elem_classes="plus_column"):
+              plus = gr.HTML("+", elem_classes="plus_button")
+            with gr.Column(min_width=10, scale=8, elem_classes="random_column"):
+              lora_2 = gr.Image(interactive=False, height=263)
+              lora_2_prompt = gr.Markdown(visible=False)
+            with gr.Column(min_width=10, scale=1, elem_classes="plus_column"):
+               equal = gr.HTML("=", elem_classes="plus_button")
+        shuffle_button = gr.Button("Reshuffle!", visible=False)
+    with gr.Column(min_width=10, scale=14):
+        with gr.Box():
+            with gr.Row():
+                prompt = gr.Textbox(label="Your prompt", show_label=False, interactive=True, elem_id="prompt")
+                run_btn = gr.Button("Run", elem_id="run_button")
+            output_image = gr.Image(label="Output", height=355)
+  
+  
+  
   
-  output_image = gr.Image()
   with gr.Accordion("Advanced settings", open=False):
     negative_prompt = gr.Textbox(label="Negative prompt")
     with gr.Row():
       lora_1_scale = gr.Slider(label="LoRA 1 Scale", minimum=0, maximum=1, step=0.1, value=0.7)
       lora_2_scale = gr.Slider(label="LoRa 2 Scale", minimum=0, maximum=1, step=0.1, value=0.7)
-  shuffle_button = gr.Button("Reshuffle LoRAs!")
   
   demo.load(shuffle_images, inputs=[], outputs=[lora_1, lora_1_prompt, lora_2, lora_2_prompt, prompt, shuffled_items], queue=False, show_progress="hidden")
   shuffle_button.click(shuffle_images, outputs=[lora_1, lora_1_prompt, lora_2, lora_2_prompt, prompt, shuffled_items], queue=False, show_progress="hidden")
@@ -123,4 +136,4 @@ with gr.Blocks(css=css) as demo:
   prompt.submit(merge_and_run, inputs=[prompt, negative_prompt, shuffled_items, lora_1_scale, lora_2_scale], outputs=[output_image])
 
 demo.queue()
-demo.launch()
+demo.launch(share=True)