Enhance UI styling and layout for Next-Token Predictor with gradient backgrounds, improved button designs, and updated tooltip functionality

app.py

@@ -119,38 +119,80 @@ def create_clickable_token_display(tokens_data: List[Dict]) -> str:
     
     return html
 
-# Custom CSS to match the original design
+# Custom CSS to match the Token Visualizer gradient color scheme
 custom_css = """
+/* Main container with gradient background like Token Visualizer */
 .gradio-container {
-    background: #0b1220 !important;
-    color: #e6f1ff !important;
+    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
+    color: #e2e8f0 !important;
+    min-height: 100vh !important;
 }
 
+/* Blocks with subtle transparency and borders */
 .block {
-    background: #0e162b !important;
-    border: 1px solid #1c2945 !important;
-    border-radius: 14px !important;
+    background: rgba(15, 23, 42, 0.8) !important;
+    border: 1px solid rgba(148, 163, 184, 0.2) !important;
+    border-radius: 12px !important;
+    backdrop-filter: blur(8px) !important;
 }
 
+/* Tab styling */
 .tab-item {
-    background: #0e1629 !important;
-    border: 1px solid #1c2945 !important;
+    background: rgba(30, 41, 59, 0.6) !important;
+    border: 1px solid rgba(148, 163, 184, 0.2) !important;
+    border-radius: 8px !important;
 }
 
+/* Token buttons with modern gradient and hover effects */
 .token-button {
-    background: #0f1930 !important;
-    border: 1px solid #22365e !important;
-    color: #e6f1ff !important;
-    border-radius: 6px !important;
+    background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
+    border: 1px solid rgba(148, 163, 184, 0.3) !important;
+    color: #e2e8f0 !important;
+    border-radius: 8px !important;
     margin: 0px !important;
-    padding: 2px 6px !important;
+    padding: 3px 8px !important;
     font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
-    transition: background 0.2s !important;
+    transition: all 0.3s ease !important;
     font-size: 12px !important;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
 }
 
 .token-button:hover {
-    background: #1a2b4a !important;
+    background: linear-gradient(135deg, #334155 0%, #475569 100%) !important;
+    border-color: rgba(148, 163, 184, 0.5) !important;
+    transform: translateY(-1px) !important;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
+}
+
+/* Input fields styling */
+.gr-textbox {
+    background: rgba(30, 41, 59, 0.6) !important;
+    border: 1px solid rgba(148, 163, 184, 0.3) !important;
+    border-radius: 8px !important;
+    color: #e2e8f0 !important;
+}
+
+/* Slider styling */
+.gr-slider {
+    background: rgba(30, 41, 59, 0.6) !important;
+}
+
+.gr-slider input[type="range"] {
+    background: linear-gradient(to right, #3b82f6, #06b6d4) !important;
+}
+
+/* Labels and text */
+.gr-label {
+    color: #cbd5e1 !important;
+    font-weight: 500 !important;
+}
+
+.gr-info {
+    color: #94a3b8 !important;
+    background: rgba(30, 41, 59, 0.4) !important;
+    border-radius: 6px !important;
+    padding: 4px 8px !important;
+    border: 1px solid rgba(148, 163, 184, 0.2) !important;
 }
 
 /* Remove Gradio's default spacing between buttons */
@@ -167,77 +209,123 @@ div:has(> .token-button) {
 .block > div > div {
     gap: 0px !important;
 }
+
+/* Hide spinner arrows on number inputs */
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none !important;
+    margin: 0 !important;
+}
+
+input[type="number"] {
+    -moz-appearance: textfield !important;
+}
+
+/* Header styling to match Token Visualizer */
+h1, h2, h3, h4 {
+    background: linear-gradient(135deg, #e2e8f0 0%, #94a3b8 100%) !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    background-clip: text !important;
+}
+
+/* Interactive tooltip icons in labels */
+.gr-label {
+    position: relative !important;
+}
+
+/* Add tooltip functionality with JavaScript */
+.gr-label:has-text("ⓘ"):hover::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    background: rgba(15, 23, 42, 0.95);
+    color: #e2e8f0;
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-size: 12px;
+    max-width: 250px;
+    border: 1px solid rgba(148, 163, 184, 0.3);
+    z-index: 1000;
+    top: 100%;
+    left: 0;
+    margin-top: 5px;
+    white-space: pre-wrap;
+}
 """
 
 # Create Gradio interface
 with gr.Blocks(css=custom_css, title="Next-Token Predictor") as app:
     gr.HTML("""
-    <div style="text-align: center; padding: 20px; background: #0e1629; border-bottom: 1px solid #1c2945;">
-        <h1 style="color: #e6f1ff; margin: 0; font-size: 24px;">🤗 Next-Token Predictor</h1>
-        <p style="color: #9ab0d0; margin: 10px 0 0 0;">Explore how AI predicts the next word! Click on predictions to append them.</p>
+    <div style="text-align: center; padding: 32px 20px; background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.9) 50%, rgba(15, 23, 42, 0.9) 100%); border-bottom: 1px solid rgba(148, 163, 184, 0.2); backdrop-filter: blur(8px);">
+        <h1 style="background: linear-gradient(135deg, #e2e8f0 0%, #94a3b8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 0; font-size: 28px; font-weight: 600;">Next-Token Predictor</h1>
+        <p style="color: #94a3b8; margin: 12px 0 0 0; font-size: 16px; opacity: 0.9;">Explore how AI predicts the next word! Click on predictions to append them.</p>
     </div>
     """)
     
