UI Changes: Sidebar, fonts and theme

app.py

@@ -7,6 +7,7 @@ from app_configs import AVAILABLE_MODELS, DEFAULT_SELECTIONS, THEME
 from components.quizbowl.bonus import BonusInterface
 from components.quizbowl.tossup import TossupInterface
 from display.custom_css import css_pipeline, css_tossup
+from display.guide import GUIDE_MARKDOWN
 
 # Constants
 from envs import (
@@ -26,7 +27,7 @@ def restart_space():
     API.restart_space(repo_id=REPO_ID)
 
 
-### Space initialisation
+# Space initialisation
 try:
     print(EVAL_REQUESTS_PATH)
     snapshot_download(
@@ -52,10 +53,15 @@ try:
 except Exception:
     restart_space()
 
+fonts_header = """
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
+"""
 
-js_preamble = """
-<link href="https://fonts.cdnfonts.com/css/roboto-mono" rel="stylesheet">
-
+js_head = """
 <script>
     const gradioApp = document.getElementsByTagName('gradio-app')[0];
     console.log("Gradio app:", gradioApp);
@@ -137,36 +143,34 @@ def load_dataset(mode: str):
     return ds
 
 
-def main():
+if __name__ == "__main__":
+    scheduler = BackgroundScheduler()
+    scheduler.add_job(restart_space, "interval", seconds=1800)
+    scheduler.start()
+
+    full_css = css_pipeline + css_tossup
     tossup_ds = load_dataset("tossup")
     bonus_ds = load_dataset("bonus")
-    app = gr.Blocks(
-        css=css_pipeline + css_tossup,
-        head=js_preamble,
+    with gr.Blocks(
+        css=full_css,
+        head=fonts_header + js_head,
         theme=THEME,
         title="Quizbowl Bot",
-    )
-    with app:
+    ) as demo:
+        with gr.Sidebar(width=400):
+            gr.Markdown(GUIDE_MARKDOWN)
+        with gr.Row():
+            gr.Markdown("## Welcome to Quizbowl Bot! This is a tool for creating and testing quizbowl agents.")
         with gr.Tabs():
             with gr.Tab("Tossup Agents"):
                 defaults = DEFAULT_SELECTIONS["tossup"] | {
                     "init_workflow": factory.create_quizbowl_simple_workflow(),
-                    "simple_workflow": False,
                 }
-                tossup_interface = TossupInterface(app, tossup_ds, AVAILABLE_MODELS, defaults)
-                # ModelStepComponent(value=factory.create_quizbowl_simple_step())
+                tossup_interface = TossupInterface(demo, tossup_ds, AVAILABLE_MODELS, defaults)
             with gr.Tab("Bonus Round Agents"):
                 defaults = DEFAULT_SELECTIONS["bonus"] | {
                     "init_workflow": factory.create_quizbowl_bonus_simple_workflow(),
-                    "simple_workflow": True,
                 }
-                bonus_interface = BonusInterface(app, bonus_ds, AVAILABLE_MODELS, defaults)
-
-    app.queue(default_concurrency_limit=40).launch()
+                bonus_interface = BonusInterface(demo, bonus_ds, AVAILABLE_MODELS, defaults)
 
-
-if __name__ == "__main__":
-    scheduler = BackgroundScheduler()
-    scheduler.add_job(restart_space, "interval", seconds=1800)
-    scheduler.start()
-    main()
+    demo.queue(default_concurrency_limit=40).launch()

src/app_configs.py

@@ -1,4 +1,4 @@
-THEME = "gstaff/xkcd"
+THEME = "gstaff/sketch"
 
 UNSELECTED_VAR_NAME = "Select Variable..."
 UNSELECTED_MODEL_NAME = "Select Model..."

src/display/custom_css.py

@@ -4,8 +4,17 @@ css_pipeline = """
     --block-border-width: 0;
     --section-header-text-weight: 600;
     --section-header-text-size: 14px;
-    --mono-font-family: "Roboto Mono", monospace;
+    --input-radius: var(--radius-xl);
+    --font-mono: "Space Mono", monospace;
+    --text-md: 14px;
+    --text-lg: 16px;
     --body-text-size: 14px !important;
+    --input-background-fill-focus: var(--secondary-300) !important;
+
+    // Button Colors
+    --button-primary-background-fill: var(--primary-800) !important;
+    --button-secondary-background-fill: var(--secondary-600) !important;
+
 
     --card-bg-color: #fcecd4;
     --card-btn-color: #D4E4FC;
@@ -15,6 +24,12 @@ css_pipeline = """
 }
 
 .dark {
+    // Button Colors
+    --button-primary-background-fill: var(--primary-100) !important;
+    --button-secondary-background-fill: var(--secondary-200) !important;
+    --button-primary-text-color: black !important;
+    --button-secondary-text-color: black !important
+
     --block-border-width: 0;
     --card-bg-color: #383127;
     --answer-bg-color: #1a2b3c;
@@ -219,7 +234,7 @@ css_pipeline = """
 }
 
 .output-field-variable {
-    font-family: var(--mono-font-family) !important;
+    font-family: var(--font-mono) !important;
     font-weight: 300 !important;
     font-size: 12px !important;
     padding: 8px 8px;
@@ -240,21 +255,21 @@ css_pipeline = """
 }
 
 .field-name input, .field-description input, .field-type input {
-    font-family: var(--mono-font-family) !important;
+    font-family: var(--font-mono) !important;
     font-size: 12px !important;
 }
 
 .field-variable input, .field-type input, .output-field-variable input {
-    font-family: var(--mono-font-family) !important;
+    font-family: var(--font-mono) !important;
     font-size: 12px !important;
-    padding-top: 3px;
-    padding-bottom: 3px;
+    padding-top: 1px;
+    padding-bottom: 1px;
 }
 
 .field-name listbox, .field-variable listbox, .field-type listbox {
-    font-family: var(--mono-font-family) !important;
-    padding-top: 2px;
-    padding-bottom: 2px;
+    font-family: var(--font-mono) !important;
+    padding-top: 1px;
+    padding-bottom: 1px;
     font-size: 12px !important;
 }
 
@@ -266,13 +281,13 @@ css_pipeline = """
 .step-accordion button.label-wrap {
   font-size: 14px;
   font-weight: bold !important;
-  font-family: var(--mono-font-family) !important;
+  font-family: var(--font-mono) !important;
 }
 
 .step-accordion button.label-wrap.open {
   font-size: 14px;
   font-weight: bold !important;
-  font-family: var(--mono-font-family) !important;
+  font-family: var(--font-mono) !important;
 }
 
 .button-column {
@@ -372,6 +387,7 @@ css_tossup = """
     border-radius: 4px;
     cursor: pointer;
     transition: background-color 0.2s;
+    position: relative;
 }
 .answer-header {
     font-weight: 900;
@@ -390,10 +406,13 @@ css_tossup = """
     background-color: #ffcc00;
 }
 .token.guess-point {
-    border-bottom: 3px solid;
+    border-top: 1px solid;
+    border-left: 3px solid;
+    border-right: 1px solid;
+    border-bottom: 1px solid;
 }
 .token.no-buzz {
-    border-color: #6b96b3;
+    border-color: #808080;
 }
 .token.buzz-0 {
     border-color: #ff4444;

src/display/guide.py

@@ -0,0 +1,77 @@
+"""Guide content for the Quizbowl platform."""
+
+GUIDE_MARKDOWN = """
+# 🎯 Quizbowl Bot Guide
+
+## Quick Start
+1. Choose between Tossup or Bonus mode
+2. Design your pipeline
+3. Test on example questions
+4. Submit for evaluation
+
+## Competition Rules
+
+### 🧠 Tossup Questions
+- **Format**: Individual questions with progressive difficulty
+- **Scoring**:
+  - Correct early buzz: +10 points
+  - Incorrect early buzz: -5 points
+  - Correct after full read: +10 points
+- **Required Outputs**:
+  - `answer`: Your predicted answer
+  - `confidence`: Score between 0-1
+  - Buzz threshold: When to attempt answering
+
+### 🎁 Bonus Questions
+- **Format**: Three-part questions (10 points each)
+- **Scoring**: +10 points per correct part (max 30)
+- **Required Outputs**:
+  - `answer`: Your predicted answer
+  - `confidence`: Score between 0-1
+  - `explanation`: Brief justification for human collaboration
+
+## Building Your First Pipeline
+
+### 1. Simple Pipeline (Recommended for First Submission)
+- Single model step
+- Configure:
+  - Model selection
+  - Temperature (0.0-1.0)
+  - System prompt
+  - Required outputs
+
+### 2. Testing Your Pipeline
+1. Select an example question
+2. For Tossup:
+   - Set buzz threshold (0.5-1.0)
+   - Enable early stopping
+3. Run and check:
+   - Answer accuracy
+   - Confidence scores
+   - Performance metrics
+
+### 3. Evaluation
+- Test on multiple questions
+- Monitor:
+  - Accuracy
+  - Confidence patterns
+  - Response times
+
+### 4. Submission
+1. Log in
+2. Name your model
+3. Add description
+4. Submit for evaluation
+
+## Tips for Success
+- Start with simple pipeline
+- Test thoroughly before submission
+- Use appropriate temperature (0.3-0.7 recommended)
+- Monitor confidence scores
+- Check example submissions
+
+## Need Help?
+- Review example submissions
+- Check documentation
+- Contact support
+"""