Add persona portraits with lesser change

src/lang/en.ts

@@ -515,4 +515,5 @@ 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",
 }

src/lang/ko.ts

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

src/lib/ChatScreens/DefaultChatScreen.svelte

@@ -527,6 +527,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

@@ -27,11 +27,9 @@ export async function selectUserImg() {
 
 export function saveUserPersona() {
     let db = get(DataBase)
-    db.personas[db.selectedPersona] = {
-        name: db.username,
-        icon: db.userIcon,
-        personaPrompt: db.personaPrompt
-    }
+    db.personas[db.selectedPersona].name = db.username;
+    db.personas[db.selectedPersona].icon = db.userIcon;
+    db.personas[db.selectedPersona].personaPrompt = db.personaPrompt;
     setDatabase(db)
 }
 

src/ts/storage/database.ts

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