-    with gr.Row():
-        with gr.Column(scale=1):
-            text_input = gr.Textbox(
-                label="Enter your prompt:",
-                placeholder="Type anything... predictions update automatically!",
-                value="Twinkle, twinkle, little ",
-                lines=3,
-                info="💡 Try: 'The weather today is', 'I think that', 'Once upon a time'"
-            )
+    with gr.Column():
+        text_input = gr.Textbox(
+            label="Enter your prompt:",
+            placeholder="Type anything... predictions update automatically!",
+            value="Twinkle, twinkle, little ",
+            lines=3,
+            info="💡 Try: 'The weather today is', 'I think that', 'Once upon a time'"
+        )
+        
+        # Next Token Predictions directly below input
+        with gr.Column():
+            gr.HTML("<h4 style='background: linear-gradient(135deg, #e2e8f0 0%, #94a3b8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 0; font-weight: 600;'>Next Token Predictions</h4>")
             
-            with gr.Row():
+            # Create buttons for each possible token (we'll show/hide as needed)
+            token_buttons = []
+            for i in range(15):  # Support up to 15 tokens
+                btn = gr.Button(
+                    value="",
+                    visible=False,
+                    elem_classes=["token-button"],
+                    size="sm"
+                )
+                token_buttons.append(btn)
+        
+        # Parameter controls below predictions
+        with gr.Row():
+            with gr.Column():
                 top_k = gr.Slider(
                     minimum=5,
                     maximum=15,
                     value=10,
                     step=1,
                     label="Top-K",
-                    info="How many top predictions to show",
+                    info="Number of most likely words to consider",
                     show_label=True,
                     interactive=True
                 )
+            
+            with gr.Column():
                 temperature = gr.Slider(
                     minimum=0.1,
                     maximum=2.0,
                     value=1.0,
                     step=0.1,
-                    label="Temperature",
-                    info="Creativity: Low=predictable, High=surprising",
+                    label="Temperature", 
+                    info="Controls randomness in predictions",
                     show_label=True,
                     interactive=True
                 )
+            
+            with gr.Column():
                 top_p = gr.Slider(
                     minimum=0.1,
                     maximum=1.0,
                     value=0.9,
                     step=0.05,
                     label="Top-P",
-                    info="Consider words making up this % of probability",
+                    info="Probability threshold for word selection",
                     show_label=True,
                     interactive=True
                 )
-            
-            timing_info = gr.HTML(value="<div style='color: #9ab0d0; font-size: 12px;'>✨ Predictions update as you type!</div>")
         
-        with gr.Column(scale=1):
-            # Create a column for token buttons
-            with gr.Column():
-                gr.HTML("<h4 style='color: #e6f1ff; margin: 0;'>🔮 Next Token Predictions</h4>")
-                
-                # Create buttons for each possible token (we'll show/hide as needed)
-                token_buttons = []
-                for i in range(15):  # Support up to 15 tokens
-                    btn = gr.Button(
-                        value="",
-                        visible=False,
-                        elem_classes=["token-button"],
-                        size="sm"
-                    )
-                    token_buttons.append(btn)
-    
+        timing_info = gr.HTML(value="<div style='color: #94a3b8; font-size: 12px; opacity: 0.8;'>✨ Predictions update as you type!</div>")
+
     # Store current tokens data  
     current_tokens = gr.State([])