fix: more styling and tags from div to headers

app.py

@@ -79,8 +79,8 @@ HEADER = """
         </div>
     </div>
     <div>
-        <h1>GLIDER: Grading LLM Interactions and Decisions using Explainable Ranking</h1>
-        <h2>Patronus GLIDER Demo</h2>
+        <h1 style="color: #fff !important">GLIDER: Grading LLM Interactions and Decisions using Explainable Ranking</h1>
+        <h2 style="color: #fff !important">Patronus GLIDER Demo</h2>
     </div>
 </div>
 
@@ -91,9 +91,9 @@ HEADER = """
 """
 
 EXAMPLES_HEADER = """
-<div style="color: #fff !important">
-    # Try it Yourself!
-</div>
+<h1 style="color: #fff !important">
+    Try it Yourself!
+</h1>
 """
 
 css = """
@@ -172,7 +172,7 @@ with gr.Blocks(css=css, theme=theme) as demo:
     gr.Markdown(HEADER)
     with gr.Row(equal_height=True):
         with gr.Column(scale=1):
-            gr.Markdown("<div style='color: #fff !important'>**Your Inputs**</div>")
+            gr.Markdown("<h1 style='color: #fff !important'>Your Inputs</h1>")
             model_output = gr.Textbox(label="MODEL OUTPUT (required)")
             user_input = gr.Textbox(label="USER INPUT (required)")
             gold_answer = gr.Textbox(label="GOLD ANSWER")
@@ -183,7 +183,7 @@ with gr.Blocks(css=css, theme=theme) as demo:
                 clear_btn = gr.ClearButton([model_output, user_input, gold_answer, retrieved_context, pass_criteria, rubric])
                 submit_button = gr.Button("Submit", variant="primary")
         with gr.Column(scale=1):
-            gr.Markdown("<div style='color: #fff !important'>**GLIDER Output**</div>")
+            gr.Markdown("<h1 style='color: #fff !important'>GLIDER Output</h1>")
             score = gr.Textbox(label="Score")
             reasoning = gr.Textbox(label="Reasoning")
             highlights = gr.Textbox(label="Highlights")