Pipeline cost display

shared/workflows

@@ -1 +1 @@
-Subproject commit c5da5d36708afbade2a2175391562dea7354be2c
+Subproject commit 7c8503081f2d663ad96c2e61f59dae1cc37f1cc3

src/components/quizbowl/bonus.py

@@ -13,9 +13,10 @@ from components.model_pipeline.model_pipeline import PipelineInterface, Pipeline
 from components.typed_dicts import PipelineStateDict
 from display.formatting import styled_error
 from shared.workflows import factory
-from shared.workflows.metrics import evaluate_prediction
+from shared.workflows.metrics import evaluate_prediction, workflow_metrics
 from shared.workflows.qb_agents import QuizBowlBonusAgent
 from shared.workflows.runners import run_and_eval_bonus_dataset, run_and_evaluate_bonus
+from shared.workflows.structs import Workflow
 from submission import submit
 
 from . import populate
@@ -125,6 +126,7 @@ class BonusInterface:
 
         self.question_display = gr.HTML(label="Question", elem_id="bonus-question-display")
         self.error_display = gr.HTML(label="Error", elem_id="bonus-error-display", visible=False)
+        self.model_cost_display = gr.HTML(label="Pipeline Cost", value="", visible=False)
         self.results_table = gr.DataFrame(
             label="Model Outputs",
             value=pd.DataFrame(columns=["Part", "Correct?", "Confidence", "Prediction", "Explanation"]),
@@ -185,6 +187,55 @@ class BonusInterface:
             error_msg = styled_error(f"Error loading pipeline: {str(e)}")
             return UNSELECTED_PIPELINE_NAME, gr.skip(), gr.skip(), gr.update(visible=True, value=error_msg)
 
+    def refresh_model_cost(self, pipeline_state: PipelineStateDict):
+        """Refresh the model cost display with a styled HTML card and emoji."""
+        workflow = Workflow(**pipeline_state["workflow"])
+        cost = workflow_metrics.compute_workflow_cost(workflow)["cost"]
+        # Define color and emoji based on cost range
+        if cost < 1:
+            color = "#d4edda"  # light green
+            emoji = "🟢"
+            label = "Ultra Light"
+        elif cost < 2:
+            color = "#cce5ff"  # light blue
+            emoji = "🔵"
+            label = "Lightweight"
+        elif cost < 3:
+            color = "#fff3cd"  # light yellow
+            emoji = "🟡"
+            label = "Moderate"
+        elif cost < 4:
+            color = "#ffe5b4"  # light orange
+            emoji = "🟠"
+            label = "Expensive"
+        else:
+            color = "#f8d7da"  # light red
+            emoji = "🔴"
+            label = "Very Expensive"
+
+        html = f"""
+        <div style="
+            background: {color};
+            border-radius: 10px;
+            padding: 1em 1.5em;
+            margin: 0.5em 0;
+            display: flex;
+            align-items: center;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+            font-size: 1.1em;
+            font-weight: 500;
+        ">
+            <span style="font-size:1.5em; margin-right: 0.7em;">{emoji}</span>
+            <span>
+                <span style="font-weight:600; color: #333;">Pipeline Cost:</span>
+                <span style="font-size:1.2em; color: #333;">${cost:.2f}</span>
+                <span style="font-size:0.85em; color: #555;">per 1k question prefixes</span>
+                <span style="margin-left:0.5em; color: #555;">({label})</span>
+            </span>
+        </div>
+        """
+        return gr.update(visible=True, value=html)
+
     # ------------------------------------- Agent Functions -----------------------------------------------------------
 
     def single_run(
@@ -349,6 +400,12 @@ class BonusInterface:
             ],
         )
 
