Update app.py

app.py

@@ -10,22 +10,32 @@ client = InferenceClient(
     api_key=os.environ["HF_TOKEN"],
 )
 
-def run_edit(input_image, prompt, progress_bar):
+def run_edit(input_image, prompt, progress_html):
     stop_flag = {"stop": False}
 
     # --- background thread for smooth progress bar ---
     def progress_loop():
         current = 0.0
-        total_time_guess = 10  # seconds, adjust to typical inference
-
         while not stop_flag["stop"]:
             # Smooth progress approach
             current += (0.99 - current) * 0.02
-            progress_bar.update(value=current, label=f"Editing Image… {int(current*100)}%")
+            bar_html = f"""
+            <div style='width: 100%; background-color: #e0e0e0; border-radius: 12px;'>
+                <div style='width: {current*100:.1f}%; background-color: #4CAF50; height: 25px; border-radius: 12px; transition: width 0.05s linear;'></div>
+            </div>
+            <div style='margin-top: 5px;'>Editing Image… {int(current*100)}%</div>
+            """
+            progress_html.update(bar_html)
             time.sleep(0.05)
 
         # Finish immediately
-        progress_bar.update(value=1.0, label="Done!")
+        bar_html = f"""
+        <div style='width: 100%; background-color: #e0e0e0; border-radius: 12px;'>
+            <div style='width: 100%; background-color: #4CAF50; height: 25px; border-radius: 12px;'></div>
+        </div>
+        <div style='margin-top: 5px;'>Done!</div>
+        """
+        progress_html.update(bar_html)
 
     thread = threading.Thread(target=progress_loop)
     thread.start()
@@ -52,29 +62,17 @@ with gr.Blocks(theme="TejAndrewsACC/ACC", title="Image Edit Demo") as demo:
 
     prompt = gr.Textbox(
         label="How do you want the image to be changed?",
-        value=""  # empty placeholder
+        value=""  # empty by default
     )
 
-    progress_bar = gr.Progress(label="Editing Image…", value=0.0)
+    progress_html = gr.HTML("<div style='width:100%; height:25px; background-color:#e0e0e0; border-radius:12px;'></div>")
 
     run_btn = gr.Button("Run Edit")
 
     run_btn.click(
         fn=run_edit,
-        inputs=[input_img, prompt, progress_bar],
+        inputs=[input_img, prompt, progress_html],
         outputs=[output_img],
     )
 
-# Optional CSS styling for the progress bar
-custom_css = """
-#component-3 .gradio-progress-bar {
-    height: 25px;
-    border-radius: 12px;
-    background-color: #e0e0e0;
-}
-#component-3 .gradio-progress-bar-fill {
-    background-color: #4CAF50;
-    transition: width 0.05s linear;
-}
-"""
-demo.launch(share=True, inline=False, css=custom_css)
+demo.launch()