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

135
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,68 +41,43 @@
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">
@@ -305,19 +281,10 @@
<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}
{#if advancedBotSettings}
{#if !$DataBase.promptTemplate}
<span class="text-textcolor">{language.mainPrompt} <Help key="mainprompt"/></span>
<TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.mainPrompt}></TextAreaInput>
<span class="text-textcolor2 mb-6 text-sm mt-2">{tokens.mainPrompt} {language.tokens}</span>
<span class="text-textcolor">{language.jailbreakPrompt} <Help key="jailbreak"/></span>
<TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.jailbreak}></TextAreaInput>
<span class="text-textcolor2 mb-6 text-sm mt-2">{tokens.jailbreak} {language.tokens}</span>
<span class="text-textcolor">{language.globalNote} <Help key="globalNote"/></span>
<TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.globalNote}></TextAreaInput>
<span class="text-textcolor2 mb-6 text-sm mt-2">{tokens.globalNote} {language.tokens}</span>
{/if} {/if}
{#if submenu === 1 || submenu === -1}
<span class="text-textcolor">{language.maxContextSize}</span> <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}/>
@@ -481,7 +448,6 @@
<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}
{#if ($DataBase.reverseProxyOobaMode && $DataBase.aiModel === 'reverse_proxy') || ($DataBase.aiModel === 'ooba')} {#if ($DataBase.reverseProxyOobaMode && $DataBase.aiModel === 'reverse_proxy') || ($DataBase.aiModel === 'ooba')}
<OobaSettings instructionMode={$DataBase.aiModel === 'ooba'} /> <OobaSettings instructionMode={$DataBase.aiModel === 'ooba'} />
@@ -491,12 +457,9 @@
<OpenrouterSettings /> <OpenrouterSettings />
{/if} {/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 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>
<Button on:click={() => {openPresetList = true}} className="mt-4">{language.presets}</Button>
{#if ($DataBase.promptTemplate)} {/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"> <div class="mt-2">
<Button on:click={goPromptTemplate} size="sm">{language.promptTemplate}</Button> <Button on:click={goPromptTemplate} size="sm">{language.promptTemplate}</Button>
</div> </div>
{/if} {/if}
<Button on:click={() => {openPresetList = true}} className="mt-4">{language.presets}</Button>
{/if}

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

@@ -17,10 +17,30 @@
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>
{#if submenu === 0 || submenu === -1}
<span class="text-textcolor mt-4">{language.theme}</span> <span class="text-textcolor mt-4">{language.theme}</span>
<SelectInput className="mt-2" bind:value={$DataBase.theme}> <SelectInput className="mt-2" bind:value={$DataBase.theme}>
<OptionInput value="" >Standard Risu</OptionInput> <OptionInput value="" >Standard Risu</OptionInput>
@@ -149,47 +169,46 @@
<TextInput bind:value={$DataBase.customFont} on:change={updateTextTheme} /> <TextInput bind:value={$DataBase.customFont} on:change={updateTextTheme} />
{/if} {/if}
<span class="text-textcolor mt-4">{language.UISize}</span> {/if}
<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> {#if submenu === 1 || submenu === -1}
<SliderInput min={0.5} max={3} step={0.05} bind:value={$DataBase.lineHeight} />
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.lineHeight)}</span> <span class="text-textcolor mt-4">{language.UISize}</span>
<SliderInput min={50} max={200} bind:value={$DataBase.zoomsize} marginBottom/>
<span class="text-textcolor">{language.lineHeight}</span>
<SliderInput min={0.5} max={3} step={0.05} bind:value={$DataBase.lineHeight} marginBottom/>
<span class="text-textcolor">{language.iconSize}</span> <span class="text-textcolor">{language.iconSize}</span>
<SliderInput min={50} max={200} bind:value={$DataBase.iconsize} /> <SliderInput min={50} max={200} bind:value={$DataBase.iconsize} marginBottom/>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.iconsize)}%</span>
<span class="text-textcolor">{language.textAreaSize}</span> <span class="text-textcolor">{language.textAreaSize}</span>
<SliderInput min={-5} max={5} bind:value={$DataBase.textAreaSize} 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.textAreaSize)}</span>
<span class="text-textcolor">{language.textAreaTextSize}</span> <span class="text-textcolor">{language.textAreaTextSize}</span>
<SliderInput min={0} max={3} bind:value={$DataBase.textAreaTextSize} 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.textAreaTextSize)}</span>
<span class="text-textcolor">{language.sideBarSize}</span> <span class="text-textcolor">{language.sideBarSize}</span>
<SliderInput min={0} max={3} bind:value={$DataBase.sideBarSize} on:change={updateGuisize} /> <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">{guiSizeText($DataBase.sideBarSize)}</span>
<span class="text-textcolor">{language.assetWidth}</span> <span class="text-textcolor">{language.assetWidth}</span>
<SliderInput min={-1} max={40} step={1} bind:value={$DataBase.assetWidth} /> <SliderInput min={-1} max={40} step={1} bind:value={$DataBase.assetWidth} customText={
<span class="text-textcolor2 mb-6 text-sm">{
($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> <span class="text-textcolor">{language.animationSpeed}</span>
<SliderInput min={0} max={1} step={0.05} bind:value={$DataBase.animationSpeed} on:change={updateAnimationSpeed} /> <SliderInput min={0} max={1} step={0.05} fixed={2} bind:value={$DataBase.animationSpeed} on:change={updateAnimationSpeed} marginBottom />
<span class="text-textcolor2 mb-6 text-sm">{(`${($DataBase.animationSpeed).toFixed(2)}s`)}</span>
{#if $DataBase.showMemoryLimit} {#if $DataBase.showMemoryLimit}
<span class="text-textcolor">{language.memoryLimitThickness}</span> <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}
{#if submenu === 2 || submenu === -1}
<div class="flex items-center mt-2"> <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>
@@ -290,3 +309,5 @@
<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 === ''}

11
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,13 +29,14 @@
$: 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
@@ -47,8 +49,9 @@
<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();