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",
} }

845
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,284 +41,250 @@
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')}
<span class="text-textcolor">
{#if $DataBase.google.projectId === 'aigoogle'}
GoogleAI API Key
{:else}
Google Bearer Token
{/if}
</span>
<TextInput marginBottom={true} size={"sm"} placeholder="..." hideText bind:value={$DataBase.google.accessToken}/>
{#if $DataBase.google.projectId !== 'aigoogle'}
<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')}
<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')}
<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-')}
<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')}
<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')}
<span class="text-textcolor">NovelAI Bearer Token</span>
<TextInput bind:value={$DataBase.novelai.token}/>
{/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>
<TextInput hideText marginBottom={false} size={"sm"} placeholder="leave it blank if it hasn't password" bind:value={$DataBase.proxyKey} />
<span class="text-textcolor mt-4"> {language.proxyRequestModel}</span>
<SelectInput className="mt-2" bind:value={$DataBase.proxyRequestModel}>
<OptionInput value="">None</OptionInput>
<OptionInput value="gpt35">GPT 3.5</OptionInput>
<OptionInput value="gpt35_16k">GPT 3.5 16k</OptionInput>
<OptionInput value="gpt4">GPT-4</OptionInput>
<OptionInput value="gpt4o">GPT-4o</OptionInput>
<OptionInput value="gpt4_32k">GPT-4 32k</OptionInput>
<OptionInput value="gpt4_turbo">GPT-4 Turbo</OptionInput>
<OptionInput value="gpt4_1106">GPT-4 Turbo 1106</OptionInput>
<OptionInput value="gptvi4_1106">GPT-4 Turbo 1106 Vision</OptionInput>
<OptionInput value="gpt35_0301">GPT-3.5 0301</OptionInput>
<OptionInput value="gpt4_0301">GPT-4 0301</OptionInput>
<OptionInput value="gpt35_0613">GPT-3.5 0613</OptionInput>
<OptionInput value="gpt4_0613">GPT-4 0613</OptionInput>
<OptionInput value="claude-2.1">claude-2.1</OptionInput>
<OptionInput value="claude-2.0">claude-2.0</OptionInput>
<OptionInput value="claude-2">claude-2</OptionInput>
<OptionInput value="claude-v1.3">claude-v1.3</OptionInput>
<OptionInput value="claude-v1.3-100k">claude-v1.3-100k</OptionInput>
<OptionInput value="claude-v1.2">claude-v1.2</OptionInput>
<OptionInput value="claude-instant-v1.1">claude-instant-v1.1</OptionInput>
<OptionInput value="claude-instant-v1.1-100k">claude-instant-v1.1-100k</OptionInput>
<OptionInput value="claude-3-opus-20240229">claude-3-opus-20240229</OptionInput>
<OptionInput value="claude-3-sonnet-20240229">claude-3-sonnet-20240229</OptionInput>
<OptionInput value="claude-3-5-sonnet-20240620">claude-3-5-sonnet-20240620</OptionInput>
<OptionInput value="custom">Custom</OptionInput>
</SelectInput>
{#if $DataBase.proxyRequestModel === 'custom'}
<TextInput marginBottom={true} size={"sm"} bind:value={$DataBase.customProxyRequestModel} placeholder="Name" />
{:else}
<div class="mb-4"></div>
{/if}
{/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')}
<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'}
<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'}
<span class="text-textcolor mt-4">Openrouter Key</span>
<TextInput hideText marginBottom={false} size={"sm"} bind:value={$DataBase.openrouterKey} />
<span class="text-textcolor mt-4">Openrouter Model</span>
{#await openRouterModels()}
<SelectInput className="mt-2 mb-4" value="">
<OptionInput value="">Loading..</OptionInput>
</SelectInput>
{:then m}
<SelectInput className="mt-2 mb-4" bind:value={$DataBase.openrouterRequestModel}>
{#if (!m) || (m.length === 0)}
<OptionInput value="openai/gpt-3.5-turbo">GPT 3.5</OptionInput>
<OptionInput value="openai/gpt-3.5-turbo-16k">GPT 3.5 16k</OptionInput>
<OptionInput value="openai/gpt-4">GPT-4</OptionInput>
<OptionInput value="openai/gpt-4-32k">GPT-4 32k</OptionInput>
<OptionInput value="anthropic/claude-2">Claude 2</OptionInput>
<OptionInput value="anthropic/claude-instant-v1">Claude Instant v1</OptionInput>
<OptionInput value="anthropic/claude-instant-v1-100k">Claude Instant v1 100k</OptionInput>
<OptionInput value="anthropic/claude-v1">Claude v1</OptionInput>
<OptionInput value="anthropic/claude-v1-100k">Claude v1 100k</OptionInput>
<OptionInput value="anthropic/claude-1.2">Claude v1.2</OptionInput>
{:else}
<OptionInput value={"risu/free"}>Free Auto</OptionInput>
<OptionInput value={"openrouter/auto"}>Openrouter Auto</OptionInput>
{#each m as model}
<OptionInput value={model.id}>{model.name}</OptionInput>
{/each}
{/if}
</SelectInput>
{/await}
{/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')
|| $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}
<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}
{#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')}
<Check check={$DataBase.google.projectId !== 'aigoogle'} name={'Use Vertex AI'} onChange={(v) => { <span class="text-textcolor">
if(!v){ {#if $DataBase.google.projectId === 'aigoogle'}
$DataBase.google.projectId = 'aigoogle' GoogleAI API Key
} {:else}
else{ Google Bearer Token
$DataBase.google.projectId = '' {/if}
} </span>
}}/> <TextInput marginBottom={true} size={"sm"} placeholder="..." hideText bind:value={$DataBase.google.accessToken}/>
{#if $DataBase.google.projectId !== 'aigoogle'}
<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')}
<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')}
<span class="text-textcolor">Mancer {language.apiKey}</span>
<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-')}
<Check name="AWS Claude" bind:check={$DataBase.claudeAws}></Check> <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')}
<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')}
<span class="text-textcolor">NovelAI Bearer Token</span>
<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'}
<Check bind:check={$DataBase.reverseProxyOobaMode} name={`${language.reverseProxyOobaMode}`}/> <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>
<TextInput hideText marginBottom={false} size={"sm"} placeholder="leave it blank if it hasn't password" bind:value={$DataBase.proxyKey} />
<span class="text-textcolor mt-4"> {language.proxyRequestModel}</span>
<SelectInput className="mt-2" bind:value={$DataBase.proxyRequestModel}>
<OptionInput value="">None</OptionInput>
<OptionInput value="gpt35">GPT 3.5</OptionInput>
<OptionInput value="gpt35_16k">GPT 3.5 16k</OptionInput>
<OptionInput value="gpt4">GPT-4</OptionInput>
<OptionInput value="gpt4o">GPT-4o</OptionInput>
<OptionInput value="gpt4_32k">GPT-4 32k</OptionInput>
<OptionInput value="gpt4_turbo">GPT-4 Turbo</OptionInput>
<OptionInput value="gpt4_1106">GPT-4 Turbo 1106</OptionInput>
<OptionInput value="gptvi4_1106">GPT-4 Turbo 1106 Vision</OptionInput>
<OptionInput value="gpt35_0301">GPT-3.5 0301</OptionInput>
<OptionInput value="gpt4_0301">GPT-4 0301</OptionInput>
<OptionInput value="gpt35_0613">GPT-3.5 0613</OptionInput>
<OptionInput value="gpt4_0613">GPT-4 0613</OptionInput>
<OptionInput value="claude-2.1">claude-2.1</OptionInput>
<OptionInput value="claude-2.0">claude-2.0</OptionInput>
<OptionInput value="claude-2">claude-2</OptionInput>
<OptionInput value="claude-v1.3">claude-v1.3</OptionInput>
<OptionInput value="claude-v1.3-100k">claude-v1.3-100k</OptionInput>
<OptionInput value="claude-v1.2">claude-v1.2</OptionInput>
<OptionInput value="claude-instant-v1.1">claude-instant-v1.1</OptionInput>
<OptionInput value="claude-instant-v1.1-100k">claude-instant-v1.1-100k</OptionInput>
<OptionInput value="claude-3-opus-20240229">claude-3-opus-20240229</OptionInput>
<OptionInput value="claude-3-sonnet-20240229">claude-3-sonnet-20240229</OptionInput>
<OptionInput value="claude-3-5-sonnet-20240620">claude-3-5-sonnet-20240620</OptionInput>
<OptionInput value="custom">Custom</OptionInput>
</SelectInput>
{#if $DataBase.proxyRequestModel === 'custom'}
<TextInput marginBottom={true} size={"sm"} bind:value={$DataBase.customProxyRequestModel} placeholder="Name" />
{:else}
<div class="mb-4"></div>
{/if}
{/if} {/if}
{#if $DataBase.aiModel === "novelai" || $DataBase.subModel === "novelai" || $DataBase.aiModel === 'novelai_kayra' || $DataBase.subModel === 'novelai_kayra'} {#if $DataBase.aiModel.startsWith('risullm')}
<Check bind:check={$DataBase.NAIadventure} name={language.textAdventureNAI}/> <span class="text-textcolor mt-4">Risu {language.apiKey}</span>
<TextInput hideText marginBottom={false} size={"sm"} bind:value={$DataBase.proxyKey} />
<Check bind:check={$DataBase.NAIappendName} name={language.appendNameNAI}/>
{/if} {/if}
</div> {#if $DataBase.aiModel.startsWith('cohere')}
<span class="text-textcolor mt-4">Cohere {language.apiKey}</span>
{#if $DataBase.aiModel === 'custom' || $DataBase.subModel === 'custom'} <TextInput hideText marginBottom={false} size={"sm"} bind:value={$DataBase.cohereAPIKey} />
<span class="text-textcolor mt-2">{language.plugin}</span>
<SelectInput className="mt-2 mb-4" bind:value={$DataBase.currentPluginProvider}>
<OptionInput value="">None</OptionInput>
{#each $customProviderStore as plugin}
<OptionInput value={plugin}>{plugin}</OptionInput>
{/each}
</SelectInput>
{/if}
{#if $DataBase.aiModel === "kobold" || $DataBase.subModel === "kobold"}
<span class="text-textcolor">Kobold URL</span>
<TextInput marginBottom={true} bind:value={$DataBase.koboldURL} />
{/if}
{#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'
|| $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://..."/>
<span class="text-draculared text-xs mb-2">You must use textgen webui with --public-api</span>
<span class="text-textcolor mt-2">Stream {language.providerURL}</span>
<TextInput marginBottom={true} bind:value={$DataBase.textgenWebUIStreamURL} placeholder="wss://..."/>
{#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} {/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 $DataBase.aiModel === 'ollama-hosted'}
{/if} <span class="text-textcolor mt-4">Ollama URL</span>
{#if $DataBase.aiModel === 'ooba' || $DataBase.subModel === 'ooba'} <TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.ollamaURL} />
<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}
<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'}
<span class="text-textcolor mt-4">Openrouter Key</span>
<TextInput hideText marginBottom={false} size={"sm"} bind:value={$DataBase.openrouterKey} />
<span class="text-textcolor mt-4">Openrouter Model</span>
{#await openRouterModels()}
<SelectInput className="mt-2 mb-4" value="">
<OptionInput value="">Loading..</OptionInput>
</SelectInput>
{:then m}
<SelectInput className="mt-2 mb-4" bind:value={$DataBase.openrouterRequestModel}>
{#if (!m) || (m.length === 0)}
<OptionInput value="openai/gpt-3.5-turbo">GPT 3.5</OptionInput>
<OptionInput value="openai/gpt-3.5-turbo-16k">GPT 3.5 16k</OptionInput>
<OptionInput value="openai/gpt-4">GPT-4</OptionInput>
<OptionInput value="openai/gpt-4-32k">GPT-4 32k</OptionInput>
<OptionInput value="anthropic/claude-2">Claude 2</OptionInput>
<OptionInput value="anthropic/claude-instant-v1">Claude Instant v1</OptionInput>
<OptionInput value="anthropic/claude-instant-v1-100k">Claude Instant v1 100k</OptionInput>
<OptionInput value="anthropic/claude-v1">Claude v1</OptionInput>
<OptionInput value="anthropic/claude-v1-100k">Claude v1 100k</OptionInput>
<OptionInput value="anthropic/claude-1.2">Claude v1.2</OptionInput>
{:else}
<OptionInput value={"risu/free"}>Free Auto</OptionInput>
<OptionInput value={"openrouter/auto"}>Openrouter Auto</OptionInput>
{#each m as model}
<OptionInput value={model.id}>{model.name}</OptionInput>
{/each}
{/if}
</SelectInput>
{/await}
{/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')
|| $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}
<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}
{#if $DataBase.aiModel.startsWith('palm2') || $DataBase.subModel.startsWith('palm2') || $DataBase.aiModel.startsWith('gemini') || $DataBase.subModel.startsWith('gemini')}
<Check check={$DataBase.google.projectId !== 'aigoogle'} name={'Use Vertex AI'} onChange={(v) => {
if(!v){
$DataBase.google.projectId = 'aigoogle'
}
else{
$DataBase.google.projectId = ''
}
}}/>
{/if}
{#if $DataBase.aiModel.startsWith('claude-') || $DataBase.subModel.startsWith('claude-')}
<Check name="AWS Claude" bind:check={$DataBase.claudeAws}></Check>
{/if}
{#if $DataBase.aiModel === 'reverse_proxy' || $DataBase.subModel === 'reverse_proxy'}
<Check bind:check={$DataBase.reverseProxyOobaMode} name={`${language.reverseProxyOobaMode}`}/>
{/if}
{#if $DataBase.aiModel === "novelai" || $DataBase.subModel === "novelai" || $DataBase.aiModel === 'novelai_kayra' || $DataBase.subModel === 'novelai_kayra'}
<Check bind:check={$DataBase.NAIadventure} name={language.textAdventureNAI}/>
<Check bind:check={$DataBase.NAIappendName} name={language.appendNameNAI}/>
{/if}
</div>
{#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>
{#each $customProviderStore as plugin}
<OptionInput value={plugin}>{plugin}</OptionInput>
{/each}
</SelectInput>
{/if}
{#if $DataBase.aiModel === "kobold" || $DataBase.subModel === "kobold"}
<span class="text-textcolor">Kobold URL</span>
<TextInput marginBottom={true} bind:value={$DataBase.koboldURL} />
{/if}
{#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'
|| $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://..."/>
<span class="text-draculared text-xs mb-2">You must use textgen webui with --public-api</span>
<span class="text-textcolor mt-2">Stream {language.providerURL}</span>
<TextInput marginBottom={true} bind:value={$DataBase.textgenWebUIStreamURL} placeholder="wss://..."/>
{#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}
<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'}
<span class="text-textcolor mt-2">Ooba {language.providerURL}</span>
<TextInput marginBottom={true} bind:value={$DataBase.textgenWebUIBlockingURL} placeholder="https://..."/>
{/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,178 +292,174 @@
<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}/>
<span class="text-textcolor">Min P</span> <span class="text-textcolor">Min P</span>
<SliderInput min={0} max={1} marginBottom step={0.01} fixed={2} bind:value={$DataBase.min_p}/> <SliderInput min={0} max={1} marginBottom step={0.01} fixed={2} bind:value={$DataBase.min_p}/>
<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>
<SliderInput min={-5} max={5} step={0.05} marginBottom fixed={2} bind:value={$DataBase.ooba.length_penalty}/> <SliderInput min={-5} max={5} step={0.05} marginBottom fixed={2} bind:value={$DataBase.ooba.length_penalty}/>
<span class="text-textcolor">Top K</span> <span class="text-textcolor">Top K</span>
<SliderInput min={0} max={100} step={1} marginBottom bind:value={$DataBase.ooba.top_k} /> <SliderInput min={0} max={100} step={1} marginBottom bind:value={$DataBase.ooba.top_k} />
<span class="text-textcolor">Top P</span> <span class="text-textcolor">Top P</span>
<SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ooba.top_p}/> <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ooba.top_p}/>
<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.ooba.typical_p}/> <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ooba.typical_p}/>
<span class="text-textcolor">Top A</span> <span class="text-textcolor">Top A</span>
<SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ooba.top_a}/> <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ooba.top_a}/>
<span class="text-textcolor">No Repeat n-gram Size</span> <span class="text-textcolor">No Repeat n-gram Size</span>
<SliderInput min={0} max={20} step={1} marginBottom bind:value={$DataBase.ooba.no_repeat_ngram_size}/> <SliderInput min={0} max={20} step={1} marginBottom bind:value={$DataBase.ooba.no_repeat_ngram_size}/>
<div class="flex items-center mt-4"> <div class="flex items-center mt-4">
<Check bind:check={$DataBase.ooba.do_sample} name={'Do Sample'}/> <Check bind:check={$DataBase.ooba.do_sample} name={'Do Sample'}/>
</div>
<div class="flex items-center mt-4">
<Check bind:check={$DataBase.ooba.add_bos_token} name={'Add BOS Token'}/>
</div>
<div class="flex items-center mt-4">
<Check bind:check={$DataBase.ooba.ban_eos_token} name={'Ban EOS Token'}/>
</div>
<div class="flex items-center mt-4">
<Check bind:check={$DataBase.ooba.skip_special_tokens} name={'Skip Special Tokens'}/>
</div>
<div class="flex items-center mt-4">
<Check check={!!$DataBase.localStopStrings} name={language.customStopWords} onChange={() => {
if(!$DataBase.localStopStrings){
$DataBase.localStopStrings = []
}
else{
$DataBase.localStopStrings = null
}
}} />
</div>
{#if $DataBase.localStopStrings}
<div class="flex flex-col p-2 rounded border border-selected mt-2 gap-1">
<div class="p-2">
<button class="font-medium flex justify-center items-center h-full cursor-pointer hover:text-green-500 w-full" on:click={() => {
let localStopStrings = $DataBase.localStopStrings
localStopStrings.push('')
$DataBase.localStopStrings = localStopStrings
}}><PlusIcon /></button>
</div>
{#each $DataBase.localStopStrings as stopString, i}
<div class="flex w-full">
<div class="flex-grow">
<TextInput marginBottom bind:value={$DataBase.localStopStrings[i]} fullwidth fullh/>
</div>
<div>
<button class="font-medium flex justify-center items-center h-full cursor-pointer hover:text-green-500 w-full" on:click={() => {
let localStopStrings = $DataBase.localStopStrings
localStopStrings.splice(i, 1)
$DataBase.localStopStrings = localStopStrings
}}><TrashIcon /></button>
</div>
</div>
{/each}
</div> </div>
<div class="flex items-center mt-4">
<Check bind:check={$DataBase.ooba.add_bos_token} name={'Add BOS Token'}/>
</div>
<div class="flex items-center mt-4">
<Check bind:check={$DataBase.ooba.ban_eos_token} name={'Ban EOS Token'}/>
</div>
<div class="flex items-center mt-4">
<Check bind:check={$DataBase.ooba.skip_special_tokens} name={'Skip Special Tokens'}/>
</div>
<div class="flex items-center mt-4">
<Check check={!!$DataBase.localStopStrings} name={language.customStopWords} onChange={() => {
if(!$DataBase.localStopStrings){
$DataBase.localStopStrings = []
}
else{
$DataBase.localStopStrings = null
}
}} />
</div>
{#if $DataBase.localStopStrings}
<div class="flex flex-col p-2 rounded border border-selected mt-2 gap-1">
<div class="p-2">
<button class="font-medium flex justify-center items-center h-full cursor-pointer hover:text-green-500 w-full" on:click={() => {
let localStopStrings = $DataBase.localStopStrings
localStopStrings.push('')
$DataBase.localStopStrings = localStopStrings
}}><PlusIcon /></button>
</div>
{#each $DataBase.localStopStrings as stopString, i}
<div class="flex w-full">
<div class="flex-grow">
<TextInput marginBottom bind:value={$DataBase.localStopStrings[i]} fullwidth fullh/>
</div>
<div>
<button class="font-medium flex justify-center items-center h-full cursor-pointer hover:text-green-500 w-full" on:click={() => {
let localStopStrings = $DataBase.localStopStrings
localStopStrings.splice(i, 1)
$DataBase.localStopStrings = localStopStrings
}}><TrashIcon /></button>
</div>
</div>
{/each}
</div>
{/if}
<div class="flex flex-col p-3 rounded-md border-selected border mt-4">
<ChatFormatSettings />
</div>
<Check bind:check={$DataBase.ooba.formating.useName} name={language.useNamePrefix}/>
{: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={'⁂'} />
<span class="text-textcolor">Seperator</span>
<TextInput bind:value={$DataBase.NAIsettings.seperator} placeholder={"\\n"}/>
</div>
<span class="text-textcolor">Top P</span>
<SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.topP}/>
<span class="text-textcolor">Top K</span>
<SliderInput min={0} max={100} step={1} marginBottom bind:value={$DataBase.NAIsettings.topK}/>
<span class="text-textcolor">Top A</span>
<SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.topA}/>
<span class="text-textcolor">Tailfree Sampling</span>
<SliderInput min={0} max={1} step={0.001} marginBottom fixed={3} bind:value={$DataBase.NAIsettings.tailFreeSampling}/>
<span class="text-textcolor">Typical P</span>
<SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.typicalp}/>
<span class="text-textcolor">Repetition Penalty</span>
<SliderInput min={0} max={3} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.repetitionPenalty}/>
<span class="text-textcolor">Repetition Penalty Range</span>
<SliderInput min={0} max={8192} step={1} marginBottom fixed={0} bind:value={$DataBase.NAIsettings.repetitionPenaltyRange}/>
<span class="text-textcolor">Repetition Penalty Slope</span>
<SliderInput min={0} max={10} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.repetitionPenaltySlope}/>
<span class="text-textcolor">Frequency Penalty</span>
<SliderInput min={-2} max={2} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.frequencyPenalty}/>
<span class="text-textcolor">Presence Penalty</span>
<SliderInput min={-2} max={2} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.presencePenalty}/>
<span class="text-textcolor">Mirostat LR</span>
<SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.mirostat_lr}/>
<span class="text-textcolor">Mirostat Tau</span>
<SliderInput min={0} max={6} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.mirostat_tau}/>
<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')}
<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>
<SliderInput min={0} max={2} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ainconfig.rep_pen}/>
<span class="text-textcolor">Reputation Penalty Range</span>
<SliderInput min={0} max={2048} step={1} marginBottom fixed={2} bind:value={$DataBase.ainconfig.rep_pen_range}/>
<span class="text-textcolor">Reputation Penalty Slope</span>
<SliderInput min={0} max={10} step={0.1} marginBottom fixed={2} bind:value={$DataBase.ainconfig.rep_pen_slope}/>
<span class="text-textcolor">Top K</span>
<SliderInput min={1} max={500} step={1} marginBottom fixed={2} bind:value={$DataBase.ainconfig.top_k}/>
<span class="text-textcolor">Top A</span>
<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')}
<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}
<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}/>
<span class="text-textcolor">{language.frequencyPenalty} <Help key="frequencyPenalty"/></span>
<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}
<div class="flex flex-col p-3 rounded-md border-selected border mt-4">
<ChatFormatSettings />
</div>
<Check bind:check={$DataBase.ooba.formating.useName} name={language.useNamePrefix}/>
{:else if $DataBase.aiModel.startsWith('novelai')} {#if ($DataBase.reverseProxyOobaMode && $DataBase.aiModel === 'reverse_proxy') || ($DataBase.aiModel === 'ooba')}
<div class="flex flex-col p-3 bg-darkbg mt-4"> <OobaSettings instructionMode={$DataBase.aiModel === 'ooba'} />
<span class="text-textcolor">Starter</span>
<TextInput bind:value={$DataBase.NAIsettings.starter} placeholder={'⁂'} />
<span class="text-textcolor">Seperator</span>
<TextInput bind:value={$DataBase.NAIsettings.seperator} placeholder={"\\n"}/>
</div>
<span class="text-textcolor">Top P</span>
<SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.topP}/>
<span class="text-textcolor">Top K</span>
<SliderInput min={0} max={100} step={1} marginBottom bind:value={$DataBase.NAIsettings.topK}/>
<span class="text-textcolor">Top A</span>
<SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.topA}/>
<span class="text-textcolor">Tailfree Sampling</span>
<SliderInput min={0} max={1} step={0.001} marginBottom fixed={3} bind:value={$DataBase.NAIsettings.tailFreeSampling}/>
<span class="text-textcolor">Typical P</span>
<SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.typicalp}/>
<span class="text-textcolor">Repetition Penalty</span>
<SliderInput min={0} max={3} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.repetitionPenalty}/>
<span class="text-textcolor">Repetition Penalty Range</span>
<SliderInput min={0} max={8192} step={1} marginBottom fixed={0} bind:value={$DataBase.NAIsettings.repetitionPenaltyRange}/>
<span class="text-textcolor">Repetition Penalty Slope</span>
<SliderInput min={0} max={10} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.repetitionPenaltySlope}/>
<span class="text-textcolor">Frequency Penalty</span>
<SliderInput min={-2} max={2} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.frequencyPenalty}/>
<span class="text-textcolor">Presence Penalty</span>
<SliderInput min={-2} max={2} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.presencePenalty}/>
<span class="text-textcolor">Mirostat LR</span>
<SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.mirostat_lr}/>
<span class="text-textcolor">Mirostat Tau</span>
<SliderInput min={0} max={6} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.mirostat_tau}/>
<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')}
<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>
<SliderInput min={0} max={2} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ainconfig.rep_pen}/>
<span class="text-textcolor">Reputation Penalty Range</span>
<SliderInput min={0} max={2048} step={1} marginBottom fixed={2} bind:value={$DataBase.ainconfig.rep_pen_range}/>
<span class="text-textcolor">Reputation Penalty Slope</span>
<SliderInput min={0} max={10} step={0.1} marginBottom fixed={2} bind:value={$DataBase.ainconfig.rep_pen_slope}/>
<span class="text-textcolor">Top K</span>
<SliderInput min={1} max={500} step={1} marginBottom fixed={2} bind:value={$DataBase.ainconfig.top_k}/>
<span class="text-textcolor">Top A</span>
<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')}
<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}
<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}/>
<span class="text-textcolor">{language.frequencyPenalty} <Help key="frequencyPenalty"/></span>
<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}
{#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}

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

@@ -17,276 +17,297 @@
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>
<OptionInput value="" >Standard Risu</OptionInput> <SelectInput className="mt-2" bind:value={$DataBase.theme}>
<OptionInput value="waifu" >Waifulike</OptionInput> <OptionInput value="" >Standard Risu</OptionInput>
<OptionInput value="waifuMobile" >WaifuCut</OptionInput> <OptionInput value="waifu" >Waifulike</OptionInput>
</SelectInput> <OptionInput value="waifuMobile" >WaifuCut</OptionInput>
{#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>
<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}
<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>
{#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>
</SelectInput> </SelectInput>
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.colorScheme.bgcolor} on:input={updateColorScheme} />
<span class="ml-2">Background</span> {#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>
<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}
<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>
{#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>
</SelectInput>
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.colorScheme.bgcolor} on:input={updateColorScheme} />
<span class="ml-2">Background</span>
</div>
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.colorScheme.darkbg} on:input={updateColorScheme} />
<span class="ml-2">Dark Background</span>
</div>
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.colorScheme.borderc} on:input={updateColorScheme} />
<span class="ml-2">Color 1</span>
</div>
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.colorScheme.selected} on:input={updateColorScheme} />
<span class="ml-2">Color 2</span>
</div>
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.colorScheme.draculared} on:input={updateColorScheme} />
<span class="ml-2">Color 3</span>
</div>
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.colorScheme.darkBorderc} on:input={updateColorScheme} />
<span class="ml-2">Color 4</span>
</div>
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.colorScheme.darkbutton} on:input={updateColorScheme} />
<span class="ml-2">Color 5</span>
</div>
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.colorScheme.textcolor} on:input={updateColorScheme} />
<span class="ml-2">Text Color</span>
</div>
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.colorScheme.textcolor2} on:input={updateColorScheme} />
<span class="ml-2">Text Color 2</span>
</div>
<div class="flex-grow flex justify-end">
<button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" on:click={async (e) => {
exportColorScheme()
}}>
<DownloadIcon size={18}/>
</button>
<button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={async (e) => {
importColorScheme()
}}>
<FolderUpIcon size={18}/>
</button>
</div>
</div> </div>
<div class="flex items-center mt-2"> {/if}
<ColorInput bind:value={$DataBase.colorScheme.darkbg} on:input={updateColorScheme} />
<span class="ml-2">Dark Background</span> <span class="text-textcolor mt-4">{language.textColor}</span>
</div> <SelectInput className="mt-2" bind:value={$DataBase.textTheme} on:change={updateTextTheme}>
<div class="flex items-center mt-2"> <OptionInput value="standard" >{language.classicRisu}</OptionInput>
<ColorInput bind:value={$DataBase.colorScheme.borderc} on:input={updateColorScheme} /> <OptionInput value="highcontrast" >{language.highcontrast}</OptionInput>
<span class="ml-2">Color 1</span> <OptionInput value="custom" >Custom</OptionInput>
</div> </SelectInput>
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.colorScheme.selected} on:input={updateColorScheme} /> {#if $DataBase.textTheme === "custom"}
<span class="ml-2">Color 2</span> <div class="flex items-center mt-2">
</div> <ColorInput bind:value={$DataBase.customTextTheme.FontColorStandard} on:input={updateTextTheme} />
<div class="flex items-center mt-2"> <span class="ml-2">Normal Text</span>
<ColorInput bind:value={$DataBase.colorScheme.draculared} on:input={updateColorScheme} /> </div>
<span class="ml-2">Color 3</span> <div class="flex items-center mt-2">
</div> <ColorInput bind:value={$DataBase.customTextTheme.FontColorItalic} on:input={updateTextTheme} />
<div class="flex items-center mt-2"> <span class="ml-2">Italic Text</span>
<ColorInput bind:value={$DataBase.colorScheme.darkBorderc} on:input={updateColorScheme} /> </div>
<span class="ml-2">Color 4</span> <div class="flex items-center mt-2">
</div> <ColorInput bind:value={$DataBase.customTextTheme.FontColorBold} on:input={updateTextTheme} />
<div class="flex items-center mt-2"> <span class="ml-2">Bold Text</span>
<ColorInput bind:value={$DataBase.colorScheme.darkbutton} on:input={updateColorScheme} /> </div>
<span class="ml-2">Color 5</span> <div class="flex items-center mt-2">
</div> <ColorInput bind:value={$DataBase.customTextTheme.FontColorItalicBold} on:input={updateTextTheme} />
<div class="flex items-center mt-2"> <span class="ml-2">Italic Bold Text</span>
<ColorInput bind:value={$DataBase.colorScheme.textcolor} on:input={updateColorScheme} /> </div>
<span class="ml-2">Text Color</span> <div class="flex items-center mt-2">
</div> <ColorInput bind:value={$DataBase.customTextTheme.FontColorQuote1} on:input={updateTextTheme} />
<div class="flex items-center mt-2"> <span class="ml-2">Single Quote Text</span>
<ColorInput bind:value={$DataBase.colorScheme.textcolor2} on:input={updateColorScheme} /> </div>
<span class="ml-2">Text Color 2</span> <div class="flex items-center mt-2">
</div> <ColorInput bind:value={$DataBase.customTextTheme.FontColorQuote2} on:input={updateTextTheme} />
<div class="flex-grow flex justify-end"> <span class="ml-2">Double Quote Text</span>
<button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" on:click={async (e) => { </div>
exportColorScheme() {/if}
}}>
<DownloadIcon size={18}/> <span class="text-textcolor mt-4">{language.font}</span>
</button> <SelectInput className="mt-2" bind:value={$DataBase.font} on:change={updateTextTheme}>
<button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={async (e) => { <OptionInput value="default" >Default</OptionInput>
importColorScheme() <OptionInput value="timesnewroman" >Times New Roman</OptionInput>
}}> <OptionInput value="custom" >Custom</OptionInput>
<FolderUpIcon size={18}/> </SelectInput>
</button>
</div> {#if $DataBase.font === "custom"}
</div> <TextInput bind:value={$DataBase.customFont} on:change={updateTextTheme} />
{/if}
{/if} {/if}
<span class="text-textcolor mt-4">{language.textColor}</span> {#if submenu === 1 || submenu === -1}
<SelectInput className="mt-2" bind:value={$DataBase.textTheme} on:change={updateTextTheme}>
<OptionInput value="standard" >{language.classicRisu}</OptionInput> <span class="text-textcolor mt-4">{language.UISize}</span>
<OptionInput value="highcontrast" >{language.highcontrast}</OptionInput> <SliderInput min={50} max={200} bind:value={$DataBase.zoomsize} marginBottom/>
<OptionInput value="custom" >Custom</OptionInput>
</SelectInput> <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.iconSize}</span>
<SliderInput min={50} max={200} bind:value={$DataBase.iconsize} marginBottom/>
<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.textAreaTextSize}</span>
<SliderInput min={0} max={3} bind:value={$DataBase.textAreaTextSize} on:change={updateGuisize} customText={guiSizeText($DataBase.textAreaTextSize)} marginBottom/>
<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`)
} 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 />
{#if $DataBase.showMemoryLimit}
<span class="text-textcolor">{language.memoryLimitThickness}</span>
<SliderInput min={1} max={500} step={1} bind:value={$DataBase.memoryLimitThickness} marginBottom />
{/if}
{#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>
</div>
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.customTextTheme.FontColorItalic} on:input={updateTextTheme} />
<span class="ml-2">Italic Text</span>
</div>
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.customTextTheme.FontColorBold} on:input={updateTextTheme} />
<span class="ml-2">Bold Text</span>
</div>
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.customTextTheme.FontColorItalicBold} on:input={updateTextTheme} />
<span class="ml-2">Italic Bold Text</span>
</div>
<div class="flex items-center mt-2">
<ColorInput bind:value={$DataBase.customTextTheme.FontColorQuote1} on:input={updateTextTheme} />
<span class="ml-2">Single Quote Text</span>
</div>
<div class="flex items-center mt-2">
<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> {#if submenu === 2 || submenu === -1}
<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>
{#if $DataBase.font === "custom"} <div class="flex items-center mt-2">
<TextInput bind:value={$DataBase.customFont} on:change={updateTextTheme} /> <Check bind:check={$DataBase.fullScreen} onChange={changeFullscreen} name={language.fullscreen}/>
{/if} </div>
<span class="text-textcolor mt-4">{language.UISize}</span> <div class="flex items-center mt-2">
<SliderInput min={50} max={200} bind:value={$DataBase.zoomsize} /> <Check bind:check={$DataBase.showMemoryLimit} name={language.showMemoryLimit}/>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.zoomsize)}%</span> </div>
<span class="text-textcolor mt-4">{language.lineHeight}</span> <div class="flex items-center mt-2">
<SliderInput min={0.5} max={3} step={0.05} bind:value={$DataBase.lineHeight} /> <Check bind:check={$DataBase.hideRealm} name={language.hideRealm}/>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.lineHeight)}</span> </div>
<span class="text-textcolor">{language.iconSize}</span> <div class="flex items-center mt-2">
<SliderInput min={50} max={200} bind:value={$DataBase.iconsize} /> <Check check={$DataBase.customBackground !== ''} onChange={async (check) => {
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.iconsize)}%</span> if(check){
$DataBase.customBackground = '-'
<span class="text-textcolor">{language.textAreaSize}</span> const d = await selectSingleFile(['png', 'webp', 'gif'])
<SliderInput min={-5} max={5} bind:value={$DataBase.textAreaSize} on:change={updateGuisize} /> if(!d){
<span class="text-textcolor2 mb-6 text-sm">{guiSizeText($DataBase.textAreaSize)}</span> $DataBase.customBackground = ''
return
<span class="text-textcolor">{language.textAreaTextSize}</span> }
<SliderInput min={0} max={3} bind:value={$DataBase.textAreaTextSize} on:change={updateGuisize} /> const img = await saveImage(d.data)
<span class="text-textcolor2 mb-6 text-sm">{guiSizeText($DataBase.textAreaTextSize)}</span> $DataBase.customBackground = img
<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.assetWidth}</span>
<SliderInput min={-1} max={40} step={1} bind:value={$DataBase.assetWidth} />
<span class="text-textcolor2 mb-6 text-sm">{
($DataBase.assetWidth === -1) ? "Unlimited" :
($DataBase.assetWidth === 0) ? "Hidden" : (`${($DataBase.assetWidth).toFixed(1)} rem`)}</span>
<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}
<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>
{/if}
<div class="flex items-center mt-2">
<Check bind:check={$DataBase.fullScreen} onChange={changeFullscreen} name={language.fullscreen}/>
</div>
<div class="flex items-center mt-2">
<Check bind:check={$DataBase.showMemoryLimit} name={language.showMemoryLimit}/>
</div>
<div class="flex items-center mt-2">
<Check bind:check={$DataBase.hideRealm} name={language.hideRealm}/>
</div>
<div class="flex items-center mt-2">
<Check check={$DataBase.customBackground !== ''} onChange={async (check) => {
if(check){
$DataBase.customBackground = '-'
const d = await selectSingleFile(['png', 'webp', 'gif'])
if(!d){
$DataBase.customBackground = ''
return
} }
const img = await saveImage(d.data) else{
$DataBase.customBackground = img $DataBase.customBackground = ''
} }
else{ }} name={language.useCustomBackground}></Check>
$DataBase.customBackground = ''
}
}} name={language.useCustomBackground}></Check>
</div>
<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 class="flex items-center mt-2">
<Check bind:check={$DataBase.roundIcons} name={language.roundIcons}/>
</div>
<div class="flex items-center mt-2">
<Check bind:check={$DataBase.useAdvancedEditor} name={language.useAdvancedEditor}/>
</div>
{#if $DataBase.textScreenColor}
<div class="flex items-center mt-2">
<Check check={true} onChange={() => {
$DataBase.textScreenColor = null
}} name={language.textBackgrounds} hiddenName/>
<input type="color" class="style2 text-sm mr-2" bind:value={$DataBase.textScreenColor} >
<span>{language.textBackgrounds}</span>
</div> </div>
{:else}
<div class="flex items-center mt-2"> <div class="flex items-center mt-2">
<Check check={false} onChange={() => { <Check bind:check={$DataBase.playMessage} name={language.playMessage}/>
$DataBase.textScreenColor = "#121212" <span> <Help key="msgSound" name={language.playMessage}/></span>
}} name={language.textBackgrounds}/> </div>
<div class="flex items-center mt-2">
<Check bind:check={$DataBase.roundIcons} name={language.roundIcons}/>
</div>
<div class="flex items-center mt-2">
<Check bind:check={$DataBase.useAdvancedEditor} name={language.useAdvancedEditor}/>
</div>
{#if $DataBase.textScreenColor}
<div class="flex items-center mt-2">
<Check check={true} onChange={() => {
$DataBase.textScreenColor = null
}} name={language.textBackgrounds} hiddenName/>
<input type="color" class="style2 text-sm mr-2" bind:value={$DataBase.textScreenColor} >
<span>{language.textBackgrounds}</span>
</div>
{:else}
<div class="flex items-center mt-2">
<Check check={false} onChange={() => {
$DataBase.textScreenColor = "#121212"
}} name={language.textBackgrounds}/>
</div>
{/if}
<div class="flex items-center mt-2">
<Check bind:check={$DataBase.textBorder} name={language.textBorder}/>
</div> </div>
{/if}
<div class="flex items-center mt-2">
<Check bind:check={$DataBase.textBorder} name={language.textBorder}/>
</div>
<div class="flex items-center mt-2">
<Check bind:check={$DataBase.textScreenRounded} name={language.textScreenRound}/>
</div>
{#if $DataBase.textScreenBorder}
<div class="flex items-center mt-2"> <div class="flex items-center mt-2">
<Check check={true} onChange={() => { <Check bind:check={$DataBase.textScreenRounded} name={language.textScreenRound}/>
$DataBase.textScreenBorder = null
}} name={language.textScreenBorder} hiddenName/>
<input type="color" class="style2 text-sm mr-2" bind:value={$DataBase.textScreenBorder} >
<span>{language.textScreenBorder}</span>
</div> </div>
{:else}
{#if $DataBase.textScreenBorder}
<div class="flex items-center mt-2">
<Check check={true} onChange={() => {
$DataBase.textScreenBorder = null
}} name={language.textScreenBorder} hiddenName/>
<input type="color" class="style2 text-sm mr-2" bind:value={$DataBase.textScreenBorder} >
<span>{language.textScreenBorder}</span>
</div>
{:else}
<div class="flex items-center mt-2">
<Check check={false} onChange={() => {
$DataBase.textScreenBorder = "#121212"
}} name={language.textScreenBorder}/>
</div>
{/if}
<div class="flex items-center mt-2"> <div class="flex items-center mt-2">
<Check check={false} onChange={() => { <Check bind:check={$DataBase.useChatCopy} name={language.useChatCopy}/>
$DataBase.textScreenBorder = "#121212"
}} name={language.textScreenBorder}/>
</div> </div>
{/if}
<div class="flex items-center mt-2">
<Check bind:check={$DataBase.useChatCopy} name={language.useChatCopy}/>
</div>
<div class="flex items-center mt-2">
<Check bind:check={$DataBase.useAdditionalAssetsPreview} name={language.useAdditionalAssetsPreview}/>
</div>
{#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.useAdditionalAssetsPreview} name={language.useAdditionalAssetsPreview}/>
<Help key="experimental" name={language.useChatSticker}/>
</div> </div>
{/if}
{#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> </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 === ''}

45
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,27 +29,29 @@
$: 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">
<button class="mr-2 text-textcolor2 hover:text-textcolor" on:click={onGoBack}>
<ArrowLeft />
</button>
{language.promptTemplate}
</h2>
<h2 class="mb-2 text-2xl font-bold mt-2 items-center flex"> <div class="flex w-full rounded-md border border-selected">
<button class="mr-2 text-textcolor2 hover:text-textcolor" on:click={onGoBack}> <button on:click={() => {
<ArrowLeft /> subMenu = 0
</button> }} class="p-2 flex-1" class:bg-selected={subMenu === 0}>
{language.promptTemplate} <span>{language.template}</span>
</h2> </button>
<div class="flex w-full rounded-md border border-selected"> <button on:click={() => {
<button on:click={() => { subMenu = 1
subMenu = 0 }} class="p-2 flex-1" class:bg-selected={subMenu === 1}>
}} class="p-2 flex-1" class:bg-selected={subMenu === 0}> <span>{language.settings}</span>
<span>{language.template}</span> </button>
</button> </div>
<button on:click={() => { {/if}
subMenu = 1 {#if warns.length > 0 && subMenu === 0}
}} class="p-2 flex-1" class:bg-selected={subMenu === 1}> <div class="text-red-500 flex flex-col items-start p-2 rounded-md border-red-500 border mt-4">
<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">
<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();