app.py

import gradio as gr
import models
import pandas as pd
from gradio.themes.base import Base
from gradio.themes.utils import colors, fonts, sizes
from typing import Iterable
    
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"
description=f"""
<p>In this demo application, we help you compare different AI model services, such as Open source or SaaS solutions.</p>
<p>First, you'll have to choose how you want to use the AI model service based on your use case. Then, select the two model service solutions you'd like to compare. Depending on the solution you chose, you could be able to modify 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>
"""

def on_use_case_change(use_case):
    if use_case == "Summarize":
        return gr.update(value=500), gr.update(value=200)
    elif use_case == "Question-Answering":
        return gr.update(value=300), gr.update(value=300)
    else:
        return gr.update(value=50), gr.update(value=10)
    
def compare(tco1, tco2):
    r = tco1 / tco2
    if r < 1:
        comparison_result = f"Second solution's cost/request is {1/r:.5f} times more expensive than the first"
    elif r > 1:
        comparison_result = f"Second solution's cost/request is {r:.5f} times cheaper than the first"
    else:
        comparison_result = "Both solutions will cost the same."
    return comparison_result

def update_plot(tco1, tco2, dropdown, dropdown2, labour_cost1, labour_cost2):
    
    request_ranges = [100, 200, 300, 400, 500, 1000, 10000]
    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": [dropdown] * len(request_ranges) + [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"])

class Style(Base):
    def __init__(
        self,
        *,
        primary_hue: colors.Color | str = colors.neutral,
        secondary_hue: colors.Color | str = colors.neutral,
        neutral_hue: colors.Color | str = colors.neutral,
        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", #The corner radius of the title of a form element (e.g. textbox).
            block_title_radius="*radius_sm",
            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",
            
            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()

with gr.Blocks(theme=style) as demo:
    Models: list[models.BaseTCOModel] = [models.OpenAIModel, models.CohereModel, models.OpenSourceLlama2Model]
    model_names = [Model().get_name() for Model in Models]
    gr.Markdown(value=text)
    gr.Markdown(value=description)
    
    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 to customize the number of input and output tokens for your use case", open=False):    
                with gr.Row():
                    input_tokens = gr.Slider(minimum=1, maximum=1000, value=300, step=1, label=" Number of input token ", info="We put a value that we find best suit your use case choice but feel free to adjust", interactive=True)
                    output_tokens = gr.Slider(minimum=1, maximum=1000, value=300, step=1, label=" Number of output token ", info="We put a value that we find best suit your use case choice but feel free to adjust", interactive=True)
                with gr.Row(visible=False):    
                    num_users = gr.Number(value="1000", interactive = True, label=" Number of users for your service ")
    
    use_case.change(on_use_case_change, inputs=use_case, outputs=[input_tokens, output_tokens])
    
    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):        
                page2.render()
            
    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 cost/request and TCOs", size="lg", variant="primary", scale=1) 
    tco1 = gr.State()
    tco2 = gr.State()
    labour_cost1 = gr.State()
    labour_cost2 = gr.State()
    
    with gr.Row():  
        with gr.Column():
            tco_output = gr.Text("Output 1: ", label=" Cost/request for the first option ", info="This is only the infrastructure cost per request for deployment, the labor cost still has to be added for a Total Cost of Model Serving")
            latency_info = gr.Markdown()
            with gr.Accordion("Click here to see the formula", open=False):
                tco_formula = gr.Markdown()
    
        with gr.Column():
            tco_output2 = gr.Text("Output 2: ", label=" Cost/request for the second option ", info="This is only the infrastructure cost per request for deployment, the labor cost still has to be added for a Total Cost of Model Serving")
            latency_info2 = gr.Markdown()
            with gr.Accordion("Click here to see the formula", open=False):
                tco_formula2 = gr.Markdown()
                
    with gr.Row(): 
        with gr.Column(scale=1): 
            ratio = gr.Text("Ratio: ", label=" Ratio of cost/request for both solutions ")
        with gr.Column(scale=3):
            plot = gr.LinePlot()
    
    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, labour_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, labour_cost2]).then(compare, inputs=[tco1, tco2], outputs=ratio).then(update_plot, inputs=[tco1, tco2, dropdown, dropdown2, labour_cost1, labour_cost2], outputs=plot)

demo.launch(debug=True)