app.py

import gradio as gr
from huggingface_hub import InferenceClient


client = InferenceClient("google/gemma-2-27b-it")


def greet(name):
    messages = [{"role": "user", "content": name}]
    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

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/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()
    }
    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()