Upload 2 files

app.py

@@ -1,388 +1,25 @@
 import gradio as gr
-import pandas as pd
-import matplotlib.pyplot as plt
-import io
-import base64
+import models
 
-text = "<h1 style='text-align: center; color: blue; font-size: 30px;'>TCO Comparison Calculator"
-text1 = "<h1 style='text-align: center; color: blue; font-size: 20px;'>First solution"
-text2 = "<h1 style='text-align: center; color: blue; font-size: 20px;'>Second solution"
-text3 = "<h1 style='text-align: center; color: blue; font-size: 25px;'>Comparison"
-text4 = "<h1 style='text-align: center; color: blue; font-size: 25px;'>Results"
-
-diy_value = 0
-saas_value = 0
-
-def calculate_tco(maxed_out, used, tokens_per_second_inp, vm_cost_per_hour, vm_rental_choice, out_diy):
-    tokens_per_request = 64
-    maxed_out = maxed_out / 100
-    used = used / 100
-    
-    if vm_rental_choice == "pay as you go":
-        reduction = 0
-    
-    elif vm_rental_choice == "1 year reserved":
-        reduction = 0.34
-    
-    elif vm_rental_choice == "3 years reserved":
-        reduction = 0.62
-        
-    homemade_cost_per_token = vm_cost_per_hour * (1 - reduction) / (tokens_per_second_inp * 3600 * maxed_out * used)
-    homemade_cost_per_request = tokens_per_request * homemade_cost_per_token
-    out_diy = homemade_cost_per_token
-    return out_diy
-
-def calculate_tco_2(model_provider, context, out_saas):
-    tokens_per_request = 64
-        
-    if model_provider == "OpenAI":
-        if context == "4K context":
-            saas_cost_per_token = 0.00035
-            saas_cost_per_request = saas_cost_per_token * tokens_per_request
-        elif context == "16K context" :
-            saas_cost_per_token = 0.0007
-            saas_cost_per_request = saas_cost_per_token * tokens_per_request
-    out_saas = saas_cost_per_token
-    return out_saas
-
-def update_tco(maxed_out, used, tokens_per_second_inp, vm_cost_per_hour_inp, rental_plan_inp, out_diy):
-    if maxed_out!=None and used!=None and tokens_per_second_inp!=None and vm_cost_per_hour_inp!=None and rental_plan_inp!=None:
-        return calculate_tco(maxed_out, used, tokens_per_second_inp, vm_cost_per_hour_inp, rental_plan_inp, out_diy)
-    return None
-
-def update_tco2(model_provider_inp, context_inp, out_saas):
-    if model_provider_inp!=None and context_inp!=None:
-        return calculate_tco_2(model_provider_inp, context_inp, out_saas)
-    return None
-
-def extract_cost_from_text(text):
-    try:
-        cost = float(text)
-        return cost
-    except ValueError as e:
-        raise ValueError("Invalid cost text format")
-    
-def compare(cost_text1, cost_text2):
-    try:
-        # Extract the costs from the input strings
-        cost1 = extract_cost_from_text(cost_text1)
-        cost2 = extract_cost_from_text(cost_text2)
-
-        r = cost1 / cost2
-
-        if r < 1:
-            comparison_result = f"First solution is cheaper, with a ratio of {r:.2f}."
-        elif r > 1:
-            comparison_result = f"Second solution is cheaper, with a ratio of {r:.2f}."
-        else:
-            comparison_result = "Both solutions will cost the same."
-
-        return comparison_result
-
-    except ValueError as e:
-        return f"Error: {str(e)}"
-
-def update_plot(diy_value, saas_value):
-    # if maxed_out and used and tokens_per_second_inp and vm_cost_per_hour:
-    #     diy_value = calculate_tco(maxed_out.value, used.value, tokens_per_second_inp, vm_cost_per_hour, vm_rental_choice, out_diy)
-    # else :
-    #     diy_value = 0
-    # if model_provider_inp2 and context_inp2:
-    #     saas_value = calculate_tco_2(model_provider_inp2, context_inp2, out_saas2)
-    # else: 
-    #     saas_value = 0
-    data = pd.DataFrame(
-                        {
-                            "Solution": ["Open-source", "SaaS"],
-                            "Cost/token ($)": [diy_value, saas_value],
-                        }
-                    )
-    return gr.BarPlot.update(data, x="Solution", y="Cost/token ($)")
-
-def update_plot2(diy_value, saas_value):
-    # if maxed_out2!=None and used2!=None and tokens_per_second_inp2!=None and vm_cost_per_hour2!=None and vm_rental_choice!=None:
-    #     diy_value = calculate_tco(maxed_out2.value, used2.value, tokens_per_second_inp2, vm_cost_per_hour2, vm_rental_choice, out_diy2)
-    # else: 
-    #     diy_value = 0
-    # if model_provider_inp2 and context_inp2:
-    #     saas_value = calculate_tco_2(model_provider_inp, context_inp, out_saas)
-    # else: 
-    #     saas_value = 0
-    data = pd.DataFrame(
-                        {
-                            "Solution": ["Open-source", "SaaS"],
-                            "Cost/token ($)": [diy_value, saas_value],
-                        }
-                    )
-    return gr.BarPlot.update(data, x="Solution", y="Cost/token ($)")
-
-def render_latex(latex_str):
-    fig, ax = plt.subplots(figsize=(1, 1))
-    ax.text(0.5, 0.5, f"${latex_str}$", size=12, usetex=True, va="center", ha="center")
-    ax.axis("off")
-    
-    buf = io.BytesIO()
-    plt.savefig(buf, format="png")
-    plt.close(fig)
-    
-    base64_str = base64.b64encode(buf.getvalue()).decode("utf-8")
-    return f"<img src='data:image/png;base64,{base64_str}'>"
-
-def update_vm_choice(model_inp):
-    if model_inp == "Llama-2-7B" or "Llama-2-13B" or "Llama-2-70B":
-        new_options = ["A100 40GB"]
-        return gr.Dropdown.update(choices=new_options)
-
-def token_per_s_and_cost(vm_inp):
-    if vm_inp == "A100 40GB":
-        return [694.38, 3.6730, 694.38, 3.6730]
-
-def submit_diy(rental_plan):
-    calculate_tco(maxed_out.value, used.value, tokens_per_second_inp.value, vm_cost_per_hour_inp.value, rental_plan, out_diy)
-
-def submit_saas(context_inp):
-    calculate_tco_2(model_provider_inp, context_inp, out_saas)
-
-description=f"""
-<p>In this demo application, we help you compare different solutions for your AI incorporation plans, such as open-source or SaaS.</p>
-<p>First, you'll have to choose the two solutions you'd like to compare. Then, follow the instructions to select your configurations for each solution and we will compute the cost/request accordingly to them. Eventually, you can compare both solutions to evaluate which one best suits your needs, in the short or long term.</p>
-"""
-description1="This interface provides you with the cost per token you get using the open-source solution, based on the model you choose to use and how long you're planning to use it. The selected prices for a Virtual Machine rental come from Azure's VM rental plans, which can offer reductions for long-term reserved usage."
-description2="This interface provides you with the cost per token resulting from the AI model provider you choose and the number of tokens you select for context, which the model will take into account when processing input texts."
-description3="This interface compares the cost per request for the two solutions you selected and gives you an insight of whether a solution is more valuable in the long term."
-
-test_list = []
-models = ["Llama-2-7B", "Llama-2-13B", "Llama-2-70B"]
-vm_rental_choice = ["pay as you go", "1 year reserved", "3 years reserved"]
-vm_choice = ["A100 40GB"]
-model_provider = ["OpenAI"]
-context = ["4K context", "16K context"]
-error_box = gr.Textbox(label="Error", visible=False)
-
-with gr.Blocks(theme=gr.themes.Soft()) as demo:
-    gr.Markdown(value=text)
-    gr.Markdown(value=description)
-    
-    out_diy = gr.State(value=0)
-    out_saas = gr.State(value=0)
-    out_diy2 = gr.State(value=0)
-    out_saas2 = gr.State(value=0)
-    tokens_per_second_inp = gr.State()
-    vm_cost_per_hour_inp = gr.State()
-    tokens_per_second_inp2 = gr.State()
-    vm_cost_per_hour_inp2 = gr.State()
-    
+with gr.Blocks() as demo:
+    Models: list[models.BaseTCOModel] = [models.OpenAIModel, models.OpenSourceModel]
+    model_names = [Model().get_name() for Model in Models]
     with gr.Row():
         with gr.Column():
