Update ui.py

ui.py

@@ -12,15 +12,13 @@ def mock_text_to_image(prompt, model_id, steps, guidance_scale, progress=None):
     print(f"📝 Mock text_to_image aufgerufen: '{prompt[:50]}...'")
     
     if progress:
-        for i in range(10):  # Simuliere Fortschritt
+        for i in range(10):
             time.sleep(0.05)
             progress((i+1)/10, desc="Mock-Generierung läuft...")
     
-    # Erstelle einfaches Farbbild
     colors = ["lightblue", "lightgreen", "lavender", "peachpuff"]
     img = Image.new('RGB', (512, 512), color=random.choice(colors))
     
-    # Füge Text hinzu (simulierter Prompt)
     draw = ImageDraw.Draw(img)
     text = f"Mock: {prompt[:30]}..." if len(prompt) > 30 else f"Mock: {prompt}"
     draw.text((50, 256), text, fill="black")
@@ -41,11 +39,9 @@ def mock_img_to_image(image, prompt, neg_prompt, strength, steps, guidance_scale
             time.sleep(0.05)
             progress((i+1)/10, desc=f"Mock-{mode} läuft...")
     
-    # Kopiere Bild und füge Effekte hinzu
     img = image.copy().convert("RGB")
     draw = ImageDraw.Draw(img)
     
-    # Rahmen basierend auf Modus
     colors = {
         "environment_change": "green",
         "focus_change": "orange", 
@@ -53,22 +49,18 @@ def mock_img_to_image(image, prompt, neg_prompt, strength, steps, guidance_scale
     }
     border_color = colors.get(mode, "blue")
     
-    # Zeichne Rahmen
     draw.rectangle([20, 20, img.width-20, img.height-20], 
                    outline=border_color, width=10)
     
-    # BBox visualisieren (falls angegeben)
     if all(v is not None for v in [bbox_x1, bbox_y1, bbox_x2, bbox_y2]):
         x1, y1 = min(bbox_x1, bbox_x2), min(bbox_y1, bbox_y2)
         x2, y2 = max(bbox_x1, bbox_x2), max(bbox_y1, bbox_y2)
         draw.rectangle([x1, y1, x2, y2], outline="yellow", width=5)
         draw.text((x1+5, y1+5), f"{mode}", fill="white")
     
-    # Text hinzufügen
     draw.text((30, 30), f"Mock: {mode}", fill=border_color)
     draw.text((30, 60), f"Strength: {strength}", fill="black")
     
-    # Mock-Masken (einfache Platzhalter)
     mask_preview = Image.new('RGB', (256, 256), color='gray')
     controlnet_map = Image.new('RGB', (256, 256), color='darkblue')
     canny_map = Image.new('RGB', (256, 256), color='black')
@@ -78,24 +70,91 @@ def mock_img_to_image(image, prompt, neg_prompt, strength, steps, guidance_scale
     
     return img, mask_preview, mask_preview, controlnet_map, canny_map
 
+def sort_coordinates(x1, y1, x2, y2):
+    """Sortiert Koordinaten, so dass x1 <= x2 und y1 <= y2"""
+    sorted_x1 = min(x1, x2)
+    sorted_x2 = max(x1, x2)
+    sorted_y1 = min(y1, y2)
+    sorted_y2 = max(y1, y2)
+    return sorted_x1, sorted_y1, sorted_x2, sorted_y2
+
+def create_preview_image(image, bbox_coords, mode):
+    """Vorschau mit dynamischer Rahmendicke"""
+    if image is None:
+        return None
+        
+    preview = image.copy()
+    draw = ImageDraw.Draw(preview)
+    
+    if mode == "environment_change":
+        border_color = (0, 255, 0, 180)
+        mode_text = "UMGEBUNG ÄNDERN"
+        box_color = (255, 255, 0, 200)
+        text_bg_color = (0, 128, 0, 160)
+    elif mode == "focus_change":
+        border_color = (255, 165, 0, 180)
+        mode_text = "FOCUS VERÄNDERN"
+        box_color = (255, 0, 0, 200)
+        text_bg_color = (255, 140, 0, 160)
+    elif mode == "face_only_change":
+        border_color = (255, 0, 0, 180)
+        mode_text = "NUR BEREICH"
+        box_color = (255, 0, 0, 200)
+        text_bg_color = (128, 0, 0, 160)
+    else:
+        border_color = (128, 128, 128, 180)
+        mode_text = "UNBEKANNT"
+        box_color = (128, 128, 128, 200)
+        text_bg_color = (64, 64, 64, 160)
+    
+    border_width = max(8, image.width // 200)
+    box_width = max(3, image.width // 400)
+    
+    draw.rectangle([0, 0, preview.width-1, preview.height-1], 
+                  outline=border_color, width=border_width)
+    
+    if bbox_coords and all(coord is not None for coord in bbox_coords):
+        x1, y1, x2, y2 = sort_coordinates(*bbox_coords)
+        x1 = max(0, min(x1, preview.width-1))
+        y1 = max(0, min(y1, preview.height-1))
+        x2 = max(0, min(x2, preview.width-1))
+        y2 = max(0, min(y2, preview.height-1))
+        
+        if x2 > x1 and y2 > y1:
+            draw.rectangle([x1, y1, x2, y2], outline=box_color, width=box_width)
+            text_color = (255, 255, 255)
+            text_y = max(0, y1 - 25)
+            
+            try:
+                from PIL import ImageFont
+                font_size = max(12, image.width // 50)
+                font = ImageFont.truetype("arial.ttf", font_size)
+                text_bbox = draw.textbbox((x1, text_y), mode_text, font=font)
+                draw.rectangle([text_bbox[0]-5, text_bbox[1]-2, 
+                              text_bbox[2]+5, text_bbox[3]+2], 
+                             fill=text_bg_color)
+                draw.text((x1, text_y), mode_text, fill=text_color, font=font)
+            except:
+                text_bbox = draw.textbbox((x1, text_y), mode_text)
+                draw.rectangle([text_bbox[0]-5, text_bbox[1]-2, 
+                              text_bbox[2]+5, text_bbox[3]+2], 
+                             fill=text_bg_color)
+                draw.text((x1, text_y), mode_text, fill=text_color)
+    
+    return preview
 
 def mock_update_live_preview(image, bbox_x1, bbox_y1, bbox_x2, bbox_y2, mode):
     """Mock für Live-Vorschau MIT dynamischen Rahmen"""
     if not image:
         return None
     
-    # Koordinaten sortieren
     bbox_coords = sort_coordinates(bbox_x1, bbox_y1, bbox_x2, bbox_y2)
-    
-    # Verbesserte Vorschau mit dynamischen Rahmen
     return create_preview_image(image, bbox_coords, mode)
 
-
-
 def mock_process_image_upload(image):
-    """Mock für Bild-Upload: Setzt BBox in der Mitte"""
+    """Mock für Bild-Upload: Setzt BBox in der Mitte - KORRIGIERTE REIHENFOLGE"""
     if not image:
-        return None, 100, 300, 100, 300
+        return None, 100, 300, 100, 300  # x1, x2, y1, y2
     
     w, h = image.size
     bbox_size = min(w, h) * 0.3
@@ -104,8 +163,9 @@ def mock_process_image_upload(image):
     x2 = x1 + bbox_size
     y2 = y1 + bbox_size * 1.2
     
-    preview = mock_update_live_preview(image, x1, y1, x2, y2, "environment_change")
-    return preview, int(x1), int(y1), int(x2), int(y2) # Reihenfolge x1, x2, y1, 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"""
@@ -140,130 +200,11 @@ def mock_update_model_settings(model_id):
 def mock_update_info(mode):
     """Mock für Prompt-Info-Update"""
     if mode == "environment_change":
-        return (
-            "`[STIL-MOTIV], [UMGEBUNG], [VOR/HINTERGRUND]`",
-            "`[GESICHTER/ANATOMIE], [FEHLER]`"
-        )
-    elif mode == "focus_change":
-        return (
-            "`[GESICHTSBESCHREIBUNG], [KLEIDUNG], [POSITION]`",
-            "`[DEFORMIERT], [UNSCHÄRFE], [ANATOMIEFEHLER]`"
-        )
-    else:
-        return (
-            "`[HAARFARBE], [AUGEN], [GESICHTSAUSDRUCK]`",
-            "`[UNREALISTISCH], [ASYMETRISCH]`"
-        )
-
-def sort_coordinates(x1, y1, x2, y2):
-    """Sortiert Koordinaten, so dass x1 <= x2 und y1 <= y2"""
-    sorted_x1 = min(x1, x2)
-    sorted_x2 = max(x1, x2)
-    sorted_y1 = min(y1, y2)
-    sorted_y2 = max(y1, y2)
-    return sorted_x1, sorted_y1, sorted_x2, sorted_y2
-    
-#Rahmendicke für alle Bildgrößen
-def create_preview_image(image, bbox_coords, mode):
-    """
-    ERWEITERTE FUNKTION: Erstellt Vorschau mit dynamischer Rahmendicke
-    
-    Die Rahmendicke skaliert basierend auf der Bildgröße:
-    - Kleine Bilder: Mindestdicke 8px
-    - Große Bilder: Dicke = Bildbreite / 200 (z.B. 4096px → ~20px Dicke)
-    """
-    if image is None:
-        return None
-        
-    preview = image.copy()
-    draw = ImageDraw.Draw(preview)
-    
-    # Farben basierend auf Modus
-    if mode == "environment_change":
-        border_color = (0, 255, 0, 180)  # Grün für Umgebung
-        mode_text = "UMGEBUNG ÄNDERN (Bereich geschützt)"
-        box_color = (255, 255, 0, 200)  # Gelb für geschützten Bereich
-        text_bg_color = (0, 128, 0, 160)  # Dunkelgrün
-        
+        return ("Format: [Stil], [Umgebung], [Details]", "Vermeide: [Fehler], [Unerwünschtes]")
     elif mode == "focus_change":
-        border_color = (255, 165, 0, 180)  # Orange für Focus
-        mode_text = "FOCUS VERÄNDERN (Bereich+Körper)"
-        box_color = (255, 0, 0, 200)  # Rot für Veränderungsbereich
-        text_bg_color = (255, 140, 0, 160)  # Dunkelorange
-        
-    elif mode == "face_only_change":
-        border_color = (255, 0, 0, 180)  # Rot für nur Gesicht
-        mode_text = "NUR BEREICH VERÄNDERN"
-        box_color = (255, 0, 0, 200)  # Rot für Veränderungsbereich
-        text_bg_color = (128, 0, 0, 160)  # Dunkelrot
+        return ("Format: [Gesicht/Kleidung], [Details]", "Vermeide: [Anatomiefehler], [Unschärfe]")
     else:
-        # Fallback
-        border_color = (128, 128, 128, 180)
-        mode_text = "UNBEKANNTER MODUS"
-        box_color = (128, 128, 128, 200)
-        text_bg_color = (64, 64, 64, 160)
-    
-    # ==============================================
-    # WICHTIG: DYNAMISCHE RAHMENDICKE
-    # ==============================================
-    # Basierend auf Bildgröße skalieren
-    # Formel: Mindestens 8px, bei großen Bildern dicker (Breite/200)
-    border_width = max(8, image.width // 200)
-    box_width = max(3, image.width // 400)  # BBox-Rahmen etwas dünner
-    
-    print(f"📐 Dynamische Rahmendicke für {image.width}x{image.height}:")
-    print(f"   - Außenrahmen: {border_width}px")
-    print(f"   - BBox-Rahmen: {box_width}px")
-    
-    # 1. ÄUßERER RAHMEN (um gesamtes Bild)
-    draw.rectangle([0, 0, preview.width-1, preview.height-1], 
-                  outline=border_color, width=border_width)
-    
-    if bbox_coords and all(coord is not None for coord in bbox_coords):
-        # Sortiere Koordinaten
-        x1, y1, x2, y2 = sort_coordinates(*bbox_coords)
-        
-        # Stelle sicher, dass die Koordinaten innerhalb des Bildes liegen
-        x1 = max(0, min(x1, preview.width-1))
-        y1 = max(0, min(y1, preview.height-1))
-        x2 = max(0, min(x2, preview.width-1))
-        y2 = max(0, min(y2, preview.height-1))
-        
-        # Nur zeichnen, wenn die Bounding Box gültig ist
-        if x2 > x1 and y2 > y1:
-            # 2. BBOX-RAHMEN (mit dynamischer Dicke)
-            draw.rectangle([x1, y1, x2, y2], outline=box_color, width=box_width)
-            
-            text_color = (255, 255, 255)
-            
-            # 3. TEXT-LABEL (skaliert auch Schriftgröße optional)
-            text_y = max(0, y1 - 25)
-            
-            # Verwende textbbox um Textgröße zu berechnen
-            from PIL import ImageFont
-            try:
-                # Versuche eine skalierbare Schrift
-                font_size = max(12, image.width // 50)  # Dynamische Schriftgröße
-                font = ImageFont.truetype("arial.ttf", font_size)
-                text_bbox = draw.textbbox((x1, text_y), mode_text, font=font)
-                draw.text((x1, text_y), mode_text, fill=text_color, font=font)
-            except:
-                # Fallback ohne spezielle Schrift
-                text_bbox = draw.textbbox((x1, text_y), mode_text)
-                draw.text((x1, text_y), mode_text, fill=text_color)
-            
-            # Hintergrund für Text
-            draw.rectangle([text_bbox[0]-5, text_bbox[1]-2, 
-                          text_bbox[2]+5, text_bbox[3]+2], 
-                         fill=text_bg_color)
-            
-            # Text nochmal darüber zeichnen
-            try:
-                draw.text((x1, text_y), mode_text, fill=text_color, font=font)
-            except:
-                draw.text((x1, text_y), mode_text, fill=text_color)
-    
-    return preview
+        return ("Format: [Gesichtsdetails], [Ausdruck]", "Vermeide: [Unrealistisch], [Asymmetrie]")
 
 # ==================== UI-DEFINITION ====================
 def main_ui():
@@ -272,11 +213,82 @@ def main_ui():
         title="AI Image Generator - Mock Version",
         theme=gr.themes.Base(),
         css="""
-        .info-box { background: #f8fafc; padding: 8px 12px; border-radius: 6px; margin-bottom: 6px; }
-        .model-info-box { background: #e8f4fd; padding: 12px; border-radius: 6px; margin: 10px 0; border-left: 4px solid #2196f3; }
-        #generate-button { background-color: #0080FF !important; margin: 20px auto !important; width: 280px; }
-        .radio-group { background: #f8f9fa; padding: 15px; border-radius: 8px; margin: 10px 0; }
-        """
+/* ===== VERBESSERTE INFO-BOXEN ===== */
+.info-box {
+    background: #f8fafc !important;
+    padding: 4px 8px !important;
+    border-radius: 4px !important;
+    border: 1px solid #e2e8f0 !important;
+    margin-bottom: 2px !important;
+    font-size: 11px !important;
+    line-height: 1.2 !important;
+    height: auto !important;
+    min-height: 35px !important;
+    color: #64748b !important;
+    display: block !important;
+    text-align: left !important;
+    font-family: 'Segoe UI', monospace !important;
+    opacity: 0.9 !important;
+}
+
+.info-box code {
+    background: #ffffff !important;
+    padding: 1px 3px !important;
+    border-radius: 2px !important;
+    font-size: 10px !important;
+    border: 1px solid #e2e8f0 !important;
+    color: #475569 !important;
+    font-weight: normal !important;
+}
+
+/* ===== TEXTBOXEN HERAUSHEBEN ===== */
+.prompt-box textarea {
+    min-height: 90px !important;
+    border-radius: 6px !important;
+    border: 2px solid #3b82f6 !important;
+    padding: 10px !important;
+    font-size: 14px !important;
+    background: white !important;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
+}
+
+.prompt-box textarea:focus {
+    border-color: #1d4ed8 !important;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
+}
+
+/* ===== VISUELLE HIERARCHIE ===== */
+.gr-column:first-child .info-box {
+    border-left: 3px solid #3b82f6 !important;
+    background: #f0f9ff !important;
+}
+
+.gr-column:last-child .info-box {
+    border-left: 3px solid #ef4444 !important;
+    background: #fef2f2 !important;
+}
+
+.model-info-box { 
+    background: #e8f4fd; 
+    padding: 12px; 
+    border-radius: 6px; 
+    margin: 10px 0; 
+    border-left: 4px solid #2196f3; 
+}
+
+#generate-button { 
+    background-color: #0080FF !important; 
+    margin: 20px auto !important; 
+    width: 280px; 
+}
+
+.radio-group { 
+    background: #f8f9fa; 
+    padding: 15px; 
+    border-radius: 8px; 
+    margin: 10px 0; 
+}
+"""
     ) as demo:
         
         with gr.Tab("Text zu Bild"):
@@ -333,7 +345,6 @@ def main_ui():
                     height=400
                 )
             
-            # Event-Handler
             model_dropdown.change(
                 fn=mock_update_model_settings,
                 inputs=[model_dropdown],
@@ -382,37 +393,35 @@ def main_ui():
             with gr.Row():
                 gr.Markdown("### 📐 Bildelementbereich anpassen")
             
+            # KORREKTUR: x1/x2 zuerst (oben), y1/y2 danach (unten)
             with gr.Row():
                 with gr.Column():
                     bbox_x1 = gr.Slider(
                         label="← Links (x1)", 
-                        minimum=0, maximum=4096, value=100, step=1,
-                        info="Linke Kante des Bildelementbereichs"
+                        minimum=0, maximum=4096, value=100, step=1
                     )
                 with gr.Column():
-                    bbox_x2 = gr.Slider(
+                    bbox_x2 = gr.Slider(  # KORREKT: x2, nicht y1
                         label="→ Rechts (x2)", 
-                        minimum=0, maximum=4096, value=100, step=1,
-                        info="Rechte Kante des Bildelementbereichs"
+                        minimum=0, maximum=4096, value=300, step=1  # KORREKT: 300 > 100
                     )
+            
             with gr.Row():
                 with gr.Column():
-                    bbox_y1 = gr.Slider(
+                    bbox_y1 = gr.Slider(  # KORREKT: y1, nicht x2
                         label="↑ Oben (y1)", 
-                        minimum=0, maximum=4096, value=300, step=1,
-                        info="Obere Kante des Bildelementbereichs"
+                        minimum=0, maximum=4096, value=100, step=1  # KORREKT: 100 < 300
                     )
                 with gr.Column():
                     bbox_y2 = gr.Slider(
                         label="↓ Unten (y2)", 
-                        minimum=0, maximum=4096, value=300, step=1,
-                        info="Untere Kante des Bildelementbereichs"
+                        minimum=0, maximum=4096, value=300, step=1
                     )
             
             with gr.Row():
                 with gr.Column():
                     pos_info = gr.Markdown(
-                        value="`[STIL-MOTIV], [UMGEBUNG], [VOR/HINTERGRUND]`",
+                        value="Format: [Stil], [Umgebung], [Details]",
                         elem_classes=["info-box"]
                     )
                     img_prompt = gr.Textbox(
@@ -424,7 +433,7 @@ def main_ui():
                     )
                 with gr.Column():
                     neg_info = gr.Markdown(
-                        value="`[GESICHTER/ANATOMIE], [FEHLER]`",
+                        value="Vermeide: [Fehler], [Unerwünschtes]",
                         elem_classes=["info-box"]
                     )        
                     img_neg_prompt = gr.Textbox(
@@ -492,20 +501,20 @@ def main_ui():
                     show_download_button=False
                 )
             
-            # Event-Handler
+            # KORREKTUR: coordinate_inputs in richtiger Reihenfolge (x1, x2, y1, y2)
+            coordinate_inputs = [img_input, bbox_x1, bbox_x2, bbox_y1, bbox_y2, mode_radio]
+            
             img_input.upload(
                 fn=mock_process_image_upload,
                 inputs=[img_input],
-                outputs=[preview_output, bbox_x1, bbox_y1, bbox_x2, bbox_y2]
+                outputs=[preview_output, bbox_x1, bbox_x2, bbox_y1, bbox_y2]
             ).then(
                 fn=mock_update_slider_for_image,
                 inputs=[img_input],
-                outputs=[bbox_x1, bbox_y1, bbox_x2, bbox_y2]
+                outputs=[bbox_x1, bbox_x2, bbox_y1, bbox_y2]
             )
             
-            coordinate_inputs = [img_input, bbox_x1, bbox_y1, bbox_x2, bbox_y2, mode_radio]
-            
-            for slider in [bbox_x1, bbox_y1, bbox_x2, bbox_y2]:
+            for slider in [bbox_x1, bbox_x2, bbox_y1, bbox_y2]:
                 slider.release(
                     fn=mock_update_live_preview,
                     inputs=coordinate_inputs,
@@ -527,7 +536,7 @@ def main_ui():
                 inputs=[
                     img_input, img_prompt, img_neg_prompt, 
                     strength_slider, img_steps, img_guidance, 
-                    mode_radio, bbox_x1, bbox_y1, bbox_x2, bbox_y2
+                    mode_radio, bbox_x1, bbox_x2, bbox_y1, bbox_y2
                 ],
                 outputs=[img_output, sam_raw_mask_output, processed_mask_output, 
                         pose_map_output, canny_map_output],