diff --git a/servers/nextjs/app/(presentation-generator)/(dashboard)/dashboard/components/Header.tsx b/servers/nextjs/app/(presentation-generator)/(dashboard)/dashboard/components/Header.tsx index d88d8894..6c1f4c0e 100644 --- a/servers/nextjs/app/(presentation-generator)/(dashboard)/dashboard/components/Header.tsx +++ b/servers/nextjs/app/(presentation-generator)/(dashboard)/dashboard/components/Header.tsx @@ -18,35 +18,13 @@ const Header = () => { {/* {(pathname !== "/upload" && pathname !== "/dashboard") && } */} trackEvent(MixpanelEvent.Navigation, { from: pathname, to: "/dashboard" })}> Presentation logo -
- trackEvent(MixpanelEvent.Navigation, { from: pathname, to: "/custom-template" })} - className="flex items-center gap-2 px-3 py-2 text-[#101323] rounded-md transition-colors outline-none" - role="menuitem" - > - - Create Template - - trackEvent(MixpanelEvent.Navigation, { from: pathname, to: "/template-preview" })} - className="flex items-center gap-2 px-3 py-2 text-[#101323] rounded-md transition-colors outline-none" - role="menuitem" - > - - Templates - - -
+ diff --git a/servers/nextjs/app/(presentation-generator)/(dashboard)/settings/ImageProvider.tsx b/servers/nextjs/app/(presentation-generator)/(dashboard)/settings/ImageProvider.tsx index 1a0d006b..96777dbd 100644 --- a/servers/nextjs/app/(presentation-generator)/(dashboard)/settings/ImageProvider.tsx +++ b/servers/nextjs/app/(presentation-generator)/(dashboard)/settings/ImageProvider.tsx @@ -13,7 +13,6 @@ import React, { useState } from 'react' const ImageProvider = ({ llmConfig, setLlmConfig }: { llmConfig: LLMConfig, setLlmConfig: (config: any) => void }) => { const [openImageProviderSelect, setOpenImageProviderSelect] = useState(false); const isImageGenerationDisabled = llmConfig.DISABLE_IMAGE_GENERATION ?? false; - console.log(llmConfig); const handleChangeImageGenerationDisabled = (value: boolean) => { setLlmConfig((prev: any) => ({ ...prev, @@ -28,13 +27,39 @@ const ImageProvider = ({ llmConfig, setLlmConfig }: { llmConfig: LLMConfig, setL setOpenImageProviderSelect(false); } + const getFieldValue = (field?: string) => { + if (!field) return ""; + return (llmConfig as Record)[field] || ""; + }; + + const updateFieldValue = (field: string | undefined, value: string) => { + if (!field) return; + setLlmConfig((prev: any) => ({ + ...prev, + [field]: value, + })); + }; + + const getTextProviderApiField = () => { + if (llmConfig.LLM === "openai") return "OPENAI_API_KEY"; + if (llmConfig.LLM === "google") return "GOOGLE_API_KEY"; + if (llmConfig.LLM === "anthropic") return "ANTHROPIC_API_KEY"; + return ""; + }; + + const shouldHideImageApiKeyInput = (providerValue: string, providerApiKeyField?: string) => { + if (!providerApiKeyField) return true; + if (providerValue === "comfyui") return false; + return providerApiKeyField === getTextProviderApiField(); + }; + const renderQualitySelector = (llmConfig: LLMConfig, input_field_changed: (value: string, field: string) => void) => { if (llmConfig.IMAGE_PROVIDER === "dall-e-3") { return ( -
+
@@ -49,28 +74,7 @@ const ImageProvider = ({ llmConfig, setLlmConfig }: { llmConfig: LLMConfig, setL ))} - {/* {DALLE_3_QUALITY_OPTIONS.map((option) => ( - - ))} */} +
); @@ -78,7 +82,7 @@ const ImageProvider = ({ llmConfig, setLlmConfig }: { llmConfig: LLMConfig, setL if (llmConfig.IMAGE_PROVIDER === "gpt-image-1.5") { return ( -
+
@@ -98,28 +102,7 @@ const ImageProvider = ({ llmConfig, setLlmConfig }: { llmConfig: LLMConfig, setL ))} - {/* {GPT_IMAGE_1_5_QUALITY_OPTIONS.map((option) => ( - - ))} */} +
); @@ -139,6 +122,7 @@ const ImageProvider = ({ llmConfig, setLlmConfig }: { llmConfig: LLMConfig, setL
handleChangeImageGenerationDisabled(checked)} />
@@ -158,217 +142,192 @@ const ImageProvider = ({ llmConfig, setLlmConfig }: { llmConfig: LLMConfig, setL Choosing where images come from

-
+
+
- {!isImageGenerationDisabled && ( - <> - {/* Image Provider Selection */} -
- -
- - - - - + {/* Image Provider Selection */} +
+ +
+ - - - - No provider found. - - {Object.values(IMAGE_PROVIDERS).map( - (provider, index) => ( - { - input_field_changed(value, "IMAGE_PROVIDER"); - setOpenImageProviderSelect(false); - }} - > - -
-
-
- - {provider.label} + + + + + + + + No provider found. + + {Object.values(IMAGE_PROVIDERS).map( + (provider, index) => ( + { + input_field_changed(value, "IMAGE_PROVIDER"); + setOpenImageProviderSelect(false); + }} + > + +
+
+
+ + {provider.label} + +
+ + {provider.description}
- - {provider.description} -
-
- - ) - )} - - - - - + + ) + )} + + + + + +
-
- {/* Dynamic API Key Input for Image Provider */} - {llmConfig.IMAGE_PROVIDER && - IMAGE_PROVIDERS[llmConfig.IMAGE_PROVIDER] && - (() => { - const provider = IMAGE_PROVIDERS[llmConfig.IMAGE_PROVIDER]; + {/* Dynamic API Key Input for Image Provider */} + {llmConfig.IMAGE_PROVIDER && + IMAGE_PROVIDERS[llmConfig.IMAGE_PROVIDER] && + (() => { + const provider = IMAGE_PROVIDERS[llmConfig.IMAGE_PROVIDER]; - // Show info message when using same API key as main provider - if ( - provider.value === "DALL_E_3" && - llmConfig.LLM === "openai" - ) { - return <>; - } + // Show info message when using same API key as main provider + if (shouldHideImageApiKeyInput(provider.value, provider.apiKeyField)) { + return <>; + } - if ( - provider.value === "GPT_IMAGE_1_5" && - llmConfig.LLM === "openai" - ) { - return <>; - } + // Show ComfyUI configuration + if (provider.value === "comfyui") { + return ( +
+
+ +
+ { + input_field_changed( + e.target.value, + "COMFYUI_URL" + ); + }} + /> +
- if ( - provider.value === "GEMINI_FLASH" && - llmConfig.LLM === "google" - ) { - return <>; - } +
- if ( - provider.value === "NANO_BANANA_PRO" && - llmConfig.LLM === "google" - ) { - return <>; - } +
+ ); + } - // Show ComfyUI configuration - if (provider.value === "comfyui") { + // Show API key input for other providers return ( -
-
- -
- { - input_field_changed( - e.target.value, - "COMFYUI_URL" - ); - }} - /> -
-

- - Use your machine IP address (not localhost) when - running in Docker -

-
-
- -
-