Update app.py

app.py

@@ -1,10 +1,7 @@
 import gradio as gr
 import models
 import pandas as pd
-from gradio.themes.base import Base
-from gradio.themes.utils.colors import Color
-from gradio.themes.utils import colors, fonts, sizes
-from typing import Iterable
+import theme
     
 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"
@@ -13,7 +10,21 @@ text2 = "<h1 style='text-align: center; color: midnightblue; font-size: 25px;'>S
 text3 = "<h1 style='text-align: center; color: midnightblue; font-size: 30px;'>Compute and compare TCOs"
 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. You can compare both solutions to evaluate which one best suits your needs.</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>
 """
 
 def on_use_case_change(use_case):
@@ -31,36 +42,25 @@ def compare(tco1, tco2, labor_cost1, labor_cost2, dropdown, dropdown2):
     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:
-            comparison_result2 = f"However, it will cost a lot more to deploy the set-up for the {dropdown} service because the labor cost per month is of ${labor_cost1}, compared to a labor cost per month of ${labor_cost2} for the {dropdown2} solution."
             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}."
-        elif labor_cost1 < labor_cost2:
-            comparison_result2 = f"Additionally, it will cost a lot more to deploy the set-up for the {dropdown2} service because the labor cost per month is of ${labor_cost2}, compared to a labor cost per month of ${labor_cost1} for the {dropdown} solution."
-        else: 
-            comparison_result2 = f"Additionally, both services have the same labor cost per month."
     
     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:
-            comparison_result2 = f"Additionally, it will cost a lot more to deploy the set-up for the {dropdown} service because the labor cost per month is of ${labor_cost1}, compared to a labor cost per month of ${labor_cost2} for the {dropdown2} solution."
-        elif labor_cost1 < labor_cost2:
-            comparison_result2 = f"However, it will cost a lot more to deploy the set-up for the {dropdown2} service because the labor cost per month is of ${labor_cost2}, compared to a labor cost per month of ${labor_cost1} for the {dropdown} solution."
+        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}."
-        else: 
-            comparison_result2 = f"Additionally, both services have the same labor cost per month."
     
     else:
         comparison_result = f"Both solutions have the same cost/request." 
-        if labor_cost1 > labor_cost2:
-            comparison_result2 = f"However, it will cost a lot more to deploy the set-up for the {dropdown} service because the labor cost per month is of ${labor_cost1}, compared to a labor cost per month of ${labor_cost2} for the {dropdown2} solution."
-        elif labor_cost1 < 1:
-            comparison_result2 = f"However, it will cost a lot more to deploy the set-up for the {dropdown2} service because the labor cost per month is of ${labor_cost2}, compared to a labor cost per month of ${labor_cost1} for the {dropdown} solution."
-        else: 
-            comparison_result2 = f"Additionally, both services have the same labor cost per month."
     
-    #return comparison_result + "\n" + "\n" + comparison_result2 + "\n" + "\n" + comparison_result3
-    return gr.update(value=comparison_result), comparison_result3
+    info = f"""
+    <br>
+    <p> {comparison_result} </p>
+    <br>
+    <p> {comparison_result3} </p>
+    """
+    return info
 
 def create_table(tco1, tco2, labor_cost1, labor_cost2, dropdown, dropdown2):
     list_values = []
@@ -78,9 +78,9 @@ def create_table(tco1, tco2, labor_cost1, labor_cost2, dropdown, dropdown2):
     formatted_data["Labor Cost ($/month)"] = formatted_data["Labor Cost ($/month)"].apply('{:.1f}'.format)
 
     styled_data = formatted_data.style\
-        .set_properties(**{'background-color': '#050f19', 'color': '#ffffff', 'border-color': '#ffffff', 'border-width': '1px', 'border-style': 'solid'})\
+        .set_properties(**{'background-color': '#081527', 'color': '#ffffff', 'border-color': '#ffffff', 'border-width': '1px', 'border-style': 'solid'})\
         .to_html()
-        
+    
     return gr.update(value=styled_data)
 
 def update_plot(tco1, tco2, dropdown, dropdown2, labour_cost1, labour_cost2):
@@ -95,111 +95,9 @@ 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, 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="Total Cost of Model Serving for one month", height=300, width=500, tooltip=["Number of requests", "Cost ($)", "AI model service"])
 
-light_grey = Color(
-    name="light_grey",
-    c50="#e0e0e0",
-    c100="#e0e0e0",
-    c200="#e0e0e0",
-    c300="#e0e0e0",
-    c400="#e0e0e0",
-    c500="#e0e0e0",
-    c600="#e0e0e0",
-    c700="#e0e0e0",
-    c800="#e0e0e0",
-    c900="#e0e0e0",
-    c950="#e0e0e0",
-)
-
-class Style(Base):
-    def __init__(
-        self,
-        *,
-        primary_hue: colors.Color | str = light_grey,
-        secondary_hue: colors.Color | str = light_grey,
-        neutral_hue: colors.Color | str = light_grey,
-        spacing_size: sizes.Size | str = sizes.spacing_md,
-        radius_size: sizes.Size | str = sizes.radius_md,
-        text_size: sizes.Size | str = sizes.text_md,
-        font: fonts.Font
-        | str
-        | Iterable[fonts.Font | str] = (fonts.GoogleFont("Sora")),
-        font_mono: fonts.Font
-        | str
-        | Iterable[fonts.Font | str] = (fonts.GoogleFont("Sora")),
-    ):
-        super().__init__(
-            primary_hue=primary_hue,
-            secondary_hue=secondary_hue,
-            neutral_hue=neutral_hue,
-            spacing_size=spacing_size,
-            radius_size=radius_size,
-            text_size=text_size,
-            font=font,
-            font_mono=font_mono,
-        )
-        super().set(
-            background_fill_primary="#050f19", #The color of the background of blocks
-            background_fill_secondary="#050f19",
-            block_background_fill="#050f19", #The color of the background of blocks
-            block_background_fill_dark="#050f19",
-            
-            border_color_primary="#050f19", #The border of a block such as dropdown 
-            border_color_primary_dark="#050f19",
-            
-            link_text_color="#f0ba2d", #The color for links
-            link_text_color_dark="#f0ba2d",
-            
-            block_info_text_color="ffffff",
-            block_info_text_color_dark="ffffff",
-            
-            block_border_color="#050f19", #The border color around an item (e.g. Accordion)
-            block_border_color_dark="#050f19",
-            block_shadow="*shadow_drop_lg",
-            #form_gap_width="*spacing_md", #The border gap between form elements, (e.g. consecutive textboxes)
-            
-            input_background_fill="#081527", #The background of an input field
-            input_background_fill_dark="#081527", 
-            input_border_color="#050f19",
-            input_border_color_dark="#050f19",
-            input_border_width="2px", 
-            
-            block_label_background_fill="#f0ba2d",
-            block_label_background_fill_dark="#f0ba2d",
-            block_label_border_color=None,
-            block_label_border_color_dark=None,
-            block_label_text_color="#050f19",
-            block_label_text_color_dark="#050f19",
-            
-            button_primary_background_fill="#ffffff",
-            button_primary_border_color="#ffffff",
-            button_primary_text_color="#050f19",
-            button_shadow="*shadow_drop_lg",
-            
-            block_title_background_fill="#f0ba2d", #The background of the title of a form element (e.g. textbox).
-            block_title_background_fill_dark="#f0ba2d", 
-            block_title_radius="*radius_sm",#The corner radius of the title of a form element (e.g. textbox).
-            block_title_text_color="#050f19", #The text color of the title of a form element (e.g. textbox).
-            block_title_text_color_dark="#050f19",
-            block_title_text_size="*text_lg",
-            block_title_border_width="2px", #The border around the title of a form element (e.g. textbox)
-            block_title_border_width_dark="2px",
-            block_title_border_color="#f0ba2d",
-            block_title_border_color_dark="#f0ba2d",
-            
-            body_background_fill="#050f19",
-            body_background_fill_dark="#050f19",
-            body_text_color="#ffffff", #The default text color.
-            body_text_color_dark="#ffffff",
-            body_text_color_subdued="#ffffff",
-            body_text_color_subdued_dark="#ffffff",
-            
-            slider_color="*secondary_300",
-            slider_color_dark="*secondary_600",
-        )
-
-style = Style()
+style = theme.Style()
 
 with gr.Blocks(theme=style) as demo:
     Models: list[models.BaseTCOModel] = [models.OpenAIModel, models.CohereModel, models.OpenSourceLlama2Model]
@@ -209,8 +107,6 @@ with gr.Blocks(theme=style) as demo:
     
     with gr.Row():
         with gr.Column():
-            # with gr.Row():
-            #     gr.Markdown(value=text0)
             with gr.Row():
                 use_case = gr.Dropdown(["Summarize", "Question-Answering", "Classification"], value="Question-Answering", label=" Describe your use case ")
             with gr.Accordion("Click here if you want to customize the number of input and output tokens per request", open=False):    
@@ -224,14 +120,12 @@ with gr.Blocks(theme=style) as demo:
     
     with gr.Row():
         with gr.Column():
-            #gr.Markdown(value=text1)
             page1 = models.ModelPage(Models)
             dropdown = gr.Dropdown(model_names, interactive=True, label=" First AI service option ")
             with gr.Accordion("Click here for more information on the computation parameters for your first AI service option", open=False):    
                 page1.render()
 
         with gr.Column():
-            #gr.Markdown(value=text2)
             page2 = models.ModelPage(Models)
             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):        
@@ -240,7 +134,6 @@ with gr.Blocks(theme=style) as demo:
     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())
     
-    #gr.Markdown(value=text3)
     compute_tco_btn = gr.Button("Compute & Compare", size="lg", variant="primary", scale=1) 
     tco1 = gr.State()
     tco2 = gr.State()
@@ -261,13 +154,16 @@ with gr.Blocks(theme=style) as demo:
                 tco_formula2 = gr.Markdown()
                 
     with gr.Row(): 
-        with gr.Column(scale=1): 
-            info = gr.Text("Click on Compute & Compare to get the results", label=" Comparison of cost/request and TCOs")
+        gr.Markdown(markdown)
+        
+    with gr.Row(variant='panel'):
+        with gr.Column(scale=1):
             table = gr.Markdown()
-            ratio = gr.Markdown()
         with gr.Column(scale=2):
-            plot = gr.LinePlot()
+            info = gr.Markdown()
+    with gr.Row():
+        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=[tco_output, tco1, tco_formula, latency_info, labor_cost1]).then(page2.compute_cost_per_token, inputs=page2.get_all_components_for_cost_computing() + [dropdown2, input_tokens, output_tokens], outputs=[tco_output2, tco2, tco_formula2, latency_info2, labor_cost2]).then(create_table, inputs=[tco1, tco2, labor_cost1, labor_cost2, dropdown, dropdown2], outputs=table).then(compare, inputs=[tco1, tco2, labor_cost1, labor_cost2, dropdown, dropdown2], outputs=[info, ratio]).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=[tco_output, tco1, tco_formula, latency_info, labor_cost1]).then(page2.compute_cost_per_token, inputs=page2.get_all_components_for_cost_computing() + [dropdown2, input_tokens, output_tokens], outputs=[tco_output2, tco2, tco_formula2, latency_info2, labor_cost2]).then(create_table, inputs=[tco1, tco2, labor_cost1, labor_cost2, dropdown, dropdown2], outputs=table).then(compare, 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)
 
 demo.launch(debug=True)