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,11 +45,12 @@
         $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}
+    <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}>
@@ -70,7 +71,8 @@
         }} class="p-2 flex-1" class:bg-darkbutton={submenu === 3}>
             <span>{language.others}</span>
         </button>
-</div>
+    </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}
+            {#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>
+    {#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}
@@ -589,3 +594,6 @@
         <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,11 +18,13 @@
         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">
+
+{#if submenu !== -1}
+    <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}>
@@ -38,7 +40,8 @@
         }} class="p-2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 2}>
             <span>{language.others}</span>
         </button>
-</div>
+    </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{