Update app.py

app.py

@@ -1,8 +1,11 @@
 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: midnightblue; font-size: 40px;'>TCO Comparison Calculator"
+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"
@@ -43,8 +46,93 @@ def update_plot(tco1, tco2, dropdown, dropdown2, labour_cost1, labour_cost2):
         }
     )
     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"])
- 
-with gr.Blocks(theme=gr.themes.Soft()) as demo:
+
+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)
@@ -55,13 +143,13 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
             # 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("Open to customize the number of input and output tokens for your use case", open=False):    
+                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)
+                    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")
+                    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])
     
@@ -69,22 +157,22 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
         with gr.Column():
             #gr.Markdown(value=text1)
             page1 = models.ModelPage(Models)
-            dropdown = gr.Dropdown(model_names, interactive=True, label="AI service option 1")
-            with gr.Accordion("Open for more information on the computation parameters for your first AI service option", open=False):    
+            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="AI service option 2")
-            with gr.Accordion("Open for more information on the computation parameters for your second AI service option", open=False):        
+            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")
+    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()
@@ -92,20 +180,20 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
     
     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")
+            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("Open to see the formula", open=False):
+            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")
+            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("Open to see the formula", open=False):
+            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")
+            ratio = gr.Text("Ratio: ", label=" Ratio of cost/request for both solutions ")
         with gr.Column(scale=3):
             plot = gr.LinePlot()