YanceyOfficial/robot.html

## robot.html
<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Robot</title>
  <style>
    #feedback{
      display: flex;
      flex-direction: column;
      width: 600px;
      min-height: 800px;
      padding: 24px;
      box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.5);
    }
    .sender{
            clear:both;
        }
        .sender div:nth-of-type(1){
            float: left;
        }
        .sender div:nth-of-type(2){
            background-color: aquamarine;
            float: left;
            margin: 0 20px 10px 15px;
            padding: 10px 10px 10px 0px;
            border-radius:7px;
        }

        .receiver div:first-child img,
        .sender div:first-child img{
            width:50px;
            height: 50px;
        }

        .receiver{
            clear:both;
        }
        .receiver div:nth-child(1){
            float: right;
        }
        .receiver div:nth-of-type(2){
            float:right;
            background-color: gold;
            margin: 0 10px 10px 20px;
            padding: 10px 0px 10px 10px;
            border-radius:7px;
        }

        .left_triangle{
            height:0px;
            width:0px;
            border-width:8px;
            border-style:solid;
            border-color:transparent aquamarine transparent transparent;
            position: relative;
            left:-16px;
            top:3px;
        }

        .right_triangle{
            height:0px;
            width:0px;
            border-width:8px;
            border-style:solid;
            border-color:transparent transparent transparent gold;
            position: relative;
            right:-16px;
            top:3px;
        }

        .txt {
          display: inline-block;
          max-width: 200px;
        }
  </style>
</head>

<div id="feedback"></div>
<input id="input" type="text">
<button id="submit">Submit</button>

<body>
  <script>
    const input = document.querySelector('#input');
    const submit = document.querySelector('#submit');
    const feedback = document.querySelector('#feedback');

    const constant = {
      api: 'http://openapi.tuling123.com/openapi/api/v2',
      key: '5073e08a7b964f9db2368db8d602495e',
      me: 'https://yancey-assets.oss-cn-beijing.aliyuncs.com/_Users_licaifan_Desktop_11532336786_.pic_hd.jpg',
      you: 'https://yancey-assets.oss-cn-beijing.aliyuncs.com/static/logo_avatar.jpg?x-oss-process=image/format,webp',
    };


    submit.addEventListener('click', function () {
      const val = input.value;
      const me =
        `<div class="receiver">
          <div>
            <img src="${constant.me}">
          </div>
          <div>
            <div class="right_triangle"></div>
            <span class="txt">${val}</span>
          </div>
        </div>`
      feedback.insertAdjacentHTML('beforeend', me);
      submitTxt(val);
    });

    const getHXR = () => {
      let xhr = null;
      if (window.XMLHttpRequest) {
        xhr = new window.XMLHttpRequest();
      } else if (window.ActiveXObject) {
        try {
          xhr = new window.ActiveXObject('Msxml2.XMLHTTP');
        } catch (e) {
          try {
            xhr = new window.ActiveXObject('Microsoft.XMLHTTP');
          } catch (error) {
            console.log(`${error}your browser is not support ajax`);
          }
        }
      }
      return xhr;
    };


    const httpClient = (url, method, data) => new Promise((resolve, reject) => {
      const client = getHXR();
      client.open(method, url);
      client.addEventListener('readystatechange', function () {
        if (this.readyState !== 4) {
          return;
        }
        if (this.status === 200) {
          resolve(this.response);
        } else {
          reject(new Error(this.statusText));
        }
      });
      client.responseType = 'json';
      client.setRequestHeader('Accept', 'application/json');
      client.send(method === 'POST' ? JSON.stringify(data) : null);
    });

    function submitTxt(val) {
      httpClient(constant.api, 'POST', {
        reqType: 0,
        perception: {
          inputText: {
            text: val,
          },
        },
        userInfo: {
          apiKey: constant.key,
          userId: 'Sayaka',
        }
      }).then((res) => {
        const you =
          `<div class="sender">
            <div>
              <img src="${constant.you}">
            </div>
            <div>
              <div class="left_triangle"></div>
              <span class="txt">${res.results[0].values.text}</span>
            </div>
          </div>`
        feedback.insertAdjacentHTML('beforeend', you);
      }).catch((error) => {
        console.log(error);
      });
    }
  </script>
</body>

