ChatGPT APIに基づくワードマーキング翻訳ブラウザスクリプトの実装

はじめに

最近 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 を完了できます。あなたのものと私のものに置き換えてください。

単語翻訳の実現

単語翻訳は 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. マウスをクリックして変換ロジックを実行します。 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 を使用して最新のプラグインを実装できます。ここでは、以前に作成したテンプレート tampermonkey-starter を使用します。

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

#単語翻訳

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

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

応答の内容は、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);
}
}

次に、この関数を直接呼び出して、音声再生を実現するために読み上げる必要があるテキストを渡します

speak('Hello, world!');

summary

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

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