Upload folder using huggingface_hub

app.py

@@ -96,8 +96,8 @@ def speak_fn(
 
 
 def init_fn():
-    gr.Info("2023-11-23: 花钱买了稍微好一点的服务器，现在生成应该更快了。")
-    gr.Info("2023-11-24: 优化长句生成效果；增加示例；更新了一些小彩蛋。")
+    gr.Info("2023-11-23: 有什么建议可以在 Community 中提哦。")
+    gr.Info("2023-11-24: 优化长句生成效果；增加示例；更新了一些小彩蛋；画了一些大饼）")
     gr.Info("Only support Chinese now. Trying to train a mutilingual model.")
 
 
@@ -107,9 +107,16 @@ with open("./css/style.css", "r", encoding="utf-8") as f:
 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="speak_button", elem_classes="button wonder-card")
-    gr.Examples(["你今天好棒", "雄蕊羊痒的", "我一朵花好害怕", "再来找我玩哦", "冲呀冲呀！", "塔塔开！一字摸塔塔开！", "好了是闺蜜，不好嘞是敌咪"], label=None, inputs=[input_text], elem_id="examples")
+    with gr.Tab("Speak", elem_id="tab-speak"):
+        speak_input = gr.Textbox(lines=1, label="Talking Flower will say:", elem_classes="wonder-card", elem_id="input_text")
+        speak_button = gr.Button("Speak!", elem_id="speak_button", elem_classes="main-button wonder-card")
+        gr.Examples(["你今天好棒！", "雄蕊羊痒的~", "我一朵花好害怕", "再来找我玩哦", "冲呀冲呀！", "塔塔开！一字摸塔塔开！", "好了是闺蜜，不好嘞是敌咪"], label=None, inputs=[speak_input], elem_id="examples")
+    with gr.Tab("Chat", elem_id="tab-chat"):
+        chat_input = gr.Textbox(lines=1, placeholder="Coming Soon...", label="Chat to Talking Flower:", elem_classes="wonder-card", elem_id="input_text", interactive=False)
+        chat_button = gr.Button("Chat!", elem_id="chat_button", elem_classes="main-button wonder-card")
+    with gr.Tab("Mimic", elem_id="tab-mimic"):
+        gr.Textbox(lines=1, placeholder="Coming Soon...", label="Choose sound to mimic:", elem_classes="wonder-card", elem_id="input_text", interactive=False)
+        mimic_button = gr.Button("Mimic!", elem_id="mimic_button", elem_classes="main-button wonder-card")
     audio_output = gr.Audio(label="输出音频", show_label=False, autoplay=True, elem_id="audio_output", elem_classes="wonder-card")
     
     
@@ -118,14 +125,14 @@ with gr.Blocks(css=customCSS) as demo:
         inputs=[],
         outputs=[]
     )
-    input_text.submit(
+    speak_input.submit(
         speak_fn,
-        inputs=[input_text, exceed_flag],
+        inputs=[speak_input, exceed_flag],
         outputs=[audio_output, exceed_flag],
     )
     speak_button.click(
         speak_fn,
-        inputs=[input_text, exceed_flag],
+        inputs=[speak_input, exceed_flag],
         outputs=[audio_output, exceed_flag],
     )
 

css/style.css

@@ -53,6 +53,8 @@
     -moz-text-size-adjust: none;
     text-size-adjust: none
 }
