report added
This commit is contained in:
Shayan Rais
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
@@ -0,0 +1,142 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1100 620" font-family="Segoe UI, Arial, sans-serif">
|
||||
<!-- Background -->
|
||||
<rect width="1100" height="620" fill="#ffffff" rx="8"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="550" y="38" text-anchor="middle" font-size="22" font-weight="700" fill="#1a1a1a">Programmatic Tool Calling (PTC)</text>
|
||||
<text x="550" y="58" text-anchor="middle" font-size="13" fill="#888">Claude Opus 4.6 / Sonnet 4.6 — Now Generally Available</text>
|
||||
|
||||
<!-- Divider -->
|
||||
<line x1="550" y1="75" x2="550" y2="600" stroke="#d0d0d0" stroke-width="1.5" stroke-dasharray="6,4"/>
|
||||
|
||||
<!-- LEFT SIDE: Traditional -->
|
||||
<text x="275" y="95" text-anchor="middle" font-size="16" font-weight="600" fill="#444">Traditional Tool Calling</text>
|
||||
<text x="275" y="113" text-anchor="middle" font-size="12" fill="#999">3 tools = 3 inference passes</text>
|
||||
|
||||
<!-- Round Trip 1 -->
|
||||
<rect x="60" y="135" width="110" height="40" rx="6" fill="#FFF3E0" stroke="#F57C00" stroke-width="1.5"/>
|
||||
<text x="115" y="160" text-anchor="middle" font-size="13" font-weight="600" fill="#E65100">Claude</text>
|
||||
|
||||
<line x1="170" y1="148" x2="280" y2="148" stroke="#E53935" stroke-width="1.5" marker-end="url(#arrowRed)"/>
|
||||
<text x="225" y="142" text-anchor="middle" font-size="10" fill="#E53935">Tool call 1</text>
|
||||
|
||||
<rect x="280" y="135" width="110" height="40" rx="6" fill="#FFCDD2" stroke="#E53935" stroke-width="1.5"/>
|
||||
<text x="335" y="160" text-anchor="middle" font-size="13" font-weight="600" fill="#B71C1C">Action</text>
|
||||
|
||||
<line x1="280" y1="168" x2="170" y2="168" stroke="#43A047" stroke-width="1.5" marker-end="url(#arrowGreen)"/>
|
||||
<text x="225" y="182" text-anchor="middle" font-size="10" fill="#43A047">Response 1</text>
|
||||
|
||||
<!-- Round Trip 2 -->
|
||||
<rect x="60" y="210" width="110" height="40" rx="6" fill="#FFF3E0" stroke="#F57C00" stroke-width="1.5"/>
|
||||
<text x="115" y="235" text-anchor="middle" font-size="13" font-weight="600" fill="#E65100">Claude</text>
|
||||
|
||||
<line x1="170" y1="223" x2="280" y2="223" stroke="#E53935" stroke-width="1.5" marker-end="url(#arrowRed)"/>
|
||||
<text x="225" y="217" text-anchor="middle" font-size="10" fill="#E53935">Tool call 2</text>
|
||||
|
||||
<rect x="280" y="210" width="110" height="40" rx="6" fill="#C8E6C9" stroke="#43A047" stroke-width="1.5"/>
|
||||
<text x="335" y="235" text-anchor="middle" font-size="13" font-weight="600" fill="#1B5E20">Action</text>
|
||||
|
||||
<line x1="280" y1="243" x2="170" y2="243" stroke="#43A047" stroke-width="1.5" marker-end="url(#arrowGreen)"/>
|
||||
<text x="225" y="257" text-anchor="middle" font-size="10" fill="#43A047">Response 2</text>
|
||||
|
||||
<!-- Round Trip 3 -->
|
||||
<rect x="60" y="285" width="110" height="40" rx="6" fill="#FFF3E0" stroke="#F57C00" stroke-width="1.5"/>
|
||||
<text x="115" y="310" text-anchor="middle" font-size="13" font-weight="600" fill="#E65100">Claude</text>
|
||||
|
||||
<line x1="170" y1="298" x2="280" y2="298" stroke="#E53935" stroke-width="1.5" marker-end="url(#arrowRed)"/>
|
||||
<text x="225" y="292" text-anchor="middle" font-size="10" fill="#E53935">Tool call 3</text>
|
||||
|
||||
<rect x="280" y="285" width="110" height="40" rx="6" fill="#BBDEFB" stroke="#1E88E5" stroke-width="1.5"/>
|
||||
<text x="335" y="310" text-anchor="middle" font-size="13" font-weight="600" fill="#0D47A1">Action</text>
|
||||
|
||||
<line x1="280" y1="318" x2="170" y2="318" stroke="#43A047" stroke-width="1.5" marker-end="url(#arrowGreen)"/>
|
||||
<text x="225" y="332" text-anchor="middle" font-size="10" fill="#43A047">Response 3</text>
|
||||
|
||||
<!-- Final Answer Left -->
|
||||
<rect x="60" y="360" width="110" height="40" rx="6" fill="#FFF3E0" stroke="#F57C00" stroke-width="1.5"/>
|
||||
<text x="115" y="385" text-anchor="middle" font-size="13" font-weight="600" fill="#E65100">Claude</text>
|
||||
|
||||
<line x1="170" y1="380" x2="250" y2="380" stroke="#F57C00" stroke-width="1.5" marker-end="url(#arrowOrange)"/>
|
||||
|
||||
<rect x="250" y="360" width="140" height="40" rx="6" fill="#F5F5F5" stroke="#9E9E9E" stroke-width="1.5"/>
|
||||
<text x="320" y="385" text-anchor="middle" font-size="13" font-weight="600" fill="#424242">Final Answer</text>
|
||||
|
||||
<!-- Token cost left -->
|
||||
<rect x="85" y="425" width="290" height="55" rx="6" fill="#FFF8E1" stroke="#FFC107" stroke-width="1"/>
|
||||
<text x="230" y="447" text-anchor="middle" font-size="12" font-weight="600" fill="#F57F17">Token Cost: HIGH</text>
|
||||
<text x="230" y="465" text-anchor="middle" font-size="11" fill="#795548">All 3 responses enter context window</text>
|
||||
|
||||
<!-- RIGHT SIDE: Programmatic -->
|
||||
<text x="825" y="95" text-anchor="middle" font-size="16" font-weight="600" fill="#444">Programmatic Tool Calling</text>
|
||||
<text x="825" y="113" text-anchor="middle" font-size="12" fill="#999">3 tools = 1 inference pass</text>
|
||||
|
||||
<!-- Claude box -->
|
||||
<rect x="590" y="145" width="110" height="50" rx="6" fill="#FFF3E0" stroke="#F57C00" stroke-width="1.5"/>
|
||||
<text x="645" y="175" text-anchor="middle" font-size="13" font-weight="600" fill="#E65100">Claude</text>
|
||||
|
||||
<!-- Arrow to Script -->
|
||||
<line x1="700" y1="170" x2="780" y2="170" stroke="#1565C0" stroke-width="1.5" marker-end="url(#arrowBlue)"/>
|
||||
<text x="740" y="163" text-anchor="middle" font-size="10" fill="#1565C0">Bash(..)</text>
|
||||
|
||||
<!-- Script container -->
|
||||
<rect x="780" y="130" width="260" height="260" rx="8" fill="#F5F5F5" stroke="#9E9E9E" stroke-width="1.5"/>
|
||||
<text x="910" y="155" text-anchor="middle" font-size="14" font-weight="700" fill="#424242">Python Script</text>
|
||||
<line x1="795" y1="165" x2="1025" y2="165" stroke="#BDBDBD" stroke-width="1"/>
|
||||
|
||||
<!-- Tool calls inside script -->
|
||||
<rect x="805" y="180" width="210" height="30" rx="4" fill="#FFCDD2" stroke="#E53935" stroke-width="1"/>
|
||||
<text x="910" y="200" text-anchor="middle" font-size="11" font-weight="500" fill="#B71C1C">await query_database(sql_1)</text>
|
||||
|
||||
<rect x="805" y="220" width="210" height="30" rx="4" fill="#C8E6C9" stroke="#43A047" stroke-width="1"/>
|
||||
<text x="910" y="240" text-anchor="middle" font-size="11" font-weight="500" fill="#1B5E20">await query_database(sql_2)</text>
|
||||
|
||||
<rect x="805" y="260" width="210" height="30" rx="4" fill="#BBDEFB" stroke="#1E88E5" stroke-width="1"/>
|
||||
<text x="910" y="280" text-anchor="middle" font-size="11" font-weight="500" fill="#0D47A1">await query_database(sql_3)</text>
|
||||
|
||||
<!-- Processing inside script -->
|
||||
<rect x="805" y="305" width="210" height="30" rx="4" fill="#E8EAF6" stroke="#5C6BC0" stroke-width="1"/>
|
||||
<text x="910" y="325" text-anchor="middle" font-size="11" font-weight="500" fill="#283593">filter + aggregate results</text>
|
||||
|
||||
<rect x="805" y="345" width="210" height="30" rx="4" fill="#EDE7F6" stroke="#7E57C2" stroke-width="1"/>
|
||||
<text x="910" y="365" text-anchor="middle" font-size="11" font-weight="500" fill="#4527A0">print(summary)</text>
|
||||
|
||||
<!-- Arrow back: only stdout -->
|
||||
<line x1="780" y1="350" x2="700" y2="350" stroke="#43A047" stroke-width="2" marker-end="url(#arrowGreen)"/>
|
||||
<text x="740" y="340" text-anchor="middle" font-size="10" font-weight="600" fill="#43A047">stdout only</text>
|
||||
|
||||
<!-- Claude receives -->
|
||||
<rect x="590" y="330" width="110" height="50" rx="6" fill="#FFF3E0" stroke="#F57C00" stroke-width="1.5"/>
|
||||
<text x="645" y="360" text-anchor="middle" font-size="13" font-weight="600" fill="#E65100">Claude</text>
|
||||
|
||||
<!-- Final answer right -->
|
||||
<line x1="645" y1="380" x2="645" y2="410" stroke="#F57C00" stroke-width="1.5" marker-end="url(#arrowOrange)"/>
|
||||
|
||||
<rect x="575" y="410" width="140" height="40" rx="6" fill="#F5F5F5" stroke="#9E9E9E" stroke-width="1.5"/>
|
||||
<text x="645" y="435" text-anchor="middle" font-size="13" font-weight="600" fill="#424242">Final Answer</text>
|
||||
|
||||
<!-- Token cost right -->
|
||||
<rect x="585" y="475" width="455" height="55" rx="6" fill="#E8F5E9" stroke="#43A047" stroke-width="1"/>
|
||||
<text x="812" y="497" text-anchor="middle" font-size="12" font-weight="600" fill="#2E7D32">Token Cost: ~37% LOWER</text>
|
||||
<text x="812" y="515" text-anchor="middle" font-size="11" fill="#795548">Only stdout summary enters context — raw tool results stay in sandbox</text>
|
||||
|
||||
<!-- Key insight box -->
|
||||
<rect x="30" y="550" width="1040" height="50" rx="6" fill="#E3F2FD" stroke="#1565C0" stroke-width="1"/>
|
||||
<text x="550" y="572" text-anchor="middle" font-size="13" font-weight="600" fill="#0D47A1">Key: Claude pre-bakes decision paths in code. Tool results go to the script, not the context window.</text>
|
||||
<text x="550" y="590" text-anchor="middle" font-size="12" fill="#1565C0">Intermediate data is processed programmatically — only the final summary reaches Claude.</text>
|
||||
|
||||
<!-- Arrow markers -->
|
||||
<defs>
|
||||
<marker id="arrowRed" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#E53935"/>
|
||||
</marker>
|
||||
<marker id="arrowGreen" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#43A047"/>
|
||||
</marker>
|
||||
<marker id="arrowBlue" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#1565C0"/>
|
||||
</marker>
|
||||
<marker id="arrowOrange" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
|
||||
<polygon points="0 0, 8 3, 0 6" fill="#F57C00"/>
|
||||
</marker>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.0 KiB |
@@ -0,0 +1,138 @@
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 7.3 KiB |
Reference in New Issue
Block a user