[feat] added languages to translator, splited language settings

src/lib/Setting/Pages/DisplaySettings.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { changeLanguage, language } from "src/lang";
+    import { language } from "src/lang";
     import { DataBase, saveImage, updateTextTheme } from "src/ts/database";
     import { changeFullscreen, selectSingleFile, sleep } from "src/ts/util";
     import Check from "src/lib/Others/Check.svelte";
@@ -7,14 +7,6 @@
 </script>
 
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.display}</h2>
-<span class="text-neutral-200 mt-4">{language.UiLanguage}</span>
-<select class="bg-transparent input-text mt-2 text-gray-200 appearance-none text-sm" bind:value={$DataBase.language} on:change={async () => {
-    await sleep(10)
-    changeLanguage($DataBase.language)
-}}>
-    <option value="en" class="bg-darkbg appearance-none">English</option>
-    <option value="ko" class="bg-darkbg appearance-none">한국어</option>
-</select>
 
 <span class="text-neutral-200 mt-4">{language.theme}</span>
 <select class="bg-transparent input-text mt-2 text-gray-200 appearance-none text-sm" bind:value={$DataBase.theme}>
@@ -22,7 +14,6 @@
     <option value="waifu" class="bg-darkbg appearance-none">Waifulike</option>
     <option value="waifuMobile" class="bg-darkbg appearance-none">WaifuCut</option>
     <!-- <option value="free" class="bg-darkbg appearance-none">Freestyle</option> -->
-
 </select>
 
 
@@ -62,12 +53,6 @@
     </div>
 {/if}
 
-
-<span class="text-neutral-200 mt-4">{language.translator}</span>
-<select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none text-sm" bind:value={$DataBase.translator}>
-    <option value="" class="bg-darkbg appearance-none">{language.disabled}</option>
-    <option value="ko" class="bg-darkbg appearance-none">한국어</option>
-</select>
 <span class="text-neutral-200">{language.UISize}</span>
 <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="50" max="200" bind:value={$DataBase.zoomsize}>
 <span class="text-gray-400 mb-6 text-sm">{($DataBase.zoomsize)}%</span>

src/lib/Setting/Pages/LanguageSettings.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import { changeLanguage, language } from "src/lang";
+    import { DataBase } from "src/ts/database";
+    import { sleep } from "src/ts/util";
+    let langChanged = false
+</script>
+<h2 class="mb-2 text-2xl font-bold mt-2">{language.language}</h2>
+
+<span class="text-neutral-200 mt-4">{language.UiLanguage}</span>
+<select class="bg-transparent input-text mt-2 text-gray-200 appearance-none text-sm" bind:value={$DataBase.language} on:change={async () => {
+    await sleep(10)
+    changeLanguage($DataBase.language)
+    langChanged = true
+}}>
+    <option value="en" class="bg-darkbg appearance-none">English</option>
+    <option value="ko" class="bg-darkbg appearance-none">Korean</option>
+</select>
+{#if langChanged}
+    <span class="bg-red-500 text-sm">Close the settings to take effect</span>
+{/if}
+<span class="text-neutral-200 mt-4">{language.translator}</span>
+<select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none text-sm" bind:value={$DataBase.translator}>
+    <option value="" class="bg-darkbg appearance-none">{language.disabled}</option>
+    <option value="ko" class="bg-darkbg appearance-none">Korean</option>
+    <option value="ru" class="bg-darkbg appearance-none">Russian</option>
+    <option value="zh" class="bg-darkbg appearance-none">Chinese</option>
+    <option value="ja" class="bg-darkbg appearance-none">Japanese</option>
+    <option value="fr" class="bg-darkbg appearance-none">French</option>
+    <option value="es" class="bg-darkbg appearance-none">Spanish</option>
+</select>

src/lib/Setting/Settings.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { ActivityIcon, AlignLeft, BookIcon, BotIcon, BoxIcon, CodeIcon, DiamondIcon, FolderIcon, MonitorIcon, Sailboat, UserIcon, XCircleIcon } from "lucide-svelte";
+    import { ActivityIcon, AlignLeft, BookIcon, BotIcon, BoxIcon, CodeIcon, DiamondIcon, FolderIcon, LanguagesIcon, MonitorIcon, Sailboat, UserIcon, XCircleIcon } from "lucide-svelte";
     import { language } from "src/lang";
     import DisplaySettings from "./Pages/DisplaySettings.svelte";
     import UserSettings from "./Pages/UserSettings.svelte";
@@ -14,6 +14,7 @@
     import GlobalLoreBookSettings from "./Pages/GlobalLoreBookSettings.svelte";
     import Lorepreset from "./lorepreset.svelte";
   import GlobalRegex from "./Pages/GlobalRegex.svelte";
+  import LanguageSettings from "./Pages/LanguageSettings.svelte";
     let selected = -1
     let openPresetList = false
     let openLoreList = false
@@ -51,6 +52,12 @@
                     <MonitorIcon />
                     <span>{language.display}</span>
                 </button>
+                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 10} on:click={() => {
+                    selected = 10
+                }}>
+                    <LanguagesIcon />
+                    <span>{language.language}</span>
+                </button>
                 <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 8} on:click={() => {
                     selected = 8
                 }}>
@@ -116,6 +123,8 @@
                     <GlobalLoreBookSettings bind:openLoreList />
                 {:else if selected === 9}
                     <GlobalRegex/>
+                {:else if selected === 10}
+                    <LanguageSettings/>
                 {/if}
                 <button class="absolute top-2 right-2 hover:text-green-500" on:click={() => {
                     if(window.innerWidth >= 700){

src/ts/translator/translator.ts

@@ -1,4 +1,6 @@
+import { get } from "svelte/store"
 import { translatorPlugin } from "../process/plugins"
+import { DataBase } from "../database"
 
 let cache={
     origin: [''],
@@ -8,7 +10,8 @@ let cache={
 let waitTrans = 0
 
 export async function translate(text:string, reverse:boolean) {
-    const plug = await translatorPlugin(text, reverse ? 'ko' : 'en', reverse ? 'en' : 'ko')
+    let db = get(DataBase)
+    const plug = await translatorPlugin(text, reverse ? db.translator: 'en', reverse ? 'en' : db.translator)
     if(plug){
         return plug.content
     }
@@ -29,12 +32,12 @@ export async function translate(text:string, reverse:boolean) {
 }
 
 async function googleTrans(text:string, reverse:boolean) {
-
+    let db = get(DataBase)
     const arg = {
 
-        from: reverse ? 'ko' : 'en',
+        from: reverse ? db.translator : 'en',
 
-        to: reverse ? 'en' : 'ko',
+        to: reverse ? 'en' : db.translator,
 
         host: 'translate.googleapis.com',