Center title and descriptions

app.py

@@ -47,15 +47,6 @@ def setup_seeds(config):
 #             Model Initialization
 # ========================================
 
-SHARED_UI_WARNING = f'''### [NOTE] It is possible that you are waiting in a lengthy queue.
-
-You can duplicate and use it with a paid private GPU.
-
-<a class="duplicate-button" style="display:inline-block" target="_blank" href="https://huggingface.co/spaces/Vision-CAIR/minigpt4?duplicate=true"><img style="margin-top:0;margin-bottom:0" src="https://huggingface.co/datasets/huggingface/badges/raw/main/duplicate-this-space-xl-dark.svg" alt="Duplicate Space"></a>
-
-Alternatively, you can also use the demo on our [project page](https://minigpt-4.github.io).
-'''
-
 print('Initializing Chat')
 cfg = Config(parse_args())
 
@@ -100,18 +91,33 @@ def gradio_answer(chatbot, chat_state, img_list, num_beams, temperature):
     chatbot[-1][1] = llm_message
     return chatbot, chat_state, img_list
 
-title = """<h1 align="center">Demo of MiniGPT-4</h1>"""
-description = """<h3>This is the demo of MiniGPT-4. Upload your images and start chatting!</h3>"""
-article = """<div style='display:flex; gap: 0.25rem; '><a href='https://minigpt-4.github.io'><img src='https://img.shields.io/badge/Project-Page-Green'></a><a href='https://github.com/Vision-CAIR/MiniGPT-4'><img src='https://img.shields.io/badge/Github-Code-blue'></a><a href='https://github.com/TsuTikgiau/blip2-llm/blob/release_prepare/MiniGPT_4.pdf'><img src='https://img.shields.io/badge/Paper-PDF-red'></a></div>
-"""
+title_and_description = """<div style="text-align: center; margin: 0 auto;">
+  <h1 style="font-weight: 900; margin-bottom: 7px;margin-top:5px">Demo of MiniGPT-4</h1>
+  <h3>This is the demo of MiniGPT-4. Upload your images and start chatting!</h3>
+  <h3 id="-note-it-is-possible-that-you-are-waiting-in-a-lengthy-queue-">[NOTE] It is possible that you are waiting in a lengthy queue.</h3>
+  <p>You can duplicate and use it with a paid private GPU. <a class="duplicate-button" style="display:inline-block" target="_blank" href="https://huggingface.co/spaces/Vision-CAIR/minigpt4?duplicate=true">
+      <img style="margin-top:0;margin-bottom:0" src="https://huggingface.co/datasets/huggingface/badges/raw/main/duplicate-this-space-lg-dark.svg" alt="Duplicate Space">
+    </a>
+  </p>
+  <p>Alternatively, you can also use the demo on our <a href="https://minigpt-4.github.io">project page</a>
+  </p>
+  <div style='display:flex; gap: 0.25rem; width: 100%; justify-content: center;'>
+    <a href='https://minigpt-4.github.io'>
+      <img src='https://img.shields.io/badge/Project-Page-Green'>
+    </a>
+    <a href='https://github.com/Vision-CAIR/MiniGPT-4'>
+      <img src='https://img.shields.io/badge/Github-Code-blue'>
+    </a>
+    <a href='https://github.com/TsuTikgiau/blip2-llm/blob/release_prepare/MiniGPT_4.pdf'>
+      <img src='https://img.shields.io/badge/Paper-PDF-red'>
+    </a>
+  </div>
+</div>"""
 
 #TODO show examples below
 
 with gr.Blocks() as demo:
-    gr.Markdown(title)
-    gr.Markdown(SHARED_UI_WARNING)
-    gr.Markdown(description)
-    gr.Markdown(article)
+    gr.HTML(title_and_description)
 
     with gr.Row():
         with gr.Column(scale=0.5):