Revert "add resolution as a generation setting"

This reverts commit b71829a827.

invokeai/frontend/web/public/locales/en.json

@@ -1307,7 +1307,6 @@
         "gaussianBlur": "Gaussian Blur",
         "boxBlur": "Box Blur",
         "staged": "Staged",
-        "resolution": "Resolution",
         "modelDisabledForTrial": "Generating with {{modelName}} is not available on trial accounts. Visit your <LinkComponent>account settings</LinkComponent> to upgrade."
     },
     "dynamicPrompts": {

invokeai/frontend/web/src/features/controlLayers/store/paramsSlice.ts

@@ -5,7 +5,7 @@ import type { SliceConfig } from 'app/store/types';
 import { deepClone } from 'common/util/deepClone';
 import { roundDownToMultiple, roundToMultiple } from 'common/util/roundDownToMultiple';
 import { clamp } from 'es-toolkit/compat';
-import type { AspectRatioID, ParamsState, RgbaColor } from 'features/controlLayers/store/types';
+import type { AspectRatioID, ParamsState, RgbaColor, Veo3Duration } from 'features/controlLayers/store/types';
 import {
   ASPECT_RATIO_MAP,
   CHATGPT_ASPECT_RATIOS,
@@ -380,6 +380,9 @@ const slice = createSlice({
         state.dimensions.rect.height = bboxDims.height;
       }
     },
+    setVideoDuration: (state, action: PayloadAction<Veo3Duration>) => {
+      state.videoDuration = action.payload;
+    },
     paramsReset: (state) => resetState(state),
   },
 });