-        
-            solution_selection = gr.Dropdown(["SaaS", "Open-source"], label="Select a Solution")
-            
-            with gr.Row(visible=False) as title_column:            
-                gr.Markdown(value=text1)
-
-            with gr.Row(visible=False) as text_diy_column:
-                gr.Markdown(description1)
-            
-            with gr.Accordion("Open to see the formula", visible=False, open=False) as formula_diy:
-                gr.Markdown(
-                    r"$ opensource\_cost\_per\_request = \frac{tokens\_per\_request \times VM\_cost\_per\_hour \times (1 - reduction)}{tokens\_per\_second \times 3600 \times maxed\_out \times used}$"
-                )
-            
-            with gr.Row(visible=False) as input_diy_column:
-                with gr.Column():
-                    
-                    with gr.Row():
-                        model_inp = gr.Dropdown(models, label="Select an AI Model", info="Open-source AI model used for your application")
-                        
-                    with gr.Row() as vm:
-                        with gr.Column():
-                            with gr.Row():
-                                vm_inp = gr.Dropdown(vm_choice, label="Select a Virtual Machine", info="Your options for this choice depend on the model you previously chose")
-                            with gr.Row(visible=False) as vm_info:
-                                token_per_seconds = gr.Textbox(interactive=False, label="Token/s", info="To compute this value based on your model and VM choice, we chose an input length of 233 tokens.")
-                                vm_cost_per_hour = gr.Textbox(interactive=False, label="Cost/h ($) for the VM")                                                               
-                    
-                    with gr.Row() as use_case:
-                        maxed_out = gr.Slider(minimum=0.01, value=80, label="% maxed out", info="percentage of how much your machine is maxed out")
-                        used = gr.Slider(minimum=0.01, value=50, label="% used", info="percentage of time your machine is used")
-                        rental_plan_inp = gr.Dropdown(vm_rental_choice, label="Select a VM Rental Plan", info="These options are from Azure's VM rental plans. By default, the cost taken into account are from the pay as you go plan.")
-                    
-                    model_inp.change(fn=update_vm_choice, inputs=model_inp, outputs=vm_inp)
-                    vm_inp.change(fn=token_per_s_and_cost, inputs=vm_inp, outputs=[tokens_per_second_inp, vm_cost_per_hour_inp, token_per_seconds, vm_cost_per_hour])
-                    
-                    maxed_out.change(fn=update_tco, inputs=[maxed_out, used, tokens_per_second_inp, vm_cost_per_hour_inp, rental_plan_inp, out_diy], outputs=out_diy)
-                    used.change(fn=update_tco, inputs=[maxed_out, used, tokens_per_second_inp, vm_cost_per_hour_inp, rental_plan_inp, out_diy], outputs=out_diy)
-                    model_inp.change(fn=update_tco, inputs=[maxed_out, used, tokens_per_second_inp, vm_cost_per_hour_inp, rental_plan_inp, out_diy], outputs=out_diy)
-                    vm_inp.change(fn=update_tco, inputs=[maxed_out, used, tokens_per_second_inp, vm_cost_per_hour_inp, rental_plan_inp, out_diy], outputs=out_diy)
-                    rental_plan_inp.change(fn=update_tco, inputs=[maxed_out, used, tokens_per_second_inp, vm_cost_per_hour_inp, rental_plan_inp, out_diy], outputs=out_diy)
-                    
-            with gr.Row(visible=False) as text_saas_column:
-                gr.Markdown(description2)
-            
-            with gr.Accordion("Open to see the formula", visible=False, open=False) as formula_saas:
-                gr.Markdown(
-                    r"$ saas\_cost\_per\_request = saas\_cost\_per\_token \times tokens\_per\_request$"
-                )
-            
-            with gr.Row(visible=False) as input_saas_column:
-                model_provider_inp = gr.Dropdown(model_provider, label="Model Provider", value="OpenAI", info="Choose an AI model provider you want to work with")
-                context_inp = gr.Dropdown(context, label="Context", info="Number of tokens the model considers when processing text")
-                
-                model_provider_inp.change(fn=update_tco2, inputs=[model_provider_inp, context_inp, out_saas], outputs=out_saas)
-                context_inp.change(fn=update_tco2, inputs=[model_provider_inp, context_inp, out_saas], outputs=out_saas)
-
-            def show_vm_info():
-                            return {
-                                vm_info: gr.update(visible=True),
-                            }
+            page1 = models.ModelPage(Models)
+            dropdown = gr.Dropdown(model_names, interactive=True)
+            page1.render()
 
