Add legacy gui option

src/lang/en.ts

@@ -679,4 +679,5 @@ export const languageEnglish = {
     personaUnbindedSuccess: "Persona is successfully unbinded",
     parameters: "Parameters",
     sizeAndSpeed: "Size and Speed",
+    useLegacyGUI: "Use Legacy GUI",
 }

src/lib/Setting/Pages/BotSettings.svelte

@@ -45,32 +45,34 @@
         $DataBase.useStreaming = $DataBase.textgenWebUIStreamURL.startsWith("wss://")
     }
 
-    let submenu = 0
+    let submenu = $DataBase.useLegacyGUI ? -1 : 0
 </script>
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.chatBot}</h2>
 
-<div class="flex w-full rounded-md border border-darkborderc mb-4">
+{#if submenu !== -1}
-    <button on:click={() => {
+    <div class="flex w-full rounded-md border border-darkborderc mb-4">
-        submenu = 0
+        <button on:click={() => {
-    }} class="p-2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 0}>
+            submenu = 0
-        <span>{language.model}</span>
+        }} class="p-2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 0}>
-    </button>
+            <span>{language.model}</span>
-    <button on:click={() => {
+        </button>
-        submenu = 1
+        <button on:click={() => {
-    }} class="p2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 1}>
+            submenu = 1
-        <span>{language.parameters}</span>
+        }} class="p2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 1}>
-    </button>
+            <span>{language.parameters}</span>
-    <button on:click={() => {
+        </button>
-        submenu = 2
+        <button on:click={() => {
-    }} class="p-2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 2}>
+            submenu = 2
-        <span>{language.prompt}</span>
+        }} class="p-2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 2}>
-    </button>
+            <span>{language.prompt}</span>
-    <button on:click={() => {
+        </button>
-        submenu = 3
+        <button on:click={() => {
-    }} class="p-2 flex-1" class:bg-darkbutton={submenu === 3}>
+            submenu = 3
-        <span>{language.others}</span>
+        }} class="p-2 flex-1" class:bg-darkbutton={submenu === 3}>
-    </button>
+            <span>{language.others}</span>
-</div>
+        </button>
+    </div>
+{/if}
 
 {#if submenu === 0 || submenu === -1}
     <span class="text-textcolor mt-4">{language.model} <Help key="model"/></span>
@@ -541,7 +543,9 @@
 
     <Arcodion styled name={language.promptTemplate}>
         {#if $DataBase.promptTemplate}
-            <PromptSettings mode='inline' subMenu={1} />
+            {#if submenu !== -1}
+                <PromptSettings mode='inline' subMenu={1} />
+            {/if}
             <Check check={!!$DataBase.promptTemplate} name={language.usePromptTemplate} className="mt-4" onChange={async ()=>{
                 const conf = await alertConfirm(language.resetPromptTemplateConfirm)
                 
@@ -558,8 +562,9 @@
             }}/>
         {/if}
     </Arcodion>
-    <Button on:click={() => {openPresetList = true}} className="mt-4">{language.presets}</Button>
+    {#if submenu !== -1}
-
+        <Button on:click={() => {openPresetList = true}} className="mt-4">{language.presets}</Button>
+    {/if}
 {/if}
 
 {#if submenu === 2 || submenu === -1}
@@ -578,7 +583,7 @@
         <div class="flex items-center mt-4">
             <Check bind:check={$DataBase.promptPreprocess} name={language.promptPreprocess}/>
         </div>
-    {:else}
+    {:else if submenu === 2}
         <PromptSettings mode='inline' />
     {/if}
 {/if}
@@ -588,4 +593,7 @@
     <div class="mt-2">
         <Button on:click={goPromptTemplate} size="sm">{language.promptTemplate}</Button>
     </div>
+{/if}
+{#if submenu === -1}
+    <Button on:click={() => {openPresetList = true}} className="mt-4">{language.presets}</Button>
 {/if}

src/lib/Setting/Pages/DisplaySettings.svelte

@@ -18,27 +18,30 @@
         changeColorScheme((e.target as HTMLInputElement).value)
     }
 
-    let submenu = 0
+    let submenu = $DataBase.useLegacyGUI ? -1 : 0
 </script>
 
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.display}</h2>
-<div class="flex w-full rounded-md border border-darkborderc mb-4">
+
-    <button on:click={() => {
+{#if submenu !== -1}
-        submenu = 0
+    <div class="flex w-full rounded-md border border-darkborderc mb-4">
-    }} class="p-2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 0}>
+        <button on:click={() => {
-        <span>{language.theme}</span>
+            submenu = 0
-    </button>
+        }} class="p-2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 0}>
-    <button on:click={() => {
+            <span>{language.theme}</span>
-        submenu = 1
+        </button>
-    }} class="p2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 1}>
+        <button on:click={() => {
-        <span>{language.sizeAndSpeed}</span>
+            submenu = 1
-    </button>
+        }} class="p2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 1}>
-    <button on:click={() => {
+            <span>{language.sizeAndSpeed}</span>
-        submenu = 2
+        </button>
-    }} class="p-2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 2}>
+        <button on:click={() => {
-        <span>{language.others}</span>
+            submenu = 2
-    </button>
+        }} class="p-2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 2}>
-</div>
+            <span>{language.others}</span>
+        </button>
+    </div>
+{/if}
 
 {#if submenu === 0 || submenu === -1}
     <span class="text-textcolor mt-4">{language.theme}</span>
@@ -303,6 +306,10 @@
         <Check bind:check={$DataBase.useAdditionalAssetsPreview} name={language.useAdditionalAssetsPreview}/>
     </div>
 
+    <div class="flex items-center mt-2">
+        <Check bind:check={$DataBase.useLegacyGUI} name={language.useLegacyGUI}/>
+    </div>
+
     {#if $DataBase.useExperimental}
         <div class="flex items-center mt-2">
             <Check bind:check={$DataBase.useChatSticker} name={language.useChatSticker}/>

src/ts/storage/database.ts

@@ -708,6 +708,7 @@ export interface Database{
     legacyTranslation: boolean
     comfyConfig: ComfyConfig
     comfyUiUrl: string
+    useLegacyGUI: boolean
 }
 
 export interface customscript{