Add the gradio preview and user tips.

README.md

@@ -109,6 +109,26 @@ python gradio_demo.py
 python gradio_demo_upload_mask.py
 ```
 
+Below is a preview of the Gradio demo interfaces:
+
+<div align="center">
+  <img src="./assets/gradio_preview.png" width="900px" alt="Gradio Demo Preview">
+</div>
+
+**✨User Tips:**
+
+1. **Speed vs Quality Trade-off.** Use fewer steps (e.g., 10-step which takes ~4s/image on a single A6000 GPU) for faster generation, but quality may be lower.
+
+2. **Inpaint Position Freedom.** Inpainting positions are flexible - they don't necessarily need to match the original text locations in the input image.
+
+3. **Iterative Editing.** Drag outputs from the gallery to the Image Editing Panel (clean the Editing Panel first) for quick refinements.
+
+4. **Mask Optimization.** Adjust mask size/aspect ratio to match your desired content. The model tends to fill the masks, and harmonizes the generation with background in terms of color and lighting.
+
+5. **Reference Image Tip.** White-background references improve style consistency - the encoder also considers background context of the given reference image.
+
+6. **Resolution Balance.** Very high-resolution generation sometimes triggers spelling errors. 512/768px are recommended considering the model is trained under the resolution of 512.
+
 ## 🎨 Command Line Usage Examples
 
 ### Self-reference Customization