jeju 모델 업로드

8eb2cb0 almost 3 years ago

7.74 kB

var sendForm = document.querySelector('#chatform'),
    textInput = document.querySelector('.chatbox'),
    chatList = document.querySelector('.chatlist'),
    userBubble = document.querySelectorAll('.userInput'),
    botBubble = document.querySelectorAll('.bot__output'),
    animateBotBubble = document.querySelectorAll('.bot__input--animation'),
    overview = document.querySelector('.chatbot__overview'),
    hasCorrectInput,
    imgLoader = false,
    animationCounter = 1,
    animationBubbleDelay = 600,
    input,
    previousInput,
    isReaction = false,
    unkwnCommReaction = "I didn't quite get that.",
    chatbotButton = document.querySelector(".submit-button")

let printVoice = false;

let bar = document.getElementById("loadding_bar")


sendForm.onkeydown = function(e){
  if(e.keyCode == 13){
    e.preventDefault();

    //No mix ups with upper and lowercases
    var input = textInput.value.toLowerCase();

    //Empty textarea fix
    if(input.length > 0) {
      createBubble(input)
    }
  }
};

sendForm.addEventListener('submit', function(e) {
  
  //so form doesnt submit page (no page refresh)
  e.preventDefault();

  //No mix ups with upper and lowercases
  var input = textInput.value.toLowerCase();

  //Empty textarea fix
  if(input.length > 0) {
    createBubble(input)
  }
}) //end of eventlistener

var createBubble = function(input) {
  
  //create input bubble
  var chatBubble = document.createElement('li');
  chatBubble.classList.add('userInput');

  //adds input of textarea to chatbubble list item
  chatBubble.innerHTML = input;

  //adds chatBubble to chatlist
  chatList.appendChild(chatBubble)

//   checkInput(input);
    checkInput(input)
}



// 프로미스를 사용한 비동기 함수
function asyncGetAnswer(input) {
    return new Promise((resolve, reject) => {
        let state = getAnswer(input)
        resolve(state)
    });
}

// 프로미스를 사용한 비동기 함수
function asyncGetVoice(input) {
    return new Promise((resolve, reject) => {
        let audio_src = getVoice(input)
        resolve(audio_src)
    });
}


// 실행 함수 정의
async function executeGetAnswer(input) {
    
    if (!input){
        return false
    }
    
    console.log("asyncGetAnswer 동기 함수 실행 시작");

    // 동기 함수 실행
    await asyncGetAnswer(input);

    console.log("asyncGetAnswer 동기 함수 실행 종료");
    
}


// 실행 함수 정의
async function executeGetVoice(input) {
   
    if (!input){
        return false
    }
    
    console.log("asyncGetVoice 동기 함수 실행 시작");

    // 동기 함수 실행
    await asyncGetVoice(input);

    console.log("asyncGetVoice 동기 함수 실행 종료");
    
}



// 텍스트 입력 후 전송 시 호출됨
async function checkInput(input) {
  
  

  isReaction = true;
  
  await executeGetAnswer(input)        
  
    
  console.log("answer: ", answer);
  console.log("jeju_answer: ", jeju_answer);
    

  // 음성 출력 여부 확인
  // voice toggle button 
  let voice_check = document.getElementById("voice_yn");
  let is_checked = voice_check.checked
  console.log("is_checked:", is_checked)
  if (is_checked) {
    console.log("소리O")
    
    await executeGetVoice(jeju_answer) 
     
    
      
  }else{
    console.log("소리X")
  }
    
   if (answer == ""){
   
      responseCommand("다시 입력해주세요.", "다시 입력해주세요."); 
   
   }else{
       // 화면에 출력하기
      responseCommand(answer, jeju_answer);

    }

}








// 답변 받아오기
function getAnswer(input){            
    $.ajax({
        type:"get",  // fetch의 method 기능
        url: "/process_input/"+input, 
        timeout:100000,
        async:false,
        // 성공
        success:function(result){
            console.log("success getAnswer() 함수 성공" + input);
            answer = result.answer
            jeju_answer = result.jeju_answer
            console.log("answer " + answer);
            console.log("jeju_answer " + jeju_answer);
        },
        error:function(request,error){
            alert("fail getAnswer() 함수 실패 " + input);
            
        }
    
    })
    
   
}

// 음성 만들기
function getVoice(sentence){
    $.ajax({
        type:"get",  // fetch의 method 기능
        url: "/voice/"+sentence, 
        timeout:100000,
        async:false,
        // 성공
        success:function(audio_src){
            console.log("success " + audio_src);
            print_voice(audio_src)
            
            return audio_src
        },
        error:function(request,error){
            alert("fail " + sentence);
            
            return "error"
        }
    })
}

// 음성 소리 출력하기
function print_voice(audio_src){
  let hidden_area = document.querySelector("#hidden_area");
  voice_tag_html = `
      <audio src="../${audio_src}" autoplay></audio>`;
  hidden_area.insertAdjacentHTML("beforeend", voice_tag_html);
  printVoice = true;
}


