[ADD] CSS for logo and MEDIC 5-pillar diagram

app.py

@@ -244,7 +244,7 @@ demo = gr.Blocks(css=custom_css)
 with demo:
     print("hello")
     gr.HTML(TITLE)
-    gr.HTML(LOGO, elem_classes="logo")
+    gr.HTML(LOGO)
     gr.Markdown(INTRODUCTION_TEXT, elem_classes="markdown-text")
 
     with gr.Tabs(elem_classes="tab-buttons") as tabs:
@@ -938,7 +938,7 @@ with demo:
                 with gr.Accordion("Cross Examination", open=False):
                         system_prompt, user_prompt = render_generation_templates(task="ce", generation_type="cross_examination")  
         with gr.TabItem("📝 About", elem_id="llm-benchmark-tab-table", id=5):
-            gr.HTML(FIVE_PILLAR_DIAGRAM, elem_classes="logo")
+            gr.HTML(FIVE_PILLAR_DIAGRAM)
             gr.Markdown(LLM_BENCHMARKS_TEXT_1, elem_classes="markdown-text")
             # gr.HTML(EVALUATION_EXAMPLE_IMG, elem_classes="logo")
             # gr.Markdown(LLM_BENCHMARKS_TEXT_2, elem_classes="markdown-text")

src/about.py

@@ -101,8 +101,8 @@ NUM_FEWSHOT = 0  # Change with your few shot
 # Your leaderboard name
 TITLE = """""" #<h1 align="center" id="space-title"> NER Leaderboard</h1>"""
 # LOGO = """<img src="https://equalengineers.com/wp-content/uploads/2024/04/dummy-logo-5b.png" alt="Clinical X HF" width="500" height="333">"""
-LOGO = """<img src="https://huggingface.co/spaces/m42-health/MEDIC-Benchmark/resolve/main/assets/image.png" alt="Clinical X HF" width="500" height="333">"""
-FIVE_PILLAR_DIAGRAM = """<img src="https://huggingface.co/spaces/m42-health/MEDIC-Benchmark/resolve/main/assets/MEDIC_Diagram.jpg" alt="MEDIC Diagram" width="450" height="300">"""
+LOGO = """<img src="https://huggingface.co/spaces/m42-health/MEDIC-Benchmark/resolve/main/assets/image.png" alt="Clinical X HF" width="40%" style="display: block; margin-left: auto; margin-right: auto;">"""
+FIVE_PILLAR_DIAGRAM = """<img src="https://huggingface.co/spaces/m42-health/MEDIC-Benchmark/resolve/main/assets/MEDIC_Diagram.jpg" alt="MEDIC Diagram" width="65%" style="display: block; margin-left: auto; margin-right: auto;">"""
 
 # What does your leaderboard evaluate?
 INTRODUCTION_TEXT = """

src/display/css_html_js.py

@@ -1,6 +1,6 @@
 custom_css = """
 .logo {
-    width: 500px;
+    width: 40%;
     height: auto;
     margin: 0 auto;
     max-width: 100%