improve svgs

README.md

@@ -8,7 +8,7 @@ pinned: false
 ---
 # Transformers.js Playground
 
-![Transformers.js Playground](https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/webllm/shot.png)
+![Transformers.js Playground](https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/webllm/shot.png?)
 
 ## Getting Started
 

components/CategoryRow.tsx

@@ -12,9 +12,8 @@ export default function CategoryRow({ categories }: CategoryRowProps) {
       {categories.map((category, index) => (
         <motion.div
           key={category.title}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: false }}
           initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.5, delay: index * 0.1 }}
         >
           <CategoryCard {...category} />

lib/categories.tsx

@@ -9,6 +9,24 @@ import ClassificationIcon from './icons/ClassificationIcon';
 import TextGenerationIcon from './icons/TextGenerationIcon';
 
 export const categories: Category[] = [
+  {
+    title: "Generate Text",
+    slug: "generate-text",
+    icon: Type,
+    description: "Llama. Qwen. Enough said.",
+    status: "Available",
+    colorName: "blue",
+    graphic: TextGenerationIcon
+  },
+  {
+    title: "Transcribe",
+    slug: "transcribe",
+    icon: Mic,
+    description: "AI that hears all and forgets nothing (except the 'uhms').",
+    status: "Available",
+    colorName: "rose",
+    graphic: TranscriptionIcon
+  },
   {
     title: "Segment",
     slug: "segment",
@@ -27,15 +45,6 @@ export const categories: Category[] = [
     colorName: "teal",
     graphic: EmbeddingIcon
   },
-  {
-    title: "Transcribe",
-    slug: "transcribe",
-    icon: Mic,
-    description: "AI that hears all and forgets nothing (except the 'uhms').",
-    status: "Available",
-    colorName: "rose",
-    graphic: TranscriptionIcon
-  },
   {
     title: "Sentiment",
     slug: "sentiment",
@@ -54,13 +63,4 @@ export const categories: Category[] = [
     colorName: "purple",
     graphic: ClassificationIcon
   },
-  {
-    title: "Generate Text",
-    slug: "generate-text",
-    icon: Type,
-    description: "Llama. Qwen. Enough said.",
-    status: "Available",
-    colorName: "blue",
-    graphic: TextGenerationIcon
-  }
 ];

lib/icons/ClassificationIcon.tsx

@@ -6,27 +6,34 @@ interface ClassificationIconProps {
 
 const ClassificationIcon: React.FC<ClassificationIconProps> = ({ className = '' }) => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" className={`w-full h-auto max-h-28 ${className}`}>
-      <rect x="0" y="0" width="200" height="100" fill="#a855f7" rx="10" ry="10" />
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 100" className={`w-full h-auto max-h-28 ${className}`}>
+      <rect x="0" y="0" width="220" height="100" fill="#a855f7" rx="10" ry="10" />
       
-      {/* Input text */}
+      {/* Input */}
       <rect x="10" y="10" width="80" height="80" fill="#faf5ff" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
-      <text x="20" y="30" fill="#7e22ce" fontSize="10" fontWeight="bold">Unclassified</text>
-      <text x="20" y="45" fill="#7e22ce" fontSize="10" fontWeight="bold">Text or</text>
-      <text x="20" y="60" fill="#7e22ce" fontSize="10" fontWeight="bold">Image</text>
+      <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>
       
       {/* Arrow */}
-      <line x1="95" y1="50" x2="105" y2="50" stroke="#fff" strokeWidth="2" />
-      <polygon points="105,46 113,50 105,54" fill="#fff" />
+      <line x1="95" y1="50" x2="115" y2="50" stroke="#fff" strokeWidth="2" />
+      <polygon points="115,46 123,50 115,54" fill="#fff" />
       
-      {/* Classification result */}
-      <rect x="110" y="10" width="80" height="80" fill="#faf5ff" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
-      <rect x="115" y="20" width="70" height="15" fill="#d8b4fe" rx="3" ry="3" />
-      <text x="120" y="31" fill="#6b21a8" fontSize="10">Category A</text>
-      <rect x="115" y="40" width="70" height="15" fill="#d8b4fe" rx="3" ry="3" />
-      <text x="120" y="51" fill="#6b21a8" fontSize="10">Category B</text>
-      <rect x="115" y="60" width="70" height="15" fill="#d8b4fe" rx="3" ry="3" />
-      <text x="120" y="71" fill="#6b21a8" fontSize="10">Category C</text>
+      {/* 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>
+      
+      {/* 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="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="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>
     </svg>
   );
 };

lib/icons/EmbeddingIcon.tsx

@@ -6,39 +6,75 @@ interface IconProps {
 
 const EmbeddingIcon: React.FC<IconProps> = ({ className = '' }) => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" className={`w-full h-auto max-h-28 ${className}`}>
-      <rect x="0" y="0" width="200" height="100" fill="#5eead4" rx="10" ry="10" />
+    <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>
+      
+      <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>
       
       {/* Text representation */}
-      <rect x="10" y="10" width="80" height="80" fill="#f0fdfa" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
-      <text x="20" y="40" fill="#f472b6" fontSize="14" fontWeight="bold">Hello</text>
-      <text x="20" y="70" fill="#60a5fa" fontSize="14" fontWeight="bold">World</text>
+      <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="95" y1="50" x2="105" y2="50" stroke="#fff" strokeWidth="2" />
-      <polygon points="105,46 113,50 105,54" 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>
       
       {/* 3D space representation */}
-      <rect x="110" y="10" width="80" height="80" fill="#f0fdfa" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
+      <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 */}
-      <line x1="115" y1="85" x2="185" y2="85" stroke="#0f766e" strokeWidth="1" opacity="0.3" />
-      <polygon points="185,85 181,83 181,87" fill="#0f766e" opacity="0.3" />
-      <text x="187" y="89" fill="#0f766e" fontSize="8" opacity="0.3">x</text>
+      <g opacity="0.3">
+        <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>
 
-      <line x1="115" y1="85" x2="115" y2="15" stroke="#0f766e" strokeWidth="1" opacity="0.3" />
-      <polygon points="115,15 113,19 117,19" fill="#0f766e" opacity="0.3" />
-      <text x="111" y="13" fill="#0f766e" fontSize="8" opacity="0.3">y</text>
+        <line x1="130" y1="85" x2="130" y2="15" stroke="#0f766e" strokeWidth="1" />
+        <polygon points="130,15 128,19 132,19" fill="#0f766e" />
+        <text x="126" y="13" fill="#0f766e" fontSize="8">y</text>
 
-      <line x1="115" y1="85" x2="145" y2="65" stroke="#0f766e" strokeWidth="1" opacity="0.3" />
-      <polygon points="145,65 141,67 143,70" fill="#0f766e" opacity="0.3" />
-      <text x="147" y="64" fill="#0f766e" fontSize="8" opacity="0.3">z</text>
+        <line x1="130" y1="85" x2="160" y2="65" stroke="#0f766e" strokeWidth="1" />
+        <polygon points="160,65 156,67 158,70" fill="#0f766e" />
+        <text x="162" y="64" fill="#0f766e" fontSize="8">z</text>
+      </g>
       
-      {/* 3D points */}
-      <circle cx="150" cy="40" r="4" fill="#f472b6" />
-      <text x="157" y="44" fill="#f472b6" fontSize="10" fontWeight="bold">Hello</text>
-      <circle cx="155" cy="70" r="4" fill="#60a5fa" />
-      <text x="120" y="74" fill="#60a5fa" fontSize="10" fontWeight="bold">World</text>
+      {/* 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>
     </svg>
   );
 };

lib/icons/SegmentationIcon.tsx

@@ -6,22 +6,22 @@ interface IconProps {
 
 const SegmentationIcon: React.FC<IconProps> = ({ className = '' }) => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" className={`w-full h-auto max-h-28 ${className}`}>
-      <rect x="0" y="0" width="200" height="100" fill="#818cf8" rx="10" ry="10" />
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 100" className={`w-full h-auto max-h-28 ${className}`}>
+      <rect x="0" y="0" width="220" height="100" fill="#818cf8" rx="10" ry="10" />
       
       {/* Original Image */}
-      <rect x="10" y="10" width="80" height="80" fill="#e0e0e0" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
-      <circle cx="35" cy="35" r="15" fill="#fbbf24" />
-      <rect x="55" y="45" width="25" height="35" fill="#34d399" />
+      <rect x="15" y="10" width="80" height="80" fill="#e0e0e0" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
+      <circle cx="40" cy="35" r="15" fill="#fbbf24" />
+      <rect x="60" y="45" width="25" height="35" fill="#34d399" />
       
       {/* Arrow */}
-      <line x1="95" y1="50" x2="105" y2="50" stroke="#fff" strokeWidth="2" />
-      <polygon points="105,46 113,50 105,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" />
       
       {/* Segmented Image */}
-      <rect x="110" y="10" width="80" height="80" fill="#e0e0e0" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
-      <circle cx="135" cy="35" r="15" fill="#fbbf24" stroke="#e11d48" strokeWidth="2" strokeDasharray="4 2" />
-      <rect x="155" y="45" width="25" height="35" fill="#34d399" stroke="#e11d48" strokeWidth="2" strokeDasharray="4 2" />
+      <rect x="125" y="10" width="80" height="80" fill="#e0e0e0" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
+      <circle cx="150" cy="35" r="15" fill="#fbbf24" stroke="#e11d48" strokeWidth="2" strokeDasharray="4 2" />
+      <rect x="170" y="45" width="25" height="35" fill="#34d399" stroke="#e11d48" strokeWidth="2" strokeDasharray="4 2" />
     </svg>
   );
 };

