Update app.py

app.py

@@ -1,6 +1,3 @@
-#Eine neue Stable Diffusion (SD) Generation kommt mit neuem Tokenizer, mehrsprachiger Unterstützung, längerem Kontext 
-#und deutlich besserem Prompt-Verständnis - (Änderung Architektur).
-#Eine deutsche Alternative zur Umsetzung von Text-Bild zu Bild ist Flux - mit einer völlig anderen Architektur als SD!
 import gradio as gr
 from diffusers import StableDiffusionPipeline, StableDiffusionImg2ImgPipeline
 from diffusers import StableDiffusionInpaintPipeline
@@ -149,6 +146,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:
@@ -357,6 +425,24 @@ 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;
+        }
         """
     ) as demo:
 
@@ -488,11 +574,22 @@ def main_ui():
                 gr.Markdown("**Lade ein Bild hoch und beschreibe die gewünschte Veränderung:**")
                 
                 with gr.Row():
+                    # NEUE: Bild-Upload mit Vorschau
                     img_input = gr.Image(
                         type="pil", 
                         label="Eingabebild",
                         height=300,
-                        sources=["upload"]  # Nur Upload-Button anzeigen
+                        sources=["upload"],  # Nur Upload-Button anzeigen
+                        elem_id="image-upload"
+                    )
+                
+                with gr.Row():
+                    # NEUE: Vorschau-Bild mit Live-Updates
+                    preview_output = gr.Image(
+                        label="🎯 Live-Vorschau mit Maske",
+                        height=300,
+                        interactive=False,
+                        show_download_button=False
                     )
                 
                 with gr.Row():
@@ -536,42 +633,46 @@ def main_ui():
                     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"
+                        info="🟢 GRÜN: Bildelement bleibt erhalten, Hintergrund wird verändert | 🔴 ROT: Nur Bildelement wird verändert"
                     )
                 
                 with gr.Row():
                     gr.Markdown("**Bildelementbereich anpassen**")
                 
+                # NEUE: Koordinaten-Schieberegler mit Live-Update
                 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.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"
+                        )
 
                 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)"
                     )
                 
@@ -585,13 +686,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=[