+/* ------------ DEFINE END ------------ */
+
 
 gradio-app {
     background: url("file=assets/hero-header-layer-1-large-up-2x.jpg") no-repeat !important;
@@ -70,6 +72,73 @@ gradio-app {
     height: 10rem;
 }
 
+/* Tabs */
+.tabs {
+    width: var(--card-width) !important;
+    align-self: center;
+}
+.tabs .tab-nav {
+    font-family: var(--font-heading);
+    display: flex;
+    position: relative;
+    flex-wrap: wrap;
+    border-bottom: 0px !important;
+    margin-bottom: -1.5rem;
+    z-index: 100;
+}
+.tabs .tab-nav button {
+    --border-color: var(--color-accent-black);
+    font-size: 1.1rem !important;
+
+    background: #b787d2;
+    color: #fefdff;
+    backface-visibility: hidden !important;
+    border: solid var(--border-width,3px) var(--border-color,var(--color-accent-black)) !important;
+    border-radius: 1rem 0.1rem !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;
+    margin-right: 0.75rem;
+}
+.tabs .tab-nav button:hover {
+    --shadow-y: 3px !important;
+    --shadow-x: 2px !important;
+    transform: translate(-1px,-1px) !important;
+}
+.tabs .tabitem {
+    border: 0px !important;
+}
+.tabs .selected {
+    --shadow-y: 3px !important;
+    --shadow-x: 2px !important;
+    box-shadow: var(--shadow-x,1px) var(--shadow-y,2px) 0 var(--shadow-size,1px) var(--border-color,var(--color-accent-black)) !important;
+    transform: translate(-1px,-1px) !important;
+}
+#tab-speak-button {
+    background: var(--color-yellow);
+    color: var(--color-accent-black);
+}
+#tab-chat-button {
+    background: #2263c6;
+    color: var(--color-white);
+}
+#tab-mimic-button {
+    background: #fc3e9d;
+    color: var(--color-white);
+}
+
+
+/* TalkingFlower Portrait */
+#talking_flower_pic {
+    display: flex;
+    align-self: center !important;
+    width: var(--card-width) !important;
+    object-fit: cover !important;
+    object-position: center !important;
+    justify-content: flex-end;
+}
+
 .wonder-card {
     --border-radius: 15px;
     --border-color: var(--color-accent-black);
@@ -83,11 +152,11 @@ gradio-app {
     transition-property: transform,box-shadow !important;
 }
 
+/* Input_text */
 .form {
     --border-radius: 15px;
     --border-color: var(--color-accent-black);
 
-    width: var(--card-width) !important;
     align-self: center !important;
     backface-visibility: hidden !important;
     border: solid var(--border-width,4px) var(--border-color,var(--color-accent-black)) !important;
@@ -98,7 +167,6 @@ gradio-app {
     transition-property: transform,box-shadow !important;
 }
 
-/* Input_text */
 #input_text label textarea {
     width: 80%;
 }
@@ -124,47 +192,63 @@ gradio-app {
 }
 
 /* Main Button */
-.button {
+.main-button {
     font-size: 1.625rem !important;
     font-family: var(--font-heading) !important;
     font-style: normal !important;
     font-weight: 900 !important;
-    color: var(--color-accent-black) !important;
 
-    background: var(--color-yellow) !important;
     margin-top: -36px !important;
     width: fit-content !important;
     height: fit-content !important;
     align-self: center !important;
-    /* padding: 16px 28px !important; */
     z-index: 10 !important;
 }
-.button:hover {
+.main-button:hover {
     --shadow-y: 6px !important;
     --shadow-x: 4px !important;
 
-    background: #f5a200 !important;
     transform: translate(-2px,-2px) !important;
 }
-
-#talking_flower_pic {
-    display: flex;
-    align-self: center !important;
-    width: var(--card-width) !important;
-    object-fit: cover !important;
-    object-position: center !important;
-    justify-content: flex-end;
+#speak_button {
+    background: var(--color-yellow) !important;
+    color: var(--color-accent-black) !important;
+}
+#speak_button:hover {
+    background: #f5a200 !important;
+}
+#chat_button {
+    background: #2263c6 !important;
+    color: var(--color-white) !important;
+}
+#chat_button:hover {
+    background: #124080 !important;
+}
+#mimic_button {
+    background: #fc3e9d !important;
+    color: var(--color-white) !important;
+}
+#mimic_button:hover {
+    background: #aa2567 !important;
 }
 
 /* Examples */
 #examples {
-    width: var(--card-width) !important;
     align-self: center;
     padding: 0.2rem;
 }
 #examples .label {
     display: none !important;
 }
+#examples .gallery {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-lg);
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    align-content: center;
+}
 #examples button {
     --border-radius: 12px;
     --border-color: var(--color-accent-black);