edit gradio -3

app.py

@@ -46,66 +46,75 @@ demo = gr.ChatInterface(
         gr.Slider(minimum=0.1, maximum=1.0, value=0.95, step=0.05, label="Top-p (nucleus sampling)"),
     ],
     css="""
-        /* Custom CSS to style the interface */
+        /* Custom CSS to style the interface with pink and cute aesthetic */
         .gradio-container {
-            background-color: #222222; /* Dark background */
-            color: #f4f4f4; /* Light text */
-            font-family: 'Arial', sans-serif;
-            border-radius: 12px;
-            padding: 20px;
+            background-color: #f9e5e5; /* Soft pastel pink */
+            color: #ff8fa3; /* Pink text */
+            font-family: 'Comic Sans MS', sans-serif; /* Fun, playful font */
+            border-radius: 20px;
+            padding: 30px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
         }
 
         .gradio-button {
-            background-color: #ff4081; /* Pink buttons */
+            background-color: #ff7fa5; /* Lighter pink buttons */
             color: white;
-            border-radius: 10px;
-            font-size: 16px;
-            padding: 12px 24px;
+            border-radius: 12px;
+            font-size: 18px;
+            padding: 16px 32px;
+            font-weight: bold;
+            transition: background-color 0.3s ease;
         }
 
         .gradio-button:hover {
-            background-color: #e91e63; /* Darker pink on hover */
+            background-color: #ff5885; /* Even lighter pink on hover */
         }
 
         .gradio-textbox {
-            background-color: #333333; /* Dark background for textboxes */
+            background-color: #ffd3d3; /* Soft pink background for textboxes */
             border-radius: 12px;
-            color: #f4f4f4; /* Light text inside the textboxes */
-            padding: 12px;
+            color: #ff4d6d; /* Bold pink text */
+            padding: 16px;
+            border: 2px solid #ff8fa3;
         }
 
         .gradio-chat {
-            background-color: #333333;
-            border-radius: 12px;
-            padding: 16px;
+            background-color: #fff0f5; /* Very light pink for chat */
+            border-radius: 20px;
+            padding: 20px;
         }
 
         .gradio-chat .gradio-message-user {
-            background-color: #ff4081; /* Pink background for user messages */
+            background-color: #ff7fa5; /* Light pink background for user messages */
             border-radius: 12px;
-            color: #f4f4f4;
+            color: white;
+            padding: 12px;
         }
 
         .gradio-chat .gradio-message-assistant {
-            background-color: #555555; /* Darker background for assistant messages */
+            background-color: #ffd3d3; /* Soft pink for assistant's messages */
             border-radius: 12px;
-            color: #f4f4f4;
+            color: #ff4d6d;
+            padding: 12px;
         }
 
         .gradio-container h1 {
-            color: #ff4081; /* Title in pink */
-            font-size: 36px;
+            color: #ff4d6d; /* Pink header */
+            font-size: 40px;
             text-align: center;
+            font-weight: bold;
+            margin-bottom: 30px;
         }
 
-        .gradio-container .gradio-textbox input {
+        .gradio-container p {
+            color: #ff8fa3; /* Soft pink text for descriptions */
+            text-align: center;
             font-size: 16px;
+            margin-top: 10px;
         }
 
-        .gradio-container p {
-            color: #bdbdbd; /* Light grey description text */
-            text-align: center;
-            font-size: 14px;
+        .gradio-container .gradio-textbox input {
+            font-size: 18px;
         }
     """
 )