update

app.py

@@ -52,6 +52,7 @@ from multipurpose_chatbot.configs import (
     BACKEND,
     DEMOS,
     DELETE_FOLDER,
+    CSS,
 )
 
 
@@ -113,6 +114,7 @@ def launch_demo():
             tab_names=demos_names,
             title=f"{MODEL_TITLE}",
             description=descriptions,
+            css=CSS,
         )
 
     demo.title = MODEL_NAME

multipurpose_chatbot/configs.py

@@ -36,22 +36,48 @@ By using our service, you are required to agree to our <a href="https://huggingf
 </span>
 """.strip()
 
-# Explore <a href="https://huggingface.co/spaces/SeaLLMs/SeaLLM-7B" target="_blank">SeaLMMM-7B</a> - our multi-modal version of SeaLLMs.
-MODEL_DESC = f"""
+
+MODEL_TITLE = """
+<img src="file/seal_logo.png" style="
+    max-width: 10em;
+    max-height: 5%;
+    height: 3em;
+    width: 3em;
+">
+<div class="text" style="
+    float: left;
+    padding-left: 2%;
+    font-size: larger;
+    margin-bottom: -1em;
+    margin-top: -1em;
+">
+SeaLLMs - Large Language Models for Southeast Asia
 <div style='display:flex; gap: 0.25rem; '>
-<a href='https://damo-nlp-sg.github.io/SeaLLMs/'><img src='https://img.shields.io/badge/Blog-red'></a>
-<a href='https://github.com/damo-nlp-sg/seallms'><img src='https://img.shields.io/badge/Github-Code-success'></a>
-<a href='https://huggingface.co/spaces/SeaLLMs/SeaLLM-7B-v2.5'><img src='https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Spaces-blue'></a> 
-<a href='https://huggingface.co/SeaLLMs/SeaLLM-7B-v2.5'><img src='https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Model-blue'></a> 
-<a href='https://arxiv.org/pdf/2312.00738.pdf'><img src='https://img.shields.io/badge/Paper-red'></a>
+<a href='https://damo-nlp-sg.github.io/SeaLLMs/'><img class="tag" src='https://img.shields.io/badge/Blog-red'></a>
+<a href='https://github.com/damo-nlp-sg/seallms'><img class="tag" src='https://img.shields.io/badge/Code-success'></a>
+<a href='https://huggingface.co/spaces/SeaLLMs/SeaLLM-7B-v2.5'><img class="tag" src='https://img.shields.io/badge/%F0%9F%A4%97-Spaces-blue'></a> 
+<a href='https://huggingface.co/SeaLLMs/SeaLLM-7B-v2.5'><img class="tag" src='https://img.shields.io/badge/%F0%9F%A4%97-Model-blue'></a> 
+<a href='https://arxiv.org/pdf/2312.00738.pdf'><img class="tag" src='https://img.shields.io/badge/Paper-red'></a>
 </div>
+</div>
+"""
+
+# Explore <a href="https://huggingface.co/spaces/SeaLLMs/SeaLLM-7B" target="_blank">SeaLMMM-7B</a> - our multi-modal version of SeaLLMs.
+# <div style='display:flex; gap: 0.25rem; '>
+# <a href='https://damo-nlp-sg.github.io/SeaLLMs/'><img class="tag" src='https://img.shields.io/badge/Blog-red'></a>
+# <a href='https://github.com/damo-nlp-sg/seallms'><img class="tag" src='https://img.shields.io/badge/Code-success'></a>
+# <a href='https://huggingface.co/spaces/SeaLLMs/SeaLLM-7B-v2.5'><img class="tag" src='https://img.shields.io/badge/%F0%9F%A4%97-Spaces-blue'></a> 
+# <a href='https://huggingface.co/SeaLLMs/SeaLLM-7B-v2.5'><img class="tag" src='https://img.shields.io/badge/%F0%9F%A4%97-Model-blue'></a> 
+# <a href='https://arxiv.org/pdf/2312.00738.pdf'><img class="tag" src='https://img.shields.io/badge/Paper-red'></a>
+# </div>
+MODEL_DESC = f"""
 <span style="font-size: larger">
-<a href="https://huggingface.co/SeaLLMs/SeaLLM-7B-v2.5" target="_blank">SeaLLM-7B-v2.5</a> - a assistant for Southeast Asian Languages 🇬🇧 🇻🇳 🇮🇩 🇹🇭 🇲🇾 🇰🇭 🇱🇦 🇵🇭 🇲🇲.
+<a href="https://huggingface.co/SeaLLMs/SeaLLM-7B-v2.5" target="_blank">SeaLLM-7B-v2.5</a> - a helpful assistant for Southeast Asian Languages 🇬🇧 🇻🇳 🇮🇩 🇹🇭 🇲🇾 🇰🇭 🇱🇦 🇵🇭 🇲🇲.
 </span>
 <br>
 <span>
 <span style="color: red">The chatbot may produce false and harmful content!</span>
-By using our service, you are required to agree to our <a href="https://huggingface.co/SeaLLMs/SeaLLM-Chat-13b/blob/main/LICENSE" target="_blank" style="color: red">Terms Of Use</a>
+By using our service, you agree to our <a href="https://huggingface.co/SeaLLMs/SeaLLM-Chat-13b/blob/main/LICENSE" target="_blank" style="color: red">Terms Of Use</a>
 </span>
 """.strip()
 # <span>
