Update app.py

app.py

@@ -1,8 +1,7 @@
 import gradio as gr
 import models
-import pandas as pd
+import results
 import theme
-import matplotlib.pyplot as plt
     
 text = "<h1 style='text-align: center; color: #333333; font-size: 40px;'>AI 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."
@@ -20,6 +19,8 @@ $COT_{1K}$ = Cost per 1000 Output Tokens <br>
 $IT$ = Input Tokens <br>
 $OT$ = Output Tokens
 """
+def set_shared_data(page1, page2):
+    return page1, page2
 
 def on_use_case_change(use_case):
     if use_case == "Summarize":
@@ -29,91 +30,6 @@ def on_use_case_change(use_case):
     else:
         return gr.update(value=50), gr.update(value=10)
     
-def compare_info(tco1, tco2, dropdown, dropdown2):
-    if error_occurred == False :
-        #Compute the cost/request ratio
-        r = tco1 / tco2   
-        if r < 1:
-            comparison_result = f"""The cost/request of the second {dropdown2} service is <b>{1/r:.5f} times more expensive</b> than the one of the first {dropdown} service."""   
-        elif r > 1:
-            comparison_result = f"""The cost/request of the second {dropdown2} service is <b>{r:.5f} times cheaper</b> than the one of the first {dropdown} service."""
-        else:
-            comparison_result = f"""Both solutions have the <b>same cost/request</b>."""
-            
-        # Create a bar chart
-        services = [dropdown, dropdown2]
-        costs_to_compare = [tco1, tco2]
-        
-        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)
-
-        plt.tight_layout()
-        plt.savefig('cost_comparison.png')  # Save to a file
-
-        return gr.update(value='cost_comparison.png', visible=True), comparison_result
-    else:
-        return None, ""
-
-def create_table(tco1, tco2, labor_cost1, labor_cost2, dropdown, dropdown2, latency, latency2):
-    if error_occurred == False:
-        list_values = []
-        first_sol = [tco1, labor_cost1, latency]
-        second_sol = [tco2, labor_cost2, latency2]
-        list_values.append(first_sol)
-        list_values.append(second_sol)
-
-        data = pd.DataFrame(list_values, index=[dropdown, dropdown2], columns=["Cost/request ($) ", "Labor Cost ($/month)", "Average latency (s)"])
-        
-        formatted_data = data.copy()
-        formatted_data["Cost/request ($) "] = formatted_data["Cost/request ($) "].apply('{:.5f}'.format)
-        formatted_data["Labor Cost ($/month)"] = formatted_data["Labor Cost ($/month)"].apply('{:.0f}'.format)
-
-        styled_data = formatted_data.style\
-            .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=centered_styled_data)
-    else:
-        return ""
-
-def compute_cost_per_request(*args):
-    dropdown_id = args[-2]
-    dropdown_id2 = args[-1]
-    global error_occurred 
-    if dropdown_id!="" and dropdown_id2!="":
-        error_occurred = False
-        args_page1 = list(args) + [dropdown_id, input_tokens, output_tokens]
-        args_page2 = list(args) + [dropdown_id2, input_tokens, output_tokens]
-        result_page1 = page1.compute_cost_per_token(*args_page1)
-        result_page2 = page2.compute_cost_per_token(*args_page2)
-        tco1, latency, labor_cost1 = result_page1
-        tco2, latency2, labor_cost2 = result_page2   
-        return tco1, latency, labor_cost1, tco2, latency2, labor_cost2
-    else: 
-        error_occurred = True
-        raise gr.Error("Please select two AI service options.")
-
-def update_plot(tco1, tco2, dropdown, dropdown2, labour_cost1, labour_cost2):
-    if error_occurred == False:
-        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]
-
-        data = pd.DataFrame({
-            "Number of requests": request_ranges * 2,
-            "Cost ($)": costs_tco1 + costs_tco2,
-            "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="Set-up TCO for one month", height=300, width=500, tooltip=["Number of requests", "Cost ($)", "AI model service"])
-    else:
-        return ""
-    
-error_occurred = False
 style = theme.Style()
 
 with gr.Blocks(theme=style) as demo:
@@ -147,17 +63,15 @@ with gr.Blocks(theme=style) as demo:
             dropdown2 = gr.Dropdown(model_names, interactive=True, label=" Second AI service option ")
             with gr.Accordion("Click here for more information on the computation parameters for your second AI service option", open=False):        
                 page2.render()
-            
+    
+    shared_page1, shared_page2 = set_shared_data(page1, page2)
+    results.set_shared_pages(shared_page1, shared_page2)
+    
     dropdown.change(page1.make_model_visible, inputs=[dropdown, use_case], outputs=page1.get_all_components())
     dropdown2.change(page2.make_model_visible, inputs=[dropdown2, use_case], outputs=page2.get_all_components())
     
     compute_tco_btn = gr.Button("Compute & Compare", size="lg", variant="primary", scale=1) 
-    tco1 = gr.State()
-    tco2 = gr.State()
-    labor_cost1 = gr.State()
-    labor_cost2 = gr.State()
-    latency = gr.State()
-    latency2 = gr.State()
+    tco1, tco2, labor_cost1, labor_cost2, latency, latency2 = [gr.State() for _ in range(6)]
     
     with gr.Row():
         with gr.Accordion("Click here to see the cost/request computation formula", open=False):
@@ -176,9 +90,9 @@ with gr.Blocks(theme=style) as demo:
                 with gr.Column(scale=2):
                     plot = gr.LinePlot(visible=False)
     
-    compute_tco_btn.click(compute_cost_per_request, inputs=page1.get_all_components_for_cost_computing() + page2.get_all_components_for_cost_computing() + [dropdown, dropdown2], outputs=[tco1, latency, labor_cost1, tco2, 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, ratio])\
-        .then(update_plot, inputs=[tco1, tco2, dropdown, dropdown2, labor_cost1, labor_cost2], outputs=plot)
+    compute_tco_btn.click(results.compute_cost_per_request, inputs=page1.get_all_components_for_cost_computing() + page2.get_all_components_for_cost_computing() + [dropdown, dropdown2, input_tokens, output_tokens], outputs=[tco1, latency, labor_cost1, tco2, latency2, labor_cost2])\
+        .then(results.create_table, inputs=[tco1, tco2, labor_cost1, labor_cost2, dropdown, dropdown2, latency, latency2], outputs=table)\
+        .then(results.compare_info, inputs=[tco1, tco2, dropdown, dropdown2], outputs=[image, ratio])\
+        .then(results.update_plot, inputs=[tco1, tco2, dropdown, dropdown2, labor_cost1, labor_cost2], outputs=plot)
 
 demo.launch(debug=True)