update app and header

app.py

@@ -4,7 +4,7 @@ import gradio as gr
 from PIL import Image
 from io import BytesIO
 
-from utils import get_token
+from utils_local import get_token
 
 
 def generate_figure(style, desc):
@@ -45,13 +45,8 @@ def read_content(file_path: str) -> str:
 
 token = get_token()
 
-
-examples = [
-    ["宫崎骏", "城市夜景"],
-    ["新海诚", "海滩 美景"],
-    ["赛博朋克", "一只猫"],
-
-]
+examples_style = ["宫崎骏", "新海诚", "梵高", "赛博朋克", "水彩", "莫奈"]
+examples_desc = ["城市夜景", "海滩 美景", "一只猫", "摩天大楼", "鸢尾花", "秋水共长天一色"]
 
 css = """
 .gradio-container {background-image: url('file=./background.jpg'); background-size:cover; background-repeat: no-repeat;}
@@ -60,7 +55,7 @@ css = """
     background: linear-gradient(#D8C5EB, #C5E8EB，#90CCF6);
     border: 1px solid #C5E8EB;
     border-radius: 8px;
-    color: #407BEA
+    color: #26498B
 }
 
 """
@@ -68,23 +63,30 @@ css = """
 with gr.Blocks(css=css) as demo:
     gr.HTML(read_content("./header.html"))
 
-    gr.Markdown("# MindSpore Wukong•Huahua "
-                " \n With the help of Wukong dataset, the largest Chinese open-source multi-modal dataset for training,"
-                " the Wukong-Huahua model has excellent Chinese text-image generation capabilities."
-                " Wukong-Huahua can identify various scene descriptions and painting styles,"
-                " bringing users a good experience.")
+    gr.Markdown("# MindSpore Wukong-Huahua "
+                "\nWukong-Huahua is a diffusion-based model that perfoms text-to-image task in Chinese, "
+                "which was developed by the Huawei Noah's Ark Lab in cooperation with the Distributed & Parallel Software Lab and Ascend Product Develop Unit. "
+                "It was trained on Wukong dataset and used MindSpore + Ascend, a software and hardware solution to implement. Welcome to try Wukong-Huahua by Our Online Platform.")
+
+    with gr.Tab("图片生成 (Figure Generation)"):
 
-    with gr.Tab("Figure Generation"):
         style_input = gr.Textbox(lines=1,
-                                 placeholder="Input the style of figure you want to generate.",
-                                 label="例如：新海诚 宫崎骏 梵高 莫奈 赛博朋克",
+                                 placeholder="输入中文风格描述",
+                                 label="Input the style of figure you want to generate. (use Chinese better)",
                                  elem_id="style-input")
+        gr.Examples(
+            examples=examples_style,
+            inputs=style_input,
+        )
+        with gr.Row():
+            gr.Markdown(" *** ")
         desc_input = gr.Textbox(lines=1,
-                                placeholder="Input a sentence to describe the figure you want to generate.",
-                                label="")
+                                placeholder="输入中文图片描述",
+                                label="Input a sentence to describe the figure you want to generate. "
+                                      "(use Chinese better)")
         gr.Examples(
-            examples=examples,
-            inputs=[style_input, desc_input],
+            examples=examples_desc,
+            inputs=desc_input,
         )
         generate_button = gr.Button("Generate", elem_id="generate")
         with gr.Row():
@@ -94,7 +96,10 @@ with gr.Blocks(css=css) as demo:
             img_output4 = gr.Image(type="pil")
 
     with gr.Accordion("Open for More!"):
-        gr.Markdown("- [The Foundation models Platform for Mindspore](https://xihe.mindspore.cn/)")
+        gr.Markdown("- If you want to know more about the foundation models of MindSpore, please visit "
+                    "[The Foundation Models Platform for Mindspore](https://xihe.mindspore.cn/)")
+        gr.Markdown("- Try [Wukong-Huahua model on the Foundation Models Platform for Mindspore]"
+                    "(https://xihe.mindspore.cn/modelzoo/wukong)")
 
     generate_button.click(generate_figure,
                           inputs=[style_input, desc_input],

header.html

@@ -1,4 +1,4 @@
-<div style="text-align: center; max-width: 650px; margin: 0 auto;">
+<div style="text-align: center; max-width: 1920px; margin: 0 auto;">
     <div
       style="
         display: inline-flex;
@@ -22,6 +22,6 @@
     <a href="https://github.com/mindspore-ai/mindspore"><h1 style="font-weight: 900; align-items: center; margin-bottom: 7px;">
     </h1></a>
     </div>
-    <a href="https://github.com/mindspore-ai/mindspore"><img src="https://obs-xihe-beijing4-test.obs.cn-north-4.myhuaweicloud.com/xihe-img/huggingface/mindspore.png" width="100%"></a>
+    <a href="https://github.com/mindspore-ai/mindspore"><img src="https://obs-xihe-beijing4-test.obs.cn-north-4.myhuaweicloud.com/xihe-img/huggingface/wukong-banner-english.png" width="100%"></a>
 
   </div>