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}
|
{#await additionalStyle}
|
||||||
<button on:click={onClick} class="ico"><slot/></button>
|
<button on:click={onClick} class="ico"><slot /></button>
|
||||||
{:then as}
|
{:then as}
|
||||||
<button on:click={onClick} class="ico" style={as}><slot/></button>
|
<button on:click={onClick} class="ico" style={as}><slot /></button>
|
||||||
{/await}
|
{/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 {
|
<style>
|
||||||
--tw-bg-opacity: 1;
|
.ico {
|
||||||
background-color: rgba(16, 185, 129, var(--tw-bg-opacity));
|
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>
|
</style>
|
||||||
@@ -1,189 +1,273 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { CharEmotion, SizeStore, selectedCharID, settingsOpen, sideBarStore } from "../../ts/stores";
|
import {
|
||||||
import { DataBase } from "../../ts/database";
|
CharEmotion,
|
||||||
import BarIcon from "./BarIcon.svelte";
|
SizeStore,
|
||||||
import { Plus, User, X, Settings, Users, Edit3Icon, ArrowUp, ArrowDown, ListIcon, LayoutGridIcon, PlusIcon} from 'lucide-svelte'
|
selectedCharID,
|
||||||
import { characterFormatUpdate, createNewCharacter, createNewGroup, getCharImage } from "../../ts/characters";
|
settingsOpen,
|
||||||
import {importCharacter} from 'src/ts/characterCards'
|
sideBarStore,
|
||||||
import SettingsDom from './Settings.svelte'
|
} from "../../ts/stores";
|
||||||
import CharConfig from "./CharConfig.svelte";
|
import { DataBase } from "../../ts/database";
|
||||||
import { language } from "../../lang";
|
import BarIcon from "./BarIcon.svelte";
|
||||||
import Botpreset from "../Others/botpreset.svelte";
|
import SidebarIndicator from "./SidebarIndicator.svelte";
|
||||||
import { onDestroy } from "svelte";
|
import {
|
||||||
import {isEqual} from 'lodash'
|
Plus,
|
||||||
let openPresetList =false
|
User,
|
||||||
let sideBarMode = 0
|
X,
|
||||||
let editMode = false
|
Settings,
|
||||||
let menuMode = 0
|
Users,
|
||||||
export let openGrid = () => {}
|
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(){
|
function changeChar(index: number) {
|
||||||
reseter();
|
reseter();
|
||||||
const cid = createNewCharacter()
|
characterFormatUpdate(index);
|
||||||
selectedCharID.set(-1)
|
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(){
|
if (!isEqual(charImages, newCharImages)) {
|
||||||
reseter();
|
charImages = newCharImages;
|
||||||
const cid = createNewGroup()
|
|
||||||
selectedCharID.set(-1)
|
|
||||||
}
|
|
||||||
async function createImport(){
|
|
||||||
reseter();
|
|
||||||
const cid = await importCharacter()
|
|
||||||
selectedCharID.set(-1)
|
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
|
||||||
function changeChar(index:number){
|
onDestroy(unsub);
|
||||||
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)
|
|
||||||
|
|
||||||
</script>
|
</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}>
|
<div
|
||||||
<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={() => {
|
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"
|
||||||
menuMode = 1 - menuMode
|
class:editMode
|
||||||
}}><ListIcon/></button>
|
>
|
||||||
<div class="w-14 min-w-14 h-8 min-h-8 bg-transparent"></div>
|
<button
|
||||||
{#if menuMode === 0}
|
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}
|
{#each charImages as charimg, i}
|
||||||
<div class="flex items-center">
|
<div class="group relative flex items-center px-2">
|
||||||
{#if charimg !== ''}
|
<SidebarIndicator isActive={$selectedCharID === i} />
|
||||||
<BarIcon onClick={() => {changeChar(i)}} additionalStyle={getCharImage($DataBase.characters[i].image, 'css')}>
|
{#if charimg !== ""}
|
||||||
</BarIcon>
|
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||||
{:else}
|
<div
|
||||||
<BarIcon onClick={() => {changeChar(i)}} additionalStyle={i === $selectedCharID ? 'background:#44475a' : ''}>
|
on:click={() => {
|
||||||
|
changeChar(i);
|
||||||
</BarIcon>
|
}}
|
||||||
{/if}
|
on:keydown={(e) => {
|
||||||
{#if editMode}
|
if (e.key === "Enter") {
|
||||||
<div class="flex flex-col mt-2">
|
changeChar(i);
|
||||||
<button on:click={() => {
|
}
|
||||||
let chars = $DataBase.characters
|
}}
|
||||||
if(chars[i-1]){
|
tabindex="0"
|
||||||
const currentchar = chars[i]
|
>
|
||||||
chars[i] = chars[i-1]
|
{#await getCharImage($DataBase.characters[i].image, "plain") then img}
|
||||||
chars[i-1] = currentchar
|
<SidebarAvatar src={img} size="56" />
|
||||||
$DataBase.characters = chars
|
{:catch}
|
||||||
}
|
<SidebarAvatar size="56" src="https://via.placeholder.com/150" />
|
||||||
}}>
|
{/await}
|
||||||
<ArrowUp size={20}/>
|
</div>
|
||||||
</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/>
|
|
||||||
{:else}
|
{: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}
|
{/if}
|
||||||
{:else if sideBarMode === 1}
|
{#if editMode}
|
||||||
<h2 class="title font-bold text-xl mt-2">Create</h2>
|
<div class="mt-2 flex flex-col">
|
||||||
<button
|
<button
|
||||||
on:click={createScratch}
|
on:click={() => {
|
||||||
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">
|
let chars = $DataBase.characters;
|
||||||
{language.createfromScratch}
|
if (chars[i - 1]) {
|
||||||
</button>
|
const currentchar = chars[i];
|
||||||
<button
|
chars[i] = chars[i - 1];
|
||||||
on:click={createImport}
|
chars[i - 1] = currentchar;
|
||||||
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">
|
$DataBase.characters = chars;
|
||||||
{language.importCharacter}
|
}
|
||||||
</button>
|
}}
|
||||||
<button
|
>
|
||||||
on:click={createGroup}
|
<ArrowUp size={20} />
|
||||||
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">
|
</button>
|
||||||
{language.createGroup}
|
<button
|
||||||
</button>
|
on:click={() => {
|
||||||
<h2 class="title font-bold text-xl mt-4">Edit</h2>
|
let chars = $DataBase.characters;
|
||||||
<button
|
if (chars[i + 1]) {
|
||||||
on:click={() => {editMode = !editMode;$selectedCharID = -1}}
|
const currentchar = chars[i];
|
||||||
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">
|
chars[i] = chars[i + 1];
|
||||||
{language.editOrder}
|
chars[i + 1] = currentchar;
|
||||||
</button>
|
$DataBase.characters = chars;
|
||||||
{/if}
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<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>
|
</div>
|
||||||
|
|
||||||
<style>
|
|
||||||
.minw96 {
|
|
||||||
min-width: 24rem; /* 384px */
|
|
||||||
}
|
|
||||||
.title{
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
.editMode{
|
|
||||||
min-width: 6rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
{#if openPresetList}
|
{#if openPresetList}
|
||||||
<Botpreset close={() => {openPresetList = false}}/>
|
<Botpreset
|
||||||
|
close={() => {
|
||||||
|
openPresetList = false;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
{/if}
|
{/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 { get, writable } from "svelte/store";
|
||||||
import { DataBase, saveImage, setDatabase, type character, type Chat, defaultSdDataFunc } from "./database";
|
import {
|
||||||
import exifr from 'exifr'
|
DataBase,
|
||||||
import { alertConfirm, alertError, alertNormal, alertSelect, alertStore } from "./alert";
|
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 { language } from "../lang";
|
||||||
import { PngMetadata } from "./exif";
|
import { PngMetadata } from "./exif";
|
||||||
import { encode as encodeMsgpack, decode as decodeMsgpack } from "@msgpack/msgpack";
|
import {
|
||||||
import { checkNullish, findCharacterbyId, selectMultipleFile, selectSingleFile, sleep } from "./util";
|
encode as encodeMsgpack,
|
||||||
import { v4 as uuidv4 } from 'uuid';
|
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 { selectedCharID } from "./stores";
|
||||||
import { downloadFile, getFileSrc, readImage } from "./globalApi";
|
import { downloadFile, getFileSrc, readImage } from "./globalApi";
|
||||||
|
|
||||||
export function createNewCharacter() {
|
export function createNewCharacter() {
|
||||||
let db = get(DataBase)
|
let db = get(DataBase);
|
||||||
db.characters.push(createBlankChar())
|
db.characters.push(createBlankChar());
|
||||||
setDatabase(db)
|
setDatabase(db);
|
||||||
return db.characters.length - 1
|
return db.characters.length - 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function createNewGroup(){
|
export function createNewGroup() {
|
||||||
let db = get(DataBase)
|
let db = get(DataBase);
|
||||||
db.characters.push({
|
db.characters.push({
|
||||||
type: 'group',
|
type: "group",
|
||||||
name: "",
|
name: "",
|
||||||
firstMessage: "",
|
firstMessage: "",
|
||||||
chats: [{
|
chats: [
|
||||||
message: [],
|
{
|
||||||
note: '',
|
message: [],
|
||||||
name: 'Chat 1',
|
note: "",
|
||||||
localLore: []
|
name: "Chat 1",
|
||||||
}], chatPage: 0,
|
localLore: [],
|
||||||
viewScreen: 'none',
|
},
|
||||||
globalLore: [],
|
],
|
||||||
characters: [],
|
chatPage: 0,
|
||||||
autoMode: false,
|
viewScreen: "none",
|
||||||
useCharacterLore: true,
|
globalLore: [],
|
||||||
emotionImages: [],
|
characters: [],
|
||||||
customscript: [],
|
autoMode: false,
|
||||||
chaId: uuidv4(),
|
useCharacterLore: true,
|
||||||
firstMsgIndex: -1
|
emotionImages: [],
|
||||||
})
|
customscript: [],
|
||||||
setDatabase(db)
|
chaId: uuidv4(),
|
||||||
return db.characters.length - 1
|
firstMsgIndex: -1,
|
||||||
|
});
|
||||||
|
setDatabase(db);
|
||||||
|
return db.characters.length - 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function getCharImage(loc:string, type:'plain'|'css'|'contain') {
|
export async function getCharImage(
|
||||||
if(!loc || loc === ''){
|
loc: string,
|
||||||
if(type ==='css'){
|
type: "plain" | "css" | "contain" // TODO: REFACTOR BY REMOVE THIS PARAMETER
|
||||||
return ''
|
) {
|
||||||
}
|
const filesrc = await getFileSrc(loc);
|
||||||
return null
|
return filesrc;
|
||||||
}
|
|
||||||
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 selectCharImg(charId:number) {
|
export async function selectCharImg(charId: number) {
|
||||||
const selected = await selectSingleFile(['png'])
|
const selected = await selectSingleFile(["png"]);
|
||||||
if(!selected){
|
if (!selected) {
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
const img = selected.data
|
const img = selected.data;
|
||||||
let db = get(DataBase)
|
let db = get(DataBase);
|
||||||
const imgp = await saveImage(img)
|
const imgp = await saveImage(img);
|
||||||
db.characters[charId].image = imgp
|
db.characters[charId].image = imgp;
|
||||||
setDatabase(db)
|
setDatabase(db);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function selectUserImg() {
|
export async function selectUserImg() {
|
||||||
const selected = await selectSingleFile(['png'])
|
const selected = await selectSingleFile(["png"]);
|
||||||
if(!selected){
|
if (!selected) {
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
const img = selected.data
|
const img = selected.data;
|
||||||
let db = get(DataBase)
|
let db = get(DataBase);
|
||||||
const imgp = await saveImage(img)
|
const imgp = await saveImage(img);
|
||||||
db.userIcon = imgp
|
db.userIcon = imgp;
|
||||||
setDatabase(db)
|
setDatabase(db);
|
||||||
}
|
}
|
||||||
|
|
||||||
export const addingEmotion = writable(false)
|
export const addingEmotion = writable(false);
|
||||||
|
|
||||||
export async function addCharEmotion(charId:number) {
|
export async function addCharEmotion(charId: number) {
|
||||||
addingEmotion.set(true)
|
addingEmotion.set(true);
|
||||||
const selected = await selectMultipleFile(['png', 'webp', 'gif'])
|
const selected = await selectMultipleFile(["png", "webp", "gif"]);
|
||||||
if(!selected){
|
if (!selected) {
|
||||||
addingEmotion.set(false)
|
addingEmotion.set(false);
|
||||||
return
|
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)
|
setDatabase(db);
|
||||||
for(const f of selected){
|
}
|
||||||
console.log(f)
|
addingEmotion.set(false);
|
||||||
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)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function rmCharEmotion(charId:number, emotionId:number) {
|
export async function rmCharEmotion(charId: number, emotionId: number) {
|
||||||
let db = get(DataBase)
|
let db = get(DataBase);
|
||||||
let dbChar = db.characters[charId]
|
let dbChar = db.characters[charId];
|
||||||
if(dbChar.type !== 'group'){
|
if (dbChar.type !== "group") {
|
||||||
dbChar.emotionImages.splice(emotionId, 1)
|
dbChar.emotionImages.splice(emotionId, 1);
|
||||||
db.characters[charId] = dbChar
|
db.characters[charId] = dbChar;
|
||||||
}
|
}
|
||||||
setDatabase(db)
|
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){
|
await downloadFile(
|
||||||
try {
|
`${char.name}_${date}_chat`.replace(/[<>:"/\\|?*\.\,]/g, "") + ".json",
|
||||||
|
stringl
|
||||||
const mode = await alertSelect(['Export as JSON', "Export as TXT"])
|
);
|
||||||
const selectedID = get(selectedCharID)
|
} else {
|
||||||
const db = get(DataBase)
|
let stringl = chat.message
|
||||||
const chat = db.characters[selectedID].chats[page]
|
.map((v) => {
|
||||||
const char = db.characters[selectedID]
|
if (v.saying) {
|
||||||
const date = new Date().toJSON();
|
return `${findCharacterbyId(v.saying).name}\n${v.data}`;
|
||||||
console.log(mode)
|
} else {
|
||||||
if(mode === '0'){
|
return `${v.role === "char" ? char.name : db.username}\n${v.data}`;
|
||||||
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..`
|
|
||||||
})
|
})
|
||||||
const db = get(DataBase)
|
.join("\n\n");
|
||||||
const charID = get(selectedCharID)
|
|
||||||
const group = db.characters[charID]
|
|
||||||
if(group.type !== 'group'){
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const imageUrls = await Promise.all(group.characters.map((v) => {
|
if (char.type !== "group") {
|
||||||
return getCharImage(findCharacterbyId(v).image, 'plain')
|
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);
|
||||||
|
|
||||||
const canvas = document.createElement("canvas");
|
if (dat.name.endsWith("jsonl")) {
|
||||||
canvas.width = 256
|
const lines = Buffer.from(dat.data).toString("utf-8").split("\n");
|
||||||
canvas.height = 256
|
let newChat: Chat = {
|
||||||
const ctx = canvas.getContext("2d");
|
message: [],
|
||||||
|
note: "",
|
||||||
|
name: "Imported Chat",
|
||||||
|
localLore: [],
|
||||||
|
};
|
||||||
|
|
||||||
// Load the images
|
let isFirst = true;
|
||||||
const images = [];
|
for (const line of lines) {
|
||||||
let loadedImages = 0;
|
const presedLine = JSON.parse(line);
|
||||||
|
if ((presedLine.name && presedLine.is_user, presedLine.mes)) {
|
||||||
await Promise.all(
|
if (!isFirst) {
|
||||||
imageUrls.map(
|
newChat.message.push({
|
||||||
(url) =>
|
role: presedLine.is_user ? "user" : "char",
|
||||||
new Promise<void>((resolve) => {
|
data: formatTavernChat(
|
||||||
const img = new Image();
|
presedLine.mes,
|
||||||
img.crossOrigin="anonymous"
|
db.characters[selectedID].name
|
||||||
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
|
isFirst = false;
|
||||||
|
}
|
||||||
|
|
||||||
const uri = canvas.toDataURL()
|
if (newChat.message.length === 0) {
|
||||||
console.log(uri)
|
alertError(language.errors.noData);
|
||||||
canvas.remove()
|
return;
|
||||||
db.characters[charID].image = await saveImage(dataURLtoBuffer(uri));
|
}
|
||||||
setDatabase(db)
|
|
||||||
alertStore.set({
|
db.characters[selectedID].chats.push(newChat);
|
||||||
type: 'none',
|
setDatabase(db);
|
||||||
msg: ''
|
alertNormal(language.successImport);
|
||||||
})
|
} else {
|
||||||
} catch (error) {
|
const json = JSON.parse(Buffer.from(dat.data).toString("utf-8"));
|
||||||
alertError(`${error}`)
|
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){
|
function formatTavernChat(chat: string, charName: string) {
|
||||||
const regex = /^data:.+\/(.+);base64,(.*)$/;
|
const db = get(DataBase);
|
||||||
|
return chat
|
||||||
|
.replace(/<([Uu]ser)>|\{\{([Uu]ser)\}\}/g, db.username)
|
||||||
|
.replace(/((\{\{)|<)([Cc]har)(=.+)?((\}\})|>)/g, charName);
|
||||||
|
}
|
||||||
|
|
||||||
const matches = string.match(regex);
|
export function characterFormatUpdate(index: number | character) {
|
||||||
const ext = matches[1];
|
let db = get(DataBase);
|
||||||
const data = matches[2];
|
let cha = typeof index === "number" ? db.characters[index] : index;
|
||||||
return Buffer.from(data, 'base64');
|
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() {
|
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({
|
alertStore.set({
|
||||||
type: 'wait',
|
type: "wait",
|
||||||
msg: `Loading Sample bots...`
|
msg: `Loading Sample bots...`,
|
||||||
})
|
});
|
||||||
|
|
||||||
for(const img of imgs){
|
for (const img of imgs) {
|
||||||
const imgBuffer = await (await img).arrayBuffer()
|
const imgBuffer = await (await img).arrayBuffer();
|
||||||
const readed = (await exifr.parse(imgBuffer, true))
|
const readed = await exifr.parse(imgBuffer, true);
|
||||||
await sleep(10)
|
await sleep(10);
|
||||||
const va = decodeMsgpack(Buffer.from(readed.risuai, 'base64')) as any
|
const va = decodeMsgpack(Buffer.from(readed.risuai, "base64")) as any;
|
||||||
if(va.type !== 101){
|
if (va.type !== 101) {
|
||||||
alertError(language.errors.noData)
|
alertError(language.errors.noData);
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
let char:character = va.data
|
let char: character = va.data;
|
||||||
let db = get(DataBase)
|
let db = get(DataBase);
|
||||||
if(char.emotionImages && char.emotionImages.length > 0){
|
if (char.emotionImages && char.emotionImages.length > 0) {
|
||||||
for(let i=0;i<char.emotionImages.length;i++){
|
for (let i = 0; i < char.emotionImages.length; i++) {
|
||||||
await sleep(10)
|
await sleep(10);
|
||||||
const imgp = await saveImage(char.emotionImages[i][1] as any)
|
const imgp = await saveImage(char.emotionImages[i][1] as any);
|
||||||
char.emotionImages[i][1] = imgp
|
char.emotionImages[i][1] = imgp;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
char.chats = [{
|
char.chats = [
|
||||||
message: [],
|
{
|
||||||
note: '',
|
message: [],
|
||||||
name: 'Chat 1',
|
note: "",
|
||||||
localLore: []
|
name: "Chat 1",
|
||||||
}]
|
localLore: [],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
if(checkNullish(char.sdData)){
|
if (checkNullish(char.sdData)) {
|
||||||
char.sdData = defaultSdDataFunc()
|
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)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
alertStore.set({
|
char.chatPage = 0;
|
||||||
type: 'none',
|
char.image = await saveImage(PngMetadata.filter(Buffer.from(imgBuffer)));
|
||||||
msg: ''
|
char.chaId = uuidv4();
|
||||||
})
|
db.characters.push(characterFormatUpdate(char));
|
||||||
|
setDatabase(db);
|
||||||
|
}
|
||||||
|
|
||||||
|
alertStore.set({
|
||||||
|
type: "none",
|
||||||
|
msg: "",
|
||||||
|
});
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user