add a button to translate input message

This commit is contained in:
evpeople 2024-04-27 13:46:13 +08:00
parent 47b6562605
commit 4521dde455
No known key found for this signature in database
GPG Key ID: CF5768B6A73046FF
1 changed files with 443 additions and 404 deletions

View File

@ -1,19 +1,10 @@
export { translate };
import {
callPopup,
eventSource,
event_types,
getRequestHeaders,
reloadCurrentChat,
saveSettingsDebounced,
substituteParams,
updateMessageBlock,
} from '../../../script.js';
import {callPopup, event_types, eventSource, getRequestHeaders, reloadCurrentChat, saveSettingsDebounced, substituteParams, updateMessageBlock,} from '../../../script.js';
import {extension_settings, getContext} from '../../extensions.js';
import {findSecret, secret_state, writeSecret} from '../../secrets.js';
import {splitRecursive} from '../../utils.js';
export {translate};
export const autoModeOptions = {
NONE: 'none',
RESPONSES: 'responses',
@ -142,12 +133,21 @@ const KEY_REQUIRED = ['deepl', 'libre'];
const LOCAL_URL = ['libre', 'oneringtranslator', 'deeplx', 'lingva'];
function showKeysButton() {
const providerRequiresKey = KEY_REQUIRED.includes(extension_settings.translate.provider);
const providerOptionalUrl = LOCAL_URL.includes(extension_settings.translate.provider);
const providerRequiresKey =
KEY_REQUIRED.includes(extension_settings.translate.provider);
const providerOptionalUrl =
LOCAL_URL.includes(extension_settings.translate.provider);
$('#translate_key_button').toggle(providerRequiresKey);
$('#translate_key_button').toggleClass('success', Boolean(secret_state[extension_settings.translate.provider]));
$('#translate_key_button')
.toggleClass(
'success',
Boolean(secret_state[extension_settings.translate.provider]));
$('#translate_url_button').toggle(providerOptionalUrl);
$('#translate_url_button').toggleClass('success', Boolean(secret_state[extension_settings.translate.provider + '_url']));
$('#translate_url_button')
.toggleClass(
'success',
Boolean(
secret_state[extension_settings.translate.provider + '_url']));
}
function loadSettings() {
@ -157,14 +157,21 @@ function loadSettings() {
}
}
$(`#translation_provider option[value="${extension_settings.translate.provider}"]`).attr('selected', true);
$(`#translation_target_language option[value="${extension_settings.translate.target_language}"]`).attr('selected', true);
$(`#translation_auto_mode option[value="${extension_settings.translate.auto_mode}"]`).attr('selected', true);
$(`#translation_provider option[value="${
extension_settings.translate.provider}"]`)
.attr('selected', true);
$(`#translation_target_language option[value="${
extension_settings.translate.target_language}"]`)
.attr('selected', true);
$(`#translation_auto_mode option[value="${
extension_settings.translate.auto_mode}"]`)
.attr('selected', true);
showKeysButton();
}
async function translateImpersonate(text) {
const translatedText = await translate(text, extension_settings.translate.target_language);
const translatedText =
await translate(text, extension_settings.translate.target_language);
$('#send_textarea').val(translatedText);
}
@ -181,17 +188,19 @@ async function translateIncomingMessage(messageId) {
return;
}
const textToTranslate = substituteParams(message.mes, context.name1, message.name);
const translation = await translate(textToTranslate, extension_settings.translate.target_language);
const textToTranslate =
substituteParams(message.mes, context.name1, message.name);
const translation = await translate(
textToTranslate, extension_settings.translate.target_language);
message.extra.display_text = translation;
updateMessageBlock(messageId, message);
}
async function translateProviderOneRing(text, lang) {
let from_lang = lang == extension_settings.translate.internal_language
? extension_settings.translate.target_language
: extension_settings.translate.internal_language;
let from_lang = lang == extension_settings.translate.internal_language ?
extension_settings.translate.target_language :
extension_settings.translate.internal_language;
const response = await fetch('/api/translate/onering', {
method: 'POST',
@ -341,7 +350,8 @@ async function translateProviderBing(text, lang) {
* Splits text into chunks and translates each chunk separately
* @param {string} text Text to translate
* @param {string} lang Target language code
* @param {(text: string, lang: string) => Promise<string>} translateFn Function to translate a single chunk (must return a Promise)
* @param {(text: string, lang: string) => Promise<string>} translateFn Function
* to translate a single chunk (must return a Promise)
* @param {number} chunkSize Maximum chunk size
* @returns {Promise<string>} Translated text
*/
@ -375,19 +385,24 @@ async function translate(text, lang) {
case 'libre':
return await translateProviderLibre(text, lang);
case 'google':
return await chunkedTranslate(text, lang, translateProviderGoogle, 5000);
return await chunkedTranslate(
text, lang, translateProviderGoogle, 5000);
case 'lingva':
return await chunkedTranslate(text, lang, translateProviderLingva, 5000);
return await chunkedTranslate(
text, lang, translateProviderLingva, 5000);
case 'deepl':
return await translateProviderDeepl(text, lang);
case 'deeplx':
return await chunkedTranslate(text, lang, translateProviderDeepLX, 1500);
return await chunkedTranslate(
text, lang, translateProviderDeepLX, 1500);
case 'oneringtranslator':
return await translateProviderOneRing(text, lang);
case 'bing':
return await chunkedTranslate(text, lang, translateProviderBing, 1000);
default:
console.error('Unknown translation provider', extension_settings.translate.provider);
console.error(
'Unknown translation provider',
extension_settings.translate.provider);
return text;
}
} catch (error) {
@ -406,7 +421,8 @@ async function translateOutgoingMessage(messageId) {
const originalText = message.mes;
message.extra.display_text = originalText;
message.mes = await translate(originalText, extension_settings.translate.internal_language);
message.mes = await translate(
originalText, extension_settings.translate.internal_language);
updateMessageBlock(messageId, message);
console.log('translateOutgoingMessage', messageId);
@ -424,6 +440,13 @@ function createEventHandler(translateFunction, shouldTranslateFunction) {
};
}
async function onTranslateInputMessageClick() {
const ta = document.querySelector('#send_textarea');
toastr.info(`Input Message is translating`, 'Please wait...');
const translatedText =
await translate(ta.value, extension_settings.translate.internal_language);
$('#send_textarea').val(translatedText);
}
// Prevents the chat from being translated in parallel
let translateChatExecuting = false;
@ -437,7 +460,8 @@ async function onTranslateChatClick() {
const context = getContext();
const chat = context.chat;
toastr.info(`${chat.length} message(s) queued for translation.`, 'Please wait...');
toastr.info(
`${chat.length} message(s) queued for translation.`, 'Please wait...');
for (let i = 0; i < chat.length; i++) {
await translateIncomingMessage(i);
@ -453,7 +477,9 @@ async function onTranslateChatClick() {
}
async function onTranslationsClearClick() {
const confirm = await callPopup('<h3>Are you sure?</h3>This will remove translated text from all messages in the current chat. This action cannot be undone.', 'confirm');
const confirm = await callPopup(
'<h3>Are you sure?</h3>This will remove translated text from all messages in the current chat. This action cannot be undone.',
'confirm');
if (!confirm) {
return;
@ -477,11 +503,13 @@ async function translateMessageEdit(messageId) {
const chat = context.chat;
const message = chat[messageId];
if (message.is_system || extension_settings.translate.auto_mode == autoModeOptions.NONE) {
if (message.is_system ||
extension_settings.translate.auto_mode == autoModeOptions.NONE) {
return;
}
if ((message.is_user && shouldTranslate(outgoingTypes)) || (!message.is_user && shouldTranslate(incomingTypes))) {
if ((message.is_user && shouldTranslate(outgoingTypes)) ||
(!message.is_user && shouldTranslate(incomingTypes))) {
await translateIncomingMessage(messageId);
}
}
@ -504,9 +532,12 @@ async function onMessageTranslateClick() {
await context.saveChat();
}
const handleIncomingMessage = createEventHandler(translateIncomingMessage, () => shouldTranslate(incomingTypes));
const handleOutgoingMessage = createEventHandler(translateOutgoingMessage, () => shouldTranslate(outgoingTypes));
const handleImpersonateReady = createEventHandler(translateImpersonate, () => shouldTranslate(incomingTypes));
const handleIncomingMessage = createEventHandler(
translateIncomingMessage, () => shouldTranslate(incomingTypes));
const handleOutgoingMessage = createEventHandler(
translateOutgoingMessage, () => shouldTranslate(outgoingTypes));
const handleImpersonateReady = createEventHandler(
translateImpersonate, () => shouldTranslate(incomingTypes));
const handleMessageEdit = createEventHandler(translateMessageEdit, () => true);
window['translate'] = translate;
@ -555,14 +586,21 @@ jQuery(() => {
<div id="translate_chat" class="list-group-item flex-container flexGap5">
<div class="fa-solid fa-language extensionsMenuExtensionButton" /></div>
Translate Chat
</div>`;
</div>
<div id="translate_input_message" class="list-group-item flex-container flexGap5">
<div class="fa-solid fa-language extensionsMenuExtensionButton" /></div>
Translate Input Message
</div>
`;
$('#extensionsMenu').append(buttonHtml);
$('#extensions_settings2').append(html);
$('#translate_chat').on('click', onTranslateChatClick);
$('#translate_input_message').on('click', onTranslateInputMessageClick);
$('#translation_clear').on('click', onTranslationsClearClick);
for (const [key, value] of Object.entries(languageCodes)) {
$('#translation_target_language').append(`<option value="${value}">${key}</option>`);
$('#translation_target_language')
.append(`<option value="${value}">${key}</option>`);
}
$('#translation_auto_mode').on('change', (event) => {
@ -599,7 +637,8 @@ jQuery(() => {
'oneringtranslator': 'http://127.0.0.1:4990/translate',
'deeplx': 'http://127.0.0.1:1188/translate',
};
const popupText = `<h3>${optionText} API URL</h3><i>Example: <tt>${String(exampleURLs[extension_settings.translate.provider])}</tt></i>`;
const popupText = `<h3>${optionText} API URL</h3><i>Example: <tt>${
String(exampleURLs[extension_settings.translate.provider])}</tt></i>`;
const secretKey = extension_settings.translate.provider + '_url';
const savedUrl = secret_state[secretKey] ? await findSecret(secretKey) : '';