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>