<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<script language=JavaScript src="ajax.js" type=text/javascript></script>
		<title>Vanika</title>
		<meta name="description" content="Vanika">
		<script type="text/javascript" src="./libgif.js"></script>
	</head>
	<style>
			
		/* the superGifCanvas elements can be styled if you need to*/
		/*
		.superGifCanvas {
			width:100%;
		}
		*/
		* {
		    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		}
		.guierrormessage {
			color: #FF0000;
		}
		.guioption{
			width: 280px;
			padding: 0.2em;
			font-size: 1em;
			display: inline-block;
			box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1) inset;
		}
		#giferrormessage {
			display: inline-block;
		}
		#newgifbutton {
		font-size: 1.0rem;
		padding: 0.5rem 0.6em;
		background: #69c773;
		border-bottom: 1px solid #498b50;
		color: white;
		-webkit-font-smoothing: antialiased;
		font-weight: bold;
		margin: 0;
		height: 35px;
		text-align: center;
		}
		#texttospeakinput {
			width:96%;
		}
		.superGifCanvas{
			max-width: 100%; 
		}
	</style>
	<body>
	<script type="text/javascript">
	function animasi(form) {
		answer(form.say.value);
	}

	var recognition = new webkitSpeechRecognition();
	recognition.continuous = false;
	recognition.lang = 'id-ID';

	//recognition.interimResults = true;
	function start(form){
		recognition.onstart = function(event) {
			form.say.value = "";
			document.getElementById("loadingstat").innerHTML="<span style=\"font-family: Tahoma; font-size:12; background-color: #FF0000; color: #FFFFFF; align: right\"><blink>&nbsp;Listening your voice...&nbsp;</blink></span>";
		}
		recognition.onresult = function(event) { 
			console.log(event);
			form.say.value = "";
			for(var i=0; i<event.results.length; i++){
				form.say.value = form.say.value + event.results[i][0].transcript;
			}
		}		
		recognition.onend = function() {
			recognizing = false;
			if(form.say.value!=="") answer(form.say.value);
			document.getElementById("loadingstat").innerHTML="";
		};
		recognition.start();
	}	
	</script>
	<center>

        <label>Tuliskan pertanyaan Anda:</label>
    
        <form name="ask" onsubmit="return false">
            <input type='text' name='say' autofocus /><br>
            <input type='button' value='Kirim' name='submit' class='button' onclick='animasi(this.form)'/> 
			<input id="bStart" type="button" value="Suara" onclick="start(this.form);" />
        </form>
		
	<div id="ttsoptions">
		<div style="visibility:hidden;">
			<label>Voice:</label>
			<select id="voiceSelecter" class="guioption"></select>
		</div>
		<div>
			<input type="hidden" id="texttospeakinput" value="<?php echo $answer; ?>" class="guioption"  onClick="this.setSelectionRange(0, this.value.length)" >
			<div id="texterrormessage" class="guierrormessage"></div>
		</div>
		<div>
			<input type="hidden" id="gifurlinput" value="https://i.imgur.com/ork8hoP.gif" class="guioption" onClick="this.setSelectionRange(0, this.value.length)">
			<div id="giferrormessage" class="guierrormessage"></div>
		</div>
	</div>
	<div id="instruction"></div>
	<div>
			<div id="imagecontainer">
				<img id="exampleimg" src="bot.gif" rel:animated_src="bot.gif" rel:auto_play="0" />
			</div>

	</div>
	<script type="text/javascript" src="./example.js"></script>
	<div id="loadingstat" style="position: absolute; top: 5px; left: 5px; width: 200px; height: 16px; z-index: 3"></div>
	</center>
</div>
</body>
</html>
