Update app.py

app.py

@@ -1,25 +1,72 @@
 import gradio as gr
 import models
+import time
+    
+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: 20px;'>Compute and compare TCOs"
+description=f"""
+<p>In this demo application, we help you compare different solutions for your AI incorporation plans, such as OpenSource 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/token accordingly to them. Eventually, you can compare both solutions to evaluate which one best suits your needs.</p>
+"""
 
-with gr.Blocks() as demo:
+def compute_ratio(tco1, tco2):
+        time.sleep(2)
+        try:
+            r = tco1 / tco2
+
+            if r < 1:
+                comparison_result = f"First solution is cheaper, with a ratio of {r:.5f}."
+            elif r > 1:
+                comparison_result = f"Second solution is cheaper, with a ratio of {r:.5f}."
+            else:
+                comparison_result = "Both solutions will cost the same."
+            return comparison_result
+
+        except ValueError as e:
+            return f"Error: {str(e)}"
+
+with gr.Blocks(theme=gr.themes.Soft()) as demo:
     Models: list[models.BaseTCOModel] = [models.OpenAIModel, 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():
+            gr.Markdown(value=text1)
             page1 = models.ModelPage(Models)
-            dropdown = gr.Dropdown(model_names, interactive=True)
+            dropdown = gr.Dropdown(model_names, interactive=True, label="First solution")
             page1.render()
 
         with gr.Column():
+            gr.Markdown(value=text2)
             page2 = models.ModelPage(Models)
-            dropdown2 = gr.Dropdown(model_names, interactive=True)
+            dropdown2 = gr.Dropdown(model_names, interactive=True, label="Second solution")
             page2.render()
             
     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())
-
-    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_for_cost_computing() + [dropdown], outputs=tco_output)
+    
+    gr.Markdown(value=text3)
+    compute_tco_btn = gr.Button("Compute TCOs", size="lg")
+    tco1 = gr.State()
+    tco2 = gr.State()
+    
+    with gr.Row():  
+        with gr.Column():
+            tco_output = gr.Text("Output 1: ", label="TCO for the first solution")
+            with gr.Accordion("Open to see the formula", open=False):
+                tco_formula = gr.Markdown()
+    
+        with gr.Column():
+            tco_output2 = gr.Text("Output 2: ", label="TCO for the second solution")
+            with gr.Accordion("Open to see the formula", open=False):
+                tco_formula2 = gr.Markdown()
+    
+    ratio = gr.Text("Ratio: ", label="Ratio of cost/token for both solutions")
+    
+    compute_tco_btn.click(page1.compute_cost_per_token, inputs=page1.get_all_components_for_cost_computing() + [dropdown], outputs=[tco_output, tco1, tco_formula]).then(page2.compute_cost_per_token, inputs=page2.get_all_components_for_cost_computing() + [dropdown2], outputs=[tco_output2, tco2, tco_formula2]).then(compute_ratio, inputs=[tco1, tco2], outputs=ratio)
 
 demo.launch(debug=True)