<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 980 580" xmlns="http://www.w3.org/2000/svg" style="max-width: 100%; height: auto;">
  <defs>
    <!-- Arrow markers -->
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
      <path d="M0,0 L0,6 L9,3 z" fill="#2563EB">
    </marker>

    <!-- Drop shadow for depth -->
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2">
      <feOffset dx="1" dy="1" result="offsetblur">
      <feComponentTransfer>
        <feFuncA type="linear" slope="0.2">
      </feComponentTransfer>
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic">
      </feMerge>
    </filter>
  </defs>



  <!-- Beautiful gradient definitions for depth -->
  

  <!-- White background with subtle border -->
  <rect x="0" y="0" width="980" height="580" fill="#F9FAFB" stroke="#9CA3AF" stroke-width="2" rx="8">

  <!-- Content container with proper margins -->
  <g transform="translate(40, 40)">
  <!-- Define gradients and effects -->
  

  <!-- Background with subtle gradient -->
  <rect x="0" y="0" width="900" height="500" fill="url(#bgGrad)" rx="8" filter="url(#shadow)">
  

  <!-- Title -->
  <text x="450" y="35" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="24" font-weight="600" fill="#4B5563">
    Semantic Search Pipeline
  </text>

  <!-- Main flow container -->
  <g transform="translate(0, 70)">

    <!-- Stage 1: User Query -->
    <g transform="translate(50, 0)">
      <rect x="0" y="0" width="160" height="80" fill="url(#queryGrad)" stroke="#2563EB" stroke-width="2" rx="10" filter="url(#dropShadow)">
      <text x="80" y="30" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" fill="#4B5563" filter="url(#textShadow)">User Query</text>
      <text x="80" y="50" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">"What's the return</text>
      <text x="80" y="65" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">policy?"</text>
    </g>

    <!-- Arrow 1 -->
    <path d="M 210 40 L 250 40" stroke="#2563EB" stroke-width="2.5" fill="none" marker-end="url(#searchArrow)" opacity="0.6">

    <!-- Stage 2: Query Embedding -->
    <g transform="translate(250, 0)">
      <rect x="0" y="0" width="160" height="80" fill="url(#embedSearchGrad)" stroke="#2563EB" stroke-width="2" rx="10" filter="url(#dropShadow)">
      <text x="80" y="30" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" fill="#4B5563" filter="url(#textShadow)">Embedding</text>
      <text x="80" y="50" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">Transform to</text>
      <text x="80" y="65" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">384D vector</text>
    </g>

    <!-- Arrow 2 -->
    <path d="M 410 40 L 450 40" stroke="#2563EB" stroke-width="2.5" fill="none" marker-end="url(#searchArrow)" opacity="0.6">

    <!-- Stage 3: Vector Search -->
    <g transform="translate(450, 0)">
      <rect x="0" y="0" width="180" height="80" fill="url(#searchGrad)" stroke="#2563EB" stroke-width="2" rx="10" filter="url(#dropShadow)">
      <text x="90" y="30" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" fill="#4B5563" filter="url(#textShadow)">Vector Search</text>
      <text x="90" y="50" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">Cosine similarity</text>
      <text x="90" y="65" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">in vector space</text>
    </g>

    <!-- Arrow 3 -->
    <path d="M 630 40 L 670 40" stroke="#2563EB" stroke-width="2.5" fill="none" marker-end="url(#searchArrow)" opacity="0.6">

    <!-- Stage 4: Ranking -->
    <g transform="translate(670, 0)">
      <rect x="0" y="0" width="160" height="80" fill="url(#rankGrad)" stroke="#2563EB" stroke-width="2" rx="10" filter="url(#dropShadow)">
      <text x="80" y="30" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" fill="#4B5563" filter="url(#textShadow)">Re-ranking</text>
      <text x="80" y="50" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">Score &amp; sort</text>
      <text x="80" y="65" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">by relevance</text>
    </g>

    <!-- Collections being searched (below main flow) -->
    <g transform="translate(450, 140)">
      <rect x="0" y="0" width="180" height="60" fill="rgba(79, 172, 254, 0.1)" stroke="#2563EB" stroke-width="2" stroke-dasharray="5,5" rx="8" filter="url(#shadow)">
      <text x="90" y="25" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" font-weight="500" fill="#4B5563" filter="url(#textShadow)">Active Collections</text>
      <text x="90" y="45" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">policies • procedures • faq</text>
    </g>

    <!-- Arrow from Vector Search to Collections -->
    <path d="M 540 80 L 540 140" stroke="#2563EB" stroke-width="2" stroke-dasharray="4,4" fill="none" marker-end="url(#searchArrow)" opacity="0.4">

    <!-- Results -->
    <g transform="translate(350, 250)">
      <rect x="0" y="0" width="380" height="100" fill="url(#resultGrad)" stroke="#2563EB" stroke-width="2" rx="10" filter="url(#dropShadow)">
      <text x="190" y="30" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" fill="#4B5563" filter="url(#textShadow)">Retrieved Context</text>
      <text x="60" y="55" text-anchor="start" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">1. "Refund policy: 30 days..." (0.92)</text>
      <text x="60" y="75" text-anchor="start" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">2. "Return procedures..." (0.87)</text>
      <text x="60" y="95" text-anchor="start" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">3. "Warranty information..." (0.81)</text>
    </g>

    <!-- Arrow to Results -->
    <path d="M 750 80 L 750 120 L 540 120 L 540 250" stroke="#2563EB" stroke-width="2.5" fill="none" marker-end="url(#searchArrow)" opacity="0.6">

    <!-- LLM Integration -->
    <g transform="translate(350, 370)">
      <rect x="0" y="0" width="380" height="60" fill="rgba(102, 126, 234, 0.1)" stroke="#2563EB" stroke-width="2" stroke-dasharray="8,4" rx="10" filter="url(#shadow)">
      <text x="190" y="25" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" font-weight="600" fill="#4B5563" filter="url(#textShadow)">Context Injection to LLM</text>
      <text x="190" y="45" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" filter="url(#textShadow)">Retrieved chunks provided as context for response generation</text>
    </g>

    <!-- Arrow to LLM -->
    <path d="M 540 350 L 540 370" stroke="#2563EB" stroke-width="2.5" fill="none" marker-end="url(#searchArrow)" opacity="0.6">

  </g>

  <!-- Side annotations -->
  <g transform="translate(40, 180)">
    <text x="0" y="0" text-anchor="start" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" font-style="italic" filter="url(#textShadow)">Automatic</text>
    <text x="0" y="15" text-anchor="start" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" font-style="italic" filter="url(#textShadow)" font-weight="600">Process</text>
  </g>

  <!-- Performance metrics -->
  <rect x="50" y="450" width="800" height="35" fill="rgba(203, 213, 224, 0.1)" stroke="#2563EB" stroke-width="2" stroke-dasharray="5,5" rx="6" filter="url(#shadow)">
  <text x="450" y="472" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#4B5563" font-style="italic">
    Search latency: ~20ms • Embedding: BGE-small (384D) • Similarity threshold: 0.7 • Top-K: 5 chunks
  </text>


  </g>

</svg>