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

tweak(ui): style trigger phrases

Browse Source
This commit is contained in:
psychedelicious 2024-03-07 17:40:18 +11:00
parent b34624a2a8
commit 2ca65ab9fa
1 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Metadata/TriggerPhrases.tsx
View File

@ -3,6 +3,7 @@ import {
Flex,
FormControl,
FormErrorMessage,
FormLabel,
Input,
Tag,
TagCloseButton,
@ -10,10 +11,10 @@ import {
} from '@invoke-ai/ui-library';
import { skipToken } from '@reduxjs/toolkit/query';
import { useAppSelector } from 'app/store/storeHooks';
import { ModelListHeader } from 'features/modelManagerV2/subpanels/ModelManagerPanel/ModelListHeader';
import type { ChangeEvent } from 'react';
import { useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { PiPlusBold } from 'react-icons/pi';
import { useGetModelConfigQuery, useUpdateModelMutation } from 'services/api/endpoints/models';
import { isNonRefinerMainModelConfig } from 'services/api/types';
@ -77,13 +78,15 @@ export const TriggerPhrases = () => {
return (
<Flex flexDir="column" w="full" gap="5">
<ModelListHeader title={t('modelManager.triggerPhrases')} />
<form>
<FormControl w="full" isInvalid={Boolean(errors.length)}>
<FormControl w="full" isInvalid={Boolean(errors.length)} orientation="vertical">
<FormLabel>{t('modelManager.triggerPhrases')}</FormLabel>
<Flex flexDir="column" w="full">
<Flex gap="3" alignItems="center" w="full">
<Input value={phrase} onChange={handlePhraseChange} placeholder={t('modelManager.typePhraseHere')} />
<Button
leftIcon={<PiPlusBold />}
size="sm"
type="submit"
onClick={addTriggerPhrase}
isDisabled={Boolean(errors.length)}
@ -97,9 +100,9 @@ export const TriggerPhrases = () => {
</FormControl>
</form>
<Flex gap="4" flexWrap="wrap" mt="3" mb="3">
<Flex gap="4" flexWrap="wrap">
{triggerPhrases.map((phrase, index) => (
<Tag size="md" key={index}>
<Tag size="md" key={index} py={2} px={4} bg="base.700">
<TagLabel>{phrase}</TagLabel>
<TagCloseButton onClick={removeTriggerPhrase.bind(null, phrase)} isDisabled={isLoading} />
</Tag>