Update app.py

app.py

@@ -118,7 +118,7 @@ def generate_callout(ratio, scope_text):
         f'<div style="text-align: right;">'
         f'  <div style="display: inline-block; background-color: #f2f2f2; padding: 10px; '
         f'       border-radius: 5px; margin-bottom:10px;">'
-        f'    Energy difference of <strong>{ratio:,.1f}x</strong> for {scope_text}.'
+        f'    Energy efficiency difference of <strong>{ratio:,.1f}x</strong> for {scope_text}.'
         f'  </div>'
         f'</div>'
     )
@@ -303,32 +303,36 @@ with demo:
     </div>
     ''')
 
-    # --- Global Callout ---
-    global_callout = gr.HTML(get_global_callout())
-
-    gr.Markdown('<div style="text-align: center; margin-top: 10px;">Select different tasks to see scored models.</div>')
+    # --- Global Welcome & Callout Row ---
+    with gr.Row():
+        with gr.Column(scale=8):
+            gr.Markdown("<div style='text-align: left; font-size: 1.2em; margin-top: 10px;'>Select different tasks to see scored models.</div>")
+        with gr.Column(scale=4):
+            global_callout = gr.HTML(get_global_callout())
 
     # --- Tabs for the different tasks ---
     with gr.Tabs():
         # --- Text Generation Tab ---
         with gr.TabItem("Text Generation 💬"):
             with gr.Row():
-                model_class_options = [
-                    "A (Single Consumer GPU) <20B parameters",
-                    "B (Single Cloud GPU) 20-66B parameters",
-                    "C (Multiple Cloud GPUs) >66B parameters"
-                ]
-                model_class_dropdown = gr.Dropdown(
-                    choices=model_class_options,
-                    label="Select Model Class",
-                    value=model_class_options[0]
-                )
-                sort_dropdown_tg = gr.Dropdown(
-                    choices=["Low to High", "High to Low"],
-                    label="Sort",
-                    value="Low to High"
-                )
-            tg_callout = gr.HTML()
+                with gr.Column(scale=8):
+                    model_class_options = [
+                        "A (Single Consumer GPU) <20B parameters",
+                        "B (Single Cloud GPU) 20-66B parameters",
+                        "C (Multiple Cloud GPUs) >66B parameters"
+                    ]
+                    model_class_dropdown = gr.Dropdown(
+                        choices=model_class_options,
+                        label="Select Model Class",
+                        value=model_class_options[0]
+                    )
+                    sort_dropdown_tg = gr.Dropdown(
+                        choices=["Low to High", "High to Low"],
+                        label="Sort",
+                        value="Low to High"
+                    )
+                with gr.Column(scale=4):
+                    tg_callout = gr.HTML()
             tg_table = gr.HTML()
             init_callout, init_table = update_text_generation(model_class_options[0], "Low to High")
             tg_callout.value = init_callout
@@ -338,12 +342,15 @@ with demo:
         
         # --- Image Generation Tab ---
         with gr.TabItem("Image Generation 📷"):
-            sort_dropdown_img = gr.Dropdown(
-                choices=["Low to High", "High to Low"],
-                label="Sort",
-                value="Low to High"
-            )
-            img_callout = gr.HTML()
+            with gr.Row():
+                with gr.Column(scale=8):
+                    sort_dropdown_img = gr.Dropdown(
+                        choices=["Low to High", "High to Low"],
+                        label="Sort",
+                        value="Low to High"
+                    )
+                with gr.Column(scale=4):
+                    img_callout = gr.HTML()
             img_table = gr.HTML()
             init_callout, init_table = update_image_generation("Low to High")
             img_callout.value = init_callout
@@ -352,12 +359,15 @@ with demo:
         
         # --- Text Classification Tab ---
         with gr.TabItem("Text Classification 🎭"):
-            sort_dropdown_tc = gr.Dropdown(
-                choices=["Low to High", "High to Low"],
-                label="Sort",
-                value="Low to High"
-            )
-            tc_callout = gr.HTML()
+            with gr.Row():
+                with gr.Column(scale=8):
+                    sort_dropdown_tc = gr.Dropdown(
+                        choices=["Low to High", "High to Low"],
+                        label="Sort",
+                        value="Low to High"
+                    )
+                with gr.Column(scale=4):
+                    tc_callout = gr.HTML()
             tc_table = gr.HTML()
             init_callout, init_table = update_text_classification("Low to High")
             tc_callout.value = init_callout
@@ -366,12 +376,15 @@ with demo:
         
         # --- Image Classification Tab ---
         with gr.TabItem("Image Classification 🖼️"):
-            sort_dropdown_ic = gr.Dropdown(
-                choices=["Low to High", "High to Low"],
-                label="Sort",
-                value="Low to High"
-            )
-            ic_callout = gr.HTML()
+            with gr.Row():
+                with gr.Column(scale=8):
+                    sort_dropdown_ic = gr.Dropdown(
+                        choices=["Low to High", "High to Low"],
+                        label="Sort",
+                        value="Low to High"
+                    )
+                with gr.Column(scale=4):
+                    ic_callout = gr.HTML()
             ic_table = gr.HTML()
             init_callout, init_table = update_image_classification("Low to High")
             ic_callout.value = init_callout
@@ -380,12 +393,15 @@ with demo:
         
         # --- Image Captioning Tab ---
         with gr.TabItem("Image Captioning 📝"):
-            sort_dropdown_icap = gr.Dropdown(
-                choices=["Low to High", "High to Low"],
-                label="Sort",
-                value="Low to High"
-            )
-            icap_callout = gr.HTML()
+            with gr.Row():
+                with gr.Column(scale=8):
+                    sort_dropdown_icap = gr.Dropdown(
+                        choices=["Low to High", "High to Low"],
+                        label="Sort",
+                        value="Low to High"
+                    )
+                with gr.Column(scale=4):
+                    icap_callout = gr.HTML()
             icap_table = gr.HTML()
             init_callout, init_table = update_image_captioning("Low to High")
             icap_callout.value = init_callout
@@ -394,12 +410,15 @@ with demo:
         
         # --- Summarization Tab ---
         with gr.TabItem("Summarization 📃"):
-            sort_dropdown_sum = gr.Dropdown(
-                choices=["Low to High", "High to Low"],
-                label="Sort",
-                value="Low to High"
-            )
-            sum_callout = gr.HTML()
+            with gr.Row():
+                with gr.Column(scale=8):
+                    sort_dropdown_sum = gr.Dropdown(
+                        choices=["Low to High", "High to Low"],
+                        label="Sort",
+                        value="Low to High"
+                    )
+                with gr.Column(scale=4):
+                    sum_callout = gr.HTML()
             sum_table = gr.HTML()
             init_callout, init_table = update_summarization("Low to High")
             sum_callout.value = init_callout
@@ -408,12 +427,15 @@ with demo:
         
         # --- Automatic Speech Recognition Tab ---
         with gr.TabItem("Automatic Speech Recognition 💬"):
-            sort_dropdown_asr = gr.Dropdown(
-                choices=["Low to High", "High to Low"],
-                label="Sort",
-                value="Low to High"
-            )
-            asr_callout = gr.HTML()
+            with gr.Row():
+                with gr.Column(scale=8):
+                    sort_dropdown_asr = gr.Dropdown(
+                        choices=["Low to High", "High to Low"],
+                        label="Sort",
+                        value="Low to High"
+                    )
+                with gr.Column(scale=4):
+                    asr_callout = gr.HTML()
             asr_table = gr.HTML()
             init_callout, init_table = update_asr("Low to High")
             asr_callout.value = init_callout
@@ -422,12 +444,15 @@ with demo:
         
         # --- Object Detection Tab ---
         with gr.TabItem("Object Detection 🚘"):
-            sort_dropdown_od = gr.Dropdown(
-                choices=["Low to High", "High to Low"],
-                label="Sort",
-                value="Low to High"
-            )
-            od_callout = gr.HTML()
+            with gr.Row():
+                with gr.Column(scale=8):
+                    sort_dropdown_od = gr.Dropdown(
+                        choices=["Low to High", "High to Low"],
+                        label="Sort",
+                        value="Low to High"
+                    )
+                with gr.Column(scale=4):
+                    od_callout = gr.HTML()
             od_table = gr.HTML()
             init_callout, init_table = update_object_detection("Low to High")
             od_callout.value = init_callout
@@ -436,12 +461,15 @@ with demo:
         
         # --- Sentence Similarity Tab ---
         with gr.TabItem("Sentence Similarity 📚"):
-            sort_dropdown_ss = gr.Dropdown(
-                choices=["Low to High", "High to Low"],
-                label="Sort",
-                value="Low to High"
-            )
-            ss_callout = gr.HTML()
+            with gr.Row():
+                with gr.Column(scale=8):
+                    sort_dropdown_ss = gr.Dropdown(
+                        choices=["Low to High", "High to Low"],
+                        label="Sort",
+                        value="Low to High"
+                    )
+                with gr.Column(scale=4):
+                    ss_callout = gr.HTML()
             ss_table = gr.HTML()
             init_callout, init_table = update_sentence_similarity("Low to High")
             ss_callout.value = init_callout
@@ -450,12 +478,15 @@ with demo:
         
         # --- Extractive QA Tab ---
         with gr.TabItem("Extractive QA ❔"):
-            sort_dropdown_qa = gr.Dropdown(
-                choices=["Low to High", "High to Low"],
-                label="Sort",
-                value="Low to High"
-            )
-            qa_callout = gr.HTML()
+            with gr.Row():
+                with gr.Column(scale=8):
+                    sort_dropdown_qa = gr.Dropdown(
+                        choices=["Low to High", "High to Low"],
+                        label="Sort",
+                        value="Low to High"
+                    )
+                with gr.Column(scale=4):
+                    qa_callout = gr.HTML()
             qa_table = gr.HTML()
             init_callout, init_table = update_extractive_qa("Low to High")
             qa_callout.value = init_callout
@@ -464,12 +495,15 @@ with demo:
         
         # --- All Tasks Tab ---
         with gr.TabItem("All Tasks 💡"):
-            sort_dropdown_all = gr.Dropdown(
-                choices=["Low to High", "High to Low"],
-                label="Sort",
-                value="Low to High"
-            )
-            all_callout = gr.HTML()
+            with gr.Row():
+                with gr.Column(scale=8):
+                    sort_dropdown_all = gr.Dropdown(
+                        choices=["Low to High", "High to Low"],
+                        label="Sort",
+                        value="Low to High"
+                    )
+                with gr.Column(scale=4):
+                    all_callout = gr.HTML()
             all_table = gr.HTML()
             init_callout, init_table = update_all_tasks("Low to High")
             all_callout.value = init_callout