Update

app.py

@@ -157,10 +157,6 @@ def predict(
     return final_image_list
 
 
-intro_markdown = r"""
-# Furniture Blending Demo
-"""
-
 css = r"""
 #col-left {
     margin: 0 auto;
@@ -182,13 +178,31 @@ css = r"""
 
 
 with gr.Blocks(css=css) as demo:
-    gr.Markdown(intro_markdown)
+    gr.HTML("""
+        <div style="display: flex; justify-content: center; text-align:center; flex-direction: column;">
+            <h1 style="color: #333;">🪑 Furniture Blending Demo</h1>
+            <div style="max-width: 800px; margin: 0 auto;">
+                <p style="font-size: 16px;">Upload an image, draw a mask on the areas you want to remove, and upload a furniture reference image.</p>
+                <p style="font-size: 16px;">
+                    For the best results, make square masks.
+                    Flux dev give better results than the schnell but is slower.
+                    Object reference should be a single object with white background.
+                </p>
+                <p style="font-size: 16px;">
+                    You can edit the object with the prompt.
+                    For example, you can add "red couch" to the prompt to make the couch red.
+                </p>
+                <br>
+                <p style="font-size: 16px;">⚠️ Note that the images are compressed to reduce the workloads of the demo. </p>
+            </div>
+        </div>
+    """)
 
     with gr.Row() as content:
         with gr.Column(elem_id="col-left"):
             gr.HTML(
                 r"""
-                <div style="display: flex; justify-content: start; align-items: center; text-align: center; font-size: 20px; height: 50px;">
+                <div style="display: flex; justify-content: start; align-items: center; text-align: center; font-size: 20px">
                     <div>
                     🪟 Room image with inpainting mask ⬇️
                     </div>
@@ -220,7 +234,7 @@ with gr.Blocks(css=css) as demo:
         with gr.Column(elem_id="col-mid"):
             gr.HTML(
                 r"""
-                <div style="display: flex; justify-content: start; align-items: center; text-align: center; font-size: 20px; height: 50px;">
+                <div style="display: flex; justify-content: start; align-items: center; text-align: center; font-size: 20px">
                     <div>
                     🪑 Furniture reference image ⬇️
                     </div>
@@ -243,7 +257,7 @@ with gr.Blocks(css=css) as demo:
         with gr.Column(elem_id="col-right"):
             gr.HTML(
                 r"""
-                <div style="display: flex; justify-content: start; align-items: center; text-align: center; font-size: 20px; height: 50px;">
+                <div style="display: flex; justify-content: start; align-items: center; text-align: center; font-size: 20px">
                     <div>
                     🔥 Press Run ⬇️
                     </div>