UI fix provider

Author: ishaan-jaff

src/App.svelte

@@ -4,6 +4,7 @@
 
   import Fuse from "fuse.js";
   import Typewriter from "svelte-typewriter";
+  import { getProviderInitial, getProviderLogo } from "./providers";
 
   type Item = {
     name: string;
@@ -181,34 +182,6 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
       loading = false;
     }
   }
-
-  function getProviderInitial(provider: string): string {
-    if (!provider) return "?";
-    
-    // Map common providers to their initials/abbreviations
-    const providerMap: { [key: string]: string } = {
-      "anthropic": "A",
-      "openai": "O",
-      "azure": "Az",
-      "bedrock": "B",
-      "vertex_ai": "V",
-      "cohere": "C",
-      "huggingface": "H",
-      "replicate": "R",
-      "groq": "G",
-      "together_ai": "T",
-      "mistral": "M",
-      "deepinfra": "D",
-    };
-
-    const lowerProvider = provider.toLowerCase();
-    if (providerMap[lowerProvider]) {
-      return providerMap[lowerProvider];
-    }
-    
-    // Default to first letter uppercase
-    return provider.charAt(0).toUpperCase();
-  }
 </script>
 
 <main class="container">
@@ -312,7 +285,24 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
               <td class="model-name">
                 <div class="model-info">
                   <div class="provider-avatar">
-                    {getProviderInitial(litellm_provider)}
+                    {#if getProviderLogo(litellm_provider)}
+                      <img 
+                        src={getProviderLogo(litellm_provider)} 
+                        alt={litellm_provider}
+                        class="provider-logo-img"
+                        on:error={(e) => {
+                          e.currentTarget.style.display = 'none';
+                          e.currentTarget.nextElementSibling.style.display = 'flex';
+                        }}
+                      />
+                      <div class="provider-initial" style="display: none;">
+                        {getProviderInitial(litellm_provider)}
+                      </div>
+                    {:else}
+                      <div class="provider-initial">
+                        {getProviderInitial(litellm_provider)}
+                      </div>
+                    {/if}
                   </div>
                   <span class="model-title">{name}</span>
                 </div>
@@ -470,14 +460,38 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
     width: 40px;
     height: 40px;
     border-radius: 50%;
-    background-color: #1a1a1a;
+    background-color: white;
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 600;
     font-size: 0.9rem;
     flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    padding: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  }
+
+  .provider-logo-img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  .provider-initial {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #1a1a1a;
+    color: white;
+    font-weight: 600;
+    font-size: 0.9rem;
+    border-radius: 50%;
+    margin: -6px;
   }
 
   .model-title {

src/providers.ts

@@ -0,0 +1,81 @@
+/**
+ * Provider utility functions for mapping provider names to logos and initials
+ */
+
+/**
+ * Get the initial/abbreviation for a provider name
+ */
+export function getProviderInitial(provider: string): string {
+  if (!provider) return "?";
+  
+  // Map common providers to their initials/abbreviations
+  const providerMap: { [key: string]: string } = {
+    "anthropic": "A",
+    "openai": "O",
+    "azure": "Az",
+    "bedrock": "B",
+    "vertex_ai": "V",
+    "cohere": "C",
+    "huggingface": "H",
+    "replicate": "R",
+    "groq": "G",
+    "together_ai": "T",
+    "mistral": "M",
+    "deepinfra": "D",
+  };
+
+  const lowerProvider = provider.toLowerCase();
+  if (providerMap[lowerProvider]) {
+    return providerMap[lowerProvider];
+  }
+  
+  // Default to first letter uppercase
+  return provider.charAt(0).toUpperCase();
+}
+
+/**
+ * Get the logo URL for a provider from the LiteLLM GitHub repository
+ * Returns null if no logo is available for the provider
+ */
+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",
+    "anthropic": "anthropic.svg",
+    "bedrock": "bedrock.svg",
+    "vertex_ai": "google.svg",
+    "vertexai": "google.svg",
+    "cohere": "cohere.svg",
+    "groq": "groq.svg",
+    "mistral": "mistral.svg",
+    "deepinfra": "deepinfra.png",
+    "databricks": "databricks.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-codestral": "mistral.svg",
+    "codestral": "mistral.svg",
+    "sagemaker": "aws.svg",
+    "aws": "aws.svg",
+    "google": "google.svg",
+    "gemini": "google.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}`;
+  }
+  
+  return null;
+}
+