Add persona portraits with lesser change (#289)

# PR Checklist
- [x] Did you check if it works normally in all models? *ignore this
when it dosen't uses models*
- [x] Did you check if it works normally in all of web, local and node
hosted versions? if it dosen't, did you blocked it in those versions?
- [x] Did you added a type def?

# Description

![image](https://github.com/kwaroran/RisuAI/assets/157843588/11d2347e-5957-4e2d-bce0-fcf8c670410c)

![image](https://github.com/kwaroran/RisuAI/assets/157843588/a3c222a1-8adb-4ec9-a016-1baeee918e6f)

src/lang/en.ts

@@ -515,6 +515,7 @@ export const languageEnglish = {
     license: "License",
     licenseDesc: "You can choose license for the downloaders to limit the usages of your card's prompt.",
     passwordDesc: "You can set a password to protect your card from unauthorized access.",
+    largePersonaPortrait: "Persona Portrait",
     module: "Module",
     modules: "Modules",
     noModules: "No modules has been installed.",

src/lang/ko.ts

@@ -429,4 +429,5 @@ export const languageKorean = {
     template: "템플릿",
     editTranslationDisplay: "번역문 수정",
     memoryLimitThickness: "기억 한계선 두께",
+    largePersonaPortrait: "페르소나 세로 이미지",
 }

src/lib/ChatScreens/DefaultChatScreen.svelte

@@ -528,6 +528,7 @@
                         message={chat.data}
                         img={getCharImage($CurrentUserIcon, 'css')}
                         isLastMemory={$CurrentChat.lastMemory === (chat.chatId ?? 'none') && $CurrentShowMemoryLimit}
+                        largePortrait={$DataBase.personas[$DataBase.selectedPersona].largePortrait}
                     />
                 {/if}
             {/each}

src/lib/Setting/Pages/PersonaSettings.svelte

@@ -2,6 +2,7 @@
     import { language } from "src/lang";
     import BaseRoundedButton from "src/lib/UI/BaseRoundedButton.svelte";
     import Button from "src/lib/UI/GUI/Button.svelte";
+    import Check from "src/lib/UI/GUI/CheckInput.svelte";
     import TextAreaInput from "src/lib/UI/GUI/TextAreaInput.svelte";
     import TextInput from "src/lib/UI/GUI/TextInput.svelte";
     import { alertConfirm, alertError, alertSelect } from "src/ts/alert";
@@ -69,7 +70,7 @@
             {#if $DataBase.userIcon === ''}
                 <div class="rounded-md h-28 w-28 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" />
             {:else}
-                {#await getCharImage($DataBase.userIcon, 'css')}
+                {#await getCharImage($DataBase.userIcon, $DataBase.personas[$DataBase.selectedPersona].largePortrait ? 'lgcss' : 'css')}
                     <div class="rounded-md h-28 w-28 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" />
                 {:then im} 
                     <div class="rounded-md h-28 w-28 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" style={im} />                
@@ -99,6 +100,7 @@
                     changeUserPersona(0, 'noSave')
                 }
             }}>{language.remove}</Button>
+            <Check bind:check={$DataBase.personas[$DataBase.selectedPersona].largePortrait}>{language.largePortrait}</Check>
         </div>
     </div>
 </div>

src/ts/persona.ts

@@ -30,7 +30,8 @@ export function saveUserPersona() {
     db.personas[db.selectedPersona] = {
         name: db.username,
         icon: db.userIcon,
-        personaPrompt: db.personaPrompt
+        personaPrompt: db.personaPrompt,
+        largePortrait: db.personas[db.selectedPersona]?.largePortrait,
     }
     setDatabase(db)
 }

src/ts/storage/database.ts

@@ -529,6 +529,7 @@ export interface Database{
         personaPrompt:string
         name:string
         icon:string
+        largePortrait?:boolean
     }[]
     assetWidth:number
     animationSpeed:number