基于 ChatGPT API 的 Scratch 翻译浏览器脚本实现
前言
最近 GitHub 上有个基于 ChatGPT API 的浏览器脚本,openai-translator, 短时间内 star 冲到了 12k, 功能上除了支持翻译外,还支持润色和总结功能,除了浏览器插件外,还使用了 tauri 打包了一个桌面客户端,那抛开 tauri 是使用 rust 部分,那浏览器部分实现还是比较简单的,今天我们就来手动实现一下。
openAI 提供的接口
比如我们可以复制以下代码,在浏览器控制台中发起请求,就可以完成翻译
//示例 const OPENAI_API_KEY = "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"; const prompt = `Translate this into Chinese: hello world`; const res = await fetch("https://api.openai.com/v1/completions", { method: "POST", headers: { "Content-Type": "application/json", authorization: `Bearer ${OPENAI_API_KEY}`, }, body: JSON.stringify({ model: "text-davinci-003", prompt, max_tokens: 1000, temperature: 0, }), }); const response = await res.json(); const result = response.choices[0].text;
上述代码中 OPONAI_API_KEY 需要替换成你自己的。
实现划词翻译
划词翻译是一种常见的网页功能,用户选择一个单词或一段文本时,自动弹出一个小窗口,显示该单词或文本的翻译。
- 首先,在 HTML 页面中添加一个空的 DIV 元素和一个触发翻译的按钮
let keyword; const translation = document.createElement("div"); translation.id ="translation"; const icon = document.createElement("img"); icon.style.width ="30px"; icon.style.height = "30px"; icon.src ="http://example.com/icon.png"; translation.appendChild(icon)
- 为页面添加一个鼠标抬起事件监听器,当用户选择一段文本时,设置搜索关键词。
document.addEventListener("mouseup", (event) => { const selection = window.getSelection().toString().trim(); if (selection) { keyword=selection; } });
- 鼠标点击执行翻译逻辑。可以使用 AJAX 请求从后台获取翻译结果并将其显示在 DIV 元素中。
function translate(){ if(keyword){ // 执行翻译逻辑 } } icon.addEventListener("mouseover", translate);
- 在 CSS 样式表中为 DIV 元素添加样式,使其浮动在页面上显示。
#translation { position: fixed; top: 10px; right: 10px; max-width: 300px; padding: 5px; background-color: #f7f7f7; border: 1px solid #ccc; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); z-index: 9999; }
以上这些步骤就能实现划词翻译的基本功能,一起来看下效果。
react + antd 实现
上面的代码只是实现了一个最简单的版本,样式也不够美观,因此我们可以使用 webpack + react + antd 来实现一个现代化的插件, 这里我使用一个之前创建的模版tampermonkey-starter。
使用 antd 的 Popover 组件来显示,使用 react 重构下js代码,我们就可以实现如下效果。
划词翻译
点击翻译按钮,就会通过接口请求,将翻译结果显示在下方。但是翻译结果需要等 api 完全返回,才会显示出来,这样会等待较慢,我们可以使用 Stream,OpenAI 的接口支持流渲染吗,这样结果就会一个字一个字蹦出来。
import { createParser } from "eventsource-parser"; const translate = async (text: string) => { const resp = await fetch("https://api.openai.com/v1/completions", { method: "POST", headers: { "Content-Type": "application/json", authorization: `Bearer ${OPENAI_API_KEY}`, }, body: JSON.stringify({ model: "text-davinci-003", prompt: `Translate this into Chinese: ${text}`, max_tokens: 1000, temperature: 0, frequency_penalty: 0, stream: true, }), }); if (resp.status !== 200) { const res = await resp.json(); setLoading(false); console.error(res); return; } const parser = createParser((event) => { if (event.type === "event") { const data = event.data; if (data === "[DONE]") { setLoading(false); } try { let json = JSON.parse(event.data); setResult((prev) => { return prev + json.choices[0].text; }); } catch (error) { console.log(error); } } }); const data = resp.body; if (!data) { console.log("Error: No data received from API"); return; } const reader = resp.body.getReader(); try { while (true) { const { done, value } = await reader.read(); if (done) { setLoading(false); break; } const str = new TextDecoder().decode(value); parser.feed(str); } } finally { reader.releaseLock(); } };
在上面代码中,我们使用 fetch API 发送了一个 HTTP 请求,并在响应中获取了一个可读流。我们可以使用 getReader 方法获取一个读取器对象,并使用它来处理流数据,使用了 eventsource-parser这个包来解析服务器推送(Server-sent events)的数据。
这样响应的内容就会根据Server-sent events(服务器发送的事件)逐个显示了。
文本转语音
一般翻译插件都有语音播放的功能,我们可以利用 可以使用Web Speech API。此API提供了两个语音合成接口:SpeechSynthesis和SpeechSynthesisUtterance
function speak(text) { if ('speechSynthesis' in window) { const utterance = new SpeechSynthesisUtterance(text); utterance.voice = speechSynthesis.getVoices()[0]; utterance.pitch = 1; utterance.rate = 1; speechSynthesis.speak(utterance); } }
然后直接调用这个函数,传入需要朗读的文本,就可以实现语音播放
speak('Hello, world!');
小结
本文介绍了如何实现划词翻译的基本功能,包括使用 OpenAI 提供的接口进行翻译、在 HTML 页面中添加触发翻译的按钮和鼠标抬起事件监听事件、使用 AJAX 请求从接口获取翻译结果并将其显示在 DIV 元素中等。同时还介绍了如何使用 webpack + react + antd 实现一个现代化的插件,并利用 Web Speech API 实现语音播放功能。
以上就是基于 ChatGPT API 的划词翻译浏览器脚本实现的详细内容,更多请关注php中文网其它相关文章!
下一篇: 在线翻译 - 掘金
推荐阅读
-
Java 8新特性探究(十三)JavaFX 8新特性以及开发2048游戏-JavaFX历史## 跟java在服务器端和web端成绩相比,桌面一直是java的软肋,于是Sun公司在2008年推出JavaFX,弥补桌面软件的缺陷,请看下图JavaFX一路走过来的改进 从上图看出,一开始推出时候,开发者需使用一种名为JavaFX Script的静态的、声明式的编程语言来开发JavaFX应用程序。因为JavaFX Script将会被编译为Java bytecode,程序员可以使用Java代码代替。 JavaFX 2.0之后的版本摒弃了JavaFX Script语言,而作为一个Java API来使用。因此使用JavaFX平台实现的应用程序将直接通过标准Java代码来实现。 JavaFX 2.0 包含非常丰富的 UI 控件、图形和多媒体特性用于简化可视化应用的开发,WebView可直接在应用中嵌入网页;另外 2.0 版本允许使用 FXML 进行 UI 定义,这是一个脚本化基于 XML 的标识语言。 从JDK 7u6开始,JavaFx就与JDK捆绑在一起了,JavaFX团队称,下一个版本将是8.0,目前所有的工作都已经围绕8.0库进行。这是因为JavaFX将捆绑在Java 8中,因此该团队决定跳过几个版本号,迎头赶上Java 8。 ##JavaFx8的新特性 ## ###全新现代主题:Modena 新的Modena主题来替换原来的Caspian主题。不过在Application的start方法中,可以通过setUserAgentStylesheet(STYLESHEET_CASPIAN)来继续使用Caspian主题。 参考http://fxexperience.com/2013/03/modena-theme-update/ ###JavaFX 3D 在JavaFX8中提供了3D图像处理API,包括Shape3D (Box, Cylinder, MeshView, Sphere子类),SubScene, Material, PickResult, LightBase (AmbientLight 和PointLight子类),SceneAntialiasing等。Camera类也得到了更新。从JavaDoc中可以找到更多信息。 ###富文本 强化了富文本的支持 ###TreeTableView ###日期控件DatePicker 增加日期控件 ###用于 CSS 结构的公共 API
-
Node.js:开发人员必须掌握的 10 个库(下) - Lodash 库的功能和优势: 使用 Polyfills 实现跨浏览器兼容。 在处理对象数组时,提供过滤器、搜索和 flatMap 等内置解决方案。 帮助开发人员避免冗余代码并保持代码清晰。 阿克西奥斯 Axios 是一款基于 Promise 的 HTTP 客户端,适用于 Node.js 和浏览器。它还能根据需要管理浏览器或 Node.js 请求和响应数据的转换。Axios 是同构的,这意味着它可以在服务器和客户端使用相同的代码库。Axios 在服务器端使用本地 HTTP 模块,在客户端使用 XMLHttpRequest 进行 HTTP 通信。 Axios 库的特点和优势: 为 GET、PUT、POST 和 DELETE 等常见 HTTP 数据类型提供 API 方法。 在互联网上执行 HTTP 查询时,可防止跨站请求伪造(CSRF),从而提高安全性。 自动 JSON 数据转换,可轻松将响应数据转换为 JSON 格式。 Puppeteer Puppeteer 是一个 Node.js 框架,它通过 DevTools 协议提供了一个高级 API,允许你通过控制 Chrome/Chromium 实现浏览器自动化。它可用于自动化前端测试,如处理请求、识别和比较用户界面组件以及性能测试。在代码中导入 Puppeteer 软件包后,就能构建 Chromium 实例,然后与浏览器引擎通信,执行自动化测试。 Puppeteer 库的优势和功能:
-
OpenAI Translator | 基于 ChatGPT API 的全球翻译润色解析和 ORC 上传图像翻译工具
-
基于 ChatGPT API 的 Scratch 翻译浏览器脚本实现