-            vm_inp.change(show_vm_info, outputs=vm_info)
-            
-            def submit(solution_selection):
-                if solution_selection == "Open-source":
-                    return {
-                        formula_diy: gr.update(visible=True),
-                        title_column: gr.update(visible=True),
-                        text_diy_column: gr.update(visible=True),
-                        input_diy_column: gr.update(visible=True),
-                        formula_saas: gr.update(visible=False),
-                        text_saas_column: gr.update(visible=False),                       
-                        input_saas_column: gr.update(visible=False),
-                    }     
-                else: 
-                    return {
-                        formula_saas: gr.update(visible=True),
-                        formula_diy: gr.update(visible=False),
-                        text_diy_column: gr.update(visible=False),
-                        input_diy_column: gr.update(visible=False),
-                        title_column: gr.update(visible=True),                        
-                        text_saas_column: gr.update(visible=True),                       
-                        input_saas_column: gr.update(visible=True),
-                    }
-            
-            solution_selection.change(
-                submit,
-                solution_selection,
-                [model_inp, vm, vm_info, vm_inp, maxed_out, used, out_saas, text_diy_column, formula_diy, formula_saas, title_column, text_saas_column, model_inp, rental_plan_inp, model_provider_inp, context_inp, input_diy_column, input_saas_column],
-            )
-            
-        # gr.Divider(style="vertical", thickness=2, color="blue")
-         
         with gr.Column():
