update

app.py

@@ -89,20 +89,31 @@ def run_transformers(model_name, input_text, num_tokens):
 
 # Gradio Interface
 def interface():
-    with gr.Blocks(theme=gr.themes.Ocean()) as demo:  # Apply the Ocean theme
+    with gr.Blocks(theme=gr.themes.Ocean()) as demo:
 
         # Header
         gr.Markdown(
             """
-            <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>
+            <h1 style="text-align: center; color: #7AB8E5;">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"
         )
 
+        # Instructions
+        gr.Markdown(
+            """
+            ### Instructions for Using the BitNet.cpp Speed Demonstration
+            1. **Set Up Your Project**: Begin by selecting the model you wish to use. Please note that this process may take a few minutes to complete.
+            2. **Select Token Count**: Choose the number of tokens you want to generate for your inference.
+            3. **Input Your Text**: Enter the text you wish to analyze, then compare the performance of BitNet with popular Transformer models.
+            """,
+            elem_id="instructions"
+        )
+
         # Model Selection and Setup
-        with gr.Column():
-            gr.Markdown("<h2 style='color: #005073; text-align: center;'>Model Selection and Setup</h2>")
+        with gr.Column(elem_id="container"):
+            gr.Markdown("<h2 style='color: #5CA2D3; text-align: center;'>Model Selection and Setup</h2>")
             with gr.Row():
                 model_dropdown = gr.Dropdown(
                     label="Select Model",
@@ -116,10 +127,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():
-            gr.Markdown("<h2 style='color: #005073; text-align: center;'>BitNet Inference</h2>")
+        with gr.Column(elem_id="container"):
+            gr.Markdown("<h2 style='color: #5CA2D3; text-align: center;'>BitNet Inference</h2>")
             with gr.Row():
                 num_tokens = gr.Slider(
                     minimum=1, maximum=100, 
@@ -137,12 +148,12 @@ def interface():
                 time_output = gr.Textbox(label="Inference Time", interactive=False, placeholder="Inference time will appear here...")
 
         # Comparison with Transformers Section
-        with gr.Column():
-            gr.Markdown("<h2 style='color: #005073; text-align: center;'>Compare with Transformers</h2>")
+        with gr.Column(elem_id="container"):
+            gr.Markdown("<h2 style='color: #5CA2D3; text-align: center;'>Compare with Transformers</h2>")
             with gr.Row():
                 transformer_model_dropdown = gr.Dropdown(
                     label="Select Transformers Model",
-                    choices=["TinyLlama/TinyLlama_v1.1", "HuggingFaceTB/SmolLM-360M"],
+                    choices=["TinyLlama/TinyLlama_v1.1"],
                     value="TinyLlama/TinyLlama_v1.1",
                     interactive=True
                 )
@@ -160,6 +171,7 @@ def interface():
     return demo
 
 demo = interface()
+
 # # Access FastAPI app instance from Gradio
 # fastapi_app = demo.app