[feat] persona import/export

src/lang/en.ts

@@ -19,7 +19,8 @@ export const languageEnglish = {
         httpError: 'Error: error in request:',
         noData: 'There is no data in file, or the file is corrupted',
         onlyOneChat: 'There must be least one chat',
-        alreadyCharInGroup: "There is already a character with the same name in the group."
+        alreadyCharInGroup: "There is already a character with the same name in the group.",
+        noUserIcon: "You must set your icon first.",
     },
     showHelp: "Show Help",
     help:{
@@ -421,4 +422,8 @@ export const languageEnglish = {
     translatorType: "Translator Type",
     deeplKey: "deepL API Key",
     deeplFreeKey: "deepL Free API Key",
+    exportPersona: "Export Persona",
+    importPersona: "Import Persona",
+    export: "Export",
+    import: "Import",
 }

src/lib/Setting/Pages/PersonaSettings.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
     import { language } from "src/lang";
-  import BaseRoundedButton from "src/lib/UI/BaseRoundedButton.svelte";
-  import TextAreaInput from "src/lib/UI/GUI/TextAreaInput.svelte";
-  import TextInput from "src/lib/UI/GUI/TextInput.svelte";
-  import { alertConfirm, alertError } from "src/ts/alert";
-    import { changeUserPersona, getCharImage, saveUserPersona, selectUserImg } from "src/ts/characters";
+    import BaseRoundedButton from "src/lib/UI/BaseRoundedButton.svelte";
+    import Button from "src/lib/UI/GUI/Button.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";
+    import { getCharImage } from "src/ts/characters";
+    import { changeUserPersona, exportUserPersona, importUserPersona, saveUserPersona, selectUserImg } from "src/ts/persona";
     import { DataBase, setDatabase } from "src/ts/storage/database";
-  import { get } from "svelte/store";
+    import { get } from "svelte/store";
 
 </script>
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.persona}</h2>
@@ -29,7 +31,11 @@
     {/each}
     <div class="flex justify-center items-center ml-2 mr-2">
         <BaseRoundedButton
