[feat][experimental] Add auto-translate input message functionality and language support in chat panel and settings

This commit adds new entries in the language files and UI support for auto-translate messages. The new feature uses a textarea input field to translate messages as they are typed, and the translated text is shown in a new field. Also, the language settings now provide an option to enable/disable auto message translation. The code changes include adding a new function to update the input sizes for both input fields and some minor code refactoring to support new functionality.
2023-06-06 18:37:19 +09:00
parent e913a641fa
commit 89dc9c8c80
6 changed files with 97 additions and 7 deletions
--- a/src/lang/cn.ts
+++ b/src/lang/cn.ts
@@ -303,4 +303,6 @@ export const languageChinese = {
    tags: "标签",
    copied: "已复制",
    useChatCopy: "使用聊天复制",
+    autoTranslateInput: "使用自动翻译输入",
+    enterMessageForTranslateToEnglish: "输入要翻译为英语的消息",
 }
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -307,4 +307,6 @@ export const languageEnglish = {
    backgroundHTML: "Background Embedding",
    copied: "Copied",
    useChatCopy: "Use Chat Message Copy",
+    autoTranslateInput: "Auto Translate Input",
+    enterMessageForTranslateToEnglish: "Enter Message for Translate to English",
 }
--- a/src/lang/ko.ts
+++ b/src/lang/ko.ts
@@ -279,4 +279,6 @@ export const languageKorean = {
    backgroundHTML: "백그라운드 임베딩",
    copied: "복사됨",
    useChatCopy: "채팅 메시지 복사 사용",
+    autoTranslateInput: "입력 자동 번역",
+    enterMessageForTranslateToEnglish: "영어로 번역할 메시지를 입력해주세요",
 }
--- a/src/lib/ChatScreens/DefaultChatScreen.svelte
+++ b/src/lib/ChatScreens/DefaultChatScreen.svelte
@@ -16,8 +16,10 @@
    import CreatorQuote from "./CreatorQuote.svelte";
    import { stopTTS } from "src/ts/process/tts";
    import MainMenu from '../UI/MainMenu.svelte';
+    import Help from '../Others/Help.svelte';

-    let messageInput = ''
+    let messageInput:string = ''
+    let messageInputTranslate:string = ''
    let openMenu = false
    export let openChatList = false
    let loadPages = 30
@@ -26,6 +28,7 @@
    let rerollid = -1
    let lastCharId = -1
    let doingChatInputTranslate = false
+
    async function send() {
        let selectedChar = $selectedCharID
        console.log('send')
@@ -67,10 +70,11 @@
            }
        }
        messageInput = ''
+        messageInputTranslate = ''
        $DataBase.characters[selectedChar].chats[$DataBase.characters[selectedChar].chatPage].message = cha
        rerolls = []
        await sleep(10)
-        updateInputSize()
+        updateInputSizeAll()
        await sendChatMain()

    }
@@ -170,7 +174,21 @@
    export let customStyle = ''
    let inputHeight = "44px"
    let inputEle:HTMLTextAreaElement
+    let inputTranslateHeight = "44px"
+    let inputTranslateEle:HTMLTextAreaElement

+    function updateInputSizeAll() {
+        updateInputSize()
+        updateInputTranslateSize()
+    }
+
+    function updateInputTranslateSize() {
+        if(inputTranslateEle) {
+            inputTranslateEle.style.height = "0";
+            inputTranslateHeight = (inputTranslateEle.scrollHeight) + "px";
+            inputTranslateEle.style.height = inputTranslateHeight
+        }
+    }
    function updateInputSize() {
        if(inputEle){
            inputEle.style.height = "0";
@@ -179,7 +197,26 @@
        }
    }

-    $: updateInputSize()
+    $: updateInputSizeAll()
+
+    function updateInputTransateMessage(reverse: boolean) {
+        if(reverse && messageInputTranslate === '') {
+            messageInput = ''
+            return
+        }
+        if(!reverse && messageInput === '') {
+            messageInputTranslate = ''
+            return
+        }
+        translate(reverse ? messageInputTranslate : messageInput, reverse).then((translatedMessage) => {
+            if(translatedMessage){
+                if(reverse)
+                    messageInput = translatedMessage
+                else
+                    messageInputTranslate = translatedMessage
+            }
+        })
+    }
 </script>
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="w-full h-full" style={customStyle} on:click={() => {
@@ -211,7 +248,7 @@
                            e.preventDefault()
                        }
                    }}