function responseCommand(comm, jeju_comm) {
  // animationCounter = 1;

  //create response bubble
  var successResponse = document.createElement('li');

  successResponse.classList.add('bot__output');
  successResponse.classList.add('bot__output--failed');

  
  response_html = `<p>${comm}</p>
  <p style="font-size:11px;color:lightslategray">${jeju_comm}</p>`


  //Add text to successResponse
  successResponse.innerHTML = response_html; //adds input of textarea to chatbubble list item

  //add list item to chatlist
  chatList.appendChild(successResponse) //adds chatBubble to chatlist

  animateBotOutput();

  // reset text area input
  textInput.value = "";

  //Sets chatlist scroll to bottom
  chatList.scrollTop = chatList.scrollHeight;

  animationCounter = 1;
    
}

function responseText(e) {

  var response = document.createElement('li');

  response.classList.add('bot__output');

  //Adds whatever is given to responseText() to response bubble
  response.innerHTML = e;

  chatList.appendChild(response);

  animateBotOutput();

  console.log(response.clientHeight);

  //Sets chatlist scroll to bottom
  setTimeout(function(){
    chatList.scrollTop = chatList.scrollHeight;
    console.log(response.clientHeight);
  }, 0)
}

function responseImg(e) {
  var image = new Image();

  image.classList.add('bot__output');
  //Custom class for styling
  image.classList.add('bot__outputImage');
  //Gets the image
  image.src = "/images/"+e;
  chatList.appendChild(image);

  animateBotOutput()
  if(image.completed) {
    chatList.scrollTop = chatList.scrollTop + image.scrollHeight;
  }
  else {
    image.addEventListener('load', function(){
      chatList.scrollTop = chatList.scrollTop + image.scrollHeight;
    })
  }
}

//change to SCSS loop
function animateBotOutput() {
  chatList.lastElementChild.style.animationDelay= (animationCounter * animationBubbleDelay)+"ms";
  animationCounter++;
  chatList.lastElementChild.style.animationPlayState = "running";
}

function commandReset(e){
  animationCounter = 1;
  previousInput = Object.keys(possibleInput)[e];
}


