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/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>