update

README.md

@@ -1,8 +1,8 @@
 ---
 title: BitNet.cpp
 emoji: 💻
-colorFrom: white
-colorTo: white
+colorFrom: pink
+colorTo: yellow
 sdk: docker
 app_file: app.py
 app_port: 7860

app.py

@@ -90,13 +90,53 @@ def run_transformers(model_name, input_text, num_tokens):
 # Gradio Interface
 def interface():
     with gr.Blocks(css="""
-        .gr-button {background-color: #5C6BC0; color: white; border-radius: 8px; padding: 8px 12px;}
-        .gr-button:hover {background-color: #3F51B5;}
-        #header {font-family: 'Arial', sans-serif;}
-        .container {background-color: #F3E5F5; border-radius: 10px; padding: 20px; margin: 10px 0;}
-        .container h2 {color: #6A1B9A; text-align: center;}
-        .center {text-align: center;}
-        .center-button {display: flex; justify-content: center; margin: 10px;}
+        .gr-button {
+        background-color: #FF4081;  /* Bright pink */
+        color: white;
+        border-radius: 8px;
+        padding: 8px 12px;
+        border: 2px solid #FFEB3B; /* Bright yellow border */
+        font-weight: bold;
+    }
+    .gr-button:hover {
+        background-color: #F50057;  /* Darker pink for hover effect */
+        border-color: #FFC107;      /* Darker yellow on hover */
+    }
+
+    /* Header styling */
+    #header {
+        font-family: 'Arial', sans-serif;
+        color: #D500F9;  /* Vivid purple */
+        background-color: #FFEB3B;  /* Bright yellow background */
+        padding: 20px;
+        border-radius: 10px;
+        text-align: center;
+    }
+
+    /* Container styling */
+    .container {
+        background-color: #FFF59D;  /* Light yellow */
+        border-radius: 10px;
+        padding: 20px;
+        margin: 15px 0;
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);  /* Soft shadow */
+    }
+    .container h2 {
+        color: #FF4081;  /* Matching bright pink */
+        text-align: center;
+    }
+
+    /* Center alignment */
+    .center {
+        text-align: center;
+    }
+
+    /* Center button alignment */
+    .center-button {
+        display: flex;
+        justify-content: center;
+        margin: 10px;
+    }
     """) as demo:
 
         # Header