diff --git a/src/renderer/src/config/models/video.ts b/src/renderer/src/config/models/video.ts new file mode 100644 index 0000000000..cfbf3d628f --- /dev/null +++ b/src/renderer/src/config/models/video.ts @@ -0,0 +1,6 @@ +import { SystemProviderId } from '@renderer/types' + +// Hard-encoded for now. We may implement a function to filter video generation model from provider.models. +export const videoModelsMap = { + openai: ['sora-2', 'sora-2-pro'] as const +} as const satisfies Partial> diff --git a/src/renderer/src/pages/video/VideoPage.tsx b/src/renderer/src/pages/video/VideoPage.tsx index 46b9b72d13..30643299b2 100644 --- a/src/renderer/src/pages/video/VideoPage.tsx +++ b/src/renderer/src/pages/video/VideoPage.tsx @@ -4,19 +4,47 @@ import { Divider } from '@heroui/react' import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar' import { useProvider } from '@renderer/hooks/useProvider' import { SystemProviderIds } from '@renderer/types' -import { useState } from 'react' +import { CreateVideoParams } from '@renderer/types/video' +import { isVideoModel } from '@renderer/utils/model/video' +import { DeepPartial } from 'ai' +import { merge } from 'lodash' +import { useCallback, useState } from 'react' import { useTranslation } from 'react-i18next' import { ModelSetting } from './settings/ModelSetting' +import { OpenAIParamSettings } from './settings/OpenAIParamSettings' import { ProviderSetting } from './settings/ProviderSetting' +import { SettingsGroup } from './settings/shared' import { VideoList } from './VideoList' import { VideoPanel } from './VideoPanel' export const VideoPage = () => { const { t } = useTranslation() const [providerId, setProviderId] = useState(SystemProviderIds.openai) - const [modelId, setModelId] = useState('sora-2') const { provider } = useProvider(providerId) + const [params, setParams] = useState({ + type: 'openai', + provider, + params: { + model: 'sora-2', + prompt: '' + }, + options: {} + }) + + const updateParams = useCallback((update: DeepPartial>) => { + setParams((prev) => merge({}, prev, update)) + }, []) + + const updateModelId = useCallback( + (id: string) => { + if (isVideoModel(id)) { + updateParams({ params: { model: id } }) + } + }, + [updateParams] + ) + return (
@@ -25,8 +53,15 @@ export const VideoPage = () => {
{/* Settings */}
- - + + + + + {provider.type === 'openai-response' && }
diff --git a/src/renderer/src/pages/video/settings/ModelSetting.tsx b/src/renderer/src/pages/video/settings/ModelSetting.tsx index b6ed460136..71b529966e 100644 --- a/src/renderer/src/pages/video/settings/ModelSetting.tsx +++ b/src/renderer/src/pages/video/settings/ModelSetting.tsx @@ -1,14 +1,14 @@ import { Select, SelectItem } from '@heroui/react' -import { Model, SystemProviderId } from '@renderer/types' -import { Dispatch, SetStateAction } from 'react' +import { videoModelsMap } from '@renderer/config/models/video' +import { Model } from '@renderer/types' import { useTranslation } from 'react-i18next' -import { SettingItem, SettingTitle } from './shared' +import { SettingItem } from './shared' export interface ModelSettingProps { providerId: string modelId: string - setModelId: Dispatch> + setModelId: (id: string) => void } interface ModelSelectItem extends Model { @@ -16,11 +16,6 @@ interface ModelSelectItem extends Model { label: string } -// Hard-encoded for now. We may implement a function to filter video generation model from provider.models. -const videoModelsMap = { - openai: ['sora-2', 'sora-2-pro'] as const -} as const satisfies Partial> - export const ModelSetting = ({ providerId, modelId, setModelId }: ModelSettingProps) => { const { t } = useTranslation() @@ -28,8 +23,9 @@ export const ModelSetting = ({ providerId, modelId, setModelId }: ModelSettingPr return ( -