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

change gui

Browse Source
This commit is contained in:
kwaroran
2024-07-30 20:35:55 +09:00
parent a0d87b8efe
commit 4d74439daf
6 changed files with 709 additions and 707 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lang/en.ts
View File

@@ -677,4 +677,6 @@ export const languageEnglish = {
doYouWantToUnbindCurrentPersona: "Do you want to unbind the persona from this chat?",
personaBindedSuccess: "Persona is successfully binded",
personaUnbindedSuccess: "Persona is successfully unbinded",
parameters: "Parameters",
sizeAndSpeed: "Size and Speed",
}

269
src/lib/Setting/Pages/BotSettings.svelte
View File

@@ -24,6 +24,7 @@
import Arcodion from "src/lib/UI/Arcodion.svelte";
import OpenrouterSettings from "./OpenrouterSettings.svelte";
import ChatFormatSettings from "./ChatFormatSettings.svelte";
import PromptSettings from "./PromptSettings.svelte";
let tokens = {
mainPrompt: 0,
@@ -40,70 +41,45 @@
tokens.globalNote = await tokenizeAccurate($DataBase.globalNote, true)
}
let advancedBotSettings = false
const unsub = DataBase.subscribe(db => {
if(db.advancedBotSettings !== advancedBotSettings){
advancedBotSettings = db.advancedBotSettings
}
loadTokenize()
})
onDestroy(() => {
unsub()
})
$: if($DataBase.aiModel === 'textgen_webui' || $DataBase.subModel === 'mancer'){
$DataBase.useStreaming = $DataBase.textgenWebUIStreamURL.startsWith("wss://")
}
</script>
let submenu = 0
</script>
<h2 class="mb-2 text-2xl font-bold mt-2">{language.chatBot}</h2>
<div class="flex w-full mb-4">
<div class="flex w-full rounded-md border border-darkborderc mb-4">
<button on:click={() => {
$DataBase.advancedBotSettings = false
}} class="flex-1 border-solid p-2 flex justify-center cursor-pointer rounded-l-lg bg-darkbg" class:bg-darkbutton={!$DataBase.advancedBotSettings}>
<span>{language.simple}</span>
submenu = 0
}} class="p-2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 0}>
<span>{language.model}</span>
</button>
<button on:click={() => {
$DataBase.advancedBotSettings = true
}} class="flex-1 border-solid border-l-transparent p-2 flex justify-center cursor-pointer rounded-r-lg bg-darkbg" class:bg-darkbutton={$DataBase.advancedBotSettings}>
<span>{language.advanced}</span>
submenu = 1
}} class="p2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 1}>
<span>{language.parameters}</span>
</button>
<button on:click={() => {
submenu = 2
}} class="p-2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 2}>
<span>{language.prompt}</span>
</button>
<button on:click={() => {
submenu = 3
}} class="p-2 flex-1" class:bg-darkbutton={submenu === 3}>
<span>{language.others}</span>
</button>
</div>
{#if advancedBotSettings}
{#if submenu === 0 || submenu === -1}
<span class="text-textcolor mt-4">{language.model} <Help key="model"/></span>
<ModelList bind:value={$DataBase.aiModel}/>
<span class="text-textcolor mt-2">{language.submodel} <Help key="submodel"/></span>
<ModelList bind:value={$DataBase.subModel}/>
{:else}
<span class="text-textcolor mt-4">{language.model} <Help key="model"/></span>
<ModelList bind:value={$DataBase.aiModel} onChange={(v) => {
$DataBase.subModel = v
if(v.startsWith('gpt') || v.startsWith('palm2')){
$DataBase.maxContext = 4000
$DataBase.maxResponse = 500
}
else if(v.startsWith('claude')){
$DataBase.maxContext = 7500
$DataBase.maxResponse = 500
if(v.endsWith('100k')){
$DataBase.maxContext = 99000
}
}
else{
$DataBase.maxContext = 1500
$DataBase.maxResponse = 200
if(v.startsWith('horde')){
$DataBase.maxResponse = 100
}
}
setRecommended(v, 'force')
}}/>
{/if}
{#if $DataBase.aiModel.startsWith('palm2') || $DataBase.subModel.startsWith('palm2') || $DataBase.aiModel.startsWith('gemini') || $DataBase.subModel.startsWith('gemini')}
{#if $DataBase.aiModel.startsWith('palm2') || $DataBase.subModel.startsWith('palm2') || $DataBase.aiModel.startsWith('gemini') || $DataBase.subModel.startsWith('gemini')}
<span class="text-textcolor">
{#if $DataBase.google.projectId === 'aigoogle'}
GoogleAI API Key
@@ -117,28 +93,28 @@
<span class="text-textcolor">Google Project ID</span>
<TextInput marginBottom={true} size={"sm"} placeholder="..." hideText bind:value={$DataBase.google.projectId}/>
{/if}
{/if}
{#if $DataBase.aiModel.startsWith('novellist') || $DataBase.subModel.startsWith('novellist')}
{/if}
{#if $DataBase.aiModel.startsWith('novellist') || $DataBase.subModel.startsWith('novellist')}
<span class="text-textcolor">NovelList {language.apiKey}</span>
<TextInput hideText marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.novellistAPI}/>
{/if}
{#if $DataBase.aiModel.startsWith('mancer') || $DataBase.subModel.startsWith('mancer')}
{/if}
{#if $DataBase.aiModel.startsWith('mancer') || $DataBase.subModel.startsWith('mancer')}
<span class="text-textcolor">Mancer {language.apiKey}</span>
<TextInput hideText marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.mancerHeader}/>
{/if}
{#if $DataBase.aiModel.startsWith('claude-') || $DataBase.subModel.startsWith('claude-')}
{/if}
{#if $DataBase.aiModel.startsWith('claude-') || $DataBase.subModel.startsWith('claude-')}
<span class="text-textcolor">Claude {language.apiKey}</span>
<TextInput hideText marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.claudeAPIKey}/>
{/if}
{#if $DataBase.aiModel.startsWith('mistral') || $DataBase.subModel.startsWith('mistral')}
{/if}
{#if $DataBase.aiModel.startsWith('mistral') || $DataBase.subModel.startsWith('mistral')}
<span class="text-textcolor">Mistral {language.apiKey}</span>
<TextInput hideText marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.mistralKey}/>
{/if}
{#if $DataBase.aiModel.startsWith('novelai') || $DataBase.subModel.startsWith('novelai')}
{/if}
{#if $DataBase.aiModel.startsWith('novelai') || $DataBase.subModel.startsWith('novelai')}
<span class="text-textcolor">NovelAI Bearer Token</span>
<TextInput bind:value={$DataBase.novelai.token}/>
{/if}
{#if $DataBase.aiModel === 'reverse_proxy' || $DataBase.subModel === 'reverse_proxy'}
{/if}
{#if $DataBase.aiModel === 'reverse_proxy' || $DataBase.subModel === 'reverse_proxy'}
<span class="text-textcolor mt-2">URL <Help key="forceUrl"/></span>
<TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.forceReplaceUrl} placeholder="https//..." />
<span class="text-textcolor mt-4"> {language.proxyAPIKey}</span>
@@ -176,23 +152,23 @@
{:else}
<div class="mb-4"></div>
{/if}
{/if}
{#if $DataBase.aiModel.startsWith('risullm')}
{/if}
{#if $DataBase.aiModel.startsWith('risullm')}
<span class="text-textcolor mt-4">Risu {language.apiKey}</span>
<TextInput hideText marginBottom={false} size={"sm"} bind:value={$DataBase.proxyKey} />
{/if}
{#if $DataBase.aiModel.startsWith('cohere')}
{/if}
{#if $DataBase.aiModel.startsWith('cohere')}
<span class="text-textcolor mt-4">Cohere {language.apiKey}</span>
<TextInput hideText marginBottom={false} size={"sm"} bind:value={$DataBase.cohereAPIKey} />
{/if}
{#if $DataBase.aiModel === 'ollama-hosted'}
{/if}
{#if $DataBase.aiModel === 'ollama-hosted'}
<span class="text-textcolor mt-4">Ollama URL</span>
<TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.ollamaURL} />
<span class="text-textcolor mt-4">Ollama Model</span>
<TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.ollamaModel} />
{/if}
{#if $DataBase.aiModel === 'openrouter' || $DataBase.subModel === 'openrouter'}
{/if}
{#if $DataBase.aiModel === 'openrouter' || $DataBase.subModel === 'openrouter'}
<span class="text-textcolor mt-4">Openrouter Key</span>
<TextInput hideText marginBottom={false} size={"sm"} bind:value={$DataBase.openrouterKey} />
@@ -223,23 +199,23 @@
{/if}
</SelectInput>
{/await}
{/if}
{#if $DataBase.aiModel === 'openrouter' || $DataBase.aiModel === 'reverse_proxy'}
{/if}
{#if $DataBase.aiModel === 'openrouter' || $DataBase.aiModel === 'reverse_proxy'}
<span class="text-textcolor">{language.tokenizer}</span>
<SelectInput bind:value={$DataBase.customTokenizer}>
{#each tokenizerList as entry}
<OptionInput value={entry[0]}>{entry[1]}</OptionInput>
{/each}
</SelectInput>
{/if}
{#if $DataBase.aiModel.startsWith('gpt') || $DataBase.subModel.startsWith('gpt')
{/if}
{#if $DataBase.aiModel.startsWith('gpt') || $DataBase.subModel.startsWith('gpt')
|| $DataBase.aiModel.startsWith('instructgpt') || $DataBase.subModel.startsWith('instructgpt')}
<span class="text-textcolor">OpenAI {language.apiKey} <Help key="oaiapikey"/></span>
<TextInput hideText marginBottom={false} size={"sm"} bind:value={$DataBase.openAIKey} placeholder="sk-XXXXXXXXXXXXXXXXXXXX"/>
{/if}
{/if}
<div class="py-2 flex flex-col gap-2 mb-4">
<div class="py-2 flex flex-col gap-2 mb-4">
{#if $DataBase.aiModel.startsWith('gpt') || $DataBase.aiModel === 'reverse_proxy' || $DataBase.aiModel === 'openrouter' || $DataBase.aiModel.startsWith('claude-3')}
<Check bind:check={$DataBase.useStreaming} name={`Response ${language.streaming}`}/>
{/if}
@@ -265,9 +241,9 @@
<Check bind:check={$DataBase.NAIappendName} name={language.appendNameNAI}/>
{/if}
</div>
</div>
{#if $DataBase.aiModel === 'custom' || $DataBase.subModel === 'custom'}
{#if $DataBase.aiModel === 'custom' || $DataBase.subModel === 'custom'}
<span class="text-textcolor mt-2">{language.plugin}</span>
<SelectInput className="mt-2 mb-4" bind:value={$DataBase.currentPluginProvider}>
<OptionInput value="">None</OptionInput>
@@ -275,21 +251,21 @@
<OptionInput value={plugin}>{plugin}</OptionInput>
{/each}
</SelectInput>
{/if}
{/if}
{#if $DataBase.aiModel === "kobold" || $DataBase.subModel === "kobold"}
{#if $DataBase.aiModel === "kobold" || $DataBase.subModel === "kobold"}
<span class="text-textcolor">Kobold URL</span>
<TextInput marginBottom={true} bind:value={$DataBase.koboldURL} />
{/if}
{/if}
{#if $DataBase.aiModel.startsWith("horde") || $DataBase.subModel.startsWith("horde") }
{#if $DataBase.aiModel.startsWith("horde") || $DataBase.subModel.startsWith("horde") }
<span class="text-textcolor">Horde {language.apiKey}</span>
<TextInput hideText marginBottom={true} bind:value={$DataBase.hordeConfig.apiKey} />
{/if}
{#if $DataBase.aiModel === 'textgen_webui' || $DataBase.subModel === 'textgen_webui'
{/if}
{#if $DataBase.aiModel === 'textgen_webui' || $DataBase.subModel === 'textgen_webui'
|| $DataBase.aiModel === 'mancer' || $DataBase.subModel === 'mancer'}
<span class="text-textcolor mt-2">Blocking {language.providerURL}</span>
<TextInput marginBottom={true} bind:value={$DataBase.textgenWebUIBlockingURL} placeholder="https://..."/>
@@ -300,24 +276,15 @@
<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-draculared text-xs mb-2">Warning: For Ooba version over 1.7, use "Ooba" as model, and use url like http://127.0.0.1:5000/v1/chat/completions</span>
{/if}
{#if $DataBase.aiModel === 'ooba' || $DataBase.subModel === 'ooba'}
{/if}
{#if $DataBase.aiModel === 'ooba' || $DataBase.subModel === 'ooba'}
<span class="text-textcolor mt-2">Ooba {language.providerURL}</span>
<TextInput marginBottom={true} bind:value={$DataBase.textgenWebUIBlockingURL} placeholder="https://..."/>
{/if}
{#if advancedBotSettings}
{#if !$DataBase.promptTemplate}
<span class="text-textcolor">{language.mainPrompt} <Help key="mainprompt"/></span>
<TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.mainPrompt}></TextAreaInput>
<span class="text-textcolor2 mb-6 text-sm mt-2">{tokens.mainPrompt} {language.tokens}</span>
<span class="text-textcolor">{language.jailbreakPrompt} <Help key="jailbreak"/></span>
<TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.jailbreak}></TextAreaInput>
<span class="text-textcolor2 mb-6 text-sm mt-2">{tokens.jailbreak} {language.tokens}</span>
<span class="text-textcolor">{language.globalNote} <Help key="globalNote"/></span>
<TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.globalNote}></TextAreaInput>
<span class="text-textcolor2 mb-6 text-sm mt-2">{tokens.globalNote} {language.tokens}</span>
{/if}
{/if}
{#if submenu === 1 || submenu === -1}
<span class="text-textcolor">{language.maxContextSize}</span>
<NumberInput min={0} max={getModelMaxContext($DataBase.aiModel)} marginBottom={true} bind:value={$DataBase.maxContext}/>
@@ -325,23 +292,23 @@
<span class="text-textcolor">{language.maxResponseSize}</span>
<NumberInput min={0} max={2048} marginBottom={true} bind:value={$DataBase.maxResponse}/>
{#if $DataBase.aiModel.startsWith('gpt') || $DataBase.aiModel === 'reverse_proxy' || $DataBase.aiModel === 'openrouter'}
<span class="text-textcolor">{language.seed}</span>
{#if $DataBase.aiModel.startsWith('gpt') || $DataBase.aiModel === 'reverse_proxy' || $DataBase.aiModel === 'openrouter'}
<span class="text-textcolor">{language.seed}</span>
<NumberInput bind:value={$DataBase.generationSeed} marginBottom={true}/>
{/if}
<span class="text-textcolor">{language.temperature} <Help key="tempature"/></span>
<NumberInput bind:value={$DataBase.generationSeed} marginBottom={true}/>
{/if}
<span class="text-textcolor">{language.temperature} <Help key="tempature"/></span>
{#if $DataBase.aiModel.startsWith("novelai")}
{#if $DataBase.aiModel.startsWith("novelai")}
<SliderInput min={0} max={250} marginBottom bind:value={$DataBase.temperature} multiple={0.01} fixed={2}/>
{:else}
{:else}
<SliderInput min={0} max={200} marginBottom bind:value={$DataBase.temperature} multiple={0.01} fixed={2}/>
{/if}
{#if $DataBase.aiModel.startsWith('openrouter') || $DataBase.aiModel.startsWith('claude-3') || $DataBase.aiModel.startsWith('cohere-')}
{/if}
{#if $DataBase.aiModel.startsWith('openrouter') || $DataBase.aiModel.startsWith('claude-3') || $DataBase.aiModel.startsWith('cohere-')}
<span class="text-textcolor">Top K</span>
<SliderInput min={0} max={100} marginBottom step={1} bind:value={$DataBase.top_k}/>
{/if}
{#if $DataBase.aiModel.startsWith('openrouter')}
{/if}
{#if $DataBase.aiModel.startsWith('openrouter')}
<span class="text-textcolor">Repetition penalty</span>
<SliderInput min={0} max={2} marginBottom step={0.01} fixed={2} bind:value={$DataBase.repetition_penalty}/>
@@ -350,8 +317,8 @@
<span class="text-textcolor">Top A</span>
<SliderInput min={0} max={1} marginBottom step={0.01} fixed={2} bind:value={$DataBase.top_a}/>
{/if}
{#if $DataBase.aiModel === 'textgen_webui' || $DataBase.aiModel === 'mancer' || $DataBase.aiModel.startsWith('local_') || $DataBase.aiModel.startsWith('hf:::')}
{/if}
{#if $DataBase.aiModel === 'textgen_webui' || $DataBase.aiModel === 'mancer' || $DataBase.aiModel.startsWith('local_') || $DataBase.aiModel.startsWith('hf:::')}
<span class="text-textcolor">Repetition Penalty</span>
<SliderInput min={1} max={1.5} step={0.01} fixed={2} marginBottom bind:value={$DataBase.ooba.repetition_penalty}/>
<span class="text-textcolor">Length Penalty</span>
@@ -418,7 +385,7 @@
</div>
<Check bind:check={$DataBase.ooba.formating.useName} name={language.useNamePrefix}/>
{:else if $DataBase.aiModel.startsWith('novelai')}
{:else if $DataBase.aiModel.startsWith('novelai')}
<div class="flex flex-col p-3 bg-darkbg mt-4">
<span class="text-textcolor">Starter</span>
<TextInput bind:value={$DataBase.NAIsettings.starter} placeholder={'⁂'} />
@@ -452,7 +419,7 @@
<span class="text-textcolor">Cfg Scale</span>
<SliderInput min={1} max={3} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.cfg_scale}/>
{:else if $DataBase.aiModel.startsWith('novellist')}
{:else if $DataBase.aiModel.startsWith('novellist')}
<span class="text-textcolor">Top P</span>
<SliderInput min={0} max={2} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ainconfig.top_p}/>
<span class="text-textcolor">Reputation Penalty</span>
@@ -467,10 +434,10 @@
<SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ainconfig.top_a}/>
<span class="text-textcolor">Typical P</span>
<SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ainconfig.typical_p}/>
{:else if $DataBase.aiModel.startsWith('claude')}
{:else if $DataBase.aiModel.startsWith('claude')}
<span class="text-textcolor">Top P <Help key="topP"/></span>
<SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.top_p}/>
{:else}
{:else}
<span class="text-textcolor">Top P <Help key="topP"/></span>
@@ -480,23 +447,19 @@
<SliderInput min={0} max={200} marginBottom fixed={2} multiple={0.01} bind:value={$DataBase.frequencyPenalty} />
<span class="text-textcolor">{language.presensePenalty} <Help key="presensePenalty"/></span>
<SliderInput min={0} max={200} marginBottom fixed={2} multiple={0.01} bind:value={$DataBase.PresensePenalty} />
{/if}
{/if}
{#if ($DataBase.reverseProxyOobaMode && $DataBase.aiModel === 'reverse_proxy') || ($DataBase.aiModel === 'ooba')}
<OobaSettings instructionMode={$DataBase.aiModel === 'ooba'} />
{/if}
{#if $DataBase.aiModel.startsWith('openrouter')}
<OpenrouterSettings />
{/if}
{#if advancedBotSettings}
{#if !$DataBase.promptTemplate}
<span class="text-textcolor mb-2 mt-4">{language.formatingOrder} <Help key="formatOrder"/></span>
<DropList bind:list={$DataBase.formatingOrder} />
{/if}
{#if ($DataBase.reverseProxyOobaMode && $DataBase.aiModel === 'reverse_proxy') || ($DataBase.aiModel === 'ooba')}
<OobaSettings instructionMode={$DataBase.aiModel === 'ooba'} />
{/if}
{#if $DataBase.aiModel.startsWith('openrouter')}
<OpenrouterSettings />
{/if}
{/if}
{#if submenu === 3 || submenu === -1}
<Arcodion styled name="Bias " help="bias">
<table class="contain w-full max-w-full tabler">
<tr>
@@ -576,14 +539,10 @@
{/if}
{#if !$DataBase.promptTemplate}
<div class="flex items-center mt-4">
<Check bind:check={$DataBase.promptPreprocess} name={language.promptPreprocess}/>
</div>
{/if}
<div class="flex items-center mt-4">
<Arcodion styled name={language.promptTemplate}>
{#if $DataBase.promptTemplate}
<Check check={!!$DataBase.promptTemplate} name={language.usePromptTemplate} onChange={async ()=>{
<PromptSettings mode='inline' subMenu={1} />
<Check check={!!$DataBase.promptTemplate} name={language.usePromptTemplate} className="mt-4" onChange={async ()=>{
const conf = await alertConfirm(language.resetPromptTemplateConfirm)
if(conf){
@@ -592,21 +551,41 @@
else{
$DataBase.promptTemplate = $DataBase.promptTemplate
}
}}/>
{:else}
<Check check={false} name={language.usePromptTemplate} onChange={() => {
$DataBase.promptTemplate = []
}}/>
{/if}
</div>
{#if ($DataBase.promptTemplate)}
<div class="mt-2">
<Button on:click={goPromptTemplate} size="sm">{language.promptTemplate}</Button>
</div>
{/if}
</Arcodion>
<Button on:click={() => {openPresetList = true}} className="mt-4">{language.presets}</Button>
{/if}
{#if submenu === 2 || submenu === -1}
{#if !$DataBase.promptTemplate}
<span class="text-textcolor">{language.mainPrompt} <Help key="mainprompt"/></span>
<TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.mainPrompt}></TextAreaInput>
<span class="text-textcolor2 mb-6 text-sm mt-2">{tokens.mainPrompt} {language.tokens}</span>
<span class="text-textcolor">{language.jailbreakPrompt} <Help key="jailbreak"/></span>
<TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.jailbreak}></TextAreaInput>
<span class="text-textcolor2 mb-6 text-sm mt-2">{tokens.jailbreak} {language.tokens}</span>
<span class="text-textcolor">{language.globalNote} <Help key="globalNote"/></span>
<TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.globalNote}></TextAreaInput>
<span class="text-textcolor2 mb-6 text-sm mt-2">{tokens.globalNote} {language.tokens}</span>
<span class="text-textcolor mb-2 mt-4">{language.formatingOrder} <Help key="formatOrder"/></span>
<DropList bind:list={$DataBase.formatingOrder} />
<div class="flex items-center mt-4">
<Check bind:check={$DataBase.promptPreprocess} name={language.promptPreprocess}/>
</div>
{:else}
<PromptSettings mode='inline' />
{/if}
{/if}
{#if $DataBase.promptTemplate && submenu === -1}
<div class="mt-2">
<Button on:click={goPromptTemplate} size="sm">{language.promptTemplate}</Button>
</div>
{/if}

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

@@ -17,19 +17,39 @@
const onSchemeInputChange = (e:Event) => {
changeColorScheme((e.target as HTMLInputElement).value)
}
let submenu = 0
</script>
<h2 class="mb-2 text-2xl font-bold mt-2">{language.display}</h2>
<div class="flex w-full rounded-md border border-darkborderc mb-4">
<button on:click={() => {
submenu = 0
}} class="p-2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 0}>
<span>{language.theme}</span>
</button>
<button on:click={() => {
submenu = 1
}} class="p2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 1}>
<span>{language.sizeAndSpeed}</span>
</button>
<button on:click={() => {
submenu = 2
}} class="p-2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 2}>
<span>{language.others}</span>
</button>
</div>
<span class="text-textcolor mt-4">{language.theme}</span>
<SelectInput className="mt-2" bind:value={$DataBase.theme}>
{#if submenu === 0 || submenu === -1}
<span class="text-textcolor mt-4">{language.theme}</span>
<SelectInput className="mt-2" bind:value={$DataBase.theme}>
<OptionInput value="" >Standard Risu</OptionInput>
<OptionInput value="waifu" >Waifulike</OptionInput>
<OptionInput value="waifuMobile" >WaifuCut</OptionInput>
</SelectInput>
</SelectInput>
{#if $DataBase.theme === "waifu"}
{#if $DataBase.theme === "waifu"}
<span class="text-textcolor mt-4">{language.waifuWidth}</span>
<SliderInput min={50} max={200} bind:value={$DataBase.waifuWidth} />
<span class="text-textcolor2 text-sm">{($DataBase.waifuWidth)}%</span>
@@ -37,18 +57,18 @@
<span class="text-textcolor mt-4">{language.waifuWidth2}</span>
<SliderInput min={20} max={150} bind:value={$DataBase.waifuWidth2} />
<span class="text-textcolor2 text-sm">{($DataBase.waifuWidth2)}%</span>
{/if}
{/if}
<span class="text-textcolor mt-4">{language.colorScheme}</span>
<SelectInput className="mt-2" value={$DataBase.colorSchemeName} on:change={onSchemeInputChange}>
<span class="text-textcolor mt-4">{language.colorScheme}</span>
<SelectInput className="mt-2" value={$DataBase.colorSchemeName} on:change={onSchemeInputChange}>
{#each colorSchemeList as scheme}
<OptionInput value={scheme} >{scheme}</OptionInput>
{/each}
<OptionInput value="custom" >Custom</OptionInput>
</SelectInput>
</SelectInput>
{#if $DataBase.colorSchemeName === "custom"}
<div class="border border-darkborderc p-2 m-2 rounded-md">
{#if $DataBase.colorSchemeName === "custom"}
<div class="border border-darkborderc p-2 m-2 rounded-md">
<SelectInput className="mt-2" value={$DataBase.colorScheme.type} on:change={updateColorScheme}>
<OptionInput value="light">Light</OptionInput>
<OptionInput value="dark">Dark</OptionInput>
@@ -101,17 +121,17 @@
<FolderUpIcon size={18}/>
</button>
</div>
</div>
{/if}
</div>
{/if}
<span class="text-textcolor mt-4">{language.textColor}</span>
<SelectInput className="mt-2" bind:value={$DataBase.textTheme} on:change={updateTextTheme}>
<span class="text-textcolor mt-4">{language.textColor}</span>
<SelectInput className="mt-2" bind:value={$DataBase.textTheme} on:change={updateTextTheme}>
<OptionInput value="standard" >{language.classicRisu}</OptionInput>
<OptionInput value="highcontrast" >{language.highcontrast}</OptionInput>
<OptionInput value="custom" >Custom</OptionInput>
</SelectInput>
</SelectInput>
{#if $DataBase.textTheme === "custom"}
{#if $DataBase.textTheme === "custom"}
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.customTextTheme.FontColorStandard} on:input={updateTextTheme} />
<span class="ml-2">Normal Text</span>
@@ -136,73 +156,72 @@
<ColorInput bind:value={$DataBase.customTextTheme.FontColorQuote2} on:input={updateTextTheme} />
<span class="ml-2">Double Quote Text</span>
</div>
{/if}
{/if}
<span class="text-textcolor mt-4">{language.font}</span>
<SelectInput className="mt-2" bind:value={$DataBase.font} on:change={updateTextTheme}>
<span class="text-textcolor mt-4">{language.font}</span>
<SelectInput className="mt-2" bind:value={$DataBase.font} on:change={updateTextTheme}>
<OptionInput value="default" >Default</OptionInput>
<OptionInput value="timesnewroman" >Times New Roman</OptionInput>
<OptionInput value="custom" >Custom</OptionInput>
</SelectInput>
</SelectInput>
{#if $DataBase.font === "custom"}
{#if $DataBase.font === "custom"}
<TextInput bind:value={$DataBase.customFont} on:change={updateTextTheme} />
{/if}
{/if}
<span class="text-textcolor mt-4">{language.UISize}</span>
<SliderInput min={50} max={200} bind:value={$DataBase.zoomsize} />
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.zoomsize)}%</span>
{#if submenu === 1 || submenu === -1}
<span class="text-textcolor mt-4">{language.lineHeight}</span>
<SliderInput min={0.5} max={3} step={0.05} bind:value={$DataBase.lineHeight} />
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.lineHeight)}</span>
<span class="text-textcolor mt-4">{language.UISize}</span>
<SliderInput min={50} max={200} bind:value={$DataBase.zoomsize} marginBottom/>
<span class="text-textcolor">{language.iconSize}</span>
<SliderInput min={50} max={200} bind:value={$DataBase.iconsize} />
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.iconsize)}%</span>
<span class="text-textcolor">{language.lineHeight}</span>
<SliderInput min={0.5} max={3} step={0.05} bind:value={$DataBase.lineHeight} marginBottom/>
<span class="text-textcolor">{language.textAreaSize}</span>
<SliderInput min={-5} max={5} bind:value={$DataBase.textAreaSize} on:change={updateGuisize} />
<span class="text-textcolor2 mb-6 text-sm">{guiSizeText($DataBase.textAreaSize)}</span>
<span class="text-textcolor">{language.iconSize}</span>
<SliderInput min={50} max={200} bind:value={$DataBase.iconsize} marginBottom/>
<span class="text-textcolor">{language.textAreaTextSize}</span>
<SliderInput min={0} max={3} bind:value={$DataBase.textAreaTextSize} on:change={updateGuisize} />
<span class="text-textcolor2 mb-6 text-sm">{guiSizeText($DataBase.textAreaTextSize)}</span>
<span class="text-textcolor">{language.textAreaSize}</span>
<SliderInput min={-5} max={5} bind:value={$DataBase.textAreaSize} on:change={updateGuisize} customText={guiSizeText($DataBase.textAreaSize)} marginBottom/>
<span class="text-textcolor">{language.sideBarSize}</span>
<SliderInput min={0} max={3} bind:value={$DataBase.sideBarSize} on:change={updateGuisize} />
<span class="text-textcolor2 mb-6 text-sm">{guiSizeText($DataBase.sideBarSize)}</span>
<span class="text-textcolor">{language.textAreaTextSize}</span>
<SliderInput min={0} max={3} bind:value={$DataBase.textAreaTextSize} on:change={updateGuisize} customText={guiSizeText($DataBase.textAreaTextSize)} marginBottom/>
<span class="text-textcolor">{language.assetWidth}</span>
<SliderInput min={-1} max={40} step={1} bind:value={$DataBase.assetWidth} />
<span class="text-textcolor2 mb-6 text-sm">{
<span class="text-textcolor">{language.sideBarSize}</span>
<SliderInput min={0} max={3} bind:value={$DataBase.sideBarSize} on:change={updateGuisize} customText={guiSizeText($DataBase.sideBarSize)} marginBottom/>
<span class="text-textcolor">{language.assetWidth}</span>
<SliderInput min={-1} max={40} step={1} bind:value={$DataBase.assetWidth} customText={
($DataBase.assetWidth === -1) ? "Unlimited" :
($DataBase.assetWidth === 0) ? "Hidden" : (`${($DataBase.assetWidth).toFixed(1)} rem`)}</span>
($DataBase.assetWidth === 0) ? "Hidden" : (`${($DataBase.assetWidth).toFixed(1)} rem`)
} marginBottom />
<span class="text-textcolor">{language.animationSpeed}</span>
<SliderInput min={0} max={1} step={0.05} fixed={2} bind:value={$DataBase.animationSpeed} on:change={updateAnimationSpeed} marginBottom />
<span class="text-textcolor">{language.animationSpeed}</span>
<SliderInput min={0} max={1} step={0.05} bind:value={$DataBase.animationSpeed} on:change={updateAnimationSpeed} />
<span class="text-textcolor2 mb-6 text-sm">{(`${($DataBase.animationSpeed).toFixed(2)}s`)}</span>
{#if $DataBase.showMemoryLimit}
{#if $DataBase.showMemoryLimit}
<span class="text-textcolor">{language.memoryLimitThickness}</span>
<SliderInput min={1} max={500} step={1} bind:value={$DataBase.memoryLimitThickness} />
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.memoryLimitThickness)}px</span>
<SliderInput min={1} max={500} step={1} bind:value={$DataBase.memoryLimitThickness} marginBottom />
{/if}
{/if}
<div class="flex items-center mt-2">
{#if submenu === 2 || submenu === -1}
<div class="flex items-center mt-2">
<Check bind:check={$DataBase.fullScreen} onChange={changeFullscreen} name={language.fullscreen}/>
</div>
</div>
<div class="flex items-center mt-2">
<div class="flex items-center mt-2">
<Check bind:check={$DataBase.showMemoryLimit} name={language.showMemoryLimit}/>
</div>
</div>
<div class="flex items-center mt-2">
<div class="flex items-center mt-2">
<Check bind:check={$DataBase.hideRealm} name={language.hideRealm}/>
</div>
</div>
<div class="flex items-center mt-2">
<div class="flex items-center mt-2">
<Check check={$DataBase.customBackground !== ''} onChange={async (check) => {
if(check){
$DataBase.customBackground = '-'
@@ -218,22 +237,22 @@
$DataBase.customBackground = ''
}
}} name={language.useCustomBackground}></Check>
</div>
</div>
<div class="flex items-center mt-2">
<div class="flex items-center mt-2">
<Check bind:check={$DataBase.playMessage} name={language.playMessage}/>
<span> <Help key="msgSound" name={language.playMessage}/></span>
</div>
</div>
<div class="flex items-center mt-2">
<div class="flex items-center mt-2">
<Check bind:check={$DataBase.roundIcons} name={language.roundIcons}/>
</div>
</div>
<div class="flex items-center mt-2">
<div class="flex items-center mt-2">
<Check bind:check={$DataBase.useAdvancedEditor} name={language.useAdvancedEditor}/>
</div>
</div>
{#if $DataBase.textScreenColor}
{#if $DataBase.textScreenColor}
<div class="flex items-center mt-2">
<Check check={true} onChange={() => {
$DataBase.textScreenColor = null
@@ -241,7 +260,7 @@
<input type="color" class="style2 text-sm mr-2" bind:value={$DataBase.textScreenColor} >
<span>{language.textBackgrounds}</span>
</div>
{:else}
{:else}
<div class="flex items-center mt-2">
<Check check={false} onChange={() => {
$DataBase.textScreenColor = "#121212"
@@ -249,18 +268,18 @@
</div>
{/if}
{/if}
<div class="flex items-center mt-2">
<div class="flex items-center mt-2">
<Check bind:check={$DataBase.textBorder} name={language.textBorder}/>
</div>
</div>
<div class="flex items-center mt-2">
<div class="flex items-center mt-2">
<Check bind:check={$DataBase.textScreenRounded} name={language.textScreenRound}/>
</div>
</div>
{#if $DataBase.textScreenBorder}
{#if $DataBase.textScreenBorder}
<div class="flex items-center mt-2">
<Check check={true} onChange={() => {
$DataBase.textScreenBorder = null
@@ -268,25 +287,27 @@
<input type="color" class="style2 text-sm mr-2" bind:value={$DataBase.textScreenBorder} >
<span>{language.textScreenBorder}</span>
</div>
{:else}
{:else}
<div class="flex items-center mt-2">
<Check check={false} onChange={() => {
$DataBase.textScreenBorder = "#121212"
}} name={language.textScreenBorder}/>
</div>
{/if}
{/if}
<div class="flex items-center mt-2">
<div class="flex items-center mt-2">
<Check bind:check={$DataBase.useChatCopy} name={language.useChatCopy}/>
</div>
</div>
<div class="flex items-center mt-2">
<div class="flex items-center mt-2">
<Check bind:check={$DataBase.useAdditionalAssetsPreview} name={language.useAdditionalAssetsPreview}/>
</div>
</div>
{#if $DataBase.useExperimental}
{#if $DataBase.useExperimental}
<div class="flex items-center mt-2">
<Check bind:check={$DataBase.useChatSticker} name={language.useChatSticker}/>
<Help key="experimental" name={language.useChatSticker}/>
</div>
{/if}
{/if}

8
src/lib/Setting/Pages/PersonaSettings.svelte
View File

@@ -14,7 +14,7 @@
</script>
<h2 class="mb-2 text-2xl font-bold mt-2">{language.persona}</h2>
<div class="p-4 rounded-md bg-darkbg flex-wrap flex gap-2">
<div class="p-4 rounded-md border-darkborderc border mb-2 flex-wrap flex gap-2">
{#each $DataBase.personas as persona, i}
<button on:click={() => {
changeUserPersona(i)
@@ -60,11 +60,7 @@
</div>
</div>
<div class="mt-4 mb-4 border-y-1 border-y-selected">
</div>
<div class="flex w-full items-starts rounded-md bg-darkbg p-4 max-w-full flex-wrap">
<div class="flex w-full items-starts rounded-md border-darkborderc border p-4 max-w-full flex-wrap">
<div class="flex flex-col mt-4 mr-4">
<button on:click={() => {selectUserImg()}}>
{#if $DataBase.userIcon === ''}

19
src/lib/Setting/Pages/PromptSettings.svelte
View File

@@ -15,10 +15,11 @@
let opened = 0
let warns: string[] = []
export let onGoBack: () => void = () => {}
export let mode: 'independent'|'inline' = 'independent'
let tokens = 0
let extokens = 0
executeTokenize($DataBase.promptTemplate)
let subMenu = 0
export let subMenu = 0
async function executeTokenize(prest: PromptItem[]){
tokens = await tokenizePreset(prest, true)
@@ -28,14 +29,15 @@
$: warns = templateCheck($DataBase)
$: executeTokenize($DataBase.promptTemplate)
</script>
<h2 class="mb-2 text-2xl font-bold mt-2 items-center flex">
{#if mode === 'independent'}
<h2 class="mb-2 text-2xl font-bold mt-2 items-center flex">
<button class="mr-2 text-textcolor2 hover:text-textcolor" on:click={onGoBack}>
<ArrowLeft />
</button>
{language.promptTemplate}
</h2>
<div class="flex w-full rounded-md border border-selected">
</h2>
<div class="flex w-full rounded-md border border-selected">
<button on:click={() => {
subMenu = 0
}} class="p-2 flex-1" class:bg-selected={subMenu === 0}>
@@ -46,9 +48,10 @@
}} class="p-2 flex-1" class:bg-selected={subMenu === 1}>
<span>{language.settings}</span>
</button>
</div>
{#if warns.length > 0}
<div class="text-red-500 flex flex-col items-start p-2 rounded-md border-red-500 border">
</div>
{/if}
{#if warns.length > 0 && subMenu === 0}
<div class="text-red-500 flex flex-col items-start p-2 rounded-md border-red-500 border mt-4">
<h2 class="text-xl font-bold">Warning</h2>
<div class="border-b border-b-red-500 mt-1 mb-2 w-full"></div>
{#each warns as warn}

5
src/lib/UI/GUI/SliderInput.svelte
View File

@@ -41,9 +41,9 @@
>
</div> -->
<span
class="absolute top-0 left-4 h-8 w-8 rounded-full items-center justify-center flex text-textcolor text-sm"
class="absolute top-0 left-4 h-8 rounded-full items-center justify-center flex text-textcolor text-sm"
>
{(value * multiple).toFixed(fixed)}
{customText === undefined ? (value * multiple).toFixed(fixed) : customText}
</span>
</div>
</div>
@@ -59,6 +59,7 @@
export let multiple = 1
let slider: HTMLDivElement
let mouseDown = false
export let customText: string|undefined = undefined
function changeValue(event) {
const rect = slider.getBoundingClientRect();