enebularでnlp その3

# 概要
enebularでnlpやってみた。
練習問題やってみた。

# 練習問題

chatbotを作れ。

# 方針
日本語でトレーニングする。

# 参考にしたページ

https://qiita.com/okumurakengo/items/24c75fe91f6d353d3692

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/559aedc5-b3bd-7270-1f8e-29e07fabaac1.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/9b439df1-8a5b-7a2c-0670-644fbdec4aed.png)


# サンプルコード

```


var endpoint = "https://ohiapp0.herokuapp.com/nlp?token=";
var ans;
function send(msg) {
	var xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && xhr.status == 200)
		{
			var data = JSON.parse(xhr.responseText);
            ans = data.answer;
            //alert(xhr.responseText);
    	    //(xhr.responseText));	
            repeatRobotOutput();
		}
		else
		{
			//alert(xhr.readyState);
			//alert(xhr.status);
			//alert(xhr.responseText);
		}
	};
  var uri = endpoint + msg;
	xhr.open("GET", uri, true);
	xhr.send();
}
let userCount = 0;
let userData = [];
const userText = document.getElementById('chatbot-text');
const chatSubmitBtn = document.getElementById('chatbot-submit');
let robotCount = 0;
let qPoint = 0;
let nextTextOption = '';
let chatbotZoomState = 'none';
const chatbot = document.getElementById('chatbot');
const chatbotBody = document.getElementById('chatbot-body');
const chatbotFooter = document.getElementById('chatbot-footer');
const chatbotZoomIcon = document.getElementById('chatbot-zoom-icon');

chatSubmitBtn.addEventListener('click', () => {
    if (!userText.value || !userText.value.match(/\S/g)) 
      return false;
    userCount ++;
    userData.push(userText.value);
    const ul = document.getElementById('chatbot-ul');
    const li = document.createElement('li');
    const div = document.createElement('div');
    li.classList.add('right');
    ul.appendChild(li);
    li.appendChild(div);
    div.classList.add('chatbot-right');
    div.textContent = userText.value;
    send(userText.value);
    chatToBottom();
    userText.value = '';
});
function repeatRobotOutput() {
    robotCount ++;
    chatSubmitBtn.disabled = true;
    const ul = document.getElementById('chatbot-ul');
    const li = document.createElement('li');
    li.classList.add('left');
    ul.appendChild(li);
    const robotLoadingDiv = document.createElement('div');
    setTimeout(()=> {
        li.appendChild(robotLoadingDiv);
        robotLoadingDiv.classList.add('chatbot-left');
        robotLoadingDiv.innerHTML = '<div id= "robot-loading-field"><span id= "robot-loading-circle1" class="material-icons">circle</span> <span id= "robot-loading-circle2" class="material-icons">circle</span> <span id= "robot-loading-circle3" class="material-icons">circle</span>';
        chatToBottom();
    }, 800);
    setTimeout(()=> {
        robotLoadingDiv.remove();
        const div = document.createElement('div');
        li.appendChild(div);
        div.classList.add('chatbot-left');
        div.textContent = userData[userCount - 1];
        if (ans != null) div.textContent = ans;
        
        chatToBottom();
        chatSubmitBtn.disabled = false;
    }, 2000);
    if (chatbotZoomState === 'large') 
    {
        document.querySelectorAll('.chatbot-left').forEach((cl) => {
            cl.style.maxWidth = '52vw';
        });
        document.querySelectorAll('.chatbot-right').forEach((cr) => {
            cr.style.maxWidth = '52vw';
        });
        document.querySelectorAll('.chatbot-left-rounded').forEach((cr) => {
            cr.style.maxWidth = '52vw';
        });
    }
}
function chatToBottom() {
    const chatField = document.getElementById('chatbot-body');
    chatField.scroll(0, chatField.scrollHeight - chatField.clientHeight);
}
```

# 成果物

https://embed.plnkr.co/plunk/OmRdiCHNAYk3GPJM

以上。