working with progress

app.py

@@ -285,7 +285,7 @@ async def handle_generation(input_image, subject, duration, selected_index, prog
             # Update progress
             if 'progress' in generation:
                 progress_value = generation['progress']
-                progress_bar = f'<div class="progress-container"><div class="progress-bar" style="--current: {progress_value}; --total: 100;"></div></div>'
+                progress_bar = f'<div class="progress-container"><div class="progress-bar" style="--current: {progress_value}; --total: 100;"><span class="progress-text">Processing: {progress_value}%</span></div></div><div class="refresh-warning">Please do not refresh this page while processing</div>'
                 
                 # Check status
                 if generation['status'] == 'completed':
@@ -311,15 +311,18 @@ css = '''
 #title{text-align: center}
 #title h1{font-size: 3em; display:inline-flex; align-items:center}
 #title img{width: 100px; margin-right: 0.5em}
-#gallery .grid-wrap{height: 10vh}
+#gallery .grid-wrap{height: auto; min-height: 350px}
+#gallery .gallery-item {height: 100%; width: 100%; object-fit: cover}
 #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}
+.progress-container {width: 100%;height: 30px;background-color: #f0f0f0;border-radius: 15px;overflow: hidden;margin-bottom: 20px;position: relative;}
+.progress-bar {height: 100%;background-color: #90EE90;width: calc(var(--current) / var(--total) * 100%);transition: width 0.5s ease-in-out}
+.progress-text {position: absolute;width: 100%;text-align: center;top: 50%;left: 0;transform: translateY(-50%);color: #000;font-weight: bold;}
+.refresh-warning {color: #e74c3c;font-weight: bold;text-align: center;margin-top: 5px;}
 '''
 
 with gr.Blocks(css=css) as demo:
@@ -330,7 +333,7 @@ with gr.Blocks(css=css) as demo:
     selected_info = gr.HTML("")
     
     with gr.Row():
-        with gr.Column():
+        with gr.Column(scale=1):
             gallery = gr.Gallery(
                 [(item["image"], item["title"]) for item in loras],
                 label="Select LoRA",
@@ -338,14 +341,15 @@ with gr.Blocks(css=css) as demo:
                 columns=4,
                 elem_id="gallery",
                 show_share_button=False,
-                height=350
+                height="350px",
+                object_fit="contain"
             )
             input_image = gr.Image(type="filepath")
             subject = gr.Textbox(label="Describe your subject", placeholder="Cat toy")
             duration = gr.Radio(["Short (3s)", "Long (5s)"], label="Duration", value="Short (3s)")
             button = gr.Button("Generate", variant="primary", elem_id="gen_btn")
             
-        with gr.Column():
+        with gr.Column(scale=1):
             progress_bar = gr.Markdown(elem_id="progress", visible=False)
             output = gr.Video(interactive=False, label="Output video")