BIDZ Coin 中文站

前言 最近 GitHub 上有个基于 ChatGPT API 的浏览器脚本， 短时间内 star 冲到了 9.7k， 功能上除了支持翻译外，还支持润色和总结功能，除了浏览器插件外，还使用了 tauri 打包了一个桌面客户端，那抛开 tauri 是使用 rust 部分，那浏览器部分实现还是比较简单的，今天我们就来手动实现一下。 openAI 提供的接口 比如我们可以复制以下代码，在浏览器控制台中发起请求，就可以完成翻译 上述代码中 OPONAI_API_KEY 需要替换成你自己的。 实现划词翻译 划词翻译是一种常见的网页功能，用户选择一个单词或一段文本时，自动弹出一个小窗口，显示该单词或文本的翻译。 1.首先，在 HTML 页面中添加一个空的 DIV 元素和一个触发翻译的按钮 2.为页面添加一个鼠标抬起事件监听器，当用户选择一段文本时，设置搜索关键词。 3.鼠标点击执行翻译逻辑。可以使用 AJAX 请求从后台获取翻译结果并将其显示在 DIV 元素中。 4.在 CSS 样式表中为 DIV 元素添加样式，使其浮动在页面上显示。 以上这些步骤就能实现划词翻译的基本功能，一起来看下效果。 react + antd 实现 上面的代码只是实现了一个最简单的版本，样式也不够美观，因此我们可以使用 webpack + react + antd 来实现一个现代化的插件， 这里我使用一个之前创建的模版tampermonkey-starter。 使用 antd 的 Popover 组件来显示，使用 react 重构下js代码，我们就可以实现如下效果。 点击翻译按钮，就会通过接口请求，将翻译结果显示在下方。但是翻译结果需要等 api 完全返回，才会显示出来，这样会等待较慢，我们可以使用 Stream，OpenAI 的接口支持流渲染吗，这样结果就会一个字一个字蹦出来。 在上面代码中，我们使用 fetch API 发送了一个 HTTP 请求，并在响应中获取了一个可读流。我们可以使用 getReader 方法获取一个读取器对象，并使用它来处理流数据，使用了 eventsource-parser这个包来解析服务器推送（Server-sent events）的数据。 这样响应的内容就会根据Server-sent events（服务器发送的事件）逐个显示了。 文本转语音 一般翻译插件都有语音播放的功能，我们可以利用 可以使用Web Speech API。此API提供了两个语音合成接口：SpeechSynthesis和SpeechSynthesisUtterance 然后直接调用这个函数，传入需要朗读的文本，就可以实现语音播放 小结 本文介绍了如何实现划词翻译的基本功能，包括使用 OpenAI 提供的接口进行翻译、在 HTML 页面中添加触发翻译的按钮和鼠标抬起事件监听事件、使用 AJAX 请求从接口获取翻译结果并将其显示在 DIV 元素中等。同时还介绍了如何使用 webpack + react + antd 实现一个现代化的插件，并利用 Web Speech API 实现语音播放功能。 以上就是JavaScript基于ChatGPT API实现划词翻译浏览器脚本的详细内容，更多关于JavaScript ChatGPT API现划词翻译浏览器的资料请关注脚本之家其它相关文章！ 您可能感兴趣的文章:html+css+js实现简易版ChatGPT聊天机器人两天没解决的问题chatgpt用了5秒搞定隐藏bug一文解析ChatGPT 之 Fetch 请求让chatGPT教你如何使用taro创建mboxLangChain简化ChatGPT工程复杂度使用详解ChatGPT用于OA聊天助手导致访问量服务宕机详解微信小程序如何实现类似ChatGPT的流式传输ChatGPT前端编程秀之别拿编程语言不当语言详解如何利用chatgpt保护您的js代码