update

app.py

@@ -89,73 +89,20 @@ def run_transformers(model_name, input_text, num_tokens):
 
 # Gradio Interface
 def interface():
-    with gr.Blocks(css="""
-        body {
-        background-color: #F7F9FC;  /* Light gray for a clean look */
-        color: #333333;  /* Dark gray for text for easy readability */
-        font-family: 'Arial', sans-serif;
-    }
-
-    /* Button styling */
-    .gr-button {
-        background-color: #2196F3;  /* Bright blue */
-        color: white;
-        border-radius: 6px;
-        padding: 10px 15px;
-        border: 1px solid #1976D2; /* Slightly darker blue for border */
-        font-weight: bold;
-    }
-    .gr-button:hover {
-        background-color: #1976D2;  /* Darker blue on hover */
-    }
-
-    /* Header styling */
-    #header {
-        color: #333333;  /* Dark gray for better contrast on light background */
-        background-color: #E3F2FD;  /* Very light blue background */
-        padding: 20px;
-        border-radius: 8px;
-        text-align: center;
-    }
-
-    /* Container styling for sections */
-    .container {
-        background-color: #FFFFFF;  /* White for a clean container look */
-        border-radius: 8px;
-        padding: 20px;
-        margin: 20px 0;
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* Soft shadow for depth */
-    }
-    .container h2 {
-        color: #2196F3;  /* Bright blue for subheaders */
-        text-align: center;
-    }
-
-    /* Center alignment for UI components */
-    .center {
-        text-align: center;
-    }
-
-    /* Center button alignment */
-    .center-button {
-        display: flex;
-        justify-content: center;
-        margin: 10px;
-    }
-    """) as demo:
+    with gr.Blocks(theme=gr.themes.Ocean()) as demo:  # Apply the Ocean theme
 
         # Header
         gr.Markdown(
             """
-            <h1 style="text-align: center; color: #4A148C;">BitNet.cpp Speed Demonstration 💻</h1>
-            <p style="text-align: center; color: #6A1B9A;">Compare the speed and performance of BitNet with popular Transformer models.</p>
+            <h1 style="text-align: center; color: #003f5c;">BitNet.cpp Speed Demonstration 💻</h1>
+            <p style="text-align: center; color: #0074a4;">Compare the speed and performance of BitNet with popular Transformer models.</p>
             """,
             elem_id="header"
         )
 
         # Model Selection and Setup
-        with gr.Column(elem_id="container"):
-            gr.Markdown("<h2 style='color: #6A1B9A; text-align: center;'>Model Selection and Setup</h2>")
+        with gr.Column():
+            gr.Markdown("<h2 style='color: #005073; text-align: center;'>Model Selection and Setup</h2>")
             with gr.Row():
                 model_dropdown = gr.Dropdown(
                     label="Select Model",
@@ -169,10 +116,10 @@ def interface():
                 )
                 setup_button = gr.Button("Run Setup")
                 setup_status = gr.Textbox(label="Setup Status", interactive=False, placeholder="Setup status will appear here...")
-                
+
         # Inference Section
-        with gr.Column(elem_id="container"):
-            gr.Markdown("<h2 style='color: #6A1B9A; text-align: center;'>BitNet Inference</h2>")
+        with gr.Column():
+            gr.Markdown("<h2 style='color: #005073; text-align: center;'>BitNet Inference</h2>")
             with gr.Row():
                 num_tokens = gr.Slider(
                     minimum=1, maximum=100, 
@@ -190,8 +137,8 @@ def interface():
                 time_output = gr.Textbox(label="Inference Time", interactive=False, placeholder="Inference time will appear here...")
 
         # Comparison with Transformers Section
-        with gr.Column(elem_id="container"):
-            gr.Markdown("<h2 style='color: #6A1B9A; text-align: center;'>Compare with Transformers</h2>")
+        with gr.Column():
+            gr.Markdown("<h2 style='color: #005073; text-align: center;'>Compare with Transformers</h2>")
             with gr.Row():
                 transformer_model_dropdown = gr.Dropdown(
                     label="Select Transformers Model",