lib/icons/SentimentAnalysisIcon.tsx

@@ -8,33 +8,33 @@ const SentimentAnalysisIcon: React.FC<IconProps> = ({ className = '' }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 200 100"
+      viewBox="0 0 220 100"
       className={`w-full h-auto max-h-28 ${className}`}
     >
-      <rect x="0" y="0" width="200" height="100" fill="#fbbf24" rx="10" ry="10" />
+      <rect x="0" y="0" width="220" height="100" fill="#fbbf24" rx="10" ry="10" />
       
       {/* Input text */}
-      <rect x="10" y="10" width="80" height="80" fill="#fffbeb" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
-      <text x="15" y="35" fill="#92400e" fontSize="8" fontWeight="bold">Great product!</text>
-      <text x="15" y="50" fill="#92400e" fontSize="8" fontWeight="bold">Highly</text>
-      <text x="15" y="65" fill="#92400e" fontSize="8" fontWeight="bold">recommended.</text>
+      <rect x="15" y="10" width="80" height="80" fill="#fffbeb" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
+      <text x="20" y="35" fill="#92400e" fontSize="10" fontWeight="bold">Great product!</text>
+      <text x="20" y="50" fill="#92400e" fontSize="10" fontWeight="bold">Highly</text>
+      <text x="20" y="65" fill="#92400e" fontSize="10" fontWeight="bold">recommended.</text>
       
       {/* Arrow */}
-      <line x1="95" y1="50" x2="105" y2="50" stroke="#fff" strokeWidth="2" />
-      <polygon points="105,46 113,50 105,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" />
       
       {/* Sentiment analysis result */}
-      <rect x="110" y="10" width="80" height="80" fill="#fffbeb" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
+      <rect x="125" y="10" width="80" height="80" fill="#fffbeb" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
       
       {/* Sentiment gauge background */}
-      <rect x="120" y="30" width="60" height="20" fill="#e5e7eb" rx="10" ry="10" />
+      <rect x="135" y="30" width="60" height="20" fill="#e5e7eb" rx="10" ry="10" />
       
       {/* Sentiment gauge fill (80% positive) */}
-      <rect x="120" y="30" width="48" height="20" fill="#4ade80" rx="10" ry="10" />
+      <rect x="135" y="30" width="48" height="20" fill="#4ade80" rx="10" ry="10" />
       
       {/* Sentiment score text */}
-      <text x="150" y="70" fill="#4ade80" fontSize="14" fontWeight="bold" textAnchor="middle">80%</text>
-      <text x="150" y="85" fill="#92400e" fontSize="10" textAnchor="middle">Positive</text>
+      <text x="165" y="70" fill="#4ade80" fontSize="14" fontWeight="bold" textAnchor="middle">80%</text>
+      <text x="165" y="85" fill="#92400e" fontSize="10" textAnchor="middle">Positive</text>
     </svg>
   );
 };

