Update app.py

app.py

@@ -346,18 +346,106 @@ def main_ui():
             margin: 15px 0;
             border-left: 4px solid #4caf50;
         }
+        .clickable-file {
+            color: #8B7355;
+            text-decoration: underline;
+            font-weight: bold;
+        }
+        .clickable-file:hover {
+            color: #6b5a45;
+        }
+        #start-button {
+            background-color: #8B7355;
+            color: white;
+            border: none;
+        }
+        #start-button:hover {
+            background-color: #6b5a45;
+        }
         """
     ) as demo:
 
-        # --- Info-Bereich ---
-        gr.Markdown("# AI Image Generator")
-        
+        # --- Info-Bereich (Startseite) ---
+        gr.Markdown(
+            """
+            # Demo-Projekt: Stable Diffusion Text-to-Image / Image-to-Image
+            <br>
+            
+            <div class="info-box">
+            Dieses Projekt ist ein kleines <strong>Demo</strong> um meine Fähigkeiten als <strong>AI-Engineer</strong>
+            in technischer Kompetenz und selbstständiger Projektstrukturierung zu zeigen.<br>
+            Der Fokus liegt auf <strong>Struktur, Konzept und technischer Umsetzung</strong>
+            im Bereich Text-to-Image / Image-to-Image mit dem Diffusionsmodell "Stable Diffusion" <br>
+            <strong>nicht</strong> auf einer vollständigen Produktionsversion.
+            </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 damit 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:</strong> <br>
+            Es handelt sich um einen bekannten <strong>Gradio-Bug</strong> - das Framework bietet keine Möglichkeit, generierte Bilder zwischenzuspeichern <br>
+            um sie bei UI-Neuladung aus dem Zwischenspeicher zurückzugeben. Dies macht sich <strong>besonders bei CPU-Nutzung bemerkbar</strong>, <br>
+            da die Transformationszeiten hier deutlich länger sind und es dadurch vermehrt zu Timeouts und daraus resultierenden UI-Abbrüchen kommen kann.<br>
+            Aus diesem Grund kann das Ergebnis nicht an die neu geladene Benutzeroberfläche übermittelt werden obwohl die Bildgenerierung serverseitig <br>
+            vollständig abgeschlossen wird.
+            </div>
+            <br>
+
+            <div class="info-box">
+            <strong>Anwendungsbereich:</strong><br>
+            Die <strong>Bild-zu-Bild-Funktion</strong> ermöglicht eine gezielte Bearbeitung eines <strong>beliebigen Objektes oder Bereiches</strong> in einem Bild.<br>
+            Sie unterstützt zwei Modi:<br>
+            &nbsp;&nbsp;• <strong>Beibehaltung eines ausgewählten Bildbereiches innerhalb eines Rechtecks</strong> (z. B. Gesicht, Objekt, Tier, Gegenstand) bei Veränderung des Rests,<br>
+            &nbsp;&nbsp;• oder <strong>Veränderung des rechteckigen Bildbereiches</strong> bei Erhaltung der Umgebung.<br>
+            <br>
+            <strong>Wichtig:</strong> Das Objekt das beibehalten oder verändert werden soll - je nach gewähltem Modus - muss <strong>im Prompt</strong> klar beschrieben werden.<br>
+            Die Verwendung eines <strong>Negativ-Promptes</strong> ist sinnvoll, um unerwünschte Veränderungen zu vermeiden.
+            </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>
+            """
+        )
+
+        # --- Button zentriert im unteren Drittel, Taupe-Farbe ---
         with gr.Row():
-            with gr.Column(scale=1):
+            with gr.Column(scale=1):  # Linker Leerraum
                 pass
-            with gr.Column(scale=1, min_width=300):
-                start_btn = gr.Button("Weiter zur Anwendung", variant="primary", size="lg")
-            with gr.Column(scale=1):
+            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 ---