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

229
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,47 +192,62 @@
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} {#snippet genInfo()}
{#if DBState.db.characters[$selectedCharID]?.chaId === "§playground"} {#if messageGenerationInfo && DBState.db.requestInfoInsideChat}
<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`} <div>
class:rounded-md={!DBState.db.roundIcons} class:rounded-full={DBState.db.roundIcons}> <button class="text-sm p-1 text-textcolor2 border-darkborderc float-end mr-2 my-2
{#if name === 'assistant'} hover:ring-darkbutton hover:ring rounded-md hover:text-textcolor transition-all flex justify-center items-center"
<BotIcon /> onclick={() => {
{:else} alertRequestData({
<UserIcon /> genInfo: messageGenerationInfo,
idx: idx,
})
}}
>
<BotIcon size={20} />
<span class="ml-1">
{capitalize(getModelShortName(messageGenerationInfo.model))}
</span>
</button>
</div>
{/if} {/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> </div>
{:else} {:else}
{#await img} <!-- svelte-ignore a11y_click_events_have_key_events -->
<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`} <!-- svelte-ignore a11y_no_static_element_interactions -->
class:rounded-md={!DBState.db.roundIcons} class:rounded-full={DBState.db.roundIcons}></div> <span class="text chat chattext prose minw-0" class:prose-invert={$ColorSchemeTypeStore} onclick={() => {
{:then m} if(DBState.db.clickToEdit && idx > -1){
{#if largePortrait && (!DBState.db.roundIcons)} editMode = true
<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} style:font-size="{0.875 * (DBState.db.zoomsize / 100)}rem"
<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`} style:line-height="{(DBState.db.lineHeight ?? 1.25) * (DBState.db.zoomsize / 100)}rem"
class:rounded-md={!DBState.db.roundIcons} class:rounded-full={DBState.db.roundIcons}></div> >
{/if} {#key $ReloadGUIPointer}
{#await markParsing(msgDisplay, character, 'normal', idx, translated)}
{@html lastParsed}
{:then md}
{@html md}
{/await} {/await}
{/if} {/key}
{/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> </span>
{:else if !blankMessage && !$HideIconStore}
<span class="chat text-xl unmargin text-textcolor">{name}</span>
{/if} {/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> <span class="text-xs">{statusMessage}</span>
{#if DBState.db.useChatCopy && !blankMessage} {#if DBState.db.useChatCopy && !blankMessage}
<button class="ml-2 hover:text-green-500 transition-colors" onclick={()=>{ <button class="ml-2 hover:text-green-500 transition-colors" onclick={()=>{
@@ -292,55 +306,112 @@
{/if} {/if}
{/if} {/if}
</div> </div>
</div> {/snippet}
{#if messageGenerationInfo && DBState.db.requestInfoInsideChat}
<div> {#snippet icon(options:{rounded?:boolean,styleFix?:string} = {})}
<button class="text-sm p-1 text-textcolor2 border-darkborderc float-end mr-2 my-2 {#if !blankMessage && !$HideIconStore}
hover:ring-darkbutton hover:ring rounded-md hover:text-textcolor transition-all flex justify-center items-center" {#if DBState.db.characters[$selectedCharID]?.chaId === "§playground"}
onclick={() => { <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`}
alertRequestData({ class:rounded-md={options?.rounded} class:rounded-full={options?.rounded}>
genInfo: messageGenerationInfo, {#if name === 'assistant'}
idx: idx, <BotIcon />
}) {:else}
}} <UserIcon />
>
<BotIcon size={20} />
<span class="ml-1">
{capitalize(getModelShortName(messageGenerationInfo.model))}
</span>
</button>
</div>
{/if} {/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> </div>
{:else} {:else}
<!-- svelte-ignore a11y_click_events_have_key_events --> {#await img}
<span class="text chat chattext prose minw-0" class:prose-invert={$ColorSchemeTypeStore} onclick={() => { <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`}
if(DBState.db.clickToEdit && idx > -1){ class:rounded-md={!options?.rounded} class:rounded-full={options?.rounded}></div>
editMode = true {: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`)}
style:font-size="{0.875 * (DBState.db.zoomsize / 100)}rem" class:rounded-md={!options?.rounded} class:rounded-full={options?.rounded}></div>
style:line-height="{(DBState.db.lineHeight ?? 1.25) * (DBState.db.zoomsize / 100)}rem" {: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`)}
{#key $ReloadGUIPointer} class:rounded-md={!options?.rounded} class:rounded-full={options?.rounded}></div>
{#await markParsing(msgDisplay, character, 'normal', idx, translated)} {/if}
{@html lastParsed}
{:then md}
{@html md}
{/await} {/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> </span>
{/if} {/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> </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>

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>