Update app.py

app.py

@@ -29,53 +29,57 @@ def chat_fn(message, history):
     except Exception as e:
         yield f"Verbindung: {str(e)}"
 
-# 2. Das Premium-Design (Weiß / Blau / Fast-Schwarz)
+# 2. Das "Extra Round & Cloud Blue" Design
 custom_css = """
-/* Hintergrund komplett Weiß */
+/* Hintergrund: Extrem helles, frisches Blau */
 .gradio-container { 
-    background-color: #ffffff !important; 
+    background-color: #f0f7ff !important; 
 }
 
-/* Entfernt den hässlichen Balken/Padding oben */
-.main { padding-top: 0px !important; }
-header { display: none !important; }
+/* Den Standard-Header von Hugging Face ausblenden */
+footer { display: none !important; }
+.main { padding-top: 20px !important; }
 
-/* Chat-Fenster Design */
+/* Chat-Fenster: Extrem rund und weiß */
 .chatbot { 
-    border-radius: 30px !important; 
-    border: 1px solid #e5e7eb !important; 
+    border-radius: 40px !important; 
+    border: none !important; 
     background-color: #ffffff !important;
+    box-shadow: 0 10px 25px rgba(0,0,0,0.03) !important;
 }
 
-/* Textfarbe (Fast Schwarz) */
+/* Textfarbe (Sehr dunkles Grau/Schwarz) */
 .chatbot p, .chatbot span { 
     color: #111827 !important; 
 }
 
-/* Eingabefeld (Rund & Sauber) */
+/* Eingabefeld: "Pillen"-Form (maximal rund) */
 #input-box textarea {
-    border-radius: 30px !important;
+    border-radius: 40px !important;
     border: 2px solid #3b82f6 !important;
-    color: #111827 !important;
+    padding: 15px 25px !important;
+    background-color: #ffffff !important;
 }
 
-/* Buttons extrem Rund */
+/* Senden-Knopf: Ebenfalls maximal rund */
 button.primary {
-    border-radius: 30px !important;
+    border-radius: 40px !important;
     background-color: #3b82f6 !important;
-    color: white !important;
-    border: none !important;
+    padding: 10px 25px !important;
 }
 
-footer { display: none !important; }
+/* Buttons allgemein abrunden */
+.gr-button {
+    border-radius: 40px !important;
+}
 """
 
 with gr.Blocks(title="CocoAi Smooth") as demo:
-    # Header Bereich
-    with gr.Column(elem_id="title-area"):
-        gr.HTML("<div style='text-align: center; padding: 20px;'>")
-        gr.Markdown("# <span style='color: #1e40af;'>🐱 CocoAi</span>")
-        gr.Markdown("<p style='color: #374151;'>Intelligent • Loyal • CocoEntertainment</p>")
+    # Header
+    with gr.Column():
+        gr.HTML("<div style='text-align: center; padding: 10px;'>")
+        gr.Markdown("# <span style='color: #1e40af; font-size: 32px;'>🐱 CocoAi</span>")
+        gr.Markdown("<p style='color: #4b5563; font-weight: 500;'>Intelligent • Loyal • CocoEntertainment</p>")
         gr.HTML("</div>")
     
     # Interface
@@ -94,8 +98,7 @@ if __name__ == "__main__":
         css=custom_css,
         theme=gr.themes.Soft(
             primary_hue="blue", 
-            neutral_hue="slate",
-            radius_size="lg",
-            font=["Inter", "sans-serif"]
+            neutral_hue="blue",
+            radius_size="xxl", # Maximale Abrundung für das Theme
         )
     )