feat: add speech & adjusting ui

[zaiMoe]

feature

1. 调整 ui 布局，让 pc 和 移动端相似
2. 增加语音功能

ui 布局调整说明

1. 将之前放在下边的按钮放到上面了，感觉使用频率不高，所以让出来给语音功能
2. 将 setting 放到了右上角

语音说明

默认配置

通过配置 .env 的 VITE_ENABLE_SPEECH=true 可以配置启动语音，默认情况下，语音方案采用 Web Speech API， 该方案仅支持 pc 端的浏览器。如果有多端的需求，可以使用微软的语音服务。

微软的语音服务配置

1. 参考此教程， 获取 Subscription Key 和对应的 region。
2. 配置到 service/.env 中的 AZURE_SUBSCRIPTION_KEY 和 AZURE_SPEECH_REGION
3. 重新部署，然后起飞！

[LuckyWang6]

如果语音发送和接受是类似于微信QQ语音那种形式，可能会更符合语音聊天啊哈哈

[zaiMoe]

如果语音发送和接受是类似于微信QQ语音那种形式，可能会更符合语音聊天啊哈哈

@luckywangxi 如果做一个聊天形式的也不错哈哈哈，当时只是想扩展一个语音功能语音功能来玩玩

[zaiMoe]

补充一下 Azure 的好处，他的语音服务始终免费（目前），提供了 pollfill 的接入方式，所以开发起来，参考 Web Speech API 即可，上手难度低

[zaiMoe]

@Chanzhaoyu 有空看看这个方案能合入不。 有增加了开关，可以关闭，这样就不会影响原本的功能

[Andy-qinyuhai]

@zaiMoe 我试着合并到我的分支，docker编译没有成功

[zaiMoe]

@zaiMoe 我试着合并到我的分支，docker编译没有成功

@Andy-qinyuhai 重新试一下，解决冲突的时候改错了一个代码。

这个是在我 fork 的仓库中的功能，单独抽离出来，解决冲突后还没重新编译过

[Andy-qinyuhai]

我重新打包了docker镜像没有再报错，但打开后页面布局调整了，但并没有语音的界面，设置中也没有出现语音的设置界面，我已经设置VITE_ENABLE_SPEECH=true

[zaiMoe]

我重新打包了docker镜像没有再报错，但打开后页面布局调整了，但并没有语音的界面，设置中也没有出现语音的设置界面，我已经设置VITE_ENABLE_SPEECH=true

@Andy-qinyuhai .env 文件的其他环境变量正常吗？ 从你的接入来看是代码应该是正常了。 我这边通过 docker-compose 编译正常的，不过我的 docker-compose 是放在根目录下的

[zaiMoe]

我重新打包了docker镜像没有再报错，但打开后页面布局调整了，但并没有语音的界面，设置中也没有出现语音的设置界面，我已经设置VITE_ENABLE_SPEECH=true

@Andy-qinyuhai 我自己重新部署了一次，是正常的。 你看看docker编译的时候，有没有包含 .env 文件

[Andy-qinyuhai]

@zaiMoe 我确认已经包含了.env文件。 我从Chanzhaoyu:main拉取了最新的代码，然后合并了你的feat-add-speech这个分支，使用github actions进行编译打包docker镜像，过程都正常没有报错。但是打开后还是如上图

[zaiMoe]

@zaiMoe 我确认已经包含了.env文件。 我从Chanzhaoyu:main拉取了最新的代码，然后合并了你的feat-add-speech这个分支，使用github actions进行编译打包docker镜像，过程都正常没有报错。但是打开后还是如上图

@Andy-qinyuhai 我试了你的 feat-add-speech-dev 分支代码，跑起来没什么问题。 你可以直接将这里改为 true，然后试试。

https://github.com/Andy-qinyuhai/chatgpt-web/blob/feat-add-speech-dev/src/store/modules/speech/helper.ts#L4

[fengjiajun169]

我在本地部署也这样，VITE_ENABLE_SPEECH='false'聊天界面正常，改成VITE_ENABLE_SPEECH='true'输入框没了，语音的按钮也没有，我是通过npm start && npm run preview本地测试的

[fengjiajun169]

我在本地部署也这样，VITE_ENABLE_SPEECH='false'聊天界面正常，改成VITE_ENABLE_SPEECH='true'输入框没了，语音的按钮也没有，我是通过npm start && npm run preview本地测试的

第一张图是VITE_ENABLE_SPEECH='true'的，第二张图是VITE_ENABLE_SPEECH='false'的

[fengjiajun169]

我在本地部署也这样，VITE_ENABLE_SPEECH='false'聊天界面正常，改成VITE_ENABLE_SPEECH='true'输入框没了，语音的按钮也没有，我是通过npm start && npm run preview本地测试的

第一张图是VITE_ENABLE_SPEECH='true'的，第二张图是VITE_ENABLE_SPEECH='false'的

加载的时候报了TypeError: Cannot read properties of undefined (reading 'speechSetting')，不知道是不是这个原因

[zhangwen9229]

@fengjiajun169 VITE_ENABLE_SPEECH=true, 是不是 true 加了单引号，所以有问题？

[fengjiajun169]

@fengjiajun169 VITE_ENABLE_SPEECH=true, 是不是 true 加了单引号，所以有问题？

应该不是，如果不加单引号这个配置不生效，而且我在代码里写死也一样

[zaiMoe]

@fengjiajun169 我看了下这个错误，是在使用 web speech api 时不同系统的 chrome 获取的语音包不同造成的，修改了一下异常的部分。（抱歉，我一直用的 微软语音，没注意到这个问题）

