[ref] input to components

src/lib/Others/AlertComp.svelte

@@ -7,6 +7,7 @@
     import BarIcon from '../SideBars/BarIcon.svelte';
     import { User } from 'lucide-svelte';
     import { hubURL } from 'src/ts/characterCards';
+  import TextInput from '../UI/GUI/TextInput.svelte';
     let btn
     let input = ''
 
@@ -90,7 +91,7 @@
                     })
                 }}>OK</button>
             {:else if $alertStore.type === 'input'}
-                <input class="text-neutral-200 mt-2 p-2 bg-transparent input-text focus:bg-selected" value="" id="alert-input" autocomplete="off">
+                <TextInput value="" id="alert-input" autocomplete="off"/>
                 <button bind:this={btn} class="mt-4 border-borderc bg-transparent outline-none border-solid border-1 p-2 text-lg text-neutral-200 hover:bg-green-500 transition-colors focus:border-3" on:click={() => {
                     alertStore.set({
                         type: 'none',

src/lib/Others/ChatList.svelte

@@ -6,6 +6,7 @@
     import { DownloadIcon, EditIcon, FolderUpIcon, PlusIcon, TrashIcon, XIcon } from "lucide-svelte";
     import { exportChat, importChat } from "../../ts/characters";
     import { findCharacterbyId } from "../../ts/util";
+  import TextInput from "../UI/GUI/TextInput.svelte";
 
     let editMode = false
     export let close = () => {}
@@ -29,7 +30,7 @@
                 }
             }} class="flex items-center text-neutral-200 border-t-1 border-solid border-0 border-gray-600 p-2 cursor-pointer" class:bg-selected={i === $DataBase.characters[$selectedCharID].chatPage}>
                 {#if editMode}
-                    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" bind:value={$DataBase.characters[$selectedCharID].chats[i].name} placeholder="string">
+                    <TextInput bind:value={$DataBase.characters[$selectedCharID].chats[i].name} padding={false}/>
                 {:else}
                     <span>{chat.name}</span>
                 {/if}

src/lib/Others/GridCatalog.svelte

@@ -4,6 +4,7 @@
     import BarIcon from "../SideBars/BarIcon.svelte";
     import { User, Users } from "lucide-svelte";
     import { selectedCharID } from "../../ts/stores";
+  import TextInput from "../UI/GUI/TextInput.svelte";
     export let endGrid = () => {}
     let search = ''
 
@@ -38,7 +39,7 @@
 <div class="h-full w-full flex justify-center">
     <div class="h-full p-2 bg-darkbg max-w-full w-2xl flex items-center flex-col ">
         <h1 class="text-neutral-200 text-2xl font-bold mt-2">Catalog</h1>
-        <input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text focus:bg-selected w-4/5 text-xl" placeholder="Search" bind:value={search}>
+        <TextInput placeholder="Search" bind:value={search} size="lg" autocomplete="off" marginBottom={true}/>
         <div class="w-full flex justify-center">
             <div class="flex flex-wrap gap-2 mx-auto container">
                 {#each formatChars(search) as char}

src/lib/Others/WelcomeRisu.svelte

@@ -5,6 +5,7 @@
     import { addDefaultCharacters } from "src/ts/characters";
     import { DataBase } from "src/ts/storage/database";
   import { sleep } from "src/ts/util";
+  import TextInput from "../UI/GUI/TextInput.svelte";
 
     let step = 0
     let provider = 0
@@ -58,8 +59,8 @@
             {#if provider === 1}
                 <h2>{language.setup.openaikey}</h2>
                 <div class="w-full ml-2">
-                    <span>API key</span>
+                    <span class="mb-2">API key</span>
-                    <input class="text-neutral-200 mt-2 p-2 bg-transparent input-text focus:bg-selected m-0" bind:value={$DataBase.openAIKey}>
+                    <TextInput bind:value={$DataBase.openAIKey} placeholder="API Key" autocomplete="off"/>
                 </div>
                 <span class="text-gray-400">{language.setup.apiKeyhelp} <a href="https://platform.openai.com/account/api-keys" target="_blank">https://platform.openai.com/account/api-keys</a></span>
                 <div class="flex flex-col items-start ml-2 mt-6">
@@ -71,12 +72,12 @@
             {:else if provider === 2}
                 <h2>{language.setup.openaiProxy}</h2>
                 <div class="w-full ml-2">
-                    <span>OpenAI Reverse Proxy URL</span>
+                    <span class="mb-2">OpenAI Reverse Proxy URL</span>
-                    <input class="text-neutral-200 mt-2 p-2 bg-transparent input-text focus:bg-selected m-0" bind:value={$DataBase.forceReplaceUrl} placeholder="https://...">
+                    <TextInput bind:value={$DataBase.forceReplaceUrl} placeholder="https://..." autocomplete="off"/>
                 </div>
                 <div class="w-full ml-2 mt-4">
-                    <span>API key (Used for passwords)</span>
+                    <span class="mb-2">API key (Used for passwords)</span>
-                    <input class="text-neutral-200 mt-2 p-2 bg-transparent input-text focus:bg-selected m-0" bind:value={$DataBase.openAIKey} placeholder="Optional">
+                    <TextInput bind:value={$DataBase.proxyKey} placeholder="Optional" autocomplete="off"/>
                 </div>
                 <div class="flex flex-col items-start ml-2 mt-6">
                     <button class="hover:text-green-500 transition-colors" on:click={() => {
@@ -144,9 +145,9 @@
                 </button>
             </div>
         {:else if step === 5}
-            <h2>{language.setup.inputName}</h2>
+            <h2 class="mb-2">{language.setup.inputName}</h2>
             <div class="w-full ml-2">
-                <input class="text-neutral-200 mt-2 p-2 bg-transparent input-text focus:bg-selected m-0" bind:value={$DataBase.username}>
+                <TextInput bind:value={$DataBase.username} />
             </div>
             <div class="flex flex-col items-start ml-2 mt-6">
                 <button class="hover:text-green-500 transition-colors" on:click={async () => {

src/lib/Setting/Pages/AdvancedSettings.svelte

@@ -4,25 +4,27 @@
     import { DataBase } from "src/ts/storage/database";
     import { alertMd } from "src/ts/alert";
     import { getRequestLog, isTauri } from "src/ts/storage/globalApi";
+    import NumberInput from "src/lib/UI/GUI/NumberInput.svelte";
+  import TextInput from "src/lib/UI/GUI/TextInput.svelte";
 </script>
 <h2 class="text-2xl font-bold mt-2">{language.advancedSettings}</h2>
 <span class="text-draculared text-xs mb-2">{language.advancedSettingsWarn}</span>
 <span class="text-neutral-200 mt-4 mb-2">{language.loreBookDepth}</span>
-<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="20" bind:value={$DataBase.loreBookDepth}>
+<NumberInput marginBottom={true} size={"sm"} min={0} max={20} bind:value={$DataBase.loreBookDepth}/>
 <span class="text-neutral-200">{language.loreBookToken}</span>
-<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="4096" bind:value={$DataBase.loreBookToken}>
+<NumberInput marginBottom={true} size={"sm"} min={0} max={4096} bind:value={$DataBase.loreBookToken}/>
 
 <span class="text-neutral-200">{language.additionalPrompt}</span>
-<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm"bind:value={$DataBase.additionalPrompt}>
+<TextInput marginBottom={true} size={"sm"} bind:value={$DataBase.additionalPrompt}/>
 
 <span class="text-neutral-200">{language.descriptionPrefix}</span>
-<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm"bind:value={$DataBase.descriptionPrefix}>
+<TextInput marginBottom={true} size={"sm"} bind:value={$DataBase.descriptionPrefix}/>
 
 <span class="text-neutral-200">{language.emotionPrompt}</span>
-<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm"bind:value={$DataBase.emotionPrompt2} placeholder="Leave it blank to use default">
+<TextInput marginBottom={true} size={"sm"} bind:value={$DataBase.emotionPrompt2} placeholder="Leave it blank to use default"/>
 
 <span class="text-neutral-200">{language.requestretrys}</span>
-<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="20" bind:value={$DataBase.requestRetrys}>
+<NumberInput marginBottom={true} size={"sm"} min={0} max={20} bind:value={$DataBase.requestRetrys}/>
 
 <span class="text-neutral-200">Request Lib</span>
 <select class="bg-transparent input-text text-gray-200 appearance-none text-sm" bind:value={$DataBase.requester}>
@@ -45,15 +47,6 @@
 <div class="flex items-center mt-4">
     <Check bind:check={$DataBase.usePlainFetch} name="Force Plain Fetch"/>
 </div>
-<div class="flex items-center mt-4">
-    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" placeholder="experimental flags" on:input={(e) => {
-        const v = e.currentTarget.value
-        if(v.endsWith("_flag!")){
-            localStorage.setItem(v, "able")
-            e.currentTarget.value = ""
-        }
-    }}>
-</div>
 <button
     on:click={async () => {
         alertMd(getRequestLog())

src/lib/Setting/Pages/BotSettings.svelte

@@ -4,13 +4,16 @@
     import Help from "src/lib/Others/Help.svelte";
     import { DataBase } from "src/ts/storage/database";
     import { customProviderStore, getCurrentPluginMax } from "src/ts/plugins/plugins";
-    import { isTauri } from "src/ts/storage/globalApi";
+    import { getModelMaxContext, isTauri } from "src/ts/storage/globalApi";
     import { tokenize } from "src/ts/tokenizer";
     import ModelList from "src/lib/UI/ModelList.svelte";
     import DropList from "src/lib/SideBars/DropList.svelte";
     import { PlusIcon, TrashIcon } from "lucide-svelte";
     import { onDestroy } from "svelte";
   import { recommendedPresetExist, setRecommended } from "src/ts/process/templates/getRecomended";
+  import TextInput from "src/lib/UI/GUI/TextInput.svelte";
+  import NumberInput from "src/lib/UI/GUI/NumberInput.svelte";
+  import SliderInput from "src/lib/UI/GUI/SliderInput.svelte";
     let tokens = {
         mainPrompt: 0,
         jailbreak: 0,
@@ -99,22 +102,22 @@
 {/if}
 {#if $DataBase.aiModel === 'palm2' || $DataBase.subModel === 'palm2'}
     <span class="text-neutral-200">Palm2 {language.apiKey}</span>
-    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" placeholder="..." bind:value={$DataBase.palmAPI}>
+    <TextInput marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.palmAPI}/>
 {/if}
 {#if $DataBase.aiModel.startsWith('novellist') || $DataBase.subModel.startsWith('novellist')}
     <span class="text-neutral-200">NovelList {language.apiKey}</span>
-    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" placeholder="..." bind:value={$DataBase.novellistAPI}>
+    <TextInput marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.novellistAPI}/>
 {/if}
 
 {#if $DataBase.aiModel.startsWith('claude') || $DataBase.subModel.startsWith('claude')}
     <span class="text-neutral-200">Claude {language.apiKey}</span>
-    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" placeholder="..." bind:value={$DataBase.claudeAPIKey}>
+    <TextInput marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.claudeAPIKey}/>
 {/if}
 {#if $DataBase.aiModel === 'reverse_proxy' || $DataBase.subModel === 'reverse_proxy'}
     <span class="text-neutral-200 mt-2">{language.forceReplaceUrl} URL <Help key="forceUrl"/></span>
-    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm"bind:value={$DataBase.forceReplaceUrl} placeholder="https//...">
+    <TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.forceReplaceUrl} placeholder="https//..." />
     <span class="text-neutral-200 mt-4"> {language.proxyAPIKey}</span>
-    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" placeholder="leave it blank if it hasn't password" bind:value={$DataBase.proxyKey}>
+    <TextInput marginBottom={false} size={"sm"} placeholder="leave it blank if it hasn't password" bind:value={$DataBase.proxyKey} />
     <span class="text-neutral-200 mt-4"> {language.proxyRequestModel}</span>
     <select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none text-sm" bind:value={$DataBase.proxyRequestModel}>
         <option value="" class="bg-darkbg appearance-none">None</option>
@@ -129,7 +132,8 @@
 {/if}
 {#if $DataBase.aiModel === 'openrouter' || $DataBase.subModel === 'openrouter'}
     <span class="text-neutral-200 mt-4">Openrouter Key</span>
-    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" placeholder="leave it blank if it hasn't password" bind:value={$DataBase.openrouterKey}>
+    <TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.openrouterKey} />
+
     <span class="text-neutral-200 mt-4">Openrouter Model</span>
     <select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none text-sm" bind:value={$DataBase.openrouterRequestModel}>
         <option value="openai/gpt-3.5-turbo" class="bg-darkbg appearance-none">GPT 3.5</option>
@@ -146,7 +150,8 @@
 {/if}
 {#if $DataBase.aiModel.startsWith('gpt') || $DataBase.subModel.startsWith('gpt')}
     <span class="text-neutral-200">OpenAI {language.apiKey} <Help key="oaiapikey"/></span>
-    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" placeholder="sk-XXXXXXXXXXXXXXXXXXXX" bind:value={$DataBase.openAIKey}>
+    <TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.openAIKey} placeholder="sk-XXXXXXXXXXXXXXXXXXXX"/>
+
 {/if}
 {#if $DataBase.aiModel.startsWith('gpt') || $DataBase.aiModel === 'reverse_proxy' || $DataBase.aiModel === 'openrouter'}
     <div class="flex items-center mt-2 mb-4">
@@ -165,26 +170,26 @@
 {/if}
 {#if $DataBase.aiModel === "novelai" || $DataBase.subModel === "novelai"}
     <span class="text-neutral-200">NovelAI Bearer Token</span>
-    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm mb-2" bind:value={$DataBase.novelai.token}>
+    <TextInput marginBottom={true} bind:value={$DataBase.novelai.token}/>
 
 {/if}
 
 {#if $DataBase.aiModel === "kobold" || $DataBase.subModel === "kobold"}
     <span class="text-neutral-200">Kobold URL</span>
-    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm mb-2" bind:value={$DataBase.koboldURL}>
+    <TextInput marginBottom={true} bind:value={$DataBase.koboldURL} />
+
 {/if}
 
 
 {#if $DataBase.aiModel.startsWith("horde") || $DataBase.subModel.startsWith("horde") }
     <span class="text-neutral-200">Horde {language.apiKey}</span>
-    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm mb-2" bind:value={$DataBase.hordeConfig.apiKey}>
+    <TextInput marginBottom={true} bind:value={$DataBase.hordeConfig.apiKey} />
 
 {/if}
 {#if $DataBase.aiModel === 'textgen_webui' || $DataBase.subModel === 'textgen_webui'}
-    <span class="text-neutral-200">TextGen {language.providerURL} <Help key="oogaboogaURL"/></span>
+    <span class="text-neutral-200 mt-2">TextGen {language.providerURL}</span>
-    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected" placeholder="https://..." bind:value={$DataBase.textgenWebUIURL}>
+    <TextInput marginBottom={true} bind:value={$DataBase.textgenWebUIURL} placeholder="https://..."/>
-    <span class="text-draculared text-xs mb-2">You must use WebUI without agpl license or use unmodified version with agpl license to observe the contents of the agpl license.</span>
+    <span class="text-draculared text-xs mb-2">You must use textgen webui with --api, and use api server's port (default is 5000)</span>
-    <span class="text-draculared text-xs mb-2">You must use textgen webui with --no-stream and without --cai-chat or --chat</span>
     {#if !isTauri}
         <span class="text-draculared text-xs mb-2">You are using web version. you must use ngrok or other tunnels to use your local webui.</span>
     {/if}
@@ -201,53 +206,46 @@
     <span class="text-gray-400 mb-6 text-sm">{tokens.globalNote} {language.tokens}</span>    
 
     <span class="text-neutral-200">{language.maxContextSize}</span>
-{#if $DataBase.aiModel === 'gpt35'}
+    <NumberInput min={0} max={getModelMaxContext($DataBase.aiModel)} marginBottom={true} bind:value={$DataBase.maxContext}/>
-    <input class="text-neutral-200 mb-4 text-sm p-2 bg-transparent input-text focus:bg-selected" type="number" min={0} max="4000" bind:value={$DataBase.maxContext}>
+
-{:else if $DataBase.aiModel === 'gpt35_16k' || $DataBase.aiModel === 'gpt35_16k_0613'}
+
-    <input class="text-neutral-200 mb-4 text-sm p-2 bg-transparent input-text focus:bg-selected" type="number" min={0} max="16000" bind:value={$DataBase.maxContext}>
+    <span class="text-neutral-200">{language.maxResponseSize}</span>
-{:else if $DataBase.aiModel === 'gpt4'}
+    <NumberInput min={0} max={2048} marginBottom={true} bind:value={$DataBase.maxResponse}/>
-    <input class="text-neutral-200 mb-4 text-sm p-2 bg-transparent input-text focus:bg-selected" type="number" min={0} max="8000" bind:value={$DataBase.maxContext}>
-{:else if $DataBase.aiModel === 'custom'}
-    <input class="text-neutral-200 mb-4 text-sm p-2 bg-transparent input-text focus:bg-selected" type="number" min={0} max={getCurrentPluginMax($DataBase.currentPluginProvider)} bind:value={$DataBase.maxContext}>
-{:else}
-    <input class="text-neutral-200 mb-4 text-sm p-2 bg-transparent input-text focus:bg-selected" type="number" min={0} bind:value={$DataBase.maxContext}>
-{/if}
 
-<span class="text-neutral-200">{language.maxResponseSize}</span>
-<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="2048" bind:value={$DataBase.maxResponse}>
 <span class="text-neutral-200">{language.temperature} <Help key="tempature"/></span>
-<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="0" max="200" bind:value={$DataBase.temperature}>
+<SliderInput min={0} max={200} bind:value={$DataBase.temperature}/>
 <span class="text-gray-400 mb-6 text-sm">{($DataBase.temperature / 100).toFixed(2)}</span>
 {#if $DataBase.aiModel === 'textgen_webui'}
     <span class="text-neutral-200">Top K</span>
-    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="0" max="2" step="0.01" bind:value={$DataBase.ooba.top_k}>
+    <SliderInput min={0} max={2} step={0.01} bind:value={$DataBase.ooba.top_k} />
+
     <span class="text-gray-400 mb-6 text-sm">{($DataBase.ooba.top_k).toFixed(2)}</span>
     <span class="text-neutral-200">Top P</span>
-    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="0" max="2" step="0.01" bind:value={$DataBase.ooba.top_p}>
+    <SliderInput min={0} max={2} step={0.01} bind:value={$DataBase.ooba.top_p}/>
     <span class="text-gray-400 mb-6 text-sm">{($DataBase.ooba.top_p).toFixed(2)}</span>
     <span class="text-neutral-200">Typical P</span>
-    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="0" max="1" step="0.01" bind:value={$DataBase.ooba.typical_p}>
+    <SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.ooba.typical_p}/>
     <span class="text-gray-400 mb-6 text-sm">{($DataBase.ooba.typical_p).toFixed(2)}</span>
     <span class="text-neutral-200">Top A</span>
-    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="0" max="1" step="0.01" bind:value={$DataBase.ooba.top_a}>
+    <SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.ooba.top_a}/>
     <span class="text-gray-400 mb-6 text-sm">{($DataBase.ooba.top_a).toFixed(2)}</span>
     <span class="text-neutral-200">Tail Free Sampling</span>
-    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="0" max="1" step="0.01" bind:value={$DataBase.ooba.tfs}>
+    <SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.ooba.tfs}/>
     <span class="text-gray-400 mb-6 text-sm">{($DataBase.ooba.tfs).toFixed(2)}</span>
     <span class="text-neutral-200">Epsilon Cutoff</span>
-    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="0" max="9" step="0.01" bind:value={$DataBase.ooba.epsilon_cutoff}>
+    <SliderInput min={0} max={9} step={0.01} bind:value={$DataBase.ooba.epsilon_cutoff}/>
     <span class="text-gray-400 mb-6 text-sm">{($DataBase.ooba.epsilon_cutoff).toFixed(2)}</span>
     <span class="text-neutral-200">Eta Cutoff</span>
-    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="0" max="20" step="0.01" bind:value={$DataBase.ooba.eta_cutoff}>
+    <SliderInput min={0} max={20} step={0.01} bind:value={$DataBase.ooba.eta_cutoff}/>
     <span class="text-gray-400 mb-6 text-sm">{($DataBase.ooba.eta_cutoff).toFixed(2)}</span>
     <span class="text-neutral-200">Number of Beams</span>
-    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="1" max="20" step="1" bind:value={$DataBase.ooba.num_beams}>
+    <SliderInput min={1} max={20} step={1} bind:value={$DataBase.ooba.num_beams}/>
     <span class="text-gray-400 mb-6 text-sm">{($DataBase.ooba.num_beams).toFixed(2)}</span>
     <span class="text-neutral-200">Length Penalty</span>
-    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min={-5} max="5" step="0.1" bind:value={$DataBase.ooba.length_penalty}>
+    <SliderInput min={-5} max={5} step={0.1} bind:value={$DataBase.ooba.length_penalty}/>
     <span class="text-gray-400 mb-6 text-sm">{($DataBase.ooba.length_penalty).toFixed(2)}</span>
     <span class="text-neutral-200">Penalty Alpha</span>
-    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min={0} max="5" step="0.05" bind:value={$DataBase.ooba.penalty_alpha}>
+    <SliderInput min={0} max={5} step={0.05} bind:value={$DataBase.ooba.penalty_alpha}/>
     <span class="text-gray-400 mb-6 text-sm">{($DataBase.ooba.penalty_alpha).toFixed(2)}</span>
     <div class="flex items-center mt-4">
         <Check bind:check={$DataBase.ooba.do_sample} name={'Do Sample'}/>
@@ -267,41 +265,41 @@
     {#if $DataBase.ooba.formating.custom}
         <div class="flex flex-col p-3 bg-darkbg mt-4">
             <span class="text-neutral-200">User Prefix</span>
-            <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected" bind:value={$DataBase.ooba.formating.userPrefix}>
+            <TextInput marginBottom bind:value={$DataBase.ooba.formating.userPrefix} />
             <span class="text-neutral-200">Assistant Prefix</span>
-            <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected" bind:value={$DataBase.ooba.formating.assistantPrefix}>
+            <TextInput marginBottom bind:value={$DataBase.ooba.formating.assistantPrefix} />
             <span class="text-neutral-200">Seperator</span>
-            <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected" bind:value={$DataBase.ooba.formating.seperator}>
+            <TextInput marginBottom bind:value={$DataBase.ooba.formating.seperator} />
         </div>
     {/if}
 {:else if $DataBase.aiModel.startsWith('novellist')}
     <span class="text-neutral-200">Top P</span>
-    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="0" max="2" step="0.01" bind:value={$DataBase.ainconfig.top_p}>
+    <SliderInput min={0} max={2} step={0.01} bind:value={$DataBase.ainconfig.top_p}/>
     <span class="text-gray-400 mb-6 text-sm">{($DataBase.ainconfig.top_p).toFixed(2)}</span>
     <span class="text-neutral-200">Reputation Penalty</span>
-    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="0" max="2" step="0.01" bind:value={$DataBase.ainconfig.rep_pen}>
+    <SliderInput min={0} max={2} step={0.01} bind:value={$DataBase.ainconfig.rep_pen}/>
     <span class="text-gray-400 mb-6 text-sm">{($DataBase.ainconfig.rep_pen).toFixed(2)}</span>
     <span class="text-neutral-200">Reputation Penalty Range</span>
-    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="0" max="2048" step="1" bind:value={$DataBase.ainconfig.rep_pen_range}>
+    <SliderInput min={0} max={2048} step={1} bind:value={$DataBase.ainconfig.rep_pen_range}/>
     <span class="text-gray-400 mb-6 text-sm">{($DataBase.ainconfig.rep_pen_range).toFixed(2)}</span>
     <span class="text-neutral-200">Reputation Penalty Slope</span>
-    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="0" max="10" step="0.1" bind:value={$DataBase.ainconfig.rep_pen_slope}>
+    <SliderInput min={0} max={10} step={0.1} bind:value={$DataBase.ainconfig.rep_pen_slope}/>
     <span class="text-gray-400 mb-6 text-sm">{($DataBase.ainconfig.rep_pen_slope).toFixed(2)}</span>
     <span class="text-neutral-200">Top K</span>
-    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="1" max="500" step="1" bind:value={$DataBase.ainconfig.top_k}>
+    <SliderInput min={1} max={500} step={1} bind:value={$DataBase.ainconfig.top_k}/>
     <span class="text-gray-400 mb-6 text-sm">{($DataBase.ainconfig.top_k).toFixed(2)}</span>
     <span class="text-neutral-200">Top A</span>
-    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="0" max="1" step="0.01" bind:value={$DataBase.ainconfig.top_a}>
+    <SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.ainconfig.top_a}/>
     <span class="text-gray-400 mb-6 text-sm">{($DataBase.ainconfig.top_a).toFixed(2)}</span>
     <span class="text-neutral-200">Typical P</span>
-    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="0" max="1" step="0.01" bind:value={$DataBase.ainconfig.typical_p}>
+    <SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.ainconfig.typical_p}/>
     <span class="text-gray-400 mb-6 text-sm">{($DataBase.ainconfig.typical_p).toFixed(2)}</span>
 {:else}
     <span class="text-neutral-200">{language.frequencyPenalty} <Help key="frequencyPenalty"/></span>
-    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="0" max="100" bind:value={$DataBase.frequencyPenalty}>
+    <SliderInput min={0} max={100} bind:value={$DataBase.frequencyPenalty} />
     <span class="text-gray-400 mb-6 text-sm">{($DataBase.frequencyPenalty / 100).toFixed(2)}</span>
     <span class="text-neutral-200">{language.presensePenalty} <Help key="presensePenalty"/></span>
-    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="0" max="100" bind:value={$DataBase.PresensePenalty}>
+    <SliderInput min={0} max={100} bind:value={$DataBase.PresensePenalty} />
     <span class="text-gray-400 mb-6 text-sm">{($DataBase.PresensePenalty / 100).toFixed(2)}</span>
 
     <span class="text-neutral-200 mt-2">{language.autoSuggest} <Help key="autoSuggest"/></span>
@@ -320,11 +318,13 @@
         <tr>
             <th class="font-medium w-1/2">Bias</th>
             <th class="font-medium w-1/3">{language.value}</th>
-            <th class="font-medium cursor-pointer hover:text-green-500" on:click={() => {
+            <th>
+                <button class="font-medium cursor-pointer hover:text-green-500 w-full flex justify-center items-center" on:click={() => {
                     let bia = $DataBase.bias
                     bia.push(['', 0])
                     $DataBase.bias = bia
-            }}><PlusIcon /></th>
+                }}><PlusIcon /></button>
+            </th>
         </tr>
         {#if $DataBase.bias.length === 0}
             <tr>
@@ -334,16 +334,18 @@
         {#each $DataBase.bias as bias, i}
             <tr>
                 <td class="font-medium truncate w-1/2">
-                    <input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text focus:bg-selected" bind:value={$DataBase.bias[i][0]} placeholder="string">
+                    <TextInput marginBottom bind:value={$DataBase.bias[i][0]} fullwidth fullh/>
                 </td>
                 <td class="font-medium truncate w-1/3">
-                    <input class="text-neutral-200 mt-2 mb-4 w-full p-2 bg-transparent input-text focus:bg-selected" bind:value={$DataBase.bias[i][1]} type="number" max="100" min="-100">
+                    <NumberInput marginBottom bind:value={$DataBase.bias[i][1]} max={100} min={-100} fullwidth fullh/>
+                </td>
+                <td>
+                    <button class="font-medium flex justify-center items-center h-full cursor-pointer hover:text-green-500 w-full" on:click={() => {
+                        let bia = $DataBase.bias
+                        bia.splice(i, 1)
+                        $DataBase.bias = bia
+                    }}><TrashIcon /></button>
                 </td>
-                <button class="font-medium flex justify-center items-center h-full cursor-pointer hover:text-green-500" on:click={() => {
-                    let bia = $DataBase.bias
-                    bia.splice(i, 1)
-                    $DataBase.bias = bia
-                }}><TrashIcon /></button>
             </tr>
         {/each}
     </table>

src/lib/Setting/Pages/DisplaySettings.svelte

@@ -4,6 +4,7 @@
     import { changeFullscreen, selectSingleFile, sleep } from "src/ts/util";
     import Check from "src/lib/Others/Check.svelte";
     import Help from "src/lib/Others/Help.svelte";
+  import SliderInput from "src/lib/UI/GUI/SliderInput.svelte";
 </script>
 
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.display}</h2>
@@ -19,12 +20,12 @@
 
 {#if $DataBase.theme === "waifu"}
     <span class="text-neutral-200 mt-4">{language.waifuWidth}</span>
-    <input class="text-neutral-200 text-sm p-2 bg-transparent input-text focus:bg-selected" type="range" min="50" max="200" bind:value={$DataBase.waifuWidth}>
+    <SliderInput min={50} max={200} bind:value={$DataBase.waifuWidth} />
-    <span class="text-gray-400text-sm">{($DataBase.waifuWidth)}%</span>
+    <span class="text-gray-400 text-sm">{($DataBase.waifuWidth)}%</span>
 
     <span class="text-neutral-200 mt-4">{language.waifuWidth2}</span>
-    <input class="text-neutral-200 text-sm p-2 bg-transparent input-text focus:bg-selected" type="range" min="20" max="150" bind:value={$DataBase.waifuWidth2}>
+    <SliderInput min={20} max={150} bind:value={$DataBase.waifuWidth2} />
-    <span class="text-gray-400text-sm">{($DataBase.waifuWidth2)}%</span>
+    <span class="text-gray-400 text-sm">{($DataBase.waifuWidth2)}%</span>
 {/if}
 
 <span class="text-neutral-200 mt-4">{language.textColor}</span>
@@ -54,11 +55,11 @@
 {/if}
 
 <span class="text-neutral-200">{language.UISize}</span>
-<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="50" max="200" bind:value={$DataBase.zoomsize}>
+<SliderInput  min={50} max={200} bind:value={$DataBase.zoomsize} />
 <span class="text-gray-400 mb-6 text-sm">{($DataBase.zoomsize)}%</span>
 
 <span class="text-neutral-200">{language.iconSize}</span>
-<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="50" max="200" bind:value={$DataBase.iconsize}>
+<SliderInput min={50} max={200} bind:value={$DataBase.iconsize} />
 <span class="text-gray-400 mb-6 text-sm">{($DataBase.iconsize)}%</span>
 
 <div class="flex items-center mt-2">

src/lib/Setting/Pages/OtherBotSettings.svelte

@@ -4,6 +4,8 @@
     import Help from "src/lib/Others/Help.svelte";
     import { DataBase } from "src/ts/storage/database";
     import { isTauri } from "src/ts/storage/globalApi";
+  import NumberInput from "src/lib/UI/GUI/NumberInput.svelte";
+  import TextInput from "src/lib/UI/GUI/TextInput.svelte";
 
 </script>
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.otherBots}</h2>
@@ -25,40 +27,40 @@
         <span class="text-draculared text-xs mb-2">You are using web version. you must use ngrok or other tunnels to use your local webui.</span>
     {/if}
     <span class="text-neutral-200 mt-2">WebUI {language.providerURL}</span>
-    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" placeholder="https://..." bind:value={$DataBase.webUiUrl}>
+    <TextInput size="sm" marginBottom placeholder="https://..." bind:value={$DataBase.webUiUrl}/>
     <span class="text-neutral-200">Steps</span>
-    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="100" bind:value={$DataBase.sdSteps}>
+    <NumberInput size="sm" marginBottom min={0} max={100} bind:value={$DataBase.sdSteps}/>
     
     <span class="text-neutral-200">CFG Scale</span>
-    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="20" bind:value={$DataBase.sdCFG}>
+    <NumberInput size="sm" marginBottom min={0} max={20} bind:value={$DataBase.sdCFG}/>
 
     <span class="text-neutral-200">Width</span>
-    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="2048" bind:value={$DataBase.sdConfig.width}>
+    <NumberInput size="sm" marginBottom min={0} max={2048} bind:value={$DataBase.sdConfig.width}/>
     <span class="text-neutral-200">Height</span>
-    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="2048" bind:value={$DataBase.sdConfig.height}>
+    <NumberInput size="sm" marginBottom min={0} max={2048} bind:value={$DataBase.sdConfig.height}/>
     <span class="text-neutral-200">Sampler</span>
-    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={$DataBase.sdConfig.sampler_name}>
+    <TextInput size="sm" marginBottom bind:value={$DataBase.sdConfig.sampler_name}/>
     
     <div class="flex items-center mt-2">
         <Check bind:check={$DataBase.sdConfig.enable_hr} name='Enable Hires'/>
     </div>
     {#if $DataBase.sdConfig.enable_hr === true}
         <span class="text-neutral-200">denoising_strength</span>
-        <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="10" bind:value={$DataBase.sdConfig.denoising_strength}>
+        <NumberInput size="sm" marginBottom  min={0} max={10} bind:value={$DataBase.sdConfig.denoising_strength}/>
         <span class="text-neutral-200">hr_scale</span>
-        <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="10" bind:value={$DataBase.sdConfig.hr_scale}>
+        <NumberInput size="sm" marginBottom  min={0} max={10} bind:value={$DataBase.sdConfig.hr_scale}/>
         <span class="text-neutral-200">Upscaler</span>
-        <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={$DataBase.sdConfig.hr_upscaler}>
+        <TextInput size="sm" marginBottom bind:value={$DataBase.sdConfig.hr_upscaler}/>
     {/if}
 {/if}
 
 
 <span class="text-neutral-200 mt-4 text-lg font-bold">TTS</span>
 <span class="text-neutral-200 mt-2">ElevenLabs API key</span>
-<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={$DataBase.elevenLabKey}>
+<TextInput size="sm" marginBottom bind:value={$DataBase.elevenLabKey}/>
 
 <span class="text-neutral-200 mt-2">VOICEVOX URL</span>
-<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={$DataBase.voicevoxUrl}>
+<TextInput size="sm" marginBottom bind:value={$DataBase.voicevoxUrl}/>
 
 <span class="text-neutral-200 mt-4 text-lg font-bold">{language.SuperMemory} <Help key="superMemory" /></span>
 <span class="text-neutral-200 mt-4">{language.SuperMemory} {language.model}</span>
@@ -70,11 +72,11 @@
 </select>
 {#if $DataBase.supaMemoryType === 'davinci' || $DataBase.supaMemoryType === 'curie'}
     <span class="text-neutral-200">{language.SuperMemory} OpenAI Key</span>
-    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={$DataBase.supaMemoryKey}>
+    <TextInput size="sm" marginBottom bind:value={$DataBase.supaMemoryKey}/>
 {/if}
 {#if $DataBase.supaMemoryType !== 'none'}
     <span class="text-neutral-200">{language.SuperMemory} Prompt</span>
-    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm"bind:value={$DataBase.supaMemoryPrompt} placeholder="recommended to leave it blank to use default">
+    <TextInput size="sm" marginBottom bind:value={$DataBase.supaMemoryPrompt} placeholder="recommended to leave it blank to use default"/>
 {/if}
 {#if ($DataBase.supaMemoryType === 'davinci' || $DataBase.supaMemoryType === 'curie') && $DataBase.useExperimental}
     <div class="flex">

src/lib/Setting/Pages/PersonaSettings.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { language } from "src/lang";
   import BaseRoundedButton from "src/lib/UI/BaseRoundedButton.svelte";
+  import TextInput from "src/lib/UI/GUI/TextInput.svelte";
   import { alertConfirm, alertError } from "src/ts/alert";
     import { changeUserPersona, getCharImage, saveUserPersona, selectUserImg } from "src/ts/characters";
     import { DataBase, setDatabase } from "src/ts/storage/database";
@@ -71,7 +72,7 @@
     </div>
     <div class="flex flex-grow flex-col p-2 ml-4">
         <span class="text-sm text-gray-500">{language.name}</span>
-        <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-lg" placeholder="User" bind:value={$DataBase.username}>
+        <TextInput marginBottom size="lg" placeholder="User" bind:value={$DataBase.username} />
         <span class="text-sm text-gray-500">{language.description}</span>
         <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-32 min-h-20 focus:bg-selected text-xs w-full" autocomplete="off" bind:value={$DataBase.personaPrompt} placeholder={`Put the description of this persona here.\nExample: [<user> is a 20 year old girl.]`}></textarea>
         <div>

src/lib/Setting/Pages/PluginSettings.svelte

@@ -5,6 +5,8 @@
   import { DataBase } from "src/ts/storage/database";
   import { importPlugin } from "src/ts/plugins/plugins";
   import Check from "src/lib/Others/Check.svelte";
+  import TextInput from "src/lib/UI/GUI/TextInput.svelte";
+  import NumberInput from "src/lib/UI/GUI/NumberInput.svelte";
 
 </script>
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.plugin}</h2>
@@ -48,9 +50,9 @@
                             {/each}
                         </select>
                     {:else if plugin.arguments[arg] === 'string'}
-                        <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" bind:value={$DataBase.plugins[i].realArg[arg]}>
+                        <TextInput  bind:value={$DataBase.plugins[i].realArg[arg]} />
                     {:else if plugin.arguments[arg] === 'int'}
-                        <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="number" bind:value={$DataBase.plugins[i].realArg[arg]}>
+                        <NumberInput bind:value={$DataBase.plugins[i].realArg[arg]} />
                     {/if}
                 {/each}
             </div>

src/lib/Setting/botpreset.svelte

@@ -4,6 +4,7 @@
     import { DataBase, changeToPreset, copyPreset, downloadPreset, importPreset, presetTemplate } from "../../ts/storage/database";
     import { CopyIcon, DownloadIcon, EditIcon, FolderUpIcon, PlusIcon, TrashIcon, XIcon } from "lucide-svelte";
   import { cloneDeep } from "lodash";
+  import TextInput from "../UI/GUI/TextInput.svelte";
 
     let editMode = false
     export let close = () => {}
@@ -28,7 +29,7 @@
                 }
             }} class="flex items-center text-neutral-200 border-t-1 border-solid border-0 border-gray-600 p-2 cursor-pointer" class:bg-selected={i === $DataBase.botPresetsId}>
                 {#if editMode}
-                    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" bind:value={$DataBase.botPresets[i].name} placeholder="string">
+                    <TextInput bind:value={$DataBase.botPresets[i].name} placeholder="string" padding={false}/>
                 {:else}
                     {#if i < 9}
                     <span class="w-2 text-center mr-2 text-gray-400">{i + 1}</span>

src/lib/Setting/lorepreset.svelte

@@ -3,6 +3,7 @@
     import { language } from "../../lang";
     import { DataBase } from "../../ts/storage/database";
     import { EditIcon, PlusIcon, TrashIcon, XIcon } from "lucide-svelte";
+  import TextInput from "../UI/GUI/TextInput.svelte";
     let editMode = false
     export let close = () => {}
 </script>
@@ -24,7 +25,7 @@
                 }
             }} class="flex items-center text-neutral-200 border-t-1 border-solid border-0 border-gray-600 p-2 cursor-pointer" class:bg-selected={ind === $DataBase.loreBookPage}>
                 {#if editMode}
-                    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" bind:value={$DataBase.loreBook[ind].name} placeholder="string">
+                    <TextInput bind:value={$DataBase.loreBook[ind].name} placeholder="string" padding={false}/>
                 {:else}
                     <span>{lore.name}</span>
                 {/if}

src/lib/SideBars/CharConfig.svelte

@@ -3,7 +3,7 @@
     import { tokenize } from "../../ts/tokenizer";
     import { DataBase, saveImage as saveAsset, type Database, type character, type groupChat } from "../../ts/storage/database";
     import { selectedCharID } from "../../ts/stores";
-    import { PlusIcon, SmileIcon, TrashIcon, UserIcon, ActivityIcon, BookIcon, LoaderIcon, User, DnaIcon, CurlyBracesIcon, Volume2Icon, XIcon } from 'lucide-svelte'
+    import { PlusIcon, SmileIcon, TrashIcon, UserIcon, ActivityIcon, BookIcon, LoaderIcon, User, DnaIcon, CurlyBraces, Volume2Icon, XIcon } from 'lucide-svelte'
     import Check from "../Others/Check.svelte";
     import { addCharEmotion, addingEmotion, getCharImage, rmCharEmotion, selectCharImg, makeGroupImage } from "../../ts/characters";
     import LoreBook from "./LoreBookSetting.svelte";
@@ -19,6 +19,8 @@
     import { checkCharOrder, getFileSrc } from "src/ts/storage/globalApi";
     import { addGroupChar, rmCharFromGroup } from "src/ts/process/group";
   import HubUpload from "../UI/HubUpload.svelte";
+  import TextInput from "../UI/GUI/TextInput.svelte";
+  import NumberInput from "../UI/GUI/NumberInput.svelte";
 
     let subMenu = 0
     let openHubUpload = false
@@ -142,7 +144,7 @@
             <Volume2Icon />
         </button>
         <button class={subMenu === 4 ? 'text-gray-200' : 'text-gray-500'} on:click={() => {subMenu = 4}}>
-            <CurlyBracesIcon />
+            <CurlyBraces />
         </button>
     {/if}
     <button class={subMenu === 2 ? 'text-gray-200' : 'text-gray-500'} on:click={() => {subMenu = 2}}>
@@ -153,7 +155,7 @@
 
 {#if subMenu === 0}
     {#if currentChar.type !== 'group'}
-        <input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text text-xl focus:bg-selected" placeholder="Character Name" bind:value={currentChar.data.name}>
+        <TextInput size="xl" marginBottom placeholder="Character Name" bind:value={currentChar.data.name} />
         <span class="text-neutral-200">{language.description} <Help key="charDesc"/></span>
         <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.desc}></textarea>
         <span class="text-gray-400 mb-6 text-sm">{tokens.desc} {language.tokens}</span>
@@ -162,7 +164,7 @@
         <span class="text-gray-400 mb-6 text-sm">{tokens.firstMsg} {language.tokens}</span>
 
     {:else}
-        <input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text text-xl focus:bg-selected" placeholder="Group Name" bind:value={currentChar.data.name}>
+        <TextInput size="xl" marginBottom placeholder="Group Name" bind:value={currentChar.data.name} />
         <span class="text-neutral-200">{language.character}</span>
         <div class="p-4 gap-2 bg-bgcolor rounded-lg char-grid">
             {#if currentChar.data.characters.length === 0}
@@ -295,7 +297,7 @@
                             <td class="font-medium truncate w-1/3"><img src={im} alt="img" class="w-full"></td>                        
                         {/await}
                         <td class="font-medium truncate w-1/2">
-                            <input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text text-xl focus:bg-selected" bind:value={currentChar.data.emotionImages[i][0]}>
+                            <TextInput marginBottom size='lg' bind:value={currentChar.data.emotionImages[i][0]} />
                         </td>
                         <button class="font-medium cursor-pointer hover:text-green-500" on:click={() => {
                             rmCharEmotion($selectedCharID,i)
@@ -334,10 +336,10 @@
             {#each currentChar.data.sdData as emo, i}
                 <tr>
                     <td class="font-medium truncate w-1/3">
-                        <input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={currentChar.data.sdData[i][0]}>
+                        <TextInput size="sm" marginBottom bind:value={currentChar.data.sdData[i][0]} />
                     </td>
                     <td class="font-medium truncate w-1/2">
-                        <input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={currentChar.data.sdData[i][1]}>
+                        <TextInput size="sm" marginBottom bind:value={currentChar.data.sdData[i][1]} />
                     </td>
                     {#if (!['always','negative'].includes(currentChar.data.sdData[i][0]))}
                     <button class="font-medium flex justify-center items-center h-full cursor-pointer hover:text-green-500" on:click={() => {
@@ -394,13 +396,15 @@
             <tr>
                 <th class="font-medium w-1/2">Bias</th>
                 <th class="font-medium w-1/3">{language.value}</th>
-                <th class="font-medium cursor-pointer hover:text-green-500" on:click={() => {
+                <th>
-                    if(currentChar.type === 'character'){
+                    <button class="font-medium cursor-pointer hover:text-green-500" on:click={() => {
-                        let bia = currentChar.data.bias
+                        if(currentChar.type === 'character'){
-                        bia.push(['', 0])
+                            let bia = currentChar.data.bias
-                        currentChar.data.bias = bia
+                            bia.push(['', 0])
-                    }
+                            currentChar.data.bias = bia
-                }}><PlusIcon /></th>
+                        }
+                    }}><PlusIcon /></button>
+                </th>
             </tr>
             {#if currentChar.data.bias.length === 0}
                 <tr>
@@ -408,20 +412,22 @@
                 </tr>
             {/if}
             {#each currentChar.data.bias as bias, i}
-                <tr>
+                <tr class="align-middle text-center">
                     <td class="font-medium truncate w-1/2">
-                        <input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text focus:bg-selected" bind:value={currentChar.data.bias[i][0]} placeholder="string">
+                        <TextInput fullh fullwidth bind:value={currentChar.data.bias[i][0]} placeholder="string" />
-                    </td>
+                    </td> 
                     <td class="font-medium truncate w-1/3">
-                        <input class="text-neutral-200 mt-2 mb-4 w-full p-2 bg-transparent input-text focus:bg-selected" bind:value={currentChar.data.bias[i][1]} type="number" max="100" min="-100">
+                        <NumberInput fullh fullwidth bind:value={currentChar.data.bias[i][1]} max={100} min={-100} />
+                    </td>
+                    <td>
+                        <button class="font-medium flex justify-center items-center w-full h-full cursor-pointer hover:text-green-500" on:click={() => {
+                            if(currentChar.type === 'character'){
+                                let bia = currentChar.data.bias
+                                bia.splice(i, 1)
+                                currentChar.data.bias = bia
+                            }
+                        }}><TrashIcon /></button>
                     </td>
-                    <button class="font-medium flex justify-center items-center h-full cursor-pointer hover:text-green-500" on:click={() => {
-                        if(currentChar.type === 'character'){
-                            let bia = currentChar.data.bias
-                            bia.splice(i, 1)
-                            currentChar.data.bias = bia
-                        }
-                    }}><TrashIcon /></button>
                 </tr>
             {/each}
             
@@ -515,16 +521,16 @@
                 </select>
                 {/if}
                 <span class="text-neutral-200">Speed scale</span>
-                <input class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-5 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.voicevoxConfig.SPEED_SCALE}/>
+                <NumberInput size={"sm"} marginBottom bind:value={currentChar.data.voicevoxConfig.SPEED_SCALE}/>
 
                 <span class="text-neutral-200">Pitch scale</span>
-                <input class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-5 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.voicevoxConfig.PITCH_SCALE}/>
+                <NumberInput size={"sm"} marginBottom bind:value={currentChar.data.voicevoxConfig.PITCH_SCALE}/>
 
                 <span class="text-neutral-200">Volume scale</span>
-                <input class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-5 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.voicevoxConfig.VOLUME_SCALE}/>
+                <NumberInput size={"sm"} marginBottom bind:value={currentChar.data.voicevoxConfig.VOLUME_SCALE}/>
 
                 <span class="text-neutral-200">Intonation scale</span>
-                <input class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-5 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.voicevoxConfig.INTONATION_SCALE}/>
+                <NumberInput size={"sm"} marginBottom bind:value={currentChar.data.voicevoxConfig.INTONATION_SCALE}/>
                 <span class="text-sm mb-2 text-gray-400">To use VOICEVOX, you need to run a colab and put the localtunnel URL in "Settings → Other Bots". https://colab.research.google.com/drive/1tyeXJSklNfjW-aZJAib1JfgOMFarAwze</span>
         {/if}
         {#if currentChar.data.ttsMode === 'webspeech' || currentChar.data.ttsMode === 'elevenlab' || currentChar.data.ttsMode === 'VOICEVOX'}
@@ -568,10 +574,10 @@
         <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.backgroundHTML}></textarea>
 
         <span class="text-neutral-200">{language.creator}</span>
-        <input class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.additionalData.creator} />
+        <TextInput size="sm" autocomplete="off" bind:value={currentChar.data.additionalData.creator} />
 
         <span class="text-neutral-200">{language.CharVersion}</span>
-        <input class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.additionalData.character_version} type="number" />
+        <TextInput size="sm" bind:value={currentChar.data.additionalData.character_version}/>
 
         <span class="text-neutral-200 mt-2">{language.altGreet}</span>
         <table class="contain w-full max-w-full tabler mt-2">
@@ -660,7 +666,7 @@
                                     <img src={assetFilePath[i]} class="w-16 h-16 m-1 rounded-md" alt={assets[0]}/>
                                 {/if}
                             {/if}
-                            <input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text focus:bg-selected w-full resize-none" bind:value={currentChar.data.additionalAssets[i][0]} placeholder="..." />
+                            <TextInput size="sm" marginBottom bind:value={currentChar.data.additionalAssets[i][0]} placeholder="..." />
                         </td>
                         
                         <th class="font-medium cursor-pointer w-10">

src/lib/SideBars/LoreBookData.svelte

@@ -5,6 +5,8 @@
     import { alertConfirm } from "../../ts/alert";
     import Check from "../Others/Check.svelte";
     import Help from "../Others/Help.svelte";
+  import TextInput from "../UI/GUI/TextInput.svelte";
+  import NumberInput from "../UI/GUI/NumberInput.svelte";
     export let value:loreBook
     export let onRemove: () => void = () => {}
     let open = false
@@ -30,31 +32,31 @@
     {#if open}
         <div class="seperator">
             <span class="text-neutral-200 mt-6">{language.name} <Help key="loreName"/></span>
-            <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.comment}>
+            <TextInput size="sm" bind:value={value.comment}/>
             {#if !value.alwaysActive}
                 <span class="text-neutral-200 mt-6">{language.activationKeys} <Help key="loreActivationKey"/></span>
                 <span class="text-xs text-gray-500">{language.activationKeysInfo}</span>
-                <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.key}>
+                <TextInput size="sm" bind:value={value.key}/>
 
                 {#if value.selective}
                     <span class="text-neutral-200 mt-6">{language.SecondaryKeys}</span>
                     <span class="text-xs text-gray-500">{language.activationKeysInfo}</span>
-                    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.secondkey} min="0" max="100">
+                    <TextInput size="sm" bind:value={value.secondkey}/>
                 {/if}
             {/if}
             {#if !(value.activationPercent === undefined || value.activationPercent === null)}
                 <span class="text-neutral-200 mt-6">{language.activationProbability}</span>
-                <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.activationPercent} on:change={() => {
+                <NumberInput size="sm" bind:value={value.activationPercent} onChange={() => {
                     if(isNaN(value.activationPercent) || !value.activationPercent || value.activationPercent < 0){
                         value.activationPercent = 0
                     }
                     if(value.activationPercent > 100){
                         value.activationPercent = 100
                     }
-                }}>
+                }} />
             {/if}
             <span class="text-neutral-200 mt-4">{language.insertOrder} <Help key="loreorder"/></span>
-            <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.insertorder} type="number" min={0} max={1000}>
+            <NumberInput size="sm" bind:value={value.insertorder} min={0} max={1000}/>
             <span class="text-neutral-200 mt-4">{language.prompt}</span>
             <textarea class="bg-transparent input-text mt-2 text-gray-200 resize-none h-20 focus:bg-selected text-xs" autocomplete="off" bind:value={value.content}></textarea>
             <div class="flex items-center mt-4">

src/lib/SideBars/LoreBookSetting.svelte

@@ -6,6 +6,7 @@
     import { addLorebook, exportLoreBook, importLoreBook } from "../../ts/process/lorebook";
     import LoreBookData from "./LoreBookData.svelte";
     import Check from "../Others/Check.svelte";
+  import NumberInput from "../UI/GUI/NumberInput.svelte";
     let submenu = 0
     export let globalMode = false
 </script>
@@ -94,9 +95,9 @@
             <Check bind:check={$DataBase.characters[$selectedCharID].loreSettings.recursiveScanning} name={language.recursiveScanning}/>
         </div>
         <span class="text-neutral-200 mt-4 mb-2">{language.loreBookDepth}</span>
-        <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="20" bind:value={$DataBase.characters[$selectedCharID].loreSettings.scanDepth}>
+        <NumberInput size="sm" min={0} max={20} bind:value={$DataBase.characters[$selectedCharID].loreSettings.scanDepth} />
         <span class="text-neutral-200">{language.loreBookToken}</span>
-        <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="4096" bind:value={$DataBase.characters[$selectedCharID].loreSettings.tokenBudget}>
+        <NumberInput size="sm" min={0} max={4096} bind:value={$DataBase.characters[$selectedCharID].loreSettings.tokenBudget} />
     {:else}
         <div class="flex items-center mt-4">
             <Check check={true} onChange={() => {

src/lib/SideBars/RegexData.svelte

@@ -4,6 +4,7 @@
     import { alertConfirm } from "src/ts/alert";
     import type { customscript } from "src/ts/storage/database";
     import Check from "../Others/Check.svelte";
+  import TextInput from "../UI/GUI/TextInput.svelte";
 
     export let value:customscript
     export let onRemove: () => void = () => {}
@@ -29,7 +30,7 @@
     {#if open}
         <div class="seperator p-2">
             <span class="text-neutral-200 mt-6">{language.name}</span>
-            <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.comment}>
+            <TextInput size="sm" bind:value={value.comment} />
             <span class="text-neutral-200 mt-4">Modification Type</span>
             <select class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.type}>
                 <option value="editinput">{language.editInput}</option>
@@ -38,12 +39,12 @@
                 <option value="editdisplay">{language.editDisplay}</option>
             </select>
             <span class="text-neutral-200 mt-6">IN:</span>
-            <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.in}>
+            <TextInput size="sm" bind:value={value.in} />
             <span class="text-neutral-200 mt-6">OUT:</span>
-            <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.out}>
+            <TextInput size="sm" bind:value={value.out} />
             {#if value.ableFlag}
                 <span class="text-neutral-200 mt-6">FLAG:</span>
-                <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.flag}>
+                <TextInput size="sm" bind:value={value.flag} />
             {/if}
             <div class="flex items-center mt-4">
                 <Check bind:check={value.ableFlag} onChange={() => {

src/lib/UI/GUI/NumberInput.svelte

@@ -0,0 +1,31 @@
+<input
+    class="text-neutral-200 bg-transparent input-text focus:bg-selected"
+    class:text-sm={size === 'sm'}
+    class:text-md={size === 'md'}
+    class:text-lg={size === 'lg'}
+    class:p-2={padding}
+    class:mb-4={marginBottom}
+    class:w-full={fullwidth}
+    class:h-full={fullh}
+    on:change={onChange}
+    type="number"
+    min={min}
+    max={max}
+    id={id}
+    bind:value
+>
+
+
+<script lang="ts">
+    export let min:number = undefined
+    export let max:number = undefined
+    export let size: 'sm'|'md'|'lg' = 'sm'
+    export let value:number
+    export let id:string = undefined
+    export let padding = true
+    export let marginBottom = false
+    export let fullwidth = false
+    export let fullh = false
+    export let onChange = () => {}
+
+</script>

src/lib/UI/GUI/SliderInput.svelte

@@ -0,0 +1,27 @@
+<input
+    class="text-neutral-200 bg-transparent input-text focus:bg-selected"
+    class:text-sm={size === 'sm'}
+    class:text-md={size === 'md'}
+    class:text-lg={size === 'lg'}
+    class:p-2={padding}
+    class:mb-4={marginBottom}
+    type="range"
+    min={min}
+    max={max}
+    id={id}
+    step={step}
+    bind:value
+>
+
+
+<script lang="ts">
+    export let min:number = undefined
+    export let max:number = undefined
+    export let size: 'sm'|'md'|'lg' = 'sm'
+    export let value:number
+    export let id:string = undefined
+    export let padding = true
+    export let marginBottom = false
+    export let step = 1
+
+</script>

src/lib/UI/GUI/TextInput.svelte

@@ -0,0 +1,33 @@
+<input
+    class={"text-neutral-200 bg-transparent input-text focus:bg-selected" + ((additionalClass) ? (' ' + additionalClass) : '')}
+    class:text-sm={size === 'sm'}
+    class:text-md={size === 'md'}
+    class:text-lg={size === 'lg'}
+    class:text-xl={size === 'xl'}
+    class:p-2={padding}
+    class:mb-4={marginBottom}
+    class:w-full={fullwidth}
+    class:h-full={fullh}
+
+    {autocomplete}
+    {placeholder}
+    id={id}
+    type="text"
+    bind:value
+    on:input={onInput}
+>
+
+
+<script lang="ts">
+    export let size: 'sm'|'md'|'lg'|'xl' = 'md'
+    export let autocomplete: 'on'|'off' = 'off'
+    export let placeholder: string = ''
+    export let value:string
+    export let id:string = undefined
+    export let padding = true
+    export let marginBottom = false
+    export let onInput = () => {}
+    export let fullwidth = false
+    export let fullh = false
+    export let additionalClass = ''
+</script>

src/lib/UI/Hub.svelte

@@ -6,6 +6,7 @@
     import { language } from "src/lang";
     import RisuHubIcon from "./RisuHubIcon.svelte";
     import { DataBase } from "src/ts/storage/database";
+  import TextInput from "./GUI/TextInput.svelte";
 
     let openedData:null|hubType = null
 
@@ -33,7 +34,7 @@
 </script>
 <div class="w-full flex justify-center mt-4">
     <div class="flex w-2xl max-w-full items-center">
-        <input class="flex-grow text-xl pl-3 pr-3 rounded-lg bg-darkbg h-16 min-w-0" placeholder="Search" bind:value={search}>
+        <TextInput size="xl" additionalClass="flex-grow" placeholder="Search" bind:value={search} />
         <button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg ml-2 flex justify-center items-center hover:ring transition-shadow" on:click={() => {
             page = 0
             getHub()

src/lib/UI/HubUpload.svelte

@@ -25,9 +25,9 @@
         <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-20 min-h-20 focus:bg-selected text-xs w-full" autocomplete="off" bind:value={char.creatorNotes}></textarea>
         <span class="text-neutral-200">{language.tags}</span>
         <span class="text-gray-400 text-sm">Tags to search your character easily. latin alphabets only. seperate by comma.</span>
-        <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected" placeholder="" bind:value={tags} on:input={() => {
+        <TextInput marginBottom placeholder="" bind:value={tags} on:input={() => {
             tags = tags.replace(/[^a-zA-Z,]/g, '').toLocaleLowerCase()
-        }}>
+        }} />
         <div class="flex items-center flex-wrap">
             <button class="bg-bgcolor p-2 rounded-lg" class:ring-1={!privateMode} on:click={() => {privateMode = false}}>🌏 Public</button>
             <!-- <button class="bg-bgcolor p-2 rounded-lg ml-2" class:ring-1={privateMode} on:click={() => {privateMode = true}}>🔒 Private</button> -->
@@ -67,6 +67,7 @@
   import { alertError } from "src/ts/alert";
   import { shareRisuHub } from "src/ts/characterCards";
     import { DataBase, type character } from "src/ts/storage/database";
+  import TextInput from "./GUI/TextInput.svelte";
     export let close = () => {}
     export let char:character
     let tags=""

src/ts/parser.ts

@@ -337,6 +337,11 @@ export function risuChatParser(da:string, arg:{
             }
             case 'char':
             case 'bot':{
+                let selectedChar = get(selectedCharID)
+                let currentChar = db.characters[selectedChar]
+                if(currentChar.type !== 'group'){
+                    return currentChar.name
+                }
                 if(chara){
                     if(typeof(chara) === 'string'){
                         return chara
@@ -345,8 +350,6 @@ export function risuChatParser(da:string, arg:{
                         return chara.name
                     }
                 }
-                let selectedChar = get(selectedCharID)
-                let currentChar = db.characters[selectedChar]
                 return currentChar.name
             }
             case 'user':{

src/ts/process/scripts.ts

@@ -140,7 +140,7 @@ export function processScriptFull(char:character|groupChat, data:string, mode:Sc
             }
         }
     }
-    if(db.officialplugins.automark){
+    if(db.officialplugins.automark && mode === 'editdisplay'){
         data = autoMarkPlugin(data)
     }
     return {data, emoChanged}

src/ts/storage/globalApi.ts

@@ -959,4 +959,21 @@ function formDataToString(formData: FormData): string {
     }
   
     return params.join('&');
-  }
+}
+
+export function getModelMaxContext(model:string):number|undefined{
+    if(model.startsWith('gpt35')){
+        if(model.includes('16k')){
+            return 16000
+        }
+        return 4000
+    }
+    if(model.startsWith('gpt4')){
+        if(model.includes('32k')){
+            return 32000
+        }
+        return 8000
+    }
+
+    return undefined
+}