Shayan Rais
139 lines
7.3 KiB
XML
139 lines
7.3 KiB
XML
<svg viewBox="0 0 900 580" xmlns="http://www.w3.org/2000/svg" style="font-family: system-ui, -apple-system, sans-serif;">
|
||
<defs>
|
||
<!-- Gradients -->
|
||
<linearGradient id="cliGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" style="stop-color:#667eea"/>
|
||
<stop offset="100%" style="stop-color:#764ba2"/>
|
||
</linearGradient>
|
||
<linearGradient id="sdkGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" style="stop-color:#34d399"/>
|
||
<stop offset="100%" style="stop-color:#059669"/>
|
||
</linearGradient>
|
||
<linearGradient id="questionGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" style="stop-color:#4facfe"/>
|
||
<stop offset="100%" style="stop-color:#00f2fe"/>
|
||
</linearGradient>
|
||
<linearGradient id="claudeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" style="stop-color:#d4a574"/>
|
||
<stop offset="100%" style="stop-color:#c4956a"/>
|
||
</linearGradient>
|
||
|
||
<!-- Drop Shadow -->
|
||
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||
<feDropShadow dx="2" dy="4" stdDeviation="4" flood-opacity="0.15"/>
|
||
</filter>
|
||
|
||
<!-- Glow effect for hover -->
|
||
<filter id="glow">
|
||
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
|
||
<feMerge>
|
||
<feMergeNode in="coloredBlur"/>
|
||
<feMergeNode in="SourceGraphic"/>
|
||
</feMerge>
|
||
</filter>
|
||
|
||
<!-- Arrow markers -->
|
||
<marker id="arrowheadCli" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
|
||
<polygon points="0 0, 10 3.5, 0 7" fill="#667eea"/>
|
||
</marker>
|
||
<marker id="arrowheadSdk" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
|
||
<polygon points="0 0, 10 3.5, 0 7" fill="#059669"/>
|
||
</marker>
|
||
</defs>
|
||
|
||
<!-- Background -->
|
||
<rect width="900" height="580" fill="#f8fafc" rx="12"/>
|
||
|
||
<!-- Title -->
|
||
<text x="450" y="35" text-anchor="middle" font-size="18" font-weight="700" fill="#1e293b">Same Question, Different Paths: Why Outputs May Vary</text>
|
||
|
||
<!-- THE QUESTION - Central element at top -->
|
||
<g filter="url(#shadow)">
|
||
<rect x="275" y="55" width="350" height="70" rx="12" fill="url(#questionGradient)"/>
|
||
<text x="450" y="82" text-anchor="middle" font-size="11" fill="#fff" font-weight="600">USER QUESTION</text>
|
||
<text x="450" y="105" text-anchor="middle" font-size="15" fill="#fff" font-weight="700">"What is the capital of Norway?"</text>
|
||
</g>
|
||
|
||
<!-- Split arrows from question -->
|
||
<path d="M 370 125 L 370 145 L 200 145 L 200 165" stroke="#667eea" stroke-width="3" fill="none" marker-end="url(#arrowheadCli)"/>
|
||
<path d="M 530 125 L 530 145 L 700 145 L 700 165" stroke="#059669" stroke-width="3" fill="none" marker-end="url(#arrowheadSdk)"/>
|
||
|
||
<!-- CLI PATH (Left Side) -->
|
||
<g filter="url(#shadow)">
|
||
<rect x="50" y="170" width="300" height="50" rx="10" fill="url(#cliGradient)"/>
|
||
<text x="200" y="200" text-anchor="middle" font-size="14" fill="#fff" font-weight="700">Claude CLI (Claude Code)</text>
|
||
</g>
|
||
|
||
<!-- CLI System Prompt Box -->
|
||
<g filter="url(#shadow)">
|
||
<rect x="50" y="235" width="300" height="145" rx="10" fill="#fff" stroke="#667eea" stroke-width="2"/>
|
||
<text x="200" y="258" text-anchor="middle" font-size="12" fill="#667eea" font-weight="700">SYSTEM PROMPT (modular, ~269+ base)</text>
|
||
<line x1="70" y1="270" x2="330" y2="270" stroke="#e2e8f0" stroke-width="1"/>
|
||
<text x="75" y="290" font-size="10" fill="#475569">+ 18+ Tool Instructions (Write, Read, Bash...)</text>
|
||
<text x="75" y="308" font-size="10" fill="#475569">+ Coding Guidelines & Style Rules</text>
|
||
<text x="75" y="326" font-size="10" fill="#475569">+ Security & Injection Defense</text>
|
||
<text x="75" y="344" font-size="10" fill="#475569">+ CLAUDE.md Project Context</text>
|
||
<text x="75" y="362" font-size="10" fill="#475569">+ Environment (OS, Git, Directory)</text>
|
||
</g>
|
||
|
||
<!-- SDK PATH (Right Side) -->
|
||
<g filter="url(#shadow)">
|
||
<rect x="550" y="170" width="300" height="50" rx="10" fill="url(#sdkGradient)"/>
|
||
<text x="700" y="200" text-anchor="middle" font-size="14" fill="#fff" font-weight="700">Claude Agent SDK</text>
|
||
</g>
|
||
|
||
<!-- SDK System Prompt Box -->
|
||
<g filter="url(#shadow)">
|
||
<rect x="550" y="235" width="300" height="145" rx="10" fill="#fff" stroke="#059669" stroke-width="2"/>
|
||
<text x="700" y="258" text-anchor="middle" font-size="12" fill="#059669" font-weight="700">SYSTEM PROMPT (minimal default)</text>
|
||
<line x1="570" y1="270" x2="830" y2="270" stroke="#e2e8f0" stroke-width="1"/>
|
||
<text x="575" y="290" font-size="10" fill="#475569">+ Minimal Tool Instructions</text>
|
||
<text x="575" y="308" font-size="10" fill="#475569">+ Basic Safety Rules</text>
|
||
<text x="575" y="326" font-size="10" fill="#94a3b8" font-style="italic">− No Coding Guidelines</text>
|
||
<text x="575" y="344" font-size="10" fill="#94a3b8" font-style="italic">− No Project Context</text>
|
||
<text x="575" y="362" font-size="10" fill="#94a3b8" font-style="italic">− No Environment Info</text>
|
||
</g>
|
||
|
||
<!-- Arrows to Claude -->
|
||
<path d="M 200 380 L 200 400 L 450 400 L 450 420" stroke="#667eea" stroke-width="2" fill="none" marker-end="url(#arrowheadCli)"/>
|
||
<path d="M 700 380 L 700 400 L 450 400 L 450 420" stroke="#059669" stroke-width="2" fill="none" marker-end="url(#arrowheadSdk)"/>
|
||
|
||
<!-- Claude Model (Center) -->
|
||
<g filter="url(#shadow)">
|
||
<rect x="325" y="420" width="250" height="55" rx="12" fill="url(#claudeGradient)"/>
|
||
<text x="450" y="445" text-anchor="middle" font-size="11" fill="#fff" font-weight="600">CLAUDE MODEL</text>
|
||
<text x="450" y="463" text-anchor="middle" font-size="13" fill="#fff" font-weight="700">Claude Opus 4.5</text>
|
||
</g>
|
||
|
||
<!-- Warning/Inconsistency Box at bottom -->
|
||
<g filter="url(#shadow)">
|
||
<rect x="125" y="495" width="650" height="75" rx="12" fill="#fef2f2" stroke="#ef4444" stroke-width="2"/>
|
||
<text x="450" y="518" text-anchor="middle" font-size="13" fill="#dc2626" font-weight="700">⚠ NO GUARANTEE OF IDENTICAL OUTPUT</text>
|
||
<text x="450" y="538" text-anchor="middle" font-size="10" fill="#7f1d1d">Even with matching prompts + temperature=0, outputs may differ due to:</text>
|
||
<text x="450" y="556" text-anchor="middle" font-size="10" fill="#991b1b" font-weight="600">No Seed Parameter · MoE Routing · Floating-Point Variance · Infrastructure Non-Determinism</text>
|
||
</g>
|
||
|
||
<!-- Token comparison badges -->
|
||
<g>
|
||
<rect x="75" y="385" width="110" height="22" rx="11" fill="#667eea"/>
|
||
<text x="130" y="400" text-anchor="middle" font-size="9" fill="#fff" font-weight="600">~269+ base tokens</text>
|
||
</g>
|
||
<g>
|
||
<rect x="715" y="385" width="100" height="22" rx="11" fill="#059669"/>
|
||
<text x="765" y="400" text-anchor="middle" font-size="9" fill="#fff" font-weight="600">minimal default</text>
|
||
</g>
|
||
|
||
<!-- VS indicator -->
|
||
<circle cx="450" cy="305" r="22" fill="#1e293b"/>
|
||
<text x="450" y="310" text-anchor="middle" font-size="12" fill="#fff" font-weight="700">VS</text>
|
||
|
||
<!-- Legend -->
|
||
<g transform="translate(50, 495)">
|
||
<text x="0" y="0" font-size="9" fill="#64748b" font-weight="600">LEGEND:</text>
|
||
<rect x="0" y="8" width="12" height="12" rx="2" fill="url(#cliGradient)"/>
|
||
<text x="16" y="18" font-size="9" fill="#64748b">CLI Path</text>
|
||
<rect x="55" y="8" width="12" height="12" rx="2" fill="url(#sdkGradient)"/>
|
||
<text x="71" y="18" font-size="9" fill="#64748b">SDK Path</text>
|
||
</g>
|
||
</svg>
|