Upload folder using huggingface_hub

app.py

@@ -21,7 +21,7 @@ import gradio as gr
 import webbrowser
 from config import config
 from tools.translate import translate
-from tools.webui import reload_javascript
+from tools.webui import reload_javascript, get_character_html
 
 device = config.webui_config.device
 if device == "mps":
@@ -31,6 +31,7 @@ if device == "mps":
 def speak_fn(
         text: str,
         exceed_flag,
+        bubble_text,
         speaker="TalkFlower_CNzh",
         sdp_ratio=0.2,      # SDP/DP混合比
         noise_scale=0.6,        # 感情
@@ -46,9 +47,9 @@ def speak_fn(
         print(f"Too Long Text: {text}")
         gr.Warning("Too long! No more than 100 characters. 一口气不要超过 100 个字，憋坏我了。")
         if exceed_flag:
-            return gr.update(value="./assets/audios/nomorethan100.wav", autoplay=True), False
+            return gr.update(value="./assets/audios/nomorethan100.wav", autoplay=True), False, "不要超过100个字！"
         else:
-            return gr.update(value="./assets/audios/overlength.wav", autoplay=True), True
+            return gr.update(value="./assets/audios/overlength.wav", autoplay=True), True, "这句太长啦，憋坏我了！"
     audio_list = []
     if len(text) > 42:
         print(f"Long Text: {text}")
@@ -103,7 +104,11 @@ def speak_fn(
                 audio_list.append(silence)  # 将静音添加到列表中
     
     audio_concat = np.concatenate(audio_list)    
-    return (hps.data.sampling_rate, audio_concat), exceed_flag
+    return (hps.data.sampling_rate, audio_concat), exceed_flag, text
+
+
+def update_bubble_fn(text):
+    return gr.update(value=get_character_html(text))
 
 
 def init_fn():
@@ -117,7 +122,8 @@ 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")
+    bubble_text = gr.State(value="你好呀！")
+    character_area = gr.HTML(get_character_html("你好呀！"), elem_id="character_area")
     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")
@@ -138,14 +144,14 @@ with gr.Blocks(css=customCSS) as demo:
     )
     speak_input.submit(
         speak_fn,
-        inputs=[speak_input, exceed_flag],
-        outputs=[audio_output, exceed_flag],
-    )
+        inputs=[speak_input, exceed_flag, bubble_text],
+        outputs=[audio_output, exceed_flag, bubble_text],
+    ).then(update_bubble_fn, inputs=[speak_input], outputs=[character_area], show_progress=False)
     speak_button.click(
         speak_fn,
-        inputs=[speak_input, exceed_flag],
-        outputs=[audio_output, exceed_flag],
-    )
+        inputs=[speak_input, exceed_flag, bubble_text],
+        outputs=[audio_output, exceed_flag, bubble_text],
+    ).then(update_bubble_fn, inputs=[speak_input], outputs=[character_area], show_progress=False)
 
 
 if __name__ == "__main__":
@@ -156,7 +162,5 @@ if __name__ == "__main__":
     demo.launch(
         allowed_paths=["./assets"],
         show_api=False,
-        # server_name=server_name,
-        # server_port=server_port,
         inbrowser=True,
     )

css/style.css

@@ -63,11 +63,47 @@ gradio-app {
     background-position: center center !important;
 }
 
-.gradio-container {
-    margin-top: 4rem !important;
+/* Character Row */
+/* #character_row {
+    width: var(--card-width) !important;
+    align-self: center;
+} */
+#character_area {
+    width: var(--card-width) !important;
+    align-self: center;
+}
+.character {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-end;
+    align-items: flex-start;
+}
+.text-bubble-content {
+    --color: #fff;
+    background: var(--color) !important;
+    border-radius: 1rem;
+    padding: 0.5rem 1rem !important;
+    box-shadow: #00000078 0.1rem 0.1rem 0.75rem 0px;
+    text-align: center;
+}
+.text-bubble-content::after {
+    border: 0.75em solid transparent;
+    border-top: 1.5em solid #ffffff;
+    content: "";
+    position: absolute;
+    left: calc(100% - 12em);
+    top: calc(100% - 9.75em);
+    transform: rotate(-45deg);
+}
+#talking_flower_pic {
+    display: flex;
+    align-self: center !important;
+    object-fit: cover !important;
+    object-position: center !important;
+    justify-content: flex-end;
+    height: 10rem;
 }
-
-/* TalkingFlower Image */
 #talking_flower_pic img {
     height: 10rem;
 }
@@ -129,16 +165,6 @@ gradio-app {
 }
 
 
-/* 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);

tools/webui.py

@@ -4,6 +4,16 @@ import os
 GradioTemplateResponseOriginal = gr.routes.templates.TemplateResponse
 root_path = os.path.dirname(os.path.realpath(__file__))
 
+def get_character_html(text):
+    return f"""\
+<div class="character">
+    <span class="text-bubble-content">
+        {text}
+    </span>
+    <img src="file=assets/flower-2x.webp" id="talking_flower_pic" alt="TalkingFlowerPic">
+</div>
+"""
+
 def webpath(fn):
     if fn.startswith(root_path):
         web_path = os.path.relpath(fn, root_path).replace('\\', '/')