Merge branch 'bzlibby-dark-mode'
This commit is contained in:
commit
83b1b3916f
|
@ -1,9 +1,13 @@
|
||||||
import { doesExist } from '@apextoaster/js-utils';
|
import { mustExist } from '@apextoaster/js-utils';
|
||||||
import { TabContext, TabList, TabPanel } from '@mui/lab';
|
import { TabContext, TabList, TabPanel } from '@mui/lab';
|
||||||
import { Box, Container, Divider, Tab } from '@mui/material';
|
import { Box, Container, Divider, PaletteMode, Tab, useMediaQuery, CssBaseline } from '@mui/material';
|
||||||
|
import { createTheme, ThemeProvider } from '@mui/material/styles';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
import { useContext, useMemo } from 'react';
|
||||||
import { useHash } from 'react-use/lib/useHash';
|
import { useHash } from 'react-use/lib/useHash';
|
||||||
|
import { useStore } from 'zustand';
|
||||||
|
|
||||||
|
import { StateContext } from '../state.js';
|
||||||
import { ModelControl } from './control/ModelControl.js';
|
import { ModelControl } from './control/ModelControl.js';
|
||||||
import { ImageHistory } from './ImageHistory.js';
|
import { ImageHistory } from './ImageHistory.js';
|
||||||
import { Logo } from './Logo.js';
|
import { Logo } from './Logo.js';
|
||||||
|
@ -13,12 +17,27 @@ import { Inpaint } from './tab/Inpaint.js';
|
||||||
import { Settings } from './tab/Settings.js';
|
import { Settings } from './tab/Settings.js';
|
||||||
import { Txt2Img } from './tab/Txt2Img.js';
|
import { Txt2Img } from './tab/Txt2Img.js';
|
||||||
import { Upscale } from './tab/Upscale.js';
|
import { Upscale } from './tab/Upscale.js';
|
||||||
import { getTab, TAB_LABELS } from './utils.js';
|
import { getTheme, getTab, TAB_LABELS } from './utils.js';
|
||||||
|
|
||||||
export function OnnxWeb() {
|
export function OnnxWeb() {
|
||||||
|
/* checks for system light/dark mode preference */
|
||||||
|
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
|
||||||
|
const state = useStore(mustExist(useContext(StateContext)));
|
||||||
|
|
||||||
|
const theme = useMemo(
|
||||||
|
() => createTheme({
|
||||||
|
palette: {
|
||||||
|
mode: getTheme(state.theme, prefersDarkMode) as PaletteMode
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
[prefersDarkMode, state.theme],
|
||||||
|
);
|
||||||
|
|
||||||
const [hash, setHash] = useHash();
|
const [hash, setHash] = useHash();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<ThemeProvider theme={theme}>
|
||||||
|
<CssBaseline />
|
||||||
<Container>
|
<Container>
|
||||||
<Box sx={{ my: 4 }}>
|
<Box sx={{ my: 4 }}>
|
||||||
<Logo />
|
<Logo />
|
||||||
|
@ -26,6 +45,7 @@ export function OnnxWeb() {
|
||||||
<Box sx={{ mx: 4, my: 4 }}>
|
<Box sx={{ mx: 4, my: 4 }}>
|
||||||
<ModelControl />
|
<ModelControl />
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
<TabContext value={getTab(hash)}>
|
<TabContext value={getTab(hash)}>
|
||||||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
||||||
<TabList onChange={(_e, idx) => {
|
<TabList onChange={(_e, idx) => {
|
||||||
|
@ -33,7 +53,6 @@ export function OnnxWeb() {
|
||||||
}}>
|
}}>
|
||||||
{TAB_LABELS.map((name) => <Tab key={name} label={name} value={name} />)}
|
{TAB_LABELS.map((name) => <Tab key={name} label={name} value={name} />)}
|
||||||
</TabList>
|
</TabList>
|
||||||
</Box>
|
|
||||||
<TabPanel value='txt2img'>
|
<TabPanel value='txt2img'>
|
||||||
<Txt2Img />
|
<Txt2Img />
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
|
@ -52,11 +71,14 @@ export function OnnxWeb() {
|
||||||
<TabPanel value='settings'>
|
<TabPanel value='settings'>
|
||||||
<Settings />
|
<Settings />
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
|
</Box>
|
||||||
</TabContext>
|
</TabContext>
|
||||||
|
|
||||||
<Divider variant='middle' />
|
<Divider variant='middle' />
|
||||||
<Box sx={{ mx: 4, my: 4 }}>
|
<Box sx={{ mx: 4, my: 4 }}>
|
||||||
<ImageHistory />
|
<ImageHistory />
|
||||||
</Box>
|
</Box>
|
||||||
</Container>
|
</Container>
|
||||||
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { doesExist, mustExist } from '@apextoaster/js-utils';
|
import { doesExist, mustExist } from '@apextoaster/js-utils';
|
||||||
import { Refresh } from '@mui/icons-material';
|
import { Refresh } from '@mui/icons-material';
|
||||||
import { Alert, Button, Stack, TextField } from '@mui/material';
|
import { Alert, Button, FormControlLabel, Stack, Switch, TextField, useMediaQuery } from '@mui/material';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { useContext, useState } from 'react';
|
import { useContext, useState } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
|
@ -8,6 +8,7 @@ import { useStore } from 'zustand';
|
||||||
|
|
||||||
import { getApiRoot } from '../../config.js';
|
import { getApiRoot } from '../../config.js';
|
||||||
import { ConfigContext, StateContext, STATE_KEY } from '../../state.js';
|
import { ConfigContext, StateContext, STATE_KEY } from '../../state.js';
|
||||||
|
import { getTheme } from '../utils.js';
|
||||||
import { NumericField } from '../input/NumericField.js';
|
import { NumericField } from '../input/NumericField.js';
|
||||||
|
|
||||||
function removeBlobs(key: string, value: unknown): unknown {
|
function removeBlobs(key: string, value: unknown): unknown {
|
||||||
|
@ -28,8 +29,10 @@ function removeBlobs(key: string, value: unknown): unknown {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Settings() {
|
export function Settings() {
|
||||||
|
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
|
||||||
const config = mustExist(useContext(ConfigContext));
|
const config = mustExist(useContext(ConfigContext));
|
||||||
const state = useStore(mustExist(useContext(StateContext)));
|
const state = useStore(mustExist(useContext(StateContext)));
|
||||||
|
const theme = getTheme(state.theme, prefersDarkMode);
|
||||||
|
|
||||||
const [json, setJson] = useState(JSON.stringify(state, removeBlobs));
|
const [json, setJson] = useState(JSON.stringify(state, removeBlobs));
|
||||||
const [root, setRoot] = useState(getApiRoot(config));
|
const [root, setRoot] = useState(getApiRoot(config));
|
||||||
|
@ -80,6 +83,17 @@ export function Settings() {
|
||||||
{t('setting.loadState')}
|
{t('setting.loadState')}
|
||||||
</Button>
|
</Button>
|
||||||
</Stack>
|
</Stack>
|
||||||
|
<FormControlLabel control={
|
||||||
|
<Switch checked={theme === 'dark'}
|
||||||
|
onClick={() => {
|
||||||
|
if (theme === 'light') {
|
||||||
|
state.setTheme('dark');
|
||||||
|
} else {
|
||||||
|
state.setTheme('light');
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
} label={t('setting.darkMode')} />
|
||||||
<Stack direction='row' spacing={2}>
|
<Stack direction='row' spacing={2}>
|
||||||
<Button onClick={() => state.resetTxt2Img()} color='warning'>{t('setting.reset.txt2img')}</Button>
|
<Button onClick={() => state.resetTxt2Img()} color='warning'>{t('setting.reset.txt2img')}</Button>
|
||||||
<Button onClick={() => state.resetImg2Img()} color='warning'>{t('setting.reset.img2img')}</Button>
|
<Button onClick={() => state.resetImg2Img()} color='warning'>{t('setting.reset.img2img')}</Button>
|
||||||
|
|
|
@ -17,3 +17,13 @@ export function getTab(hash: string): string {
|
||||||
|
|
||||||
return TAB_LABELS[0];
|
return TAB_LABELS[0];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function getTheme(currentTheme: string, preferDark: boolean): string {
|
||||||
|
if (currentTheme === '') {
|
||||||
|
if (preferDark) {
|
||||||
|
return 'dark';
|
||||||
|
}
|
||||||
|
return 'light';
|
||||||
|
}
|
||||||
|
return currentTheme;
|
||||||
|
}
|
||||||
|
|
|
@ -43,8 +43,10 @@ interface BrushSlice {
|
||||||
|
|
||||||
interface DefaultSlice {
|
interface DefaultSlice {
|
||||||
defaults: TabState<BaseImgParams>;
|
defaults: TabState<BaseImgParams>;
|
||||||
|
theme: string;
|
||||||
|
|
||||||
setDefaults(param: Partial<BaseImgParams>): void;
|
setDefaults(param: Partial<BaseImgParams>): void;
|
||||||
|
setTheme(theme: string): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface HistorySlice {
|
interface HistorySlice {
|
||||||
|
@ -490,6 +492,7 @@ export function createStateSlices(server: ServerParams) {
|
||||||
defaults: {
|
defaults: {
|
||||||
...base,
|
...base,
|
||||||
},
|
},
|
||||||
|
theme: '',
|
||||||
setDefaults(params) {
|
setDefaults(params) {
|
||||||
set((prev) => ({
|
set((prev) => ({
|
||||||
defaults: {
|
defaults: {
|
||||||
|
@ -498,6 +501,11 @@ export function createStateSlices(server: ServerParams) {
|
||||||
}
|
}
|
||||||
}));
|
}));
|
||||||
},
|
},
|
||||||
|
setTheme(theme) {
|
||||||
|
set((prev) => ({
|
||||||
|
theme,
|
||||||
|
}));
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const createModelSlice: Slice<ModelSlice> = (set) => ({
|
const createModelSlice: Slice<ModelSlice> = (set) => ({
|
||||||
|
|
|
@ -164,6 +164,7 @@ export const I18N_STRINGS_DE = {
|
||||||
scheduler: 'Standardplaner',
|
scheduler: 'Standardplaner',
|
||||||
server: 'API-Server',
|
server: 'API-Server',
|
||||||
state: 'Kundenstatus',
|
state: 'Kundenstatus',
|
||||||
|
darkMode: 'Dunkelmodus',
|
||||||
},
|
},
|
||||||
sourceFilter: {
|
sourceFilter: {
|
||||||
none: '',
|
none: '',
|
||||||
|
|
|
@ -226,6 +226,7 @@ export const I18N_STRINGS_EN = {
|
||||||
scheduler: 'Default Scheduler',
|
scheduler: 'Default Scheduler',
|
||||||
server: 'API Server',
|
server: 'API Server',
|
||||||
state: 'Client State',
|
state: 'Client State',
|
||||||
|
darkMode: 'Dark Mode',
|
||||||
},
|
},
|
||||||
scheduler: {
|
scheduler: {
|
||||||
'ddim': 'DDIM',
|
'ddim': 'DDIM',
|
||||||
|
|
|
@ -164,6 +164,7 @@ export const I18N_STRINGS_ES = {
|
||||||
scheduler: 'Programador predeterminado',
|
scheduler: 'Programador predeterminado',
|
||||||
server: 'Servidor API',
|
server: 'Servidor API',
|
||||||
state: 'Estado del cliente',
|
state: 'Estado del cliente',
|
||||||
|
darkMode: 'Modo Oscuro',
|
||||||
},
|
},
|
||||||
sourceFilter: {
|
sourceFilter: {
|
||||||
none: '',
|
none: '',
|
||||||
|
|
|
@ -164,6 +164,7 @@ export const I18N_STRINGS_FR = {
|
||||||
scheduler: '',
|
scheduler: '',
|
||||||
server: '',
|
server: '',
|
||||||
state: '',
|
state: '',
|
||||||
|
darkMode: 'Mode Sombre',
|
||||||
},
|
},
|
||||||
sourceFilter: {
|
sourceFilter: {
|
||||||
none: '',
|
none: '',
|
||||||
|
|
Loading…
Reference in New Issue