176 lines
10 KiB
XML
176 lines
10 KiB
XML
|
<svg width="800" height="420" viewBox="0 0 800 420" xmlns="http://www.w3.org/2000/svg" style="max-width: 100%; height: auto;">
|
||
|
|
<!-- Define gradients and filters -->
|
||
|
|
<defs>
|
||
|
|
<!-- Soft glow filter -->
|
||
|
|
<filter id="glow">
|
||
|
|
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
|
||
|
|
<feMerge>
|
||
|
|
<feMergeNode in="coloredBlur"/>
|
||
|
|
<feMergeNode in="SourceGraphic"/>
|
||
|
|
</feMerge>
|
||
|
|
</filter>
|
||
|
|
|
||
|
|
<!-- Beautiful gradients with colors -->
|
||
|
|
<linearGradient id="userGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#667eea;stop-opacity:0.2" />
|
||
|
|
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:0.3" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<linearGradient id="llmGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#06ffa5;stop-opacity:0.2" />
|
||
|
|
<stop offset="100%" style="stop-color:#00d2ff;stop-opacity:0.3" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<linearGradient id="toolGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#ffa500;stop-opacity:0.2" />
|
||
|
|
<stop offset="100%" style="stop-color:#ff6b6b;stop-opacity:0.3" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<linearGradient id="responseGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#4facfe;stop-opacity:0.2" />
|
||
|
|
<stop offset="100%" style="stop-color:#00f2fe;stop-opacity:0.3" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<linearGradient id="memoryGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#f093fb;stop-opacity:0.1" />
|
||
|
|
<stop offset="100%" style="stop-color:#f5576c;stop-opacity:0.2" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<linearGradient id="directPathGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
|
|
<stop offset="0%" style="stop-color:#10b981;stop-opacity:0.8" />
|
||
|
|
<stop offset="100%" style="stop-color:#34d399;stop-opacity:0.3" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<linearGradient id="toolPathGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
|
|
<stop offset="0%" style="stop-color:#f59e0b;stop-opacity:0.8" />
|
||
|
|
<stop offset="100%" style="stop-color:#fbbf24;stop-opacity:0.3" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<!-- Arrow markers -->
|
||
|
|
<marker id="arrow" markerWidth="15" markerHeight="15" refX="14" refY="7.5" orient="auto">
|
||
|
|
<path d="M 0 0 L 15 7.5 L 0 15 L 5 7.5 Z" fill="#4a5568" opacity="0.7"/>
|
||
|
|
</marker>
|
||
|
|
|
||
|
|
<marker id="arrowGreen" markerWidth="15" markerHeight="15" refX="14" refY="7.5" orient="auto">
|
||
|
|
<path d="M 0 0 L 15 7.5 L 0 15 L 5 7.5 Z" fill="#10b981" opacity="0.8"/>
|
||
|
|
</marker>
|
||
|
|
|
||
|
|
<marker id="arrowOrange" markerWidth="15" markerHeight="15" refX="14" refY="7.5" orient="auto">
|
||
|
|
<path d="M 0 0 L 15 7.5 L 0 15 L 5 7.5 Z" fill="#f59e0b" opacity="0.8"/>
|
||
|
|
</marker>
|
||
|
|
|
||
|
|
<!-- Drop shadow effect -->
|
||
|
|
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
|
||
|
|
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
|
||
|
|
<feOffset dx="0" dy="2" result="offsetblur"/>
|
||
|
|
<feComponentTransfer>
|
||
|
|
<feFuncA type="linear" slope="0.15"/>
|
||
|
|
</feComponentTransfer>
|
||
|
|
<feMerge>
|
||
|
|
<feMergeNode/>
|
||
|
|
<feMergeNode in="SourceGraphic"/>
|
||
|
|
</feMerge>
|
||
|
|
</filter>
|
||
|
|
</defs>
|
||
|
|
|
||
|
|
<!-- Background -->
|
||
|
|
<rect x="0" y="0" width="800" height="420" fill="#fafafa"/>
|
||
|
|
|
||
|
|
<!-- Background accent circles for depth -->
|
||
|
|
<circle cx="120" cy="90" r="45" fill="#667eea" opacity="0.04"/>
|
||
|
|
<circle cx="400" cy="90" r="65" fill="#00d2ff" opacity="0.04"/>
|
||
|
|
<circle cx="650" cy="90" r="40" fill="#ffa500" opacity="0.04"/>
|
||
|
|
<circle cx="650" cy="230" r="50" fill="#ff6b6b" opacity="0.04"/>
|
||
|
|
<circle cx="400" cy="330" r="55" fill="#4facfe" opacity="0.04"/>
|
||
|
|
|
||
|
|
<!-- Title with background -->
|
||
|
|
<rect x="250" y="15" width="300" height="35" fill="rgba(99, 102, 241, 0.05)" rx="8"/>
|
||
|
|
<text x="400" y="38" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="23" font-weight="600" fill="#1e293b">
|
||
|
|
BASIC LLM Tool Execution Flow
|
||
|
|
</text>
|
||
|
|
|
||
|
|
<!-- Stage 1: User Input -->
|
||
|
|
<rect x="50" y="70" width="140" height="55" fill="url(#userGrad)" stroke="#667eea" stroke-width="2" rx="10" filter="url(#shadow)"/>
|
||
|
|
<text x="120" y="95" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">USER</text>
|
||
|
|
<text x="120" y="112" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">"What's the policy?"</text>
|
||
|
|
|
||
|
|
<!-- Elegant flow arrow 1 -->
|
||
|
|
<path d="M 190 97 C 220 97, 230 97, 260 97" stroke="#4a5568" stroke-width="2.5" fill="none" marker-end="url(#arrow)" opacity="0.7" stroke-linecap="round"/>
|
||
|
|
|
||
|
|
<!-- Stage 2: LLM Processing -->
|
||
|
|
<rect x="260" y="70" width="280" height="55" fill="url(#llmGrad)" stroke="#00d2ff" stroke-width="2" rx="10" filter="url(#shadow)"/>
|
||
|
|
<text x="400" y="95" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">LLM + CONTEXT</text>
|
||
|
|
<text x="400" y="112" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">Understands intent + loaded KBs</text>
|
||
|
|
|
||
|
|
<!-- Elegant flow arrow 2 -->
|
||
|
|
<path d="M 540 97 C 560 97, 580 97, 600 97" stroke="#4a5568" stroke-width="2.5" fill="none" marker-end="url(#arrow)" opacity="0.7" stroke-linecap="round"/>
|
||
|
|
|
||
|
|
<!-- Stage 3: Decision Diamond -->
|
||
|
|
<g filter="url(#glow)">
|
||
|
|
<path d="M 650 70 L 700 97 L 650 124 L 600 97 Z" fill="rgba(139, 92, 246, 0.15)" stroke="#8b5cf6" stroke-width="2.5"/>
|
||
|
|
<circle cx="650" cy="97" r="10" fill="#8b5cf6" opacity="0.3"/>
|
||
|
|
<text x="650" y="102" text-anchor="middle" font-family="system-ui, sans-serif" font-size="18" font-weight="600" fill="#1e293b">Tool?</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Direct Response Path - graceful curve -->
|
||
|
|
<path d="M 650 70 C 650 40, 500 40, 400 40 C 280 40, 140 40, 140 170"
|
||
|
|
stroke="url(#directPathGrad)" stroke-width="2.5" fill="none" marker-end="url(#arrowGreen)"
|
||
|
|
stroke-dasharray="8,4" opacity="0.6" stroke-linecap="round"/>
|
||
|
|
|
||
|
|
<!-- Label for direct path -->
|
||
|
|
<rect x="350" y="25" width="100" height="22" fill="rgba(16, 185, 129, 0.1)" rx="5"/>
|
||
|
|
<text x="400" y="40" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" font-weight="500" fill="#047857">Direct Answer</text>
|
||
|
|
|
||
|
|
<!-- Tool Path - smooth descent -->
|
||
|
|
<path d="M 650 124 C 650 160, 650 170, 650 200" stroke="url(#toolPathGrad)" stroke-width="3" fill="none" marker-end="url(#arrowOrange)" opacity="0.8" stroke-linecap="round"/>
|
||
|
|
|
||
|
|
<!-- Label for tool path -->
|
||
|
|
<text x="670" y="165" text-anchor="start" font-family="system-ui, sans-serif" font-size="16" font-weight="500" fill="#d97706">Call Tool</text>
|
||
|
|
|
||
|
|
<!-- Stage 4: BASIC Tool -->
|
||
|
|
<rect x="560" y="200" width="180" height="75" fill="url(#toolGrad)" stroke="#ff6b6b" stroke-width="2" rx="10" filter="url(#shadow)"/>
|
||
|
|
<text x="650" y="225" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">BASIC TOOL</text>
|
||
|
|
<text x="650" y="245" text-anchor="middle" font-family="system-ui, monospace" font-size="16" fill="#475569">enrollment.bas</text>
|
||
|
|
<text x="650" y="260" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">PARAM name, course</text>
|
||
|
|
|
||
|
|
<!-- Tool Return Path - smooth curve -->
|
||
|
|
<path d="M 560 237 C 490 237, 430 220, 400 195" stroke="#4a5568" stroke-width="2.5" fill="none" marker-end="url(#arrow)" opacity="0.6" stroke-linecap="round"/>
|
||
|
|
|
||
|
|
<!-- Stage 5: Response Generation -->
|
||
|
|
<rect x="310" y="170" width="180" height="55" fill="url(#responseGrad)" stroke="#4facfe" stroke-width="2" rx="10" filter="url(#shadow)"/>
|
||
|
|
<text x="400" y="195" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">RESPONSE</text>
|
||
|
|
<text x="400" y="212" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">Generate natural answer</text>
|
||
|
|
|
||
|
|
<!-- Final Arrow -->
|
||
|
|
<path d="M 310 197 C 280 197, 240 197, 210 197" stroke="#4a5568" stroke-width="2.5" fill="none" marker-end="url(#arrow)" opacity="0.7" stroke-linecap="round"/>
|
||
|
|
|
||
|
|
<!-- Stage 6: Bot Output -->
|
||
|
|
<rect x="50" y="170" width="140" height="55" fill="url(#userGrad)" stroke="#764ba2" stroke-width="2" rx="10" filter="url(#shadow)"/>
|
||
|
|
<text x="120" y="195" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="600" fill="#1e293b">BOT</text>
|
||
|
|
<text x="120" y="212" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">"30-day return..."</text>
|
||
|
|
|
||
|
|
<!-- Memory Store - elegant and subtle -->
|
||
|
|
<rect x="350" y="290" width="320" height="55" fill="url(#memoryGrad)" stroke="#f5576c" stroke-width="1.5" stroke-dasharray="6,3" rx="10" opacity="0.8"/>
|
||
|
|
<text x="510" y="315" text-anchor="middle" font-family="system-ui, sans-serif" font-size="20" font-weight="500" fill="#1e293b">MEMORY STORE</text>
|
||
|
|
<text x="510" y="332" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569">BOT_MEMORY • Session State • Context</text>
|
||
|
|
|
||
|
|
<!-- Memory connection - delicate -->
|
||
|
|
<path d="M 650 275 L 650 290" stroke="#f5576c" stroke-width="1.5" stroke-dasharray="4,4" fill="none" opacity="0.4"/>
|
||
|
|
<path d="M 400 225 L 400 290" stroke="#4facfe" stroke-width="1.5" stroke-dasharray="4,4" fill="none" opacity="0.4"/>
|
||
|
|
|
||
|
|
<!-- Performance metrics -->
|
||
|
|
<rect x="50" y="370" width="700" height="35" fill="rgba(99, 102, 241, 0.05)" stroke="#8b5cf6" stroke-width="1" stroke-dasharray="6,3" rx="8"/>
|
||
|
|
<text x="400" y="392" text-anchor="middle" font-family="system-ui, sans-serif" font-size="16" fill="#475569" font-style="italic">
|
||
|
|
LLM decides tool calls • Zero IF/THEN logic • Natural conversation flow • Context-aware responses
|
||
|
|
</text>
|
||
|
|
|
||
|
|
<!-- Legend -->
|
||
|
|
<g transform="translate(50, 260)">
|
||
|
|
<text x="0" y="0" font-family="system-ui, sans-serif" font-size="16" font-weight="600" fill="#1e293b">Legend:</text>
|
||
|
|
<circle cx="10" cy="15" r="4" fill="#10b981"/>
|
||
|
|
<text x="20" y="19" font-family="system-ui, sans-serif" font-size="16" fill="#475569">Direct response</text>
|
||
|
|
<circle cx="10" cy="30" r="4" fill="#f59e0b"/>
|
||
|
|
<text x="20" y="34" font-family="system-ui, sans-serif" font-size="16" fill="#475569">Tool invocation</text>
|
||
|
|
</g>
|
||
|
|
</svg>
|