Update app.py

app.py

@@ -152,6 +152,77 @@ class ImageToImageProgressCallback:
         self.progress(progress_percent / 100, desc="Generierung läuft - CPU benötigt bis zu 20 Minuten!")
         return callback_kwargs
 
+# === NEUE FUNKTIONEN FÜR DIE FEATURES ===
+def create_preview_image(image, bbox_coords, face_preserve, mode_color):
+    """Erstellt eine Vorschau mit farbigem Rahmen basierend auf dem Modus"""
+    if image is None:
+        return None
+        
+    # Erstelle eine Kopie für die Vorschau
+    preview = image.copy()
+    draw = ImageDraw.Draw(preview)
+    
+    # Rahmenfarbe basierend auf Modus
+    if mode_color == "red":
+        border_color = (255, 0, 0, 180)  # Rot mit Transparenz
+        mode_text = "NUR BILDELEMENT VERÄNDERN"
+    else:
+        border_color = (0, 255, 0, 180)  # Grün mit Transparenz
+        mode_text = "BILDELEMENT BEIBEHALTEN"
+    
+    # Zeichne den Rahmen um das gesamte Bild
+    border_width = 8
+    draw.rectangle([0, 0, preview.width-1, preview.height-1], 
+                  outline=border_color, width=border_width)
+    
+    # Zeichne Bounding Box wenn Koordinaten vorhanden
+    if bbox_coords and all(coord is not None for coord in bbox_coords):
+        x1, y1, x2, y2 = bbox_coords
+        
+        # Rahmen für Bounding Box
+        box_color = (255, 255, 0, 200)  # Gelb für Bounding Box
+        draw.rectangle([x1, y1, x2, y2], outline=box_color, width=3)
+        
+        # Text-Label für den Modus
+        text_color = (255, 255, 255)
+        bg_color = (0, 0, 0, 160)
+        
+        # Hintergrund für Text
+        text_bbox = draw.textbbox((x1, y1 - 25), mode_text)
+        draw.rectangle([text_bbox[0]-5, text_bbox[1]-2, text_bbox[2]+5, text_bbox[3]+2], 
+                      fill=bg_color)
+        
+        # Text zeichnen
+        draw.text((x1, y1 - 25), mode_text, fill=text_color)
+    
+    return preview
+
+def update_live_preview(image, bbox_x1, bbox_y1, bbox_x2, bbox_y2, face_preserve):
+    """Aktualisiert die Live-Vorschau bei Koordinaten-Änderungen"""
+    if image is None:
+        return None
+    
+    bbox_coords = [bbox_x1, bbox_y1, bbox_x2, bbox_y2]
+    
+    # Bestimme Rahmenfarbe basierend auf Modus
+    mode_color = "green" if face_preserve else "red"
+    
+    return create_preview_image(image, bbox_coords, face_preserve, mode_color)
+
+def process_image_upload(image):
+    """Verarbeitet Bild-Upload und gibt Bild + Koordinaten zurück"""
+    if image is None:
+        return None, None, None, None, None
+    
+    # Auto-Koordinaten generieren
+    bbox = auto_detect_face_area(image)
+    bbox_x1, bbox_y1, bbox_x2, bbox_y2 = bbox
+    
+    # Vorschau mit grünem Rahmen (Standard: Gesicht beibehalten)
+    preview = create_preview_image(image, bbox, True, "green")
+    
+    return preview, bbox_x1, bbox_y1, bbox_x2, bbox_y2
+
 # === FUNKTIONEN ===
 def text_to_image(prompt, steps, guidance_scale, progress=gr.Progress()):
     try:
@@ -376,11 +447,32 @@ def main_ui():
         .image-upload .svelte-1p4f8co {
             display: block !important;
         }
