Banner.

app.py

@@ -17,7 +17,6 @@ from src.about import (  # ⬅️ split to insert the tabs right after the headi
     CITATION_BUTTON_LABEL,
     CITATION_BUTTON_TEXT,
     EVALUATION_QUEUE_TEXT,
-    WHAT_IS_F1_HTML_BOTTOM_B,
     WHAT_IS_F1_HTML_TOP,
 )
 from src.datamodel.data import F1Data
@@ -216,6 +215,17 @@ with blocks:
 
     with gr.Tabs(elem_classes="tab-buttons") as tabs:
         with gr.TabItem("What is FormulaOne", id=0, elem_id="what-is-tab"):
+
+            gr.Image(
+                "assets/banner.png",
+                show_label=False,
+                elem_classes=["f1-image"],
+                show_share_button=False,
+                show_download_button=False,
+                show_fullscreen_button=False,
+                width=550,
+            )
+
             # Top content and categories table
             gr.HTML(WHAT_IS_F1_HTML_TOP)
 
@@ -275,20 +285,6 @@ with blocks:
             # Continue the text after the heading (before the first figure)
             gr.HTML(WHAT_IS_F1_HTML_BOTTOM_A_AFTER_TABS)
 
-            # # Figure 1: bag_modifications.png (use gr.Image)
-            # gr.Image(
-            #     "assets/bag_modifications.png",
-            #     show_label=False,
-            #     elem_classes=["f1-image"],
-            #     show_share_button=False,
-            #     show_download_button=False,
-            #     show_fullscreen_button=False,
-            #     width=550,
-            # )
-            # gr.HTML('<div class="f1-figcaption">An illustration of local modifications to bags.</div>')
-            #
-            # gr.HTML(WHAT_IS_F1_HTML_BOTTOM_B)
-
             # Video (no autoplay/loop), smaller gap to caption via CSS
             gr.Video(
                 "assets/DominatingSetAnimation.mp4",

src/about.py

@@ -63,12 +63,7 @@ WHAT_IS_F1_HTML_BOTTOM_A_AFTER_TABS = """
     <blockquote class="my-6 f1-blockquote">
         “For every sufficiently tree-like graph, any problem definable in an expressive formal logic — Monadic Second-Order (MSO) logic — can be solved by a dynamic programming algorithm that operates in time linear in the order of the graph.”
     </blockquote>
-    <p class="f1-p">The key is to use a structure known as a tree decomposition, which organises the graph’s vertices into a series of overlapping sets, or “bags”, that are themselves arranged in a tree.</p>
-    <!-- bag_modifications figure inserted via gr.Image in app.py -->
-"""
-
-# After the first figure, before the video
-WHAT_IS_F1_HTML_BOTTOM_B = """
+    <p class="f1-p">The key is to use a structure known as a tree decomposition, which organises the graph's vertices into a series of overlapping sets, or “bags”, that are themselves arranged in a tree.</p>
     <p class="mb-4 f1-p">An algorithm can then traverse this tree of bags, solving the problem piece by piece using dynamic programming. This process involves designing a “state” that summarises all necessary information about the partial solution within a bag, and then defining how this state transforms as vertices are introduced, forgotten, or bags are merged.</p>
     <!-- Video inserted via gr.Video in app.py -->
 """