@@ -86,8 +112,29 @@ If you find our project useful, hope you can star our repo and cite our paper as
   year = 2023,
 }
 ```
+"""
 
+
+CSS = """
+.message-wrap.svelte-1lcyrx4>div.svelte-1lcyrx4  img {
+    min-width: 200px;
+    min-height: 150px;
+    max-height: 600px;
+    max-width; 90%;
+    width: auto;
+    object-fit: contain;
+}
+.panel-full-width.svelte-1lcyrx4.svelte-1lcyrx4.svelte-1lcyrx4 {
+    padding: calc(var(--spacing-xxl) * 1);
+    width: 100%
+}
+
+img.tag {
+  max-height: 1.5em;
+  width: auto;
+}
 """
+
 USE_PANEL = bool(int(os.environ.get("USE_PANEL", "1")))
 CHATBOT_HEIGHT = int(os.environ.get("CHATBOT_HEIGHT", "500"))
 

multipurpose_chatbot/demos/base_demo.py

@@ -94,7 +94,8 @@ class CustomTabbedInterface(gr.Blocks):
         with self:
             if title:
                 gr.Markdown(
-                    f"<h1 style='text-align: center; margin-bottom: 1rem'>{title}</h1>"
+                    # f"<h1 style='text-align: center; margin-bottom: 1rem'>{title}</h1>"
+                    f"<h1 style='text-align: center;'>{title}</h1>"
                 )
             if description:
                 gr.Markdown(description)

multipurpose_chatbot/demos/mm_chat_interface.py

@@ -76,6 +76,7 @@ from ..configs import (
     IMAGE_TOKEN,
     IMAGE_TOKEN_INTERACTIVE,
     CHATBOT_HEIGHT,
+    CSS,
 )
 
 from .multimodal_chat_interface import (
@@ -98,19 +99,6 @@ from .multimodal_chat_interface import (
 
 EXAMPLES_PER_PAGE = int(os.environ.get("EXAMPLES_PER_PAGE", 10))
 
-CSS = """
-.message.svelte-1lcyrx4.svelte-1lcyrx4.svelte-1lcyrx4 {
-    padding-top: 1em;
-}
-"""
-
-CSS = """
-.panel-full-width.svelte-1lcyrx4.svelte-1lcyrx4.svelte-1lcyrx4 {
-    padding: calc(var(--spacing-xxl) * 1);
-    width: 100%
-}
-"""
-
 DOC_TEMPLATE = """###
 {content}
 ###
@@ -825,7 +813,7 @@ class VisionMMChatInterfaceDemo(ChatInterfaceDemo):
         max_tokens = kwargs.get("max_tokens", MAX_TOKENS)
         temperature = kwargs.get("temperature", TEMPERATURE)
         model_name = kwargs.get("model_name", MODEL_NAME)
-        description = description or """Upload an image to ask question about it."""
+        # description = description
 
         assert MultimodalTextbox is not None