+        .preview-box {
+            border: 2px dashed #ccc;
+            padding: 10px;
+            border-radius: 8px;
+            margin: 10px 0;
+        }
+        .mode-red {
+            border: 3px solid #ff4444 !important;
+        }
+        .mode-green {
+            border: 3px solid #44ff44 !important;
+        }
+        .coordinate-sliders {
+            background: #f8f9fa;
+            padding: 15px;
+            border-radius: 8px;
+            margin: 10px 0;
+        }
+        .gr-checkbox .wrap .text-gray {
+            font-size: 14px !important;
+            font-weight: 600 !important;
+            line-height: 1.4 !important;
+        }
         """
     ) as demo:
 
- 
-
         # --- Hauptanwendungsbereich (zunächst versteckt) ---
         with gr.Column(visible=True) as content_area:
             with gr.Tab("Text zu Bild"):
@@ -425,14 +517,64 @@ def main_ui():
             with gr.Tab("Bild zu Bild"):
                 gr.Markdown("**Lade ein Bild hoch und beschreibe die gewünschte Veränderung:**")
                 
+                # NEUE ANORDNUNG: Eingabebild und Live-Vorschau nebeneinander
+                with gr.Row():
+                    with gr.Column():
+                        img_input = gr.Image(
+                            type="pil", 
+                            label="Eingabebild",
+                            height=300,
+                            sources=["upload"],
+                            elem_id="image-upload"
+                        )
+                    with gr.Column():
+                        preview_output = gr.Image(
+                            label="🎯 Live-Vorschau mit Maske",
+                            height=300,
+                            interactive=False,
+                            show_download_button=False
+                        )
+                
+                # DARUNTER: Checkbox Gesicht/Person oder Umgebung ändern
                 with gr.Row():
-                    img_input = gr.Image(
-                        type="pil", 
-                        label="Eingabebild",
-                        height=300,
-                        sources=["upload"]  # Nur Upload-Button anzeigen
+                    face_preserve = gr.Checkbox(
+                        label="Schutz", 
+                        value=True,
+                        info="🟢 Checkbox AN: Alles AUSSERHALB des gelben Rahmens verändern | 🔴 Checkbox AUS: Nur INNERHALB des gelben Rahmens verändern"
                     )
                 
+                # DARUNTER: Bildelementbereich anpassen
+                with gr.Row():
+                    gr.Markdown("**Bildelementbereich anpassen**")
+                
+                with gr.Row():
+                    with gr.Column():
+                        bbox_x1 = gr.Slider(
+                            label="Links (x1)", 
+                            minimum=0, maximum=512, value=100, step=1,
+                            info="Linke Kante des Bildelementbereichs"
+                        )
+                    with gr.Column():
+                        bbox_y1 = gr.Slider(
+                            label="Oben (y1)", 
+                            minimum=0, maximum=512, value=100, step=1,
+                            info="Obere Kante des Bildelementbereichs"
+                        )
+                with gr.Row():
+                    with gr.Column():
+                        bbox_x2 = gr.Slider(
+                            label="Rechts (x2)", 
+                            minimum=0, maximum=512, value=300, step=1,
+                            info="Rechte Kante des Bildelementbereichs"
+                        )
+                    with gr.Column():
+                        bbox_y2 = gr.Slider(
+                            label="Unten (y2)", 
+                            minimum=0, maximum=512, value=300, step=1,
+                            info="Untere Kante des Bildelementbereichs"
+                        )
+                
+                # DARUNTER: Prompt und Negativ-Prompt
                 with gr.Row():
                     with gr.Column():
                         img_prompt = gr.Textbox(
@@ -449,6 +591,7 @@ def main_ui():
                             info="Was soll vermieden werden? Unerwünschte Elemente auflisten."
                         )
                 
+                # DARUNTER: Veränderungsstärke, Inferenzschritte, Promptstärke
                 with gr.Row():
                     with gr.Column():
                         strength_slider = gr.Slider(
@@ -468,48 +611,13 @@ def main_ui():
                             label="Prompt-Stärke",
                             info="Einfluss des Prompts auf das Ergebnis (6-10 für natürliche Ergebnisse)"
                         )
-                
-                # GESICHTSOPTIONEN
-                with gr.Row():
-                    face_preserve = gr.Checkbox(
-                        label="Gesicht, Tier, Gegenstand beibehalten", 
-                        value=True,
-                        info="Aktiviert: Bildelement bleibt erhalten, Hintergrund wird verändert | Deaktiviert: Nur Bildelement wird verändert"
-                    )
-                
-                with gr.Row():
-                    gr.Markdown("**Bildelementbereich anpassen**")
-                
-                with gr.Row():
-                    bbox_x1 = gr.Number(
-                        label="Links (x1)", 
-                        value=100, 
-                        precision=0,
-                        info="Linke Kante des Gesichtsbereichs"
-                    )
-                    bbox_y1 = gr.Number(
-                        label="Oben (y1)", 
-                        value=100, 
-                        precision=0,
-                        info="Obere Kante des Gesichtsbereichs"
-                    )
-                    bbox_x2 = gr.Number(
-                        label="Rechts (x2)", 
-                        value=300, 
-                        precision=0,
-                        info="Rechte Kante des Gesichtsbereichs"
-                    )
-                    bbox_y2 = gr.Number(
-                        label="Unten (y2)", 
-                        value=300, 
-                        precision=0,
-                        info="Untere Kante des Gesichtsbereichs"
-                    )
 
                 with gr.Row():
                    gr.Markdown(
                      "**Achtung:**\n"
-                     "• **Automatische Bildelementerkennung** setzt Koordinaten beim Upload\n"  
+                     "• **🆕 Automatische Bildelementerkennung** setzt Koordinaten beim Upload\n"  
+                     "• **🆕 Live-Vorschau** zeigt farbige Rahmen je nach Modus (🔴 Rot / 🟢 Grün)\n"
+                     "• **🆕 Koordinaten-Schieberegler** für präzise Anpassung mit Live-Update\n"
                      "• **Koordinaten nur bei erkennbaren Verzerrungen anpassen** (Bereiche leicht verschieben)"
                     )
                 
@@ -523,13 +631,49 @@ def main_ui():
                         type="pil"
                     )
                 
-                # Event-Handler für Bild-Upload
+                # NEUE: Event-Handler für alle Live-Updates
+                # Bild-Upload: Auto-Koordinaten + Vorschau
                 img_input.change(
-                    fn=update_bbox_from_image,
+                    fn=process_image_upload,
                     inputs=[img_input],
-                    outputs=[bbox_x1, bbox_y1, bbox_x2, bbox_y2]
+                    outputs=[preview_output, bbox_x1, bbox_y1, bbox_x2, bbox_y2]
+                )
+                
+                # Live-Updates bei Koordinaten-Änderungen
+                coordinate_inputs = [img_input, bbox_x1, bbox_y1, bbox_x2, bbox_y2, face_preserve]
+                
+                bbox_x1.change(
+                    fn=update_live_preview,
+                    inputs=coordinate_inputs,
+                    outputs=preview_output
+                )
+                
+                bbox_y1.change(
+                    fn=update_live_preview,
+                    inputs=coordinate_inputs,
+                    outputs=preview_output
+                )
+                
+                bbox_x2.change(
+                    fn=update_live_preview,
+                    inputs=coordinate_inputs,
+                    outputs=preview_output
+                )
+                
+                bbox_y2.change(
+                    fn=update_live_preview,
+                    inputs=coordinate_inputs,
+                    outputs=preview_output
+                )
+                
+                # Live-Update bei Modus-Änderung
+                face_preserve.change(
+                    fn=update_live_preview,
+                    inputs=coordinate_inputs,
+                    outputs=preview_output
                 )
                 
+                # Transform-Button (UNVERÄNDERT - gibt OUTPUT zurück)
                 transform_btn.click(
                     fn=img_to_image,
                     inputs=[