Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Puts model switching into accordion, styling

Browse Source
This commit is contained in:
psychedelicious 2022-10-28 20:04:57 +11:00
parent d551de6e06
commit ea6e998094
11 changed files with 163 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/dist/assets/index.25bb1c01.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

80
frontend/dist/assets/index.c9288511.js → frontend/dist/assets/index.366cfb7e.js vendored
View File

File diff suppressed because one or more lines are too long

1
frontend/dist/assets/index.9dddc756.css vendored
View File

File diff suppressed because one or more lines are too long

4
frontend/dist/index.html vendored
View File

@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>InvokeAI - A Stable Diffusion Toolkit</title> <title>InvokeAI - A Stable Diffusion Toolkit</title>
<link rel="shortcut icon" type="icon" href="./assets/favicon.0d253ced.ico" /> <link rel="shortcut icon" type="icon" href="./assets/favicon.0d253ced.ico" />
<script type="module" crossorigin src="./assets/index.c9288511.js"></script> <script type="module" crossorigin src="./assets/index.366cfb7e.js"></script>
<link rel="stylesheet" href="./assets/index.9dddc756.css"> <link rel="stylesheet" href="./assets/index.25bb1c01.css">
</head> </head>
<body> <body>

2
frontend/src/app/socketio/listeners.ts
View File

