Update app.py

app.py

@@ -45,6 +45,15 @@ st.markdown(
         color: #555;
     }
 
+    .header {
+        display: flex;
+        align-items: left;
+        font-family: 'Arial', sans-serif; /* or use a similar sans-serif font */
+        font-size: 24px; /* Adjust as needed */
+        color: #2D3748; /* Dark gray color, adjust to match your theme */
+        margin-bottom: 20px;
+    }
+
     .container {
         max-width: 1000px;  
         margin: 0 auto;  
@@ -110,13 +119,24 @@ st.markdown(
 # header_md_text = HEADER_MD # make some parameters later
 # gr.Markdown(header_md_text, elem_classes="markdown-text") 
 
-st.markdown('<div class="header"><br/> 🔎 FactBench: A Dynamic Benchmark for In-the-Wild Language Model Factuality Evaluation <br/> 📑 Paper() | 💻 GitHub() | | 🐦 X() | 💬 Discussion() | ⚙️ <strong>Version</strong>: <strong>V1</strong> | <strong># Models</strong>: 7 | Updated: <strong>10/26/2024</strong></div>',
-            unsafe_allow_html=True)
+st.markdown(
+    '''
+    <div class="header">
+        <br/>
+        <p style="font-size:32px;">🔎 FactBench: A Dynamic Benchmark for In-the-Wild Language Model Factuality Evaluation</p>
+        <p>
+            📑 <a href="#">Paper</a> | 💻 <a href="#">GitHub</a> | 🐦 <a href="#">X</a> | 💬 <a href="#">Discussion</a> |
+            ⚙️ <strong>Version</strong>: <strong>V1</strong> | <strong># Models</strong>: 7 | Updated: <strong>10/26/2024</strong>
+        </p>
+    </div>
+    ''',
+    unsafe_allow_html=True
+)
 
 
-st.markdown('<div class="title">FactBench Leaderboard</div>',
-            unsafe_allow_html=True)
-st.markdown('<div class="description">Benchmark for LM Factuality Evaluation</div>',
+# st.markdown('<div class="title">FactBench Leaderboard</div>',
+#             unsafe_allow_html=True)
+# st.markdown('<div class="description">Benchmark for LM Factuality Evaluation</div>',
             unsafe_allow_html=True)
 st.markdown('</div>', unsafe_allow_html=True)