Voice-controller npm package

install

print npm install Voice-controller to your terminal

firstly you need to create QnA maker service in Azure

The documentation is in this link: https://docs.microsoft.com/en-us/azure/cognitive-services/qnamaker/tutorials/create-publish-query-in-portal , and create your own knowledge base

Example of usage the QnA maker

1. Put the generated link to the fetch() function.
2. Put the authorization key to the key value in ${key}
3. store the answer from QnA maker in the state or useState Hook
4. Call this function in Voice_controler npm packige as qnamakerResponse prop

Get language detection key

1. Here you can create your own key for langiage detection: https://detectlanguage.com .
2. Put the generated key to the state in languageAPIkey prop.

Speech to text

1. go to this link: https://cloud.google.com/speech-to-text/?utm_source=google&utm_medium=cpc&utm_campaign=emea-emea-all-en-dr-bkws-all-all-trial-b-gcp-1007176&utm_content=text-ad-none-any-DEV_c-CRE_171810430203-ADGP_Hybrid+%7C+AW+SEM+%7C+BKWS+~+BMM_1:1_EMEA_EN_ML_Speech+API_speech+to+text+google-KWID_43700017200833243-kwd-70281048505-userloc_9062575&utm_term=KW_%2Bspeech%20%2Bto%20%2Btext%20%2Bgoogle-ST_%2Bspeech+%2Bto+%2Btext+%2Bgoogle&ds_rl=1242853&ds_rl=1245734&ds_rl=1245734&gclid=CjwKCAiAob3vBRAUEiwAIbs5TjWGL4jF_HqTEt84x5z2ZCCbL-klseMvXbvHK5Vioby7KqJ02u4R-RoCayYQAvD_BwE
2. create your own credentials to the API and put them to state in your component (We used sttKey in state in our example of usage)

sendQuestionToQnAMaker = (question) => {
    fetch(`QnAmakerAzure_generated_link`, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              Authorization: `EndpointKey ${key}`
            },
            body: JSON.stringify({
              question
            })
          })
        .then(resp => resp.json())
        .then((data) => {
            this.setState({ answer: data.answers[0].answer })
        })
        .catch(console.error)
  }

How to use component

class App extends Component{
    state = {
        chat_open: false,
        language: 'sk',
        sttKey: {

        },
        languageAPIkey: ''
    }
    openChatHandler = () => {
    this.setState({ chat_open: !this.state.chat_open })
    }
    sendQuestionToQnAMaker=(question)=>{}
    detectedLanguage=(text)=>{
        this.setState({ language: text })
    }
    render(){
        return(
            <Voice_controler chat_open={this.state.chat_open} 
                onClick={this.openChatHandler} 
                detectedLanguage={this.detectedLanguage}
                qnamakerResponse={this.sendQuestionToQnAMaker} 
                sttKey={ this.state.sttKey }
                languageKey={this.state.languageAPIkey}
            />
        )
    }
}