update gradio

app.py

@@ -65,44 +65,62 @@ outputs = gr.Image(label="Generated Image")
 
 
 # Custom HTML content
-# article_html = """
-# <div style="text-align: center; max-width: 1200px; margin: 20px auto;">
-#   <h1 style="font-weight: 900; font-size: 3rem; margin-bottom: 0.5rem">🖼️ Stable Diffusion 3 Image Editor</h1>
-#   <h2 style="font-weight: 450; font-size: 1rem; margin: 0rem">
-#     This interface allows you to perform image editing using the Stable Diffusion 3 model trained with the UltraEdit dataset.
-#   </h2>
-#   <h2 style="font-weight: 450; font-size: 1rem; margin: 0.7rem auto; max-width: 1000px">
-#     Supports both free-form (without mask) and region-based (with mask) image editing. Use the sliders to adjust the inference steps and guidance scales, and provide a seed for reproducibility.
-#   </h2>
-#   <h2 style="font-weight: 450; font-size: 1rem; margin: 1rem auto; max-width: 1000px">
-#     <b>UltraEdit: Instruction-based Fine-Grained Image Editing at Scale</b>
-#   </h2>
-#   <div style="text-align: left; max-width: 1000px; margin: 0 auto;">
-#     <p>
-#       Haozhe Zhao<sup>1*</sup>, Xiaojian Ma<sup>2*</sup>, Liang Chen<sup>1</sup>, Shuzheng Si<sup>1</sup>, Rujie Wu<sup>1</sup>, Kaikai An<sup>1</sup>, Peiyu Yu<sup>3</sup>, Minjia Zhang<sup>4</sup>, Qing Li<sup>2</sup>, Baobao Chang<sup>2</sup>
-#       <br>
-#       <sup>1</sup>Peking University, <sup>2</sup>BIGAI, <sup>3</sup>UCLA, <sup>4</sup>UIUC
-#     </p>
-#     <p>
-#       This paper presents ULTRAEDIT, a large-scale (~4M editing samples), automatically generated dataset for instruction-based image editing. Our key idea is to address the drawbacks in existing image editing datasets like InstructPix2Pix and MagicBrush, and provide a systematic approach to producing massive and high-quality image editing samples. ULTRAEDIT offers several distinct advantages:
-#     </p>
-#     <ul>
-#       <li>It features a broader range of editing instructions by leveraging the creativity of large language models (LLMs) alongside in-context editing examples from human raters.</li>
-#       <li>Its data sources are based on real images, including photographs and artworks, which provide greater diversity and reduced bias compared to datasets solely generated by text-to-image models.</li>
-#       <li>It also supports region-based editing, enhanced by high-quality, automatically produced region annotations.</li>
-#     </ul>
-#     <p>
-#       Our experiments show that canonical diffusion-based editing baselines trained on ULTRAEDIT set new records on MagicBrush and Emu-Edit benchmarks. Our analysis further confirms the crucial role of real image anchors and region-based editing data. The dataset, code, and models will be made public.
-#     </p>
-#   </div>
-# </div>
-# """
-
+article_html = """
+<div style="text-align: center; max-width: 1000px; margin: 20px auto; font-family: Arial, sans-serif;">
+  <h2 style="font-weight: 900; font-size: 2.5rem; margin-bottom: 0.5rem;">
+    🖼️ UltraEdit for Fine-Grained Image Editing
+  </h2>
+  <div style="margin-bottom: 1rem;">
+    <h3 style="font-weight: 500; font-size: 1.25rem; margin: 0;">
+    </h3>
+    <p style="font-weight: 400; font-size: 1rem; margin: 0.5rem 0;">
+      Haozhe Zhao<sup>1*</sup>, Xiaojian Ma<sup>2*</sup>, Liang Chen<sup>1</sup>, Shuzheng Si<sup>1</sup>, Rujie Wu<sup>1</sup>,
+      Kaikai An<sup>1</sup>, Peiyu Yu<sup>3</sup>, Minjia Zhang<sup>4</sup>, Qing Li<sup>2</sup>, Baobao Chang<sup>2</sup>
+    </p>
+    <p style="font-weight: 400; font-size: 1rem; margin: 0;">
+      <sup>1</sup>Peking University, <sup>2</sup>BIGAI, <sup>3</sup>UCLA, <sup>4</sup>UIUC
+    </p>
+  </div>
+  <div style="margin: 1rem 0; display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap;">
+    <a href="https://huggingface.co/datasets/BleachNick/UltraEdit" style="display: flex; align-items: center; text-decoration: none; color: blue; font-weight: bold; gap: 0.5rem;">
+      <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="Dataset_4M" style="height: 20px; vertical-align: middle;"> Dataset
+    </a>
+    <a href="https://huggingface.co/datasets/BleachNick/UltraEdit_500k" style="display: flex; align-items: center; text-decoration: none; color: blue; font-weight: bold; gap: 0.5rem;">
+      <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="Dataset_500k" style="height: 20px; vertical-align: middle;"> Dataset
+    </a>
+     <a href="https://ultra-editing.github.io/" style="display: flex; align-items: center; text-decoration: none; color: blue; font-weight: bold; gap: 0.5rem;">
+      <span style="font-size: 20px; vertical-align: middle;">🔗</span> Page
+    </a>
+    <a href="https://huggingface.co/BleachNick/SD3_UltraEdit_w_mask" style="display: flex; align-items: center; text-decoration: none; color: blue; font-weight: bold; gap: 0.5rem;">
+      <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="Checkpoint" style="height: 20px; vertical-align: middle;"> Checkpoint
+    </a>
+    <a href="https://github.com/HaozheZhao/UltraEdit" style="display: flex; align-items: center; text-decoration: none; color: blue; font-weight: bold; gap: 0.5rem;">
+      <img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg" alt="GitHub" style="height: 20px; vertical-align: middle;"> GitHub
+    </a>
+  </div>
+  <div style="text-align: left; margin: 0 auto; font-size: 1rem; line-height: 1.5;">
+    <p>
+    <b>UltraEdit</b> is a dataset designed for fine-grained, instruction-based image editing. It contains over 4 million free-form image editing samples and more than 100,000 region-based image editing samples, automatically generated with real images as anchors. 
+    </p>
+    <p>
+      This demo allows you to perform image editing using the Stable Diffusion 3 model trained with this extensive dataset. It supports both free-form (without mask) and region-based (with mask) image editing. Use the sliders to adjust the inference steps and guidance scales, and provide a seed for reproducibility. The image guidance scale of 1.5 and  text guidance scale of 7.5 / 12.5 is a good start for free-from/region-based image editing.
+    </p>
+  </div>
+</div>
+"""
+html='''
+  <div style="text-align: left; margin-top: 2rem; font-size: 0.85rem; color: gray;">
+    <p>
+      <b>Usage Instructions:</b> You need to upload the images and prompts for editing. Use the pen tool to mark the areas you want to edit. If no region is marked, it will resort to free-form editing.
+    </p>
+  </div>
+'''
 demo = gr.Interface(
     fn=generate,
     inputs=inputs,
     outputs=outputs,
-    # title=article_html  # Add article parameter
+    description=article_html,  # Add article parameter
+    article = html
 )
 
 demo.queue().launch()