app.py

import gradio as gr
from diffusers import StableDiffusionPipeline, StableDiffusionImg2ImgPipeline
from diffusers import StableDiffusionInpaintPipeline
import torch
from PIL import Image, ImageDraw, ImageFont
import time
import os
import tempfile
import random

# === OPTIMIERTE EINSTELLUNGEN ===
device = "cuda" if torch.cuda.is_available() else "cpu"
torch_dtype = torch.float16 if device == "cuda" else torch.float32
IMG_SIZE = 512

print(f"Running on: {device}")

# === TEXT INTEGRATION IMPORT ===
from text_integration import (
    add_text_to_image, 
    create_text_integration_section_t2i,
    create_text_integration_section_i2i,
    capture_click,
    update_text_preview_i2i,
    update_text_preview_t2i
)

# === GESICHTSMASKEN-FUNKTIONEN ===
def create_face_mask(image, bbox_coords, face_preserve):
    """Erzeugt eine Gesichtsmaske - WEIßE Bereiche werden VERÄNDERT, SCHWARZE BLEIBEN"""
    mask = Image.new("L", image.size, 0)
    
    if bbox_coords and all(coord is not None for coord in bbox_coords):
        x1, y1, x2, y2 = bbox_coords
        draw = ImageDraw.Draw(mask)
        
        if face_preserve:
            draw.rectangle([0, 0, image.size[0], image.size[1]], fill=255)
            draw.rectangle([x1, y1, x2, y2], fill=0)
            print("Gesicht wird GESCHÜTZT - Umgebung wird verändert")
        else:
            draw.rectangle([x1, y1, x2, y2], fill=255)
            print("Nur Gesicht wird verändert - Umgebung bleibt erhalten")
    
    return mask

def auto_detect_face_area(image):
    """Optimierten Vorschlag für Gesichtsbereich ohne externe Bibliotheken"""
    width, height = image.size
    face_size = min(width, height) * 0.4
    x1 = (width - face_size) / 2
    y1 = (height - face_size) / 4
    x2 = x1 + face_size
    y2 = y1 + face_size * 1.2
    x1, y1 = max(0, int(x1)), max(0, int(y1))
    x2, y2 = min(width, int(x2)), min(height, int(y2))
    print(f"Geschätzte Gesichtskoordinaten: [{x1}, {y1}, {x2}, {y2}]")
    return [x1, y1, x2, y2]

# === PIPELINES ===
pipe_txt2img = None
pipe_img2img = None

def load_txt2img():
    global pipe_txt2img
    if pipe_txt2img is None:
        print("Loading Text-to-Image model...")
        pipe_txt2img = StableDiffusionPipeline.from_pretrained(
            "runwayml/stable-diffusion-v1-5",
            torch_dtype=torch_dtype,
            use_safetensors=True,
            safety_checker=None,
            requires_safety_checker=False,
        ).to(device)
        
        from diffusers import DPMSolverMultistepScheduler
        pipe_txt2img.scheduler = DPMSolverMultistepScheduler.from_config(pipe_txt2img.scheduler.config)
        pipe_txt2img.enable_attention_slicing()
    return pipe_txt2img

def load_img2img():
    global pipe_img2img
    if pipe_img2img is None:
        print("Loading Inpainting model...")
        try:
            pipe_img2img = StableDiffusionInpaintPipeline.from_pretrained(
                "runwayml/stable-diffusion-inpainting",
                torch_dtype=torch_dtype,
                allow_pickle=False,
                safety_checker=None,
            ).to(device)
        except Exception as e:
            print(f"Fehler beim Laden des Modells: {e}")
            raise

        from diffusers import DPMSolverMultistepScheduler
        pipe_img2img.scheduler = DPMSolverMultistepScheduler.from_config(
            pipe_img2img.scheduler.config,
            algorithm_type="sde-dpmsolver++",
            use_karras_sigmas=True,
            timestep_spacing="trailing"
        )
        
        pipe_img2img.enable_attention_slicing()
        pipe_img2img.enable_vae_tiling()
        pipe_img2img.vae_slicing = True

    return pipe_img2img

# === CALLBACK-FUNKTIONEN ===
class TextToImageProgressCallback:
    def __init__(self, progress, total_steps):
        self.progress = progress
        self.total_steps = total_steps
        self.current_step = 0
    
    def __call__(self, pipe, step, timestep, callback_kwargs):
        self.current_step = step + 1
        progress_percent = (step / self.total_steps) * 100
        self.progress(progress_percent / 100, desc="Generierung läuft - CPU benötigt bis zu 20 Minuten!")
        return callback_kwargs

