Style changes

app.py

@@ -46,8 +46,8 @@ def calculate_total_cost(prompt_tokens: int, completion_tokens: int, model: str)
     completion_cost = completion_tokens * model_data['output_cost_per_token']
     return prompt_cost, completion_cost
 
-def update_model_list(function_calling, litellm_provider, max_price, supports_vision):
-    filtered_models = TOKEN_COSTS
+def update_model_list(function_calling, litellm_provider, max_price, supports_vision, supports_max_input_tokens):
+    filtered_models = TOKEN_COSTS.loc[TOKEN_COSTS["max_input_tokens"] >= supports_max_input_tokens*1000]
 
     if litellm_provider != "Any":
         filtered_models = filtered_models[filtered_models['litellm_provider'] == litellm_provider]
@@ -94,14 +94,24 @@ def compute_all(input_type, prompt_text, completion_text, prompt_tokens, complet
 
         min, max = df["Total Cost"].min(), df["Total Cost"].max()
         df = df.style.applymap(lambda x: apply_color(x, min, max), subset=["Total Cost"])
-        df = df.format({"Prompt Cost": "${:.6f}", "Completion Cost": "${:.6f}", "Total Cost": "${:.6f}"})
-        df = df.set_properties(**{
-            'font-family': 'Arial, sans-serif',
-            'white-space': 'pre-wrap'
-        })
-        df = df.set_properties(**{'font-weight': 'bold'}, subset=['Total Cost'])
+    else:
+        df = df.style.applymap(lambda x: 'background-color: rgba(0, 0, 0, 0)', subset=["Total Cost"])
+
+    df = df.format({"Prompt Cost": "${:.6f}", "Completion Cost": "${:.6f}", "Total Cost": "${:.6f}"})
+    df = df.set_properties(**{
+        'font-family': 'Arial, sans-serif',
+        'white-space': 'pre-wrap',
+        'vertical-align': 'middle'
+    })
+    df = df.set_properties(**{'font-weight': 'bold'}, subset=['Total Cost'])
     return df
 
+def toggle_input_visibility(choice):
+    return (
+        gr.Group(visible=(choice == "Text Input")),
+        gr.Group(visible=(choice == "Token Count Input"))
+    )
+
 with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.yellow, secondary_hue=gr.themes.colors.orange)) as demo:
     gr.Markdown("""
     # Text-to-$$$: Calculate the price of your LLM runs
@@ -109,8 +119,8 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.yellow, seconda
     """)
     
     with gr.Row():
-        with gr.Column(scale=2):
-            gr.Markdown("## Input type")
+        with gr.Column():
+            gr.Markdown("## Input type:")
             input_type = gr.Radio(["Text Input", "Token Count Input"], label="Input Type", value="Text Input")
             
             with gr.Group() as text_input_group:
@@ -121,27 +131,23 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.yellow, seconda
                 prompt_tokens_input = gr.Number(label="Prompt Tokens (thousands)", value=1.5)
                 completion_tokens_input = gr.Number(label="Completion Tokens (thousands)", value=2)
 
+        with gr.Column():
             gr.Markdown("## Model choice:")
             with gr.Row():
                 with gr.Column():
                     function_calling = gr.Checkbox(label="Supports Tool Calling", value=False)
                     supports_vision = gr.Checkbox(label="Supports Vision", value=False)
+                with gr.Column():
+                    supports_max_input_tokens = gr.Slider(label="Min Supported Input Length (thousands)", minimum=2, maximum=256, step=2, value=2)
+                    max_price = gr.Slider(label="Max Price per Input Token", minimum=0, maximum=0.001, step=0.00001, value=0.001)
                 litellm_provider = gr.Dropdown(label="Inference Provider", choices=["Any"] + TOKEN_COSTS['litellm_provider'].unique().tolist(), value="Any")
-            
-            max_price = gr.Slider(label="Max Price per Token (input + output)", minimum=0, maximum=0.001, step=0.00001, value=0.001)
-            
-            model = gr.Dropdown(label="Models (can select multiple)", choices=TOKEN_COSTS['model'].tolist(), value=[TOKEN_COSTS['model'].tolist()[0]], multiselect=True)
-            
-            compute_button = gr.Button("Compute Costs ⚙️", variant="secondary")
-
-        with gr.Column(scale=2):
-            results_table = gr.Dataframe(label="Cost Results")
+        
+            model = gr.Dropdown(label="Models (can select multiple)", choices=TOKEN_COSTS['model'].tolist(), value="anyscale/meta-llama/Meta-Llama-3-8B-Instruct", multiselect=True)
+        
+    gr.Markdown("## ➡️ Resulting Costs:")
 
-    def toggle_input_visibility(choice):
-        return (
-            gr.Group(visible=(choice == "Text Input")),
-            gr.Group(visible=(choice == "Token Count Input"))
-        )
+    with gr.Row():
+        results_table = gr.Dataframe()
 
     input_type.change(
         toggle_input_visibility,
@@ -149,15 +155,42 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.yellow, seconda
         outputs=[text_input_group, token_input_group]
     )
 
-    # Update model list based on criteria
-    function_calling.change(update_model_list, inputs=[function_calling, litellm_provider, max_price, supports_vision], outputs=model)
-    litellm_provider.change(update_model_list, inputs=[function_calling, litellm_provider, max_price, supports_vision], outputs=model)
-    max_price.change(update_model_list, inputs=[function_calling, litellm_provider, max_price, supports_vision], outputs=model)
-    supports_vision.change(update_model_list, inputs=[function_calling, litellm_provider, max_price, supports_vision], outputs=model)
+    gr.on(
+        triggers=[function_calling.change, litellm_provider.change, max_price.change, supports_vision.change, supports_max_input_tokens.change],
+        fn=update_model_list,
+        inputs=[function_calling, litellm_provider, max_price, supports_vision, supports_max_input_tokens],
+        outputs=model,
+    )
+
+    gr.on(
+        triggers=[
+            input_type.change,
+            prompt_text.change,
+            completion_text.change,
+            prompt_tokens_input.change,
+            completion_tokens_input.change,
+            function_calling.change,
+            litellm_provider.change,
+            max_price.change,
+            supports_vision.change,
+            supports_max_input_tokens.change,
+            model.change
+        ],
+        fn=compute_all,
+        inputs=[
+            input_type,
+            prompt_text,
+            completion_text,
+            prompt_tokens_input,
+            completion_tokens_input,
+            model
+        ],
+        outputs=results_table
+    )
 
-    # Compute costs
-    compute_button.click(
-        compute_all,
+    # Load results on page load
+    demo.load(
+        fn=compute_all,
         inputs=[
             input_type,
             prompt_text,
@@ -166,7 +199,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.yellow, seconda
             completion_tokens_input,
             model
         ],
-        outputs=[results_table]
+        outputs=results_table
     )
 
 if __name__ == "__main__":