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?", doYouWantToUnbindCurrentPersona: "Do you want to unbind the persona from this chat?",
personaBindedSuccess: "Persona is successfully binded", personaBindedSuccess: "Persona is successfully binded",
personaUnbindedSuccess: "Persona is successfully unbinded", 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 Arcodion from "src/lib/UI/Arcodion.svelte";
import OpenrouterSettings from "./OpenrouterSettings.svelte"; import OpenrouterSettings from "./OpenrouterSettings.svelte";
import ChatFormatSettings from "./ChatFormatSettings.svelte"; import ChatFormatSettings from "./ChatFormatSettings.svelte";
import PromptSettings from "./PromptSettings.svelte";
let tokens = { let tokens = {
mainPrompt: 0, mainPrompt: 0,
@@ -40,70 +41,45 @@
tokens.globalNote = await tokenizeAccurate($DataBase.globalNote, true) 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'){ $: if($DataBase.aiModel === 'textgen_webui' || $DataBase.subModel === 'mancer'){
$DataBase.useStreaming = $DataBase.textgenWebUIStreamURL.startsWith("wss://") $DataBase.useStreaming = $DataBase.textgenWebUIStreamURL.startsWith("wss://")
} }
</script>
let submenu = 0
</script>
<h2 class="mb-2 text-2xl font-bold mt-2">{language.chatBot}</h2> <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={() => { <button on:click={() => {
$DataBase.advancedBotSettings = false submenu = 0
}} class="flex-1 border-solid p-2 flex justify-center cursor-pointer rounded-l-lg bg-darkbg" class:bg-darkbutton={!$DataBase.advancedBotSettings}> }} class="p-2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 0}>
<span>{language.simple}</span> <span>{language.model}</span>
</button> </button>
<button on:click={() => { <button on:click={() => {
$DataBase.advancedBotSettings = true submenu = 1
}} 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}> }} class="p2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 1}>
<span>{language.advanced}</span> <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> </button>
</div> </div>
{#if advancedBotSettings}
{#if submenu === 0 || submenu === -1}
<span class="text-textcolor mt-4">{language.model} <Help key="model"/></span> <span class="text-textcolor mt-4">{language.model} <Help key="model"/></span>
<ModelList bind:value={$DataBase.aiModel}/> <ModelList bind:value={$DataBase.aiModel}/>
<span class="text-textcolor mt-2">{language.submodel} <Help key="submodel"/></span> <span class="text-textcolor mt-2">{language.submodel} <Help key="submodel"/></span>
<ModelList bind:value={$DataBase.subModel}/> <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"> <span class="text-textcolor">
{#if $DataBase.google.projectId === 'aigoogle'} {#if $DataBase.google.projectId === 'aigoogle'}
GoogleAI API Key GoogleAI API Key
@@ -117,28 +93,28 @@
<span class="text-textcolor">Google Project ID</span> <span class="text-textcolor">Google Project ID</span>
<TextInput marginBottom={true} size={"sm"} placeholder="..." hideText bind:value={$DataBase.google.projectId}/> <TextInput marginBottom={true} size={"sm"} placeholder="..." hideText bind:value={$DataBase.google.projectId}/>
{/if} {/if}
{/if} {/if}
{#if $DataBase.aiModel.startsWith('novellist') || $DataBase.subModel.startsWith('novellist')} {#if $DataBase.aiModel.startsWith('novellist') || $DataBase.subModel.startsWith('novellist')}
<span class="text-textcolor">NovelList {language.apiKey}</span> <span class="text-textcolor">NovelList {language.apiKey}</span>
<TextInput hideText marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.novellistAPI}/> <TextInput hideText marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.novellistAPI}/>
{/if} {/if}
{#if $DataBase.aiModel.startsWith('mancer') || $DataBase.subModel.startsWith('mancer')} {#if $DataBase.aiModel.startsWith('mancer') || $DataBase.subModel.startsWith('mancer')}
<span class="text-textcolor">Mancer {language.apiKey}</span> <span class="text-textcolor">Mancer {language.apiKey}</span>
<TextInput hideText marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.mancerHeader}/> <TextInput hideText marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.mancerHeader}/>
{/if} {/if}
{#if $DataBase.aiModel.startsWith('claude-') || $DataBase.subModel.startsWith('claude-')} {#if $DataBase.aiModel.startsWith('claude-') || $DataBase.subModel.startsWith('claude-')}
<span class="text-textcolor">Claude {language.apiKey}</span> <span class="text-textcolor">Claude {language.apiKey}</span>
<TextInput hideText marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.claudeAPIKey}/> <TextInput hideText marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.claudeAPIKey}/>
{/if} {/if}
{#if $DataBase.aiModel.startsWith('mistral') || $DataBase.subModel.startsWith('mistral')} {#if $DataBase.aiModel.startsWith('mistral') || $DataBase.subModel.startsWith('mistral')}
<span class="text-textcolor">Mistral {language.apiKey}</span> <span class="text-textcolor">Mistral {language.apiKey}</span>
<TextInput hideText marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.mistralKey}/> <TextInput hideText marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.mistralKey}/>
{/if} {/if}
{#if $DataBase.aiModel.startsWith('novelai') || $DataBase.subModel.startsWith('novelai')} {#if $DataBase.aiModel.startsWith('novelai') || $DataBase.subModel.startsWith('novelai')}
<span class="text-textcolor">NovelAI Bearer Token</span> <span class="text-textcolor">NovelAI Bearer Token</span>
<TextInput bind:value={$DataBase.novelai.token}/> <TextInput bind:value={$DataBase.novelai.token}/>
{/if} {/if}
{#if $DataBase.aiModel === 'reverse_proxy' || $DataBase.subModel === 'reverse_proxy'} {#if $DataBase.aiModel === 'reverse_proxy' || $DataBase.subModel === 'reverse_proxy'}
<span class="text-textcolor mt-2">URL <Help key="forceUrl"/></span> <span class="text-textcolor mt-2">URL <Help key="forceUrl"/></span>
<TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.forceReplaceUrl} placeholder="https//..." /> <TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.forceReplaceUrl} placeholder="https//..." />
<span class="text-textcolor mt-4"> {language.proxyAPIKey}</span> <span class="text-textcolor mt-4"> {language.proxyAPIKey}</span>
@@ -176,23 +152,23 @@
{:else} {:else}
<div class="mb-4"></div> <div class="mb-4"></div>
{/if} {/if}
{/if} {/if}
{#if $DataBase.aiModel.startsWith('risullm')} {#if $DataBase.aiModel.startsWith('risullm')}
<span class="text-textcolor mt-4">Risu {language.apiKey}</span> <span class="text-textcolor mt-4">Risu {language.apiKey}</span>
<TextInput hideText marginBottom={false} size={"sm"} bind:value={$DataBase.proxyKey} /> <TextInput hideText marginBottom={false} size={"sm"} bind:value={$DataBase.proxyKey} />
{/if} {/if}
{#if $DataBase.aiModel.startsWith('cohere')} {#if $DataBase.aiModel.startsWith('cohere')}
<span class="text-textcolor mt-4">Cohere {language.apiKey}</span> <span class="text-textcolor mt-4">Cohere {language.apiKey}</span>
<TextInput hideText marginBottom={false} size={"sm"} bind:value={$DataBase.cohereAPIKey} /> <TextInput hideText marginBottom={false} size={"sm"} bind:value={$DataBase.cohereAPIKey} />
{/if} {/if}
{#if $DataBase.aiModel === 'ollama-hosted'} {#if $DataBase.aiModel === 'ollama-hosted'}
<span class="text-textcolor mt-4">Ollama URL</span> <span class="text-textcolor mt-4">Ollama URL</span>
<TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.ollamaURL} /> <TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.ollamaURL} />
<span class="text-textcolor mt-4">Ollama Model</span> <span class="text-textcolor mt-4">Ollama Model</span>
<TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.ollamaModel} /> <TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.ollamaModel} />
{/if} {/if}
{#if $DataBase.aiModel === 'openrouter' || $DataBase.subModel === 'openrouter'} {#if $DataBase.aiModel === 'openrouter' || $DataBase.subModel === 'openrouter'}
<span class="text-textcolor mt-4">Openrouter Key</span> <span class="text-textcolor mt-4">Openrouter Key</span>
<TextInput hideText marginBottom={false} size={"sm"} bind:value={$DataBase.openrouterKey} /> <TextInput hideText marginBottom={false} size={"sm"} bind:value={$DataBase.openrouterKey} />
@@ -223,23 +199,23 @@
{/if} {/if}
</SelectInput> </SelectInput>
{/await} {/await}
{/if} {/if}
{#if $DataBase.aiModel === 'openrouter' || $DataBase.aiModel === 'reverse_proxy'} {#if $DataBase.aiModel === 'openrouter' || $DataBase.aiModel === 'reverse_proxy'}
<span class="text-textcolor">{language.tokenizer}</span> <span class="text-textcolor">{language.tokenizer}</span>
<SelectInput bind:value={$DataBase.customTokenizer}> <SelectInput bind:value={$DataBase.customTokenizer}>
{#each tokenizerList as entry} {#each tokenizerList as entry}
<OptionInput value={entry[0]}>{entry[1]}</OptionInput> <OptionInput value={entry[0]}>{entry[1]}</OptionInput>
{/each} {/each}
</SelectInput> </SelectInput>
{/if} {/if}
{#if $DataBase.aiModel.startsWith('gpt') || $DataBase.subModel.startsWith('gpt') {#if $DataBase.aiModel.startsWith('gpt') || $DataBase.subModel.startsWith('gpt')
|| $DataBase.aiModel.startsWith('instructgpt') || $DataBase.subModel.startsWith('instructgpt')} || $DataBase.aiModel.startsWith('instructgpt') || $DataBase.subModel.startsWith('instructgpt')}
<span class="text-textcolor">OpenAI {language.apiKey} <Help key="oaiapikey"/></span> <span class="text-textcolor">OpenAI {language.apiKey} <Help key="oaiapikey"/></span>
<TextInput hideText marginBottom={false} size={"sm"} bind:value={$DataBase.openAIKey} placeholder="sk-XXXXXXXXXXXXXXXXXXXX"/> <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')} {#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}`}/> <Check bind:check={$DataBase.useStreaming} name={`Response ${language.streaming}`}/>
{/if} {/if}
@@ -265,9 +241,9 @@
<Check bind:check={$DataBase.NAIappendName} name={language.appendNameNAI}/> <Check bind:check={$DataBase.NAIappendName} name={language.appendNameNAI}/>
{/if} {/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> <span class="text-textcolor mt-2">{language.plugin}</span>
<SelectInput className="mt-2 mb-4" bind:value={$DataBase.currentPluginProvider}> <SelectInput className="mt-2 mb-4" bind:value={$DataBase.currentPluginProvider}>
<OptionInput value="">None</OptionInput> <OptionInput value="">None</OptionInput>
@@ -275,21 +251,21 @@
<OptionInput value={plugin}>{plugin}</OptionInput> <OptionInput value={plugin}>{plugin}</OptionInput>
{/each} {/each}
</SelectInput> </SelectInput>
{/if} {/if}
{#if $DataBase.aiModel === "kobold" || $DataBase.subModel === "kobold"} {#if $DataBase.aiModel === "kobold" || $DataBase.subModel === "kobold"}
<span class="text-textcolor">Kobold URL</span> <span class="text-textcolor">Kobold URL</span>
<TextInput marginBottom={true} bind:value={$DataBase.koboldURL} /> <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> <span class="text-textcolor">Horde {language.apiKey}</span>
<TextInput hideText marginBottom={true} bind:value={$DataBase.hordeConfig.apiKey} /> <TextInput hideText marginBottom={true} bind:value={$DataBase.hordeConfig.apiKey} />
{/if} {/if}
{#if $DataBase.aiModel === 'textgen_webui' || $DataBase.subModel === 'textgen_webui' {#if $DataBase.aiModel === 'textgen_webui' || $DataBase.subModel === 'textgen_webui'
|| $DataBase.aiModel === 'mancer' || $DataBase.subModel === 'mancer'} || $DataBase.aiModel === 'mancer' || $DataBase.subModel === 'mancer'}
<span class="text-textcolor mt-2">Blocking {language.providerURL}</span> <span class="text-textcolor mt-2">Blocking {language.providerURL}</span>
<TextInput marginBottom={true} bind:value={$DataBase.textgenWebUIBlockingURL} placeholder="https://..."/> <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> <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} {/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> <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}
{#if $DataBase.aiModel === 'ooba' || $DataBase.subModel === 'ooba'} {#if $DataBase.aiModel === 'ooba' || $DataBase.subModel === 'ooba'}
<span class="text-textcolor mt-2">Ooba {language.providerURL}</span> <span class="text-textcolor mt-2">Ooba {language.providerURL}</span>
<TextInput marginBottom={true} bind:value={$DataBase.textgenWebUIBlockingURL} placeholder="https://..."/> <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}
{#if submenu === 1 || submenu === -1}
<span class="text-textcolor">{language.maxContextSize}</span> <span class="text-textcolor">{language.maxContextSize}</span>
<NumberInput min={0} max={getModelMaxContext($DataBase.aiModel)} marginBottom={true} bind:value={$DataBase.maxContext}/> <NumberInput min={0} max={getModelMaxContext($DataBase.aiModel)} marginBottom={true} bind:value={$DataBase.maxContext}/>
@@ -325,23 +292,23 @@
<span class="text-textcolor">{language.maxResponseSize}</span> <span class="text-textcolor">{language.maxResponseSize}</span>
<NumberInput min={0} max={2048} marginBottom={true} bind:value={$DataBase.maxResponse}/> <NumberInput min={0} max={2048} marginBottom={true} bind:value={$DataBase.maxResponse}/>
{#if $DataBase.aiModel.startsWith('gpt') || $DataBase.aiModel === 'reverse_proxy' || $DataBase.aiModel === 'openrouter'} {#if $DataBase.aiModel.startsWith('gpt') || $DataBase.aiModel === 'reverse_proxy' || $DataBase.aiModel === 'openrouter'}
<span class="text-textcolor">{language.seed}</span> <span class="text-textcolor">{language.seed}</span>
<NumberInput bind:value={$DataBase.generationSeed} marginBottom={true}/> <NumberInput bind:value={$DataBase.generationSeed} marginBottom={true}/>
{/if} {/if}
<span class="text-textcolor">{language.temperature} <Help key="tempature"/></span> <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}/> <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}/> <SliderInput min={0} max={200} marginBottom bind:value={$DataBase.temperature} multiple={0.01} fixed={2}/>
{/if} {/if}
{#if $DataBase.aiModel.startsWith('openrouter') || $DataBase.aiModel.startsWith('claude-3') || $DataBase.aiModel.startsWith('cohere-')} {#if $DataBase.aiModel.startsWith('openrouter') || $DataBase.aiModel.startsWith('claude-3') || $DataBase.aiModel.startsWith('cohere-')}
<span class="text-textcolor">Top K</span> <span class="text-textcolor">Top K</span>
<SliderInput min={0} max={100} marginBottom step={1} bind:value={$DataBase.top_k}/> <SliderInput min={0} max={100} marginBottom step={1} bind:value={$DataBase.top_k}/>
{/if} {/if}
{#if $DataBase.aiModel.startsWith('openrouter')} {#if $DataBase.aiModel.startsWith('openrouter')}
<span class="text-textcolor">Repetition penalty</span> <span class="text-textcolor">Repetition penalty</span>
<SliderInput min={0} max={2} marginBottom step={0.01} fixed={2} bind:value={$DataBase.repetition_penalty}/> <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> <span class="text-textcolor">Top A</span>
<SliderInput min={0} max={1} marginBottom step={0.01} fixed={2} bind:value={$DataBase.top_a}/> <SliderInput min={0} max={1} marginBottom step={0.01} fixed={2} bind:value={$DataBase.top_a}/>
{/if} {/if}
{#if $DataBase.aiModel === 'textgen_webui' || $DataBase.aiModel === 'mancer' || $DataBase.aiModel.startsWith('local_') || $DataBase.aiModel.startsWith('hf:::')} {#if $DataBase.aiModel === 'textgen_webui' || $DataBase.aiModel === 'mancer' || $DataBase.aiModel.startsWith('local_') || $DataBase.aiModel.startsWith('hf:::')}
<span class="text-textcolor">Repetition Penalty</span> <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}/> <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> <span class="text-textcolor">Length Penalty</span>
@@ -418,7 +385,7 @@
</div> </div>
<Check bind:check={$DataBase.ooba.formating.useName} name={language.useNamePrefix}/> <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"> <div class="flex flex-col p-3 bg-darkbg mt-4">
<span class="text-textcolor">Starter</span> <span class="text-textcolor">Starter</span>
<TextInput bind:value={$DataBase.NAIsettings.starter} placeholder={'⁂'} /> <TextInput bind:value={$DataBase.NAIsettings.starter} placeholder={'⁂'} />
@@ -452,7 +419,7 @@
<span class="text-textcolor">Cfg Scale</span> <span class="text-textcolor">Cfg Scale</span>
<SliderInput min={1} max={3} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.cfg_scale}/> <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> <span class="text-textcolor">Top P</span>
<SliderInput min={0} max={2} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ainconfig.top_p}/> <SliderInput min={0} max={2} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ainconfig.top_p}/>
<span class="text-textcolor">Reputation Penalty</span> <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}/> <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ainconfig.top_a}/>
<span class="text-textcolor">Typical P</span> <span class="text-textcolor">Typical P</span>
<SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ainconfig.typical_p}/> <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> <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}/> <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> <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} /> <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> <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} /> <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}
{#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"> <Arcodion styled name="Bias " help="bias">
<table class="contain w-full max-w-full tabler"> <table class="contain w-full max-w-full tabler">
<tr> <tr>
@@ -576,14 +539,10 @@
{/if} {/if}
{#if !$DataBase.promptTemplate} <Arcodion styled name={language.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">
{#if $DataBase.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) const conf = await alertConfirm(language.resetPromptTemplateConfirm)
if(conf){ if(conf){
@@ -592,21 +551,41 @@
else{ else{
$DataBase.promptTemplate = $DataBase.promptTemplate $DataBase.promptTemplate = $DataBase.promptTemplate
} }
}}/> }}/>
{:else} {:else}
<Check check={false} name={language.usePromptTemplate} onChange={() => { <Check check={false} name={language.usePromptTemplate} onChange={() => {
$DataBase.promptTemplate = [] $DataBase.promptTemplate = []
}}/> }}/>
{/if} {/if}
</div> </Arcodion>
{#if ($DataBase.promptTemplate)}
<div class="mt-2">
<Button on:click={goPromptTemplate} size="sm">{language.promptTemplate}</Button>
</div>
{/if}
<Button on:click={() => {openPresetList = true}} className="mt-4">{language.presets}</Button> <Button on:click={() => {openPresetList = true}} className="mt-4">{language.presets}</Button>
{/if} {/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) => { const onSchemeInputChange = (e:Event) => {
changeColorScheme((e.target as HTMLInputElement).value) changeColorScheme((e.target as HTMLInputElement).value)
} }
let submenu = 0
</script> </script>
<h2 class="mb-2 text-2xl font-bold mt-2">{language.display}</h2> <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> {#if submenu === 0 || submenu === -1}
<SelectInput className="mt-2" bind:value={$DataBase.theme}> <span class="text-textcolor mt-4">{language.theme}</span>
<SelectInput className="mt-2" bind:value={$DataBase.theme}>
<OptionInput value="" >Standard Risu</OptionInput> <OptionInput value="" >Standard Risu</OptionInput>
<OptionInput value="waifu" >Waifulike</OptionInput> <OptionInput value="waifu" >Waifulike</OptionInput>
<OptionInput value="waifuMobile" >WaifuCut</OptionInput> <OptionInput value="waifuMobile" >WaifuCut</OptionInput>
</SelectInput> </SelectInput>
{#if $DataBase.theme === "waifu"} {#if $DataBase.theme === "waifu"}
<span class="text-textcolor mt-4">{language.waifuWidth}</span> <span class="text-textcolor mt-4">{language.waifuWidth}</span>
<SliderInput min={50} max={200} bind:value={$DataBase.waifuWidth} /> <SliderInput min={50} max={200} bind:value={$DataBase.waifuWidth} />
<span class="text-textcolor2 text-sm">{($DataBase.waifuWidth)}%</span> <span class="text-textcolor2 text-sm">{($DataBase.waifuWidth)}%</span>
@@ -37,18 +57,18 @@
<span class="text-textcolor mt-4">{language.waifuWidth2}</span> <span class="text-textcolor mt-4">{language.waifuWidth2}</span>
<SliderInput min={20} max={150} bind:value={$DataBase.waifuWidth2} /> <SliderInput min={20} max={150} bind:value={$DataBase.waifuWidth2} />
<span class="text-textcolor2 text-sm">{($DataBase.waifuWidth2)}%</span> <span class="text-textcolor2 text-sm">{($DataBase.waifuWidth2)}%</span>
{/if} {/if}
<span class="text-textcolor mt-4">{language.colorScheme}</span> <span class="text-textcolor mt-4">{language.colorScheme}</span>
<SelectInput className="mt-2" value={$DataBase.colorSchemeName} on:change={onSchemeInputChange}> <SelectInput className="mt-2" value={$DataBase.colorSchemeName} on:change={onSchemeInputChange}>
{#each colorSchemeList as scheme} {#each colorSchemeList as scheme}
<OptionInput value={scheme} >{scheme}</OptionInput> <OptionInput value={scheme} >{scheme}</OptionInput>
{/each} {/each}
<OptionInput value="custom" >Custom</OptionInput> <OptionInput value="custom" >Custom</OptionInput>
</SelectInput> </SelectInput>
{#if $DataBase.colorSchemeName === "custom"} {#if $DataBase.colorSchemeName === "custom"}
<div class="border border-darkborderc p-2 m-2 rounded-md"> <div class="border border-darkborderc p-2 m-2 rounded-md">
<SelectInput className="mt-2" value={$DataBase.colorScheme.type} on:change={updateColorScheme}> <SelectInput className="mt-2" value={$DataBase.colorScheme.type} on:change={updateColorScheme}>
<OptionInput value="light">Light</OptionInput> <OptionInput value="light">Light</OptionInput>
<OptionInput value="dark">Dark</OptionInput> <OptionInput value="dark">Dark</OptionInput>
@@ -101,17 +121,17 @@
<FolderUpIcon size={18}/> <FolderUpIcon size={18}/>
</button> </button>
</div> </div>
</div> </div>
{/if} {/if}
<span class="text-textcolor mt-4">{language.textColor}</span> <span class="text-textcolor mt-4">{language.textColor}</span>
<SelectInput className="mt-2" bind:value={$DataBase.textTheme} on:change={updateTextTheme}> <SelectInput className="mt-2" bind:value={$DataBase.textTheme} on:change={updateTextTheme}>
<OptionInput value="standard" >{language.classicRisu}</OptionInput> <OptionInput value="standard" >{language.classicRisu}</OptionInput>
<OptionInput value="highcontrast" >{language.highcontrast}</OptionInput> <OptionInput value="highcontrast" >{language.highcontrast}</OptionInput>
<OptionInput value="custom" >Custom</OptionInput> <OptionInput value="custom" >Custom</OptionInput>
</SelectInput> </SelectInput>
{#if $DataBase.textTheme === "custom"} {#if $DataBase.textTheme === "custom"}
<div class="flex items-center mt-2"> <div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.customTextTheme.FontColorStandard} on:input={updateTextTheme} /> <ColorInput bind:value={$DataBase.customTextTheme.FontColorStandard} on:input={updateTextTheme} />
<span class="ml-2">Normal Text</span> <span class="ml-2">Normal Text</span>
@@ -136,73 +156,72 @@
<ColorInput bind:value={$DataBase.customTextTheme.FontColorQuote2} on:input={updateTextTheme} /> <ColorInput bind:value={$DataBase.customTextTheme.FontColorQuote2} on:input={updateTextTheme} />
<span class="ml-2">Double Quote Text</span> <span class="ml-2">Double Quote Text</span>
</div> </div>
{/if} {/if}
<span class="text-textcolor mt-4">{language.font}</span> <span class="text-textcolor mt-4">{language.font}</span>
<SelectInput className="mt-2" bind:value={$DataBase.font} on:change={updateTextTheme}> <SelectInput className="mt-2" bind:value={$DataBase.font} on:change={updateTextTheme}>
<OptionInput value="default" >Default</OptionInput> <OptionInput value="default" >Default</OptionInput>
<OptionInput value="timesnewroman" >Times New Roman</OptionInput> <OptionInput value="timesnewroman" >Times New Roman</OptionInput>
<OptionInput value="custom" >Custom</OptionInput> <OptionInput value="custom" >Custom</OptionInput>
</SelectInput> </SelectInput>
{#if $DataBase.font === "custom"} {#if $DataBase.font === "custom"}
<TextInput bind:value={$DataBase.customFont} on:change={updateTextTheme} /> <TextInput bind:value={$DataBase.customFont} on:change={updateTextTheme} />
{/if}
{/if} {/if}
<span class="text-textcolor mt-4">{language.UISize}</span> {#if submenu === 1 || submenu === -1}
<SliderInput min={50} max={200} bind:value={$DataBase.zoomsize} />
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.zoomsize)}%</span>
<span class="text-textcolor mt-4">{language.lineHeight}</span> <span class="text-textcolor mt-4">{language.UISize}</span>
<SliderInput min={0.5} max={3} step={0.05} bind:value={$DataBase.lineHeight} /> <SliderInput min={50} max={200} bind:value={$DataBase.zoomsize} marginBottom/>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.lineHeight)}</span>
<span class="text-textcolor">{language.iconSize}</span> <span class="text-textcolor">{language.lineHeight}</span>
<SliderInput min={50} max={200} bind:value={$DataBase.iconsize} /> <SliderInput min={0.5} max={3} step={0.05} bind:value={$DataBase.lineHeight} marginBottom/>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.iconsize)}%</span>
<span class="text-textcolor">{language.textAreaSize}</span> <span class="text-textcolor">{language.iconSize}</span>
<SliderInput min={-5} max={5} bind:value={$DataBase.textAreaSize} on:change={updateGuisize} /> <SliderInput min={50} max={200} bind:value={$DataBase.iconsize} marginBottom/>
<span class="text-textcolor2 mb-6 text-sm">{guiSizeText($DataBase.textAreaSize)}</span>
<span class="text-textcolor">{language.textAreaTextSize}</span> <span class="text-textcolor">{language.textAreaSize}</span>
<SliderInput min={0} max={3} bind:value={$DataBase.textAreaTextSize} on:change={updateGuisize} /> <SliderInput min={-5} max={5} bind:value={$DataBase.textAreaSize} on:change={updateGuisize} customText={guiSizeText($DataBase.textAreaSize)} marginBottom/>
<span class="text-textcolor2 mb-6 text-sm">{guiSizeText($DataBase.textAreaTextSize)}</span>
<span class="text-textcolor">{language.sideBarSize}</span> <span class="text-textcolor">{language.textAreaTextSize}</span>
<SliderInput min={0} max={3} bind:value={$DataBase.sideBarSize} on:change={updateGuisize} /> <SliderInput min={0} max={3} bind:value={$DataBase.textAreaTextSize} on:change={updateGuisize} customText={guiSizeText($DataBase.textAreaTextSize)} marginBottom/>
<span class="text-textcolor2 mb-6 text-sm">{guiSizeText($DataBase.sideBarSize)}</span>
<span class="text-textcolor">{language.assetWidth}</span> <span class="text-textcolor">{language.sideBarSize}</span>
<SliderInput min={-1} max={40} step={1} bind:value={$DataBase.assetWidth} /> <SliderInput min={0} max={3} bind:value={$DataBase.sideBarSize} on:change={updateGuisize} customText={guiSizeText($DataBase.sideBarSize)} marginBottom/>
<span class="text-textcolor2 mb-6 text-sm">{
<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 === -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> {#if $DataBase.showMemoryLimit}
<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}
<span class="text-textcolor">{language.memoryLimitThickness}</span> <span class="text-textcolor">{language.memoryLimitThickness}</span>
<SliderInput min={1} max={500} step={1} bind:value={$DataBase.memoryLimitThickness} /> <SliderInput min={1} max={500} step={1} bind:value={$DataBase.memoryLimitThickness} marginBottom />
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.memoryLimitThickness)}px</span> {/if}
{/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}/> <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}/> <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}/> <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) => { <Check check={$DataBase.customBackground !== ''} onChange={async (check) => {
if(check){ if(check){
$DataBase.customBackground = '-' $DataBase.customBackground = '-'
@@ -218,22 +237,22 @@
$DataBase.customBackground = '' $DataBase.customBackground = ''
} }
}} name={language.useCustomBackground}></Check> }} 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}/> <Check bind:check={$DataBase.playMessage} name={language.playMessage}/>
<span> <Help key="msgSound" name={language.playMessage}/></span> <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}/> <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}/> <Check bind:check={$DataBase.useAdvancedEditor} name={language.useAdvancedEditor}/>
</div> </div>
{#if $DataBase.textScreenColor} {#if $DataBase.textScreenColor}
<div class="flex items-center mt-2"> <div class="flex items-center mt-2">
<Check check={true} onChange={() => { <Check check={true} onChange={() => {
$DataBase.textScreenColor = null $DataBase.textScreenColor = null
@@ -241,7 +260,7 @@
<input type="color" class="style2 text-sm mr-2" bind:value={$DataBase.textScreenColor} > <input type="color" class="style2 text-sm mr-2" bind:value={$DataBase.textScreenColor} >
<span>{language.textBackgrounds}</span> <span>{language.textBackgrounds}</span>
</div> </div>
{:else} {:else}
<div class="flex items-center mt-2"> <div class="flex items-center mt-2">
<Check check={false} onChange={() => { <Check check={false} onChange={() => {
$DataBase.textScreenColor = "#121212" $DataBase.textScreenColor = "#121212"
@@ -249,18 +268,18 @@
</div> </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}/> <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}/> <Check bind:check={$DataBase.textScreenRounded} name={language.textScreenRound}/>
</div> </div>
{#if $DataBase.textScreenBorder} {#if $DataBase.textScreenBorder}
<div class="flex items-center mt-2"> <div class="flex items-center mt-2">
<Check check={true} onChange={() => { <Check check={true} onChange={() => {
$DataBase.textScreenBorder = null $DataBase.textScreenBorder = null
@@ -268,25 +287,27 @@
<input type="color" class="style2 text-sm mr-2" bind:value={$DataBase.textScreenBorder} > <input type="color" class="style2 text-sm mr-2" bind:value={$DataBase.textScreenBorder} >
<span>{language.textScreenBorder}</span> <span>{language.textScreenBorder}</span>
</div> </div>
{:else} {:else}
<div class="flex items-center mt-2"> <div class="flex items-center mt-2">
<Check check={false} onChange={() => { <Check check={false} onChange={() => {
$DataBase.textScreenBorder = "#121212" $DataBase.textScreenBorder = "#121212"
}} name={language.textScreenBorder}/> }} name={language.textScreenBorder}/>
</div> </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}/> <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}/> <Check bind:check={$DataBase.useAdditionalAssetsPreview} name={language.useAdditionalAssetsPreview}/>
</div> </div>
{#if $DataBase.useExperimental} {#if $DataBase.useExperimental}
<div class="flex items-center mt-2"> <div class="flex items-center mt-2">
<Check bind:check={$DataBase.useChatSticker} name={language.useChatSticker}/> <Check bind:check={$DataBase.useChatSticker} name={language.useChatSticker}/>
<Help key="experimental" name={language.useChatSticker}/> <Help key="experimental" name={language.useChatSticker}/>
</div> </div>
{/if}
{/if} {/if}

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

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

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

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

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

@@ -41,9 +41,9 @@
> >
</div> --> </div> -->
<span <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> </span>
</div> </div>
</div> </div>
@@ -59,6 +59,7 @@
export let multiple = 1 export let multiple = 1
let slider: HTMLDivElement let slider: HTMLDivElement
let mouseDown = false let mouseDown = false
export let customText: string|undefined = undefined
function changeValue(event) { function changeValue(event) {
const rect = slider.getBoundingClientRect(); const rect = slider.getBoundingClientRect();