[fix] Translation Improvements, Fix WelcomeRisu (#129)

Welcome Risu 저장 안 되는 버그 수정, openai 사용시 프록시서버 없어도 사용 가능하게 수정
웹모드에서 openai api 사용할 때 proxy를 사용해야만 하는 이유가 없다면
knownhost로 등록해서 plain방식으로 호출하게 변경 하는게 좋을 듯 합니다.

[Video6.webm](https://github.com/kwaroran/RisuAI/assets/11344967/f0b7a5f9-f088-465a-99ff-11be63a3e913)
현재 채팅 응답줄의 상태를 파악하기 쉽도록
채팅 응답 편집 모드 ON
번역 모드 ON
상태일 경우 컬러 토글된 상태로 유지하도록 변경해보았습니다.

[Video7.webm](https://github.com/kwaroran/RisuAI/assets/11344967/f88f8593-f863-4132-af3e-df7f5b20c72b)
스트리밍 응답시 번역 원문 보이면서 깜빡이는 현상 개선

src/lang/en.ts

@@ -94,6 +94,8 @@ export const languageEnglish = {
         apiKeyhelp: "You can get api key from: ",
         setupSelfHelp: "Setup yourself in settings, after Welcome screen ends.",
         theme: "Select your theme",
+        themeDescWifulike: "Not suitable for mobile",
+        themeDescWifuCut: "Suitable for mobile",
         texttheme: "Select your text color",
         inputName: "Lastly, Input your Nickname."
     },

src/lang/ko.ts

@@ -203,6 +203,8 @@ export const languageKorean = {
         apiKeyhelp: "이곳에서 API키를 얻을 수 있습니다: ",
         setupSelfHelp: "첫 셋업 화면이 끝난 뒤, 설정에서 직접 수정해 주세요",
         theme: "테마를 입력해 주세요",
+        themeDescWifulike: "모바일에 적합하지 않습니다",
+        themeDescWifuCut: "모바일 환경에 적합합니다",
         texttheme: "텍스트 색상을 선택해주세요",
         inputName: "마지막으로, 닉네임을 입력해 주세요"
     },

src/lib/ChatScreens/Chat.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { ArrowLeft, ArrowRight, ChevronLeftIcon, ChevronRightIcon, EditIcon, LanguagesIcon, RefreshCcwIcon, TrashIcon } from "lucide-svelte";
+    import { ArrowLeft, ArrowRight, EditIcon, LanguagesIcon, RefreshCcwIcon, TrashIcon } from "lucide-svelte";
     import { ParseMarkdown } from "../../ts/parser";
     import AutoresizeArea from "./AutoresizeArea.svelte";
     import { alertConfirm } from "../../ts/alert";
@@ -22,7 +22,8 @@
     export let altGreeting = false
 
     let msgDisplay = ''
-
+    let msgTranslated = ''
+    let translated = false;
     async function rm(){
         const rm = $DataBase.askRemoval ? await alertConfirm(language.removeChat) : true
         if(rm){
@@ -53,8 +54,11 @@
 
     async function displaya(message:string){
         if($DataBase.autoTranslate && $DataBase.translator !== ''){
-            msgDisplay = replacePlaceholders(message, name)
+            if(msgTranslated==='')
+                msgDisplay = replacePlaceholders(message, name)
             msgDisplay = await translate(replacePlaceholders(message, name), false)
+            msgTranslated = msgDisplay
+            translated = true;
         }
         else{
             msgDisplay = replacePlaceholders(message, name)
@@ -77,7 +81,7 @@
                 <span class="chat text-xl unmargin">{name}</span>
                 <div class="flex-grow flex items-center justify-end text-gray-500">
                     {#if idx > -1}
-                        <button class="hover:text-green-500 transition-colors" on:click={() => {
+                        <button class={"hover:text-green-500 transition-colors "+(editMode?'text-green-400':'')} on:click={() => {
                             if(!editMode){
                                 editMode = true
                             }
@@ -93,17 +97,26 @@
                         </button>
                     {/if}
                     {#if $DataBase.translator !== ''}
-                        <button class="ml-2 cursor-pointer hover:text-green-500 transition-colors" class:translating={translating} on:click={async () => {
+                        <button class={"ml-2 cursor-pointer hover:text-green-500 transition-colors " + (translated ? 'text-green-400':'')} class:translating={translating} on:click={async () => {
                             if(translating){
                                 return
                             }
-                            if(msgDisplay === replacePlaceholders(message, name)){
+                            if(!translated){
                                 translating = true
+                                if(msgTranslated !== ''){
+                                    msgDisplay = msgTranslated
+                                    translating = false
+                                    translated = true
+                                    return
+                                }
                                 msgDisplay = (await translate(replacePlaceholders(message, name), false))
+                                msgTranslated = msgDisplay
                                 translating = false
+                                translated = true
                             }
                             else{
                                 msgDisplay = replacePlaceholders(message, name)
+                                translated = false
                             }
                         }}>
                             <LanguagesIcon />

src/lib/Others/WelcomeRisu.svelte

@@ -23,10 +23,12 @@
             <div class="flex flex-col items-start ml-2">
                 <button class="hover:text-green-500 transition-colors" on:click={() => {
                     changeLanguage('en')
+                    $DataBase.language='en'
                     step = 1
                 }}>• English</button>
                 <button class="hover:text-green-500 transition-colors" on:click={() => {
                     changeLanguage('ko')
+                    $DataBase.language='ko'
                     step = 1
                 }}>• 한국어</button>
             </div>
@@ -100,14 +102,19 @@
                 <button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
                     $DataBase.theme = 'waifu'
                     step += 1
-                }}><span>• Waifulike (Not suitable for mobile)</span>
+                }}><span>• Waifulike ({language.setup.themeDescWifulike})</span>
                 <img class="w-3/4 mt-2" src="/ss3.webp" alt="example"></button>
+                <button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
+                    $DataBase.theme = 'waifuMobile'
+                    step += 1
+                }}><span>• WaifuCut ({language.setup.themeDescWifuCut})</span>
+                <img class="w-3/4 mt-2" src="/ss4.webp" alt="example"></button>
             </div>
         {:else if step === 4}
             <h2>{language.setup.texttheme}</h2>
             <div class="flex flex-col items-start ml-2">
                 <button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
-                    $DataBase.theme = ''
+                    $DataBase.textTheme = 'standard'
                     step += 1
                 }}><span>• {language.classicRisu}</span>
                     <div class="border-borderc py-2 px-8 not-prose">
@@ -120,7 +127,7 @@
             </div>
             <div class="flex flex-col items-start ml-2 mt-2 mb-2">
                 <button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
-                    $DataBase.theme = ''
+                    $DataBase.textTheme = 'highcontrast'
                     step += 1
                 }}><span>• {language.highcontrast}</span>
                     <div class="border-borderc p-2 py-2 px-8  not-prose">

src/ts/storage/globalApi.ts

@@ -367,7 +367,7 @@ export async function loadData() {
     }
 }
 
-const knownHostes = ["localhost","172.0.0.1"]
+const knownHostes = ["localhost","127.0.0.1","api.openai.com"]
 
 export async function globalFetch(url:string, arg:{body?:any,headers?:{[key:string]:string}, rawResponse?:boolean, method?:"POST"|"GET"}) {
     try {