diff --git a/src/App.svelte b/src/App.svelte
index 2212fe9..121404e 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -340,6 +340,23 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
Netflix
+ 
+
+
+ Twilio
+
+
+
+ Zurich
+
+ 
+ Rocket Money
+ Lemonade
+
+
+ The Weather Company
+
+ samsara
@@ -809,6 +826,37 @@ curl http://0.0.0.0:4000/v1/chat/completions \
letter-spacing: 0.04em;
}
+ .trust-logo-icon {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.35rem;
+ }
+
+ .trust-logo-icon svg {
+ flex-shrink: 0;
+ }
+
+ .trust-logo-svg {
+ filter: brightness(0);
+ opacity: 0.45;
+ }
+
+ .trust-logo-svg:hover {
+ filter: brightness(0);
+ opacity: 0.8;
+ }
+
+ @media (prefers-color-scheme: dark) {
+ .trust-logo-svg {
+ filter: brightness(0) invert(1);
+ opacity: 0.5;
+ }
+ .trust-logo-svg:hover {
+ filter: brightness(0) invert(1);
+ opacity: 0.9;
+ }
+ }
+
/* Search Section */
.search-section {
max-width: 1400px;
@@ -1090,7 +1138,7 @@ curl http://0.0.0.0:4000/v1/chat/completions \
width: 28px;
height: 28px;
border-radius: 6px;
- background-color: var(--bg-secondary);
+ background-color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
diff --git a/src/ProviderDropdown.svelte b/src/ProviderDropdown.svelte
index c6ad8df..3336cab 100644
--- a/src/ProviderDropdown.svelte
+++ b/src/ProviderDropdown.svelte
@@ -258,7 +258,7 @@
height: 24px;
border-radius: 50%;
object-fit: contain;
- background-color: var(--bg-color);
+ background-color: #ffffff;
padding: 3px;
flex-shrink: 0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
diff --git a/src/Providers.svelte b/src/Providers.svelte
index 0902084..fb90b93 100644
--- a/src/Providers.svelte
+++ b/src/Providers.svelte
@@ -457,7 +457,7 @@
.provider-avatar {
width: 40px; height: 40px; border-radius: 10px;
- background-color: var(--bg-secondary); display: flex; align-items: center;
+ background-color: #ffffff; display: flex; align-items: center;
justify-content: center; flex-shrink: 0; overflow: hidden;
position: relative; padding: 6px; border: 1px solid var(--border-color);
}
diff --git a/src/providers.ts b/src/providers.ts
index 3a0acb3..b7ac589 100644
--- a/src/providers.ts
+++ b/src/providers.ts
@@ -33,49 +33,107 @@ export function getProviderInitial(provider: string): string {
return provider.charAt(0).toUpperCase();
}
+const LOBEHUB_CDN = "https://cdn.jsdelivr.net/npm/@lobehub/icons-static-svg@latest/icons";
+const LITELLM_LOGOS = "https://raw.githubusercontent.com/BerriAI/litellm/main/ui/litellm-dashboard/public/assets/logos";
+
/**
- * Get the logo URL for a provider from the LiteLLM GitHub repository
- * Returns null if no logo is available for the provider
+ * Get the logo URL for a provider.
+ * Uses LobeHub icon CDN for most providers, falls back to LiteLLM repo for a few.
+ * Returns null if no logo is available.
*/
export function getProviderLogo(provider: string): string | null {
if (!provider) return null;
-
- // Map provider names to their logo filenames in the LiteLLM repo (actual files from GitHub)
- const providerLogoMap: { [key: string]: string } = {
- "openai": "openai_small.svg",
- "azure": "microsoft_azure.svg",
+
+ const lobehubMap: { [key: string]: string } = {
+ "openai": "openai.svg",
+ "azure": "azure.svg",
+ "azure_ai": "azureai.svg",
+ "azure_text": "azure.svg",
"anthropic": "anthropic.svg",
"bedrock": "bedrock.svg",
+ "bedrock_converse": "bedrock.svg",
"vertex_ai": "google.svg",
"vertexai": "google.svg",
"cohere": "cohere.svg",
+ "cohere_chat": "cohere.svg",
"groq": "groq.svg",
"mistral": "mistral.svg",
- "deepinfra": "deepinfra.png",
- "databricks": "databricks.svg",
+ "deepinfra": "deepinfra.svg",
"fireworks_ai": "fireworks.svg",
"fireworks": "fireworks.svg",
"ollama": "ollama.svg",
"openrouter": "openrouter.svg",
"deepseek": "deepseek.svg",
"cerebras": "cerebras.svg",
- "oracle": "oracle.svg",
- "text-completion-openai": "openai_small.svg",
+ "text-completion-openai": "openai.svg",
"text-completion-codestral": "mistral.svg",
"codestral": "mistral.svg",
"sagemaker": "aws.svg",
"aws": "aws.svg",
+ "aws_polly": "aws.svg",
"google": "google.svg",
"gemini": "google.svg",
+ "google_pse": "google.svg",
+ "palm": "palm.svg",
+ "ai21": "ai21.svg",
+ "aleph_alpha": "alephalpha.svg",
+ "anyscale": "anyscale.svg",
+ "assemblyai": "assemblyai.svg",
+ "cloudflare": "cloudflare.svg",
+ "elevenlabs": "elevenlabs.svg",
+ "exa_ai": "exa.svg",
+ "fal_ai": "fal.svg",
+ "featherless_ai": "featherless.svg",
+ "friendliai": "friendli.svg",
+ "github_copilot": "githubcopilot.svg",
+ "huggingface": "huggingface.svg",
+ "hyperbolic": "hyperbolic.svg",
+ "jina_ai": "jina.svg",
+ "lambda_ai": "lambda.svg",
+ "meta_llama": "meta.svg",
+ "minimax": "minimax.svg",
+ "moonshot": "moonshot.svg",
+ "morph": "morph.svg",
+ "novita": "novita.svg",
+ "nvidia_nim": "nvidia.svg",
+ "perplexity": "perplexity.svg",
+ "recraft": "recraft.svg",
+ "replicate": "replicate.svg",
+ "runwayml": "runway.svg",
+ "sambanova": "sambanova.svg",
+ "snowflake": "snowflake.svg",
+ "stability": "stability.svg",
+ "tavily": "tavily.svg",
+ "together_ai": "together.svg",
+ "v0": "v0.svg",
+ "vercel_ai_gateway": "vercel.svg",
+ "volcengine": "volcengine.svg",
+ "voyage": "voyage.svg",
+ "watsonx": "ibm.svg",
+ "xai": "xai.svg",
+ "zai": "zai.svg",
+ "amazon_nova": "nova.svg",
+ "chatgpt": "openai.svg",
+ "dashscope": "alibaba.svg",
+ };
+
+ const litellmMap: { [key: string]: string } = {
+ "databricks": "databricks.svg",
+ "oracle": "oracle.svg",
};
const lowerProvider = provider.toLowerCase();
- const logoFilename = providerLogoMap[lowerProvider];
-
- if (logoFilename) {
- return `https://raw.githubusercontent.com/BerriAI/litellm/main/ui/litellm-dashboard/public/assets/logos/${logoFilename}`;
+
+ const lobeFile = lobehubMap[lowerProvider];
+ if (lobeFile) {
+ return `${LOBEHUB_CDN}/${lobeFile}`;
}
-
+
+ const litellmFile = litellmMap[lowerProvider];
+ if (litellmFile) {
+ return `${LITELLM_LOGOS}/${litellmFile}`;
+ }
+
return null;
}