Update app.py

app.py

@@ -357,6 +357,96 @@ def main_ui():
         """
     ) 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(
             """