update

app.py

@@ -89,61 +89,83 @@ def run_transformers(model_name, input_text, num_tokens):
 
 # Gradio Interface
 def interface():
-    with gr.Blocks(css=".gr-button {background-color: #5C6BC0; color: white;} .gr-button:hover {background-color: #3F51B5;}") as demo:
-
-        # gr.LoginButton(elem_id="login-button", elem_classes="center-button")
-
+    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;}
+    """) as demo:
+
+        # 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 Transformers!</p>
-            """, 
+            <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>
+            """,
             elem_id="header"
         )
 
-        # Model selection and setup row
-        with gr.Row():
-            model_dropdown = gr.Dropdown(
-                label="Select Model",
-                choices=["HF1BitLLM/Llama3-8B-1.58-100B-tokens", "1bitLLM/bitnet_b1_58-3B", "1bitLLM/bitnet_b1_58-large"],  # Replace with available models
-                value="HF1BitLLM/Llama3-8B-1.58-100B-tokens",
-                interactive=True,
-                elem_id="model-dropdown"
-            )
-            setup_button = gr.Button("Run Setup", elem_id="setup-button")
-            setup_status = gr.Textbox(label="Setup Status", interactive=False, placeholder="Setup status will appear here...")
-
-        # Inference row
-        with gr.Row():
-            num_tokens = gr.Slider(minimum=1, maximum=100, label="Number of Tokens to Generate", value=50, step=1)
-            input_text = gr.Textbox(label="Input Text", placeholder="Enter your input text here...")
-            infer_button = gr.Button("Run Inference", elem_id="infer-button")
-            result_output = gr.Textbox(label="Output", interactive=False, placeholder="Inference output will appear here...")
-            time_output = gr.Textbox(label="Inference Time", interactive=False, placeholder="Inference time will appear here...")
-
-        # Comparison with Transformers
-        with gr.Row():
-            transformer_model_dropdown = gr.Dropdown(
-                label="Select Transformers Model",
-                choices=["TinyLlama/TinyLlama_v1.1", "HuggingFaceTB/SmolLM-360M"],  # Replace with actual models
-                value="TinyLlama/TinyLlama_v1.1",
-                interactive=True
-            )
-            input_text_tr = gr.Texbox(label="Input Text", placeholder="Enter your input text here...")
-            compare_button = gr.Button("Run Transformers Inference", elem_id="compare-button")
-            transformer_result_output = gr.Textbox(label="Transformers Output", interactive=False, placeholder="Transformers output will appear here...")
-            transformer_time_output = gr.Textbox(label="Transformers Inference Time", interactive=False, placeholder="Transformers inference time will appear here...")
+        # Model Selection and Setup
+        with gr.Box(elem_id="container"):
+            with gr.Row():
+                model_dropdown = gr.Dropdown(
+                    label="Select Model",
+                    choices=[
+                        "HF1BitLLM/Llama3-8B-1.58-100B-tokens", 
+                        "1bitLLM/bitnet_b1_58-3B", 
+                        "1bitLLM/bitnet_b1_58-large"
+                    ],
+                    value="HF1BitLLM/Llama3-8B-1.58-100B-tokens",
+                    interactive=True
+                )
+                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.Box(elem_id="container"):
+            gr.Markdown("<h2>BitNet Inference</h2>")
+            with gr.Row():
+                num_tokens = gr.Slider(
+                    minimum=1, maximum=100, 
+                    label="Number of Tokens to Generate", 
+                    value=50, step=1
+                )
+                input_text = gr.Textbox(
+                    label="Input Text", 
+                    placeholder="Enter your input text here..."
+                )
+            with gr.Row():
+                infer_button = gr.Button("Run Inference")
+                result_output = gr.Textbox(label="Output", interactive=False, placeholder="Inference output will appear here...")
+                time_output = gr.Textbox(label="Inference Time", interactive=False, placeholder="Inference time will appear here...")
+
+        # Comparison with Transformers Section
+        with gr.Box(elem_id="container"):
+            gr.Markdown("<h2>Compare with Transformers</h2>")
+            with gr.Row():
+                transformer_model_dropdown = gr.Dropdown(
+                    label="Select Transformers Model",
+                    choices=["TinyLlama/TinyLlama_v1.1", "HuggingFaceTB/SmolLM-360M"],
+                    value="TinyLlama/TinyLlama_v1.1",
+                    interactive=True
+                )
+                input_text_tr = gr.Textbox(label="Input Text", placeholder="Enter your input text here...")
+            with gr.Row():
+                compare_button = gr.Button("Run Transformers Inference")
+                transformer_result_output = gr.Textbox(label="Transformers Output", interactive=False, placeholder="Transformers output will appear here...")
+                transformer_time_output = gr.Textbox(label="Transformers Inference Time", interactive=False, placeholder="Transformers inference time will appear here...")
 
         # Actions
         setup_button.click(setup_bitnet, inputs=model_dropdown, outputs=setup_status)
         infer_button.click(run_inference, inputs=[model_dropdown, input_text, num_tokens], outputs=[result_output, time_output])
         compare_button.click(run_transformers, inputs=[transformer_model_dropdown, input_text_tr, num_tokens], outputs=[transformer_result_output, transformer_time_output])
 
-# Launch the Gradio app    
     return demo
 
 demo = interface()
-
 # # Access FastAPI app instance from Gradio
 # fastapi_app = demo.app