</html>
	<!doctype html>
	<html>

	<head>
	<meta charset="UTF-8">
	<title>Robot</title>
	<style>
	#feedback{
	display: flex;
	flex-direction: column;
	width: 600px;
	min-height: 800px;
	padding: 24px;
	box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.5);
	}
	.sender{
	clear:both;
	}
	.sender div:nth-of-type(1){
	float: left;
	}
	.sender div:nth-of-type(2){
	background-color: aquamarine;
	float: left;
	margin: 0 20px 10px 15px;
	padding: 10px 10px 10px 0px;
	border-radius:7px;
	}

	.receiver div:first-child img,
	.sender div:first-child img{
	width:50px;
	height: 50px;
	}

	.receiver{
	clear:both;
	}
	.receiver div:nth-child(1){
	float: right;
	}
	.receiver div:nth-of-type(2){
	float:right;
	background-color: gold;
	margin: 0 10px 10px 20px;
	padding: 10px 0px 10px 10px;
	border-radius:7px;
	}

	.left_triangle{
	height:0px;
	width:0px;
	border-width:8px;
	border-style:solid;
	border-color:transparent aquamarine transparent transparent;
	position: relative;
	left:-16px;
	top:3px;
	}

	.right_triangle{
	height:0px;
	width:0px;
	border-width:8px;
	border-style:solid;
	border-color:transparent transparent transparent gold;
	position: relative;
	right:-16px;
	top:3px;
	}

	.txt {
	display: inline-block;
	max-width: 200px;
	}
	</style>
	</head>

	<div id="feedback"></div>
	<input id="input" type="text">
	<button id="submit">Submit</button>

	<body>
	<script>
	const input = document.querySelector('#input');
	const submit = document.querySelector('#submit');
	const feedback = document.querySelector('#feedback');

	const constant = {
	api: 'http://openapi.tuling123.com/openapi/api/v2',
	key: '5073e08a7b964f9db2368db8d602495e',
	me: 'https://yancey-assets.oss-cn-beijing.aliyuncs.com/_Users_licaifan_Desktop_11532336786_.pic_hd.jpg',
	you: 'https://yancey-assets.oss-cn-beijing.aliyuncs.com/static/logo_avatar.jpg?x-oss-process=image/format,webp',
	};


	submit.addEventListener('click', function () {
	const val = input.value;
	const me =
	`<div class="receiver">
	<div>
	<img src="${constant.me}">
	</div>
	<div>
	<div class="right_triangle"></div>
	<span class="txt">${val}</span>
	</div>
	</div>`
	feedback.insertAdjacentHTML('beforeend', me);
	submitTxt(val);
	});

	const getHXR = () => {
	let xhr = null;
	if (window.XMLHttpRequest) {
	xhr = new window.XMLHttpRequest();
	} else if (window.ActiveXObject) {
	try {
	xhr = new window.ActiveXObject('Msxml2.XMLHTTP');
	} catch (e) {
	try {
	xhr = new window.ActiveXObject('Microsoft.XMLHTTP');
	} catch (error) {
	console.log(`${error}your browser is not support ajax`);
	}
	}
	}
	return xhr;
	};


	const httpClient = (url, method, data) => new Promise((resolve, reject) => {
	const client = getHXR();
	client.open(method, url);
	client.addEventListener('readystatechange', function () {
	if (this.readyState !== 4) {
	return;
	}
	if (this.status === 200) {
	resolve(this.response);
	} else {
	reject(new Error(this.statusText));
	}
	});
	client.responseType = 'json';
	client.setRequestHeader('Accept', 'application/json');
	client.send(method === 'POST' ? JSON.stringify(data) : null);
	});

	function submitTxt(val) {
	httpClient(constant.api, 'POST', {
	reqType: 0,
	perception: {
	inputText: {
	text: val,
	},
	},
	userInfo: {
	apiKey: constant.key,
	userId: 'Sayaka',
	}
	}).then((res) => {
	const you =
	`<div class="sender">
	<div>
	<img src="${constant.you}">
	</div>
	<div>
	<div class="left_triangle"></div>
	<span class="txt">${res.results[0].values.text}</span>
	</div>
	</div>`
	feedback.insertAdjacentHTML('beforeend', you);
	}).catch((error) => {
	console.log(error);
	});
	}
	</script>
	</body>

	</html>