快捷導(dǎo)航

JavaScript基于ChatGPT?API實(shí)現(xiàn)劃詞翻譯瀏覽器腳本

更新時(shí)間：2023年08月09日 15:55:50 作者：狂奔滴小馬

最近?GitHub?上有個(gè)基于?ChatGPT?API?的瀏覽器腳本，openai-translator，?短時(shí)間內(nèi)?star?沖到了?9.7k，拋開?tauri?是使用?rust?部分，那瀏覽器部分實(shí)現(xiàn)還是比較簡(jiǎn)單的，今天我們就來(lái)手動(dòng)實(shí)現(xiàn)一下

前言

最近 GitHub 上有個(gè)基于 ChatGPT API 的瀏覽器腳本，短時(shí)間內(nèi) star 沖到了 9.7k，功能上除了支持翻譯外，還支持潤(rùn)色和總結(jié)功能，除了瀏覽器插件外，還使用了 tauri 打包了一個(gè)桌面客戶端，那拋開 tauri 是使用 rust 部分，那瀏覽器部分實(shí)現(xiàn)還是比較簡(jiǎn)單的，今天我們就來(lái)手動(dòng)實(shí)現(xiàn)一下。

openAI 提供的接口

比如我們可以復(fù)制以下代碼，在瀏覽器控制臺(tái)中發(fā)起請(qǐng)求，就可以完成翻譯

//這是示例
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 需要替換成你自己的。

實(shí)現(xiàn)劃詞翻譯

劃詞翻譯是一種常見(jiàn)的網(wǎng)頁(yè)功能，用戶選擇一個(gè)單詞或一段文本時(shí)，自動(dòng)彈出一個(gè)小窗口，顯示該單詞或文本的翻譯。

1.首先，在 HTML 頁(yè)面中添加一個(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.為頁(yè)面添加一個(gè)鼠標(biāo)抬起事件監(jiān)聽(tīng)器，當(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 請(qǐng)求從后臺(tái)獲取翻譯結(jié)果并將其顯示在 DIV 元素中。

function translate(){
  if(keyword){
    // 執(zhí)行翻譯邏輯
  }
}
icon.addEventListener("mouseover", translate);

4.在 CSS 樣式表中為 DIV 元素添加樣式，使其浮動(dòng)在頁(yè)面上顯示。

#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)劃詞翻譯的基本功能，一起來(lái)看下效果。

react + antd 實(shí)現(xiàn)

上面的代碼只是實(shí)現(xiàn)了一個(gè)最簡(jiǎn)單的版本，樣式也不夠美觀，因此我們可以使用 webpack + react + antd 來(lái)實(shí)現(xiàn)一個(gè)現(xiàn)代化的插件，這里我使用一個(gè)之前創(chuàng)建的模版tampermonkey-starter。

使用 antd 的 Popover 組件來(lái)顯示，使用 react 重構(gòu)下js代碼，我們就可以實(shí)現(xiàn)如下效果。

點(diǎn)擊翻譯按鈕，就會(huì)通過(guò)接口請(qǐng)求，將翻譯結(jié)果顯示在下方。但是翻譯結(jié)果需要等 api 完全返回，才會(huì)顯示出來(lái)，這樣會(huì)等待較慢，我們可以使用 Stream，OpenAI 的接口支持流渲染嗎，這樣結(jié)果就會(huì)一個(gè)字一個(gè)字蹦出來(lái)。

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 請(qǐng)求，并在響應(yīng)中獲取了一個(gè)可讀流。我們可以使用 getReader 方法獲取一個(gè)讀取器對(duì)象，并使用它來(lái)處理流數(shù)據(jù)，使用了 eventsource-parser這個(gè)包來(lái)解析服務(wù)器推送（Server-sent events）的數(shù)據(jù)。

這樣響應(yīng)的內(nèi)容就會(huì)根據(jù)Server-sent events（服務(wù)器發(fā)送的事件）逐個(gè)顯示了。

文本轉(zhuǎn)語(yǔ)音

一般翻譯插件都有語(yǔ)音播放的功能，我們可以利用可以使用Web Speech API。此API提供了兩個(gè)語(yǔ)音合成接口：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)語(yǔ)音播放

speak('Hello, world!');

小結(jié)

本文介紹了如何實(shí)現(xiàn)劃詞翻譯的基本功能，包括使用 OpenAI 提供的接口進(jìn)行翻譯、在 HTML 頁(yè)面中添加觸發(fā)翻譯的按鈕和鼠標(biāo)抬起事件監(jiān)聽(tīng)事件、使用 AJAX 請(qǐng)求從接口獲取翻譯結(jié)果并將其顯示在 DIV 元素中等。同時(shí)還介紹了如何使用 webpack + react + antd 實(shí)現(xiàn)一個(gè)現(xiàn)代化的插件，并利用 Web Speech API 實(shí)現(xiàn)語(yǔ)音播放功能。

以上就是JavaScript基于ChatGPT API實(shí)現(xiàn)劃詞翻譯瀏覽器腳本的詳細(xì)內(nèi)容，更多關(guān)于JavaScript ChatGPT API現(xiàn)劃詞翻譯瀏覽器的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: