From 835a98631522c6ff449310455f76a59e1cb092c7 Mon Sep 17 00:00:00 2001
From: "yanyuxiyangzk@126.com" <yanyuxiyangzk@126.com>
Date: Sat, 13 Apr 2024 19:11:50 +0800
Subject: [PATCH] =?UTF-8?q?funasr=E5=AE=9E=E6=97=B6=E8=AF=AD=E9=9F=B3?=
 =?UTF-8?q?=E5=89=8D=E7=AB=AF=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 funasr/readme.md      |  7 ++++
 html/readme.md        |  1 +
 html/static/echo.html | 80 +++++++++++++++++++++----------------------
 html/static/main.js   |  2 ++
 4 files changed, 50 insertions(+), 40 deletions(-)
 create mode 100644 html/readme.md

diff --git a/funasr/readme.md b/funasr/readme.md
index 2d4aca2..0b3292e 100644
--- a/funasr/readme.md
+++ b/funasr/readme.md
@@ -1,3 +1,10 @@
 1、启动语言识别服务端
+创建虚拟环境
+conda create -n funasr
+conda activate funasr
+安装依赖库
+
+python funasr_wss_server.py --port 10095
+或者
 python funasr_wss_server.py --host "0.0.0.0" --port 10197 --ngpu 0 
 
diff --git a/html/readme.md b/html/readme.md
new file mode 100644
index 0000000..7edded7
--- /dev/null
+++ b/html/readme.md
@@ -0,0 +1 @@
+在浏览器中打开 samples/html/static/index.html，输入ASR服务器地址，支持麦克风输入，也支持文件输入
\ No newline at end of file
diff --git a/html/static/echo.html b/html/static/echo.html
index 44eed2e..6abef57 100644
--- a/html/static/echo.html
+++ b/html/static/echo.html
@@ -17,7 +17,7 @@
       <div class="form-group">
         <p>input text</p>
 
-		<textarea cols="2" rows="3" style="width:600px;height:50px;" class="form-control" id="message">test</textarea>
+		<textarea cols="2" rows="3" style="width:600px;height:50px;" class="form-control" id="message"></textarea>
       </div>
       <button type="submit" class="btn btn-default">Send</button>
     </form>
@@ -33,9 +33,9 @@
 	<div class="div_class_recordControl">
 		asr服务器地址(必填):
 		<br>
-		<input id="wssip" type="text" onchange="addresschange()" style="width: 500px;" value="wss://127.0.0.1:10197/"/>
+		<input id="wssip" type="text" onchange="addresschange()" style="width: 500px;" value="wss://127.0.0.1:10095/"/>
 		<br>
-		<a id="wsslink" style="display: block;"  href="#" onclick="window.open('https://127.0.0.1:10197/', '_blank')"><div id="info_wslink">点此处手工授权wss://127.0.0.1:10095/</div></a>
+		<a id="wsslink" style="display: none;"  href="#" onclick="window.open('https://127.0.0.1:10095/', '_blank')"><div id="info_wslink">点此处手工授权wss://127.0.0.1:10095/</div></a>
 		<br>
 	<br>  
 	<div  style="border:2px solid #ccc;display: none;">
@@ -46,7 +46,7 @@
 
 		</div>
 		
-		<br>
+		
 		 <div id="mic_mode_div" style="border:2px solid #ccc;display:none;">
 		选择asr模型模式:<br/>
 
@@ -62,17 +62,17 @@
 		  <input type="file" id="upfile">
 
 		</div>
-		<br>
+		
 		<div  style="border:2px solid #ccc;display: none;">
 			热词设置(一行一个关键字，空格隔开权重,如"阿里巴巴 20")：
-			<br>
-			<textarea rows="3"  id="varHot"  style=" width: 100%;height:100%" >阿里巴巴 20&#13;hello world 40</textarea>
-			<br>
+			
+			<textarea rows="1"  id="varHot"  style=" width: 100%;height:auto" >阿里巴巴 20&#13;hello world 40</textarea>
+			
 			</div>
-		语音识别结果显示：
+		<div style="display: none;">语音识别结果显示：</div>
 		<br>
 		
