Shayan Rais
142 lines
9.0 KiB
XML
142 lines
9.0 KiB
XML
<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> |