Update app.py

app.py

@@ -2,30 +2,13 @@ import gradio as gr
 import models
 import pandas as pd
 import theme
+import matplotlib.pyplot as plt
     
-text = "<h1 style='text-align: center; color: #f0ba2d; font-size: 40px;'>TCO Comparison Calculator"
-text0 = "<h1 style='text-align: center; color: midnightblue; font-size: 30px;'>Describe your use case"
-text1 = "<h1 style='text-align: center; color: midnightblue; font-size: 25px;'>First option"
-text2 = "<h1 style='text-align: center; color: midnightblue; font-size: 25px;'>Second option"
-text3 = "<h1 style='text-align: center; color: midnightblue; font-size: 30px;'>Compute and compare TCOs"
-text4 = "The cost/request only defines the infrastructure cost for deployment. The labor cost must be added for the whole AI model service deployment TCO."
+text = "<h1 style='text-align: center; color: #333333; font-size: 40px;'>TCO Comparison Calculator"
+text2 = "Please note that the cost/request only defines the infrastructure cost for deployment. The labor cost must be added for the whole AI model service deployment TCO."
 description=f"""
-<p>In this demo application, we help you compare different AI model services, such as Open source or SaaS solutions, based on the Total Cost of Ownership for their deployment. Please note that we focus on getting the service up and running, but not the maintenance that follows.</p>
-<p>First, you'll have to select your use case. Then, select the two model service options you'd like to compare. Depending on the options you chose, you could be able to customize some parameters of the set-up. Eventually, we will provide you with the cost of deployment for the selected model services, as a function of the number of requests experienced by your service. You can compare both solutions to evaluate which one best suits your needs.</p>
-"""
-markdown = """
-<div style="
-    background-color: #f0ba2d;
-    color: #050f19;
-    border-radius: 10px;
-    padding: 3px;
-    margin: 0 auto;
-    width: 150px;
-    text-align: center;
-    font-size: 18px;
-">
-Comparison
-</div>
+<p>In this demo application, we help you compare different AI model services, such as Open source or SaaS solutions, based on the Total Cost of Ownership for their deployment.</p> 
+<p>Please note that we focus on getting the service up and running, but not the maintenance that follows.</p>
 """
 
 def on_use_case_change(use_case):
@@ -36,34 +19,25 @@ def on_use_case_change(use_case):
     else:
         return gr.update(value=50), gr.update(value=10)
     
-def compare_info(tco1, tco2, labor_cost1, labor_cost2, dropdown, dropdown2):
-    r = tco1 / tco2
-    comparison_result3 = ""
-    
-    if r < 1:
-        comparison_result = f"The cost/request of the second {dropdown2} service is {1/r:.5f} times more expensive than the one of the first {dropdown} service."
-        if labor_cost1 > labor_cost2:
-            meeting_point = (labor_cost2 - labor_cost1) / (tco1 - tco2)
-            comparison_result3 = f"The number of requests you need to achieve in a month to have the labor cost of the {dropdown} service be absorbed and both solution TCOs be equal would be of {meeting_point:.0f}."
+def compare_info(tco1, tco2, dropdown, dropdown2):
+    # Create a bar chart
+    services = [dropdown, dropdown2]
+    costs_to_compare = [tco1, tco2]
     
-    elif r > 1:
-        comparison_result = f"The cost/request of the second {dropdown2} service is {r:.5f} times cheaper than the one of the first {dropdown} service."
-        if labor_cost1 < labor_cost2:
-            meeting_point = (labor_cost2 - labor_cost1) / (tco1 - tco2)
-            comparison_result3 = f"The number of requests you need to achieve in a month to have the labor cost of the {dropdown2} service be absorbed and both solution TCOs be equal would be of {meeting_point:.0f}."
+    plt.figure(figsize=(6, 4))
+    plt.bar(services, costs_to_compare, color=['red', 'green'])
+    plt.xlabel('AI option services', fontsize=10)
+    plt.ylabel('($) Cost/Request', fontsize=10)
+    plt.title('Comparison of Cost/Request', fontsize=14)
     
-    else:
-        comparison_result = f"Both solutions have the same cost/request." 
-    
-    info = f"""
-    <br>
-    <p> {comparison_result} </p>
-    <br>
-    <p> {text4} </p>
-    <br>
-    <p> {comparison_result3} </p>
-    """
-    return info
+    # Customize x-axis labels
+    #plt.xticks(rotation=30, ha='right')  # Rotate by 30 degrees and align to the right
+
+    # Save the plot to a file or display it
+    plt.tight_layout()
+    plt.savefig('cost_comparison.png')  # Save to a file
+
+    return gr.update(value='cost_comparison.png')
 
 def create_table(tco1, tco2, labor_cost1, labor_cost2, dropdown, dropdown2, latency, latency2):
     list_values = []
