Multiple style fixes, remove price slider

app.py

@@ -30,6 +30,12 @@ TOKEN_COSTS = TOKEN_COSTS.loc[
 ]
 TOKEN_COSTS["supports_vision"] = TOKEN_COSTS["supports_vision"].fillna(False)
 
+def clean_names(s):
+    s = s.replace("_", " ").replace("ai", "AI")
+    return s[0].upper() + s[1:]
+
+TOKEN_COSTS["litellm_provider"] = TOKEN_COSTS["litellm_provider"].apply(clean_names)
+
 cmap = plt.get_cmap('RdYlGn_r')  # Red-Yellow-Green colormap, reversed
 
 def count_string_tokens(string: str, model: str) -> int:
@@ -75,21 +81,19 @@ def compute_all(input_type, prompt_text, completion_text, prompt_tokens, complet
             prompt_tokens = int(prompt_tokens * 1000)
             completion_tokens = int(completion_tokens * 1000)
 
+        model_data = TOKEN_COSTS[TOKEN_COSTS['model'] == model].iloc[0]
         prompt_cost, completion_cost = calculate_total_cost(prompt_tokens, completion_tokens, model)
         total_cost = prompt_cost + completion_cost
         
         results.append({
             "Model": model,
-            "Prompt Cost": f"${prompt_cost:.6f}",
-            "Completion Cost": f"${completion_cost:.6f}",
-            "Total Cost": f"${total_cost:.6f}"
+            "Provider": model_data['litellm_provider'],
+            "Input Cost / M tokens": model_data['input_cost_per_token']*1e6,
+            "Output Cost / M tokens": model_data['output_cost_per_token']*1e6,
+            "Total Cost": round(total_cost, 6),
         })
     
     df = pd.DataFrame(results)
-    
-    # Convert cost columns to numeric, removing the '$' sign
-    for col in ["Prompt Cost", "Completion Cost", "Total Cost"]:
-        df[col] = df[col].str.replace('$', '').astype(float)
 
     if len(df) > 1:
         norm = plt.Normalize(df['Total Cost'].min(), df['Total Cost'].max())
@@ -109,10 +113,11 @@ def compute_all(input_type, prompt_text, completion_text, prompt_tokens, complet
         style = ''
         if column == 'Total Cost':
             style += 'font-weight: bold; '
-        if column in ['Prompt Cost', 'Completion Cost', 'Total Cost']:
+            style += apply_color(val)
+        if column in ['Total Cost']:
             val = f'${val:.6f}'
-        if column == 'Total Cost':
-            style += apply_color(float(val.replace('$', '')))
+        if column in ["Input Cost / M tokens", "Output Cost / M tokens"]:
+            val = f'${val}'
         return f'<td style="{style}">{val}</td>'
 
     html_table = '<table class="styled-table">'
@@ -158,7 +163,7 @@ with gr.Blocks(css="""
     }
 """, theme=gr.themes.Soft(primary_hue=gr.themes.colors.yellow, secondary_hue=gr.themes.colors.orange)) as demo:
     gr.Markdown("""
-    # Text-to-Dollars: Get the price of your LLM runs
+    # Text-to-Dollars: Get the price of your LLM API calls!
     Based on prices data from [BerriAI's litellm](https://github.com/BerriAI/litellm/blob/main/model_prices_and_context_window.json).
     """)
     
@@ -168,8 +173,8 @@ with gr.Blocks(css="""
             input_type = gr.Radio(["Text Input", "Token Count Input"], label="Input Type", value="Text Input")
             
             with gr.Group() as text_input_group:
-                prompt_text = gr.Textbox(label="Prompt", value="Tell me a joke about AI. Here's an example: Why did the neural network go to therapy? It had too many deep issues!", lines=3)
-                completion_text = gr.Textbox(label="Completion", value="", lines=3)
+                prompt_text = gr.Textbox(label="Prompt", value="Tell me a joke about AI.", lines=3)
+                completion_text = gr.Textbox(label="Completion", value="Certainly: Why did the neural network go to therapy? It had too many deep issues!", lines=3)
             
             with gr.Group(visible=False) as token_input_group:
                 prompt_tokens_input = gr.Number(label="Prompt Tokens (thousands)", value=1.5)
@@ -183,7 +188,7 @@ with gr.Blocks(css="""
                     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)
+                    max_price = gr.Slider(label="Max Price per Input Token", minimum=0, maximum=0.001, step=0.00001, value=0.001, visible=False, interactive=False)
                 litellm_provider = gr.Dropdown(label="Inference Provider", choices=["Any"] + TOKEN_COSTS['litellm_provider'].unique().tolist(), value="Any")
         
             model = gr.Dropdown(label="Models (at least 1)", choices=TOKEN_COSTS['model'].tolist(), value=["anyscale/meta-llama/Meta-Llama-3-8B-Instruct", "gpt-4o", "claude-3-sonnet-20240229"], multiselect=True)
@@ -215,7 +220,7 @@ with gr.Blocks(css="""
             completion_tokens_input.change,
             function_calling.change,
             litellm_provider.change,
-            max_price.change,
+            # max_price.change,
             supports_vision.change,
             supports_max_input_tokens.change,
             model.change