feat: create blocks to add intro, instructions and comparison graphics

app.py

@@ -40,6 +40,7 @@ dataset = load_dataset("mariagrandury/fmti-indicators")
 df = pd.DataFrame(dataset["train"])
 grouped = df.groupby(["Domain", "Subdomain"])
 
+
 # Create an interface per group of indicators
 interfaces = []
 tab_names = []
@@ -57,6 +58,7 @@ for (domain, subdomain), group in grouped:
     interfaces.append(iface)
     tab_names.append(subdomain)
 
+
 # Add overall percentage button
 overall_button = gr.Interface(
     fn=calculate_overall_percentage,
@@ -68,10 +70,60 @@ overall_button = gr.Interface(
 interfaces.append(overall_button)
 tab_names.append("Total Transparency Score")
 
+
 # Create the tabbed interface
 tabbed_interface = gr.TabbedInterface(
     interface_list=interfaces,
     tab_names=tab_names,
     title="The Foundation Model Transparency Index",
 )
-tabbed_interface.launch()
+
+
+# Combine blocks to create demo
+with gr.Blocks(title="FMTI") as demo:
+    gr.Markdown(
+        """
+        # Transparency Self-Assessment (FMTI)
+
+        This tool allows you to self-assess the transparency of your model based on the Foundation Model Transparency Index developed by the Center for Research on Foundation Models.
+        """
+    )
+    with gr.Accordion(label="Instructions", open=True):
+        gr.Markdown(
+            """
+            The FMTI defines 100 indicators that characterize transparency for foundation model developers. They are divided into three broad domains: "Upstream" (model building), "Model" (model properties and function) and "Downstream" (model distribution). In addition to these top-level domains, the indicators are also grouped together into subdomains.
+
+            Each tab below contains yes-or-no questions for each subdomain. Read all questions and check the boxes corresponding to the 'yes' responses. "Submit" your answers before proceeding to the next tab. Upon reaching the final tab, "Total Transparency Score", click on "Generate" to compute your model's overall transparency score.
+
+            More info about the FMTI at https://crfm.stanford.edu/fmti/.
+
+            Please note: this tool is research work and NOT a commercial or legal product.
+            """
+        )
+    gr.TabbedInterface(
+        interface_list=interfaces,
+        tab_names=tab_names,
+        title="",
+    )
+    gr.Markdown(
+        """
+        ## Compare your results
+
+        How transparent is your model compared to the ones in the 2023 study? Check the graphics below!
+
+        Images source: https://crfm.stanford.edu/fmti
+        """
+    )
+    with gr.Row():
+        gr.Image(
+            "https://crfm.stanford.edu/fmti/fmti-flagship.jpg",
+            show_label=False,
+            show_download_button=False,
+        )
+        gr.Image(
+            "https://crfm.stanford.edu/fmti/subdomain-scores.png",
+            show_label=False,
+            show_download_button=False,
+        )
+
+demo.launch()