+        self.pipeline_state.change(
+            fn=self.refresh_model_cost,
+            inputs=[self.pipeline_state],
+            outputs=[self.model_cost_display],
+        )
+
         self.eval_btn.click(
             fn=self.evaluate,
             inputs=[self.pipeline_state],

src/components/quizbowl/tossup.py

@@ -13,10 +13,11 @@ from components.model_pipeline.tossup_pipeline import TossupPipelineInterface, T
 from components.typed_dicts import TossupInterfaceDefaults, TossupPipelineStateDict
 from display.formatting import styled_error
 from shared.workflows import factory
-from shared.workflows.metrics import evaluate_prediction
+from shared.workflows.metrics import evaluate_prediction, workflow_metrics
 from shared.workflows.metrics.qb_metrics import prepare_tossup_results_df
 from shared.workflows.qb_agents import QuizBowlTossupAgent, TossupResult
 from shared.workflows.runners import run_and_eval_tossup_dataset, run_and_evaluate_tossup
+from shared.workflows.structs import TossupWorkflow
 from submission import submit
 
 from . import populate
@@ -164,6 +165,7 @@ class TossupInterface:
             self.run_btn = gr.Button("Run on Tossup Question", variant="secondary")
         self.question_display = gr.HTML(label="Question", elem_id="tossup-question-display")
         self.error_display = gr.HTML(label="Error", elem_id="tossup-error-display", visible=False)
+        self.model_cost_display = gr.HTML(label="Pipeline Cost", value="", visible=False)
         with gr.Row():
             self.confidence_plot = gr.Plot(
                 label="Buzz Confidence",
@@ -175,7 +177,6 @@ class TossupInterface:
             value=pd.DataFrame(columns=["Token Position", "Correct?", "Confidence", "Prediction"]),
             visible=False,
         )
-
         self.eval_btn, self.model_name_input, self.description_input, self.submit_btn, self.submit_status = (
             commons.get_model_submission_accordion(self.app)
         )
@@ -230,6 +231,55 @@ class TossupInterface:
             error_msg = styled_error(f"Error loading pipeline: {str(e)}")
             return UNSELECTED_PIPELINE_NAME, gr.skip(), gr.skip(), gr.update(visible=True, value=error_msg)
 
+    def refresh_model_cost(self, pipeline_state: TossupPipelineStateDict):
+        """Refresh the model cost display with a styled HTML card and emoji."""
+        workflow = TossupWorkflow(**pipeline_state["workflow"])
+        cost = workflow_metrics.compute_workflow_cost(workflow)["cost"]
+        # Define color and emoji based on cost range
+        if cost < 1:
+            color = "#d4edda"  # light green
+            emoji = "🟢"
+            label = "Ultra Light"
+        elif cost < 2:
+            color = "#cce5ff"  # light blue
+            emoji = "🔵"
+            label = "Lightweight"
+        elif cost < 3:
+            color = "#fff3cd"  # light yellow
+            emoji = "🟡"
+            label = "Moderate"
+        elif cost < 4:
+            color = "#ffe5b4"  # light orange
+            emoji = "🟠"
+            label = "Expensive"
+        else:
+            color = "#f8d7da"  # light red
+            emoji = "🔴"
+            label = "Very Expensive"
+
+        html = f"""
+        <div style="
+            background: {color};
+            border-radius: 10px;
+            padding: 1em 1.5em;
+            margin: 0.5em 0;
+            display: flex;
+            align-items: center;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+            font-size: 1.1em;
+            font-weight: 500;
+        ">
+            <span style="font-size:1.5em; margin-right: 0.7em;">{emoji}</span>
+            <span>
+                <span style="font-weight:600; color: #333;">Pipeline Cost:</span>
+                <span style="font-size:1.2em; color: #333;">${cost:.2f}</span>
+                <span style="font-size:0.85em; color: #555;">per 1k question prefixes</span>
+                <span style="margin-left:0.5em; color: #555;">({label})</span>
+            </span>
+        </div>
+        """
+        return gr.update(visible=True, value=html)
+
     # ------------------------------------- Agent Functions -----------------------------------------------------------
 
     def single_run(
@@ -391,6 +441,12 @@ class TossupInterface:
             ],
         )
 
+        self.pipeline_state.change(
+            fn=self.refresh_model_cost,
+            inputs=[self.pipeline_state],
+            outputs=[self.model_cost_display],
+        )
+
         self.eval_btn.click(
             fn=self.evaluate,
             inputs=[self.pipeline_state],