First, look at the interface of intelligent robot chatting with people.
On the idea of interface construction: 1. The first is the layout of the page, using HTML tags to build
<body>
<!--head start-->
<!--end Head-->
<!--content Start-->
<div id= "box" >
<div class= "Box-head" >
<span class= "H-span" > Seven Seconds of Memory </span>
</div>
<div class= "Box-body" >
<div class= "Rotword" >
<span></span>
<p>helo long time no see. </p>
</div>
</div>
<div class= "Box-footer" >
<input type= "text" id= "input" autocomplete= "off" >
<!--autocomplete cancel the input box automatically prompts-->
<div id= "BTN" onclick= "Action ()" > Send </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 () {
Determine if the input text box has a value
if (text.val () = = "" | | text.val== "") {
Intelligent optimization
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);
Language label AutoPlay Auto Play
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 ();
}
Keyboard Carriage Return Event
$ (document). KeyDown (function (event) {
if (event.keycode==13) {
Action ();
}
});
</script>
<!--end Js-->
</body>
2. Building the CSS style of the page
<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;}
Set scroll bar after text in/*overflow:auto;div is exceeded
/* Manually set the scroll bar style * *
. 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;}
/* Custom scroll bar style * *
* Css*/of Robot
. 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; Text P Automatic Wrapping * *
. Rotword{overflow:hidden;} /* Clear FLOAT * *
/*myself's 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; Text P Automatic Wrapping * *
. Myword{overflow:hidden;} /* Clear FLOAT * *
#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>
This is the page code slightly.
Next is the more powerful background JSP code
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: Chat Information Processing class </p>
* <p>company: </p>
* @author Little Peach Tao
* @date August 19, 2017 7:24:56
*/
@WebServlet ("/robot")
public class Action extends httpservlet{
Extends inheritance HttpServlet class overrides Doget () and Dopost () methods
//key robots are using the Turing machine Human 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);//Call DoPost () method in Doget () method
@Override
protected void DoPost (HttpServletRequest req, HttpServletResponse resp) throws Servletexception, IOException {
// Set request and response encoding
req.setcharacterencoding ("UTF-8");
resp.setcharacterencoding ("UTF-8");
Get the value of the text box input
String Text = req.getparameter ("text");
String result = GetResult (text);
Resp.getwriter (). println (result);
}
public static string GetResult (string text) {
String INFO = "";
Used to save data
StringBuilder sb = new StringBuilder ();
try {
Decoder
INFO = Urlencoder.encode (text, "UTF-8");
String getUrl = url+apikey+ "&info=" +info;//string concatenation into URL address
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 ();
}
}
The above is the entire code of the intelligent robot.
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
