feat(sidebar-avatar): Creat SidebarIndicator & Refactor Sidebar UI
* Add SidebarIndicator * Remove BarIcon components at Character at Bar * It replaced by SidebarAvatar component * (TODO: Refactor BarIcon to UI Components & Sidebar State Flow) * Refactor getCharImage * Delete unused code BREAKING CHANGE:
This commit is contained in:
phyyou
@@ -1,36 +1,42 @@
|
||||
<!-- TODO: REMOVE AND REFACTOR TO BASE BUTTON UI COMPONENT -->
|
||||
|
||||
<script lang="ts">
|
||||
export let onClick = () => {};
|
||||
export let additionalStyle: string | Promise<string> = "";
|
||||
</script>
|
||||
|
||||
{#await additionalStyle}
|
||||
<button on:click={onClick} class="ico"><slot/></button>
|
||||
{:then as}
|
||||
<button on:click={onClick} class="ico" style={as}><slot/></button>
|
||||
<button on:click={onClick} class="ico"><slot /></button>
|
||||
{:then as}
|
||||
<button on:click={onClick} class="ico" style={as}><slot /></button>
|
||||
{/await}
|
||||
<script lang="ts">
|
||||
export let onClick = () => {}
|
||||
export let additionalStyle:string|Promise<string> = ''
|
||||
</script>
|
||||
<style>
|
||||
.ico {
|
||||
cursor: pointer;
|
||||
border-radius: 0.375rem;
|
||||
height: 3.5rem;
|
||||
width: 3.5rem;
|
||||
min-height: 3.5rem;
|
||||
margin-top: 0.5rem;
|
||||
--tw-shadow-color: 0, 0, 0;
|
||||
--tw-shadow: 0 10px 15px -3px rgba(var(--tw-shadow-color), 0.1), 0 4px 6px -2px rgba(var(--tw-shadow-color), 0.05);
|
||||
-webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(107, 114, 128, var(--tw-bg-opacity)); display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition-property: background-color, border-color, color, fill, stroke;
|
||||
transition-duration: 150ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.ico:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(16, 185, 129, var(--tw-bg-opacity));
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.ico {
|
||||
cursor: pointer;
|
||||
border-radius: 0.375rem;
|
||||
height: 3.5rem;
|
||||
width: 3.5rem;
|
||||
min-height: 3.5rem;
|
||||
--tw-shadow-color: 0, 0, 0;
|
||||
--tw-shadow: 0 10px 15px -3px rgba(var(--tw-shadow-color), 0.1),
|
||||
0 4px 6px -2px rgba(var(--tw-shadow-color), 0.05);
|
||||
-webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
|
||||
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
|
||||
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition-property: background-color, border-color, color, fill, stroke;
|
||||
transition-duration: 150ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.ico:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(16, 185, 129, var(--tw-bg-opacity));
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,189 +1,273 @@
|
||||
<script lang="ts">
|
||||
import { CharEmotion, SizeStore, selectedCharID, settingsOpen, sideBarStore } from "../../ts/stores";
|
||||
import { DataBase } from "../../ts/database";
|
||||
import BarIcon from "./BarIcon.svelte";
|
||||
import { Plus, User, X, Settings, Users, Edit3Icon, ArrowUp, ArrowDown, ListIcon, LayoutGridIcon, PlusIcon} from 'lucide-svelte'
|
||||
import { characterFormatUpdate, createNewCharacter, createNewGroup, getCharImage } from "../../ts/characters";
|
||||
import {importCharacter} from 'src/ts/characterCards'
|
||||
import SettingsDom from './Settings.svelte'
|
||||
import CharConfig from "./CharConfig.svelte";
|
||||
import { language } from "../../lang";
|
||||
import Botpreset from "../Others/botpreset.svelte";
|
||||
import { onDestroy } from "svelte";
|
||||
import {isEqual} from 'lodash'
|
||||
let openPresetList =false
|
||||
let sideBarMode = 0
|
||||
let editMode = false
|
||||
let menuMode = 0
|
||||
export let openGrid = () => {}
|
||||
import {
|
||||
CharEmotion,
|
||||
SizeStore,
|
||||
selectedCharID,
|
||||
settingsOpen,
|
||||
sideBarStore,
|
||||
} from "../../ts/stores";
|
||||
import { DataBase } from "../../ts/database";
|
||||
import BarIcon from "./BarIcon.svelte";
|
||||
import SidebarIndicator from "./SidebarIndicator.svelte";
|
||||
import {
|
||||
Plus,
|
||||
User,
|
||||
X,
|
||||
Settings,
|
||||
Users,
|
||||
Edit3Icon,
|
||||
ArrowUp,
|
||||
ArrowDown,
|
||||
ListIcon,
|
||||
LayoutGridIcon,
|
||||
PlusIcon,
|
||||
} from "lucide-svelte";
|
||||
import {
|
||||
characterFormatUpdate,
|
||||
createNewCharacter,
|
||||
createNewGroup,
|
||||
getCharImage,
|
||||
} from "../../ts/characters";
|
||||
import { importCharacter } from "src/ts/characterCards";
|
||||
import SettingsDom from "./Settings.svelte";
|
||||
import CharConfig from "./CharConfig.svelte";
|
||||
import { language } from "../../lang";
|
||||
import Botpreset from "../Others/botpreset.svelte";
|
||||
import { onDestroy } from "svelte";
|
||||
import { isEqual } from "lodash";
|
||||
import SidebarAvatar from "./SidebarAvatar.svelte";
|
||||
let openPresetList = false;
|
||||
let sideBarMode = 0;
|
||||
let editMode = false;
|
||||
let menuMode = 0;
|
||||
export let openGrid = () => {};
|
||||
|
||||
function createScratch() {
|
||||
reseter();
|
||||
const cid = createNewCharacter();
|
||||
selectedCharID.set(-1);
|
||||
}
|
||||
function createGroup() {
|
||||
reseter();
|
||||
const cid = createNewGroup();
|
||||
selectedCharID.set(-1);
|
||||
}
|
||||
async function createImport() {
|
||||
reseter();
|
||||
const cid = await importCharacter();
|
||||
selectedCharID.set(-1);
|
||||
}
|
||||
|
||||
function createScratch(){
|
||||
reseter();
|
||||
const cid = createNewCharacter()
|
||||
selectedCharID.set(-1)
|
||||
function changeChar(index: number) {
|
||||
reseter();
|
||||
characterFormatUpdate(index);
|
||||
selectedCharID.set(index);
|
||||
}
|
||||
|
||||
function reseter() {
|
||||
menuMode = 0;
|
||||
sideBarMode = 0;
|
||||
editMode = false;
|
||||
settingsOpen.set(false);
|
||||
CharEmotion.set({});
|
||||
}
|
||||
|
||||
let charImages: string[] = [];
|
||||
|
||||
const unsub = DataBase.subscribe((db) => {
|
||||
let newCharImages: string[] = [];
|
||||
for (const cha of db.characters) {
|
||||
newCharImages.push(cha.image ?? "");
|
||||
}
|
||||
function createGroup(){
|
||||
reseter();
|
||||
const cid = createNewGroup()
|
||||
selectedCharID.set(-1)
|
||||
}
|
||||
async function createImport(){
|
||||
reseter();
|
||||
const cid = await importCharacter()
|
||||
selectedCharID.set(-1)
|
||||
if (!isEqual(charImages, newCharImages)) {
|
||||
charImages = newCharImages;
|
||||
}
|
||||
});
|
||||
|
||||
function changeChar(index:number){
|
||||
reseter();
|
||||
characterFormatUpdate(index)
|
||||
selectedCharID.set(index)
|
||||
}
|
||||
|
||||
function reseter(){
|
||||
menuMode = 0;
|
||||
sideBarMode = 0;
|
||||
editMode = false
|
||||
settingsOpen.set(false)
|
||||
CharEmotion.set({})
|
||||
}
|
||||
|
||||
let charImages:string[] = []
|
||||
|
||||
const unsub = DataBase.subscribe((db) => {
|
||||
let newCharImages:string[] = []
|
||||
for(const cha of db.characters){
|
||||
newCharImages.push(cha.image ?? '')
|
||||
}
|
||||
if(!isEqual(charImages, newCharImages)){
|
||||
charImages = newCharImages
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
onDestroy(unsub)
|
||||
|
||||
onDestroy(unsub);
|
||||
</script>
|
||||
<div class="w-20 flex flex-col bg-bgcolor text-white items-center overflow-y-scroll h-full shadow-lg min-w-20 overflow-x-hidden"
|
||||
class:editMode={editMode}>
|
||||
<button class="bg-gray-500 w-14 min-w-14 flex justify-center h-8 items-center rounded-b-md cursor-pointer hover:bg-green-500 transition-colors absolute top-0" on:click={() => {
|
||||
menuMode = 1 - menuMode
|
||||
}}><ListIcon/></button>
|
||||
<div class="w-14 min-w-14 h-8 min-h-8 bg-transparent"></div>
|
||||
{#if menuMode === 0}
|
||||
|
||||
<div
|
||||
class="flex h-full w-20 min-w-20 flex-col items-center overflow-x-hidden overflow-y-scroll bg-bgcolor text-white shadow-lg gap-2"
|
||||
class:editMode
|
||||
>
|
||||
<button
|
||||
class="absolute top-0 flex h-8 w-14 min-w-14 cursor-pointer items-center justify-center rounded-b-md bg-gray-500 transition-colors hover:bg-green-500"
|
||||
on:click={() => {
|
||||
menuMode = 1 - menuMode;
|
||||
}}><ListIcon /></button
|
||||
>
|
||||
<div class="h-8 min-h-8 w-14 min-w-14 bg-transparent" />
|
||||
{#if menuMode === 0}
|
||||
{#each charImages as charimg, i}
|
||||
<div class="flex items-center">
|
||||
{#if charimg !== ''}
|
||||
<BarIcon onClick={() => {changeChar(i)}} additionalStyle={getCharImage($DataBase.characters[i].image, 'css')}>
|
||||
</BarIcon>
|
||||
{:else}
|
||||
<BarIcon onClick={() => {changeChar(i)}} additionalStyle={i === $selectedCharID ? 'background:#44475a' : ''}>
|
||||
|
||||
</BarIcon>
|
||||
{/if}
|
||||
{#if editMode}
|
||||
<div class="flex flex-col mt-2">
|
||||
<button on:click={() => {
|
||||
let chars = $DataBase.characters
|
||||
if(chars[i-1]){
|
||||
const currentchar = chars[i]
|
||||
chars[i] = chars[i-1]
|
||||
chars[i-1] = currentchar
|
||||
$DataBase.characters = chars
|
||||
}
|
||||
}}>
|
||||
<ArrowUp size={20}/>
|
||||
</button>
|
||||
<button on:click={() => {
|
||||
let chars = $DataBase.characters
|
||||
if(chars[i+1]){
|
||||
const currentchar = chars[i]
|
||||
chars[i] = chars[i+1]
|
||||
chars[i+1] = currentchar
|
||||
$DataBase.characters = chars
|
||||
}
|
||||
}}>
|
||||
<ArrowDown size={22}/>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
<BarIcon onClick={() => {
|
||||
if(sideBarMode === 1){
|
||||
reseter();
|
||||
sideBarMode = 0
|
||||
}
|
||||
else{
|
||||
reseter();
|
||||
sideBarMode = 1
|
||||
}
|
||||
}}><PlusIcon/></BarIcon>
|
||||
{:else}
|
||||
<BarIcon onClick={() => {
|
||||
if($settingsOpen){
|
||||
reseter();
|
||||
settingsOpen.set(false)
|
||||
}
|
||||
else{
|
||||
reseter();
|
||||
settingsOpen.set(true)
|
||||
}
|
||||
}}><Settings/></BarIcon>
|
||||
<BarIcon onClick={() => {
|
||||
reseter();
|
||||
openGrid()
|
||||
}}><LayoutGridIcon/></BarIcon>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="w-96 p-6 flex flex-col bg-darkbg text-gray-200 overflow-y-auto overflow-x-hidden setting-area" class:flex-grow={($SizeStore.w <= 1000)} class:minw96={($SizeStore.w > 1000)}>
|
||||
<button class="flex w-full justify-end text-gray-200" on:click={() => {sideBarStore.set(false)}}>
|
||||
<button class="p-0 bg-transparent border-none text-gray-200"><X/></button>
|
||||
</button>
|
||||
{#if sideBarMode === 0}
|
||||
{#if $selectedCharID < 0 || $settingsOpen}
|
||||
<SettingsDom bind:openPresetList/>
|
||||
<div class="group relative flex items-center px-2">
|
||||
<SidebarIndicator isActive={$selectedCharID === i} />
|
||||
{#if charimg !== ""}
|
||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||
<div
|
||||
on:click={() => {
|
||||
changeChar(i);
|
||||
}}
|
||||
on:keydown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
changeChar(i);
|
||||
}
|
||||
}}
|
||||
tabindex="0"
|
||||
>
|
||||
{#await getCharImage($DataBase.characters[i].image, "plain") then img}
|
||||
<SidebarAvatar src={img} size="56" />
|
||||
{:catch}
|
||||
<SidebarAvatar size="56" src="https://via.placeholder.com/150" />
|
||||
{/await}
|
||||
</div>
|
||||
{:else}
|
||||
<CharConfig />
|
||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||
<div
|
||||
on:click={() => {
|
||||
changeChar(i);
|
||||
}}
|
||||
on:keydown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
changeChar(i);
|
||||
}
|
||||
}}
|
||||
tabindex="0"
|
||||
>
|
||||
<SidebarAvatar size="56" src="https://via.placeholder.com/150" />
|
||||
</div>
|
||||
{/if}
|
||||
{:else if sideBarMode === 1}
|
||||
<h2 class="title font-bold text-xl mt-2">Create</h2>
|
||||
<button
|
||||
on:click={createScratch}
|
||||
class="drop-shadow-lg p-5 border-borderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-lg">
|
||||
{language.createfromScratch}
|
||||
</button>
|
||||
<button
|
||||
on:click={createImport}
|
||||
class="drop-shadow-lg p-5 border-borderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-lg">
|
||||
{language.importCharacter}
|
||||
</button>
|
||||
<button
|
||||
on:click={createGroup}
|
||||
class="drop-shadow-lg p-3 border-borderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected">
|
||||
{language.createGroup}
|
||||
</button>
|
||||
<h2 class="title font-bold text-xl mt-4">Edit</h2>
|
||||
<button
|
||||
on:click={() => {editMode = !editMode;$selectedCharID = -1}}
|
||||
class="drop-shadow-lg p-3 border-borderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected">
|
||||
{language.editOrder}
|
||||
</button>
|
||||
{/if}
|
||||
{#if editMode}
|
||||
<div class="mt-2 flex flex-col">
|
||||
<button
|
||||
on:click={() => {
|
||||
let chars = $DataBase.characters;
|
||||
if (chars[i - 1]) {
|
||||
const currentchar = chars[i];
|
||||
chars[i] = chars[i - 1];
|
||||
chars[i - 1] = currentchar;
|
||||
$DataBase.characters = chars;
|
||||
}
|
||||
}}
|
||||
>
|
||||
<ArrowUp size={20} />
|
||||
</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
let chars = $DataBase.characters;
|
||||
if (chars[i + 1]) {
|
||||
const currentchar = chars[i];
|
||||
chars[i] = chars[i + 1];
|
||||
chars[i + 1] = currentchar;
|
||||
$DataBase.characters = chars;
|
||||
}
|
||||
}}
|
||||
>
|
||||
<ArrowDown size={22} />
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
<BarIcon
|
||||
onClick={() => {
|
||||
if (sideBarMode === 1) {
|
||||
reseter();
|
||||
sideBarMode = 0;
|
||||
} else {
|
||||
reseter();
|
||||
sideBarMode = 1;
|
||||
}
|
||||
}}><PlusIcon /></BarIcon
|
||||
>
|
||||
{:else}
|
||||
<BarIcon
|
||||
onClick={() => {
|
||||
if ($settingsOpen) {
|
||||
reseter();
|
||||
settingsOpen.set(false);
|
||||
} else {
|
||||
reseter();
|
||||
settingsOpen.set(true);
|
||||
}
|
||||
}}><Settings /></BarIcon
|
||||
>
|
||||
<BarIcon
|
||||
onClick={() => {
|
||||
reseter();
|
||||
openGrid();
|
||||
}}><LayoutGridIcon /></BarIcon
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
<div
|
||||
class="setting-area flex w-96 flex-col overflow-y-auto overflow-x-hidden bg-darkbg p-6 text-gray-200"
|
||||
class:flex-grow={$SizeStore.w <= 1000}
|
||||
class:minw96={$SizeStore.w > 1000}
|
||||
>
|
||||
<button
|
||||
class="flex w-full justify-end text-gray-200"
|
||||
on:click={() => {
|
||||
sideBarStore.set(false);
|
||||
}}
|
||||
>
|
||||
<button class="border-none bg-transparent p-0 text-gray-200"><X /></button>
|
||||
</button>
|
||||
{#if sideBarMode === 0}
|
||||
{#if $selectedCharID < 0 || $settingsOpen}
|
||||
<SettingsDom bind:openPresetList />
|
||||
{:else}
|
||||
<CharConfig />
|
||||
{/if}
|
||||
{:else if sideBarMode === 1}
|
||||
<h2 class="title mt-2 text-xl font-bold">Create</h2>
|
||||
<button
|
||||
on:click={createScratch}
|
||||
class="ml-2 mr-2 mt-2 flex items-center justify-center border-1 border-solid border-borderc p-5 text-lg drop-shadow-lg hover:bg-selected"
|
||||
>
|
||||
{language.createfromScratch}
|
||||
</button>
|
||||
<button
|
||||
on:click={createImport}
|
||||
class="ml-2 mr-2 mt-2 flex items-center justify-center border-1 border-solid border-borderc p-5 text-lg drop-shadow-lg hover:bg-selected"
|
||||
>
|
||||
{language.importCharacter}
|
||||
</button>
|
||||
<button
|
||||
on:click={createGroup}
|
||||
class="ml-2 mr-2 mt-2 flex items-center justify-center border-1 border-solid border-borderc p-3 drop-shadow-lg hover:bg-selected"
|
||||
>
|
||||
{language.createGroup}
|
||||
</button>
|
||||
<h2 class="title mt-4 text-xl font-bold">Edit</h2>
|
||||
<button
|
||||
on:click={() => {
|
||||
editMode = !editMode;
|
||||
$selectedCharID = -1;
|
||||
}}
|
||||
class="ml-2 mr-2 mt-2 flex items-center justify-center border-1 border-solid border-borderc p-3 drop-shadow-lg hover:bg-selected"
|
||||
>
|
||||
{language.editOrder}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.minw96 {
|
||||
min-width: 24rem; /* 384px */
|
||||
}
|
||||
.title{
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.editMode{
|
||||
min-width: 6rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
{#if openPresetList}
|
||||
<Botpreset close={() => {openPresetList = false}}/>
|
||||
{/if}
|
||||
<Botpreset
|
||||
close={() => {
|
||||
openPresetList = false;
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.minw96 {
|
||||
min-width: 24rem; /* 384px */
|
||||
}
|
||||
.title {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.editMode {
|
||||
min-width: 6rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
24
src/lib/SideBars/SidebarAvatar.svelte
Normal file
24
src/lib/SideBars/SidebarAvatar.svelte
Normal file
@@ -0,0 +1,24 @@
|
||||
<script>
|
||||
export let src;
|
||||
export let size = "22";
|
||||
</script>
|
||||
|
||||
<span class="flex shrink-0 items-center justify-center">
|
||||
{#if src}
|
||||
<img
|
||||
{src}
|
||||
class="bg-skin-border sidebar-avatar rounded-full object-cover"
|
||||
style:width={size + "px"}
|
||||
style:height={size + "px"}
|
||||
style:minWidth={size + "px"}
|
||||
alt="avatar"
|
||||
/>
|
||||
{:else}
|
||||
<div
|
||||
class="bg-skin-border sidebar-avatar rounded-full"
|
||||
style:width={size + "px"}
|
||||
style:height={size + "px"}
|
||||
style:minWidth={size + "px"}
|
||||
/>
|
||||
{/if}
|
||||
</span>
|
||||
17
src/lib/SideBars/SidebarIndicator.svelte
Normal file
17
src/lib/SideBars/SidebarIndicator.svelte
Normal file
@@ -0,0 +1,17 @@
|
||||
<script lang="ts">
|
||||
export let isActive: boolean;
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="
|
||||
group-hover:bg-white
|
||||
absolute
|
||||
left-[-4px]
|
||||
h-[8px]
|
||||
w-[8px]
|
||||
rounded-full
|
||||
transition-all
|
||||
duration-300
|
||||
{isActive ? 'bg-white !h-[20px]' : 'group-hover:h-[10px]'}
|
||||
"
|
||||
/>
|
||||
@@ -1,471 +1,499 @@
|
||||
import { get, writable } from "svelte/store";
|
||||
import { DataBase, saveImage, setDatabase, type character, type Chat, defaultSdDataFunc } from "./database";
|
||||
import exifr from 'exifr'
|
||||
import { alertConfirm, alertError, alertNormal, alertSelect, alertStore } from "./alert";
|
||||
import {
|
||||
DataBase,
|
||||
saveImage,
|
||||
setDatabase,
|
||||
type character,
|
||||
type Chat,
|
||||
defaultSdDataFunc,
|
||||
} from "./database";
|
||||
import exifr from "exifr";
|
||||
import {
|
||||
alertConfirm,
|
||||
alertError,
|
||||
alertNormal,
|
||||
alertSelect,
|
||||
alertStore,
|
||||
} from "./alert";
|
||||
import { language } from "../lang";
|
||||
import { PngMetadata } from "./exif";
|
||||
import { encode as encodeMsgpack, decode as decodeMsgpack } from "@msgpack/msgpack";
|
||||
import { checkNullish, findCharacterbyId, selectMultipleFile, selectSingleFile, sleep } from "./util";
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import {
|
||||
encode as encodeMsgpack,
|
||||
decode as decodeMsgpack,
|
||||
} from "@msgpack/msgpack";
|
||||
import {
|
||||
checkNullish,
|
||||
findCharacterbyId,
|
||||
selectMultipleFile,
|
||||
selectSingleFile,
|
||||
sleep,
|
||||
} from "./util";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import { selectedCharID } from "./stores";
|
||||
import { downloadFile, getFileSrc, readImage } from "./globalApi";
|
||||
|
||||
export function createNewCharacter() {
|
||||
let db = get(DataBase)
|
||||
db.characters.push(createBlankChar())
|
||||
setDatabase(db)
|
||||
return db.characters.length - 1
|
||||
let db = get(DataBase);
|
||||
db.characters.push(createBlankChar());
|
||||
setDatabase(db);
|
||||
return db.characters.length - 1;
|
||||
}
|
||||
|
||||
export function createNewGroup(){
|
||||
let db = get(DataBase)
|
||||
db.characters.push({
|
||||
type: 'group',
|
||||
name: "",
|
||||
firstMessage: "",
|
||||
chats: [{
|
||||
message: [],
|
||||
note: '',
|
||||
name: 'Chat 1',
|
||||
localLore: []
|
||||
}], chatPage: 0,
|
||||
viewScreen: 'none',
|
||||
globalLore: [],
|
||||
characters: [],
|
||||
autoMode: false,
|
||||
useCharacterLore: true,
|
||||
emotionImages: [],
|
||||
customscript: [],
|
||||
chaId: uuidv4(),
|
||||
firstMsgIndex: -1
|
||||
})
|
||||
setDatabase(db)
|
||||
return db.characters.length - 1
|
||||
export function createNewGroup() {
|
||||
let db = get(DataBase);
|
||||
db.characters.push({
|
||||
type: "group",
|
||||
name: "",
|
||||
firstMessage: "",
|
||||
chats: [
|
||||
{
|
||||
message: [],
|
||||
note: "",
|
||||
name: "Chat 1",
|
||||
localLore: [],
|
||||
},
|
||||
],
|
||||
chatPage: 0,
|
||||
viewScreen: "none",
|
||||
globalLore: [],
|
||||
characters: [],
|
||||
autoMode: false,
|
||||
useCharacterLore: true,
|
||||
emotionImages: [],
|
||||
customscript: [],
|
||||
chaId: uuidv4(),
|
||||
firstMsgIndex: -1,
|
||||
});
|
||||
setDatabase(db);
|
||||
return db.characters.length - 1;
|
||||
}
|
||||
|
||||
export async function getCharImage(loc:string, type:'plain'|'css'|'contain') {
|
||||
if(!loc || loc === ''){
|
||||
if(type ==='css'){
|
||||
return ''
|
||||
}
|
||||
return null
|
||||
}
|
||||
const filesrc = await getFileSrc(loc)
|
||||
if(type === 'plain'){
|
||||
return filesrc
|
||||
}
|
||||
else if(type ==='css'){
|
||||
return `background: url("${filesrc}");background-size: cover;`
|
||||
}
|
||||
else{
|
||||
return `background: url("${filesrc}");background-size: contain;background-repeat: no-repeat;background-position: center;`
|
||||
}
|
||||
export async function getCharImage(
|
||||
loc: string,
|
||||
type: "plain" | "css" | "contain" // TODO: REFACTOR BY REMOVE THIS PARAMETER
|
||||
) {
|
||||
const filesrc = await getFileSrc(loc);
|
||||
return filesrc;
|
||||
}
|
||||
|
||||
export async function selectCharImg(charId:number) {
|
||||
const selected = await selectSingleFile(['png'])
|
||||
if(!selected){
|
||||
return
|
||||
}
|
||||
const img = selected.data
|
||||
let db = get(DataBase)
|
||||
const imgp = await saveImage(img)
|
||||
db.characters[charId].image = imgp
|
||||
setDatabase(db)
|
||||
export async function selectCharImg(charId: number) {
|
||||
const selected = await selectSingleFile(["png"]);
|
||||
if (!selected) {
|
||||
return;
|
||||
}
|
||||
const img = selected.data;
|
||||
let db = get(DataBase);
|
||||
const imgp = await saveImage(img);
|
||||
db.characters[charId].image = imgp;
|
||||
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
|
||||
setDatabase(db)
|
||||
const selected = await selectSingleFile(["png"]);
|
||||
if (!selected) {
|
||||
return;
|
||||
}
|
||||
const img = selected.data;
|
||||
let db = get(DataBase);
|
||||
const imgp = await saveImage(img);
|
||||
db.userIcon = imgp;
|
||||
setDatabase(db);
|
||||
}
|
||||
|
||||
export const addingEmotion = writable(false)
|
||||
export const addingEmotion = writable(false);
|
||||
|
||||
export async function addCharEmotion(charId:number) {
|
||||
addingEmotion.set(true)
|
||||
const selected = await selectMultipleFile(['png', 'webp', 'gif'])
|
||||
if(!selected){
|
||||
addingEmotion.set(false)
|
||||
return
|
||||
export async function addCharEmotion(charId: number) {
|
||||
addingEmotion.set(true);
|
||||
const selected = await selectMultipleFile(["png", "webp", "gif"]);
|
||||
if (!selected) {
|
||||
addingEmotion.set(false);
|
||||
return;
|
||||
}
|
||||
let db = get(DataBase);
|
||||
for (const f of selected) {
|
||||
console.log(f);
|
||||
const img = f.data;
|
||||
const imgp = await saveImage(img);
|
||||
const name = f.name.replace(".png", "").replace(".webp", "");
|
||||
let dbChar = db.characters[charId];
|
||||
if (dbChar.type !== "group") {
|
||||
dbChar.emotionImages.push([name, imgp]);
|
||||
db.characters[charId] = dbChar;
|
||||
}
|
||||
let db = get(DataBase)
|
||||
for(const f of selected){
|
||||
console.log(f)
|
||||
const img = f.data
|
||||
const imgp = await saveImage(img)
|
||||
const name = f.name.replace('.png','').replace('.webp','')
|
||||
let dbChar = db.characters[charId]
|
||||
if(dbChar.type !== 'group'){
|
||||
dbChar.emotionImages.push([name,imgp])
|
||||
db.characters[charId] = dbChar
|
||||
}
|
||||
setDatabase(db)
|
||||
}
|
||||
addingEmotion.set(false)
|
||||
setDatabase(db);
|
||||
}
|
||||
addingEmotion.set(false);
|
||||
}
|
||||
|
||||
export async function rmCharEmotion(charId:number, emotionId:number) {
|
||||
let db = get(DataBase)
|
||||
let dbChar = db.characters[charId]
|
||||
if(dbChar.type !== 'group'){
|
||||
dbChar.emotionImages.splice(emotionId, 1)
|
||||
db.characters[charId] = dbChar
|
||||
}
|
||||
setDatabase(db)
|
||||
export async function rmCharEmotion(charId: number, emotionId: number) {
|
||||
let db = get(DataBase);
|
||||
let dbChar = db.characters[charId];
|
||||
if (dbChar.type !== "group") {
|
||||
dbChar.emotionImages.splice(emotionId, 1);
|
||||
db.characters[charId] = dbChar;
|
||||
}
|
||||
setDatabase(db);
|
||||
}
|
||||
|
||||
export async function exportChat(page: number) {
|
||||
try {
|
||||
const mode = await alertSelect(["Export as JSON", "Export as TXT"]);
|
||||
const selectedID = get(selectedCharID);
|
||||
const db = get(DataBase);
|
||||
const chat = db.characters[selectedID].chats[page];
|
||||
const char = db.characters[selectedID];
|
||||
const date = new Date().toJSON();
|
||||
console.log(mode);
|
||||
if (mode === "0") {
|
||||
const stringl = Buffer.from(
|
||||
JSON.stringify({
|
||||
type: "risuChat",
|
||||
ver: 1,
|
||||
data: chat,
|
||||
}),
|
||||
"utf-8"
|
||||
);
|
||||
|
||||
export async function exportChat(page:number){
|
||||
try {
|
||||
|
||||
const mode = await alertSelect(['Export as JSON', "Export as TXT"])
|
||||
const selectedID = get(selectedCharID)
|
||||
const db = get(DataBase)
|
||||
const chat = db.characters[selectedID].chats[page]
|
||||
const char = db.characters[selectedID]
|
||||
const date = new Date().toJSON();
|
||||
console.log(mode)
|
||||
if(mode === '0'){
|
||||
const stringl = Buffer.from(JSON.stringify({
|
||||
type: 'risuChat',
|
||||
ver: 1,
|
||||
data: chat
|
||||
}), 'utf-8')
|
||||
|
||||
await downloadFile(`${char.name}_${date}_chat`.replace(/[<>:"/\\|?*\.\,]/g, "") + '.json', stringl)
|
||||
|
||||
}
|
||||
else{
|
||||
|
||||
let stringl = chat.message.map((v) => {
|
||||
if(v.saying){
|
||||
return `${findCharacterbyId(v.saying).name}\n${v.data}`
|
||||
}
|
||||
else{
|
||||
return `${v.role === 'char' ? char.name : db.username}\n${v.data}`
|
||||
}
|
||||
}).join('\n\n')
|
||||
|
||||
if(char.type !== 'group'){
|
||||
stringl = `${char.name}\n${char.firstMessage}\n\n` + stringl
|
||||
}
|
||||
|
||||
await downloadFile(`${char.name}_${date}_chat`.replace(/[<>:"/\\|?*\.\,]/g, "") + '.txt', Buffer.from(stringl, 'utf-8'))
|
||||
|
||||
}
|
||||
alertNormal(language.successExport)
|
||||
} catch (error) {
|
||||
alertError(`${error}`)
|
||||
}
|
||||
}
|
||||
|
||||
export async function importChat(){
|
||||
const dat =await selectSingleFile(['json','jsonl'])
|
||||
if(!dat){
|
||||
return
|
||||
}
|
||||
try {
|
||||
const selectedID = get(selectedCharID)
|
||||
let db = get(DataBase)
|
||||
|
||||
if(dat.name.endsWith('jsonl')){
|
||||
const lines = Buffer.from(dat.data).toString('utf-8').split('\n')
|
||||
let newChat:Chat = {
|
||||
message: [],
|
||||
note: "",
|
||||
name: "Imported Chat",
|
||||
localLore: []
|
||||
}
|
||||
|
||||
let isFirst = true
|
||||
for(const line of lines){
|
||||
|
||||
const presedLine = JSON.parse(line)
|
||||
if(presedLine.name && presedLine.is_user, presedLine.mes){
|
||||
if(!isFirst){
|
||||
newChat.message.push({
|
||||
role: presedLine.is_user ? "user" : 'char',
|
||||
data: formatTavernChat(presedLine.mes, db.characters[selectedID].name)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
isFirst = false
|
||||
}
|
||||
|
||||
if(newChat.message.length === 0){
|
||||
alertError(language.errors.noData)
|
||||
return
|
||||
}
|
||||
|
||||
db.characters[selectedID].chats.push(newChat)
|
||||
setDatabase(db)
|
||||
alertNormal(language.successImport)
|
||||
}
|
||||
else{
|
||||
const json = JSON.parse(Buffer.from(dat.data).toString('utf-8'))
|
||||
if(json.type === 'risuChat' && json.ver === 1){
|
||||
const das:Chat = json.data
|
||||
if(!(checkNullish(das.message) || checkNullish(das.note) || checkNullish(das.name) || checkNullish(das.localLore))){
|
||||
db.characters[selectedID].chats.push(das)
|
||||
setDatabase(db)
|
||||
alertNormal(language.successImport)
|
||||
return
|
||||
}
|
||||
else{
|
||||
alertError(language.errors.noData)
|
||||
return
|
||||
}
|
||||
}
|
||||
else{
|
||||
alertError(language.errors.noData)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
alertError(`${error}`)
|
||||
}
|
||||
}
|
||||
|
||||
function formatTavernChat(chat:string, charName:string){
|
||||
const db = get(DataBase)
|
||||
return chat.replace(/<([Uu]ser)>|\{\{([Uu]ser)\}\}/g, db.username).replace(/((\{\{)|<)([Cc]har)(=.+)?((\}\})|>)/g, charName)
|
||||
}
|
||||
|
||||
export function characterFormatUpdate(index:number|character){
|
||||
let db = get(DataBase)
|
||||
let cha = typeof(index) === 'number' ? db.characters[index] : index
|
||||
if(cha.chats.length === 0){
|
||||
cha.chats = [{
|
||||
message: [],
|
||||
note: '',
|
||||
name: 'Chat 1',
|
||||
localLore: []
|
||||
}]
|
||||
}
|
||||
if(!cha.chats[cha.chatPage]){
|
||||
cha.chatPage = 0
|
||||
}
|
||||
if(!cha.chats[cha.chatPage].message){
|
||||
cha.chats[cha.chatPage].message = []
|
||||
}
|
||||
if(!cha.type){
|
||||
cha.type = 'character'
|
||||
}
|
||||
if(!cha.chaId){
|
||||
cha.chaId = uuidv4()
|
||||
}
|
||||
if(cha.type !== 'group'){
|
||||
if(checkNullish(cha.sdData)){
|
||||
cha.sdData = defaultSdDataFunc()
|
||||
}
|
||||
if(checkNullish(cha.utilityBot)){
|
||||
cha.utilityBot = false
|
||||
}
|
||||
cha.alternateGreetings = cha.alternateGreetings ?? []
|
||||
cha.exampleMessage = cha.exampleMessage ?? ''
|
||||
cha.creatorNotes = cha.creatorNotes ?? ''
|
||||
cha.systemPrompt = cha.systemPrompt ?? ''
|
||||
cha.postHistoryInstructions = cha.postHistoryInstructions ?? ''
|
||||
cha.tags = cha.tags ?? []
|
||||
cha.creator = cha.creator ?? ''
|
||||
cha.characterVersion = cha.characterVersion ?? 0
|
||||
cha.personality = cha.personality ?? ''
|
||||
cha.scenario = cha.scenario ?? ''
|
||||
cha.firstMsgIndex = cha.firstMsgIndex ?? -1
|
||||
|
||||
}
|
||||
if(checkNullish(cha.customscript)){
|
||||
cha.customscript = []
|
||||
}
|
||||
if(typeof(index) === 'number'){
|
||||
db.characters[index] = cha
|
||||
setDatabase(db)
|
||||
}
|
||||
return cha
|
||||
}
|
||||
|
||||
|
||||
export function createBlankChar():character{
|
||||
return {
|
||||
name: '',
|
||||
firstMessage: '',
|
||||
desc: '',
|
||||
notes: '',
|
||||
chats: [{
|
||||
message: [],
|
||||
note: '',
|
||||
name: 'Chat 1',
|
||||
localLore: []
|
||||
}],
|
||||
chatPage: 0,
|
||||
emotionImages: [],
|
||||
bias: [],
|
||||
viewScreen: 'none',
|
||||
globalLore: [],
|
||||
chaId: uuidv4(),
|
||||
type: 'character',
|
||||
sdData: defaultSdDataFunc(),
|
||||
utilityBot: false,
|
||||
customscript: [],
|
||||
exampleMessage: '',
|
||||
creatorNotes:'',
|
||||
systemPrompt:'',
|
||||
postHistoryInstructions:'',
|
||||
alternateGreetings:[],
|
||||
tags:[],
|
||||
creator:"",
|
||||
characterVersion: 0,
|
||||
personality:"",
|
||||
scenario:"",
|
||||
firstMsgIndex: -1
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export async function makeGroupImage() {
|
||||
try {
|
||||
alertStore.set({
|
||||
type: 'wait',
|
||||
msg: `Loading..`
|
||||
await downloadFile(
|
||||
`${char.name}_${date}_chat`.replace(/[<>:"/\\|?*\.\,]/g, "") + ".json",
|
||||
stringl
|
||||
);
|
||||
} else {
|
||||
let stringl = chat.message
|
||||
.map((v) => {
|
||||
if (v.saying) {
|
||||
return `${findCharacterbyId(v.saying).name}\n${v.data}`;
|
||||
} else {
|
||||
return `${v.role === "char" ? char.name : db.username}\n${v.data}`;
|
||||
}
|
||||
})
|
||||
const db = get(DataBase)
|
||||
const charID = get(selectedCharID)
|
||||
const group = db.characters[charID]
|
||||
if(group.type !== 'group'){
|
||||
return
|
||||
}
|
||||
|
||||
const imageUrls = await Promise.all(group.characters.map((v) => {
|
||||
return getCharImage(findCharacterbyId(v).image, 'plain')
|
||||
}))
|
||||
|
||||
|
||||
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = 256
|
||||
canvas.height = 256
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
// Load the images
|
||||
const images = [];
|
||||
let loadedImages = 0;
|
||||
|
||||
await Promise.all(
|
||||
imageUrls.map(
|
||||
(url) =>
|
||||
new Promise<void>((resolve) => {
|
||||
const img = new Image();
|
||||
img.crossOrigin="anonymous"
|
||||
img.onload = () => {
|
||||
images.push(img);
|
||||
resolve();
|
||||
};
|
||||
img.src = url;
|
||||
})
|
||||
)
|
||||
);
|
||||
|
||||
// Calculate dimensions and draw the grid
|
||||
const numImages = images.length;
|
||||
const numCols = Math.ceil(Math.sqrt(images.length));
|
||||
const numRows = Math.ceil(images.length / numCols);
|
||||
const cellWidth = canvas.width / numCols;
|
||||
const cellHeight = canvas.height / numRows;
|
||||
|
||||
for (let row = 0; row < numRows; row++) {
|
||||
for (let col = 0; col < numCols; col++) {
|
||||
const index = row * numCols + col;
|
||||
if (index >= numImages) break;
|
||||
ctx.drawImage(
|
||||
images[index],
|
||||
col * cellWidth,
|
||||
row * cellHeight,
|
||||
cellWidth,
|
||||
cellHeight
|
||||
);
|
||||
.join("\n\n");
|
||||
|
||||
if (char.type !== "group") {
|
||||
stringl = `${char.name}\n${char.firstMessage}\n\n` + stringl;
|
||||
}
|
||||
|
||||
await downloadFile(
|
||||
`${char.name}_${date}_chat`.replace(/[<>:"/\\|?*\.\,]/g, "") + ".txt",
|
||||
Buffer.from(stringl, "utf-8")
|
||||
);
|
||||
}
|
||||
alertNormal(language.successExport);
|
||||
} catch (error) {
|
||||
alertError(`${error}`);
|
||||
}
|
||||
}
|
||||
|
||||
export async function importChat() {
|
||||
const dat = await selectSingleFile(["json", "jsonl"]);
|
||||
if (!dat) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const selectedID = get(selectedCharID);
|
||||
let db = get(DataBase);
|
||||
|
||||
if (dat.name.endsWith("jsonl")) {
|
||||
const lines = Buffer.from(dat.data).toString("utf-8").split("\n");
|
||||
let newChat: Chat = {
|
||||
message: [],
|
||||
note: "",
|
||||
name: "Imported Chat",
|
||||
localLore: [],
|
||||
};
|
||||
|
||||
let isFirst = true;
|
||||
for (const line of lines) {
|
||||
const presedLine = JSON.parse(line);
|
||||
if ((presedLine.name && presedLine.is_user, presedLine.mes)) {
|
||||
if (!isFirst) {
|
||||
newChat.message.push({
|
||||
role: presedLine.is_user ? "user" : "char",
|
||||
data: formatTavernChat(
|
||||
presedLine.mes,
|
||||
db.characters[selectedID].name
|
||||
),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Return the image URI
|
||||
|
||||
const uri = canvas.toDataURL()
|
||||
console.log(uri)
|
||||
canvas.remove()
|
||||
db.characters[charID].image = await saveImage(dataURLtoBuffer(uri));
|
||||
setDatabase(db)
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: ''
|
||||
})
|
||||
} catch (error) {
|
||||
alertError(`${error}`)
|
||||
|
||||
isFirst = false;
|
||||
}
|
||||
|
||||
if (newChat.message.length === 0) {
|
||||
alertError(language.errors.noData);
|
||||
return;
|
||||
}
|
||||
|
||||
db.characters[selectedID].chats.push(newChat);
|
||||
setDatabase(db);
|
||||
alertNormal(language.successImport);
|
||||
} else {
|
||||
const json = JSON.parse(Buffer.from(dat.data).toString("utf-8"));
|
||||
if (json.type === "risuChat" && json.ver === 1) {
|
||||
const das: Chat = json.data;
|
||||
if (
|
||||
!(
|
||||
checkNullish(das.message) ||
|
||||
checkNullish(das.note) ||
|
||||
checkNullish(das.name) ||
|
||||
checkNullish(das.localLore)
|
||||
)
|
||||
) {
|
||||
db.characters[selectedID].chats.push(das);
|
||||
setDatabase(db);
|
||||
alertNormal(language.successImport);
|
||||
return;
|
||||
} else {
|
||||
alertError(language.errors.noData);
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
alertError(language.errors.noData);
|
||||
return;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
alertError(`${error}`);
|
||||
}
|
||||
}
|
||||
|
||||
function dataURLtoBuffer(string:string){
|
||||
const regex = /^data:.+\/(.+);base64,(.*)$/;
|
||||
function formatTavernChat(chat: string, charName: string) {
|
||||
const db = get(DataBase);
|
||||
return chat
|
||||
.replace(/<([Uu]ser)>|\{\{([Uu]ser)\}\}/g, db.username)
|
||||
.replace(/((\{\{)|<)([Cc]har)(=.+)?((\}\})|>)/g, charName);
|
||||
}
|
||||
|
||||
const matches = string.match(regex);
|
||||
const ext = matches[1];
|
||||
const data = matches[2];
|
||||
return Buffer.from(data, 'base64');
|
||||
export function characterFormatUpdate(index: number | character) {
|
||||
let db = get(DataBase);
|
||||
let cha = typeof index === "number" ? db.characters[index] : index;
|
||||
if (cha.chats.length === 0) {
|
||||
cha.chats = [
|
||||
{
|
||||
message: [],
|
||||
note: "",
|
||||
name: "Chat 1",
|
||||
localLore: [],
|
||||
},
|
||||
];
|
||||
}
|
||||
if (!cha.chats[cha.chatPage]) {
|
||||
cha.chatPage = 0;
|
||||
}
|
||||
if (!cha.chats[cha.chatPage].message) {
|
||||
cha.chats[cha.chatPage].message = [];
|
||||
}
|
||||
if (!cha.type) {
|
||||
cha.type = "character";
|
||||
}
|
||||
if (!cha.chaId) {
|
||||
cha.chaId = uuidv4();
|
||||
}
|
||||
if (cha.type !== "group") {
|
||||
if (checkNullish(cha.sdData)) {
|
||||
cha.sdData = defaultSdDataFunc();
|
||||
}
|
||||
if (checkNullish(cha.utilityBot)) {
|
||||
cha.utilityBot = false;
|
||||
}
|
||||
cha.alternateGreetings = cha.alternateGreetings ?? [];
|
||||
cha.exampleMessage = cha.exampleMessage ?? "";
|
||||
cha.creatorNotes = cha.creatorNotes ?? "";
|
||||
cha.systemPrompt = cha.systemPrompt ?? "";
|
||||
cha.postHistoryInstructions = cha.postHistoryInstructions ?? "";
|
||||
cha.tags = cha.tags ?? [];
|
||||
cha.creator = cha.creator ?? "";
|
||||
cha.characterVersion = cha.characterVersion ?? 0;
|
||||
cha.personality = cha.personality ?? "";
|
||||
cha.scenario = cha.scenario ?? "";
|
||||
cha.firstMsgIndex = cha.firstMsgIndex ?? -1;
|
||||
}
|
||||
if (checkNullish(cha.customscript)) {
|
||||
cha.customscript = [];
|
||||
}
|
||||
if (typeof index === "number") {
|
||||
db.characters[index] = cha;
|
||||
setDatabase(db);
|
||||
}
|
||||
return cha;
|
||||
}
|
||||
|
||||
export function createBlankChar(): character {
|
||||
return {
|
||||
name: "",
|
||||
firstMessage: "",
|
||||
desc: "",
|
||||
notes: "",
|
||||
chats: [
|
||||
{
|
||||
message: [],
|
||||
note: "",
|
||||
name: "Chat 1",
|
||||
localLore: [],
|
||||
},
|
||||
],
|
||||
chatPage: 0,
|
||||
emotionImages: [],
|
||||
bias: [],
|
||||
viewScreen: "none",
|
||||
globalLore: [],
|
||||
chaId: uuidv4(),
|
||||
type: "character",
|
||||
sdData: defaultSdDataFunc(),
|
||||
utilityBot: false,
|
||||
customscript: [],
|
||||
exampleMessage: "",
|
||||
creatorNotes: "",
|
||||
systemPrompt: "",
|
||||
postHistoryInstructions: "",
|
||||
alternateGreetings: [],
|
||||
tags: [],
|
||||
creator: "",
|
||||
characterVersion: 0,
|
||||
personality: "",
|
||||
scenario: "",
|
||||
firstMsgIndex: -1,
|
||||
};
|
||||
}
|
||||
|
||||
export async function makeGroupImage() {
|
||||
try {
|
||||
alertStore.set({
|
||||
type: "wait",
|
||||
msg: `Loading..`,
|
||||
});
|
||||
const db = get(DataBase);
|
||||
const charID = get(selectedCharID);
|
||||
const group = db.characters[charID];
|
||||
if (group.type !== "group") {
|
||||
return;
|
||||
}
|
||||
|
||||
const imageUrls = await Promise.all(
|
||||
group.characters.map((v) => {
|
||||
return getCharImage(findCharacterbyId(v).image, "plain");
|
||||
})
|
||||
);
|
||||
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = 256;
|
||||
canvas.height = 256;
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
// Load the images
|
||||
const images = [];
|
||||
let loadedImages = 0;
|
||||
|
||||
await Promise.all(
|
||||
imageUrls.map(
|
||||
(url) =>
|
||||
new Promise<void>((resolve) => {
|
||||
const img = new Image();
|
||||
img.crossOrigin = "anonymous";
|
||||
img.onload = () => {
|
||||
images.push(img);
|
||||
resolve();
|
||||
};
|
||||
img.src = url;
|
||||
})
|
||||
)
|
||||
);
|
||||
|
||||
// Calculate dimensions and draw the grid
|
||||
const numImages = images.length;
|
||||
const numCols = Math.ceil(Math.sqrt(images.length));
|
||||
const numRows = Math.ceil(images.length / numCols);
|
||||
const cellWidth = canvas.width / numCols;
|
||||
const cellHeight = canvas.height / numRows;
|
||||
|
||||
for (let row = 0; row < numRows; row++) {
|
||||
for (let col = 0; col < numCols; col++) {
|
||||
const index = row * numCols + col;
|
||||
if (index >= numImages) break;
|
||||
ctx.drawImage(
|
||||
images[index],
|
||||
col * cellWidth,
|
||||
row * cellHeight,
|
||||
cellWidth,
|
||||
cellHeight
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Return the image URI
|
||||
|
||||
const uri = canvas.toDataURL();
|
||||
console.log(uri);
|
||||
canvas.remove();
|
||||
db.characters[charID].image = await saveImage(dataURLtoBuffer(uri));
|
||||
setDatabase(db);
|
||||
alertStore.set({
|
||||
type: "none",
|
||||
msg: "",
|
||||
});
|
||||
} catch (error) {
|
||||
alertError(`${error}`);
|
||||
}
|
||||
}
|
||||
|
||||
function dataURLtoBuffer(string: string) {
|
||||
const regex = /^data:.+\/(.+);base64,(.*)$/;
|
||||
|
||||
const matches = string.match(regex);
|
||||
const ext = matches[1];
|
||||
const data = matches[2];
|
||||
return Buffer.from(data, "base64");
|
||||
}
|
||||
|
||||
export async function addDefaultCharacters() {
|
||||
const imgs = [fetch('/sample/rika.png'),fetch('/sample/yuzu.png')]
|
||||
const imgs = [fetch("/sample/rika.png"), fetch("/sample/yuzu.png")];
|
||||
|
||||
alertStore.set({
|
||||
type: 'wait',
|
||||
msg: `Loading Sample bots...`
|
||||
})
|
||||
alertStore.set({
|
||||
type: "wait",
|
||||
msg: `Loading Sample bots...`,
|
||||
});
|
||||
|
||||
for(const img of imgs){
|
||||
const imgBuffer = await (await img).arrayBuffer()
|
||||
const readed = (await exifr.parse(imgBuffer, true))
|
||||
await sleep(10)
|
||||
const va = decodeMsgpack(Buffer.from(readed.risuai, 'base64')) as any
|
||||
if(va.type !== 101){
|
||||
alertError(language.errors.noData)
|
||||
return
|
||||
}
|
||||
let char:character = va.data
|
||||
let db = get(DataBase)
|
||||
if(char.emotionImages && char.emotionImages.length > 0){
|
||||
for(let i=0;i<char.emotionImages.length;i++){
|
||||
await sleep(10)
|
||||
const imgp = await saveImage(char.emotionImages[i][1] as any)
|
||||
char.emotionImages[i][1] = imgp
|
||||
}
|
||||
}
|
||||
char.chats = [{
|
||||
message: [],
|
||||
note: '',
|
||||
name: 'Chat 1',
|
||||
localLore: []
|
||||
}]
|
||||
for (const img of imgs) {
|
||||
const imgBuffer = await (await img).arrayBuffer();
|
||||
const readed = await exifr.parse(imgBuffer, true);
|
||||
await sleep(10);
|
||||
const va = decodeMsgpack(Buffer.from(readed.risuai, "base64")) as any;
|
||||
if (va.type !== 101) {
|
||||
alertError(language.errors.noData);
|
||||
return;
|
||||
}
|
||||
let char: character = va.data;
|
||||
let db = get(DataBase);
|
||||
if (char.emotionImages && char.emotionImages.length > 0) {
|
||||
for (let i = 0; i < char.emotionImages.length; i++) {
|
||||
await sleep(10);
|
||||
const imgp = await saveImage(char.emotionImages[i][1] as any);
|
||||
char.emotionImages[i][1] = imgp;
|
||||
}
|
||||
}
|
||||
char.chats = [
|
||||
{
|
||||
message: [],
|
||||
note: "",
|
||||
name: "Chat 1",
|
||||
localLore: [],
|
||||
},
|
||||
];
|
||||
|
||||
if(checkNullish(char.sdData)){
|
||||
char.sdData = defaultSdDataFunc()
|
||||
}
|
||||
|
||||
char.chatPage = 0
|
||||
char.image = await saveImage(PngMetadata.filter(Buffer.from(imgBuffer)))
|
||||
char.chaId = uuidv4()
|
||||
db.characters.push(characterFormatUpdate(char))
|
||||
setDatabase(db)
|
||||
if (checkNullish(char.sdData)) {
|
||||
char.sdData = defaultSdDataFunc();
|
||||
}
|
||||
|
||||
alertStore.set({
|
||||
type: 'none',
|
||||
msg: ''
|
||||
})
|
||||
}
|
||||
char.chatPage = 0;
|
||||
char.image = await saveImage(PngMetadata.filter(Buffer.from(imgBuffer)));
|
||||
char.chaId = uuidv4();
|
||||
db.characters.push(characterFormatUpdate(char));
|
||||
setDatabase(db);
|
||||
}
|
||||
|
||||
alertStore.set({
|
||||
type: "none",
|
||||
msg: "",
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user