@@ -79,14 +53,15 @@ def create_table(tco1, tco2, labor_cost1, labor_cost2, dropdown, dropdown2, late
     formatted_data["Labor Cost ($/month)"] = formatted_data["Labor Cost ($/month)"].apply('{:.0f}'.format)
 
     styled_data = formatted_data.style\
-        .set_properties(**{'background-color': '#081527', 'color': '#ffffff', 'border-color': '#ffffff', 'border-width': '1px', 'border-style': 'solid'})\
+        .set_properties(**{'background-color': '#ffffff', 'color': '#000000', 'border-color': '#e0e0e0', 'border-width': '1px', 'border-style': 'solid'})\
         .to_html()
+    centered_styled_data = f"<center>{styled_data}</center>"
     
-    return gr.update(value=styled_data)
+    return gr.update(value=centered_styled_data)
 
 def update_plot(tco1, tco2, dropdown, dropdown2, labour_cost1, labour_cost2):
     
-    request_ranges = [100, 200, 300, 400, 500, 1000, 10000]
+    request_ranges = list(range(0, 1001, 100)) + list(range(1000, 10001, 500)) + list(range(10000, 100001, 1000)) + list(range(100000, 2000001, 100000))
     costs_tco1 = [(tco1 * req + labour_cost1) for req in request_ranges]
     costs_tco2 = [(tco2 * req + labour_cost2) for req in request_ranges]
 
@@ -96,7 +71,7 @@ def update_plot(tco1, tco2, dropdown, dropdown2, labour_cost1, labour_cost2):
         "AI model service": ["1)" + " " + dropdown] * len(request_ranges) + ["2)" + " " + dropdown2] * len(request_ranges)
         }
     )
-    return gr.LinePlot.update(data, visible=True, x="Number of requests", y="Cost ($)",color="AI model service",color_legend_position="bottom", title="Total Cost of Model Serving for one month", height=300, width=500, tooltip=["Number of requests", "Cost ($)", "AI model service"])
+    return gr.LinePlot.update(data, visible=True, x="Number of requests", y="Cost ($)",color="AI model service",color_legend_position="bottom", title="Set-up TCO for one month", height=300, width=500, tooltip=["Number of requests", "Cost ($)", "AI model service"])
 
 style = theme.Style()
 
@@ -152,13 +127,16 @@ with gr.Blocks(theme=style) as demo:
                     tco_formula2 = gr.Markdown()
         
     with gr.Row(variant='panel'):
-        with gr.Column(scale=2):
-            table = gr.Markdown()
-        with gr.Column(scale=3):
-            info = gr.Markdown()
-    with gr.Row():
-        plot = gr.LinePlot(visible=False)
+        with gr.Column():
+            with gr.Row():
+                table = gr.Markdown()
+            with gr.Row():
+                with gr.Column(scale=1):
+                    image = gr.Image()
+                    info = gr.Markdown(text2)
+                with gr.Column(scale=2):
+                    plot = gr.LinePlot(visible=False)
     
-    compute_tco_btn.click(page1.compute_cost_per_token, inputs=page1.get_all_components_for_cost_computing() + [dropdown, input_tokens, output_tokens], outputs=[tco1, tco_formula, latency, labor_cost1]).then(page2.compute_cost_per_token, inputs=page2.get_all_components_for_cost_computing() + [dropdown2, input_tokens, output_tokens], outputs=[tco2, tco_formula2, latency2, labor_cost2]).then(create_table, inputs=[tco1, tco2, labor_cost1, labor_cost2, dropdown, dropdown2, latency, latency2], outputs=table).then(compare_info, inputs=[tco1, tco2, labor_cost1, labor_cost2, dropdown, dropdown2], outputs=info).then(update_plot, inputs=[tco1, tco2, dropdown, dropdown2, labor_cost1, labor_cost2], outputs=plot)
+    compute_tco_btn.click(page1.compute_cost_per_token, inputs=page1.get_all_components_for_cost_computing() + [dropdown, input_tokens, output_tokens], outputs=[tco1, tco_formula, latency, labor_cost1]).then(page2.compute_cost_per_token, inputs=page2.get_all_components_for_cost_computing() + [dropdown2, input_tokens, output_tokens], outputs=[tco2, tco_formula2, latency2, labor_cost2]).then(create_table, inputs=[tco1, tco2, labor_cost1, labor_cost2, dropdown, dropdown2, latency, latency2], outputs=table).then(compare_info, inputs=[tco1, tco2, dropdown, dropdown2], outputs=image).then(update_plot, inputs=[tco1, tco2, dropdown, dropdown2, labor_cost1, labor_cost2], outputs=plot)
 
 demo.launch(debug=True)