Improve LLM Translation (#477)

# PR Checklist
- [x] Did you check if it works normally in all models? *ignore this
when it dosen't uses models*
- [x] Did you check if it works normally in all of web, local and node
hosted versions? if it dosen't, did you blocked it in those versions?
- [x] Did you added a type def?

# Description
1. LLM 번역 응답 크기 소프트코딩화
2. LLM도 DOM파서를 통한 문장 단위 및 병렬 번역을 하도록 수정
3. 바깥쪽 태그가 제대로 제거가 안되는 문제 해결
4. 추가적으로, 기본 번역 프롬프트를 ```You are a translator. Translate the following
html or text into {{slot}}. Do not output anything other than the
translation, punctuations and quotation marks.```으로 변경하고 싶습니다.
------
1. Softcoded LLM translation response size
2. Modified LLM to also do sentence-by-sentence and parallel translation
via DOM parser
3. Fixed an issue with outer tags not being removed properly
4. Additionally, I want to change the default translation prompt to
```You are a translator. Translate the following html or text into
{{slot}}. Do not output anything other than the translation,
punctuations and quotation marks.```

src/lang/cn.ts

@@ -472,6 +472,7 @@ export const languageChinese = {
 	"imgGenInstructions": "图像生成指令",
 	"usePlainFetchWarn": "请在使用NovelAI时禁用此选项，因为它可能导致CORS错误。",
 	"translationPrompt": "翻译提示",
+	"translationResponseSize": "翻译响应大小",
 	"webdeeplwarn": "此选项不推荐在网页版本中使用，因为它可能导致CORS错误。",
 	"saveBackupLocal": "本地保存备份",
 	"loadBackupLocal": "本地加载备份",

src/lang/en.ts

@@ -504,6 +504,7 @@ export const languageEnglish = {
     imgGenInstructions: "Image Generation Instructions",
     usePlainFetchWarn: "Please disable this option when using NovelAI, as it can cause CORS errors when using NovelAI.",
     translationPrompt: "Translation Prompt",
+    translationResponseSize: "Translation Response Size",
     webdeeplwarn: "This option is not recommended for use with web version, as it can cause CORS errors.",
     saveBackupLocal: "Save Backup Locally",
     loadBackupLocal: "Load Backup Locally",

src/lang/ko.ts

@@ -469,6 +469,7 @@ export const languageKorean = {
     "imgGenInstructions": "이미지 생성 지시사항",
     "usePlainFetchWarn": "NovelAI 사용 시 CORS 오류가 발생할 수 있으므로, NovelAI를 사용할 때는 이 옵션을 비활성화해 주세요.",
     "translationPrompt": "번역 프롬프트",
+    "translationResponseSize": "번역 응답 크기",
     "webdeeplwarn": "이 옵션은 웹에서는 제대로 작동하지 않을 수 있습니다.",
     "saveBackupLocal": "로컬 백업 저장",
     "loadBackupLocal": "로컬 백업 불러오기",

src/lang/zh-Hant.ts

@@ -472,6 +472,7 @@ export const languageChineseTraditional = {
     "imgGenInstructions": "圖像產生指令",
     "usePlainFetchWarn": "請在使用NovelAI時禁用此選項，因為它可能導致CORS錯誤。",
     "translationPrompt": "翻譯提示",
+    "translationResponseSize": "翻譯響應大小",
     "webdeeplwarn": "此選項不推薦在網頁版本中使用，因為它可能導致CORS錯誤。",
     "saveBackupLocal": "本地保存備份",
     "loadBackupLocal": "本地載入備份",

src/lib/Setting/Pages/LanguageSettings.svelte

@@ -5,7 +5,8 @@
     import { sleep } from "src/ts/util";
     import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";
     import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
-    import { alertNormal, alertSelect } from "src/ts/alert";
+    import NumberInput from "src/lib/UI/GUI/NumberInput.svelte";
+    import { alertNormal, alertSelect, alertConfirm } from "src/ts/alert";
     import { downloadFile, isTauri } from "src/ts/storage/globalApi";
     import { languageEnglish } from "src/lang/en";
     import TextInput from "src/lib/UI/GUI/TextInput.svelte";
@@ -111,7 +112,8 @@
     {/if}
     
     {#if $DataBase.translatorType === 'llm'}
-        <span class="text-textcolor mt-4">{language.translationPrompt}</span>
+        <span class="text-textcolor mt-4">{language.translationResponseSize}</span>
+        <NumberInput min={0} max={2048} marginBottom={true} bind:value={$DataBase.translatorMaxResponse}/>
         <TextAreaInput bind:value={$DataBase.translatorPrompt} placeholder={"You are a translator. translate the following html or text into {{slot}}. do not output anything other than the translation."}/>
     {/if}
 

src/ts/storage/database.ts

@@ -93,6 +93,9 @@ export function setDatabase(data:Database){
     if(checkNullish(data.translator)){
         data.translator = ''
     }
+    if(checkNullish(data.translatorMaxResponse)){
+        data.translatorMaxResponse = 1000
+    }
     if(checkNullish(data.currentPluginProvider)){
         data.currentPluginProvider = ''
     }
@@ -610,6 +613,7 @@ export interface Database{
     huggingfaceKey:string
     allowAllExtentionFiles?:boolean
     translatorPrompt:string
+    translatorMaxResponse:number
     top_p: number,
     google: {
         accessToken: string
@@ -897,6 +901,7 @@ export interface botPreset{
     useInstructPrompt?:boolean
     customPromptTemplateToggle?:string
     templateDefaultVariables?:string
+    translatorMaxResponse: number
 }
 
 
@@ -1101,7 +1106,7 @@ export const presetTemplate:botPreset = {
     },
     top_p: 1,
     useInstructPrompt: false,
-
+    translatorMaxResponse: 1000,
 }
 
 const defaultSdData:[string,string][] = [
@@ -1165,7 +1170,8 @@ export function saveCurrentPreset(){
         openrouterProvider: db.openrouterProvider,
         useInstructPrompt: db.useInstructPrompt,
         customPromptTemplateToggle: db.customPromptTemplateToggle ?? "",
-        templateDefaultVariables: db.templateDefaultVariables ?? ""
+        templateDefaultVariables: db.templateDefaultVariables ?? "",
+        translatorMaxResponse: db.translatorMaxResponse
     }
     db.botPresets = pres
     setDatabase(db)
@@ -1250,6 +1256,7 @@ export function setPreset(db:Database, newPres: botPreset){
     db.useInstructPrompt = newPres.useInstructPrompt ?? false
     db.customPromptTemplateToggle = newPres.customPromptTemplateToggle ?? ''
     db.templateDefaultVariables = newPres.templateDefaultVariables ?? ''
+    db.translatorMaxResponse = newPres.translatorMaxResponse ?? db.translatorMaxResponse
     return db
 }
 

src/ts/translator/translator.ts

@@ -238,10 +238,7 @@ export async function translateHTML(html: string, reverse:boolean, charArg:simpl
             return html
         }
     }
-    if(db.translatorType === 'llm'){
+
-        const tr = db.translator || 'en'
-        return translateLLM(html, {to: tr})
-    }
     const dom = new DOMParser().parseFromString(html, 'text/html');
     console.log(html)
 
@@ -416,8 +413,8 @@ export async function translateHTML(html: string, reverse:boolean, charArg:simpl
     // Serialize the DOM back to HTML
     const serializer = new XMLSerializer();
     let translatedHTML = serializer.serializeToString(dom);
-    // Remove the outer <body> tags
+    // Remove the outer <html|body|head> tags
-    translatedHTML = translatedHTML.replace(/^<body[^>]*>|<\/body>$/g, '');
+    translatedHTML = translatedHTML.replace(/<\/?(html|body|head)[^>]*>/g, '');
 
     if(charArg !== ''){
         let scripts:customscript[] = []
@@ -464,7 +461,7 @@ async function translateLLM(text:string, arg:{to:string}){
         bias: {},
         useStreaming: false,
         noMultiGen: true,
-        maxTokens: 1000,
+        maxTokens: db.translatorMaxResponse,
     }, 'submodel')
 
     if(rq.type === 'fail' || rq.type === 'streaming' || rq.type === 'multiline'){