lib/icons/TextGenerationIcon.tsx

@@ -6,27 +6,27 @@ interface TextGenerationIconProps {
 
 const TextGenerationIcon: React.FC<TextGenerationIconProps> = ({ className = '' }) => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" className={`w-full h-auto max-h-28 ${className}`}>
-      <rect x="0" y="0" width="200" height="100" fill="#3b82f6" rx="10" ry="10" />
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 100" className={`w-full h-auto max-h-28 ${className}`}>
+      <rect x="0" y="0" width="220" height="100" fill="#3b82f6" rx="10" ry="10" />
       
       {/* Input prompt */}
-      <rect x="10" y="10" width="80" height="80" fill="#eff6ff" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
-      <text x="20" y="40" fill="#1d4ed8" fontSize="10" fontWeight="bold">Prompt:</text>
-      <text x="20" y="55" fill="#1d4ed8" fontSize="10" fontWeight="bold">Generate a</text>
-      <text x="20" y="70" fill="#1d4ed8" fontSize="10" fontWeight="bold">story about...</text>
+      <rect x="15" y="10" width="80" height="80" fill="#eff6ff" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
+      <text x="20" y="30" fill="#1d4ed8" fontSize="9" fontWeight="bold">Prompt:</text>
+      <text x="20" y="45" fill="#1d4ed8" fontSize="9" fontWeight="bold">Generate a</text>
+      <text x="20" y="60" fill="#1d4ed8" fontSize="9" fontWeight="bold">story about...</text>
       
       {/* Arrow */}
-      <line x1="95" y1="50" x2="105" y2="50" stroke="#fff" strokeWidth="2" />
-      <polygon points="105,46 113,50 105,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" />
       
       {/* Generated text */}
-      <rect x="110" y="10" width="80" height="80" fill="#eff6ff" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
-      <text x="120" y="25" fill="#1e40af" fontSize="8">Once upon a time,</text>
-      <text x="120" y="35" fill="#1e40af" fontSize="8">in a land far away,</text>
-      <text x="120" y="45" fill="#1e40af" fontSize="8">there was a brave</text>
-      <text x="120" y="55" fill="#1e40af" fontSize="8">knight who...</text>
-      <line x1="120" y1="65" x2="180" y2="65" stroke="#93c5fd" strokeWidth="1" />
-      <line x1="120" y1="75" x2="170" y2="75" stroke="#93c5fd" strokeWidth="1" />
+      <rect x="125" y="10" width="80" height="80" fill="#eff6ff" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
+      <text x="130" y="30" fill="#1e40af" fontSize="8">Once upon a time,</text>
+      <text x="130" y="42" fill="#1e40af" fontSize="8">in a land far away,</text>
+      <text x="130" y="54" fill="#1e40af" fontSize="8">there was a brave</text>
+      <text x="130" y="66" fill="#1e40af" fontSize="8">knight who...</text>
+      <line x1="130" y1="75" x2="190" y2="75" stroke="#93c5fd" strokeWidth="1" />
+      <line x1="130" y1="80" x2="180" y2="80" stroke="#93c5fd" strokeWidth="1" />
     </svg>
   );
 };

