(feat) ui - show custom logo

litellm/proxy/proxy_server.py

@@ -5045,6 +5045,11 @@ async def login(request: Request):
         )
 
 
+@app.get("/get_image", include_in_schema=False)
+def get_image():
+    return FileResponse(path="./logo.png")
+
+
 @app.get("/sso/callback", tags=["experimental"])
 async def auth_callback(request: Request):
     """Verify login"""

ui/litellm-dashboard/src/components/navbar.tsx

@@ -25,13 +25,19 @@ const Navbar: React.FC<NavbarProps> = ({ userID, userRole, userEmail }) => {
   console.log("User ID:", userID);
   console.log("userEmail:", userEmail);
 
+  // const userColors = require('./ui_colors.json') || {};
+  const isLocal = process.env.NODE_ENV === "development";
+  const imageUrl = isLocal ? "http://localhost:4000/get_image" : "/get_image";
+
+
   return (
     <nav className="left-0 right-0 top-0 flex justify-between items-center h-12 mb-4">
       <div className="text-left mx-4 my-2 absolute top-0 left-0">
         <div className="flex flex-col items-center">
           <Link href="/">
             <button className="text-gray-800 text-2xl px-4 py-1 rounded text-center">
-              🚅 LiteLLM
+              <img src={imageUrl} width={50} height={50} alt="LiteLLM Brand" className="mr-2" />
+              LiteLLM
             </button>
           </Link>
         </div>