From 42f534e6dd2da0127dbd50364fee8b0df1c7bc96 Mon Sep 17 00:00:00 2001
From: kwaroran <amasio1234@proton.me>
Date: Sat, 2 Nov 2024 04:04:11 +0900
Subject: [PATCH] Add Themes

---
 src/lib/ChatScreens/Chat.svelte              | 359 +++++++++++--------
 src/lib/ChatScreens/ChatScreen.svelte        |  26 +-
 src/lib/Playground/PlaygroundImageGen.svelte |  83 ++---
 src/lib/Setting/Pages/DisplaySettings.svelte |   5 +-
 4 files changed, 266 insertions(+), 207 deletions(-)

diff --git a/src/lib/ChatScreens/Chat.svelte b/src/lib/ChatScreens/Chat.svelte
index 802ddb22..4329bd26 100644
--- a/src/lib/ChatScreens/Chat.svelte
+++ b/src/lib/ChatScreens/Chat.svelte
@@ -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,153 +192,225 @@
         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 />
-                    {/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={() => {
-                                if(!editMode){
-                                    editMode = true
-                                }
-                                else{
-                                    editMode = false
-                                    edit()
-                                }
-                            }}>
-                                <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}/>
-                            </button>
-                        {/if}
-                    {/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>
-            </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 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}
+        <!-- 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}
+            {/key}
+        </span>
+    {/if}
+{/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={()=>{
+                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 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){
+
+            {#if !$ConnectionOpenStore}
+                <button class={"ml-2 hover:text-green-500 transition-colors "+(editMode?'text-green-400':'')} onclick={() => {
+                    if(!editMode){
                         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}
-                    {/key}
-                </span>
+                    else{
+                        editMode = false
+                        edit()
+                    }
+                }}>
+                    <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}/>
+                </button>
             {/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>
 
diff --git a/src/lib/ChatScreens/ChatScreen.svelte b/src/lib/ChatScreens/ChatScreen.svelte
index 5acc9194..2f4acba4 100644
--- a/src/lib/ChatScreens/ChatScreen.svelte
+++ b/src/lib/ChatScreens/ChatScreen.svelte
@@ -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}}/>
diff --git a/src/lib/Playground/PlaygroundImageGen.svelte b/src/lib/Playground/PlaygroundImageGen.svelte
index ca2244e7..59d27fc7 100644
--- a/src/lib/Playground/PlaygroundImageGen.svelte
+++ b/src/lib/Playground/PlaygroundImageGen.svelte
@@ -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";
-
-    let prompt = $state("");
-    let negPrompt = $state("");
-    let img = $state("");
-    let generating = $state(false)
-
-    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>
-
-<h2 class="text-4xl text-textcolor my-6 font-black relative">{language.imageGeneration}</h2>
-
-<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>
\ No newline at end of file
+<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>
+    
+    <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>
+        
+        <!-- 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>
+        
+        <!-- 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>
+            
+            <!-- Optional metadata -->
+            <span class="text-sm text-gray-500">
+                5 min read
+            </span>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/lib/Setting/Pages/DisplaySettings.svelte b/src/lib/Setting/Pages/DisplaySettings.svelte
index 49b3ad4c..c41cc439 100644
--- a/src/lib/Setting/Pages/DisplaySettings.svelte
+++ b/src/lib/Setting/Pages/DisplaySettings.svelte
@@ -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>