Add Themes
This commit is contained in:
kwaroran
@@ -58,6 +58,7 @@
|
||||
|
||||
let msgDisplay = $state('')
|
||||
let translated = $state(DBState.db.autoTranslate)
|
||||
let role = $derived(DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[idx]?.role)
|
||||
async function rm(e:MouseEvent, rec?:boolean){
|
||||
if(e.shiftKey){
|
||||
let msg = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message
|
||||
@@ -88,9 +89,7 @@
|
||||
}
|
||||
|
||||
async function edit(){
|
||||
let msg = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message
|
||||
msg[idx].data = message
|
||||
DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message = msg
|
||||
DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[idx].data = message
|
||||
}
|
||||
|
||||
function getCbsCondition(){
|
||||
@@ -193,47 +192,62 @@
|
||||
unsubscribers.forEach(u => u())
|
||||
})
|
||||
</script>
|
||||
<div class="flex max-w-full justify-center risu-chat" style={isLastMemory ? `border-top:${DBState.db.memoryLimitThickness}px solid rgba(98, 114, 164, 0.7);` : ''}>
|
||||
<div class="text-textcolor mt-1 ml-4 mr-4 mb-1 p-2 bg-transparent flex-grow border-t-gray-900 border-opacity-30 border-transparent flexium items-start max-w-full" >
|
||||
{#if !blankMessage && !$HideIconStore}
|
||||
{#if DBState.db.characters[$selectedCharID]?.chaId === "§playground"}
|
||||
<div class="shadow-lg border-textcolor2 border mt-2 flex justify-center items-center text-textcolor2" style={`height:${DBState.db.iconsize * 3.5 / 100}rem;width:${DBState.db.iconsize * 3.5 / 100}rem;min-width:${DBState.db.iconsize * 3.5 / 100}rem`}
|
||||
class:rounded-md={!DBState.db.roundIcons} class:rounded-full={DBState.db.roundIcons}>
|
||||
{#if name === 'assistant'}
|
||||
<BotIcon />
|
||||
{:else}
|
||||
<UserIcon />
|
||||
|
||||
|
||||
{#snippet genInfo()}
|
||||
{#if messageGenerationInfo && DBState.db.requestInfoInsideChat}
|
||||
<div>
|
||||
<button class="text-sm p-1 text-textcolor2 border-darkborderc float-end mr-2 my-2
|
||||
hover:ring-darkbutton hover:ring rounded-md hover:text-textcolor transition-all flex justify-center items-center"
|
||||
onclick={() => {
|
||||
alertRequestData({
|
||||
genInfo: messageGenerationInfo,
|
||||
idx: idx,
|
||||
})
|
||||
}}
|
||||
>
|
||||
<BotIcon size={20} />
|
||||
<span class="ml-1">
|
||||
{capitalize(getModelShortName(messageGenerationInfo.model))}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
{/snippet}
|
||||
|
||||
{#snippet textBox()}
|
||||
{#if editMode}
|
||||
<AutoresizeArea bind:value={message} handleLongPress={(e) => {
|
||||
editMode = false
|
||||
}} />
|
||||
{:else if blankMessage}
|
||||
<div class="w-full flex justify-center text-textcolor2 italic mb-12">
|
||||
{language.noMessage}
|
||||
</div>
|
||||
{:else}
|
||||
{#await img}
|
||||
<div class="shadow-lg bg-textcolor2 mt-2" style={`height:${DBState.db.iconsize * 3.5 / 100}rem;width:${DBState.db.iconsize * 3.5 / 100}rem;min-width:${DBState.db.iconsize * 3.5 / 100}rem`}
|
||||
class:rounded-md={!DBState.db.roundIcons} class:rounded-full={DBState.db.roundIcons}></div>
|
||||
{:then m}
|
||||
{#if largePortrait && (!DBState.db.roundIcons)}
|
||||
<div class="shadow-lg bg-textcolor2 mt-2" style={m + `height:${DBState.db.iconsize * 3.5 / 100 / 0.75}rem;width:${DBState.db.iconsize * 3.5 / 100}rem;min-width:${DBState.db.iconsize * 3.5 / 100}rem`}
|
||||
class:rounded-md={!DBState.db.roundIcons} class:rounded-full={DBState.db.roundIcons}></div>
|
||||
{:else}
|
||||
<div class="shadow-lg bg-textcolor2 mt-2" style={m + `height:${DBState.db.iconsize * 3.5 / 100}rem;width:${DBState.db.iconsize * 3.5 / 100}rem;min-width:${DBState.db.iconsize * 3.5 / 100}rem`}
|
||||
class:rounded-md={!DBState.db.roundIcons} class:rounded-full={DBState.db.roundIcons}></div>
|
||||
{/if}
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<span class="text chat chattext prose minw-0" class:prose-invert={$ColorSchemeTypeStore} onclick={() => {
|
||||
if(DBState.db.clickToEdit && idx > -1){
|
||||
editMode = true
|
||||
}
|
||||
}}
|
||||
style:font-size="{0.875 * (DBState.db.zoomsize / 100)}rem"
|
||||
style:line-height="{(DBState.db.lineHeight ?? 1.25) * (DBState.db.zoomsize / 100)}rem"
|
||||
>
|
||||
{#key $ReloadGUIPointer}
|
||||
{#await markParsing(msgDisplay, character, 'normal', idx, translated)}
|
||||
{@html lastParsed}
|
||||
{:then md}
|
||||
{@html md}
|
||||
{/await}
|
||||
{/if}
|
||||
{/if}
|
||||
<span class="flex flex-col ml-4 w-full max-w-full min-w-0">
|
||||
<div class="flexium items-center chat">
|
||||
{#if DBState.db.characters[$selectedCharID]?.chaId === "§playground" && !blankMessage}
|
||||
<span class="chat text-xl border-darkborderc flex items-center">
|
||||
<span>{name === 'assistant' ? 'Assistant' : 'User'}</span>
|
||||
<button class="ml-2 text-textcolor2 hover:text-textcolor" onclick={() => {
|
||||
DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[idx].role = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[idx].role === 'char' ? 'user' : 'char'
|
||||
DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage] = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage]
|
||||
}}><ArrowLeftRightIcon size="18" /></button>
|
||||
{/key}
|
||||
</span>
|
||||
{:else if !blankMessage && !$HideIconStore}
|
||||
<span class="chat text-xl unmargin text-textcolor">{name}</span>
|
||||
{/if}
|
||||
<div class="flex-grow flex items-center justify-end text-textcolor2">
|
||||
{/snippet}
|
||||
|
||||
{#snippet icons(options:{applyTextColors?:boolean} = {})}
|
||||
<div class="flex-grow flex items-center justify-end" class:text-textcolor2={options?.applyTextColors !== false}>
|
||||
<span class="text-xs">{statusMessage}</span>
|
||||
{#if DBState.db.useChatCopy && !blankMessage}
|
||||
<button class="ml-2 hover:text-green-500 transition-colors" onclick={()=>{
|
||||
@@ -292,55 +306,112 @@
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if messageGenerationInfo && DBState.db.requestInfoInsideChat}
|
||||
<div>
|
||||
<button class="text-sm p-1 text-textcolor2 border-darkborderc float-end mr-2 my-2
|
||||
hover:ring-darkbutton hover:ring rounded-md hover:text-textcolor transition-all flex justify-center items-center"
|
||||
onclick={() => {
|
||||
alertRequestData({
|
||||
genInfo: messageGenerationInfo,
|
||||
idx: idx,
|
||||
})
|
||||
}}
|
||||
>
|
||||
<BotIcon size={20} />
|
||||
<span class="ml-1">
|
||||
{capitalize(getModelShortName(messageGenerationInfo.model))}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
{/snippet}
|
||||
|
||||
{#snippet icon(options:{rounded?:boolean,styleFix?:string} = {})}
|
||||
{#if !blankMessage && !$HideIconStore}
|
||||
{#if DBState.db.characters[$selectedCharID]?.chaId === "§playground"}
|
||||
<div class="shadow-lg border-textcolor2 border flex justify-center items-center text-textcolor2" style={options?.styleFix ?? `height:${DBState.db.iconsize * 3.5 / 100}rem;width:${DBState.db.iconsize * 3.5 / 100}rem;min-width:${DBState.db.iconsize * 3.5 / 100}rem`}
|
||||
class:rounded-md={options?.rounded} class:rounded-full={options?.rounded}>
|
||||
{#if name === 'assistant'}
|
||||
<BotIcon />
|
||||
{:else}
|
||||
<UserIcon />
|
||||
{/if}
|
||||
{#if editMode}
|
||||
<AutoresizeArea bind:value={message} handleLongPress={(e) => {
|
||||
editMode = false
|
||||
}} />
|
||||
{:else if blankMessage}
|
||||
<div class="w-full flex justify-center text-textcolor2 italic mb-12">
|
||||
{language.noMessage}
|
||||
</div>
|
||||
{:else}
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<span class="text chat chattext prose minw-0" class:prose-invert={$ColorSchemeTypeStore} onclick={() => {
|
||||
if(DBState.db.clickToEdit && idx > -1){
|
||||
editMode = true
|
||||
}
|
||||
}}
|
||||
style:font-size="{0.875 * (DBState.db.zoomsize / 100)}rem"
|
||||
style:line-height="{(DBState.db.lineHeight ?? 1.25) * (DBState.db.zoomsize / 100)}rem"
|
||||
>
|
||||
{#key $ReloadGUIPointer}
|
||||
{#await markParsing(msgDisplay, character, 'normal', idx, translated)}
|
||||
{@html lastParsed}
|
||||
{:then md}
|
||||
{@html md}
|
||||
{#await img}
|
||||
<div class="shadow-lg bg-textcolor2" style={options?.styleFix ??`height:${DBState.db.iconsize * 3.5 / 100}rem;width:${DBState.db.iconsize * 3.5 / 100}rem;min-width:${DBState.db.iconsize * 3.5 / 100}rem`}
|
||||
class:rounded-md={!options?.rounded} class:rounded-full={options?.rounded}></div>
|
||||
{:then m}
|
||||
{#if largePortrait && (!options?.rounded)}
|
||||
<div class="shadow-lg bg-textcolor2" style={m + (options?.styleFix ?? `height:${DBState.db.iconsize * 3.5 / 100 / 0.75}rem;width:${DBState.db.iconsize * 3.5 / 100}rem;min-width:${DBState.db.iconsize * 3.5 / 100}rem`)}
|
||||
class:rounded-md={!options?.rounded} class:rounded-full={options?.rounded}></div>
|
||||
{:else}
|
||||
<div class="shadow-lg bg-textcolor2" style={m + (options?.styleFix ?? `height:${DBState.db.iconsize * 3.5 / 100}rem;width:${DBState.db.iconsize * 3.5 / 100}rem;min-width:${DBState.db.iconsize * 3.5 / 100}rem`)}
|
||||
class:rounded-md={!options?.rounded} class:rounded-full={options?.rounded}></div>
|
||||
{/if}
|
||||
{/await}
|
||||
{/key}
|
||||
{/if}
|
||||
{/if}
|
||||
{/snippet}
|
||||
|
||||
<div class="flex max-w-full justify-center risu-chat" style={isLastMemory ? `border-top:${DBState.db.memoryLimitThickness}px solid rgba(98, 114, 164, 0.7);` : ''}>
|
||||
<div class="text-textcolor mt-1 ml-4 mr-4 mb-1 p-2 bg-transparent flex-grow border-t-gray-900 border-opacity-30 border-transparent flexium items-start max-w-full" >
|
||||
{#if DBState.db.theme === 'mobilechat' && !blankMessage}
|
||||
<div class={role === 'user' ? "flex items-start w-full justify-end" : "flex items-start"}>
|
||||
{#if role !== 'user'}
|
||||
{@render icon({rounded: true})}
|
||||
{/if}
|
||||
<div
|
||||
class="bg-gray-100 rounded-lg p-3 max-w-[70%] mx-2"
|
||||
class:rounded-tl-none={role !== 'user'}
|
||||
class:rounded-tr-none={role === 'user'}
|
||||
>
|
||||
<p class="text-gray-800">{@render textBox()}</p>
|
||||
{#if DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[idx]?.time}
|
||||
<span class="text-xs text-textcolor2 mt-1 block">
|
||||
{new Intl.DateTimeFormat(undefined, {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour12: false
|
||||
}).format(DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[idx].time)}
|
||||
</span>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
{#if role === 'user'}
|
||||
{@render icon({rounded: true})}
|
||||
{/if}
|
||||
</div>
|
||||
{:else if DBState.db.theme === 'cardboard' && !blankMessage}
|
||||
<div class="w-full flex flex-col px-0 sm:px-4 py-4 relative">
|
||||
<div class="bg-gradient-to-b from-gray-100 to-gray-200 rounded-lg shadow-lg border-gray-400 border p-4 flex flex-col">
|
||||
<div class="flex gap-4 mt-2 flex-col sm:flex-row">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="sm:h-96 sm:w-72 sm:min-w-72 w-48 h-64">
|
||||
{@render icon({rounded: false, styleFix:'height:100%;width:100%;'})}
|
||||
</div>
|
||||
<h2 class="text-base font-bold text-gray-500 text-center mt-2 max-w-full text-ellipsis">{name}</h2>
|
||||
|
||||
</div>
|
||||
{#if editMode}
|
||||
<textarea class="flex-grow h-96 overflow-y-auto bg-transparent text-black p-2 mb-2 resize-none" bind:value={message}></textarea>
|
||||
{:else}
|
||||
<div class="flex-grow h-96 overflow-y-auto p-2 mb-2 sm:mb-0">
|
||||
{@render textBox()}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-0 right-0 bg-gradient-to-b from-gray-200 to-gray-300 p-2 rounded-md border border-gray-400 text-gray-400">
|
||||
{@render icons({applyTextColors: false})}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
{@render icon({rounded: DBState.db.roundIcons})}
|
||||
<span class="flex flex-col ml-4 w-full max-w-full min-w-0 text-black">
|
||||
<div class="flexium items-center chat">
|
||||
{#if DBState.db.characters[$selectedCharID]?.chaId === "§playground" && !blankMessage}
|
||||
<span class="chat text-xl border-darkborderc flex items-center">
|
||||
<span>{name === 'assistant' ? 'Assistant' : 'User'}</span>
|
||||
<button class="ml-2 text-textcolor2 hover:text-textcolor" onclick={() => {
|
||||
DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[idx].role = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[idx].role === 'char' ? 'user' : 'char'
|
||||
DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage] = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage]
|
||||
}}><ArrowLeftRightIcon size="18" /></button>
|
||||
</span>
|
||||
{:else if !blankMessage && !$HideIconStore}
|
||||
<span class="chat text-xl unmargin text-textcolor">{name}</span>
|
||||
{/if}
|
||||
{@render icons()}
|
||||
</div>
|
||||
{@render genInfo()}
|
||||
{@render textBox()}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -35,19 +35,6 @@
|
||||
|
||||
{#if $ShowVN}
|
||||
<VisualNovelMain />
|
||||
{:else if DBState.db.theme === ''}
|
||||
<div class="flex-grow h-full min-w-0 relative justify-center flex">
|
||||
<SideBarArrow />
|
||||
<BackgroundDom />
|
||||
<div style={bgImg} class="h-full w-full" class:max-w-6xl={DBState.db.classicMaxWidth}>
|
||||
{#if $selectedCharID >= 0}
|
||||
{#if DBState.db.characters[$selectedCharID].viewScreen !== 'none' && (DBState.db.characters[$selectedCharID].type === 'group' || (!DBState.db.characters[$selectedCharID].inlayViewScreen))}
|
||||
<ResizeBox />
|
||||
{/if}
|
||||
{/if}
|
||||
<DefaultChatScreen customStyle={bgImg.length > 2 ? `${externalStyles}`: ''} bind:openChatList bind:openModuleList/>
|
||||
</div>
|
||||
</div>
|
||||
{:else if DBState.db.theme === 'waifu'}
|
||||
<div class="flex-grow h-full flex justify-center relative" style="{bgImg.length < 4 ? wallPaper : bgImg}">
|
||||
<SideBarArrow />
|
||||
@@ -81,6 +68,19 @@
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex-grow h-full min-w-0 relative justify-center flex">
|
||||
<SideBarArrow />
|
||||
<BackgroundDom />
|
||||
<div style={bgImg} class="h-full w-full" class:max-w-6xl={DBState.db.classicMaxWidth}>
|
||||
{#if $selectedCharID >= 0}
|
||||
{#if DBState.db.characters[$selectedCharID].viewScreen !== 'none' && (DBState.db.characters[$selectedCharID].type === 'group' || (!DBState.db.characters[$selectedCharID].inlayViewScreen))}
|
||||
<ResizeBox />
|
||||
{/if}
|
||||
{/if}
|
||||
<DefaultChatScreen customStyle={bgImg.length > 2 ? `${externalStyles}`: ''} bind:openChatList bind:openModuleList/>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{#if openChatList}
|
||||
<ChatList close={() => {openChatList = false}}/>
|
||||
|
||||
@@ -1,49 +1,34 @@
|
||||
<script lang="ts">
|
||||
import { language } from "src/lang";
|
||||
import TextAreaInput from "../UI/GUI/TextAreaInput.svelte";
|
||||
import Button from "../UI/GUI/Button.svelte";
|
||||
import { generateAIImage } from "src/ts/process/stableDiff";
|
||||
import { createBlankChar } from "src/ts/characters";
|
||||
<div class="max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
|
||||
<div class="relative">
|
||||
<!-- Image -->
|
||||
<img class="w-full h-48 object-cover transform hover:scale-105 transition-transform duration-300 ease-in-out"
|
||||
src="your-image-url.jpg"
|
||||
alt="Card Image">
|
||||
<!-- Optional overlay gradient -->
|
||||
<div class="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-black/60 to-transparent"></div>
|
||||
</div>
|
||||
|
||||
let prompt = $state("");
|
||||
let negPrompt = $state("");
|
||||
let img = $state("");
|
||||
let generating = $state(false)
|
||||
<div class="p-6">
|
||||
<!-- Title -->
|
||||
<h2 class="mb-3 text-2xl font-bold text-gray-800 hover:text-indigo-600 transition-colors duration-300">
|
||||
Card Title
|
||||
</h2>
|
||||
|
||||
const run = async () => {
|
||||
console.log('running')
|
||||
if(generating){
|
||||
return
|
||||
}
|
||||
generating = true
|
||||
const gen = await generateAIImage(prompt, createBlankChar(), negPrompt, 'inlay')
|
||||
generating = false
|
||||
if(gen){
|
||||
img = gen
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!-- Description -->
|
||||
<p class="text-gray-600 leading-relaxed mb-4">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates rerum quisquam, temporibus quasi distinctio magnam.
|
||||
</p>
|
||||
|
||||
<h2 class="text-4xl text-textcolor my-6 font-black relative">{language.imageGeneration}</h2>
|
||||
<!-- Optional footer with button -->
|
||||
<div class="flex justify-between items-center mt-4">
|
||||
<button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors duration-300 transform hover:scale-105">
|
||||
Learn More
|
||||
</button>
|
||||
|
||||
<span class="text-textcolor text-lg">Prompt</span>
|
||||
|
||||
<TextAreaInput bind:value={prompt} />
|
||||
|
||||
<span class="text-textcolor text-lg">Neg. Prompt</span>
|
||||
|
||||
<TextAreaInput bind:value={negPrompt} />
|
||||
|
||||
{#if img}
|
||||
<span class="text-textcolor text-lg">Generated</span>
|
||||
|
||||
<img src={img} class="max-w-full mt-4" alt="Generated"/>
|
||||
|
||||
{/if}
|
||||
<Button className="mt-6" onclick={run}>
|
||||
{#if generating}
|
||||
<div class="loadmove"></div>
|
||||
{:else}
|
||||
Generate
|
||||
{/if}
|
||||
</Button>
|
||||
<!-- Optional metadata -->
|
||||
<span class="text-sm text-gray-500">
|
||||
5 min read
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -53,7 +53,10 @@
|
||||
<SelectInput className="mt-2" bind:value={DBState.db.theme}>
|
||||
<OptionInput value="" >Standard Risu</OptionInput>
|
||||
<OptionInput value="waifu" >Waifulike</OptionInput>
|
||||
<OptionInput value="waifuMobile" >WaifuCut</OptionInput>
|
||||
<!-- <OptionInput value="waifuMobile" >WaifuCut</OptionInput> -->
|
||||
<OptionInput value="mobilechat" >Mobile Chat</OptionInput>
|
||||
<OptionInput value="cardboard" >CardBoard</OptionInput>
|
||||
|
||||
<!-- <OptionInput value="custom" >Custom GUI</OptionInput> -->
|
||||
</SelectInput>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user