var reactionInput = {
  "best work" : function(){
    //Redirects you to a different page after 3 secs
    responseText("On this GitHub page you'll find everything about Navvy");
    responseText("<a href='https://github.com/meesrutten/chatbot'>Navvy on GitHub</a>")
    animationCounter = 1;
    return
  },
  "about" : function(){
    responseText("Things I want to learn or do:");
    responseText("Get great at CSS & JS animation");
    responseText("Create 3D browser experiences");
    responseText("Learn Three.js and WebGL");
    responseText("Combine Motion Design with Front-End");
    animationCounter = 1;
    return
    }
}

	var sendForm = document.querySelector('#chatform'),
	textInput = document.querySelector('.chatbox'),
	chatList = document.querySelector('.chatlist'),
	userBubble = document.querySelectorAll('.userInput'),
	botBubble = document.querySelectorAll('.bot__output'),
	animateBotBubble = document.querySelectorAll('.bot__input--animation'),
	overview = document.querySelector('.chatbot__overview'),
	hasCorrectInput,
	imgLoader = false,
	animationCounter = 1,
	animationBubbleDelay = 600,
	input,
	previousInput,
	isReaction = false,
	unkwnCommReaction = "I didn't quite get that.",
	chatbotButton = document.querySelector(".submit-button")

	let printVoice = false;

	let bar = document.getElementById("loadding_bar")


	sendForm.onkeydown = function(e){
	if(e.keyCode == 13){
	e.preventDefault();

	//No mix ups with upper and lowercases
	var input = textInput.value.toLowerCase();

	//Empty textarea fix
	if(input.length > 0) {
	createBubble(input)
	}
	}
	};

	sendForm.addEventListener('submit', function(e) {

	//so form doesnt submit page (no page refresh)
	e.preventDefault();

	//No mix ups with upper and lowercases
	var input = textInput.value.toLowerCase();

	//Empty textarea fix
	if(input.length > 0) {
	createBubble(input)
	}
	}) //end of eventlistener

	var createBubble = function(input) {

	//create input bubble
	var chatBubble = document.createElement('li');
	chatBubble.classList.add('userInput');

	//adds input of textarea to chatbubble list item
	chatBubble.innerHTML = input;

	//adds chatBubble to chatlist
	chatList.appendChild(chatBubble)

	// checkInput(input);
	checkInput(input)
	}



	// 프로미스를 사용한 비동기 함수
	function asyncGetAnswer(input) {
	return new Promise((resolve, reject) => {
	let state = getAnswer(input)
	resolve(state)
	});
	}

	// 프로미스를 사용한 비동기 함수
	function asyncGetVoice(input) {
	return new Promise((resolve, reject) => {
	let audio_src = getVoice(input)
	resolve(audio_src)
	});
	}


	// 실행 함수 정의
	async function executeGetAnswer(input) {

	if (!input){
	return false
	}

	console.log("asyncGetAnswer 동기 함수 실행 시작");

	// 동기 함수 실행
	await asyncGetAnswer(input);

	console.log("asyncGetAnswer 동기 함수 실행 종료");

	}


	// 실행 함수 정의
	async function executeGetVoice(input) {

	if (!input){
	return false
	}

	console.log("asyncGetVoice 동기 함수 실행 시작");

	// 동기 함수 실행
	await asyncGetVoice(input);

	console.log("asyncGetVoice 동기 함수 실행 종료");

	}



	// 텍스트 입력 후 전송 시 호출됨
	async function checkInput(input) {



	isReaction = true;

	await executeGetAnswer(input)


	console.log("answer: ", answer);
	console.log("jeju_answer: ", jeju_answer);


	// 음성 출력 여부 확인
	// voice toggle button
	let voice_check = document.getElementById("voice_yn");
	let is_checked = voice_check.checked
	console.log("is_checked:", is_checked)
	if (is_checked) {
	console.log("소리O")

	await executeGetVoice(jeju_answer)



	}else{
	console.log("소리X")
	}

	if (answer == ""){

	responseCommand("다시 입력해주세요.", "다시 입력해주세요.");

	}else{
	// 화면에 출력하기
	responseCommand(answer, jeju_answer);

	}

	}








	// 답변 받아오기
	function getAnswer(input){
	$.ajax({
	type:"get", // fetch의 method 기능
	url: "/process_input/"+input,
	timeout:100000,
	async:false,
	// 성공
	success:function(result){
	console.log("success getAnswer() 함수 성공" + input);
	answer = result.answer
	jeju_answer = result.jeju_answer
	console.log("answer " + answer);
	console.log("jeju_answer " + jeju_answer);
	},
	error:function(request,error){
	alert("fail getAnswer() 함수 실패 " + input);

	}

	})


	}

	// 음성 만들기
	function getVoice(sentence){
	$.ajax({
	type:"get", // fetch의 method 기능
	url: "/voice/"+sentence,
	timeout:100000,
	async:false,
	// 성공
	success:function(audio_src){
	console.log("success " + audio_src);
	print_voice(audio_src)

	return audio_src
	},
	error:function(request,error){
	alert("fail " + sentence);

	return "error"
	}
	})
	}

	// 음성 소리 출력하기
	function print_voice(audio_src){
	let hidden_area = document.querySelector("#hidden_area");
	voice_tag_html = `
	<audio src="../${audio_src}" autoplay></audio>`;
	hidden_area.insertAdjacentHTML("beforeend", voice_tag_html);
	printVoice = true;
	}


	function responseCommand(comm, jeju_comm) {
	// animationCounter = 1;

	//create response bubble
	var successResponse = document.createElement('li');

	successResponse.classList.add('bot__output');
	successResponse.classList.add('bot__output--failed');


	response_html = `<p>${comm}</p>
	<p style="font-size:11px;color:lightslategray">${jeju_comm}</p>`


	//Add text to successResponse
	successResponse.innerHTML = response_html; //adds input of textarea to chatbubble list item

	//add list item to chatlist
	chatList.appendChild(successResponse) //adds chatBubble to chatlist

	animateBotOutput();

	// reset text area input
	textInput.value = "";

	//Sets chatlist scroll to bottom
	chatList.scrollTop = chatList.scrollHeight;

	animationCounter = 1;

	}

	function responseText(e) {

	var response = document.createElement('li');

	response.classList.add('bot__output');

	//Adds whatever is given to responseText() to response bubble
	response.innerHTML = e;

	chatList.appendChild(response);

	animateBotOutput();

	console.log(response.clientHeight);

	//Sets chatlist scroll to bottom
	setTimeout(function(){
	chatList.scrollTop = chatList.scrollHeight;
	console.log(response.clientHeight);
	}, 0)
	}

	function responseImg(e) {
	var image = new Image();

	image.classList.add('bot__output');
	//Custom class for styling
	image.classList.add('bot__outputImage');
	//Gets the image
	image.src = "/images/"+e;
	chatList.appendChild(image);

	animateBotOutput()
	if(image.completed) {
	chatList.scrollTop = chatList.scrollTop + image.scrollHeight;
	}
	else {
	image.addEventListener('load', function(){
	chatList.scrollTop = chatList.scrollTop + image.scrollHeight;
	})
	}
	}

	//change to SCSS loop
	function animateBotOutput() {
	chatList.lastElementChild.style.animationDelay= (animationCounter * animationBubbleDelay)+"ms";
	animationCounter++;
	chatList.lastElementChild.style.animationPlayState = "running";
	}

	function commandReset(e){
	animationCounter = 1;
	previousInput = Object.keys(possibleInput)[e];
	}


	var reactionInput = {
	"best work" : function(){
	//Redirects you to a different page after 3 secs
	responseText("On this GitHub page you'll find everything about Navvy");
	responseText("<a href='https://github.com/meesrutten/chatbot'>Navvy on GitHub</a>")
	animationCounter = 1;
	return
	},
	"about" : function(){
	responseText("Things I want to learn or do:");
	responseText("Get great at CSS & JS animation");
	responseText("Create 3D browser experiences");
	responseText("Learn Three.js and WebGL");
	responseText("Combine Motion Design with Front-End");
	animationCounter = 1;
	return
	}
	}