-                    on:input={updateInputSize}
+                    on:input={()=>{updateInputSizeAll();updateInputTransateMessage(false)}}
                    style:height={inputHeight}
                />

@@ -234,6 +271,33 @@
                    class="mr-2 bg-gray-500 flex justify-center items-center text-white w-12 h-12 rounded-md hover:bg-green-500 transition-colors"><MenuIcon />
                    </div>
            </div>
+            {#if $DataBase.useAutoTranslateInput && $DataBase.useExperimental}
+                <div class="flex items-center mt-2 mb-2 w-full">
+                    <label for='messageInputTranslate' class="text-neutral-200 ml-4">
+                        <LanguagesIcon />
+                    </label>
+                    <textarea id = 'messageInputTranslate' class="text-neutral-200 p-2 min-w-0 bg-transparent input-text text-xl flex-grow ml-4 mr-2 border-gray-700 resize-none focus:bg-selected overflow-y-hidden overflow-x-hidden max-w-full"
+                        bind:value={messageInputTranslate}
+                        bind:this={inputTranslateEle}
+                        on:keydown={(e) => {
+                            if(e.key.toLocaleLowerCase() === "enter" && (!e.shiftKey)){
+                                if($DataBase.sendWithEnter){
+                                    send()
+                                    e.preventDefault()
+                                }
+                            }
+                            if(e.key.toLocaleLowerCase() === "m" && (e.ctrlKey)){
+                                reroll()
+                                e.preventDefault()
+                            }
+                        }}
+                        on:input={()=>{updateInputSizeAll();updateInputTransateMessage(true)}}
+                        placeholder={language.enterMessageForTranslateToEnglish}
+                        style:height={inputTranslateHeight}
+                    />
+                </div>
+            {/if}
+            
            {#if $DataBase.useAutoSuggestions}
                <Suggestion messageInput={(msg)=>messageInput=msg} {send}/>
            {/if}
@@ -362,7 +426,18 @@
                            <LanguagesIcon />
                            <span class="ml-2">{language.translateInput}</span>
                        </div>
+                        {#if $DataBase.useExperimental}
+                            <div class={"flex items-center cursor-pointer "+ ($DataBase.useAutoTranslateInput ? 'text-green-500':'lg:hover:text-green-500')} on:click={() => {
+                                $DataBase.useAutoTranslateInput = !$DataBase.useAutoTranslateInput
+                            }}>
+                                <LanguagesIcon />
+                                <span class="ml-2">{language.autoTranslateInput}</span>
+                                <Help key="experimental" />
+                            </div>
+                        {/if}
+                        
                    {/if}
+                    
                    <div class={"flex items-center cursor-pointer "+ ($DataBase.useAutoSuggestions ? 'text-green-500':'lg:hover:text-green-500')} on:click={async () => {
                        $DataBase.useAutoSuggestions = !$DataBase.useAutoSuggestions
                    }}>
--- a/src/lib/Setting/Pages/LanguageSettings.svelte
+++ b/src/lib/Setting/Pages/LanguageSettings.svelte
@@ -3,6 +3,7 @@
 import { changeLanguage, language } from "src/lang";
    import { DataBase } from "src/ts/storage/database";
    import { sleep } from "src/ts/util";
+    import Help from "src/lib/Others/Help.svelte";
    let langChanged = false
 </script>
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.language}</h2>
@@ -39,4 +40,11 @@ import { changeLanguage, language } from "src/lang";
        <Check bind:check={$DataBase.autoTranslate} />
        <span>{language.autoTranslation}</span>
    </div>
+    {#if $DataBase.useExperimental}
+        <div class="flex items-center mt-2">
+            <Check bind:check={$DataBase.useAutoTranslateInput} />
+            <span>{language.autoTranslateInput}</span>
+            <Help key="experimental" />
+        </div>
+    {/if}
 {/if}
--- a/src/ts/storage/database.ts
+++ b/src/ts/storage/database.ts
@@ -500,9 +500,10 @@ export interface Database{
    koboldURL:string
    advancedBotSettings:boolean
    useAutoSuggestions:boolean
-    autoSuggestPrompt:string,
-    claudeAPIKey:string,
-    useChatCopy:boolean,
+    autoSuggestPrompt:string
+    claudeAPIKey:string
+    useChatCopy:boolean
+    useAutoTranslateInput:boolean
 }

 interface hordeConfig{