ChatGPT API를 기반으로 한 단어 표시 번역 브라우저 스크립트 구현

머리말

최근 GitHub, openai-translator에 ChatGPT API를 기반으로 한 브라우저 스크립트가 단기간에 12k에 도달했습니다. 브라우저 플러그인 외에도 데스크탑 클라이언트는 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를 자신의 코드로 바꿔야 합니다.

단어 표시 번역 실현

단어 표시 번역은 사용자가 단어나 텍스트를 선택하면 자동으로 작은 창이 나타나 해당 단어나 텍스트의 번역을 표시하는 일반적인 웹 페이지 기능입니다.

1. 먼저 빈 DIV 요소와 HTML 페이지 번역을 트리거하는 버튼을 추가하세요

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. 페이지에 마우스업 이벤트 리스너를 추가하고 사용자가 텍스트를 선택할 때 검색 키워드를 설정하세요.

document.addEventListener("mouseup", (event) => {
const selection = window.getSelection().toString().trim();
if (selection) {
keyword=selection；
}
});

3. 번역 로직을 실행하려면 마우스를 클릭하세요. AJAX 요청을 사용하여 백그라운드에서 번역 결과를 가져와 DIV 요소에 표시할 수 있습니다.

function translate(){
if(keyword){
// 执行翻译逻辑
}
}
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;
}

위 단계를 통해 단어 번역의 기본 기능을 구현할 수 있습니다. 효과를 살펴보겠습니다.

react + antd 구현

위 코드는 가장 간단한 버전만 구현하고 스타일이 충분히 아름답지 않으므로 여기에서 webpack + React + antd를 사용하여 최신 플러그인을 구현할 수 있습니다. I 이전에 생성된 템플릿 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(서버가 보내는 이벤트)에 따라 응답 내용이 하나씩 표시됩니다.

Text to Speech

일반 번역 플러그인에는 음성 재생 기능이 있으며 Web Speech API를 사용할 수 있습니다. 이 API는 두 가지 음성 합성 인터페이스를 제공합니다: SpeechSynesis 및 SpeechSynesisUtterance

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!