Update app.py

app.py

@@ -235,59 +235,81 @@ def update_bbox_from_image(image):
     return bbox[0], bbox[1], bbox[2], bbox[3]
 
 def main_ui():
-    with gr.Blocks(title="AI Image Generator", theme = gr.themes.Base()) as demo:
+    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;
+        }
+        #start-button {
+            background-color: #0080FF !important;
+            border: none !important;
+            margin: 50px auto !important;
+            display: block !important;
+            font-weight: 600;
+            width: 280px;
+        }
+        #start-button:hover {
+            background-color: #D3D3D3 !important;
+        }
+        .hint-box {
+            margin-top: 20px;
+        }
+        .custom-text {
+            font-size: 25px !important;
+        }
+        """
+    ) as demo:
 
         # --- Info-Bereich (Startseite) ---
         gr.Markdown(
-          """
-          # Demo-Projekt: Stable Diffusion Text-to-Image / Image-to-Image
-
-           
-
-          <div style="background-color: #f8f4f0; padding: 15px; border-radius: 8px; border-left: 4px solid #8B7355;">
-          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>
-
-          &nbsp;
-
-          <div style="background-color: #f8f4f0; padding: 15px; border-radius: 8px; border-left: 4px solid #8B7355;">
-          Zudem präsentieren die Hugging-Face-Files(<code>Main.py</code>, <code>impaint_module.py</code>, <code>UI-Gradio.py</code>)<br>
-          eine <strong>skalierbare, professionelle Architektur</strong> für Text-to-Image- und Image-to-Image-Entwicklung 
-          die die <br><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>
-
-          &nbsp;
-
-          <div style="background-color: #f8f4f0; padding: 15px; border-radius: 8px; border-left: 4px solid #8B7355;">
-          <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>
-          Der Generierungsfortschritt ist im Logfile einsehbar (Schaltfläche neben "Running").<br>
-          Bei Verbindungsabbrüchen wird die aktuelle Generierung zunächst vollständig abgeschlossen, bevor neue Anfragen bearbeitet werden. Das<br>
-          generierte Bild wird in diesem Fall <strong>nicht angezeigt</strong>. Dies gewährleistet die Stabilität des Systems und verhindert Ressourcenkonflikte. <br>
-          Die Meldung "Connection re-established" zeigt an, dass die Verbindung wiederhergestellt wurde, die laufende Verarbeitung jedoch priorisiert wird.
-          </div>
-
-          <div style="background-color: #f8f4f0; padding: 15px; border-radius: 8px; border-left: 5px solid #8B7355; margin: 20px 0;">
-          Die <strong>Bild-zu-Bild-Funktion</strong> ist speziell für die Bearbeitung <strong>einzelner Personen</strong> optimiert.<br>
-          Sie ermöglicht wahlweise:<br>
-          &nbsp;&nbsp;• die gezielte <strong>Veränderung des Gesichts</strong> bei erhaltener Umgebung, oder<br>
-          &nbsp;&nbsp;• den <strong>Schutz des Motivs</strong>, während nur der <strong>Hintergrund angepasst</strong> wird.<br><br>
-          </div>
-
-          <div style="background-color: #f8f4f0; padding: 15px; border-radius: 8px; border-left: 5px solid #8B7355; margin: 20px 0;">
-          <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.
-          </div>
-          """
-          )
-
+            """
+            # Demo-Projekt: Stable Diffusion Text-to-Image / Image-to-Image
+            
+            <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>
+            
+            <div class="info-box">
+            Zudem präsentieren die Hugging-Face-Files(<code>Main.py</code>, <code>impaint_module.py</code>, <code>UI-Gradio.py</code>)<br>
+            eine <strong>skalierbare, professionelle Architektur</strong> für Text-to-Image- und Image-to-Image-Entwicklung 
+            die die <br><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>
+            
+            <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>
+            Der Generierungsfortschritt ist im Logfile einsehbar (Schaltfläche neben "Running").<br>
+            Bei Verbindungsabbrüchen wird die aktuelle Generierung zunächst vollständig abgeschlossen, bevor neue Anfragen bearbeitet werden. Das<br>
+            generierte Bild wird in diesem Fall <strong>nicht angezeigt</strong>. Dies gewährleistet die Stabilität des Systems und verhindert Ressourcenkonflikte. <br>
+            Die Meldung "Connection re-established" zeigt an, dass die Verbindung wiederhergestellt wurde, die laufende Verarbeitung jedoch priorisiert wird.
+            </div>
+            
+            <div class="info-box">
+            Die <strong>Bild-zu-Bild-Funktion</strong> ist speziell für die Bearbeitung <strong>einzelner Personen</strong> optimiert.<br>
+            Sie ermöglicht wahlweise:<br>
+            &nbsp;&nbsp;• die gezielte <strong>Veränderung des Gesichts</strong> bei erhaltener Umgebung, oder<br>
+            &nbsp;&nbsp;• den <strong>Schutz des Motivs</strong>, während nur der <strong>Hintergrund angepasst</strong> wird.
+            </div>
+            
+            <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.
+            </div>
+            """
+        )
 
         # --- Button zentriert im unteren Drittel, Taupe-Farbe ---
         with gr.Row():
@@ -480,27 +502,6 @@ def main_ui():
             outputs=info_components
         )
 
-        # --- CSS für Taupe-Button ---
-        demo.css = """
-        #start-button {
-            background-color: #0080FF !important;
-            border: none !important;
-            margin: 50px auto !important;
-            display: block !important;
-            font-weight: 600;
-            width: 280px;
-        }
-        #start-button:hover {
-            background-color: #D3D3D3 !important;
-        }
-        .hint-box {
-            margin-top: 20px;
-        }
-        .custom-text {
-            font-size: 25px !important;
-        }
-        """
-
     return demo