Update Room Cleaner instructions and optimize image loading

app.py

@@ -1,6 +1,6 @@
+import time
 from typing import cast
 from comfydeploy import ComfyDeploy
-import asyncio
 import os
 import gradio as gr
 from gradio.components.image_editor import EditorValue
@@ -19,10 +19,8 @@ API_KEY = os.environ.get("API_KEY")
 DEPLOYMENT_ID = os.environ.get("DEPLOYMENT_ID", "DEPLOYMENT_ID_NOT_SET")
 
 if not API_KEY:
-    raise ValueError(
-        "Please set API_KEY and DEPLOYMENT_ID in your environment variables"
-    )
-if DEPLOYMENT_ID == "DEPLOYMENT_ID_NOT_SET":
+    raise ValueError("Please set API_KEY in your environment variables")
+if not DEPLOYMENT_ID or DEPLOYMENT_ID == "DEPLOYMENT_ID_NOT_SET":
     raise ValueError("Please set DEPLOYMENT_ID in your environment variables")
 
 
@@ -35,12 +33,12 @@ def get_base64_from_image(image: Image.Image) -> str:
     return base64.b64encode(buffered.getvalue()).decode("utf-8")
 
 
-async def process_image(
+def process_image(
     image: Image.Image | str | None,
     mask: Image.Image | str | None,
     progress: gr.Progress = gr.Progress(),
 ) -> Image.Image | None:
-    progress(0, desc="Starting...")
+    progress(0, desc="Preparing inputs...")
     if image is None or mask is None:
         return None
 
@@ -100,7 +98,7 @@ async def process_image(
                     print("Processing failed")
                     return None
 
-                await asyncio.sleep(2)  # Wait for 2 seconds before checking again
+                time.sleep(1)  # Wait for 1 second before checking the status again
     except Exception as e:
         print(f"Error: {e}")
         return None
@@ -141,7 +139,7 @@ def resize_image(img: Image.Image, min_side_length: int = 768) -> Image.Image:
     return img.resize((new_width, min_side_length))
 
 
-async def run_async(
+async def process(
     image_and_mask: EditorValue | None,
     progress: gr.Progress = gr.Progress(),
 ) -> tuple[Image.Image, Image.Image] | None:
@@ -172,7 +170,7 @@ async def run_async(
     image = Image.fromarray(image_np)
     image = resize_image(image)
 
-    output = await process_image(
+    output = process_image(
         image,  # type: ignore
         mask,  # type: ignore
         progress,
@@ -181,32 +179,30 @@ async def run_async(
     if output is None:
         gr.Info("Processing failed")
         return None
-
+    progress(100, desc="Processing completed")
     return image, output
 
 
-def run_sync(*args):
-    return asyncio.run(run_async(*args))
-
-
 with gr.Blocks() as demo:
     gr.HTML("""
         <div style="display: flex; justify-content: center; text-align:center; flex-direction: column;">
-            <h1>🧹 Room Cleaner</h1>
-            <div>
-                <p>Upload an image and use the pencil tool (✏️ icon at the bottom) to <b>mark the areas you want to remove</b>.</p>
-                <p>For best results, include the shadows and reflections of the objects you want to remove.</p>
-                <p>You can remove multiple objects at once.</p>
-                <p>If you forget to mask some parts of your object, it's likely that the model will reconstruct them.</p>
+            <h1 style="color: #333;">🧹 Room Cleaner</h1>
+            <div style="max-width: 800px; margin: 0 auto;">
+                <p style="font-size: 16px;">Upload an image and use the pencil tool (✏️ icon at the bottom) to <b>mark the areas you want to remove</b>.</p>
+                <p style="font-size: 16px;">
+                    For best results, include the shadows and reflections of the objects you want to remove.
+                    You can remove multiple objects at once.
+                    If you forget to mask some parts of your object, it's likely that the model will reconstruct them.
+                </p>
                 <br>
                 <video width="640" height="360" controls style="margin: 0 auto; border-radius: 10px;">
                     <source src="https://dropshare.blanchon.xyz/public/dropshare/room_cleaner_demo.mp4" type="video/mp4">
                 </video>
                 <br>
-                <p>Finally, click on the <b>"Run"</b> button to process the image.</p>
-                <p>Wait for the processing to complete and compare the original and processed images using the slider.</p>
+                <p style="font-size: 16px;">Finally, click on the <b>"Run"</b> button to process the image.</p>
+                <p style="font-size: 16px;">Wait for the processing to complete and compare the original and processed images using the slider.</p>
             
-                <p>⚠️ Note that the images are compressed to reduce the workloads of the demo. </p>
+                <p style="font-size: 16px;">⚠️ Note that the images are compressed to reduce the workloads of the demo. </p>
             </div>
             <div style="margin-top: 20px; display: flex; justify-content: center; gap: 10px;">
                 <a href="https://x.com/JulienBlanchon">
@@ -246,13 +242,33 @@ with gr.Blocks() as demo:
                 size="lg",
                 components=[image_slider],
             )
+
+            # image_slider.change(
+            #     fn=on_change_prompt,
+            #     inputs=[
+            #         image_slider,
+            #     ],
+            #     outputs=[process_btn],
+            #     api_name=False,
+            # )
+
             process_btn.click(
-                fn=run_sync,
+                fn=lambda _: gr.update(interactive=False, value="Processing..."),
+                inputs=[],
+                outputs=[process_btn],
+                api_name=False,
+            ).then(
+                fn=process,
                 inputs=[
                     image_and_mask,
                 ],
                 outputs=[image_slider],
                 api_name=False,
+            ).then(
+                fn=lambda _: gr.update(interactive=True, value="Run"),
+                inputs=[],
+                outputs=[process_btn],
+                api_name=False,
             )
 
     example1 = make_example("./examples/ex1.jpg", "./examples/ex1_mask_only.png")