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 0adb7d4676
commit ac7ee9d0a5
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" />
<title>InvokeAI - A Stable Diffusion Toolkit</title>
<link rel="shortcut icon" type="icon" href="./assets/favicon.0d253ced.ico" />
<script type="module" crossorigin src="./assets/index.c9288511.js"></script>
<link rel="stylesheet" href="./assets/index.9dddc756.css">
<script type="module" crossorigin src="./assets/index.366cfb7e.js"></script>
<link rel="stylesheet" href="./assets/index.25bb1c01.css">
</head>
<body>

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

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

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

@ -9,6 +9,7 @@
margin-right: 0;
margin-bottom: 0.1rem;
white-space: nowrap;
width: auto;
.invokeai__switch-root {
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 {
label?: string;
width?: string | number;
styleClass?: string;
formControlProps?: FormControlProps;
formLabelProps?: FormLabelProps;
}
/**
@ -12,26 +22,31 @@ const IAISwitch = (props: Props) => {
const {
label,
isDisabled = false,
fontSize = 'md',
size = 'md',
// fontSize = 'md',
// size = 'md',
width = 'auto',
formControlProps,
formLabelProps,
styleClass,
...rest
} = props;
return (
<FormControl
isDisabled={isDisabled}
width={width}
className="invokeai__switch-form-control"
className={`invokeai__switch-form-control ${styleClass}`}
{...formControlProps}
>
<FormLabel
className="invokeai__switch-form-label"
fontSize={fontSize}
// fontSize={fontSize}
whiteSpace="nowrap"
{...formLabelProps}
>
{label}
<Switch
className="invokeai__switch-root"
size={size}
// size={size}
// className="switch-button"
{...rest}
/>

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

@ -1,9 +1,36 @@
.model-list {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
.chakra-accordion {
display: grid;
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 {

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

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

@ -25,8 +25,8 @@
background-color: var(--background-color);
padding: 0.4rem 1rem;
border-radius: 0.5rem;
justify-content: space-between;
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 IAISwitch from '../../../common/components/IAISwitch';
export default function SettingsModalItem({
settingTitle,
@ -13,12 +12,11 @@ export default function SettingsModalItem({
}) {
const dispatch = useAppDispatch();
return (
<FormControl className="settings-modal-item">
<FormLabel marginBottom={1}>{settingTitle}</FormLabel>
<Switch
isChecked={isChecked}
onChange={(e) => dispatch(dispatcher(e.target.checked))}
/>
</FormControl>
<IAISwitch
styleClass="settings-modal-item"
label={settingTitle}
isChecked={isChecked}
onChange={(e) => dispatch(dispatcher(e.target.checked))}
/>
);
}