您好,登錄后才能下訂單哦!
這篇文章主要介紹“JavaScript基于ChatGPT API怎么實(shí)現(xiàn)劃詞翻譯瀏覽器”的相關(guān)知識(shí),小編通過實(shí)際案例向大家展示操作過程,操作方法簡單快捷,實(shí)用性強(qiáng),希望這篇“JavaScript基于ChatGPT API怎么實(shí)現(xiàn)劃詞翻譯瀏覽器”文章能幫助大家解決問題。
比如我們可以復(fù)制以下代碼,在瀏覽器控制臺(tái)中發(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 需要替換成你自己的。
劃詞翻譯是一種常見的網(wǎng)頁功能,用戶選擇一個(gè)單詞或一段文本時(shí),自動(dòng)彈出一個(gè)小窗口,顯示該單詞或文本的翻譯。
1.首先,在 HTML 頁面中添加一個(gè)空的 DIV 元素和一個(gè)觸發(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.為頁面添加一個(gè)鼠標(biāo)抬起事件監(jiān)聽器,當(dāng)用戶選擇一段文本時(shí),設(shè)置搜索關(guān)鍵詞。
document.addEventListener("mouseup", (event) => { const selection = window.getSelection().toString().trim(); if (selection) { keyword=selection; } });
3.鼠標(biāo)點(diǎn)擊執(zhí)行翻譯邏輯??梢允褂?AJAX 請求從后臺(tái)獲取翻譯結(jié)果并將其顯示在 DIV 元素中。
function translate(){ if(keyword){ // 執(zhí)行翻譯邏輯 } } icon.addEventListener("mouseover", translate);
4.在 CSS 樣式表中為 DIV 元素添加樣式,使其浮動(dòng)在頁面上顯示。
#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; }
以上這些步驟就能實(shí)現(xiàn)劃詞翻譯的基本功能,一起來看下效果。
上面的代碼只是實(shí)現(xiàn)了一個(gè)最簡單的版本,樣式也不夠美觀,因此我們可以使用 webpack + react + antd 來實(shí)現(xiàn)一個(gè)現(xiàn)代化的插件, 這里我使用一個(gè)之前創(chuàng)建的模版tampermonkey-starter。
使用 antd 的 Popover 組件來顯示,使用 react 重構(gòu)下js代碼,我們就可以實(shí)現(xiàn)如下效果。
點(diǎn)擊翻譯按鈕,就會(huì)通過接口請求,將翻譯結(jié)果顯示在下方。但是翻譯結(jié)果需要等 api 完全返回,才會(huì)顯示出來,這樣會(huì)等待較慢,我們可以使用 Stream,OpenAI 的接口支持流渲染嗎,這樣結(jié)果就會(huì)一個(gè)字一個(gè)字蹦出來。
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ā)送了一個(gè) HTTP 請求,并在響應(yīng)中獲取了一個(gè)可讀流。我們可以使用 getReader
方法獲取一個(gè)讀取器對象,并使用它來處理流數(shù)據(jù),使用了 eventsource-parser
這個(gè)包來解析服務(wù)器推送(Server-sent events)的數(shù)據(jù)。
這樣響應(yīng)的內(nèi)容就會(huì)根據(jù)Server-sent events(服務(wù)器發(fā)送的事件)逐個(gè)顯示了。
一般翻譯插件都有語音播放的功能,我們可以利用 可以使用Web Speech API。此API提供了兩個(gè)語音合成接口: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)用這個(gè)函數(shù),傳入需要朗讀的文本,就可以實(shí)現(xiàn)語音播放
speak('Hello, world!');
關(guān)于“JavaScript基于ChatGPT API怎么實(shí)現(xiàn)劃詞翻譯瀏覽器”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。