@ -294,7 +294,7 @@ const makeSocketIOListeners = (
onModelChanged: (data: InvokeAI.ModelChangeResponse) => { onModelChanged: (data: InvokeAI.ModelChangeResponse) => {
const { model_name, model_list } = data; const { model_name, model_list } = data;
dispatch(setModelList(model_list)); dispatch(setModelList(model_list));
dispatch(setCurrentStatus('Connected')); dispatch(setCurrentStatus('Model Changed'));
dispatch(setIsProcessing(false)); dispatch(setIsProcessing(false));
dispatch(setIsCancelable(false)); dispatch(setIsCancelable(false));
dispatch( dispatch(

1
frontend/src/common/components/IAISwitch.scss
View File

@ -9,6 +9,7 @@
margin-right: 0; margin-right: 0;
margin-bottom: 0.1rem; margin-bottom: 0.1rem;
white-space: nowrap; white-space: nowrap;
width: auto;
.invokeai__switch-root { .invokeai__switch-root {
span { span {

27
frontend/src/common/components/IAISwitch.tsx
View File

@ -1,8 +1,18 @@
import { FormControl, FormLabel, Switch, SwitchProps } from '@chakra-ui/react'; import {
FormControl,
FormControlProps,
FormLabel,
FormLabelProps,
Switch,
SwitchProps,
} from '@chakra-ui/react';
interface Props extends SwitchProps { interface Props extends SwitchProps {
label?: string; label?: string;
width?: string | number; width?: string | number;
styleClass?: string;
formControlProps?: FormControlProps;
formLabelProps?: FormLabelProps;
} }
/** /**
@ -12,26 +22,31 @@ const IAISwitch = (props: Props) => {
const { const {
label, label,
isDisabled = false, isDisabled = false,
fontSize = 'md', // fontSize = 'md',
size = 'md', // size = 'md',
width = 'auto', width = 'auto',
formControlProps,
formLabelProps,
styleClass,
...rest ...rest
} = props; } = props;
return ( return (
<FormControl <FormControl
isDisabled={isDisabled} isDisabled={isDisabled}
width={width} width={width}
className="invokeai__switch-form-control" className={`invokeai__switch-form-control ${styleClass}`}
{...formControlProps}
> >
<FormLabel <FormLabel
className="invokeai__switch-form-label" className="invokeai__switch-form-label"
fontSize={fontSize} // fontSize={fontSize}
whiteSpace="nowrap" whiteSpace="nowrap"
{...formLabelProps}
> >
{label} {label}
<Switch <Switch
className="invokeai__switch-root" className="invokeai__switch-root"
size={size} // size={size}
// className="switch-button" // className="switch-button"
{...rest} {...rest}
/> />

35
frontend/src/features/system/SettingsModal/ModelList.scss
View File

@ -1,9 +1,36 @@
.model-list { .model-list {
display: flex; .chakra-accordion {
flex-direction: column; display: grid;
row-gap: 0.5rem; row-gap: 0.5rem;
}
.model-list-header { .chakra-accordion__item {
border: none;
border-radius: 0.3rem;
background-color: var(--tab-hover-color);
}
button {
border-radius: 0.3rem !important;
&[aria-expanded='true'] {
background-color: var(--tab-hover-color);
border-radius: 0.3rem;
}
}
.model-list-button {
display: flex;
flex-direction: row;
row-gap: 0.5rem;
justify-content: space-between;
align-items: center;
width: 100%;
}
.model-list-header-hint {
color: var(--text-color-secondary);
font-weight: normal;
} }
.model-list-list { .model-list-list {

75
frontend/src/features/system/SettingsModal/ModelList.tsx
View File

@ -1,8 +1,19 @@
import { Button, Tooltip, Spacer, Heading } from '@chakra-ui/react'; import {
Button,
Tooltip,
Spacer,
Accordion,
AccordionItem,
AccordionButton,
AccordionPanel,
AccordionIcon,
} from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import _ from 'lodash'; import _ from 'lodash';
import { Model, ModelStatus } from '../../../app/invokeai'; import { ModelStatus } from '../../../app/invokeai';
import { requestModelChange } from '../../../app/socketio/actions'; import { requestModelChange } from '../../../app/socketio/actions';
import { RootState, useAppDispatch, useAppSelector } from '../../../app/store'; import { RootState, useAppDispatch, useAppSelector } from '../../../app/store';
import { SystemState } from '../systemSlice';
type ModelListItemProps = { type ModelListItemProps = {
name: string; name: string;
@ -11,6 +22,10 @@ type ModelListItemProps = {
}; };
const ModelListItem = (props: ModelListItemProps) => { const ModelListItem = (props: ModelListItemProps) => {
const { isProcessing, isConnected } = useAppSelector(
(state: RootState) => state.system
);
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { name, status, description } = props; const { name, status, description } = props;
const handleChangeModel = () => { const handleChangeModel = () => {
@ -29,7 +44,7 @@ const ModelListItem = (props: ModelListItemProps) => {
<Button <Button
size={'sm'} size={'sm'}
onClick={handleChangeModel} onClick={handleChangeModel}
isDisabled={status === 'active'} isDisabled={status === 'active' || isProcessing || !isConnected}
> >
Load Load
</Button> </Button>
@ -38,24 +53,50 @@ const ModelListItem = (props: ModelListItemProps) => {
); );
}; };
const modelListSelector = createSelector(
(state: RootState) => state.system,
(system: SystemState) => {
const models = _.map(system.model_list, (model, key) => {
return { name: key, ...model };
});
const activeModel = models.find((model) => model.status === 'active');
return {
models,
activeModel: activeModel,
};
}
);
const ModelList = () => { const ModelList = () => {
const { model_list } = useAppSelector((state: RootState) => state.system); const { models } = useAppSelector(modelListSelector);
return ( return (
<div className="model-list"> <div className="model-list">
<Heading size={'md'} className="model-list-header"> <Accordion allowToggle>
Available Models <AccordionItem>
</Heading> <AccordionButton>
<div className="model-list-list"> <div className="model-list-button">
{_.map(model_list, (model: Model, key) => ( <h2>Models</h2>
<ModelListItem <AccordionIcon />
key={key} </div>
name={key} </AccordionButton>
status={model.status}
description={model.description} <AccordionPanel>
/> <div className="model-list-list">
))} {models.map((model, i) => (
</div> <ModelListItem
key={i}
name={model.name}
status={model.status}
description={model.description}
/>
))}
</div>
</AccordionPanel>
</AccordionItem>
</Accordion>
</div> </div>
); );
}; };

2
frontend/src/features/system/SettingsModal/SettingsModal.scss
View File

@ -25,8 +25,8 @@
background-color: var(--background-color); background-color: var(--background-color);
padding: 0.4rem 1rem; padding: 0.4rem 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
justify-content: space-between;
align-items: center; align-items: center;
width: 100%;
} }
} }

16
frontend/src/features/system/SettingsModal/SettingsModalItem.tsx
View File

@ -1,6 +1,5 @@
import { FormControl, FormLabel, Switch } from '@chakra-ui/react';
import React from 'react';
import { useAppDispatch } from '../../../app/store'; import { useAppDispatch } from '../../../app/store';
import IAISwitch from '../../../common/components/IAISwitch';
export default function SettingsModalItem({ export default function SettingsModalItem({
settingTitle, settingTitle,
@ -13,12 +12,11 @@ export default function SettingsModalItem({
}) { }) {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
return ( return (
<FormControl className="settings-modal-item"> <IAISwitch
<FormLabel marginBottom={1}>{settingTitle}</FormLabel> styleClass="settings-modal-item"
<Switch label={settingTitle}
isChecked={isChecked} isChecked={isChecked}
onChange={(e) => dispatch(dispatcher(e.target.checked))} onChange={(e) => dispatch(dispatcher(e.target.checked))}
/> />
</FormControl>
); );
} }