diff --git a/web/public/Gemini.svg b/web/public/Gemini.svg new file mode 100755 index 00000000000..787c8371079 --- /dev/null +++ b/web/public/Gemini.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/src/app/admin/configuration/llm/interfaces.ts b/web/src/app/admin/configuration/llm/interfaces.ts index 61f81311ecf..54c12d1e8fa 100644 --- a/web/src/app/admin/configuration/llm/interfaces.ts +++ b/web/src/app/admin/configuration/llm/interfaces.ts @@ -4,6 +4,7 @@ import { AzureIcon, CPUIcon, OpenAIIcon, + GeminiIcon, OpenSourceIcon, } from "@/components/icons/icons"; import { FaRobot } from "react-icons/fa"; @@ -67,10 +68,17 @@ export interface LLMProviderDescriptor { display_model_names: string[] | null; } -export const getProviderIcon = (providerName: string) => { +export const getProviderIcon = (providerName: string, modelName?: string) => { switch (providerName) { case "openai": - return OpenAIIcon; + // Special cases for openai based on modelName + if (modelName?.toLowerCase().includes("gemini")) { + return GeminiIcon; + } + if (modelName?.toLowerCase().includes("claude")) { + return AnthropicIcon; + } + return OpenAIIcon; // Default for openai case "anthropic": return AnthropicIcon; case "bedrock": diff --git a/web/src/components/icons/icons.tsx b/web/src/components/icons/icons.tsx index a2f01084fd7..a3fca41242b 100644 --- a/web/src/components/icons/icons.tsx +++ b/web/src/components/icons/icons.tsx @@ -39,6 +39,7 @@ import Image, { StaticImageData } from "next/image"; import jiraSVG from "../../../public/Jira.svg"; import confluenceSVG from "../../../public/Confluence.svg"; import openAISVG from "../../../public/Openai.svg"; +import geminiSVG from "../../../public/Gemini.svg"; import openSourceIcon from "../../../public/OpenSource.png"; import litellmIcon from "../../../public/LiteLLM.jpg"; @@ -1096,6 +1097,11 @@ export const OpenAIIcon = ({ className = defaultTailwindCSS, }: IconProps) => ; +export const GeminiIcon = ({ + size = 16, + className = defaultTailwindCSS, +}: IconProps) => ; + export const VoyageIcon = ({ size = 16, className = defaultTailwindCSS, diff --git a/web/src/components/llm/LLMList.tsx b/web/src/components/llm/LLMList.tsx index 271c568c6d1..9ff640aaa25 100644 --- a/web/src/components/llm/LLMList.tsx +++ b/web/src/components/llm/LLMList.tsx @@ -49,7 +49,7 @@ export const LlmList: React.FC = ({ llmProvider.provider, modelName ), - icon: getProviderIcon(llmProvider.provider), + icon: getProviderIcon(llmProvider.provider, modelName), }); } } diff --git a/web/src/lib/hooks.ts b/web/src/lib/hooks.ts index a19c1eb7c4b..3645f8a5b56 100644 --- a/web/src/lib/hooks.ts +++ b/web/src/lib/hooks.ts @@ -292,6 +292,16 @@ const MODEL_DISPLAY_NAMES: { [key: string]: string } = { "claude-instant-1.2": "Claude Instant 1.2", "claude-3-5-sonnet-20240620": "Claude 3.5 Sonnet", "claude-3-5-sonnet-20241022": "Claude 3.5 Sonnet (New)", + "claude-3-5-sonnet-v2@20241022": "Claude 3.5 Sonnet (New)", + "claude-3.5-sonnet-v2@20241022": "Claude 3.5 Sonnet (New)", + + // Google Models + "gemini-1.5-pro": "Gemini 1.5 Pro", + "gemini-1.5-flash": "Gemini 1.5 Flash", + "gemini-1.5-pro-001": "Gemini 1.5 Pro", + "gemini-1.5-flash-001": "Gemini 1.5 Flash", + "gemini-1.5-pro-002": "Gemini 1.5 Pro (v2)", + "gemini-1.5-flash-002": "Gemini 1.5 Flash (v2)", // Bedrock models "meta.llama3-1-70b-instruct-v1:0": "Llama 3.1 70B", diff --git a/web/src/lib/llm/utils.ts b/web/src/lib/llm/utils.ts index 9a47dbc8071..b200ba39170 100644 --- a/web/src/lib/llm/utils.ts +++ b/web/src/lib/llm/utils.ts @@ -86,6 +86,13 @@ const MODEL_NAMES_SUPPORTING_IMAGE_INPUT = [ "anthropic.claude-3-haiku-20240307-v1:0", "anthropic.claude-3-5-sonnet-20240620-v1:0", "anthropic.claude-3-5-sonnet-20241022-v2:0", + // google gemini model names + "gemini-1.5-pro", + "gemini-1.5-flash", + "gemini-1.5-pro-001", + "gemini-1.5-flash-001", + "gemini-1.5-pro-002", + "gemini-1.5-flash-002", ]; export function checkLLMSupportsImageInput(model: string) {