Update app.py

app.py

@@ -5,14 +5,31 @@ from huggingface_hub import InferenceClient
 client = InferenceClient("google/gemma-2-27b-it")
 
 
-def greet(name):
-    messages = [{"role": "user", "content": name}]
+def generate_text(messages):
     generated = ""
     for token in client.chat_completion(messages, max_tokens=100,stream=True):
         content = (token.choices[0].delta.content)
         generated+=content
         print(generated)
-        yield generated
+    
+    generated
+
+def call_generate_text(message, history):
+    if len(message) == 0:
+        message.append({"role": "system", "content": "you response around 10 words"})
+   # history.append({"role": "user", "content": message})
+    print(message)
+    print(history)
+   
+    messages = history+[{"role":"user","content":message}]
+    try:
+        text = generate_text(messages)
+        messages +=  [{"role":"assistant","content":text}]
+        return "",messages
+    except RuntimeError  as e:
+        print(f"An unexpected error occurred: {e}")
+       
+    return "",history
 
 head = '''
 <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.webgpu.min.js" ></script>
@@ -20,92 +37,39 @@ head = '''
         import { matcha_tts,env } from "https://akjava.github.io/Matcha-TTS-Japanese/js-esm/v001-20240921/matcha_tts_onnx_en.js";
         window.MatchaTTSEn = matcha_tts
 </script>
-
-<script>
-let last_chatbot_size = 0
-let tts_text_index = 0
-let tts_texts = []
-
-const interval = 100
-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,"https://huggingface.co/spaces/Akjava/gemma-2-27b-it-matcha-tts-en/resolve/main/ljspeech_sim.onnx")
-  }
-
-  
-  }
-  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()
-    }
+'''
+with gr.Blocks(title="LLM with TTS",head=head) as demo:
+    gr.Markdown("## Please be patient, the first response may have a delay of up to 20 seconds while loading.")
+    gr.Markdown("**Qwen2.5-0.5B-Instruct/LJSpeech-q8**.LLM and TTS models will change without notice.")
+    js = """
+    function(chatbot){
     text = (chatbot[chatbot.length -1])["content"]
-    update_tts_texts(text)
+    window.MatchaTTSEn(text)
+    }
+    """
+    chatbot = gr.Chatbot(type="messages")
+    chatbot.change(None,[chatbot],[],js=js)
+    msg = gr.Textbox()
+    clear = gr.ClearButton([msg, chatbot])
+    gr.HTML("""
+    <br>
+    <div id="footer">
+    <b>Spaces</b><br>
+     <a href="https://huggingface.co/spaces/Akjava/matcha-tts_vctk-onnx" style="font-size: 9px" target="link">Match-TTS VCTK-ONNX</a> | 
+     <a href="https://huggingface.co/spaces/Akjava/matcha-tts-onnx-benchmarks" style="font-size: 9px" target="link">Match-TTS ONNX-Benchmark</a> | 
+      <br><br>
+    <b>Credits</b><br>
+    <a href="https://github.com/akjava/Matcha-TTS-Japanese" style="font-size: 9px" target="link">Matcha-TTS-Japanese</a> | 
+    <a href = "http://www.udialogue.org/download/cstr-vctk-corpus.html" style="font-size: 9px"  target="link">CSTR VCTK Corpus</a> |
+    <a href = "https://github.com/cmusphinx/cmudict" style="font-size: 9px"  target="link">CMUDict</a> |
+    <a href = "https://huggingface.co/docs/transformers.js/index" style="font-size: 9px"  target="link">Transformer.js</a> |
+    <a href = "https://huggingface.co/cisco-ai/mini-bart-g2p" style="font-size: 9px"  target="link">mini-bart-g2p</a> |
+    <a href = "https://onnxruntime.ai/docs/get-started/with-javascript/web.html" style="font-size: 9px"  target="link">ONNXRuntime-Web</a> |
+    <a href = "https://github.com/akjava/English-To-IPA-Collections" style="font-size: 9px"  target="link">English-To-IPA-Collections</a> |
+    <a href ="https://huggingface.co/papers/2309.03199" style="font-size: 9px"  target="link">Matcha-TTS Paper</a>
+    </div>
+    """)
     
-}
-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
+    msg.submit(call_generate_text, [msg, chatbot], [msg, chatbot])
     
 demo.launch()