はじめに

最近 GitHub に ChatGPT API をベースにしたブラウザスクリプト openai-translator が登場しました 短期間でスターが 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 を完了できます。あなたのものと私のものに置き換えてください。

単語翻訳の実現(xiàn)

単語翻訳は Web ページの一般的な機能です。ユーザーが単語またはテキストを選択すると、小さなウィンドウが自動的にポップアップして単語またはテキストの翻訳を表示します。 。

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. マウスをクリックして変換ロジックを?qū)g行します。 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 の実裝

上記のコードは最も単純なバージョンのみを?qū)g裝しており、スタイルもこれは十分に美しいものではないので、webpack react antd を使用して最新のプラグインを?qū)g裝できます。ここでは、以前に作成したテンプレート tampermonkey-starter を使用します。

antd の Popover コンポーネントを使用して表示し、react を使用して JS コードを再構(gòu)築すると、次のような効果が得られます。

#単語翻訳

翻訳ボタンをクリックすると、インターフェースを通じて翻訳結(jié)果が表示されます。以下のリクエスト。ただし、API が完全に返されるまで翻訳結(jié)果は表示されないため、処理が遅くなります。ストリームを使用できますか? 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();
}
};

上記のコードでは、フェッチ API を使用して HTTP リクエストを送信し、応答で読み取り可能なストリームを取得します。 getReader メソッドを使用してリーダー オブジェクトを取得し、それを使用してストリーム データを処理し、eventsource-parser パッケージを使用してサーバーから送信されたイベントからのデータを解析できます。

応答の內(nèi)容は、Server-sent events (サーバーから送信されたイベント) に応じて 1 つずつ表示されます。

#テキスト読み上げ

一般翻訳プラグ-すべての ins には音聲再生機能があり、Web Speech API を使用できます。この API は、SpeechSynthesis と SpeechSynthesisUtterance という 2 つの音聲合成インターフェイスを提供します。

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);
}
}

次に、この関數(shù)を直接呼び出して、音聲再生を?qū)g現(xiàn)するために読み上げる必要があるテキストを渡します

speak('Hello, world!');

summary

この記事では、OpenAI が提供する翻訳用インターフェイスの使用、翻訳をトリガーするボタンの追加、および HTML ページでのマウスアップ イベント監(jiān)視イベントの追加、AJAX リクエストを使用した翻訳結(jié)果の取得など、単語翻訳の基本機能の実裝方法を紹介します。インターフェースであり、DIV 要素に表示されます。また、webpack React antd を使用して最新のプラグインを?qū)g裝する方法と、Web Speech API を使用して音聲再生機能を?qū)g裝する方法も紹介します。

以上がChatGPT APIに基づくワードマーキング翻訳ブラウザスクリプトの実裝の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。