use markdown for demo banner

demo/app.py

@@ -20,7 +20,7 @@ disable_caching()
 
 with gr.Blocks(css=CSS, theme=None) as demo:
 
-    gr.Markdown(BANNER)
+    gr.Markdown(BANNER, elem_classes="banner")
 
     ##### 1. Load from datasets #####
 

demo/utils.py

@@ -9,29 +9,17 @@ from transformer_ranker.datacleaner import DatasetCleaner, TaskCategory
 from transformer_ranker.embedder import Embedder
 
 BANNER = """
-<h1 align="center">🌐 TransformerRanker ⚡️</h1>
-
-<p align="center" style="max-width: 560px; margin: auto;">
-    Find the best language model for your downstream task.
-    Load a dataset, pick models from the 🤗 Hub, and rank them by <strong>transferability</strong>.
-</p>
-
-<p align="center" style="font-weight: bold; margin-top: 20px; display: flex; justify-content: center; gap: 10px;">
-    <a href="https://github.com/flairNLP/transformer-ranker">
-        <img src="https://img.shields.io/badge/Code Repo-black?style=flat&logo=github" alt="repository">
-    </a>
-    <a href="https://opensource.org/licenses/MIT">
-        <img src="https://img.shields.io/badge/License-MIT-brightgreen?style=flat" alt="license">
-    </a>
-    <a href="https://pypi.org/project/transformer-ranker/">
-        <img src="https://img.shields.io/badge/Package-orange?style=flat&logo=python" alt="package">
-    </a>
-    <a href="https://github.com/flairNLP/transformer-ranker/blob/main/docs/01-walkthrough.md">
-        <img src="https://img.shields.io/badge/Tutorials-blue?style=flat&logo=readthedocs&logoColor=white" alt="tutorials">
-    </a>
-</p>
-
-<p align="center">Developed at <a href="https://www.informatik.hu-berlin.de/en/forschung-en/gebiete/ml-en/">Humboldt University of Berlin</a>.</p>
+# 🌐 TransformerRanker ⚡️
+
+Find the best language model for your downstream task.  
+Load a dataset, pick models from the 🤗 Hub, and rank them by **transferability**.  
+
+[![repository](https://img.shields.io/badge/Code%20Repo-black?style=flat&logo=github)](https://github.com/flairNLP/transformer-ranker)
+[![license](https://img.shields.io/badge/License-MIT-brightgreen?style=flat)](https://opensource.org/licenses/MIT)
+[![package](https://img.shields.io/badge/Package-orange?style=flat&logo=python)](https://pypi.org/project/transformer-ranker/)
+[![tutorials](https://img.shields.io/badge/Tutorials-blue?style=flat&logo=readthedocs&logoColor=white)](https://github.com/flairNLP/transformer-ranker/blob/main/docs/01-walkthrough.md)
+
+Developed at [Humboldt University of Berlin](https://www.informatik.hu-berlin.de/en/forschung-en/gebiete/ml-en/).
 """
 
 FOOTER = """
@@ -45,6 +33,12 @@ CSS = """
     max-width: 800px;
     margin: auto;
 }
+.banner {
+    text-align: center;
+}
+.banner img {
+    display: inline-block;
+}
 """
 
 UNSET = "-"