一. 首先來看一下智能機器人跟人聊天的介面吧 。
淺談一下介面構造的思路： 1.首先是頁面的布局，採用html標籤構建
<body>
<!--head start-->
<h1>JAVA 開發人工智慧機器人</h1>
<!--end head-->
<!--content start-->
<div id="box">
<div class="box-head">
<img class="h-img" src="images/logo.png" width="80" height="60">
<span class="h-span">七秒鐘的回憶</span>
</div>
<div class="box-body">
<div class="rotWord">
<span></span>
<p>helo 好久不見。</p>
</div>
</div>
<div class="box-footer">
<input type="text" id="input" autocomplete="off">
<!--autocomplete 取消輸入框自動提示-->
<div id="btn" onclick="action()">發送</div>
</div>
</div>
<!--end content-->
<!--js start-->
<script type="text/javascript" src="js/jquery-3.1.0.js"></script>
<script type="text/javascript">
var text=$("#input");
function action(){
//判斷輸入文字框是否有值
if(text.val()==""||text.val==""){
//智能最佳化
text.focus();
return ;
}
$(".box-body").append("<div class='myWord'><span></span><p>"+text.val()+"</p></div>");
$(".box-body").scrollTop(1000000000000);
$.ajax({
type:"post",
url:"robot",
data:{"text":text.val()},
success:function(data){
var result = $.parseJSON(data).text;
$(".box-body").append("<div class='rotWord'><span></span><p>"+result+"</p></div>");
$(".box-body").scrollTop(1000000000000);
//語言標籤 autoplay自動播放
var obj = $('<audio src="http://fanyi.baidu.com/gettts?lan=zh&text='+result+'&spd=5&sorce=web" autoplay></audio>');
$(".box-body").append(obj);
}
});
text.val("");
text.focus();
}
//鍵盤迴車事件
$(document).keydown(function(event){
if(event.keyCode==13){
action();
}
});
</script>
<!--end js-->
</body>
2.構建頁面的css樣式
<style type="text/css">
*{margin:0;padding:0;}
body,html{width:100%;height:100%;}
body{background:url(images/bg.jpg) no-repeat;}
h1{height:80px;background:rgba(0,0,0,.3);text-align:center;color:#fff;line-height:80px;font-weight:100;}
#box{width:800px;height:600px;background:rgba(255,255,255,.5);margin:50px auto;}
#box .box-head{height:60px;background:#00ffac;}
.box-head .h-img{margin:0 20px;float:left;}
.box-head .h-span{color:#fff;line-height:60px;font-size:24px;float:left;}
#box .box-body{width:760px;height:420px;padding:20px;overflow:auto;}
/*overflow:auto;div內文本超出後設定捲軸*/
/*手動設定捲軸樣式*/
.box-body::-webkit-scrollbar{width:4px;}
.box-body::-moz-scrollbar{width:4px;}
.box-body::-webkit-scrollbar-track{background:#808080;border-radius:2em;}
.box-body::-webkit-scrollbar-thumb{background-color:#03a9f4;border-radius:2em;}
.box-body::-moz-scroll-track{background:#808080;border-radius:2em;}
.box-body::-moz-scroll-thumb{background-color:#03a9f4;border-radius:2em;}
/*自訂捲軸的樣式*/
/*機器人的css*/
.box-body .rotWord span{width:40px;height:40px;background:url(images/rot.png);float:left;}
.box-body .rotWord p{float:left;padding:10px;background:#00ffae;margin-left:10px;border-radius:8px;word-break:break-all;max-width:220px;}
/*word-break:break-all;max-width:220px; 文本p自動換行*/
.rotWord{overflow:hidden;}/*清楚浮動*/
/*myself的css*/
.box-body .myWord span{width:40px;height:40px;background:url(images/my.png);float:right;}
.box-body .myWord p{float:right;padding:10px;background:#00ff00;margin-right:10px;border-radius:8px;word-break:break-all;max-width:220px;}/*word-break:break-all;max-width:220px; 文本p自動換行*/
.myWord{overflow:hidden;}/*清楚浮動*/
#box .box-footer{width:760px;height:60px;padding:0 20px;}
.box-footer #input{width:620px;height:60px;background:rgba(0,0,0,.1);border-radius:8px;text-indent:10px;color:#fff;float:left;font-size:18px;padding-left:20px;outline:none;overflow:hidden;border:none;}
.box-footer #btn{width:100px;height:60px;background:blue;border-radius:8px;user-select:none;text-align:center;text-align:center;line-height:60px;float:right;font-size:18px;cursor:pointer;}
</style>
此上就是頁面的代碼咯。
接下來就是比較厲害的後台jsp代碼
package com.xt.robot.action;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.UnsupportedEncodingException;
import java.net.URLEncoder;
import java.net.URL;
import java.net.URLConnection;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
*
* <p>Title:Action </p>
* <p>Description:聊天資訊處理類 </p>
* <p>Company: </p>
* @author 小桃小濤
* @date 2017年8月19日下午7:24:56
*/
@WebServlet("/robot")
public class Action extends HttpServlet{
//extends 繼承HttpServlet類 重寫doGet()和doPost()方法
//key 機器人用的是圖靈機器人的api
public static final String APIKEY="";
//url
public static final String URL="http://www.tuling123.com/openapi/api?key=";
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(req, resp);//在doGet()方法裡調用doPost()方法
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//佈建要求以及響應編碼
req.setCharacterEncoding("UTF-8");
resp.setCharacterEncoding("UTF-8");
//擷取文字框輸入的值
String text = req.getParameter("text");
String result = getResult(text);
resp.getWriter().println(result);
}
public static String getResult(String text){
String INFO = "";
//用來存資料
StringBuilder sb = new StringBuilder();
try {
//解碼器
INFO = URLEncoder.encode(text, "UTF-8");
String getUrl = URL+APIKEY+"&info="+INFO;//字串拼接成url地址
URL queryUrl = new URL(getUrl);
URLConnection conn = queryUrl.openConnection();
BufferedReader br =new BufferedReader(new InputStreamReader(conn.getInputStream(),"UTF-8"));
String temp="";
while ((temp=br.readLine())!=null) {
sb.append(temp);
}
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
return sb.toString();
}
}
以上就是智能機器人的全部代碼咯。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