class ImageToImageProgressCallback:
    def __init__(self, progress, total_steps, strength):
        self.progress = progress
        self.total_steps = total_steps
        self.current_step = 0
        self.strength = strength
        self.actual_total_steps = None

    def __call__(self, pipe, step, timestep, callback_kwargs):
        self.current_step = step + 1
    
        if self.actual_total_steps is None:
            if self.strength < 1.0:
                self.actual_total_steps = int(self.total_steps * self.strength)
            else:
                self.actual_total_steps = self.total_steps
            
            print(f"🎯 INTERNE STEP-AUSGABE: Strength {self.strength} → {self.actual_total_steps} tatsächliche Denoising-Schritte")
        
        progress_percent = (step / self.actual_total_steps) * 100
        self.progress(progress_percent / 100, desc="Generierung läuft - CPU benötigt bis zu 20 Minuten!")
        return callback_kwargs

# === VORSCHAU-FUNKTIONEN ===
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
        
    preview = image.copy()
    draw = ImageDraw.Draw(preview)
    
    if mode_color == "red":
        border_color = (255, 0, 0, 180)
        mode_text = "NUR BILDELEMENT VERÄNDERN"
    else:
        border_color = (0, 255, 0, 180)
        mode_text = "BILDELEMENT BEIBEHALTEN"
    
    border_width = 8
    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 = bbox_coords
        
        box_color = (255, 255, 0, 200)
        draw.rectangle([x1, y1, x2, y2], outline=box_color, width=3)
        
        text_color = (255, 255, 255)
        bg_color = (0, 0, 0, 160)
        
        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)
        
        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]
    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
    
    bbox = auto_detect_face_area(image)
    bbox_x1, bbox_y1, bbox_x2, bbox_y2 = bbox
    preview = create_preview_image(image, bbox, True, "green")
    
    return preview, bbox_x1, bbox_y1, bbox_x2, bbox_y2

# === HAUPTPROZESSE ===
def text_to_image(prompt, steps, guidance_scale, progress=gr.Progress()):
    try:
        if not prompt or not prompt.strip():
            return None, None
            
        print(f"Starting generation for: {prompt}")
        start_time = time.time()
        
        progress(0, desc="Generierung läuft - CPU benötigt bis zu 20 Minuten!")
        
        pipe = load_txt2img()
        
        seed = random.randint(0, 2**32 - 1)
        generator = torch.Generator(device=device).manual_seed(seed)
        print(f"Using seed: {seed}")
        
        callback = TextToImageProgressCallback(progress, steps)
        
        image = pipe(
            prompt=prompt,
            height=IMG_SIZE,
            width=IMG_SIZE,
            num_inference_steps=int(steps),
            guidance_scale=guidance_scale,
            generator=generator,
            callback_on_step_end=callback,
            callback_on_step_end_tensor_inputs=[],
        ).images[0]
        
        end_time = time.time()
        print(f"Bild generiert in {end_time - start_time:.2f} Sekunden")
        
        return image, image
        
    except Exception as e:
        print(f"Fehler: {e}")
        import traceback
        traceback.print_exc()
        return None, None

def img_to_image(image, prompt, neg_prompt, strength, steps, guidance_scale, face_preserve, bbox_x1, bbox_y1, bbox_x2, bbox_y2, progress=gr.Progress()):
    try:
        if image is None:
            return None

        print(f"Img2Img Start → Strength: {strength}, Steps: {steps}, Guidance: {guidance_scale}")
        start_time = time.time()

        progress(0, desc="Generierung läuft - CPU benötigt bis zu 20 Minuten!")

        pipe = load_img2img()
        img_resized = image.convert("RGB").resize((IMG_SIZE, IMG_SIZE))

        adj_strength = min(0.85, strength * 1.3)
        adj_guidance = min(guidance_scale, 12.0)
    
        seed = random.randint(0, 2**32 - 1)
        generator = torch.Generator(device=device).manual_seed(seed)
        print(f"Using seed: {seed}")

        mask = None
        bbox_coords = None
        
        if bbox_x1 is not None and bbox_y1 is not None and bbox_x2 is not None and bbox_y2 is not None:
            orig_width, orig_height = image.size
            scale_x = IMG_SIZE / orig_width
            scale_y = IMG_SIZE / orig_height
            
            scaled_coords = [
                int(bbox_x1 * scale_x),
                int(bbox_y1 * scale_y),
                int(bbox_x2 * scale_x),
                int(bbox_y2 * scale_y)
            ]
            bbox_coords = scaled_coords

        if bbox_coords:
            mask = create_face_mask(img_resized, bbox_coords, face_preserve)

        callback = ImageToImageProgressCallback(progress, int(steps), adj_strength)

        result = pipe(
            prompt=prompt,
            negative_prompt=neg_prompt,
            image=img_resized,
            mask_image=mask,
            strength=adj_strength,
            num_inference_steps=int(steps),
            guidance_scale=adj_guidance,
            generator=generator,
            callback_on_step_end=callback,
            callback_on_step_end_tensor_inputs=[],
        )

        end_time = time.time()
        print(f"Bild transformiert in {end_time - start_time:.2f} Sekunden")
        
        generated_image = result.images[0]

        return generated_image
        
    except Exception as e:
        print(f"Fehler: {e}")
        import traceback
        traceback.print_exc()
        return None