-            onClick={() => {
+            onClick={async () => {
+                const sel = parseInt(await alertSelect([language.createfromScratch, language.importCharacter]))
+                if(sel === 1){
+                    return
+                }
                 let db = get(DataBase)
                 db.personas.push({
                     name: 'New Persona',
@@ -57,8 +63,8 @@
 <div class="mt-4 mb-4 border-y-1 border-y-selected">
 </div>
 
-<div class="flex w-full items-starts rounded-md bg-darkbg p-4">
-    <div class="flex flex-col mt-4">
+<div class="flex w-full items-starts rounded-md bg-darkbg p-4 max-w-full flex-wrap">
+    <div class="flex flex-col mt-4 mr-4">
         <button on:click={() => {selectUserImg()}}>
             {#if $DataBase.userIcon === ''}
                 <div class="rounded-md h-28 w-28 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" />
@@ -71,13 +77,16 @@
             {/if}
         </button>
     </div>
-    <div class="flex flex-grow flex-col p-2 ml-4">
+    <div class="flex flex-grow flex-col p-2 max-w-full">
         <span class="text-sm text-textcolor2">{language.name}</span>
         <TextInput marginBottom size="lg" placeholder="User" bind:value={$DataBase.username} />
         <span class="text-sm text-textcolor2">{language.description}</span>
         <TextAreaInput height="32" autocomplete="off" bind:value={$DataBase.personaPrompt} placeholder={`Put the description of this persona here.\nExample: [<user> is a 20 year old girl.]`} />
-        <div>
-            <button class="float-right rounded-md border border-red-700 p-2 hover:bg-red-700 transition-colors mt-4 text-sm" on:click={async () => {
+        <div class="flex gap-2 mt-4 max-w-full flex-wrap">
+            <Button on:click={exportUserPersona}>{language.export}</Button>
+            <Button on:click={importUserPersona}>{language.import}</Button>
+
+            <Button styled="danger" on:click={async () => {
                 if($DataBase.personas.length === 1){
                     return
                 }
@@ -89,9 +98,7 @@
                     $DataBase.personas = personas
                     changeUserPersona(0, 'noSave')
                 }
-            }}>
-                {language.remove}
-            </button>
+            }}>{language.remove}</Button>
         </div>
     </div>
 </div>

src/lib/Setting/Pages/UserSettings.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
     import { language } from "src/lang";
     import { hubURL } from "src/ts/characterCards";
-    import { getCharImage, selectUserImg } from "src/ts/characters";
     import { loadRisuAccountData, saveRisuAccountData } from "src/ts/drive/accounter";
     import { DataBase } from "src/ts/storage/database";
     import Check from "src/lib/UI/GUI/CheckInput.svelte";
-  import { alertConfirm, alertSelect } from "src/ts/alert";
-  import { forageStorage, isNodeServer, isTauri } from "src/ts/storage/globalApi";
-  import { unMigrationAccount } from "src/ts/storage/accountStorage";
-  import { checkDriver } from "src/ts/drive/drive";
+    import { alertConfirm } from "src/ts/alert";
+    import { forageStorage, isNodeServer, isTauri } from "src/ts/storage/globalApi";
+    import { unMigrationAccount } from "src/ts/storage/accountStorage";
+    import { checkDriver } from "src/ts/drive/drive";
     let openIframe = false
     let openIframeURL = ''
     let popup:Window = null

src/lib/UI/GUI/Button.svelte

@@ -1,6 +1,10 @@
 <button
     on:click
-    class="{selected ? 'bg-borderc' : 'bg-darkbutton'} border border-darkborderc text-textcolor rounded-md shadow-sm hover:bg-borderc focus:outline-none focus:ring-2 focus:ring-borderc transition-colors duration-200{className ? (" " + className) : ""}"
+    class="{
+        styled === 'primary' ?
+        ((selected ? 'bg-borderc' : 'bg-darkbutton') + " hover:bg-borderc focus:ring-borderc border-darkborderc")
+        : ((selected ? 'bg-red-800' : 'bg-red-700') + ' hover:bg-red-500 focus:ring-red-600 border-red-600')
+    } border text-textcolor rounded-md shadow-sm focus:outline-none focus:ring-2 transition-colors duration-200{className ? (" " + className) : ""}"
     class:px-4 = {size == "md"}
     class:px-2 = {size == "sm"}
     class:px-6 = {size == "lg"}
@@ -14,6 +18,7 @@
 </button>
 <script lang="ts">
     export let selected = false
+    export let styled:'primary'|'danger' = 'primary'
     export let className = ""
     export let size: "sm" | "md" | "lg" = "md"
 </script>

src/ts/characters.ts

@@ -77,46 +77,6 @@ export async function selectCharImg(charId:number) {
     setDatabase(db)
 }
 
-export async function selectUserImg() {
-    const selected = await selectSingleFile(['png'])
-    if(!selected){
-        return
-    }
-    const img = selected.data
-    let db = get(DataBase)
-    const imgp = await saveImage(img)
-    db.userIcon = imgp
-    db.personas[db.selectedPersona] = {
-        name: db.username,
-        icon: db.userIcon,
-        personaPrompt: db.personaPrompt
-    }
-    setDatabase(db)
-}
-
-export function saveUserPersona() {
-    let db = get(DataBase)
-    db.personas[db.selectedPersona] = {
-        name: db.username,
-        icon: db.userIcon,
-        personaPrompt: db.personaPrompt
-    }
-    setDatabase(db)
-}
-
-export function changeUserPersona(id:number, save:'save'|'noSave' = 'save') {
-    if(save === 'save'){
-        saveUserPersona()
-    }
-    let db = get(DataBase)
-    const pr = db.personas[id]
-    db.personaPrompt = pr.personaPrompt
-    db.username = pr.name,
-    db.userIcon = pr.icon
-    db.selectedPersona = id
-    setDatabase(db)
-    
-}
 
 export const addingEmotion = writable(false)
 

src/ts/persona.ts

@@ -0,0 +1,118 @@
+import { get } from "svelte/store"
+import { DataBase, saveImage, setDatabase } from "./storage/database"
+import { selectSingleFile, sleep } from "./util"
+import { alertError, alertNormal, alertStore } from "./alert"
+import * as yuso from 'yuso'
+import { downloadFile, readImage } from "./storage/globalApi"
+import { language } from "src/lang"
+import { cloneDeep } from "lodash"
+
+export async function selectUserImg() {
+    const selected = await selectSingleFile(['png'])
+    if(!selected){
+        return
+    }
+    const img = selected.data
+    let db = get(DataBase)
+    const imgp = await saveImage(img)
+    db.userIcon = imgp
+    db.personas[db.selectedPersona] = {
+        name: db.username,
+        icon: db.userIcon,
+        personaPrompt: db.personaPrompt
+    }
+    setDatabase(db)
+}
+
+export function saveUserPersona() {
+    let db = get(DataBase)
+    db.personas[db.selectedPersona] = {
+        name: db.username,
+        icon: db.userIcon,
+        personaPrompt: db.personaPrompt
+    }
+    setDatabase(db)
+}
+
+export function changeUserPersona(id:number, save:'save'|'noSave' = 'save') {
+    if(save === 'save'){
+        saveUserPersona()
+    }
+    let db = get(DataBase)
+    const pr = db.personas[id]
+    db.personaPrompt = pr.personaPrompt
+    db.username = pr.name,
+    db.userIcon = pr.icon
+    db.selectedPersona = id
+    setDatabase(db)
+}
+
+
+
+interface PersonaCard {
+    name: string
+    personaPrompt: string
+}
+
+export async function exportUserPersona(){
+    let db = get(DataBase)
+    if(!db.userIcon){
+        alertError(language.errors.noUserIcon)
+        return
+    }
+    if((!db.username) || (!db.personaPrompt)){
+        alertError("username or persona prompt is empty")
+        return
+    }
+
+
+    let img = await readImage(db.userIcon)
+
+    let card:PersonaCard = cloneDeep({
+        name: db.username,
+        personaPrompt: db.personaPrompt,
+    })
+
+    alertStore.set({
+        type: 'wait',
+        msg: 'Loading... (Writing Exif)'
+    })
+
+    await sleep(10)
+
+    img = yuso.encode(yuso.trim(img), "persona",Buffer.from(JSON.stringify(card)).toString('base64'))
+
+    alertStore.set({
+        type: 'wait',
+        msg: 'Loading... (Writing)'
+    })
+    
+    await sleep(10)
+    await downloadFile(`${db.username.replace(/[<>:"/\\|?*\.\,]/g, "")}_export.png`, img)
+
+    alertNormal(language.successExport)
+}
+
+export async function importUserPersona(){
+
+    try {
+        const v = await selectSingleFile(['png'])
+        const data:PersonaCard = JSON.parse(Buffer.from(yuso.decode(v.data, "persona"), 'base64').toString('utf-8'))
+        if(data.name && data.personaPrompt){
+            let db = get(DataBase)
+            db.personas.push({
+                name: data.name,
+                icon: await saveImage(yuso.trim(v.data)),
+                personaPrompt: data.personaPrompt
+            })
+            setDatabase(db)
+            alertNormal(language.successImport)
+        }else{
+            alertError(language.errors.noData)
+        }
+
+    } catch (error) {
+        alertError(`${error}`)
+        return
+    }
+}