test

app.py

@@ -40,6 +40,10 @@ class DreamblendGUI:
         self.examples = [
             ["./examples/9_02.png", 
             "./examples/9_01.png"],
+            ["./examples/010_1.webp",
+            "./examples/010_0.webp"],
+            ["./examples/030_1.webp",
+            "./examples/030_0.webp"]
         ]
         self.examples = [[Image.open(x) for x in example] for example in self.examples]
         self.css_style = self._get_css_style()
@@ -47,46 +51,86 @@ class DreamblendGUI:
 
     def _get_css_style(self):
         return """
+        input[type="file"] {
+        border: 1px solid #ccc !important;
+        background-color: #f9f9f9 !important;
+        padding: 8px !important;
+        border-radius: 6px !important;
+        }
         body {
-          background: transparent;
-          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-          color: #fff;
+        background-color: #ffffff;
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        color: #212121;
         }
         .gradio-container {
-          max-width: 1200px;
-          margin: auto;
-          background: transparent;
-          border-radius: 10px;
-          padding: 20px;
-          box-shadow: 0px 2px 8px rgba(255,255,255,0.1);
+        max-width: 1200px;
+        margin: auto;
+        background: #ffffff;
+        border-radius: 12px;
+        padding: 24px;
+        box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.05);
         }
         h1, h2 {
-          text-align: center;
-          color: #fff;
+        text-align: center;
+        color: #222;
         }
         #canvas_preview {
-          border: 2px dashed rgba(255,255,255,0.5);
-          padding: 10px;
-          background: transparent;
-          border-radius: 8px;
+        min-height: 420px;  /* 或你需要的高度 */
+        border: 2px dashed #ccc;
+        background-color: #fafafa;
+        border-radius: 8px;
+        padding: 10px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #999;
+        font-size: 16px;
         }
         .gr-button {
-          background-color: #007bff;
-          border: none;
-          color: #fff;
-          padding: 10px 20px;
-          border-radius: 5px;
-          font-size: 16px;
-          cursor: pointer;
+        background-color: #2196f3;
+        border: 1px solid #1976d2;
+        color: #ffffff;
+        padding: 10px 20px;
+        border-radius: 6px;
+        font-size: 15px;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
         }
         .gr-button:hover {
-          background-color: #0056b3;
+        background-color: #1976d2;
         }
         #small-examples {
-          max-width: 200px !important;
-          width: 200px !important;
-          float: left;
-          margin-right: 20px;
+        width: 200px;
+        margin: 10px 0;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        overflow: hidden;
+        background: #fff;
+        box-shadow: 0 1px 4px rgba(0,0,0,0.05);
+        }
+        .markdown-text {
+        color: #333;
+        font-size: 15px;
+        line-height: 1.6;
+        }
+        #canvas-preview-container {
+        background: #fafafa;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        padding: 10px;
+        margin-top: 10px;
+        }
+        [id^="section-"] {
+        background-color: #ffffff;
+        border: 1px solid #dddddd;
+        border-radius: 10px;
+        padding: 16px;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
+        margin-bottom: 16px;
+        }
+        .svelte-1ipelgc {
+        flex-wrap: nowrap !important;
+        gap: 24px !important;  /* 每块之间增加空隙 */
         }
         """
 
@@ -353,9 +397,9 @@ class DreamblendGUI:
             </style>
         </head>
         <body>
-            <h2>拖拽前景图（支持缩放）</h2>
+            <h2> 3️⃣ Drag and Resize</h2>
             <div id="scale-control">
-                <label for="scale-slider">前景图缩放:</label>
+                <label for="scale-slider">Resize FG:</label>
                 <input type="range" id="scale-slider" min="0.1" max="2" step="0.01" value="1">
             </div>
             <div id="canvas-container" data-bg-width="{bg_width}" data-bg-height="{bg_height}">
@@ -367,7 +411,7 @@ class DreamblendGUI:
                      data-original-height="{draggable_height}"
                 />
             </div>