+            page2 = models.ModelPage(Models)
+            dropdown2 = gr.Dropdown(model_names, interactive=True)
+            page2.render()
             
-            solution_selection2 = gr.Dropdown(["SaaS", "Open-source"], label="Select a solution")
-            
-            with gr.Row(visible=False) as title_column2:            
-                gr.Markdown(value=text2)
-            
-            with gr.Row(visible=False) as text_diy_column2:            
-                gr.Markdown(description1)
-            
-            with gr.Accordion("Open to see the formula", visible=False, open=False) as formula_diy2:
-                gr.Markdown(
-                    r"$ homemade\_cost\_per\_request = \frac{tokens\_per\_request \times VM\_cost\_per\_hour \times (1 - reduction)}{tokens\_per\_second \times 3600 \times maxed\_out \times used}$"
-                )
-            
-            with gr.Row(visible=False) as input_diy_column2:
-                with gr.Column():
-                    with gr.Row():
-                        model_inp2 = gr.Dropdown(models, label="Select an AI Model", info="Open-source AI model used for your application")
-                
-                    with gr.Row() as vm2:
-                        with gr.Column():
-                            with gr.Row():
-                                vm_inp2 = gr.Dropdown(vm_choice, label="Select a Virtual Machine", info="Your options for this choice depend on the model you previously chose")
-                            with gr.Row(visible=False) as vm_info2:
-                                tokens_per_second2 = gr.Textbox(interactive=False, label="Token/s", info="To compute this value based on your model and VM choice, we chose an input length of 233 tokens.")
-                                vm_cost_per_hour2 = gr.Textbox(interactive=False, label="Cost/h ($) for the VM")
-                                                    
-                    with gr.Row() as use_case2:
-                        maxed_out2 = gr.Slider(minimum=0.01, value=80, label="% maxed out", info="percentage of how much your machine is maxed out")
-                        used2 = gr.Slider(minimum=0.01, value=50, label="% used", info="percentage of time your machine is used")
-                        rental_plan_inp2 = gr.Dropdown(vm_rental_choice, label="Select a VM Rental Plan", info="These options are from Azure's VM rental plans")
-                    
-                    model_inp2.change(fn=update_vm_choice, inputs=model_inp2, outputs=vm_inp2)
-                    vm_inp2.change(fn=token_per_s_and_cost, inputs=vm_inp2, outputs=[tokens_per_second_inp2, vm_cost_per_hour_inp2, tokens_per_second2, vm_cost_per_hour2])
-                    
-                    maxed_out2.change(fn=update_tco, inputs=[maxed_out2, used2, tokens_per_second_inp2, vm_cost_per_hour_inp2, rental_plan_inp2, out_diy2], outputs=out_diy2)
-                    used2.change(fn=update_tco, inputs=[maxed_out2, used2, tokens_per_second_inp2, vm_cost_per_hour_inp2, rental_plan_inp2, out_diy2], outputs=out_diy2)
-                    model_inp2.change(fn=update_tco, inputs=[maxed_out2, used2, tokens_per_second_inp2, vm_cost_per_hour_inp2, rental_plan_inp2, out_diy2], outputs=out_diy2)
-                    vm_inp2.change(fn=update_tco, inputs=[maxed_out2, used2, tokens_per_second_inp2, vm_cost_per_hour_inp2, rental_plan_inp2, out_diy2], outputs=out_diy2)
-                    rental_plan_inp2.change(fn=update_tco, inputs=[maxed_out2, used2, tokens_per_second_inp2, vm_cost_per_hour_inp2, rental_plan_inp2, out_diy2], outputs=out_diy2)
-                      
-            with gr.Row(visible=False) as text_saas_column2:            
-                gr.Markdown(description2)
-            
-            with gr.Accordion("Open to see the formula", visible=False, open=False) as formula_saas2:
-                gr.Markdown(
-                    r"$ saas\_cost\_per\_request = saas\_cost\_per\_token \times tokens\_per\_request$"
-                )
-            
-            with gr.Row(visible=False) as input_saas_column2:
-                model_provider_inp2 = gr.Dropdown(['OpenAI'], label="Model Provider", value="OpenAI", info="Choose an AI model provider you want to work with")
-                context_inp2 = gr.Dropdown(['4K context', '16K context'], label="Context", info="Number of tokens the model considers when processing text")
-                
-                model_provider_inp2.change(fn=update_tco2, inputs=[model_provider_inp2, context_inp2, out_saas2], outputs=out_saas2)
-                context_inp2.change(fn=update_tco2, inputs=[model_provider_inp2, context_inp2, out_saas2], outputs=out_saas2)
-            
-            def show_vm_info():
-                            return {
-                                vm_info2: gr.update(visible=True),
-                            }
+    dropdown.change(page1.make_model_visible, inputs=dropdown, outputs=page1.get_all_components())
+    dropdown2.change(page2.make_model_visible, inputs=dropdown2, outputs=page2.get_all_components())
 
