Update ui.py

ui.py

@@ -155,9 +155,9 @@ def mock_update_live_preview(image, bbox_x1, bbox_y1, bbox_x2, bbox_y2, mode):
     return create_preview_image(image, bbox_coords, mode)
 
 def mock_process_image_upload(image):
-    """Mock für Bild-Upload: Setzt BBox in der Mitte - KORRIGIERTE REIHENFOLGE"""
+    """Mock für Bild-Upload: Setzt BBox in der Mitte"""
     if not image:
-        return None, 100, 300, 100, 300  # x1, x2, y1, y2
+        return None, 100, 100, 300, 300  # x1, y1, x2, y2
     
     w, h = image.size
     bbox_size = min(w, h) * 0.3
@@ -168,9 +168,8 @@ def mock_process_image_upload(image):
     
     print(f"📐 Bildgröße erkannt: {w}x{h} -> BBox: {int(x1)}-{int(x2)}, {int(y1)}-{int(y2)}")
     
-    # KORREKTUR: x1, x2, y1, y2 Reihenfolge
-    preview = mock_update_live_preview(image, x1, x2, y1, y2, "environment_change")
-    return preview, int(x1), int(x2), int(y1), int(y2)  # x1, x2, y1, y2
+    preview = mock_update_live_preview(image, x1, y1, x2, y2, "environment_change")
+    return preview, int(x1), int(y1), int(x2), int(y2)  # x1, y1, x2, y2
 
 def mock_update_slider_for_image(image):
     """KORRIGIERT: Slider-Update mit getrennten Maxima für Breite und Höhe"""
@@ -183,17 +182,16 @@ def mock_update_slider_for_image(image):
         )
     
     w, h = image.size
-    # JEDER Slider bekommt sein eigenes Maximum
     max_x = min(w, MAX_IMAGE_SIZE)
     max_y = min(h, MAX_IMAGE_SIZE)
     
     print(f"📐 Slider-Maxima gesetzt: X={max_x}, Y={max_y} (Bild: {w}x{h})")
     
     return (
-        gr.update(maximum=max_x),  # bbox_x1
-        gr.update(maximum=max_y),  # bbox_y1
-        gr.update(maximum=max_x),  # bbox_x2
-        gr.update(maximum=max_y),  # bbox_y2
+        gr.update(maximum=max_x),  # bbox_x1: linke Kante max = Bildbreite
+        gr.update(maximum=max_y),  # bbox_y1: obere Kante max = Bildhöhe
+        gr.update(maximum=max_x),  # bbox_x2: rechte Kante max = Bildbreite
+        gr.update(maximum=max_y),  # bbox_y2: untere Kante max = Bildhöhe
     )
 
 def mock_update_model_settings(model_id):
@@ -233,21 +231,21 @@ def main_ui():
 /* ===== INFO-BOXEN MIT GRÖßEREM TEXT ===== */
 .info-box {
     background: #f8fafc !important;
-    padding: 6px 10px !important;           /* Mehr Padding für größeren Text */
+    padding: 6px 10px !important;
     border-radius: 4px !important;
     border: 1px solid #e2e8f0 !important;
     margin-bottom: 3px !important;
-    font-size: 12px !important;              /* GRÖßERE SCHRIFT (vorher 10px) */
+    font-size: 12px !important;
     line-height: 1.3 !important;
-    height: auto !important;                 /* Flexible Höhe für Text */
-    min-height: 40px !important;             /* Höhere Mindesthöhe */
-    color: #475569 !important;               /* Dunklerer Text für bessere Lesbarkeit */
+    height: auto !important;
+    min-height: 40px !important;
+    color: #475569 !important;
     display: block !important;
     text-align: left !important;
     font-family: 'Segoe UI', 'Monaco', monospace !important;
-    overflow: visible !important;            /* Text darf sichtbar sein */
-    white-space: normal !important;          /* Textumbruch erlauben */
-    word-wrap: break-word !important;        /* Lange Wörter umbrechen */
+    overflow: visible !important;
+    white-space: normal !important;
+    word-wrap: break-word !important;
 }
 
 /* Code in Info-Boxen größer */
@@ -255,9 +253,9 @@ def main_ui():
     background: #ffffff !important;
     padding: 2px 4px !important;
     border-radius: 3px !important;
-    font-size: 11px !important;              /* Größerer Code */
+    font-size: 11px !important;
     border: 1px solid #e2e8f0 !important;
-    color: #334155 !important;               /* Dunklerer Code */
+    color: #334155 !important;
     font-weight: 500 !important;
 }
 
@@ -283,13 +281,11 @@ def main_ui():
 
 /* ===== VISUELLE HIERARCHIE ===== */
 .gr-column:first-child .info-box {
-    border-left: 3px solid #3b82f6 !important;
-    background: #f0f9ff !important;
+    background: #f0f9ff !important;  /* KEIN border-left mehr! */
 }
 
 .gr-column:last-child .info-box {
-    border-left: 3px solid #ef4444 !important;
-    background: #fef2f2 !important;
+    background: #fef2f2 !important;  /* KEIN border-left mehr! */
 }
 
 .model-info-box { 
@@ -440,7 +436,11 @@ def main_ui():
             with gr.Row():
                 gr.Markdown("### 📐 Bildelementbereich anpassen")
             
-            # SLIDER MIT DYNAMISCHEM MAXIMUM (getrennt für X und Y)
+            # SLIDER KORRIGIERT - Jetzt korrekte Zuordnung:
+            # Oben links: linke Kante (x1)
+            # Oben rechts: obere Kante (y1)
+            # Unten links: rechte Kante (x2)
+            # Unten rechts: untere Kante (y2)
             with gr.Row():
                 with gr.Column():
                     bbox_x1 = gr.Slider(
@@ -479,7 +479,6 @@ def main_ui():
                         placeholder="photorealistic coastal beach, keep person unchanged...",
                         lines=2,
                         label="🎯 Transformations-Prompt",
-                        #value="change background to beach",
                         elem_classes=["prompt-box"]
                     )
                 with gr.Column():
@@ -491,7 +490,6 @@ def main_ui():
                         placeholder="blurry face, deformed anatomy...",
                         lines=2,
                         label="🚫 Negativ-Prompt",
-                        #value="blurry, ugly",
                         elem_classes=["prompt-box"]
                     )
             
@@ -512,10 +510,8 @@ def main_ui():
                         label="🎛️ Prompt-Stärke (guidance)"
                     )
             
-            
             transform_btn = gr.Button("🔄 Mock-Bild transformieren", variant="primary")
             
-            
             with gr.Row():
                 img_output = gr.Image(
                     label="✨ Transformiertes Mock-Bild",
@@ -552,7 +548,7 @@ def main_ui():
                     show_download_button=False
                 )
             
-            # WICHTIG: coordinate_inputs in der richtigen Reihenfolge (x1, y1, x2, y2)
+            # KORREKT: coordinate_inputs in der richtigen Reihenfolge (x1, y1, x2, y2)
             coordinate_inputs = [img_input, bbox_x1, bbox_y1, bbox_x2, bbox_y2, mode_radio]
             
             img_input.upload(