[feat] persona import/export

This commit is contained in:
kwaroran
2023-08-17 18:45:34 +09:00
parent 5f7a5386d4
commit 5c83634d25
7 changed files with 226 additions and 62 deletions

View File

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