-            <p id="coordinate">前景图坐标: (x=?, y=?)</p>
+            <p id="coordinate">location: (x=?, y=?)</p>
         </body>
         </html>
         """
@@ -411,29 +455,50 @@ class DreamblendGUI:
         """创建 Gradio 界面"""
         with gr.Blocks(css=self.css_style) as demo:
             modified_fg_state = gr.State() 
-            gr.Markdown("# DreamFuse: 3 Easy Steps to Create Your Fusion Image")
-            gr.Markdown("1. Upload the foreground and background images you want to blend.")
-            gr.Markdown("2. Click 'Generate Canvas' to preview the result. You can then drag and resize the foreground object to position it as you like.")
-            gr.Markdown("3. Click 'Run Model' to create the final fused image.")
+            gr.Markdown("# DreamFuse")
+            gr.Markdown('## 📌 4 Easy Steps to Create Your Fusion Image:')
+            gr.Markdown(
+                """
+                1. Upload the foreground and background images you want to fuse.  
+                2. Click 'Generate Canvas' to preview the result.  
+                3. Drag and resize the foreground object to position it as you like.  
+                4. Click 'Run Model' to create the final fused image.
+                """,
+                elem_classes=["markdown-text"]
+            )
             with gr.Row():
-                with gr.Column(scale=1):
-                    gr.Markdown("### FG&BG Image Upload")
-                    background_img_in = gr.Image(label="Background Image", type="pil", height=240, width=240)
-                    draggable_img_in = gr.Image(label="Foreground Image", type="pil", image_mode="RGBA", height=240, width=240)
-                    generate_btn = gr.Button("Generate Canvas")
+                with gr.Column(scale=1, elem_id="section-upload"):
+                    gr.Markdown("### 1️⃣ FG&BG Image Upload")
+                    with gr.Row():
+                        with gr.Column(scale=1):
+                            background_img_in = gr.Image(label="Background Image", type="pil", height=240, width=200)
+                        with gr.Column(scale=1):
+                            draggable_img_in = gr.Image(label="Foreground Image", type="pil", image_mode="RGBA", height=240, width=200)
+                    generate_btn = gr.Button("2️⃣ Generate Canvas")
 
                     with gr.Row():
-                        gr.Examples(
-                            examples=[self.examples[0]],
-                            inputs=[background_img_in, draggable_img_in],
-                            elem_id="small-examples"
-                        )
-                with gr.Column(scale=1):
+                        with gr.Column(scale=1):
+                            gr.Examples(
+                                examples=[self.examples[1]],
+                                inputs=[background_img_in, draggable_img_in],
+                                # elem_id="small-examples"
+                            )
+                        with gr.Column(scale=1):
+                            gr.Examples(
+                                examples=[self.examples[2]],
+                                inputs=[background_img_in, draggable_img_in],
+                                # elem_id="small-examples"
+                            )
+                with gr.Column(scale=1, elem_id="section-preview"):
                     gr.Markdown("### Preview Region")
-                    html_out = gr.HTML(label="drag and resize", elem_id="canvas_preview")
+                    html_out = gr.HTML(
+                        value="<p style='text-align:center; color:#aaa;'>Waiting for generating canvas...</p>", 
+                        label="drag and resize", 
+                        elem_id="canvas_preview"
+                    )
 
             with gr.Row():
-                with gr.Column(scale=1):
+                with gr.Column(scale=1, elem_id="section-parameters"):
                     gr.Markdown("### Parameters")
                     seed_slider = gr.Slider(minimum=-1, maximum=100000, step=1, label="Seed", value=12345)
                     cfg_slider = gr.Slider(minimum=1, maximum=10, step=0.1, label="CFG", value=3.5)
@@ -446,9 +511,9 @@ class DreamblendGUI:
                     text_strength = gr.Slider(minimum=1, maximum=10, step=1, label="Text Strength", value=1, visible=False)
                     enable_gui = gr.Checkbox(label="启用GUI", value=True, visible=False)
                     enable_truecfg = gr.Checkbox(label="TrueCFG", value=False, visible=False)
-                with gr.Column(scale=1):
+                with gr.Column(scale=1, elem_id="section-results"):
                     gr.Markdown("### Model Result")
-                    model_generate_btn = gr.Button("Run Model")
+                    model_generate_btn = gr.Button("4️⃣ Run Model")
                     transformation_text = gr.Textbox(label="Transformation Info", elem_id="transformation_info", visible=False)
                     model_output = gr.Image(label="Model Output", type="pil")