master

Branches (1)

Manage

Manage

master

aichat
/
chat.html

<!DOCTYPE html>
<html lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="author" content="管雷鸣">
<title>在线咨询</title>
<link rel="stylesheet" type="text/css" href="./chat_files/style.css" media="screen">
<link rel="stylesheet" href="./chat_files/layer.css" id="layuicss-skinlayercss"></head>

<body style="background-color: #EFF0F1;">

<header class="chat_header">
    <!-- <div class="back" onclick="alert('自己写吧');">&nbsp;</div> -->
    <div class="title">在线咨询</div>
</header>
<style>
	#se-knowledge>p{padding:0 !important;margin:0 !important;}


</style>
<section id="chatcontent">
    <section class="chat bot">
        <div class="head"></div>
        <div class="sanjiao"></div>
        <div class="text">您好，请问有什么可以帮助您的吗</div>
    </section>

<!--
        <section class="chat user">
        <div class="head"></div>
        <div class="sanjiao"></div>
        <div class="text">欢迎</div>
    </section>
-->


</section>


<footer id="chat_footer">
    <div id="icon" onclick="qiehuan();"></div>
    <div id="input_area">
        <!-- 键盘输入 -->
        <input type="text" id="jianpan"><input type="submit" value="发送" class="send" id="sendButton" onclick="textSubmit();">

        <!-- 语音输入，默认隐藏 -->
        <button id="luyin" onclick="voice();" style="display:none;">点击录音</button>
    </div>
</footer>

<!-- 加载中的效果提示 -->
<script src="./chat_files/jquery-2.1.4.js"></script>
<script src="./chat_files/layer.js" type="text/javascript"></script>
<script src="./chat_files/iw.js"></script>
<!-- 语音 -->
<!--templateVarStart--><!--templateVarName=yuyin-->
<script src="./chat_files/luyin.js"></script>
<script src="./chat_files/fun.js"></script>
<!--templateVarEnd-->

<script>
//输入方式，默认键盘输入
var shuruType = 'jianpan';
function qiehuan(){
    if(shuruType == 'jianpan'){
        //切换到语音输入
        //document.getElementById('input_area').innerHTML = '<button id="luyin" onclick="voice();">点击录音</button>';
        document.getElementById('jianpan').style.display='none';
        document.getElementById('sendButton').style.display='none';
        document.getElementById('luyin').style.display='';
        document.getElementById('icon').style.backgroundImage="url('./chat_files/chat_jianpan.png')";
        shuruType = 'yuyin';
    }else{
        //切换到键盘输入
        //document.getElementById('input_area').innerHTML = '<input type="text" id="jianpan" /><button class="send">发送</button>';
        document.getElementById('jianpan').style.display='';
        document.getElementById('sendButton').style.display='';
        document.getElementById('luyin').style.display='none';
        document.getElementById('icon').style.backgroundImage="url('./chat_files/chat_yuyin.png')";
        shuruType = 'jianpan';
    }
}

//机器人回复，自动绘制对话
function huifu(text){
    if(text.length == 0){
        text ='我没听懂呢，请更明确的表达一下吧';
    }
	//text = removeHTMLTag(text);
    chatcontent = document.getElementById('chatcontent');
    chatcontent.innerHTML =  chatcontent.innerHTML +
        '<section class="chat bot"><div class="head"></div><div class="sanjiao"></div><div class="text">'+text+'</div></section>';
    //滚动条位置
    //document.getElementById('chatcontent').scrollHeight
    window.scrollTo(0,chatcontent.scrollHeight);
}


