master

分支 (1)

管理

管理

master

sentiment-analysis_container
/
Sentimentanalysis.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
	<style>
		body{
			background-color: firebrick;
		}
		#All{
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
		.inputT{
			margin-top: 100px;
			width: 750px;
			height: 200px;
			/* border-left: 1px solid ;
			border-bottom: 1px solid white; */
			border-top: 1px solid white;
			border-bottom: 1px solid white;
			border-left: 0;
			border-right: 0;
			color: brown;
			font-size: 40px;
		}
		#but_area{
			display: flex;
			align-items: center;
			margin-top: 15px;
		}
		#but{
			color: white;
			font-size: 50px;
		}
		#res_area{
			margin-top: 35px;
			height: 300px;
			width: 300px;
			/* border: solid 1px; */
			display: flex;
			align-items: center;
			justify-content: center;
		}
	</style>
	<body>
		<div id="All">
			<input class="inputT" type="text" v-model="value" name="value"/>
			<div id="but_area">
				<svg t="1721048140169" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3728" width="200" height="200"><path d="M239.274 764.996h106.952v88h-106.952zM559.564 554h149.31v128.688h-149.31z" fill="#DBADA2" p-id="3729"></path><path d="M730.436 682.688h-192.45c-11.782 0-21.328 9.528-21.328 21.308v319.996h235.12V703.996c0-11.782-9.562-21.308-21.342-21.308z" fill="#ED5564" p-id="3730"></path><path d="M870.308 308.05c-12.5-12.5-32.75-12.5-45.25 0l-148.184 158.388L783.402 512l88.968-151.998c9.376-17.294 10.438-39.466-2.062-51.952z" fill="#DBADA2" p-id="3731"></path><path d="M516.658 703.996v64h235.12v-64c0-11.782-9.56-21.308-21.342-21.308h-192.45c-11.78 0-21.328 9.526-21.328 21.308z" fill="#DA4453" p-id="3732"></path><path d="M346.584 853.308h-107.108c-11.782 0-21.344 9.562-21.344 21.376v149.308h149.794v-149.308c0.002-11.812-9.546-21.376-21.342-21.376z" fill="#5D9CEC" p-id="3733"></path><path d="M218.132 874.684v21.308h149.794v-21.308c0-11.812-9.546-21.376-21.344-21.376h-107.108c-11.778 0-21.342 9.564-21.342 21.376z" fill="#4A89DC" p-id="3734"></path><path d="M762.214 42.68c-17.686 0-31.998 14.328-31.998 32v202.652a10.674 10.674 0 0 1-10.654 10.672 10.68 10.68 0 0 1-10.688-10.672V32.008c0-17.672-14.312-32-32-32-17.656 0-32 14.328-32 32v245.324a10.652 10.652 0 0 1-10.654 10.672 10.672 10.672 0 0 1-10.656-10.672V74.68c0-17.672-14.344-32-32-32-17.688 0-32 14.328-32 32v202.652a10.68 10.68 0 0 1-10.688 10.672 10.664 10.664 0 0 1-10.656-10.672V160.006c0-17.672-14.328-32-32-32-17.686 0-32 14.328-32 32v298.666c0 88.358 71.624 160.014 159.998 160.014 88.372 0 159.994-71.656 159.994-160.014V74.68c0.002-17.672-14.31-32-31.998-32zM207.696 426.33c-11.782 0-21.328 9.562-21.328 21.344V597h42.67v-149.328c0.002-11.78-9.562-21.342-21.342-21.342zM261.04 383.674c-11.796 0-21.344 9.546-21.344 21.328V597h42.67v-191.998c0-11.78-9.546-21.328-21.326-21.328zM314.366 426.33c-11.782 0-21.328 9.562-21.328 21.344V597h42.656v-149.328c0-11.78-9.546-21.342-21.328-21.342z" fill="#EAC6BB" p-id="3735"></path><path d="M149.948 624.562c-8.328 8.344-6.25 17.75 0 30.188l43.42 91.34 71.016-37.25-84.264-84.278c-8.328-8.312-21.844-8.312-30.172 0z" fill="#DBADA2" p-id="3736"></path><path d="M367.694 469c-11.782 0-21.328 9.546-21.328 21.328v149.358h42.672v-149.358c0-11.78-9.564-21.328-21.344-21.328z" fill="#EAC6BB" p-id="3737"></path><path d="M389.038 708.996c0 55.968-45.376 101.312-101.342 101.312s-101.326-45.344-101.326-101.312c0-55.964 45.358-101.308 101.326-101.308s101.342 45.344 101.342 101.308z" fill="#EAC6BB" p-id="3738"></path><path d="M186.368 597h202.668v111.996H186.368z" fill="#EAC6BB" p-id="3739"></path></svg>
				<div id="but" @click="submit">点击这里</div>
				<svg t="1721048140169" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3728" width="200" height="200"><path d="M239.274 764.996h106.952v88h-106.952zM559.564 554h149.31v128.688h-149.31z" fill="#DBADA2" p-id="3729"></path><path d="M730.436 682.688h-192.45c-11.782 0-21.328 9.528-21.328 21.308v319.996h235.12V703.996c0-11.782-9.562-21.308-21.342-21.308z" fill="#ED5564" p-id="3730"></path><path d="M870.308 308.05c-12.5-12.5-32.75-12.5-45.25 0l-148.184 158.388L783.402 512l88.968-151.998c9.376-17.294 10.438-39.466-2.062-51.952z" fill="#DBADA2" p-id="3731"></path><path d="M516.658 703.996v64h235.12v-64c0-11.782-9.56-21.308-21.342-21.308h-192.45c-11.78 0-21.328 9.526-21.328 21.308z" fill="#DA4453" p-id="3732"></path><path d="M346.584 853.308h-107.108c-11.782 0-21.344 9.562-21.344 21.376v149.308h149.794v-149.308c0.002-11.812-9.546-21.376-21.342-21.376z" fill="#5D9CEC" p-id="3733"></path><path d="M218.132 874.684v21.308h149.794v-21.308c0-11.812-9.546-21.376-21.344-21.376h-107.108c-11.778 0-21.342 9.564-21.342 21.376z" fill="#4A89DC" p-id="3734"></path><path d="M762.214 42.68c-17.686 0-31.998 14.328-31.998 32v202.652a10.674 10.674 0 0 1-10.654 10.672 10.68 10.68 0 0 1-10.688-10.672V32.008c0-17.672-14.312-32-32-32-17.656 0-32 14.328-32 32v245.324a10.652 10.652 0 0 1-10.654 10.672 10.672 10.672 0 0 1-10.656-10.672V74.68c0-17.672-14.344-32-32-32-17.688 0-32 14.328-32 32v202.652a10.68 10.68 0 0 1-10.688 10.672 10.664 10.664 0 0 1-10.656-10.672V160.006c0-17.672-14.328-32-32-32-17.686 0-32 14.328-32 32v298.666c0 88.358 71.624 160.014 159.998 160.014 88.372 0 159.994-71.656 159.994-160.014V74.68c0.002-17.672-14.31-32-31.998-32zM207.696 426.33c-11.782 0-21.328 9.562-21.328 21.344V597h42.67v-149.328c0.002-11.78-9.562-21.342-21.342-21.342zM261.04 383.674c-11.796 0-21.344 9.546-21.344 21.328V597h42.67v-191.998c0-11.78-9.546-21.328-21.326-21.328zM314.366 426.33c-11.782 0-21.328 9.562-21.328 21.344V597h42.656v-149.328c0-11.78-9.546-21.342-21.328-21.342z" fill="#EAC6BB" p-id="3735"></path><path d="M149.948 624.562c-8.328 8.344-6.25 17.75 0 30.188l43.42 91.34 71.016-37.25-84.264-84.278c-8.328-8.312-21.844-8.312-30.172 0z" fill="#DBADA2" p-id="3736"></path><path d="M367.694 469c-11.782 0-21.328 9.546-21.328 21.328v149.358h42.672v-149.358c0-11.78-9.564-21.328-21.344-21.328z" fill="#EAC6BB" p-id="3737"></path><path d="M389.038 708.996c0 55.968-45.376 101.312-101.342 101.312s-101.326-45.344-101.326-101.312c0-55.964 45.358-101.308 101.326-101.308s101.342 45.344 101.342 101.308z" fill="#EAC6BB" p-id="3738"></path><path d="M186.368 597h202.668v111.996H186.368z" fill="#EAC6BB" p-id="3739"></path></svg>
			</div>
			<div id="res_area">
				<img :src="img" alt="" />
			</div>
		</div>
	</body>
	<script>
		var demo = new Vue({
		    el: "#All",
		    data: {
		        end_res: null,
				img: "./images/neu0.png",
				pos:["./images/pos0.png","./images/pos1.png","./images/pos2.png"],
				neg:["./images/neg0.png","./images/neg1.png","./images/neg2.png"]
		    },
		    methods: {
		        submit: function() {
		            var value = document.getElementsByClassName('inputT')[0].value;
		            console.log(value);
		            fetch('http://192.168.199.100:5000/Computed', {
		                method: 'POST',
		                headers: {
		                    'Content-Type': 'application/json'
		                },
		                body: JSON.stringify({ value: value })
		            })
		            .then(response => response.json())
		            .then(data => {
		                console.log(data);
		                this.end_res = data; // 使用 Vue 的方法来更新数据
						 this.change_src(this.end_res)

		            })
		            .catch(error => {
		                console.error('Error:', error);
		            });
		        },
				change_src:function(end_res){
					if(end_res==1){
						var randomInt = this.getRandomIntInclusive(0, 2);
						this.img = this.pos[randomInt]
					}
					else if(end_res==2){
						var randomInt = this.getRandomIntInclusive(0, 2);
						this.img = this.neg[randomInt]
					}
					else{
						this.img = "./images/neu0.png"
					}
				},
				getRandomIntInclusive:function(min, max) {
				  min = Math.ceil(min);
				  max = Math.floor(max);
				  return Math.floor(Math.random() * (max - min + 1)) + min;
				}
		    }
		});

	</script>
</html>