lib/icons/TranscriptionIcon.tsx

@@ -6,25 +6,32 @@ interface TranscriptionIconProps {
 
 const TranscriptionIcon: React.FC<TranscriptionIconProps> = ({ className = '' }) => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" className={`w-full h-auto max-h-28 ${className}`}>
-      <rect x="0" y="0" width="200" height="100" fill="#fb7185" rx="10" ry="10" />
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 100" className={`w-full h-auto max-h-28 ${className}`}>
+      <rect x="0" y="0" width="220" height="100" fill="#fb7185" rx="10" ry="10" />
       
       {/* Audio waveform */}
-      <rect x="10" y="10" width="80" height="80" fill="#fff1f2" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
-      <path d="M15 50 Q 25 20, 35 50 Q 45 80, 55 50 Q 65 20, 75 50 Q 85 80, 95 50" 
-            fill="none" stroke="#e11d48" strokeWidth="2" />
+      <rect x="15" y="10" width="80" height="80" fill="#fff1f2" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
+      <g fill="#e11d48">
+        <rect x="25" y="35" width="5" height="30" />
+        <rect x="35" y="25" width="5" height="50" />
+        <rect x="45" y="15" width="5" height="70" />
+        <rect x="55" y="30" width="5" height="40" />
+        <rect x="65" y="20" width="5" height="60" />
+        <rect x="75" y="40" width="5" height="20" />
+        <rect x="85" y="35" width="5" height="30" />
+      </g>
       
       {/* Arrow */}
-      <line x1="95" y1="50" x2="105" y2="50" stroke="#fff" strokeWidth="2" />
-      <polygon points="105,46 113,50 105,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" />
       
       {/* Transcribed text */}
-      <rect x="110" y="10" width="80" height="80" fill="#fff1f2" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
-      <text x="120" y="30" fill="#be123c" fontSize="10" fontWeight="bold">Hello, how</text>
-      <text x="120" y="45" fill="#be123c" fontSize="10" fontWeight="bold">are you</text>
-      <text x="120" y="60" fill="#be123c" fontSize="10" fontWeight="bold">today?</text>
-      <line x1="120" y1="70" x2="180" y2="70" stroke="#fda4af" strokeWidth="1" />
-      <line x1="120" y1="80" x2="170" y2="80" stroke="#fda4af" strokeWidth="1" />
+      <rect x="125" y="10" width="80" height="80" fill="#fff1f2" stroke="#fff" strokeWidth="1" rx="5" ry="5" />
+      <text x="130" y="35" fill="#be123c" fontSize="9" fontWeight="bold">Hello, how</text>
+      <text x="130" y="50" fill="#be123c" fontSize="9" fontWeight="bold">are you</text>
+      <text x="130" y="65" fill="#be123c" fontSize="9" fontWeight="bold">today?</text>
+      <line x1="130" y1="75" x2="190" y2="75" stroke="#fda4af" strokeWidth="1" />
+      <line x1="130" y1="80" x2="180" y2="80" stroke="#fda4af" strokeWidth="1" />
     </svg>
   );
 };