fix(ui): clear prompt template when prompts are recalled

This commit is contained in:
Mary Hipp 2024-08-20 15:04:03 -04:00 committed by psychedelicious
parent d4797e37dc
commit e85f221aca
2 changed files with 24 additions and 4 deletions

View File

@ -1723,6 +1723,7 @@
"positivePrompt": "Positive Prompt", "positivePrompt": "Positive Prompt",
"preview": "Preview", "preview": "Preview",
"private": "Private", "private": "Private",
"promptTemplateCleared": "Prompt Template Cleared",
"searchByName": "Search by name", "searchByName": "Search by name",
"shared": "Shared", "shared": "Shared",
"sharedTemplates": "Shared Templates", "sharedTemplates": "Shared Templates",

View File

@ -1,14 +1,20 @@
import { skipToken } from '@reduxjs/toolkit/query'; import { skipToken } from '@reduxjs/toolkit/query';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { handlers, parseAndRecallAllMetadata, parseAndRecallPrompts } from 'features/metadata/util/handlers'; import { handlers, parseAndRecallAllMetadata, parseAndRecallPrompts } from 'features/metadata/util/handlers';
import { $stylePresetModalState } from 'features/stylePresets/store/stylePresetModal'; import { $stylePresetModalState } from 'features/stylePresets/store/stylePresetModal';
import { activeStylePresetIdChanged } from 'features/stylePresets/store/stylePresetSlice';
import { toast } from 'features/toast/toast';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { useCallback, useEffect, useState } from 'react'; import { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useGetImageDTOQuery } from 'services/api/endpoints/images'; import { useGetImageDTOQuery } from 'services/api/endpoints/images';
import { useDebouncedMetadata } from 'services/api/hooks/useDebouncedMetadata'; import { useDebouncedMetadata } from 'services/api/hooks/useDebouncedMetadata';
export const useImageActions = (image_name?: string) => { export const useImageActions = (image_name?: string) => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
const activeTabName = useAppSelector(activeTabNameSelector); const activeTabName = useAppSelector(activeTabNameSelector);
const activeStylePresetId = useAppSelector((s) => s.stylePreset.activeStylePresetId);
const { metadata, isLoading: isLoadingMetadata } = useDebouncedMetadata(image_name); const { metadata, isLoading: isLoadingMetadata } = useDebouncedMetadata(image_name);
const [hasMetadata, setHasMetadata] = useState(false); const [hasMetadata, setHasMetadata] = useState(false);
const [hasSeed, setHasSeed] = useState(false); const [hasSeed, setHasSeed] = useState(false);
@ -46,14 +52,26 @@ export const useImageActions = (image_name?: string) => {
parseMetadata(); parseMetadata();
}, [metadata]); }, [metadata]);
const clearStylePreset = useCallback(() => {
if (activeStylePresetId) {
dispatch(activeStylePresetIdChanged(null));
toast({
status: 'info',
title: t('stylePresets.promptTemplateCleared'),
});
}
}, [dispatch, activeStylePresetId, t]);
const recallAll = useCallback(() => { const recallAll = useCallback(() => {
parseAndRecallAllMetadata(metadata, activeTabName === 'generation'); parseAndRecallAllMetadata(metadata, activeTabName === 'generation');
}, [activeTabName, metadata]); clearStylePreset();
}, [activeTabName, metadata, clearStylePreset]);
const remix = useCallback(() => { const remix = useCallback(() => {
// Recalls all metadata parameters except seed // Recalls all metadata parameters except seed
parseAndRecallAllMetadata(metadata, activeTabName === 'generation', ['seed']); parseAndRecallAllMetadata(metadata, activeTabName === 'generation', ['seed']);
}, [activeTabName, metadata]); clearStylePreset();
}, [activeTabName, metadata, clearStylePreset]);
const recallSeed = useCallback(() => { const recallSeed = useCallback(() => {
handlers.seed.parse(metadata).then((seed) => { handlers.seed.parse(metadata).then((seed) => {
@ -63,7 +81,8 @@ export const useImageActions = (image_name?: string) => {
const recallPrompts = useCallback(() => { const recallPrompts = useCallback(() => {
parseAndRecallPrompts(metadata); parseAndRecallPrompts(metadata);
}, [metadata]); clearStylePreset();
}, [metadata, clearStylePreset]);
const createAsPreset = useCallback(async () => { const createAsPreset = useCallback(async () => {
if (image_name && metadata && imageDTO) { if (image_name && metadata && imageDTO) {