wrap experimental features in a collapsible accordion

gui/src/components/control/ExperimentalControl.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import { mustDefault, mustExist } from '@apextoaster/js-utils';
-import { Checkbox, FormControlLabel, Stack, TextField } from '@mui/material';
+import { Accordion, AccordionDetails, AccordionSummary, Checkbox, FormControlLabel, Stack, TextField } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import * as React from 'react';
 import { useContext } from 'react';
@@ -33,7 +33,10 @@ export function ExperimentalControl(props: ExperimentalControlProps) {
     staleTime: STALE_TIME,
   });
 
-  return <Stack spacing={STANDARD_SPACING}>
+  return <Accordion>
+    <AccordionSummary>{t('experimental.label')}</AccordionSummary>
+    <AccordionDetails>
+      <Stack spacing={STANDARD_SPACING}>
         <Stack direction='row' spacing={STANDARD_SPACING}>
           <FormControlLabel
             label={t('experimental.prompt_editing.label')}
@@ -184,5 +187,7 @@ export function ExperimentalControl(props: ExperimentalControlProps) {
             }}
           />
         </Stack>
-  </Stack>;
+      </Stack>
+    </AccordionDetails>
+  </Accordion>;
 }

gui/src/components/tab/Txt2Img.tsx

@@ -107,8 +107,8 @@ export function Txt2Img() {
       <SizeControl />
       <HighresControl selectHighres={selectHighres} setHighres={setHighres} />
       <UpscaleControl selectUpscale={selectUpscale} setUpscale={setUpscale} />
-      <ExperimentalControl selectExperimental={selectExperimental} setExperimental={setExperimental} />
       <VariableControl selectGrid={selectVariable} setGrid={setVariable} />
+      <ExperimentalControl selectExperimental={selectExperimental} setExperimental={setExperimental} />
       <Button
         variant='contained'
         onClick={() => generate.mutate()}

gui/src/strings/de.ts

@@ -23,6 +23,7 @@ export const I18N_STRINGS_DE = {
         },
       },
       experimental: {
+        label: 'Experimentelle Merkmale',
         latent_symmetry: {
           label: 'Latente Symmetrie',
           gradient_start: 'Steigungsstart',

gui/src/strings/en.ts

@@ -18,6 +18,7 @@ export const I18N_STRINGS_EN = {
         },
       },
       experimental: {
+        label: 'Experimental Features',
         latent_symmetry: {
           label: 'Latent Symmetry',
           gradient_start: 'Gradient Start',

gui/src/strings/es.ts

@@ -23,6 +23,7 @@ export const I18N_STRINGS_ES = {
         },
       },
       experimental: {
+        label: 'Características Experimentales',
         latent_symmetry: {
           label: 'Simetría latente',
           gradient_start: 'Inicio de gradiente',

gui/src/strings/fr.ts

@@ -23,6 +23,7 @@ export const I18N_STRINGS_FR = {
         },
       },
       experimental: {
+        label: 'fonctionnalités expérimentales',
         latent_symmetry: {
           label: 'symétrie latente',
           gradient_start: 'début du dégradé',