Add Metrics Info page

app.py

@@ -227,6 +227,27 @@ with gr.Blocks(css=custom_css, js=js_func, theme=gr.themes.Default(primary_hue=c
             with gr.Row(equal_height=True):
                 scatter_plot = gr.Plot(value=generate_scatter_plot(default_benchmark, default_metric), label="Bubble Chart", elem_id="full-width-plot")
 
+        with gr.Tab("Metrics Information"):
+            gr.Markdown(
+                r"""
+                # Hello World! $\frac{\sqrt{x + y}}{4}$ is today's lesson
+
+                ## the $\sqrt{x + y}$ is first
+
+                Start with $\frac{\frac{x+1}{x+2}}{x+3}$ then we get $ 2+x $ and $3$.
+                
+                There are three formulas to know:
+                
+                the first is $\gamma^2 + \theta^2 = \omega^2$
+                
+                $\sqrt{x^2+1}$ is next
+                
+                Integral $\int_{a}^{b} x^2 \,dx$ is last
+
+                Start typing below to see the output.
+
+                I spent $5 at the grocery store. Then I bought a $2.50 ice cream cone.
+                """, latex_delimiters=[ {"left": "$", "right": "$", "display": False }], elem_classes="metrics-page")
         with gr.Tab("About Us"):
             gr.HTML(
                 """

css_html_js.py

@@ -112,6 +112,17 @@ custom_css = """
 input[role="listbox"] {
     cursor: pointer !important;
 }
+.metrics-page {
+    margin: auto;
+    margin-top: -5px;
+    padding: 15px;
+    border: 1px solid #ccc; 
+    border-radius: 10px;
+    text-align: left;
+}
+.metrics-page p {
+    text-align: left !important;
+}
 """
 
 get_window_url_params = """