[ADD] MEDIC 5-pillar diagram

app.py

@@ -17,7 +17,8 @@ from src.about import (
     # ENTITY_DISTRIBUTION_IMG,
     # LLM_BENCHMARKS_TEXT_3,
     TITLE,
-    LOGO
+    LOGO,
+    FIVE_PILLAR_DIAGRAM
 )
 from src.display.css_html_js import custom_css
 # changes to be made here
@@ -937,6 +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.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

@@ -102,6 +102,7 @@ NUM_FEWSHOT = 0  # Change with your few shot
 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">"""
 
 # What does your leaderboard evaluate?
 INTRODUCTION_TEXT = """