Update ui.py

ui.py

@@ -166,12 +166,14 @@ def mock_process_image_upload(image):
     x2 = x1 + bbox_size
     y2 = y1 + bbox_size * 1.2
     
+    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
 
 def mock_update_slider_for_image(image):
-    """Mock für Slider-Update"""
+    """KORRIGIERT: Slider-Update mit getrennten Maxima für Breite und Höhe"""
     if not image:
         return (
             gr.update(maximum=MAX_IMAGE_SIZE),
@@ -181,14 +183,17 @@ def mock_update_slider_for_image(image):
         )
     
     w, h = image.size
-    max_val = min(max(w, h), MAX_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})")
     
-    print(f"📐 Mock Slider-Maxima: {max_val}")
     return (
-        gr.update(maximum=max_val),
-        gr.update(maximum=max_val),
-        gr.update(maximum=max_val),
-        gr.update(maximum=max_val)
+        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
     )
 
 def mock_update_model_settings(model_id):
@@ -225,51 +230,50 @@ def main_ui():
         title="AI Image Generator - Mock Version",
         theme=gr.themes.Base(),
         css="""
-/* ===== DEZENTERE INFO-BOXEN (KLEINERE HÖHE) ===== */
+/* ===== INFO-BOXEN MIT GRÖßEREM TEXT ===== */
 .info-box {
     background: #f8fafc !important;
-    padding: 3px 6px !important;           /* Noch weniger Padding */
-    border-radius: 3px !important;         /* Kleinere Rundung */
+    padding: 6px 10px !important;           /* Mehr Padding für größeren Text */
+    border-radius: 4px !important;
     border: 1px solid #e2e8f0 !important;
-    margin-bottom: 1px !important;         /* Minimaler Abstand */
-    font-size: 10px !important;            /* Kleinere Schrift */
-    line-height: 1.1 !important;
-    height: 28px !important;               /* FESTE KLEINERE HÖHE */
-    min-height: 28px !important;           /* Feste Mindesthöhe */
-    max-height: 28px !important;           /* Feste Maximale Höhe */
-    color: #64748b !important;
-    display: flex !important;              /* Flex für Zentrierung */
-    align-items: center !important;        /* Vertikal zentrieren */
+    margin-bottom: 3px !important;
+    font-size: 12px !important;              /* GRÖßERE SCHRIFT (vorher 10px) */
+    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 */
+    display: block !important;
     text-align: left !important;
-    font-family: 'Segoe UI', monospace !important;
-    overflow: hidden !important;           /* Text wird abgeschnitten */
-    white-space: nowrap !important;        /* Kein Umbruch */
+    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 */
 }
 
-/* Code in Info-Boxen noch kleiner */
+/* Code in Info-Boxen größer */
 .info-box code {
     background: #ffffff !important;
-    padding: 1px 2px !important;
-    border-radius: 2px !important;
-    font-size: 9px !important;
+    padding: 2px 4px !important;
+    border-radius: 3px !important;
+    font-size: 11px !important;              /* Größerer Code */
     border: 1px solid #e2e8f0 !important;
-    color: #475569 !important;
-    font-weight: normal !important;
+    color: #334155 !important;               /* Dunklerer Code */
+    font-weight: 500 !important;
 }
 
-/* ===== TEXTBOXEN (FESTE HÖHE, KEINE DYNAMIK) ===== */
+/* ===== TEXTBOXEN (FESTE HÖHE) ===== */
 .prompt-box textarea {
     min-height: 90px !important;
-    max-height: 90px !important;           /* Feste Höhe */
-    height: 90px !important;               /* Feste Höhe */
+    max-height: 90px !important;
+    height: 90px !important;
     border-radius: 6px !important;
     border: 2px solid #3b82f6 !important;
-    padding: 10px !important;
+    padding: 12px !important;
     font-size: 14px !important;
     background: white !important;
     box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
-    resize: vertical !important;           /* Nur vertikales Resize erlauben */
-    overflow-y: auto !important;           /* Scrollen wenn nötig */
+    resize: vertical !important;
+    overflow-y: auto !important;
 }
 
 .prompt-box textarea:focus {
@@ -279,42 +283,56 @@ def main_ui():
 
 /* ===== VISUELLE HIERARCHIE ===== */
 .gr-column:first-child .info-box {
-    border-left: 2px solid #3b82f6 !important;  /* Dünnerer Rahmen */
+    border-left: 3px solid #3b82f6 !important;
     background: #f0f9ff !important;
 }
 
 .gr-column:last-child .info-box {
-    border-left: 2px solid #ef4444 !important;  /* Dünnerer Rahmen */
+    border-left: 3px solid #ef4444 !important;
     background: #fef2f2 !important;
 }
 
 .model-info-box { 
     background: #e8f4fd; 
-    padding: 10px; 
+    padding: 12px; 
     border-radius: 6px; 
-    margin: 8px 0; 
-    border-left: 3px solid #2196f3; 
-    font-size: 13px !important;
+    margin: 10px 0; 
+    border-left: 4px solid #2196f3; 
+    font-size: 14px !important;
 }
 
 #generate-button { 
     background-color: #0080FF !important; 
     margin: 20px auto !important; 
     width: 280px; 
+    font-size: 16px !important;
+    font-weight: 600 !important;
 }
 
 .radio-group { 
     background: #f8f9fa; 
-    padding: 12px; 
-    border-radius: 6px; 
-    margin: 8px 0; 
+    padding: 15px; 
+    border-radius: 8px; 
+    margin: 10px 0; 
+    font-size: 14px !important;
 }
 
 .status-message {
-    padding: 8px;
-    border-radius: 4px;
-    margin: 8px 0;
-    font-size: 13px;
+    padding: 10px;
+    border-radius: 5px;
+    margin: 10px 0;
+    font-size: 14px;
+    background: #f0f9ff;
+    border-left: 4px solid #3b82f6;
+}
+
+/* Slider besser sichtbar */
+.gr-slider {
+    margin: 8px 0 !important;
+}
+
+.gr-slider .wrap {
+    padding: 8px 0 !important;
 }
 """
     ) as demo:
@@ -422,7 +440,7 @@ def main_ui():
             with gr.Row():
                 gr.Markdown("### 📐 Bildelementbereich anpassen")
             
-            # SLIDER MIT DYNAMISCHEM MAXIMUM (4096 für große Bilder)
+            # SLIDER MIT DYNAMISCHEM MAXIMUM (getrennt für X und Y)
             with gr.Row():
                 with gr.Column():
                     bbox_x1 = gr.Slider(