www_projectmycelium_com/src/pages/gpu/animations/RAGPipeline.tsx

"use client";

export default function RAGPipeline() {
  return (
    <svg
      width="382"
      height="282"
      viewBox="0 0 382 282"
      xmlns="http://www.w3.org/2000/svg"
      role="img"
      aria-labelledby="title desc"
    >
      <title id="title">Agent Compute & RAG Pipelines</title>
      <desc id="desc">Documents flow into a vector DB, then a model, and finally an answer bubble.</desc>

      <defs>
        <pattern id="grid" width="16" height="16" patternUnits="userSpaceOnUse">
          <path d="M16 0H0V16" fill="none" stroke="#0f1621" strokeWidth="1" />
        </pattern>

        <linearGradient id="cyanglow" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#00E5FF">
            <animate attributeName="stop-color" values="#00E5FF;#00B8DB;#00E5FF" dur="4s" repeatCount="indefinite" />
          </stop>
          <stop offset="100%" stopColor="#00B8DB">
            <animate attributeName="stop-color" values="#00B8DB;#00E5FF;#00B8DB" dur="4s" repeatCount="indefinite" />
          </stop>
        </linearGradient>

        <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="4" result="b" />
          <feMerge>
            <feMergeNode in="b" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>

        <style>{`
          .label { fill: #8ea2b2; font-weight: 600; letter-spacing: .06em; font-size: 12px; }
          .box  { fill: #0e1724; stroke: #163447; stroke-width: 1.5; }
          .cyl  { fill: #0b1320; stroke: url(#cyanglow); stroke-width: 2; }
          .brain{ fill: #09131c; stroke: url(#cyanglow); stroke-width: 2; }
          .arrow{ stroke: #11cdef; stroke-width: 2; fill: none; stroke-linecap: round; marker-end: url(#arrowhead); }
          .pkt  { fill: url(#cyanglow); }
          .doc  { fill: #0b1320; stroke: #2a4253; stroke-width: 1.2; }
        `}</style>

        {/* Arrowhead */}
        <marker id="arrowhead" markerWidth="8" markerHeight="8" refX="6" refY="3.5" orient="auto">
          <polygon points="0 0, 7 3.5, 0 7" fill="#11cdef" />
        </marker>

        {/* Paths for packets */}
        <path id="p1" d="M 96 132 C 140 132, 164 132, 200 132" fill="none" />
        <path id="p2" d="M 240 132 C 270 132, 300 132, 328 116" fill="none" />
      </defs>

      {/* Background */}
      <rect width="382" height="282" fill="transparent" />
      <rect width="382" height="282" fill="url(#grid)" opacity="0.55" />

      {/* Documents (left) */}
      <g transform="translate(36,84)">
        {[-16, 0, 16].map((dy, i) => (
          <g key={i} transform={`translate(0,${dy})`} filter="url(#glow)">
            <rect x="0" y="0" width="56" height="70" rx="6" className="doc" />
            <rect x="0" y="10" width="56" height="10" fill="#0f1b27" />
            <line x1="10" y1="28" x2="46" y2="28" stroke="#294155" strokeWidth="2" />
            <line x1="10" y1="38" x2="40" y2="38" stroke="#294155" strokeWidth="2" />
            <line x1="10" y1="48" x2="44" y2="48" stroke="#294155" strokeWidth="2" />
            <animateTransform attributeName="transform" type="translate" values="0,8;0,0;0,8" dur="4s" begin={`${i * 0.25}s`} repeatCount="indefinite" />
            <animate attributeName="opacity" values="0.8;1;0.8" dur="3.2s" begin={`${i * 0.25}s`} repeatCount="indefinite" />
          </g>
        ))}
      </g>

      {/* Arrow: docs -> vector DB */}
      <path className="arrow" d="M 96 120 L 190 120" opacity="0.7" />
      <path className="arrow" d="M 96 144 L 190 144" opacity="0.7" />

      {/* Vector DB (middle cylinder stack) */}
      <g transform="translate(190,84)" filter="url(#glow)">
        {/* cylinder 1 */}
        <ellipse cx="50" cy="12" rx="50" ry="12" className="cyl" fillOpacity="0.9" />
        <rect x="0" y="12" width="100" height="22" className="cyl" fillOpacity="0.9" />
        {/* cylinder 2 */}
        <ellipse cx="50" cy="34" rx="50" ry="12" className="cyl" fillOpacity="0.9" />
        <rect x="0" y="34" width="100" height="22" className="cyl" fillOpacity="0.9" />
        {/* cylinder 3 */}
        <ellipse cx="50" cy="56" rx="50" ry="12" className="cyl" fillOpacity="0.9" />
        <rect x="0" y="56" width="100" height="22" className="cyl" fillOpacity="0.9" />
        <ellipse cx="50" cy="78" rx="50" ry="12" className="cyl" />

        {/* pulse */}
        <rect x="0" y="12" width="100" height="68" fill="url(#cyanglow)" opacity="0.0">
          <animate attributeName="opacity" values="0;0.12;0" dur="2.4s" repeatCount="indefinite" />
        </rect>
      </g>

      {/* Arrow: DB -> model */}
      <path className="arrow" d="M 290 132 L 332 112" />

      {/* Model (right) */}
      <g transform="translate(300,84)" filter="url(#glow)">
        {/* brain-ish blob */}
        <path
          d="M 32 30
             c 10 -16, 28 -12, 30 6
             c 12 2, 14 18, 2 26
             c -2 16, -18 20, -28 10
             c -10 10, -28 4, -26 -12
             c -12 -6, -10 -22, 6 -28
             c 2 -12, 16 -12, 16 -2 z"
          className="brain"
        />
        {/* inner highlight */}
        <circle cx="42" cy="46" r="10" fill="url(#cyanglow)" opacity="0.85">
          <animate attributeName="r" values="9;12;9" dur="2.2s" repeatCount="indefinite" />
        </circle>
      </g>

      {/* Output bubble */}
      <g transform="translate(312,54)">
        <rect x="-6" y="-6" width="64" height="28" rx="8" fill="#0e1724" stroke="url(#cyanglow)" strokeWidth="1.5" opacity="0.95" />
        <text x="6" y="13" fontSize="10" fill="#cbe7f3" fontFamily="ui-sans-serif, system-ui">Answer ✓</text>
        <animateTransform attributeName="transform" type="translate" values="312,64;312,54;312,64" dur="3.4s" repeatCount="indefinite" />
      </g>

      {/* Packets along paths */}
      <g>
        <circle r="3.2" className="pkt">
          <animateMotion dur="2.4s" repeatCount="indefinite">
            <mpath href="#p1" />
          </animateMotion>
        </circle>
        <circle r="3.2" className="pkt" opacity="0.85">
          <animateMotion dur="2.0s" begin="0.35s" repeatCount="indefinite">
            <mpath href="#p2" />
          </animateMotion>
        </circle>
      </g>
    </svg>
  );
}