Update app.py

app.py

@@ -2,6 +2,69 @@ import os
 import gradio as gr
 from pipelines.pipeline import InferencePipeline
 
+TITLE = """
+    <div style="text-align: center; max-width: 650px; margin: 0 auto;">
+        <div
+        style="
+            display: inline-flex;
+            align-items: center;
+            gap: 0.8rem;
+            font-size: 1.75rem;
+        "
+        >
+        <h1 style="font-weight: 900; margin-bottom: 7px;">
+            Auto-AVSR: Audio-Visual Speech Recognition with Automatic Labels
+        </h1>
+        <h3 style="font-weight: 450; font-size: 1rem; margin: 0rem"> 
+        [<a href="https://arxiv.org/abs/2303.14307" style="color:blue;">arXiv</a>] 
+        [<a href="https://github.com/mpc001/auto_avsr" style="color:blue;">Code</a>]
+        </h3> 
+        </div>
+        <p style="margin-bottom: 10px; font-size: 94%">
+        Want to recognise the content from audio or visual information?<br>The Auto-AVSR is here to get you answers!
+        </p>
+    </div>
+"""
+
+ARTICLE = """
+<div style="text-align: center; max-width: 650px; margin: 0 auto;">
+    <p>
+    Server busy? You can also run on <a href="https://colab.research.google.com/drive/1jfb6e4xxhXHbmQf-nncdLno1u0b4j614?usp=sharing">Google Colab</a>
+    </p>
+    <p>
+    We share this demo only for non-commercial purposes.
+    </p>
+</div>
+"""
+
+CSS = """
+    #col-container {margin-left: auto; margin-right: auto;}
+    a {text-decoration-line: underline; font-weight: 600;}
+    .animate-spin {
+        animation: spin 1s linear infinite;
+    }
+    @keyframes spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+    }
+    #share-btn-container {
+        display: flex; padding-left: 0.5rem !important; padding-right: 0.5rem !important; background-color: #000000; justify-content: center; align-items: center; border-radius: 9999px !important; width: 13rem;
+    }
+    #share-btn {
+        all: initial; color: #ffffff;font-weight: 600; cursor:pointer; font-family: 'IBM Plex Sans', sans-serif; margin-left: 0.5rem !important; padding-top: 0.25rem !important; padding-bottom: 0.25rem !important;
+    }
+    #share-btn * {
+        all: unset;
+    }
+    #share-btn-container div:nth-child(-n+2){
+        width: auto !important;
+        min-height: 0px !important;
+    }
+    #share-btn-container .wrap {
+        display: none !important;
+    }
+"""
+
 pipelines = {
     "VSR(mediapipe)": InferencePipeline("./configs/LRS3_V_WER19.1.ini", device="cpu", face_track=True, detector="mediapipe"),
     "ASR": InferencePipeline("./configs/LRS3_A_WER1.0.ini", device="cpu", face_track=True, detector="mediapipe"),
@@ -22,26 +85,11 @@ def fn(pipeline_type, filename):
     print(f"transcript: {transcript}")
     return transcript
 
-demo = gr.Blocks()
+demo = gr.Blocks(css=CSS)
 
 with demo:
 
-    gr.HTML(
-        """
-        <div style="text-align: center; max-width: 1200px; margin: 20px auto;">
-        <h1 style="font-weight: 900; font-size: 3rem; margin: 0rem">
-            Auto-AVSR
-        </h1>        
-        <h3 style="font-weight: 450; font-size: 1rem; margin: 0rem"> 
-        [<a href="https://arxiv.org/abs/2303.14307" style="color:blue;">arXiv</a>] 
-        [<a href="https://github.com/mpc001/auto_avsr" style="color:blue;">Code</a>]
-        </h3> 
-        <h2 style="text-align: left; font-weight: 450; font-size: 1rem; margin-top: 0.5rem; margin-bottom: 0.5rem">
-        🔥 <b>Notes</b>: We share this demo only for non-commercial purposes.
-        </h2>
-        
-        </div>
-        """)
+    gr.HTML(TITLE)
 
     
     dropdown_list = gr.inputs.Dropdown(["ASR", "VSR(mediapipe)", "AVSR(mediapipe)"], label="model")
@@ -51,4 +99,6 @@ with demo:
 
     btn.click(fn, inputs=[dropdown_list, video_file], outputs=text)
 
+    gr.HTML(ARTICLE)
+
 demo.launch()