-		<textarea rows="10"  id="varArea" readonly="true" style=" width: 100%;height:100%" ></textarea>
+		<textarea rows="10"  id="varArea" readonly="true" style=" width: 100%;height:auto;display: none;" ></textarea>
 		<br>
 		<div id="info_div">请点击开始</div>
 		<div class="div_class_buttons">
@@ -82,7 +82,7 @@
 
 		</div>
 		
-		<audio id="audio_record" type="audio/wav" controls style="margin-top: 12px; width: 100%;"></audio>
+		<audio id="audio_record" type="audio/wav" controls style="margin-top: 2px; width: 100%;display: none;"></audio>
 	</div>
 </div>
 
@@ -92,37 +92,37 @@
 </body>
 <script type="text/javascript" charset="utf-8">
 
-	// $(document).ready(function() {
-	//   var host = window.location.hostname
-	//   var ws = new WebSocket("ws://"+host+":8000/humanecho");
-	//   //document.getElementsByTagName("video")[0].setAttribute("src", aa["video"]);
-	//   ws.onopen = function() {
-	// 	console.log('Connected');
-	//   };
-	//   ws.onmessage = function(e) {
-	// 	console.log('Received: ' + e.data);
-	// 	data = e
-	// 	var vid = JSON.parse(data.data); 
-	// 	console.log(typeof(vid),vid)
-	// 	//document.getElementsByTagName("video")[0].setAttribute("src", vid["video"]);
+	$(document).ready(function() {
+	  var host = window.location.hostname
+	  var ws = new WebSocket("ws://"+host+":8000/humanecho");
+	  //document.getElementsByTagName("video")[0].setAttribute("src", aa["video"]);
+	  ws.onopen = function() {
+		console.log('Connected');
+	  };
+	  ws.onmessage = function(e) {
+		console.log('Received: ' + e.data);
+		data = e
+		var vid = JSON.parse(data.data); 
+		console.log(typeof(vid),vid)
+		//document.getElementsByTagName("video")[0].setAttribute("src", vid["video"]);
 		
-	//   };
-	//   ws.onclose = function(e) {
-	// 	console.log('Closed');
-	//   };
+	  };
+	  ws.onclose = function(e) {
+		console.log('Closed');
+	  };
 
-	//   flvPlayer = mpegts.createPlayer({type: 'flv', url: "http://"+host+":8080/live/livestream.flv", isLive: true, enableStashBuffer: false});
-	//   flvPlayer.attachMediaElement(document.getElementById('video_player'));
-	//   flvPlayer.load();
-	//   flvPlayer.play();
+	  flvPlayer = mpegts.createPlayer({type: 'flv', url: "http://"+host+":8080/live/livestream.flv", isLive: true, enableStashBuffer: false});
+	  flvPlayer.attachMediaElement(document.getElementById('video_player'));
+	  flvPlayer.load();
+	  flvPlayer.play();
 
-	//   $('#echo-form').on('submit', function(e) {
-	// 	e.preventDefault();
-	// 	var message = $('#message').val();
-	// 	console.log('Sending: ' + message);
-	// 	ws.send(message);
-	// 	$('#message').val('');
-	//   });
-	// });
+	  $('#echo-form').on('submit', function(e) {
+		e.preventDefault();
+		var message = $('#message').val();
+		console.log('Sending: ' + message);
+		ws.send(message);
+		$('#message').val('');
+	  });
+	});
 </script>
  </html>
\ No newline at end of file
diff --git a/html/static/main.js b/html/static/main.js
index 514ce41..ca54ffe 100644
--- a/html/static/main.js
+++ b/html/static/main.js
@@ -362,8 +362,10 @@ function getJsonMessage( jsonMsg ) {
 		rec_text=rec_text+rectxt; //.replace(/ +/g,"");
 	}
 	var varArea=document.getElementById('varArea');
+	var varArea_message=document.getElementById('message');
 	
 	varArea.value=rec_text;
+	varArea_message.value=rec_text;
 	console.log( "offline_text: " + asrmodel+","+offline_text);
 	console.log( "rec_text: " + rec_text);
 	if (isfilemode==true && is_final==false){