-            vm_inp2.change(show_vm_info, outputs=vm_info2)
-            
-            def submit2(solution_selection2):
-                if solution_selection2 == "Open-source":
-                    return {
-                        formula_diy2: gr.update(visible=True),
-                        title_column2: gr.update(visible=True),
-                        text_diy_column2: gr.update(visible=True),
-                        input_diy_column2: gr.update(visible=True),
-                        formula_saas2: gr.update(visible=False),
-                        text_saas_column2: gr.update(visible=False),                       
-                        input_saas_column2: gr.update(visible=False),
-                    }     
-                else: 
-                    return {
-                        formula_diy2: gr.update(visible=False),
-                        text_diy_column2: gr.update(visible=False),
-                        input_diy_column2: gr.update(visible=False),
-                        title_column2: gr.update(visible=True),
-                        formula_saas2: gr.update(visible=True),
-                        text_saas_column2: gr.update(visible=True),                        
-                        input_saas_column2: gr.update(visible=True),
-                    }
-            
-            solution_selection2.change(
-                submit2,
-                solution_selection2,
-                [vm2, vm_info2, vm_inp2, maxed_out2, used2, out_diy2, out_saas2, formula_diy2, formula_saas2, title_column2, text_diy_column2, text_saas_column2, model_inp2, rental_plan_inp2, model_provider_inp2, context_inp2, input_diy_column2, input_saas_column2],
-            )
-    
-    with gr.Row():
-        with gr.Column():
-            
-            with gr.Row():
-                gr.Markdown(text3)
-                
-            with gr.Row():
-                plot = gr.BarPlot(vertical=False, title="Comparison", y_title="Cost/token ($)", width=500, interactive=True)
-                
-            context_inp.change(fn=update_plot, inputs=[out_diy2, out_saas], outputs=plot)
-            maxed_out2.change(fn=update_plot, inputs=[out_diy2, out_saas], outputs=plot)
-            used2.change(fn=update_plot, inputs=[out_diy2, out_saas], outputs=plot)
-            vm_inp2.change(fn=update_plot, inputs=[out_diy2, out_saas], outputs=plot)
-            model_provider_inp.change(fn=update_plot, inputs=[out_diy2, out_saas], outputs=plot)
-            rental_plan_inp2.change(fn=update_plot, inputs=[out_diy2, out_saas], outputs=plot)
-            model_inp2.change(fn=update_plot, inputs=[out_diy2, out_saas], outputs=plot)
-            
-            context_inp2.change(fn=update_plot, inputs=[out_diy, out_saas2], outputs=plot)
-            vm_inp.change(fn=update_plot, inputs=[out_diy, out_saas2], outputs=plot)
-            maxed_out.change(fn=update_plot, inputs=[out_diy, out_saas2], outputs=plot)
-            used.change(fn=update_plot, inputs=[out_diy, out_saas2], outputs=plot)
-            model_provider_inp2.change(fn=update_plot, inputs=[out_diy, out_saas2], outputs=plot)
-            rental_plan_inp.change(fn=update_plot, inputs=[out_diy, out_saas2], outputs=plot)
-            model_inp.change(fn=update_plot, inputs=[out_diy, out_saas2], outputs=plot)
-       
-demo.launch()
+    compute_tco_btn = gr.Button("Compute TCO")
+    tco_output = gr.Text("Output: ")
+    compute_tco_btn.click(page1.compute_cost_per_token, inputs=page1.get_all_components() + [dropdown], outputs=tco_output)
+
+demo.launch(debug=True)

