Upload folder using huggingface_hub

app.py

@@ -96,8 +96,9 @@ def speak_fn(
 
 
 def init_fn():
-    gr.Info("2023-11-24: 优化长句生成效果；更新了一些小彩蛋。")
-    gr.Info("2023-11-23: Only support Chinese now. Trying to train a mutilingual model.")
+    gr.Info("2023-11-23: 花钱买了稍微好一点的服务器，现在生成应该更快了。")
+    gr.Info("2023-11-24: 优化长句生成效果；增加示例；更新了一些小彩蛋。")
+    gr.Info("Only support Chinese now. Trying to train a mutilingual model.")
 
 
 with open("./css/style.css", "r", encoding="utf-8") as f:
@@ -107,9 +108,11 @@ with gr.Blocks(css=customCSS) as demo:
     exceed_flag = gr.State(value=False)
     talkingFlowerPic = gr.HTML("""<img src="file=assets/flower-2x.webp" alt="TalkingFlowerPic">""", elem_id="talking_flower_pic")
     input_text = gr.Textbox(lines=1, label="Talking Flower will say:", elem_classes="wonder-card", elem_id="input_text")
-    speak_button = gr.Button("Speak!", elem_id="comfirm_button", elem_classes="button wonder-card")
+    speak_button = gr.Button("Speak!", elem_id="speak_button", elem_classes="button wonder-card")
+    gr.Examples(["你今天好棒", "雄蕊羊痒的", "我一朵花好害怕", "再来找我玩哦", "冲呀冲呀！", "塔塔开！一字摸塔塔开！", "好了是闺蜜，不好嘞是敌咪"], label=None, inputs=[input_text], elem_id="examples")
     audio_output = gr.Audio(label="输出音频", show_label=False, autoplay=True, elem_id="audio_output", elem_classes="wonder-card")
     
+    
     demo.load(
         init_fn,
         inputs=[],
@@ -132,7 +135,7 @@ if __name__ == "__main__":
     version = hps.version if hasattr(hps, "version") else latest_version
     net_g = get_net_g(model_path=config.webui_config.model, version=version, device=device, hps=hps)
     reload_javascript()
-    demo.queue().launch(
+    demo.launch(
         allowed_paths=["./assets"],
         show_api=False,
         # server_name=server_name,

css/style.css

@@ -65,6 +65,11 @@ gradio-app {
     margin-top: 4rem !important;
 }
 
+/* TalkingFlower Image */
+#talking_flower_pic img {
+    height: 10rem;
+}
+
 .wonder-card {
     --border-radius: 15px;
     --border-color: var(--color-accent-black);
@@ -93,13 +98,16 @@ gradio-app {
     transition-property: transform,box-shadow !important;
 }
 
+/* Input_text */
+#input_text label textarea {
+    width: 80%;
+}
 #input_text {
     display: flex;
     background: #ffffff !important;
     height: 12rem !important;
 
 }
-
 #input_text label {
     margin-top: -2.25rem !important;
     display: flex;
@@ -110,16 +118,12 @@ gradio-app {
     justify-content: center;
     align-items: center;
 }
-
 #input_text label span {
     font-family: var(--font-heading) !important;
     font-size: 1.225rem;
 }
 
-#input_text label textarea {
-    width: 80%;
-}
-
+/* Main Button */
 .button {
     font-size: 1.625rem !important;
     font-family: var(--font-heading) !important;
@@ -135,7 +139,6 @@ gradio-app {
     /* padding: 16px 28px !important; */
     z-index: 10 !important;
 }
-
 .button:hover {
     --shadow-y: 6px !important;
     --shadow-x: 4px !important;
@@ -153,16 +156,42 @@ gradio-app {
     justify-content: flex-end;
 }
 
-#talking_flower_pic img {
-    height: 10rem;
+/* Examples */
+#examples {
+    width: var(--card-width) !important;
+    align-self: center;
+    padding: 0.2rem;
+}
+#examples .label {
+    display: none !important;
+}
+#examples button {
+    --border-radius: 12px;
+    --border-color: var(--color-accent-black);
+
+    background: #b787d2;
+    color: #fefdff;
+    backface-visibility: hidden !important;
+    border: solid var(--border-width,2px) var(--border-color,var(--color-accent-black)) !important;
+    border-radius: var(--border-radius) !important;
+    box-shadow: var(--shadow-x,1px) var(--shadow-y,2px) 0 var(--shadow-size,1px) var(--border-color,var(--color-accent-black)) !important;
+    overflow: hidden !important;
+    transition: transform calc(var(--duration-factor) * .1s) ease-in-out !important;
+    transition-property: transform,box-shadow !important;
+}
+#examples button:hover {
+    --shadow-y: 3px !important;
+    --shadow-x: 2px !important;
+
+    transform: translate(-1px,-1px) !important;
 }
 
+/* Audio_output */
 #audio_output {
     align-self: center !important;
     width: var(--card-width) !important;
     /* background: #4fd644 !important; */
 }
-
 #audio_output .icon-buttons {
     --border-radius: 15px;
     --border-color: var(
@@ -175,7 +204,6 @@ gradio-app {
     transition: transform calc(var(--duration-factor) * .1s) ease-in-out !important;
     transition-property: transform,box-shadow !important;
 }
-
 #audio_output .icon-buttons:hover {
     --shadow-y: 1.5px !important;
     --shadow-x: 1px !important;