feat: add translation feature and ban character set functionality

src/lib/Playground/PlaygroundMenu.svelte

@@ -16,6 +16,7 @@
     import { joinMultiuserRoom } from "src/ts/sync/multiuser";
   import PlaygroundSubtitle from "./PlaygroundSubtitle.svelte";
   import PlaygroundImageTrans from "./PlaygroundImageTrans.svelte";
+  import PlaygroundTranslation from "./PlaygroundTranslation.svelte";
 
     let easterEggTouch = $state(0)
 
@@ -95,6 +96,11 @@
             }}>
                 <h1 class="text-2xl font-bold text-start">{language.imageTranslation}</h1>
             </button>
+            <button class="bg-darkbg rounded-md p-6 flex flex-col transition-shadow hover:ring-1" onclick={() => {
+                PlaygroundStore.set(11)
+            }}>
+                <h1 class="text-2xl font-bold text-start">{language.translator}</h1>
+            </button>
             <button class="bg-darkbg rounded-md p-6 flex flex-col transition-shadow hover:ring-1" onclick={() => {
                 PlaygroundStore.set(101)
             }}>
@@ -157,6 +163,9 @@
             {#if $PlaygroundStore === 10}
                <PlaygroundImageTrans/>
             {/if}
+            {#if $PlaygroundStore === 11}
+                <PlaygroundTranslation/>
+            {/if}
             {#if $PlaygroundStore === 101}
                 <ToolConvertion/>
             {/if}  

src/lib/Playground/PlaygroundSubtitle.svelte

@@ -10,7 +10,7 @@
     import { selectFileByDom, selectSingleFile, sleep } from "src/ts/util";
     import { alertError, alertSelect } from "src/ts/alert";
     import { risuChatParser } from "src/ts/parser.svelte";
-    import { AppendableBuffer, downloadFile, globalFetch } from "src/ts/globalApi.svelte";
+    import { AppendableBuffer, downloadFile, getLanguageCodes, globalFetch } from "src/ts/globalApi.svelte";
     import SliderInput from "../UI/GUI/SliderInput.svelte";
     import SelectInput from "../UI/GUI/SelectInput.svelte";
     import OptionInput from "../UI/GUI/OptionInput.svelte";
@@ -31,40 +31,6 @@
     let mode = $state('llm')
     let sourceLang:string|null = $state(null)    
 
-    function getLanguageCodes(){
-        let languageCodes:{
-            code: string
-            name: string
-        }[] = []
-
-        for(let i=0x41;i<=0x5A;i++){
-            for(let j=0x41;j<=0x5A;j++){
-                languageCodes.push({
-                    code: String.fromCharCode(i) + String.fromCharCode(j),
-                    name: ''
-                })
-            }
-        }
-        
-        languageCodes = languageCodes.map(v => {
-            return {
-                code: v.code,
-                name: new Intl.DisplayNames([
-                    DBState.db.language === 'cn' ? 'zh' : DBState.db.language
-                ], {
-                    type: 'language',
-                    fallback: 'none'
-                }).of(v.code)
-            }
-        }).filter((a) => {
-            return a.name
-        }).sort((a, b) => a.name.localeCompare(b.name))
-
-        return languageCodes
-    }
-
-
-
     async function runLLMMode() {
         outputText = 'Loading...\n\n'
 

src/lib/Playground/PlaygroundTranslation.svelte

@@ -0,0 +1,62 @@
+
+<script lang="ts">
+    import { language } from "src/lang";
+    import TextAreaInput from "../UI/GUI/TextAreaInput.svelte";
+    import { LLMCacheStorage, runTranslator } from "src/ts/translator/translator";
+    import Button from "../UI/GUI/Button.svelte";
+    import SelectInput from "../UI/GUI/SelectInput.svelte";
+    import { getLanguageCodes } from "src/ts/globalApi.svelte";
+    import OptionInput from "../UI/GUI/OptionInput.svelte";
+
+
+    const userPreferedLang = navigator.language.split('-')[0]
+
+    let r = $state('')
+    let sourceLang = $state('en')
+    let output = $state('')
+    let outputLang = $state(userPreferedLang)
+    let loading = $state(false)
+</script>
+
+
+
+<span>{language.sourceLanguage}</span>
+<SelectInput bind:value={sourceLang}>
+    {#each getLanguageCodes() as lang}
+        <OptionInput value={lang.code}>{lang.name}</OptionInput>
+    {/each}
+</SelectInput>
+<TextAreaInput bind:value={r} />
+
+<span>{language.translatorLanguage}</span>
+<SelectInput bind:value={outputLang}>
+    {#each getLanguageCodes() as lang}
+        <OptionInput value={lang.code}>{lang.name}</OptionInput>
+    {/each}
+</SelectInput>
+<TextAreaInput value={output} />
+
+<Button className="mt-4" onclick={async () => {
+    try {
+        if(loading){
+            return
+        }
+        loading = true
+        output = await runTranslator(r, false, sourceLang, outputLang)   
+        loading = false
+    } catch (error) {
+        console.error(error)
+        loading = false
+    }
+}}>
+    {#if loading}
+        Loading...
+    {:else}
+        Translate
+    {/if}
+</Button>
+<Button className="mt-4" onclick={() => {
+    LLMCacheStorage.clear()
+}}>
+    Clear Cache
+</Button>

src/lib/Setting/Pages/AdvancedSettings.svelte

@@ -13,12 +13,53 @@
     import { installPython } from "src/ts/process/models/local";
     import { Capacitor } from "@capacitor/core";
     import { capStorageInvestigation } from "src/ts/storage/mobileStorage";
+    import Arcodion from "src/lib/UI/Arcodion.svelte";
 
     let estaStorage:{
         key:string,
         size:string,
     }[] = $state([])
 
+    const characterSets = [
+        'Latn',
+        'Hani',
+        'Arab',
+        'Deva',
+        'Cyrl',
+        'Beng',
+        'Hrkt',
+        'Telu',
+        'Hang',
+        'Taml',
+        'Thai',
+        'Gujr',
+        'Knda',
+        'Ethi',
+        'Khmr',
+        'Grek',
+        'Hebr',
+    ]
+
+    const characterSetsPreview = {
+        'Latn': "ABC",
+        'Hani': "汉漢",
+        'Arab': "اعب",
+        'Deva': "अआइ",
+        'Cyrl': "АБВ",
+        'Beng': "অআই",
+        'Hrkt': "あア",
+        'Telu': "అఆఇ",
+        'Hang': "가나다",
+        'Taml': "அஆஇ",
+        'Thai': "กขค",
+        'Gujr': "અઆઇ",
+        'Knda': "ಅಆಇ",
+        'Ethi': "ሀሁሂ",
+        'Khmr': "កខគ",
+        'Grek': "ΑΒΓ",
+        'Hebr': "אבג",
+
+    }
 </script>
 <h2 class="text-2xl font-bold mt-2">{language.advancedSettings}</h2>
 <span class="text-draculared text-xs mb-2">{language.advancedSettingsWarn}</span>
@@ -168,6 +209,21 @@
         <Check bind:check={DBState.db.usePlainFetch} name={language.forcePlainFetch}> <Help key="forcePlainFetch" unrecommended/></Check>
     </div>
 {/if}
+
+<Arcodion styled name={language.banCharacterset}>
+    {#each characterSets as set}
+        <Button styled={DBState.db.banCharacterset.includes(set) ? 'primary' : "outlined"} onclick={(e) => {
+            if (DBState.db.banCharacterset.includes(set)) {
+                DBState.db.banCharacterset = DBState.db.banCharacterset.filter((item) => item !== set)
+            } else {
+                DBState.db.banCharacterset.push(set)
+            }
+        }}>
+            {new Intl.DisplayNames([navigator.language,'en'], { type: 'script' }).of(set)} ({characterSetsPreview[set]})
+        </Button>
+    {/each}
+</Arcodion>
+
 <Button
     className="mt-4"
     onclick={async () => {