Update app.py

app.py

@@ -144,6 +144,14 @@ css = '''
 #title h1{font-size: 3em; display:inline-flex; align-items:center}
 #title img{width: 100px; margin-right: 0.5em}
 #gallery .grid-wrap{height: 10vh}
+#lora_list{background: var(--block-background-fill);padding: 0 1em .3em; font-size: 90%}
+.card_internal{display: flex;height: 100px;margin-top: .5em}
+.card_internal img{margin-right: 1em}
+.styler{--form-gap-width: 0px !important}
+#progress{height:30px}
+#progress .generating{display:none}
+.progress-container {width: 100%;height: 30px;background-color: #f0f0f0;border-radius: 15px;overflow: hidden;margin-bottom: 20px}
+.progress-bar {height: 100%;background-color: #4f46e5;width: calc(var(--current) / var(--total) * 100%);transition: width 0.5s ease-in-out}
 '''
 with gr.Blocks(theme=gr.themes.Soft(), css=css) as app:
     title = gr.HTML(
@@ -177,6 +185,7 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as app:
             )
             
         with gr.Column(scale=4):
+            progress_bar = gr.Markdown(elem_id="progress",visible=False)
             result = gr.Image(label="Generated Image")
 
     with gr.Row():
@@ -206,7 +215,7 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as app:
         triggers=[generate_button.click, prompt.submit],
         fn=run_lora,
         inputs=[prompt, cfg_scale, steps, selected_index, randomize_seed, seed, width, height, lora_scale],
-        outputs=[result, seed]
+        outputs=[result, seed, progress_bar]
     )
 
 app.queue(default_concurrency_limit=2).launch(show_error=True)