github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-01-15 06:18:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): do not highlight starting frame image in red when it is not required

Browse Source
This commit is contained in:
psychedelicious
2025-08-28 15:55:01 +10:00
committed by Mary Hipp Rogers
parent 72851d3e84
commit 01bef5d165
3 changed files with 23 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
invokeai/frontend/web/src/features/parameters/store/videoSlice.ts
View File

@@ -27,6 +27,7 @@ import { modelConfigsAdapterSelectors, selectModelConfigsQuery } from 'services/
import { isVideoModelConfig } from 'services/api/types';
import { assert } from 'tsafe';
import z from 'zod';
import { REQUIRES_STARTING_FRAME_BASE_MODELS } from '../types/constants';
const zVideoState = z.object({
_version: z.literal(1),
@@ -124,7 +125,7 @@ export const videoSliceConfig: SliceConfig<typeof slice> = {
};
export const selectVideoSlice = (state: RootState) => state.video;
const createVideoSelector = <T>(selector: Selector<VideoState, T>) => createSelector(selectVideoSlice, selector);
const createVideoSelector = <T,>(selector: Selector<VideoState, T>) => createSelector(selectVideoSlice, selector);
export const selectStartingFrameImage = createVideoSelector((video) => video.startingFrameImage);
export const selectVideoModel = createVideoSelector((video) => video.videoModel);
@@ -154,3 +155,7 @@ export const selectVideoModelConfig = createSelector(
return modelConfig;
}
);
export const selectVideoModelRequiresStartingFrame = createSelector(
selectVideoModel,
(model) => !!model && REQUIRES_STARTING_FRAME_BASE_MODELS.includes(model.base)
);

2
invokeai/frontend/web/src/features/parameters/types/constants.ts
View File

@@ -187,3 +187,5 @@ export const SUPPORTS_ASPECT_RATIO_BASE_MODELS: BaseModelType[] = [
];
export const VIDEO_BASE_MODELS = ['veo3', 'runway'];
export const REQUIRES_STARTING_FRAME_BASE_MODELS = ['runway'];

17
invokeai/frontend/web/src/features/settingsAccordions/components/VideoSettingsAccordion/StartingFrameImage.tsx
View File

@@ -6,7 +6,11 @@ import { videoFrameFromImageDndTarget } from 'features/dnd/dnd';
import { DndDropTarget } from 'features/dnd/DndDropTarget';
import { DndImage } from 'features/dnd/DndImage';
import { DndImageIcon } from 'features/dnd/DndImageIcon';
import { selectStartingFrameImage, startingFrameImageChanged } from 'features/parameters/store/videoSlice';
import {
selectStartingFrameImage,
selectVideoModelRequiresStartingFrame,
startingFrameImageChanged,
} from 'features/parameters/store/videoSlice';
import { t } from 'i18next';
import { useCallback } from 'react';
import { PiArrowCounterClockwiseBold } from 'react-icons/pi';
@@ -17,6 +21,7 @@ const dndTargetData = videoFrameFromImageDndTarget.getData({ frame: 'start' });
export const StartingFrameImage = () => {
const dispatch = useAppDispatch();
const requiresStartingFrame = useAppSelector(selectVideoModelRequiresStartingFrame);
const startingFrameImage = useAppSelector(selectStartingFrameImage);
const imageDTO = useImageDTO(startingFrameImage?.image_name);
@@ -34,7 +39,15 @@ export const StartingFrameImage = () => {
return (
<Flex justifyContent="flex-start" flexDir="column" gap={2}>
<Flex position="relative" w={36} h={36} alignItems="center" justifyContent="center">
{!imageDTO && <UploadImageIconButton w="full" h="full" isError={!imageDTO} onUpload={onUpload} fontSize={36} />}
{!imageDTO && (
<UploadImageIconButton
w="full"
h="full"
isError={requiresStartingFrame && !imageDTO}
onUpload={onUpload}
fontSize={36}
/>
)}
{imageDTO && (
<>
<DndImage imageDTO={imageDTO} borderRadius="base" borderWidth={1} borderStyle="solid" />