기존에 있던 bct ai chatbot 플러그인 / audio / logs 에 있는 로그는 bct ai chatbot 플러그인 / audio / Audio Converter에서 변경한 log기록만 기록됩니다.
![](https://makebct.net/wp-content/uploads/2023/12/1-1-1024x226.png)
![](https://makebct.net/wp-content/uploads/2023/12/2-1.png)
그래서 추가로 데이터 테이블을 만들고 chatbot에서 TTS가 작동되면 테이블에 기록하도록 만들었습니다.
데이터 테이블에 추가되는 방법은 다음과 같습니다.
![](https://makebct.net/wp-content/uploads/2023/12/3-1.png)
챗봇 화면 하단 마이크 버튼을 누르면 미디어 디바이스에 마이크를 활성화 시키고, 버튼을 한번 더 누르면 마이크 장치를 끄고 오디오 파일을 blob형태로 저장합니다.
![](https://makebct.net/wp-content/uploads/2023/12/4-1.png)
저장된 blob을 bctai_chat.php에 bctai_chatbox_message() 메서드에 파일을 넘깁니다.
![](https://makebct.net/wp-content/uploads/2023/12/5-1.png)
php파일에서 openai ‘whisper-1’모델에 파일과 함께 request요청을 하게되고, openai에서 오디오파일을 텍스트로 변환하여 다시 넘겨줍니다. 텍스트를 다시 Openai의 채팅모델로 요청하고 그에따른 답변을 다시 돌려줍니다. 이 과정을 거치면 요청한 답변은 다시 chat.js에서 사용할 수 있습니다.
![](https://makebct.net/wp-content/uploads/2023/12/6-1.png)
요청받은 답변을 bctai_google_speech.php로 넘겨주고, php파일에서 텍스트와 함께 google TTS api로 오디오 변환 요청을 하게됩니다.
![](https://makebct.net/wp-content/uploads/2023/12/7-1.png)
또한 php파일에서 TTS api를 통해 전환된 오디오 파일과 오디오 크기를 데이터테이블에 저장합니다.
![](https://makebct.net/wp-content/uploads/2023/12/8-1024x38.png)
그후 차트를 만들기 위해서 저장된 데이터를 bctai_chart / dashboard 페이지에서 쿼리문으로 요청합니다.
![](https://makebct.net/wp-content/uploads/2023/12/9.png)
쿼리문을 실행시켜 받은 데이터를 날짜별로 배열화 시킨후, c3.js 차트의 x값으로 넣습니다.
![](https://makebct.net/wp-content/uploads/2023/12/10.png)
![](https://makebct.net/wp-content/uploads/2023/12/11-1024x236.png)