fix rendering

ui/litellm-dashboard/src/components/guardrails/guardrail_garden_card.tsx

@@ -2,6 +2,41 @@ import React, { useState } from "react";
 import { CheckCircleFilled } from "@ant-design/icons";
 import { GuardrailCardInfo } from "./guardrail_garden_data";
 
+const LogoWithFallback: React.FC<{ src: string; name: string }> = ({ src, name }) => {
+  const [hasError, setHasError] = useState(false);
+
+  if (hasError || !src) {
+    return (
+      <div
+        style={{
+          width: 28,
+          height: 28,
+          borderRadius: 6,
+          backgroundColor: "#e5e7eb",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          fontSize: 13,
+          fontWeight: 600,
+          color: "#6b7280",
+          flexShrink: 0,
+        }}
+      >
+        {name?.charAt(0) || "?"}
+      </div>
+    );
+  }
+
+  return (
+    <img
+      src={src}
+      alt=""
+      style={{ width: 28, height: 28, borderRadius: 6, objectFit: "contain", flexShrink: 0 }}
+      onError={() => setHasError(true)}
+    />
+  );
+};
+
 const GuardrailCard: React.FC<{ card: GuardrailCardInfo; onClick: () => void }> = ({ card, onClick }) => {
   const [hovered, setHovered] = useState(false);
 
@@ -25,12 +60,7 @@ const GuardrailCard: React.FC<{ card: GuardrailCardInfo; onClick: () => void }>
     >
       {/* Icon + Name row */}
       <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
-        <img
-          src={card.logo}
-          alt=""
-          style={{ width: 28, height: 28, borderRadius: 6, objectFit: "contain", flexShrink: 0 }}
-          onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
-        />
+        <LogoWithFallback src={card.logo} name={card.name} />
         <span style={{ fontSize: 14, fontWeight: 600, color: "#111827", lineHeight: 1.3 }}>{card.name}</span>
       </div>
 

ui/litellm-dashboard/src/components/guardrails/guardrail_garden_data.ts

@@ -16,7 +16,7 @@ export interface GuardrailCardInfo {
   providerKey?: string;
 }
 
-const ASSET_PREFIX = "../assets/logos/";
+const ASSET_PREFIX = "../ui/assets/logos/";
 
 export const LITELLM_CONTENT_FILTER_CARDS: GuardrailCardInfo[] = [
   {
@@ -35,6 +35,22 @@ export const LITELLM_CONTENT_FILTER_CARDS: GuardrailCardInfo[] = [
       latency: "<0.1ms",
     },
   },
+  {
+    id: "cf_denied_insults",
+    name: "Insults & Personal Attacks",
+    description: "Detects insults, name-calling, and personal attacks directed at the chatbot, staff, or other people.",
+    category: "litellm",
+    subcategory: "Content Category",
+    logo: `${ASSET_PREFIX}litellm_logo.jpg`,
+    tags: ["Content Category", "Topic Blocker"],
+    eval: {
+      f1: 100.0,
+      precision: 100.0,
+      recall: 100.0,
+      testCases: 299,
+      latency: "<0.1ms",
+    },
+  },
   {
     id: "cf_denied_legal",
     name: "Denied Legal Advice",
@@ -170,22 +186,6 @@ export const LITELLM_CONTENT_FILTER_CARDS: GuardrailCardInfo[] = [
     logo: `${ASSET_PREFIX}litellm_logo.jpg`,
     tags: ["Content Category", "Prompt Injection"],
   },
-  {
-    id: "cf_denied_insults",
-    name: "Insults & Personal Attacks",
-    description: "Detects insults, name-calling, and personal attacks directed at the chatbot, staff, or other people.",
-    category: "litellm",
-    subcategory: "Content Category",
-    logo: `${ASSET_PREFIX}litellm_logo.jpg`,
-    tags: ["Content Category", "Topic Blocker"],
-    eval: {
-      f1: 100.0,
-      precision: 100.0,
-      recall: 100.0,
-      testCases: 299,
-      latency: "<0.1ms",
-    },
-  },
   {
     id: "cf_toxic_abuse",
     name: "Toxic & Abusive Language",
@@ -221,7 +221,7 @@ export const PARTNER_GUARDRAIL_CARDS: GuardrailCardInfo[] = [
     name: "Presidio PII",
     description: "Microsoft Presidio for PII detection and anonymization. Supports 30+ entity types with configurable actions.",
     category: "partner",
-    logo: `${ASSET_PREFIX}presidio.png`,
+    logo: `${ASSET_PREFIX}microsoft_azure.svg`,
     tags: ["PII", "Microsoft"],
     providerKey: "PresidioPII",
   },

ui/litellm-dashboard/src/components/guardrails/guardrail_info_helpers.tsx

@@ -105,11 +105,11 @@ const asset_logos_folder = "../ui/assets/logos/";
 
 export const guardrailLogoMap: Record<string, string> = {
   "Zscaler AI Guard": `${asset_logos_folder}zscaler.svg`,
-  "Presidio PII": `${asset_logos_folder}presidio.png`,
+  "Presidio PII": `${asset_logos_folder}microsoft_azure.svg`,
   "Bedrock Guardrail": `${asset_logos_folder}bedrock.svg`,
   Lakera: `${asset_logos_folder}lakeraai.jpeg`,
-  "Azure Content Safety Prompt Shield": `${asset_logos_folder}presidio.png`,
-  "Azure Content Safety Text Moderation": `${asset_logos_folder}presidio.png`,
+  "Azure Content Safety Prompt Shield": `${asset_logos_folder}microsoft_azure.svg`,
+  "Azure Content Safety Text Moderation": `${asset_logos_folder}microsoft_azure.svg`,
   "Aporia AI": `${asset_logos_folder}aporia.png`,
   "PANW Prisma AIRS": `${asset_logos_folder}palo_alto_networks.jpeg`,
   "Noma Security": `${asset_logos_folder}noma_security.png`,