JavaScript基于ChatGPT?API實現(xiàn)劃詞翻譯瀏覽器腳本
前言
最近 GitHub 上有個基于 ChatGPT API 的瀏覽器腳本， 短時間內(nèi) star 沖到了 9.7k， 功能上除了支持翻譯外，還支持潤色和總結(jié)功能，除了瀏覽器插件外，還使用了 tauri 打包了一個桌面客戶端，那拋開 tauri 是使用 rust 部分，那瀏覽器部分實現(xiàn)還是比較簡單的，今天我們就來手動實現(xiàn)一下。
openAI 提供的接口
比如我們可以復(fù)制以下代碼，在瀏覽器控制臺中發(fā)起請求，就可以完成翻譯
//這是示例
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 需要替換成你自己的。
實現(xiàn)劃詞翻譯
劃詞翻譯是一種常見的網(wǎng)頁功能，用戶選擇一個單詞或一段文本時，自動彈出一個小窗口，顯示該單詞或文本的翻譯。
1.首先，在 HTML 頁面中添加一個空的 DIV 元素和一個觸發(fā)翻譯的按鈕
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)
2.為頁面添加一個鼠標抬起事件監(jiān)聽器，當用戶選擇一段文本時，設(shè)置搜索關(guān)鍵詞。
document.addEventListener("mouseup", (event) => {
const selection = window.getSelection().toString().trim();
if (selection) {
keyword=selection；
}
});3.鼠標點擊執(zhí)行翻譯邏輯?？梢允褂?AJAX 請求從后臺獲取翻譯結(jié)果并將其顯示在 DIV 元素中。
function translate(){
if(keyword){
// 執(zhí)行翻譯邏輯
}
}
icon.addEventListener("mouseover", translate);
4.在 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;
}以上這些步驟就能實現(xiàn)劃詞翻譯的基本功能，一起來看下效果。
react + antd 實現(xiàn)
上面的代碼只是實現(xiàn)了一個最簡單的版本，樣式也不夠美觀，因此我們可以使用 webpack + react + antd 來實現(xiàn)一個現(xiàn)代化的插件， 這里我使用一個之前創(chuàng)建的模版tampermonkey-starter。
使用 antd 的 Popover 組件來顯示，使用 react 重構(gòu)下js代碼，我們就可以實現(xiàn)如下效果。
點擊翻譯按鈕，就會通過接口請求，將翻譯結(jié)果顯示在下方。但是翻譯結(jié)果需要等 api 完全返回，才會顯示出來，這樣會等待較慢，我們可以使用 Stream，OpenAI 的接口支持流渲染嗎，這樣結(jié)果就會一個字一個字蹦出來。
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 發(fā)送了一個 HTTP 請求，并在響應(yīng)中獲取了一個可讀流。我們可以使用 getReader 方法獲取一個讀取器對象，并使用它來處理流數(shù)據(jù)，使用了 eventsource-parser這個包來解析服務(wù)器推送（Server-sent events）的數(shù)據(jù)。
這樣響應(yīng)的內(nèi)容就會根據(jù)Server-sent events（服務(wù)器發(fā)送的事件）逐個顯示了。
文本轉(zhuǎn)語音
一般翻譯插件都有語音播放的功能，我們可以利用 可以使用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);
}
}然后直接調(diào)用這個函數(shù)，傳入需要朗讀的文本，就可以實現(xiàn)語音播放
speak('Hello, world!');
小結(jié)
本文介紹了如何實現(xiàn)劃詞翻譯的基本功能，包括使用 OpenAI 提供的接口進行翻譯、在 HTML 頁面中添加觸發(fā)翻譯的按鈕和鼠標抬起事件監(jiān)聽事件、使用 AJAX 請求從接口獲取翻譯結(jié)果并將其顯示在 DIV 元素中等。同時還介紹了如何使用 webpack + react + antd 實現(xiàn)一個現(xiàn)代化的插件，并利用 Web Speech API 實現(xiàn)語音播放功能。
以上就是JavaScript基于ChatGPT API實現(xiàn)劃詞翻譯瀏覽器腳本的詳細內(nèi)容，更多關(guān)于JavaScript ChatGPT API現(xiàn)劃詞翻譯瀏覽器的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
js函數(shù)中有三個在特定場合很好用的函數(shù):reduce(),map(),filter()。而數(shù)組經(jīng)常用到的方法有push、join、indexOf、slice等等，但是有一個經(jīng)常被我們忽略的方法：reduce，這個方法簡直強大的不要不要的。下面通過這篇文章來一起學(xué)習(xí)學(xué)習(xí)吧。2016-12-12
作用域是JavaScript最重要的概念之一，想要學(xué)好JavaScript就需要理解JavaScript作用域和作用域鏈的工作原理。今天這篇文章對JavaScript作用域示例詳解的介紹，非常不錯，感興趣的朋友一起看下吧2016-07-07
uniapp使用uni自帶websocket進行即時通訊詳細步驟
在開發(fā)程序過程中通信功能還是比較常用到的,下面這篇文章主要給大家介紹了關(guān)于uniapp使用uni自帶websocket進行即時通訊的詳細步驟,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11
Javascript實現(xiàn)重力彈跳拖拽運動效果示例
本文為大家詳細介紹下使用Javascript實現(xiàn)重力彈跳拖拽運動的具體調(diào)用方法，感興趣的朋友可以參考下哈2013-06-06
這篇文章主要介紹了如何使用 JavaScript創(chuàng)建待辦事項列表HTML的完整信息和教程，文中但是示例代碼講解詳細，感興趣的同學(xué)可以動手試一試2022-01-01
這篇文章主要給大家介紹了關(guān)于npm后面的-S和-D參數(shù)舉例詳解的相關(guān)資料,文中還介紹了npm -s和-d的一些區(qū)別,對大家的學(xué)習(xí)或者工作具有一定的參考階級價值,需要的朋友可以參考下2024-01-01
最近用js拼接字符串時遇到問題了，不論怎么拼接在ie中都報錯，于是找到了一個不錯的解決方法，在此與大家分享下2014-03-03
這篇文章主要為大家詳細介紹了基于Javascript倒計時效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
input 輸入框內(nèi)的輸入事件詳細分析,需要的朋友可以參考下。2010-03-03
Bootstrap框架結(jié)合jQuery仿百度換膚功能實例解析
這篇文章主要為大家詳細介紹了Bootstrap框架結(jié)合jQuery仿百度換膚功能實現(xiàn)代碼解析,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09