Merge pull request #2170 from xinnan-tech/fix

fix:增加检测到手机浏览器跳转h5页面，修改h5页面图标

docs/huoshan-streamTTS-voice-cloning.md

@@ -0,0 +1,29 @@
+# 火山双向流式TTS+声音克隆配置教程
+单模块部署下，使用火山引擎双向流式语音合成服务的同时进行声音克隆，支持WebSocket协议流式调用。
+### 1.开通火山引擎服务
+访问 https://console.volcengine.com/speech/app  在应用管理创建应用，勾选语音合成大模型和声音复刻大模型，左边列表点击声音复刻大模型后下滑获得App Id，Access Token，Cluster ID以及声音ID(S_xxxxx)
+### 2.克隆音色
+克隆音色请参照教程 https://github.com/104gogo/huoshan-voice-copy 
+
+准备一段 10-30 秒的音频文件（.wav格式）添加到克隆的项目中，将平台获得的密钥填入```uploadAndStatus.py```和```tts_http_demo.py```
+
+在uploadAndStatus.py中，将 audio_path=修改成自己的.wav文件名称
+```python
+train(appid=appid, token=token, audio_path=r".\audios\xiaohe.wav", spk_id=spk_id)
+```
+
+运行以下命令生成test_submit.mp3，点击播放试听克隆效果
+
+```python
+python uploadAndStatus.py
+python tts_http_demo.py
+```
+回到火山引擎控制台页面，刷新可以看到声音复刻详情的状态是复刻成功。
+### 3.填写配置文件
+将火山引擎服务申请到的密钥填入.config.yaml的HuoshanDoubleStreamTTS配置文件中
+
+修改 resource_id的参数为``` volc.megatts.default``` 
+（参考官方文档 https://www.volcengine.com/docs/6561/1329505）
+speaker的参数填入声音ID(S_xxxxx)
+
+启动服务，唤醒小智发出的声音是克隆的音色即成功。

main/manager-web/.env.development

@@ -1 +1,5 @@
-VUE_APP_API_BASE_URL=/xiaozhi
+VUE_APP_API_BASE_URL=/xiaozhi
+#1.如需web后台适应手机浏览器，请先启动manager-api，得到服务端地址（http://局域网ip:8002/xiaozhi）
+#2.在manager-mobile里的.env中，将VITE_SERVER_BASEURL修改成自己的服务端地址，然后运行pnpm dev:h5得到h5页面地址，再将其填入下方的VUE_APP_H5_URL
+#3.此时手机浏览器访问web页面，即可跳转至适应手机浏览器的h5页面
+VUE_APP_H5_URL=

main/manager-web/.env.production

@@ -1,4 +1,4 @@
 VUE_APP_API_BASE_URL=/xiaozhi
 VUE_APP_PUBLIC_PATH=/
 # 是否开启CDN
-VUE_APP_USE_CDN=false
+VUE_APP_USE_CDN=false

main/manager-web/src/App.vue

@@ -60,6 +60,12 @@ export default {
     };
   },
   mounted() {
+    // 检测是否为移动设备且VUE_APP_H5_URL不为空，如果两个条件都满足则跳转到H5页面
+    if (this.isMobileDevice() && process.env.VUE_APP_H5_URL) {
+      window.location.href = process.env.VUE_APP_H5_URL;
+      return;
+    }
+    
     // 只有在启用CDN时才添加相关事件和功能
     if (this.isCDNEnabled) {
       // 添加全局快捷键Alt+C用于显示缓存查看器
@@ -101,6 +107,11 @@ export default {
         this.showCacheViewer = true;
       }
     },
+    isMobileDevice() {
+      // 检测是否为移动设备的函数
+      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+    },
+    
     async checkServiceWorkerStatus() {
       // 检查Service Worker是否已注册
       if ('serviceWorker' in navigator) {