add tts script

app.py

@@ -15,9 +15,100 @@ def greet(name):
         print(generated)
         yield generated
 
+head = '''
+<script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.webgpu.min.js" ></script>
+<script type="module">
+        import { matcha_tts,env } from "https://akjava.github.io/Matcha-TTS-Japanese/js-esm/matcha_tts_onnx_en_dev.js";
+        window.MatchaTTSEn = matcha_tts
+</script>
 
-with gr.Interface(fn=greet, inputs="text", outputs="text") as demo:
-    textbox=gr.Textbox()
-    #textbox.change(None,[],[],js="function(){console.log('hello')}")
+<script>
+let last_chatbot_size = 0
+let tts_text_index = 0
+let tts_texts = []
+
+const interval = 50
+async function start_multi_line_tts() {
+  //console.log("start_multi_line_tts")
+  //console.log(tts_texts.length)
+  if (tts_texts.length > tts_text_index){
+  const tts_text = tts_texts[tts_text_index]
+  tts_text_index += 1
+  console.log(tts_text)
+  if (tts_text!=""){
+    await window.MatchaTTSEn(tts_text)
+    console.log("await")
+  }
+
+  
+  }
+  setTimeout(start_multi_line_tts, interval);
+}
+
+
+function reset_tts_text(){
+    console.log("reset tts text")
+    tts_text_index = 0
+    tts_texts = []
+}
+function replaceSpecialChars(text) {
+    const pattern = /[^a-zA-Z0-9,.!?-_]/g;
+    return text.replace(pattern, ' ');
+}
+
+
+function update_tts_texts(text){
+    //console.log(text)
+    const replaced_text = replaceSpecialChars(text)
+    const new_texts = []
+    const splited = replaced_text.split(/[.!?]+\s/);
+    for (let i = 0; i < splited.length; i++) {
+    const value = splited[i].trim();
+    
+    if (i === splited.length - 1) {
+        if (value.endsWith(".") || value.endsWith("?") || value.endsWith("!")){
+            new_texts.push(value);
+        }
+        console.log("Last element:", value);
+    } else {
+        // その他の要素に対する処理
+        new_texts.push(value);
+    }
+    }
+    tts_texts=new_texts
+    
+}
+
+function update_chatbot(chatbot){
+    //console.log(chatbot)
+    if (chatbot.length!=last_chatbot_size){
+        last_chatbot_size = chatbot.length
+        reset_tts_text()
+    }
+    text = (chatbot[chatbot.length -1])["content"]
+    update_tts_texts(text)
+    
+}
+window.update_chatbot = update_chatbot
+window.update_tts_texts = update_tts_texts
+window.reset_tts_text = reset_tts_text  
+start_multi_line_tts();
+</script>
+'''
+
+input=gr.Textbox()
+textbox=gr.Textbox()
+#submit = gr.Button("Submit")
+with gr.Interface(fn=greet, inputs=input, outputs=textbox,head=head) as demo: #submit_btn=submit
+    input.submit(None,[],[],js="function(){console.log('submit');window.reset_tts_text()}")
+    textbox.change(None,[textbox],[],js="""function(text){
+        window.update_tts_texts(text)
+        }""")
+    #submit click not catch.
+    #print(demo.inputs)
+    #input.submit(None,[],[],js="function(){console.log('submit')}")
+    #demo.inputs=input
+    #demo.outputs=textbox
+    
 
 demo.launch()