Refactor ChatFormatSettings component to BotSettings and OobaSettings pages

This commit is contained in:
kwaroran
2024-04-23 18:26:41 +09:00
parent e2e7031210
commit b33ab24894
3 changed files with 33 additions and 44 deletions

View File

@@ -25,6 +25,7 @@
import Arcodion from "src/lib/UI/Arcodion.svelte"; import Arcodion from "src/lib/UI/Arcodion.svelte";
import { startsWith } from "lodash"; import { startsWith } from "lodash";
import OpenrouterSettings from "./OpenrouterSettings.svelte"; import OpenrouterSettings from "./OpenrouterSettings.svelte";
import ChatFormatSettings from "./ChatFormatSettings.svelte";
let tokens = { let tokens = {
mainPrompt: 0, mainPrompt: 0,
@@ -436,23 +437,7 @@
</div> </div>
{/if} {/if}
<div class="flex flex-col p-3 rounded-md border-selected border mt-4"> <div class="flex flex-col p-3 rounded-md border-selected border mt-4">
<span class="text-textcolor">Chat Formating</span> <ChatFormatSettings />
<SelectInput bind:value={$DataBase.instructChatTemplate}>
<OptionInput value="chatml">ChatML</OptionInput>
<OptionInput value="llama3">Llama3</OptionInput>
<OptionInput value="gpt2">GPT2</OptionInput>
<OptionInput value="gemma">Gemma</OptionInput>
<OptionInput value="mistral">Mistral</OptionInput>
<OptionInput value="llama2">Llama2</OptionInput>
<OptionInput value="vicuna">Vicuna</OptionInput>
<OptionInput value="alpaca">Alpaca</OptionInput>
<OptionInput value="jinja">Custom (Jinja)</OptionInput>
</SelectInput>
{#if $DataBase.instructChatTemplate === 'jinja'}
<span class="text-textcolor">Jinja Template</span>
<TextAreaInput fullwidth autocomplete="off" height={"24"} bind:value={$DataBase.JinjaTemplate} />
{/if}
</div> </div>
<span class="text-textcolor mt-2">{language.autoSuggest} <Help key="autoSuggest"/></span> <span class="text-textcolor mt-2">{language.autoSuggest} <Help key="autoSuggest"/></span>

View File

@@ -0,0 +1,24 @@
<script lang="ts">
import TextAreaInput from "src/lib/UI/GUI/TextAreaInput.svelte";
import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";
import { DataBase } from "src/ts/storage/database";
</script>
<span class="text-textcolor">Chat Formating</span>
<SelectInput bind:value={$DataBase.instructChatTemplate}>
<OptionInput value="chatml">ChatML</OptionInput>
<OptionInput value="llama3">Llama3</OptionInput>
<OptionInput value="gpt2">GPT2</OptionInput>
<OptionInput value="gemma">Gemma</OptionInput>
<OptionInput value="mistral">Mistral</OptionInput>
<OptionInput value="llama2">Llama2</OptionInput>
<OptionInput value="vicuna">Vicuna</OptionInput>
<OptionInput value="alpaca">Alpaca</OptionInput>
<OptionInput value="jinja">Custom (Jinja)</OptionInput>
</SelectInput>
{#if $DataBase.instructChatTemplate === 'jinja'}
<span class="text-textcolor">Jinja Template</span>
<TextAreaInput fullwidth autocomplete="off" height={"24"} bind:value={$DataBase.JinjaTemplate} />
{/if}

View File

@@ -1,40 +1,20 @@
<script lang="ts"> <script lang="ts">
import TextAreaInput from "src/lib/UI/GUI/TextAreaInput.svelte";
import SelectInput from "src/lib/UI/GUI/SelectInput.svelte"; import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
import OptionInput from "src/lib/UI/GUI/OptionInput.svelte"; import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";
import OptionalInput from "src/lib/UI/GUI/OptionalInput.svelte"; import OptionalInput from "src/lib/UI/GUI/OptionalInput.svelte";
import { DataBase } from "src/ts/storage/database"; import { DataBase } from "src/ts/storage/database";
import CheckInput from "src/lib/UI/GUI/CheckInput.svelte"; import CheckInput from "src/lib/UI/GUI/CheckInput.svelte";
import { language } from "src/lang"; import { language } from "src/lang";
import { PlusIcon, TrashIcon } from "lucide-svelte"; import { PlusIcon, TrashIcon } from "lucide-svelte";
import TextInput from "src/lib/UI/GUI/TextInput.svelte"; import TextInput from "src/lib/UI/GUI/TextInput.svelte";
import Arcodion from "src/lib/UI/Arcodion.svelte"; import Arcodion from "src/lib/UI/Arcodion.svelte";
let openOobaSettings = false import ChatFormatSettings from "./ChatFormatSettings.svelte";
const toggleOobaSettings = () => {
openOobaSettings = !openOobaSettings
}
export let instructionMode = false export let instructionMode = false
</script> </script>
<Arcodion name="Ooba Settings" styled> <Arcodion name="Ooba Settings" styled>
{#if instructionMode} {#if instructionMode}
<span class="text-textcolor">Chat Formating</span> <ChatFormatSettings />
<SelectInput bind:value={$DataBase.instructChatTemplate}>
<OptionInput value="chatml">ChatML</OptionInput>
<OptionInput value="llama3">Llama3</OptionInput>
<OptionInput value="gpt2">GPT2</OptionInput>
<OptionInput value="gemma">Gemma</OptionInput>
<OptionInput value="mistral">Mistral</OptionInput>
<OptionInput value="llama2">Llama2</OptionInput>
<OptionInput value="vicuna">Vicuna</OptionInput>
<OptionInput value="alpaca">Alpaca</OptionInput>
<OptionInput value="jinja">Custom (Jinja)</OptionInput>
</SelectInput>
{#if $DataBase.instructChatTemplate === 'jinja'}
<span class="text-textcolor">Jinja Template</span>
<TextAreaInput fullwidth autocomplete="off" height={"24"} bind:value={$DataBase.JinjaTemplate} />
{/if}
{:else} {:else}
<span class="text-textcolor">Ooba Mode</span> <span class="text-textcolor">Ooba Mode</span>
<SelectInput className="mt-2 mb-4" bind:value={$DataBase.reverseProxyOobaArgs.mode}> <SelectInput className="mt-2 mb-4" bind:value={$DataBase.reverseProxyOobaArgs.mode}>