diff --git a/servers/nextjs/app/(presentation-generator)/(dashboard)/settings/ImageProvider.tsx b/servers/nextjs/app/(presentation-generator)/(dashboard)/settings/ImageProvider.tsx new file mode 100644 index 00000000..1a0d006b --- /dev/null +++ b/servers/nextjs/app/(presentation-generator)/(dashboard)/settings/ImageProvider.tsx @@ -0,0 +1,396 @@ +import ToolTip from '@/components/ToolTip' +import { Button } from '@/components/ui/button' +import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command' +import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover' +import { Select, SelectItem, SelectContent, SelectTrigger, SelectValue } from '@/components/ui/select' +import { Switch } from '@/components/ui/switch' +import { cn } from '@/lib/utils' +import { LLMConfig } from '@/types/llm_config' +import { DALLE_3_QUALITY_OPTIONS, GPT_IMAGE_1_5_QUALITY_OPTIONS, IMAGE_PROVIDERS } from '@/utils/providerConstants' +import { Check, ChevronsUpDown } from 'lucide-react' +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, + DISABLE_IMAGE_GENERATION: value + })); + } + const input_field_changed = (value: string, field: string) => { + setLlmConfig((prev: any) => ({ + ...prev, + [field]: value + })); + setOpenImageProviderSelect(false); + } + + + + + const renderQualitySelector = (llmConfig: LLMConfig, input_field_changed: (value: string, field: string) => void) => { + if (llmConfig.IMAGE_PROVIDER === "dall-e-3") { + return ( +
+ +
+ + {/* {DALLE_3_QUALITY_OPTIONS.map((option) => ( + + ))} */} +
+
+ ); + } + + if (llmConfig.IMAGE_PROVIDER === "gpt-image-1.5") { + return ( +
+ +
+ + {/* {GPT_IMAGE_1_5_QUALITY_OPTIONS.map((option) => ( + + ))} */} +
+
+ ); + } + + return null; + }; + + + + + return ( +
+ {/* API Key Input */} +
+ +
+ handleChangeImageGenerationDisabled(checked)} + /> +
+ + +
+ + +
+
+ image-markup +
+

Image Generation Settings

+

+ Choosing where images come from +

+
+
+ + + {!isImageGenerationDisabled && ( + <> + {/* Image Provider Selection */} +
+ +
+ + + + + + + + + No provider found. + + {Object.values(IMAGE_PROVIDERS).map( + (provider, index) => ( + { + input_field_changed(value, "IMAGE_PROVIDER"); + setOpenImageProviderSelect(false); + }} + > + +
+
+
+ + {provider.label} + +
+ + {provider.description} + +
+
+ + ) + )} + + + + + +
+
+ + + + {/* 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 <>; + } + + if ( + provider.value === "GPT_IMAGE_1_5" && + llmConfig.LLM === "openai" + ) { + return <>; + } + + 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") { + return ( +
+
+ +
+ { + input_field_changed( + e.target.value, + "COMFYUI_URL" + ); + }} + /> +
+

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

+
+
+ +
+