models.py

@@ -0,0 +1,160 @@
+from gradio.components import Component
+import gradio as gr
+import uuid
+from abc import ABC, abstractclassmethod
+
+class BaseTCOModel(ABC):
+    # TO DO: Find way to specify which component should be used for computing cost
+    def __setattr__(self, name, value):
+        if isinstance(value, Component):
+            self._components.append(value)
+        self.__dict__[name] = value
+
+    def __init__(self):
+        super(BaseTCOModel, self).__setattr__("_components", [])
+
+    def get_components(self) -> list[Component]:
+        return self._components
+    
+    def get_name(self):
+        return self.name
+    
+    @abstractclassmethod
+    def compute_cost_per_token(self):
+        pass
+    
+    @abstractclassmethod
+    def render(self):
+        pass
+    
+    def set_name(self, name):
+        self.name = name
+        self.id = name + str(uuid.uuid4())
+
+class OpenAIModel(BaseTCOModel):
+
+    def __init__(self):
+        self.set_name("(SaaS) OpenAI")
+        super().__init__()
+
+    def render(self):
+        def on_model_change(model):
+            
+            if model == "GPT-4":
+                print("GPT4")
+                return gr.Dropdown.update(choices=["8K", "32K"])
+            else:
+                print("GPT3.5")
+                return gr.Dropdown.update(choices=["4K", "16K"])
+
+        self.model = gr.Dropdown(["GPT-4", "GPT-3.5 Turbo"], value="GPT-4",
+                                 label="OpenAI model",
+                                 interactive=True, visible=False)
+        self.context_length = gr.Dropdown(["8K", "32K"], value="8K", interactive=True,
+                                          label="Context size",
+                                          visible=False)
+        self.model.change(on_model_change, inputs=self.model, outputs=self.context_length)
+        self.input_length = gr.Number(350, label="Average number of input tokens", 
+                                      interactive=True, visible=False)
+
+    def compute_cost_per_token(self, model, context_length, input_length):
+        """Cost per token = """
+        model = model[0]
+        context_length = context_length[0]
+
+        if model == "GPT-4" and context_length == "8K":
+            cost_per_1k_input_tokens = 0.03
+        elif model == "GPT-4" and context_length == "32K":
+            cost_per_1k_input_tokens = 0.06
+        elif model == "GPT-3.5" and context_length == "4K":
+            cost_per_1k_input_tokens = 0.0015
+        else:
+            cost_per_1k_input_tokens = 0.003
+
+        cost_per_output_token = cost_per_1k_input_tokens * input_length / 1000
+
+        return cost_per_output_token
+
+class OpenSourceModel(BaseTCOModel):
+    def __init__(self):
+        self.set_name("(Open source) Deploy yourself")
+        super().__init__()
+    
+    def render(self):
+        vm_choices = ["1x Nvidia A100 (Azure NC24ads A100 v4)",
+                      "2x Nvidia A100 (Azure NC48ads A100 v4)"]
+        def on_model_change(model):
+            if model == "Llama 2 7B":
+                return gr.Dropdown.update(choices=vm_choices)
+            else:
+                not_supported_vm = ["1x Nvidia A100 (Azure NC24ads A100 v4)"]
+                choices = [x for x in vm_choices if x not in not_supported_vm]
+                return gr.Dropdown.update(choices=choices)
+
+        def on_vm_change(model, vm):
+            # TO DO: load info from CSV
+            if model == "Llama 2 7B" and vm == "1x Nvidia A100 (Azure NC24ads A100 v4)":
+                return gr.Number.update(value=900)
+            elif model == "Llama 2 7B" and vm == "2x Nvidia A100 (Azure NC48ads A100 v4)":
+                return gr.Number.update(value=1800)
+        
+        self.model = gr.Dropdown(["Llama 2 7B", "Llama 2 70B"], value="Llama 2 7B", visible=False)
+        self.vm = gr.Dropdown(vm_choices, 
+                              visible=False,
+                              label="Instance of VM with GPU"
+                              )
+        self.tokens_per_second = gr.Number(visible=False,
+                                           label="Number of tokens per second for this specific model and VM instance",
+                                           interactive=False
+                                           )
+        self.input_length = gr.Number(350, label="Average number of input tokens", 
+                                      interactive=True, visible=False)
+        
+        self.model.change(on_model_change, inputs=self.model, outputs=self.vm)
+        self.vm.change(on_vm_change, inputs=[self.model, self.vm], outputs=self.tokens_per_second)
+        self.maxed_out = gr.Slider(minimum=1, value=80, label="% maxed out", 
+                                   info="How much the GPU is fully used.",
+                                   interactive=True,
+                                   visible=False)
+
+    def compute_cost_per_token(self, tokens_per_second, maxed_out):
+
+        return maxed_out 
+    
+class ModelPage:
+    def __init__(self, Models: BaseTCOModel):
+        self.models: list[BaseTCOModel] = []
+        for Model in Models:
+            model = Model()
+            self.models.append(model)
+
+    def render(self):
+        for model in self.models:
+            model.render()    
+
+    def get_all_components(self) -> list[Component]:
+        output = []
+        for model in self.models:
+            output += model.get_components()
+        return output
+
+    def make_model_visible(self, name:str):
+        # First decide which indexes
+        output = []
+        for model in self.models:
+            if model.get_name() == name:
+                output+= [gr.update(visible=True)] * len(model.get_components())
+            else:
+                output+= [gr.update(visible=False)] * len(model.get_components())
+        return output
+    
+    def compute_cost_per_token(self, *args):
+        begin=0
+        current_model = args[-1]
+        for model in self.models:
+            model_n_args = len(model.get_components())
+            model_args = args[begin:begin+model_n_args]
+            if current_model == model.get_name():
+                model_tco = model.compute_cost_per_token(*model_args)
+                return f"Model {current_model} has TCO {model_tco}"
+            begin = begin+model_n_args