update visualQnA chinese version (#354)

* update visualQnA chinese version Signed-off-by: WenjiaoYue <wenjiao.yue@intel.com> --------- Signed-off-by: WenjiaoYue <wenjiao.yue@intel.com> Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
opea-project · Jul 10, 2024 · 4978959 · 4978959
1 parent ff05573
commit 4978959
Show file tree

Hide file tree

Showing 2 changed files with 123 additions and 4 deletions.
diff --git a/VisualQnA/README.md b/VisualQnA/README.md
@@ -50,20 +50,29 @@ If the reply has a `200 OK`, then the service is up.
 
 ## Start the Gradio app
 
-Now you can start the frontend UI by following commands:
+Now you have two options to start the frontend UI by following commands:
+
+### English Interface (Default)
 
 ```
 cd ui/
 pip install -r requirements.txt
 http_proxy= python app.py --host 0.0.0.0 --port 7860 --worker-addr http://localhost:8085 --share
 ```
 
+### Chinese Interface
+
+```
+cd ui/
+pip install -r requirements.txt
+http_proxy= python app.py --host 0.0.0.0 --port 7860 --worker-addr http://localhost:8085 --lang CN --share
+```
+
 Here are some explanation about the above parameters:
 
 - `--host`: the host of the gradio app
 - `--port`: the port of the gradio app, by default 7860
 - `--worker-addr`: the LLaVA service IP address. If you setup the service on a different machine, please replace `localhost` to the IP address of your Gaudi2 host machine
-
-#
+- `--lang`: Specify this parameter to use the Chinese interface. The default UI language is English and can be used without any additional parameter.
 
 SCRIPT USAGE NOTICE:  By downloading and using any script file included with the associated software package (such as files with .bat, .cmd, or .JS extensions, Docker files, or any other type of file that, when executed, automatically downloads and/or installs files onto your system) (the “Script File”), it is your obligation to review the Script File to understand what files (e.g.,  other software, AI models, AI Datasets) the Script File will download to your system (“Downloaded Files”). Furthermore, by downloading and using the Downloaded Files, even if they are installed through a silent install, you agree to any and all terms and conditions associated with such files, including but not limited to, license terms, notices, or disclaimers.
diff --git a/VisualQnA/ui/gradio/app.py b/VisualQnA/ui/gradio/app.py
@@ -24,12 +24,37 @@
 For an optimal experience, please use desktop computers for this demo, as mobile devices may compromise its quality.
 """
 
+title_markdown_cn = """
+# 🌋 在 Gaudi2 上展示 LLaVA
+"""
+
+tos_markdown_cn = """
+### 使用条款
+使用本服务即表示用户同意以下条款：
+本服务为研究预览版，仅供非商业用途。它仅提供有限的安全措施，可能会生成冒犯性内容。严禁将本服务用于任何非法、有害、暴力、种族歧视或色情的目的。本服务可能会收集用户对话数据以用于未来研究。
+为获得最佳体验，请使用台式电脑访问本演示，因为移动设备可能会影响其质量。
+"""
+
 block_css = """
 
 #buttons button {
     min-width: min(120px,100%);
 }
 
+.upload-container .wrap,
+.upload-container .wrap .or {
+  color: #1f2937;
+}
+
+
+.upload-container .wrap .icon-wrap {
+  color: #e5e7eb;
+  margin-top: 4rem;
+  width: 4rem;
+  height: 3rem;
+}
+
+
 """
 
 no_change_btn = gr.Button()
@@ -84,6 +109,85 @@ def clear_history(chat_history, image, text):
     return [chat_history, image, text] + [disable_btn]
 
 
+def build_demo_cn(embed_mode, cur_dir=None, concurrency_count=10):
+    textbox = gr.Textbox(show_label=False, placeholder="输入文字并按回车键", container=False)
+    with gr.Blocks(title="LLaVA", theme=gr.themes.Default(), css=block_css) as demo:
+        # demo.add(custom_html)
+
+        state = gr.State()
+
+        if not embed_mode:
+            gr.Markdown(title_markdown_cn)
+
+        with gr.Row():
+            with gr.Column(scale=3):
+                imagebox = gr.Image(type="pil", label="图片", interactive=True, elem_id="my_imagebox")
+
+                if cur_dir is None:
+                    cur_dir = os.path.dirname(os.path.abspath(__file__))
+                gr.Examples(
+                    examples=[
+                        [f"{cur_dir}/resources/extreme_ironing.jpg", "这张图片有什么不寻常之处？"],
+                        [
+                            f"{cur_dir}/resources/waterview.jpg",
+                            "当我去那里访问时，我应该注意哪些事情？",
+                        ],
+                    ],
+                    label="请选择一个示例",
+                    inputs=[imagebox, textbox],
+                )
+
+                with gr.Accordion("参数", open=False) as parameter_row:
+                    max_output_tokens = gr.Slider(
+                        minimum=0,
+                        maximum=1024,
+                        value=512,
+                        step=64,
+                        interactive=True,
+                        label="最大输出标记数",
+                    )
+
+            with gr.Column(scale=8):
+                chatbot = gr.Chatbot(
+                    elem_id="chatbot",
+                    label="LLaVA聊天机器人",
+                    height=650,
+                    layout="panel",
+                )
+                with gr.Row():
+                    with gr.Column(scale=8):
+                        textbox.render()
+                    with gr.Column(scale=1, min_width=50):
+                        submit_btn = gr.Button(value="发送", variant="primary")
+                with gr.Row(elem_id="buttons") as button_row:
+                    clear_btn = gr.Button(value="🗑️  清除", interactive=False)
+
+        if not embed_mode:
+            gr.Markdown(tos_markdown_cn)
+
+        btn_list = [clear_btn]
+
+        clear_btn.click(
+            clear_history,
+            [chatbot, imagebox, textbox],
+            [chatbot, imagebox, textbox] + btn_list,
+        )
+
+        textbox.submit(
+            handle_llava_request,
+            [textbox, imagebox, max_output_tokens, chatbot],
+            [chatbot] + btn_list,
+        )
+
+        submit_btn.click(
+            handle_llava_request,
+            [textbox, imagebox, max_output_tokens, chatbot],
+            [chatbot] + btn_list,
+        )
+
+    return demo
+
+
 def build_demo(embed_mode, cur_dir=None, concurrency_count=10):
     textbox = gr.Textbox(show_label=False, placeholder="Enter text and press ENTER", container=False)
     with gr.Blocks(title="LLaVA", theme=gr.themes.Default(), css=block_css) as demo:
@@ -165,6 +269,8 @@ def build_demo(embed_mode, cur_dir=None, concurrency_count=10):
     # frontend host and port
     parser.add_argument("--host", type=str, default="0.0.0.0")
     parser.add_argument("--port", type=int)
+    parser.add_argument("--lang", type=str, default="En")
+
     # backend worker address
     parser.add_argument(
         "--worker-addr", type=str, default="http://localhost:8085", help="The worker address of the LLaVA server."
@@ -175,6 +281,10 @@ def build_demo(embed_mode, cur_dir=None, concurrency_count=10):
 
     args = parser.parse_args()
     print(args)
-    demo = build_demo(args.embed, concurrency_count=args.concurrency_count)
+    selectedLang = args.lang
+    if selectedLang == "CN":
+        demo = build_demo_cn(args.embed, concurrency_count=args.concurrency_count)
+    else:
+        demo = build_demo(args.embed, concurrency_count=args.concurrency_count)
 
     demo.queue(api_open=False).launch(server_name=args.host, server_port=args.port, share=args.share)