mincomk/risuai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Themes

Browse Source
This commit is contained in:
kwaroran
2024-11-02 04:04:11 +09:00
parent 52c6641813
commit 42f534e6dd
4 changed files with 266 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

359
src/lib/ChatScreens/Chat.svelte
View File

@@ -58,6 +58,7 @@
let msgDisplay = $state('') let msgDisplay = $state('')
let translated = $state(DBState.db.autoTranslate) 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){ async function rm(e:MouseEvent, rec?:boolean){
if(e.shiftKey){ if(e.shiftKey){
let msg = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message let msg = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message
@@ -88,9 +89,7 @@
} }
async function edit(){ async function edit(){
let msg = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[idx].data = message
msg[idx].data = message
DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message = msg
} }
function getCbsCondition(){ function getCbsCondition(){
@@ -193,153 +192,225 @@
unsubscribers.forEach(u => u()) unsubscribers.forEach(u => u())
}) })
</script> </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 />
{/if}
</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}
{/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>
</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">
<span class="text-xs">{statusMessage}</span>
{#if DBState.db.useChatCopy && !blankMessage}
<button class="ml-2 hover:text-green-500 transition-colors" onclick={()=>{
window.navigator.clipboard.writeText(msgDisplay).then(() => {
setStatusMessage(language.copied)
})
}}>
<CopyIcon size={20}/>
</button>
{/if}
{#if idx > -1}
{#if DBState.db.characters[$selectedCharID].type !== 'group' && DBState.db.characters[$selectedCharID].ttsMode !== 'none' && (DBState.db.characters[$selectedCharID].ttsMode)}
<button class="ml-2 hover:text-green-500 transition-colors" onclick={()=>{
return sayTTS(null, message)
}}>
<Volume2Icon size={20}/>
</button>
{/if}
{#if !$ConnectionOpenStore}
<button class={"ml-2 hover:text-green-500 transition-colors "+(editMode?'text-green-400':'')} onclick={() => { {#snippet genInfo()}
if(!editMode){ {#if messageGenerationInfo && DBState.db.requestInfoInsideChat}
editMode = true <div>
} <button class="text-sm p-1 text-textcolor2 border-darkborderc float-end mr-2 my-2
else{ hover:ring-darkbutton hover:ring rounded-md hover:text-textcolor transition-all flex justify-center items-center"
editMode = false onclick={() => {
edit() alertRequestData({
} genInfo: messageGenerationInfo,
}}> idx: idx,
<PencilIcon size={20}/> })
</button> }}
<button class="ml-2 hover:text-green-500 transition-colors" onclick={(e) => rm(e, false)} use:longpress={(e) => rm(e, true)}> >
<TrashIcon size={20}/> <BotIcon size={20} />
</button> <span class="ml-1">
{/if} {capitalize(getModelShortName(messageGenerationInfo.model))}
{/if} </span>
{#if DBState.db.translator !== '' && !blankMessage} </button>
<button class={"ml-2 cursor-pointer hover:text-green-500 transition-colors " + (translated ? 'text-green-400':'')} class:translating={translating} onclick={async () => { </div>
translated = !translated {/if}
}}> {/snippet}
<LanguagesIcon />
</button> {#snippet textBox()}
{/if} {#if editMode}
{#if rerollIcon || altGreeting} <AutoresizeArea bind:value={message} handleLongPress={(e) => {
{#if DBState.db.swipe || altGreeting} editMode = false
<button class="ml-2 hover:text-green-500 transition-colors" onclick={unReroll}> }} />
<ArrowLeft size={22}/> {:else if blankMessage}
</button> <div class="w-full flex justify-center text-textcolor2 italic mb-12">
<button class="ml-2 hover:text-green-500 transition-colors" onclick={onReroll}> {language.noMessage}
<ArrowRight size={22}/> </div>
</button> {:else}
{:else} <!-- svelte-ignore a11y_click_events_have_key_events -->
<button class="ml-2 hover:text-green-500 transition-colors" onclick={onReroll}> <!-- svelte-ignore a11y_no_static_element_interactions -->
<RefreshCcwIcon size={20}/> <span class="text chat chattext prose minw-0" class:prose-invert={$ColorSchemeTypeStore} onclick={() => {
</button> if(DBState.db.clickToEdit && idx > -1){
{/if} editMode = true
{/if} }
</div> }}
</div> style:font-size="{0.875 * (DBState.db.zoomsize / 100)}rem"
{#if messageGenerationInfo && DBState.db.requestInfoInsideChat} style:line-height="{(DBState.db.lineHeight ?? 1.25) * (DBState.db.zoomsize / 100)}rem"
<div> >
<button class="text-sm p-1 text-textcolor2 border-darkborderc float-end mr-2 my-2 {#key $ReloadGUIPointer}
hover:ring-darkbutton hover:ring rounded-md hover:text-textcolor transition-all flex justify-center items-center" {#await markParsing(msgDisplay, character, 'normal', idx, translated)}
onclick={() => { {@html lastParsed}
alertRequestData({ {:then md}
genInfo: messageGenerationInfo, {@html md}
idx: idx, {/await}
}) {/key}
}} </span>
> {/if}
<BotIcon size={20} /> {/snippet}
<span class="ml-1">
{capitalize(getModelShortName(messageGenerationInfo.model))} {#snippet icons(options:{applyTextColors?:boolean} = {})}
</span> <div class="flex-grow flex items-center justify-end" class:text-textcolor2={options?.applyTextColors !== false}>
</button> <span class="text-xs">{statusMessage}</span>
</div> {#if DBState.db.useChatCopy && !blankMessage}
<button class="ml-2 hover:text-green-500 transition-colors" onclick={()=>{
window.navigator.clipboard.writeText(msgDisplay).then(() => {
setStatusMessage(language.copied)
})
}}>
<CopyIcon size={20}/>
</button>
{/if}
{#if idx > -1}
{#if DBState.db.characters[$selectedCharID].type !== 'group' && DBState.db.characters[$selectedCharID].ttsMode !== 'none' && (DBState.db.characters[$selectedCharID].ttsMode)}
<button class="ml-2 hover:text-green-500 transition-colors" onclick={()=>{
return sayTTS(null, message)
}}>
<Volume2Icon size={20}/>
</button>
{/if} {/if}
{#if editMode}
<AutoresizeArea bind:value={message} handleLongPress={(e) => { {#if !$ConnectionOpenStore}
editMode = false <button class={"ml-2 hover:text-green-500 transition-colors "+(editMode?'text-green-400':'')} onclick={() => {
}} /> if(!editMode){
{: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 editMode = true
} }
}} else{
style:font-size="{0.875 * (DBState.db.zoomsize / 100)}rem" editMode = false
style:line-height="{(DBState.db.lineHeight ?? 1.25) * (DBState.db.zoomsize / 100)}rem" edit()
> }
{#key $ReloadGUIPointer} }}>
{#await markParsing(msgDisplay, character, 'normal', idx, translated)} <PencilIcon size={20}/>
{@html lastParsed} </button>
{:then md} <button class="ml-2 hover:text-green-500 transition-colors" onclick={(e) => rm(e, false)} use:longpress={(e) => rm(e, true)}>
{@html md} <TrashIcon size={20}/>
{/await} </button>
{/key}
</span>
{/if} {/if}
</span> {/if}
{#if DBState.db.translator !== '' && !blankMessage}
<button class={"ml-2 cursor-pointer hover:text-green-500 transition-colors " + (translated ? 'text-green-400':'')} class:translating={translating} onclick={async () => {
translated = !translated
}}>
<LanguagesIcon />
</button>
{/if}
{#if rerollIcon || altGreeting}
{#if DBState.db.swipe || altGreeting}
<button class="ml-2 hover:text-green-500 transition-colors" onclick={unReroll}>
<ArrowLeft size={22}/>
</button>
<button class="ml-2 hover:text-green-500 transition-colors" onclick={onReroll}>
<ArrowRight size={22}/>
</button>
{:else}
<button class="ml-2 hover:text-green-500 transition-colors" onclick={onReroll}>
<RefreshCcwIcon size={20}/>
</button>
{/if}
{/if}
</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}
</div>
{:else}
{#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}
{/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}
</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>
</div> </div>

26
src/lib/ChatScreens/ChatScreen.svelte
View File

@@ -35,19 +35,6 @@
{#if $ShowVN} {#if $ShowVN}
<VisualNovelMain /> <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'} {:else if DBState.db.theme === 'waifu'}
<div class="flex-grow h-full flex justify-center relative" style="{bgImg.length < 4 ? wallPaper : bgImg}"> <div class="flex-grow h-full flex justify-center relative" style="{bgImg.length < 4 ? wallPaper : bgImg}">
<SideBarArrow /> <SideBarArrow />
@@ -81,6 +68,19 @@
{/if} {/if}
{/if} {/if}
</div> </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}
{#if openChatList} {#if openChatList}
<ChatList close={() => {openChatList = false}}/> <ChatList close={() => {openChatList = false}}/>

75
src/lib/Playground/PlaygroundImageGen.svelte
View File

@@ -1,49 +1,34 @@
<script lang="ts"> <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">
import { language } from "src/lang"; <div class="relative">
import TextAreaInput from "../UI/GUI/TextAreaInput.svelte"; <!-- Image -->
import Button from "../UI/GUI/Button.svelte"; <img class="w-full h-48 object-cover transform hover:scale-105 transition-transform duration-300 ease-in-out"
import { generateAIImage } from "src/ts/process/stableDiff"; src="your-image-url.jpg"
import { createBlankChar } from "src/ts/characters"; 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(""); <div class="p-6">
let negPrompt = $state(""); <!-- Title -->
let img = $state(""); <h2 class="mb-3 text-2xl font-bold text-gray-800 hover:text-indigo-600 transition-colors duration-300">
let generating = $state(false) Card Title
</h2>
const run = async () => { <!-- Description -->
console.log('running') <p class="text-gray-600 leading-relaxed mb-4">
if(generating){ Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates rerum quisquam, temporibus quasi distinctio magnam.
return </p>
}
generating = true
const gen = await generateAIImage(prompt, createBlankChar(), negPrompt, 'inlay')
generating = false
if(gen){
img = gen
}
}
</script>
<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> <!-- Optional metadata -->
<span class="text-sm text-gray-500">
<TextAreaInput bind:value={prompt} /> 5 min read
</span>
<span class="text-textcolor text-lg">Neg. Prompt</span> </div>
</div>
<TextAreaInput bind:value={negPrompt} /> </div>
{#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>

5
src/lib/Setting/Pages/DisplaySettings.svelte
View File

@@ -53,7 +53,10 @@
<SelectInput className="mt-2" bind:value={DBState.db.theme}> <SelectInput className="mt-2" bind:value={DBState.db.theme}>
<OptionInput value="" >Standard Risu</OptionInput> <OptionInput value="" >Standard Risu</OptionInput>
<OptionInput value="waifu" >Waifulike</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> --> <!-- <OptionInput value="custom" >Custom GUI</OptionInput> -->
</SelectInput> </SelectInput>