fix arrows

lib/icons/ClassificationIcon.tsx

@@ -10,30 +10,30 @@ const ClassificationIcon: React.FC<ClassificationIconProps> = ({ className = ''
       <rect x="0" y="0" width="220" height="100" fill="#a855f7" rx="10" ry="10" />
       
       {/* Input */}
-      <rect x="10" y="10" width="80" height="80" fill="#faf5ff" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
-      <text x="15" y="30" fill="#7e22ce" fontSize="12" fontWeight="bold">Inputs</text>
-      <text x="15" y="50" fill="#7e22ce" fontSize="10" fontWeight="bold">Basketball</text>
+      <rect x="15" y="10" width="80" height="80" fill="#faf5ff" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
+      <text x="20" y="30" fill="#7e22ce" fontSize="12" fontWeight="bold">Inputs</text>
+      <text x="20" y="50" fill="#7e22ce" fontSize="10" fontWeight="bold">Basketball</text>
       
       {/* Arrow */}
-      <line x1="95" y1="50" x2="115" y2="50" stroke="#fff" strokeWidth="2" />
-      <polygon points="115,46 123,50 115,54" fill="#fff" />
+      <line x1="105" y1="50" x2="115" y2="50" stroke="#fff" strokeWidth="3" />
+      <polygon points="115,45 122,50 115,55" fill="#fff" />
       
       {/* Output */}
-      <rect x="120" y="10" width="90" height="80" fill="#faf5ff" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
-      <text x="125" y="25" fill="#7e22ce" fontSize="12" fontWeight="bold">Output</text>
+      <rect x="125" y="10" width="80" height="80" fill="#faf5ff" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
+      <text x="130" y="25" fill="#7e22ce" fontSize="12" fontWeight="bold">Output</text>
       
       {/* Classification bars */}
-      <rect x="125" y="35" width="75" height="14" fill="#d8b4fe" rx="3" ry="3" />
-      <text x="130" y="45" fill="#6b21a8" fontSize="10" fontWeight="bold">Sport</text>
-      <text x="193" y="45" fill="#6b21a8" fontSize="10" textAnchor="end">0.800</text>
+      <rect x="130" y="35" width="65" height="14" fill="#d8b4fe" rx="3" ry="3" />
+      <text x="135" y="45" fill="#6b21a8" fontSize="10" fontWeight="bold">Sport</text>
+      <text x="188" y="45" fill="#6b21a8" fontSize="10" textAnchor="end">0.800</text>
       
-      <rect x="125" y="53" width="30" height="14" fill="#d8b4fe" rx="3" ry="3" />
-      <text x="130" y="63" fill="#6b21a8" fontSize="10" fontWeight="bold">Food</text>
-      <text x="193" y="63" fill="#6b21a8" fontSize="10" textAnchor="end">0.150</text>
+      <rect x="130" y="53" width="26" height="14" fill="#d8b4fe" rx="3" ry="3" />
+      <text x="135" y="63" fill="#6b21a8" fontSize="10" fontWeight="bold">Food</text>
+      <text x="188" y="63" fill="#6b21a8" fontSize="10" textAnchor="end">0.150</text>
       
-      <rect x="125" y="71" width="10" height="14" fill="#d8b4fe" rx="3" ry="3" />
-      <text x="130" y="81" fill="#6b21a8" fontSize="10" fontWeight="bold">Music</text>
-      <text x="193" y="81" fill="#6b21a8" fontSize="10" textAnchor="end">0.050</text>
+      <rect x="130" y="71" width="9" height="14" fill="#d8b4fe" rx="3" ry="3" />
+      <text x="135" y="81" fill="#6b21a8" fontSize="10" fontWeight="bold">Music</text>
+      <text x="188" y="81" fill="#6b21a8" fontSize="10" textAnchor="end">0.050</text>
     </svg>
   );
 };

lib/icons/EmbeddingIcon.tsx