# === TEXT INTEGRATION HANDLER ===
def handle_text_integration_i2i(original_image, generated_image, text, text_x, text_y, font_size, font_family, font_color, target_selector):
    """Verwaltet Text-Integration für Bild-zu-Bild basierend auf Auswahl"""
    if target_selector == "Originalbild":
        target_image = original_image
    else:  # "Generiertes Bild"
        target_image = generated_image
    
    result = add_text_to_image(target_image, text, text_x, text_y, font_size, font_family, font_color)
    
    # Rückgabe: Original bleibt unverändert, Text-Bild kommt in Download-Bereich
    return original_image, result

def handle_text_integration_t2i(generated_image, text, text_x, text_y, font_size, font_family, font_color):
    """Verwaltet Text-Integration für Text-zu-Bild"""
    result = add_text_to_image(generated_image, text, text_x, text_y, font_size, font_family, font_color)
    return result

def main_ui():
    with gr.Blocks(
        title="AI Image Generator", 
        theme=gr.themes.Base(),
        css="""
        .info-box {
            background-color: #f8f4f0; 
            padding: 15px; 
            border-radius: 8px; 
            border-left: 4px solid #8B7355;
            margin: 20px 0;
        }
        .text-integration-section {
            background: #e8f5e8;
            padding: 15px;
            border-radius: 8px;
            margin: 15px 0;
            border-left: 4px solid #4caf50;
        }
        .clickable-file {
            color: #8B7355;
            text-decoration: underline;
            font-weight: bold;
        }
        .clickable-file:hover {
            color: #6b5a45;
        }
        """
    ) as demo:

        # --- Info-Bereich (Startseite) ---
        gr.Markdown(
        """
        # Demo-Projekt: Stable Diffusion Text-to-Image / Image-to-Image
        <br>
    
        <div class="info-box" style="border-left: 4px solid #4F46E5; background: linear-gradient(135deg, #f8faff 0%, #ffffff 100%);">
        <div style="font-size: 1.2em; font-weight: bold; color: #4F46E5; margin-bottom: 15px;">🎯 Projekt & Kompetenzen</div>
        Dieses 4-Wochen-Projekt ist ein kleines <strong>Demo</strong> um meine zentralen Kompetenzen als <strong>AI-Engineer</strong> – sowohl in der technischen Umsetzung <br>
        als auch in der strukturierten Entwicklung komplexer Workflows zu präsentieren. Es bildet <strong>grundlegende Stable-Diffusion-Prozesse</strong> ab, während ich in anderen <br>
        GPU-basierten Umgebungen <strong>erweiterte Text-to-Image und Image-to-Image-Pipelines mit präzisem Inpainting über ControlNet</strong> realisiere. Durch den Einsatz von <br>
        <strong>multi-modalen Modellen mit höherer Parameteranzahl</strong> wird eine deutlich detailliertere und kontrolliertere Bildgenerierung ermöglicht.
        </div>
        <br>
   
        <div class="info-box" style="border-left: 4px solid #10B981; background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);">
        <div style="font-size: 1.2em; font-weight: bold; color: #10B981; margin-bottom: 15px;">📊 Code-Architektur & Roadmap</div>
        Zudem führt der Link
        <a class="clickable-file" href="https://huggingface.co/spaces/Astridkraft/Dokumentation" target="_blank">Roadmap</a>
        zu einer <strong>durchdachten, skalierbaren, professionellen Code-Architektur</strong> für Text-to-Image- und Image-to-Image-Entwicklung <br>
        die die <strong>gesamte Komplexität einer professionellen Umsetzung</strong> verdeutlicht.<br><br>     
        Die hiermit gezeigten Fähigkeiten meinerseits sind <strong>sicherlich auf andere Projekte übertragbar</strong>.
        </div>         
        <br>
    
        <div class="info-box" style="border-left: 4px solid #F59E0B; background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);">
        <div style="font-size: 1.2em; font-weight: bold; color: #F59E0B; margin-bottom: 15px;">⚠️ Wichtiger Hinweis</div>
        <strong>Hinweis:</strong><br>
        Die Anwendung läuft derzeit auf <strong>CPU</strong> ist jedoch <strong>vollständig GPU-fähig </strong>.
        Deshalb muss bei jeder Generierung eine <strong>längere Wartezeit</strong> eingeplant werden.<br>
        Bei <strong>Verbindungsabbrüchen</strong> -insbesondere bei CPU-Nutzung- wird die aktuelle Generierung zunächst serverseitig vollständig abgeschlossen, <br>
        bevor neue Anfragen bearbeitet werden. Das generierte Bild wird in diesem Fall <strong>nicht angezeigt</strong>. 
        Die Meldung <strong>Connection re-established</strong> signalisiert, dass <br>
        die Verbindung wiederhergestellt wurde, die laufende Verarbeitung jedoch priorisiert wird. In der Konsequenz werden neue <br>
        Generierungsanfragen in eine Warteschlange gestellt und erst nach vollständigem Abschluss der aktuellen serverseitigen Berechnung verarbeitet.
        </div>
        <br>

        <div class="info-box" style="border-left: 4px solid #EF4444; background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);">
        <div style="font-size: 1.2em; font-weight: bold; color: #EF4444; margin-bottom: 15px;">🔧 Technischer Hintergrund</div>
        <strong>Technischer Hintergrund zu Verbindungsabbrüchen:</strong><br>
        Die Anwendung nutzt <strong>Gradio auf Hugging Face Spaces</strong> - eine Technologie, die <strong>keine temporäre Speicherung</strong> 
        generierter Bilder vorsieht. Jede Verbindung <br> wird als <strong>unabhängige Sitzung</strong> behandelt.
        Dies wird <strong>besonders bei CPU-Nutzung relevant</strong>, da längere Transformationszeiten die Wahrscheinlichkeit 
        für <br> Timeouts und Seiten-Neuladungen erhöhen. Obwohl die Bildgenerierung serverseitig vollständig abgeschlossen wird, 
        kann das Ergebnis bei <br> Verbindungsunterbrechungen <strong>nicht an die neu geladene Seite übermittelt</strong> werden.<br><br>
        </div>
        <br>
    
        <div class="info-box" style="border-left: 4px solid #8B5CF6; background: linear-gradient(135deg, #faf5ff 0%, #ffffff 100%);">
        <div style="font-size: 1.2em; font-weight: bold; color: #8B5CF6; margin-bottom: 15px;">🔄 Anwendungsbereich & Workflow</div>
        <strong>Anwendungsbereich</strong><br>
        Die Bild-zu-Bild-Transformation ermöglicht die <strong>gezielte Modifikation bestehender Bildelemente</strong> - 
        beispielsweise die Umwandlung einer Laterne <br> in eine Fackel, einer Katze in einen Hund, oder die Versetzung einer Person 
        vom Büro an einen tropischen Strand bei Beibehaltung des Gesichts.<br>
        Es können <strong>keine neuen Objekte generiert</strong>, sondern ausschließlich <strong>vorhandene Elemente transformiert</strong> werden.<br><br>

        Die Funktion unterstützt zwei operative Modi:<br>
        &nbsp;&nbsp;• <strong>Kontexttransformation:</strong> Veränderung der Umgebung bei Beibehaltung eines markierten Bildbereichs (z.B. Gesicht)<br>
        &nbsp;&nbsp;• <strong>Fokustransformation:</strong> Veränderung eines markierten Bereichs (z.B. Objekt) bei Beibehaltung der Umgebung<br><br>

        <strong>Optimale Workflow-Empfehlung:</strong><br>
        Zur Gewährleistung optimaler Ergebnisse werden Bilder im Format <strong>512×512 Pixel</strong> verarbeitet. 
        Ein effizienter Workflow umfasst:<br>
        &nbsp;&nbsp;1. Generierung von Basis-Bildern über <strong>Text-zu-Bild</strong><br>
        &nbsp;&nbsp;2. Gezielte Transformation über <strong>Bild-zu-Bild</strong><br>
        &nbsp;&nbsp;3. Optionale Textintegration auf generierten oder originalen Basis-Bildern<br><br>

        <strong>Textintegration:</strong> Beide Arbeitsbereiche bieten die Möglichkeit zur <strong>flexiblen Textintegration</strong> auf generierten sowie originalen Bildvorlagen.
        </div>
        <br>
    
        <div class="info-box" style="border-left: 4px solid #EC4899; background: linear-gradient(135deg, #fdf2f8 0%, #ffffff 100%);">
        <div style="font-size: 1.2em; font-weight: bold; color: #EC4899; margin-bottom: 15px;">💡 Empfehlungen & Best Practices</div>
        <strong>Empfehlung:</strong><br>
        Für eine präzise Abstimmung der zentralen Parameter – Prompt, Negativ-Prompt, Veränderungsstärke (Strength), Inferenz-Schritte (Steps) <br>
        und Prompt-Stärke (Guidance) – liefern leistungsfähige Sprachmodelle wie GPT, Grok oder DeepSeek hochqualitative, kontextbezogene Vorschläge.<br>
        Prompt und Negativ-Prompt sollten auf <strong>Englisch</strong> eingegeben werden, da "Stable Diffusion" mit Bild-Text-Paaren auf Englisch trainiert <br>
        wurde und CLIP einen Tokenizer für ein englisches Vokabular nutzt. Der CLIP-Tokenizer hat außerdem ein <strong>Limit von 77 Token</strong>, wodurch längere <br>
        Prompteingaben automatisch abgeschnitten werden. Deutsche Wörter werden zwar übersetzt, führen aber zu Verzerrungen.
        </div>
        <br>
    
        <div style="text-align: center; margin-top: 30px; padding: 25px; background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%); color: white; border-radius: 12px;">
        <div style="font-size: 1.4em; font-weight: bold; margin-bottom: 10px;">🚀 Bereit für die AI-Bildgenerierung?</div>
        Starten Sie jetzt mit der Erkundung der Text-zu-Bild und Bild-zu-Bild Funktionen!
        </div>
        """
        )

        # --- Info-Bereich (Startseite) ---
        gr.Markdown(
            """
            # Demo-Projekt: Stable Diffusion Text-to-Image / Image-to-Image
            <br>

            <div class="info-box">
            Dieses 4-Wochen-Projekt ist ein kleines <strong>Demo</strong> um meine zentralen Kompetenzen als <strong>AI-Engineer</strong> – sowohl in der technischen Umsetzung <br>
            als auch in der strukturierten Entwicklung komplexer Workflows zu präsentieren. Es bildet <strong>grundlegende Stable-Diffusion-Prozesse</strong> ab, während ich in anderen <br>
            GPU-basierten Umgebungen <strong>erweiterte Text-to-Image und Image-to-Image-Pipelines mit präzisem Inpainting über ControlNet</strong> realisiere. Durch den Einsatz von <br>
            <strong>multi-modalen Modellen mit höherer Parameteranzahl</strong> wird eine deutlich detailliertere und kontrolliertere Bildgenerierung ermöglicht.
            </div>
            <br>
           
            <div class="info-box">
            Zudem führt der Link
            <a class="clickable-file" href="https://huggingface.co/spaces/Astridkraft/Dokumentation" target="_blank">Roadmap</a>
            zu einer <strong>durchdachten, skalierbaren, professionellen Code-Architektur</strong> für Text-to-Image- und Image-to-Image-Entwicklung <br>
            die die <strong>gesamte Komplexität einer professionellen Umsetzung</strong> verdeutlicht.<br><br>     
            Die hiermit gezeigten Fähigkeiten meinerseits sind <strong>sicherlich auf andere Projekte übertragbar</strong>.
            </div>         
            <br><br>
            
            <div class="info-box">
            <strong>Hinweis:</strong><br>
            Die Anwendung läuft derzeit auf <strong>CPU</strong> ist jedoch <strong>vollständig GPU-fähig </strong>.
            Deshalb muss bei jeder Generierung eine <strong>längere Wartezeit</strong> eingeplant werden.<br>
            Bei <strong>Verbindungsabbrüchen</strong> -insbesondere bei CPU-Nutzung- wird die aktuelle Generierung zunächst serverseitig vollständig abgeschlossen, <br>
            bevor neue Anfragen bearbeitet werden. Das generierte Bild wird in diesem Fall <strong>nicht angezeigt</strong>. 
            Die Meldung <strong>Connection re-established</strong> signalisiert, dass <br>
            die Verbindung wiederhergestellt wurde, die laufende Verarbeitung jedoch priorisiert wird. In der Konsequenz werden neue <br>
            Generierungsanfragen in eine Warteschlange gestellt und erst nach vollständigem Abschluss der aktuellen serverseitigen Berechnung verarbeitet.
            </div>
             <br>

            <div class="info-box">
            <strong>Technischer Hintergrund zu Verbindungsabbrüchen:</strong><br>
            Die Anwendung nutzt <strong>Gradio auf Hugging Face Spaces</strong> - eine Technologie, die <strong>keine temporäre Speicherung</strong> 
            generierter Bilder vorsieht. Jede Verbindung <br> wird als <strong>unabhängige Sitzung</strong> behandelt.
            Dies wird <strong>besonders bei CPU-Nutzung relevant</strong>, da längere Transformationszeiten die Wahrscheinlichkeit 
            für <br> Timeouts und Seiten-Neuladungen erhöhen. Obwohl die Bildgenerierung serverseitig vollständig abgeschlossen wird, 
            kann das Ergebnis bei <br> Verbindungsunterbrechungen <strong>nicht an die neu geladene Seite übermittelt</strong> werden.<br><br>
            </div>
             
            
            <div class="info-box">
            <strong>Anwendungsbereich</strong><br>
            Die Bild-zu-Bild-Transformation ermöglicht die <strong>gezielte Modifikation bestehender Bildelemente</strong> - 
            beispielsweise die Umwandlung einer Laterne <br> in eine Fackel, einer Katze in einen Hund, oder die Versetzung einer Person 
            vom Büro an einen tropischen Strand bei Beibehaltung des Gesichts.<br>
            Es können <strong>keine neuen Objekte generiert</strong>, sondern ausschließlich <strong>vorhandene Elemente transformiert</strong> werden.<br>

            Die Funktion unterstützt zwei operative Modi:<br>
            &nbsp;&nbsp;• <strong>Kontexttransformation:</strong> Veränderung der Umgebung bei Beibehaltung eines markierten Bildbereichs (z.B. Gesicht)<br>
            &nbsp;&nbsp;• <strong>Fokustransformation:</strong> Veränderung eines markierten Bereichs (z.B. Objekt) bei Beibehaltung der Umgebung<br>

            <strong>Optimale Workflow-Empfehlung:</strong><br>
            Zur Gewährleistung optimaler Ergebnisse werden Bilder im Format <strong>512×512 Pixel</strong> verarbeitet. 
            Ein effizienter Workflow umfasst:<br>
            &nbsp;&nbsp;1. Generierung von Basis-Bildern über <strong>Text-zu-Bild</strong><br>
            &nbsp;&nbsp;2. Gezielte Transformation über <strong>Bild-zu-Bild</strong><br>
            &nbsp;&nbsp;3. Optionale Textintegration auf generierten oder originalen Basis-Bildern<br>

            <strong>Textintegration:</strong> Beide Arbeitsbereiche bieten die Möglichkeit zur <strong>flexiblen Textintegration</strong> auf generierten sowie originalen Bildvorlagen.
            </div>
            <br>
            
            <div class="info-box">
            <strong>Empfehlung:</strong><br>
            Für eine präzise Abstimmung der zentralen Parameter – Prompt, Negativ-Prompt, Veränderungsstärke (Strength), Inferenz-Schritte (Steps) <br>
            und Prompt-Stärke (Guidance) – liefern leistungsfähige Sprachmodelle wie GPT, Grok oder DeepSeek hochqualitative, kontextbezogene Vorschläge.<br>
            Prompt und Negativ-Prompt sollten auf <strong>Englisch</strong> eingegeben werden, da "Stable Diffusion" mit Bild-Text-Paaren auf Englisch trainiert <br>
            wurde und CLIP einen Tokenizer für ein englisches Vokabular nutzt. Der CLIP-Tokenizer hat außerdem ein <strong>Limit von 77 Token</strong>, wodurch längere <br>
            Prompteingaben automatisch abgeschnitten werden. Deutsche Wörter werden zwar übersetzt, führen aber zu Verzerrungen.
            </div>
            <br><br>
            
            """
        )

        # --- Button zentriert im unteren Drittel, Taupe-Farbe ---
        with gr.Row():
            with gr.Column(scale=1):  # Linker Leerraum
                pass
            with gr.Column(scale=1, min_width=300):  # Mittig, feste Mindestbreite
                start_btn = gr.Button(
                    "Weiter zur Anwendung",
                    variant="primary",
                    size="lg",
                    elem_id="start-button"
                )
            with gr.Column(scale=1):  # Rechter Leerraum
                pass

        # --- Hauptanwendungsbereich ---
        with gr.Column(visible=False) as content_area:
            
            # === TAB: TEXT ZU BILD ===
            with gr.Tab("Text zu Bild"):
                gr.Markdown("**Beschreibe dein gewünschtes Bild:**")
                
                with gr.Row():
                    txt_input = gr.Textbox(
                        placeholder="z.B. ultra realistic mountain landscape at sunrise...",
                        lines=2,
                        label="Prompt (Englisch)"
                    )
                
                with gr.Row():
                    with gr.Column():
                        txt_steps = gr.Slider(
                            minimum=10, maximum=100, value=35, step=1,
                            label="Inferenz-Schritte"
                        )
                    with gr.Column():
                        txt_guidance = gr.Slider(
                            minimum=1.0, maximum=20.0, value=7.5, step=0.5,
                            label="Prompt-Stärke"
                        )
                
                generate_btn = gr.Button("Bild generieren", variant="primary")
                
                # NEUE ANORDNUNG: Bilder nebeneinander
                with gr.Row():
                    with gr.Column():
                        txt_output = gr.Image(
                            label="Generiertes Bild", 
                            show_download_button=True,
                            type="pil",
                            height=400,
                            #sources=[]  #damit verschwinden die Upload-Symbole, nicht gut für Desktop!
                        )
                    with gr.Column():
                        preview_t2i = gr.Image(
                            label="Vorschau für Textposition (Klicken/Tippen um Position zu wählen)",
                            interactive=True,
                            type="pil",
                            height=400,
                            sources=[] #Button verschwinden, download trotzdem möglich! Gradio-Problem
                        )
                
                # TEXT INTEGRATION UNTERHALB DER BILDER
                with gr.Row():
                    gr.Markdown("### 📝 Text auf Bild integrieren")
                
                with gr.Row():
                    text_input_t2i = gr.Textbox(
                        label="Text eingeben",
                        placeholder="Dein Text hier...",
                        max_lines=2,
                        scale=3
                    )
                
                # NEUE TEXT-FORMATIERUNGSOPTIONEN
                with gr.Row():
                    with gr.Column():
                        font_size_t2i = gr.Dropdown(
                            choices=["120px", "80px", "60px", "40px", "20px", "10px"],
                            value="60px",
                            label="Schriftgröße"
                        )
                    with gr.Column():
                        font_family_t2i = gr.Dropdown(
                            choices=["Standard", "Einfache Handschrift", "Verschnörkelte Handschrift"],
                            value="Standard",
                            label="Schriftart"
                        )
                    with gr.Column():
                        font_color_t2i = gr.Dropdown(
                            choices=["Weiß", "Schwarz", "Rot"],
                            value="Weiß",
                            label="Schriftfarbe"
                        )
                
                with gr.Row():
                    text_x_t2i = gr.Number(value=None, visible=False)
                    text_y_t2i = gr.Number(value=None, visible=False)
                    
                with gr.Row():
                    text_btn_t2i = gr.Button("📝 Text auf generiertes Bild", variant="secondary")
                
                # CLICK HANDLER FÜR TEXT-zu-BILD
                preview_t2i.select(
                    fn=capture_click,
                    outputs=[text_x_t2i, text_y_t2i]
                )
                
                # LIVE-TEXT-VORSCHAU FÜR TEXT-ZU-BILD MIT FORMATIERUNG
                text_inputs_t2i = [txt_output, text_input_t2i, text_x_t2i, text_y_t2i, font_size_t2i, font_family_t2i, font_color_t2i]
                
                text_input_t2i.change(
                    fn=update_text_preview_t2i,
                    inputs=text_inputs_t2i,
                    outputs=preview_t2i
                )
                
                text_x_t2i.change(
                    fn=update_text_preview_t2i,
                    inputs=text_inputs_t2i,
                    outputs=preview_t2i
                )
                
                text_y_t2i.change(
                    fn=update_text_preview_t2i,
                    inputs=text_inputs_t2i,
                    outputs=preview_t2i
                )
                
                font_size_t2i.change(
                    fn=update_text_preview_t2i,
                    inputs=text_inputs_t2i,
                    outputs=preview_t2i
                )
                
                font_family_t2i.change(
                    fn=update_text_preview_t2i,
                    inputs=text_inputs_t2i,
                    outputs=preview_t2i
                )
                
                font_color_t2i.change(
                    fn=update_text_preview_t2i,
                    inputs=text_inputs_t2i,
                    outputs=preview_t2i
                )
                
                # EVENT-HANDLER TEXT-zu-BILD
                generate_btn.click(
                    fn=text_to_image,
                    inputs=[txt_input, txt_steps, txt_guidance],
                    outputs=[txt_output, preview_t2i],
                    concurrency_limit=1
                )
                
                text_btn_t2i.click(
                    fn=handle_text_integration_t2i,
                    inputs=[
                        txt_output,
                        text_input_t2i,
                        text_x_t2i,
                        text_y_t2i,
                        font_size_t2i,
                        font_family_t2i,
                        font_color_t2i
                    ],
                    outputs=txt_output
                )

            # === TAB: BILD ZU BILD ===
            with gr.Tab("Bild zu Bild"):
                gr.Markdown("**Lade ein Bild hoch und beschreibe die gewünschte Veränderung:**")
                
                with gr.Row():
                    with gr.Column():
                        img_input = gr.Image(
                            type="pil", 
                            label="Eingabebild",
                            height=300,
                            sources=["upload"]
                        )
                    with gr.Column():
                        preview_output = gr.Image(
                            label="Live-Vorschau mit Maske (Klicken/Tippen für Textposition)",
                            height=300,
                            interactive=True,
                            show_download_button=False,
                            sources=[]
                        )
                
                with gr.Row():
                    face_preserve = gr.Checkbox(
                        label="Schutz", 
                        value=True,
                        info="🟢 AN: Umgebung verändern | 🔴 AUS: Objekt verändern"
                    )
                
                with gr.Row():
                    with gr.Column():
                        bbox_x1 = gr.Slider(label="Links (x1)", minimum=0, maximum=512, value=100, step=1)
                    with gr.Column():
                        bbox_y1 = gr.Slider(label="Oben (y1)", minimum=0, maximum=512, value=100, step=1)
                with gr.Row():
                    with gr.Column():
                        bbox_x2 = gr.Slider(label="Rechts (x2)", minimum=0, maximum=512, value=300, step=1)
                    with gr.Column():
                        bbox_y2 = gr.Slider(label="Unten (y2)", minimum=0, maximum=512, value=300, step=1)
                
                with gr.Row():
                    with gr.Column():
                        img_prompt = gr.Textbox(
                            placeholder="change background to beach with palm trees...",
                            lines=2,
                            label="Transformations-Prompt"
                        )
                    with gr.Column():
                        img_neg_prompt = gr.Textbox(
                            placeholder="blurry, deformed, ugly...",
                            lines=2,
                            label="Negativ-Prompt"
                        )
                
                with gr.Row():
                    with gr.Column():
                        strength_slider = gr.Slider(minimum=0.1, maximum=0.9, value=0.4, step=0.05, label="Veränderungs-Stärke")
                    with gr.Column():
                        img_steps = gr.Slider(minimum=10, maximum=100, value=35, step=1, label="Inferenz-Schritte")
                    with gr.Column():
                        img_guidance = gr.Slider(minimum=1.0, maximum=20.0, value=7.5, step=0.5, label="Prompt-Stärke")
                
                transform_btn = gr.Button("Bild transformieren", variant="primary")
                
                with gr.Row():
                    img_output = gr.Image(
                        label="Transformiertes Bild",
                        show_download_button=True,
                        type="pil"
                    )
                
                # TEXT INTEGRATION FÜR BILD-zu-BILD mit Pulldown-Menüs
                with gr.Row():
                    gr.Markdown("### 📝 Text auf Bild integrieren")
                
                with gr.Row():
                    text_input_i2i = gr.Textbox(
                        label="Text eingeben",
                        placeholder="Dein Text hier...",
                        max_lines=2,
                        scale=3
                    )
                
                # NEUE PULLDOWN-MENÜS FÜR BILD-ZU-BILD
                with gr.Row():
                    with gr.Column():
                        font_size_i2i = gr.Dropdown(
                            choices=["120px", "80px", "60px", "40px", "20px", "10px"],
                            value="60px",
                            label="Schriftgröße"
                        )
                    with gr.Column():
                        font_family_i2i = gr.Dropdown(
                            choices=["Standard", "Einfache Handschrift", "Verschnörkelte Handschrift"],
                            value="Standard",
                            label="Schriftart"
                        )
                    with gr.Column():
                        font_color_i2i = gr.Dropdown(
                            choices=["Weiß", "Schwarz", "Rot"],
                            value="Weiß",
                            label="Schriftfarbe"
                        )
                
                with gr.Row():
                    text_x_i2i = gr.Number(value=None, visible=False)
                    text_y_i2i = gr.Number(value=None, visible=False)
                    
                with gr.Row():
                    target_selector = gr.Radio(
                        choices=["Originalbild", "Generiertes Bild"],
                        value="Generiertes Bild",
                        label="Text auf welchem Bild?",
                        scale=2
                    )
                    
                with gr.Row():
                    text_btn_i2i = gr.Button("📝 Text integrieren", variant="secondary")
                
                # CLICK HANDLER FÜR BILD-zu-BILD
                preview_output.select(
                    fn=capture_click,
                    outputs=[text_x_i2i, text_y_i2i]
                )
                
                # LIVE-TEXT-VORSCHAU FÜR BILD-ZU-BILD MIT FORMATIERUNG
                text_inputs_i2i = [img_input, img_output, text_input_i2i, text_x_i2i, text_y_i2i, font_size_i2i, font_family_i2i, font_color_i2i, target_selector]
                
                text_input_i2i.change(
                    fn=update_text_preview_i2i,
                    inputs=text_inputs_i2i,
                    outputs=preview_output
                )
                
                text_x_i2i.change(
                    fn=update_text_preview_i2i,
                    inputs=text_inputs_i2i,
                    outputs=preview_output
                )
                
                text_y_i2i.change(
                    fn=update_text_preview_i2i,
                    inputs=text_inputs_i2i,
                    outputs=preview_output
                )
                
                font_size_i2i.change(
                    fn=update_text_preview_i2i,
                    inputs=text_inputs_i2i,
                    outputs=preview_output
                )
                
                font_family_i2i.change(
                    fn=update_text_preview_i2i,
                    inputs=text_inputs_i2i,
                    outputs=preview_output
                )
                
                font_color_i2i.change(
                    fn=update_text_preview_i2i,
                    inputs=text_inputs_i2i,
                    outputs=preview_output
                )
                
                target_selector.change(
                    fn=update_text_preview_i2i,
                    inputs=text_inputs_i2i,
                    outputs=preview_output
                )
                
                # EVENT-HANDLER BILD-zu-BILD
                img_input.change(
                    fn=process_image_upload,
                    inputs=[img_input],
                    outputs=[preview_output, bbox_x1, bbox_y1, bbox_x2, bbox_y2]
                )
                
                coordinate_inputs = [img_input, bbox_x1, bbox_y1, bbox_x2, bbox_y2, face_preserve]
                
                for coord in [bbox_x1, bbox_y1, bbox_x2, bbox_y2]:
                    coord.change(
                        fn=update_live_preview,
                        inputs=coordinate_inputs,
                        outputs=preview_output
                    )
                
                face_preserve.change(
                    fn=update_live_preview,
                    inputs=coordinate_inputs,
                    outputs=preview_output
                )
                
                transform_btn.click(
                    fn=img_to_image,
                    inputs=[
                        img_input, img_prompt, img_neg_prompt, 
                        strength_slider, img_steps, img_guidance, 
                        face_preserve, bbox_x1, bbox_y1, bbox_x2, bbox_y2
                    ],
                    outputs=img_output,
                    concurrency_limit=1
                )
                
                text_btn_i2i.click(
                    fn=handle_text_integration_i2i,
                    inputs=[
                        img_input,
                        img_output,
                        text_input_i2i,
                        text_x_i2i,
                        text_y_i2i,
                        font_size_i2i,
                        font_family_i2i,
                        font_color_i2i,
                        target_selector
                    ],
                    outputs=[img_input, img_output]
                )

        # === START-BUTTON HANDLER ===
        info_components = [child for child in demo.children if child != content_area]
        
        start_btn.click(
            fn=lambda: gr.update(visible=True),
            inputs=None,
            outputs=content_area
        ).then(
            fn=lambda: [gr.update(visible=False) for _ in info_components],
            inputs=None,
            outputs=info_components
        )

    return demo

if __name__ == "__main__":
    demo = main_ui()
    demo.queue()
    demo.launch(
        server_name="0.0.0.0", 
        server_port=7860,
        max_file_size="10MB",
        show_error=True,
        share=False
    )