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) {