//text文本，打字沟通交流， 点击提交按钮后发送
function textSubmit(){
    var value = document.getElementById('jianpan').value;
    if(value.length == 0){
        return;
    }

    //发送文本消息后绘制对话窗口
    chatcontent = document.getElementById('chatcontent');
    chatcontent.innerHTML =  chatcontent.innerHTML +
        '<section class="chat user"><div class="head"></div><div class="sanjiao"></div><div class="text">'+value+'</div></section>';
    //滚动条
    window.scrollTo(0,document.getElementById('chatcontent').scrollHeight);


    //接口提交-文本对话，输入文字获取对话结果
    iw.loading("发送中");    //显示“更改中”的等待提示
    alert('请先吧请求url设置成你自己的吧');
    $.post(
        "http://.........../chat/textTell.do",
        { "text": document.getElementById('jianpan').value },
            function(data){
            iw.loadClose();    //关闭“更改中”的等待提示
            if(data.result != '1'){
                iw.msgFailure(data.info);
            }else{
                huifu(data.info);
            }
        },
    "json");


    //清空内容区域
    document.getElementById('jianpan').value = '';
}


</script>

<!-- 语音 -->
<style>
.alert_yuyinmsg div img{
    margin-top: 10px;
}
.alert_yuyinmsg button{
        border: 0px;
    background-color: #e2e2e2;
    padding: 3px;
    padding-left: 8px;
    padding-right: 8px;
    margin-top: 15px;
    margin-bottom: 10px;
    border-radius: 3px;
}
.alert_yuyinmsg .fonttishi{
    font-size: 12px;
    padding-left: 5px;
    color: #B4B4B4;
}

.layui-layer-msg, .layui-layer-hui, .layer-anim{
    border-radius: 10px;
}
</style>
<!-- 点击语音时，弹出的语音小窗口 -->
<div id="alert_yuyin_content" style="display:none;">
    <div class="alert_yuyinmsg">
        <div>
            <img src="./chat_files/chat_yuyin.png">
        </div>
        <div class="fonttishi">
            录音中...
        </div>
        <div>
            <button onclick="stopAndSend();">结束录音</button>
        </div>
    </div>
</div>

<script>
var layermsgvoiceindex = 0;

//语音交流，点击语音按钮触发
function voice(){
    layermsgvoiceindex = layer.msg(document.getElementById('alert_yuyin_content').innerHTML, {
      time: 200000 //200秒关闭
    }, function(){
      //do something
    });
    startRecording();
}


        var recorder;
        var audio = document.querySelector('audio');
        function startRecording() {
            HZRecorder.get(function (rec) {
                recorder = rec;
                recorder.start();
            });
        }
        function stopRecording() {
            recorder.stop();
        }
        function playRecording() {
            recorder.play(audio);
        }

        //结束录音并发送语音
        function stopAndSend(){
            recorder.stop();    //结束

            iw.loading("识别中");    //显示“更改中”的等待提示
            var fd = new FormData();
            fd.append("voice", recorder.getBlob());
            var xhr = new XMLHttpRequest();
            //上传完成回调
            xhr.addEventListener("load", function (e) {
                iw.loadClose();    //关闭“更改中”的等待提示
                console.log('ok');
                console.log(e);
                //e.target.responseText即后台返回结果
                var data = eval('(' + e.target.responseText + ')');
                if(data.result == '1'){
                    //成功
                    console.log(data.info);
                    document.getElementById('jianpan').value = data.info;
                    textSubmit();
                }else{
                    //失败
                    alert(data.info);
                }
            }, false);

			alert('请先吧请求url设置成你自己的吧');
			//这里是要有个接口接收语音，在后台接收到语音后，将语音转码为文字，再使用云小蜜获取文字的对话结果的内容字符串返回过来
            xhr.open("POST", 'http://........./chat/voiceToText.do');
            xhr.send(fd);
        }

    </script>

<script>
//如果对话中，有相似的几个推荐问答，点击某个推荐的问题后自动回复此问题
$(document).ready(function(){
	$("#chatcontent").on("click",".xnx3_recommend_li",function(){
		//获取li里面的内容
		var text=$(this).text();
		console.log(text);
		document.getElementById('jianpan').value = text;
		textSubmit();
	});
});

</script>

<style>
	#se-knowledge>p{padding:0 !important;margin:0 !important;}
	.xnx3_chatbot{padding:0px 0px 0px 16px !important;margin:0 !important;}
	.xnx3_chatbot li{color:#2580c6;}
</style>

</body></html>