然后 VITE_ENABLE_SPEECH=true 是不需要加引号的。

[fengjiajun169]

@fengjiajun169 我看了下这个错误，是在使用 web speech api 时不同系统的 chrome 获取的语音包不同造成的，修改了一下异常的部分。（抱歉，我一直用的 微软语音，没注意到这个问题）

然后 VITE_ENABLE_SPEECH=true 是不需要加引号的。

现在可以了，感谢！

[Andy-qinyuhai]

@zaiMoe 感谢！我也可以用了。我尝试接入了微软的语音，是否只需要填密钥&区域，其它都不用设置？但目前发现有两处小bug: 1、手机端浏览器为Chrome, 连续对话时，第一次可以自动播放chatgpt回答的语音，第二次开始就不会播放语音，点击小喇叭也无法播放。但在PC端的Chrome浏览器中就没有这个问题。 2、语音设置页面第一次打开时正常，待使用1次语音后出现了异常： 这是PC端的页面 这是手机端的页面： 第一次打开的页页：

[zaiMoe]

@zaiMoe 感谢！我也可以用了。我尝试接入了微软的语音，是否只需要填密钥&区域，其它都不用设置？但目前发现有两处小bug: 1、手机端浏览器为Chrome, 连续对话时，第一次可以自动播放chatgpt回答的语音，第二次开始就不会播放语音，点击小喇叭也无法播放。但在PC端的Chrome浏览器中就没有这个问题。 2、语音设置页面第一次打开时正常，待使用1次语音后出现了异常： 这是PC端的页面 这是手机端的页面：第一次打开的页页：

@Andy-qinyuhai

1. 微软语音只需要再填密钥&区域就行了
2. 原生 web speech api 在移动端问题确实比较多，我对移动端到开发不熟悉，调试起来比较难，所以建议换成微软语音。
3. 微软语音我自己的测试：
   • edge： 语音输入/输出正常
   • 微信浏览器： 语音输入正常，输出异常
   • 夸克：完全不兼容
   • miui自带浏览器：输出正常，输入异常 目前在看怎么查 微信浏览器 的问题

[Pandoxie]

这种功能给有娃的用很完美哈哈哈。搞了个siri接入chatgpt还是很傻，给你点赞。对学语言也很友好

[lqs1920]

这个 PR会合并到main分支吗？

[zaiMoe]

这个 PR会合并到main分支吗？

@lqs1920 我也不知道哈哈哈，可以单独部署试试

[kotobuki09]

The website cannot be loaded in the version with TTS feature while I implement it on the railway even though I use the same setup for the main repo and it's working alright there.

[Pandoxie]

@zaiMoe 感谢开发插件。 今天我本地部署了下，发现一些问题。 1， 在打开页面之后，语音选择一切正常是azure的语音组，然后点击播放语音也很正常。 2， 连续对话也是正常的，我文字输入，然后他就声音传出来（azure的语音还是有点傻，中文语音说英文土了吧唧，英文语音中文直接说不出来。里面夹杂点法语什么就直接嗝儿屁） 3， 然后出bug的点在于，打开语音输入，azure好像直接挂了。切换到了系统自带的一些语音（macos）。 我换了chrome和safari均是如此。 希望可以排查一下什么原因。

[zaiMoe]

The website cannot be loaded in the version with TTS feature while I implement it on the railway even though I use the same setup for the main repo and it's working alright there.

@kotobuki09 hi, I am not very familiar with the deployment method of Railway. If the tts related functional components are not displayed, it is during compilation. env does not exist. Please ensure that VITE_ ENABLE_ SPECH=true exists

[zaiMoe]

@zaiMoe 感谢开发插件。 今天我本地部署了下，发现一些问题。 1， 在打开页面之后，语音选择一切正常是azure的语音组，然后点击播放语音也很正常。 2， 连续对话也是正常的，我文字输入，然后他就声音传出来（azure的语音还是有点傻，中文语音说英文土了吧唧，英文语音中文直接说不出来。里面夹杂点法语什么就直接嗝儿屁） 3， 然后出bug的点在于，打开语音输入，azure好像直接挂了。切换到了系统自带的一些语音（macos）。 我换了chrome和safari均是如此。 希望可以排查一下什么原因。

@Pandoxie Azure 是微软的语音方案，需要自己去申请 Subscription Key 才行哦，默认的语音是系统自带的，那个好像是不支持中英文方案的。最近在将 Stable diffusion 接入 gpt 中，可能下周在看看。建议换成 Azure 的方案，我在 win 和 mac 都使用过没问题。

[Pandoxie]

我的意思是，连续对话下，他说着说着，自己从azure切换到不是azure的tts方案了。 我已经输入了azure的key哈。您看我贴了两个图。

就是开了连续对话，就从上面的图切换到了下面，很奇怪。

[zaiMoe]

我的意思是，连续对话下，他说着说着，自己从azure切换到不是azure的tts方案了。 我已经输入了azure的key哈。您看我贴了两个图。

就是开了连续对话，就从上面的图切换到了下面，很奇怪。

@Pandoxie 了解，是 bug，我查一下

[Pandoxie]

我的意思是，连续对话下，他说着说着，自己从azure切换到不是azure的tts方案了。 我已经输入了azure的key哈。您看我贴了两个图。 就是开了连续对话，就从上面的图切换到了下面，很奇怪。

@Pandoxie 了解，是 bug，我查一下

FYI，我又玩儿了一会儿。其实是。好想他说了几句话之后就自动切换了。跟我点什么按钮什么没关系。多谢多谢。