@@ -481,6 +484,7 @@ export const {
   syncedToOptimalDimension,
 
   paramsReset,
+  setVideoDuration,
 } = slice.actions;
 
 export const paramsSliceConfig: SliceConfig<typeof slice> = {
@@ -605,6 +609,7 @@ export const selectHeight = createParamsSelector((params) => params.dimensions.r
 export const selectAspectRatioID = createParamsSelector((params) => params.dimensions.aspectRatio.id);
 export const selectAspectRatioValue = createParamsSelector((params) => params.dimensions.aspectRatio.value);
 export const selectAspectRatioIsLocked = createParamsSelector((params) => params.dimensions.aspectRatio.isLocked);
+export const selectVideoDuration = createParamsSelector((params) => params.videoDuration);
 
 export const selectMainModelConfig = createSelector(
   selectModelConfigsQuery,

invokeai/frontend/web/src/features/controlLayers/store/types.ts

@@ -490,15 +490,6 @@ export const VEO3_ASPECT_RATIOS: Record<Veo3AspectRatio, Dimensions> = {
   '16:9': { width: 1280, height: 720 },
 };
 
-export const zVeo3Resolution = z.enum(['720p', '1080p']);
-export type Veo3Resolution = z.infer<typeof zVeo3Resolution>;
-export const isVeo3Resolution = (v: unknown): v is Veo3Resolution =>
-  zVeo3Resolution.safeParse(v).success;
-export const VEO3_RESOLUTIONS: Record<Veo3Resolution, Dimensions> = {
-  '720p': { width: 1280, height: 720 },
-  '1080p': { width: 1920, height: 1080 },
-};
-
 const zAspectRatioConfig = z.object({
   id: zAspectRatioID,
   value: z.number().gt(0),
@@ -594,6 +585,7 @@ export const zParamsState = z.object({
   clipGEmbedModel: zParameterCLIPGEmbedModel.nullable(),
   controlLora: zParameterControlLoRAModel.nullable(),
   dimensions: zDimensionsState,
+  videoDuration: zVeo3DurationID,
 });
 export type ParamsState = z.infer<typeof zParamsState>;
 export const getInitialParamsState = (): ParamsState => ({
@@ -644,6 +636,7 @@ export const getInitialParamsState = (): ParamsState => ({
     rect: { x: 0, y: 0, width: 512, height: 512 },
     aspectRatio: deepClone(DEFAULT_ASPECT_RATIO_CONFIG),
   },
+  videoDuration: '8',
 });
 
 const zInpaintMasks = z.object({

invokeai/frontend/web/src/features/nodes/util/graph/generation/buildVeo3VideoGraph.ts

@@ -29,7 +29,7 @@ export const buildVeo3VideoGraph = (arg: GraphBuilderArg): GraphBuilderReturn =>
 
   
   const { seed, shouldRandomizeSeed } = params;
-  const { videoModel, videoResolution, videoDuration } = videoParams;
+  const { videoModel } = videoParams;
   const finalSeed = shouldRandomizeSeed ? undefined : seed;
 
   const g = new Graph(getPrefixedId('veo3_video_graph'));
@@ -45,9 +45,8 @@ export const buildVeo3VideoGraph = (arg: GraphBuilderArg): GraphBuilderReturn =>
     id: getPrefixedId('google_veo_3_generate_video'),
     // @ts-expect-error: This node is not available in the OSS application
     type: 'google_veo_3_generate_video',
-    model: videoModel,
-    aspect_ratio: "16:9",
-    resolution: videoResolution,
+    model: videoParams.videoModel,
+    aspect_ratio: params.dimensions.aspectRatio.id,
     seed: finalSeed,
   });
 
@@ -66,7 +65,7 @@ export const buildVeo3VideoGraph = (arg: GraphBuilderArg): GraphBuilderReturn =>
   g.upsertMetadata({
     positive_prompt: prompts.positive,
     negative_prompt: prompts.negative || '',
-    video_duration: videoDuration,
+    video_duration: params.videoDuration,
     video_aspect_ratio: params.dimensions.aspectRatio.id,
     seed: finalSeed,
     generation_type: 'image-to-video',

invokeai/frontend/web/src/features/parameters/components/Video/ParamDuration.tsx

@@ -1,6 +1,6 @@
 import { FormControl, FormLabel, Select } from "@invoke-ai/ui-library";
 import { useAppDispatch, useAppSelector } from "app/store/storeHooks";
-import {  selectVideoDuration, videoDurationChanged } from "features/parameters/store/videoSlice";
+import {  selectVideoDuration, setVideoDuration } from "features/controlLayers/store/paramsSlice";
 import { isVeo3DurationID, VEO3_DURATIONS, zVeo3DurationID } from "features/controlLayers/store/types";
 import type { ChangeEventHandler} from "react";
 import { useCallback, useMemo } from "react";
@@ -28,7 +28,7 @@ export const ParamDuration = () => {
         return;
       }
 
-      dispatch(videoDurationChanged(duration));
+      dispatch(setVideoDuration(duration));
     },
     [dispatch]
   );

invokeai/frontend/web/src/features/parameters/components/Video/ParamResolution.tsx

@@ -1,50 +0,0 @@
-import { FormControl, FormLabel, Select } from "@invoke-ai/ui-library";
-import { useAppDispatch, useAppSelector } from "app/store/storeHooks";
-import { aspectRatioIdChanged, heightChanged, widthChanged } from "features/controlLayers/store/paramsSlice";
-import { isVeo3Resolution, VEO3_RESOLUTIONS, zVeo3Resolution } from "features/controlLayers/store/types";
-import { selectVideoResolution, videoResolutionChanged } from "features/parameters/store/videoSlice";
-import { ChangeEventHandler, useCallback, useEffect, useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { PiCaretDownBold } from "react-icons/pi";
-
-export const ParamResolution = () => {
-  const videoResolution = useAppSelector(selectVideoResolution);
-  const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-
-  const options = useMemo(() => zVeo3Resolution.options, []);
-
-  useEffect(() => {
-    if (!videoResolution) {
-      return;
-    }
-    dispatch(aspectRatioIdChanged({ id: '16:9' }));
-    dispatch(widthChanged({ width: VEO3_RESOLUTIONS[videoResolution].width, updateAspectRatio: true, clamp: true }));
-    dispatch(heightChanged({ height: VEO3_RESOLUTIONS[videoResolution].height, updateAspectRatio: true, clamp: true }));
-  }, [dispatch, videoResolution]);
-
-  const onChange = useCallback<ChangeEventHandler<HTMLSelectElement>>(
-    (e) => {
-      const resolution = e.target.value;
-      if (!isVeo3Resolution(resolution)) {
-        return;
-      }
-
-      dispatch(videoResolutionChanged(resolution));
-    },
-    [dispatch]
-  );
-
-  const value = useMemo(() => options.find((o) => o === videoResolution), [videoResolution]);
-
-  return <FormControl>
-    <FormLabel>{t('parameters.resolution')}</FormLabel>
-    <Select size="sm" value={value} onChange={onChange} cursor="pointer" iconSize="0.75rem" icon={<PiCaretDownBold />}>
-      {options.map((resolution) => (
-        <option key={resolution} value={resolution}>
-          {resolution}
-        </option>
-      ))}
-    </Select>
-  </FormControl>;
-};

invokeai/frontend/web/src/features/parameters/store/videoSlice.ts

@@ -3,8 +3,8 @@ import { createSelector, createSlice } from '@reduxjs/toolkit';
 import type { RootState } from 'app/store/store';
 import type { SliceConfig } from 'app/store/types';
 import { isPlainObject } from 'es-toolkit';
-import type { ImageWithDims, Veo3Duration, Veo3Resolution } from 'features/controlLayers/store/types';
-import { zImageWithDims, zVeo3DurationID, zVeo3Resolution } from 'features/controlLayers/store/types';
+import type { ImageWithDims } from 'features/controlLayers/store/types';
+import { zImageWithDims } from 'features/controlLayers/store/types';
 import type { VideoField } from 'features/nodes/types/common';
 import { zModelIdentifierField, zVideoField } from 'features/nodes/types/common';
 import { ModelIdentifier } from 'features/nodes/types/v2/common';
@@ -16,9 +16,7 @@ const zVideoState = z.object({
   _version: z.literal(1),
   startingFrameImage: zImageWithDims.nullable(),
   generatedVideo: zVideoField.nullable(),
-  videoModel: zModelIdentifierField.nullable(), 
-  videoResolution: zVeo3Resolution.nullable(),
-  videoDuration: zVeo3DurationID.nullable(),
+  videoModel: zModelIdentifierField.nullable(),
 });
 
 export type VideoState = z.infer<typeof zVideoState>;
@@ -28,8 +26,6 @@ const getInitialState = (): VideoState => ({
   startingFrameImage: null,
   generatedVideo: null,
   videoModel: null,
-  videoResolution: '720p',
-  videoDuration: '8',
 });
 
 const slice = createSlice({
@@ -49,18 +45,10 @@ const slice = createSlice({
       const parsedModel = zModelIdentifierField.parse(action.payload);
       state.videoModel = parsedModel;
     },
-
-    videoResolutionChanged: (state, action: PayloadAction<Veo3Resolution | null>) => {
-      state.videoResolution = action.payload;
-    },
-
-    videoDurationChanged: (state, action: PayloadAction<Veo3Duration | null>) => {
-      state.videoDuration = action.payload;
-    },
   },
 });
 
-export const { startingFrameImageChanged, generatedVideoChanged, videoModelChanged, videoResolutionChanged, videoDurationChanged } = slice.actions;
+export const { startingFrameImageChanged, generatedVideoChanged, videoModelChanged } = slice.actions;
 
 export const videoSliceConfig: SliceConfig<typeof slice> = {
   slice,
@@ -83,5 +71,3 @@ const createVideoSelector = <T>(selector: Selector<VideoState, T>) => createSele
 export const selectStartingFrameImage = createVideoSelector((video) => video.startingFrameImage);
 export const selectGeneratedVideo = createVideoSelector((video) => video.generatedVideo);
 export const selectVideoModel = createVideoSelector((video) => video.videoModel);
-export const selectVideoResolution = createVideoSelector((video) => video.videoResolution);
-export const selectVideoDuration = createVideoSelector((video) => video.videoDuration);

invokeai/frontend/web/src/features/settingsAccordions/components/VideoSettingsAccordion/VideoSettingsAccordion.tsx

@@ -9,7 +9,6 @@ import { useTranslation } from 'react-i18next';
 
 import { StartingFrameImage } from './StartingFrameImage';
 import { VideoModelPicker } from './VideoModelPicker';
-import { ParamResolution } from 'features/parameters/components/Video/ParamResolution';
 
 
 export const VideoSettingsAccordion = memo(() => {
@@ -34,7 +33,6 @@ export const VideoSettingsAccordion = memo(() => {
                     <Flex gap={4} flexDirection="column" width="full">
                         <VideoModelPicker />
                         <ParamDuration />
-                        <ParamResolution />
                     </Flex>
                 </Flex>
                 <Dimensions />