@@ -7,48 +7,24 @@ interface IconProps {
 const EmbeddingIcon: React.FC<IconProps> = ({ className = '' }) => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 100" className={`w-full h-auto max-h-28 ${className}`}>
-      <defs>
-        <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-          <stop offset="0%" stopColor="#5eead4" />
-          <stop offset="100%" stopColor="#2dd4bf" />
-        </linearGradient>
-        <filter id="glow">
-          <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
-          <feMerge>
-            <feMergeNode in="coloredBlur"/>
-            <feMergeNode in="SourceGraphic"/>
-          </feMerge>
-        </filter>
-      </defs>
+      {/* Background */}
+      <rect x="0" y="0" width="220" height="100" fill="#2dd4bf" rx="10" ry="10" />
       
-      <rect x="0" y="0" width="220" height="100" fill="url(#bgGradient)" rx="10" ry="10">
-        <animate attributeName="opacity" values="0.8;1;0.8" dur="3s" repeatCount="indefinite" />
-      </rect>
+      {/* Input */}
+      <rect x="15" y="10" width="80" height="80" fill="#f0fdfa" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
+      <text x="20" y="30" fill="#0f766e" fontSize="12" fontWeight="bold">Input</text>
+      <text x="20" y="50" fill="#0f766e" fontSize="14" fontWeight="bold">Hello</text>
+      <text x="20" y="70" fill="#0f766e" fontSize="14" fontWeight="bold">World</text>
       
-      {/* Text representation */}
-      <rect x="15" y="10" width="80" height="80" fill="#f0fdfa" stroke="#fff" strokeWidth="1" rx="5" ry="5" filter="url(#glow)" />
-      <text x="25" y="40" fill="#f472b6" fontSize="14" fontWeight="bold">
-        <tspan>Hello</tspan>
-        <animate attributeName="opacity" values="0.5;1;0.5" dur="2s" repeatCount="indefinite" />
-      </text>
-      <text x="25" y="70" fill="#60a5fa" fontSize="14" fontWeight="bold">
-        <tspan>World</tspan>
-        <animate attributeName="opacity" values="0.5;1;0.5" dur="2s" repeatCount="indefinite" begin="1s" />
-      </text>
+      {/* Arrow */}
+      <line x1="105" y1="50" x2="115" y2="50" stroke="#fff" strokeWidth="3" />
+      <polygon points="115,45 122,50 115,55" fill="#fff" />
       
-      {/* Animated Arrow */}
-      <line x1="105" y1="50" x2="115" y2="50" stroke="#fff" strokeWidth="3">
-        <animate attributeName="x2" values="115;120;115" dur="1.5s" repeatCount="indefinite" />
-      </line>
-      <polygon points="115,45 122,50 115,55" fill="#fff">
-        <animate attributeName="points" values="115,45 122,50 115,55;120,45 127,50 120,55;115,45 122,50 115,55" dur="1.5s" repeatCount="indefinite" />
-      </polygon>
+      {/* Output */}
+      <rect x="125" y="10" width="80" height="80" fill="#f0fdfa" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
       
       {/* 3D space representation */}
-      <rect x="125" y="10" width="80" height="80" fill="#f0fdfa" stroke="#fff" strokeWidth="1" rx="5" ry="5" filter="url(#glow)" />
-      
-      {/* Improved 3D axes with reduced opacity */}
-      <g opacity="0.3">
+      <g opacity="0.7">
         <line x1="130" y1="85" x2="200" y2="85" stroke="#0f766e" strokeWidth="1" />
         <polygon points="200,85 196,83 196,87" fill="#0f766e" />
         <text x="202" y="89" fill="#0f766e" fontSize="8">x</text>
@@ -62,19 +38,11 @@ const EmbeddingIcon: React.FC<IconProps> = ({ className = '' }) => {
         <text x="162" y="64" fill="#0f766e" fontSize="8">z</text>
       </g>
       
-      {/* Animated 3D points */}
-      <g>
-        <circle cx="165" cy="40" r="4" fill="#f472b6">
-          <animate attributeName="r" values="3;5;3" dur="2s" repeatCount="indefinite" />
-        </circle>
-        <text x="172" y="44" fill="#f472b6" fontSize="10" fontWeight="bold">Hello</text>
-      </g>
-      <g>
-        <circle cx="170" cy="70" r="4" fill="#60a5fa">
-          <animate attributeName="r" values="3;5;3" dur="2s" repeatCount="indefinite" begin="1s" />
-        </circle>
-        <text x="135" y="74" fill="#60a5fa" fontSize="10" fontWeight="bold">World</text>
-      </g>
+      {/* 3D points */}
+      <circle cx="165" cy="40" r="4" fill="#f472b6" />
+      <text x="172" y="44" fill="#f472b6" fontSize="10" fontWeight="bold">Hello</text>
+      <circle cx="170" cy="70" r="4" fill="#60a5fa" />
+      <text x="135" y="74" fill="#60a5fa" fontSize="10" fontWeight="bold">World</text>
     </svg>
   );
 };