| 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720"> |
| 2 | <defs> |
| 3 | <filter id="cardShadow" x="-15%" y="-15%" width="140%" height="140%"> |
| 4 | <feGaussianBlur in="SourceAlpha" stdDeviation="10" /> |
| 5 | <feOffset dx="0" dy="4" result="offsetBlur" /> |
| 6 | <feFlood flood-color="#000000" flood-opacity="0.12" result="shadowColor" /> |
| 7 | <feComposite in="shadowColor" in2="offsetBlur" operator="in" result="shadow" /> |
| 8 | <feMerge> |
| 9 | <feMergeNode in="shadow" /> |
| 10 | <feMergeNode in="SourceGraphic" /> |
| 11 | </feMerge> |
| 12 | </filter> |
| 13 | <linearGradient id="successGrad" x1="0%" y1="0%" x2="100%" y2="0%"> |
| 14 | <stop offset="0%" stop-color="#4ADE80" stop-opacity="0.15" /> |
| 15 | <stop offset="100%" stop-color="#4ADE80" stop-opacity="0" /> |
| 16 | </linearGradient> |
| 17 | </defs> |
| 18 | |
| 19 | |
| 20 | <rect width="1280" height="720" fill="#0F1117" /> |
| 21 | |
| 22 | |
| 23 | <g id="header"> |
| 24 | <path fill="#D4845A" d="M62,50 H62 A2,2 0 0 1 64,52 V84 A2,2 0 0 1 62,86 H62 A2,2 0 0 1 60,84 V52 A2,2 0 0 1 62,50 Z" /> |
| 25 | <text x="78" y="80" font-family="'Helvetica Neue', Arial, sans-serif" font-size="32" font-weight="bold" fill="#E8E8EC">When (and When Not) to Use Agents</text> |
| 26 | </g> |
| 27 | |
| 28 | |
| 29 | <g id="principle-bar"> |
| 30 | <path fill="#1A1D27" stroke="#2D3348" stroke-width="1" d="M70,110 H1210 A10,10 0 0 1 1220,120 V152 A10,10 0 0 1 1210,162 H70 A10,10 0 0 1 60,152 V120 A10,10 0 0 1 70,110 Z" /> |
| 31 | |
| 32 | <g transform="translate(80.0, 122.0) scale(1.75)" fill="#E8B87D"> |
| 33 | <path fill-rule="evenodd" clip-rule="evenodd" d="M5 11.5V14.5L6.5 16H9.5L11 14.5V11.5L12.2396 10.2604C13.3668 9.13324 14 7.60141 14 6.00736C14 2.69365 11.3137 0 8 0C4.68629 0 2 2.69365 2 6.00736C2 7.60141 2.63324 9.13324 3.76041 10.2604L5 11.5ZM7 9.87398V6H9V9.87398C10.7252 9.42994 12 7.86384 12 6C12 3.79086 10.2091 2 8 2C5.79086 2 4 3.79086 4 6C4 7.86384 5.27477 9.42994 7 9.87398Z" /> |
| 34 | </g> |
| 35 | <text x="118" y="143" font-family="'Helvetica Neue', Arial, sans-serif" font-size="16" fill="#E8B87D" font-weight="bold">Core Principle:</text> |
| 36 | <text x="270" y="143" font-family="'Helvetica Neue', Arial, sans-serif" font-size="16" fill="#E8E8EC">Find the simplest solution possible, and only increase complexity when needed.</text> |
| 37 | </g> |
| 38 | |
| 39 | |
| 40 | |
| 41 | <g id="card-single-llm"> |
| 42 | <path fill="#1A1D27" stroke="#2D3348" stroke-width="1" filter="url(#cardShadow)" d="M72,185 H408 A12,12 0 0 1 420,197 V458 A12,12 0 0 1 408,470 H72 A12,12 0 0 1 60,458 V197 A12,12 0 0 1 72,185 Z" /> |
| 43 | <path fill="#4ADE80" d="M63,185 H417 A3,3 0 0 1 420,188 V188 A3,3 0 0 1 417,191 H63 A3,3 0 0 1 60,188 V188 A3,3 0 0 1 63,185 Z" /> |
| 44 | |
| 45 | <g transform="translate(84.0, 212.0) scale(2.0)" fill="#4ADE80"> |
| 46 | <path d="M0.792725 12.2929L5.08562 8.00002L0.792725 3.70712L2.20694 2.29291L7.91405 8.00002L2.20694 13.7071L0.792725 12.2929Z" /> |
| 47 | <path d="M7.00006 15H15.0001V13H7.00006V15Z" /> |
| 48 | </g> |
| 49 | <text x="128" y="237" font-family="'Helvetica Neue', Arial, sans-serif" font-size="20" font-weight="bold" fill="#E8E8EC">Single LLM Calls</text> |
| 50 | <text x="84" y="270" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#4ADE80" font-weight="bold">START HERE</text> |
| 51 | |
| 52 | <rect x="84" y="290" width="312" height="1" fill="#2D3348" fill-opacity="0.5" /> |
| 53 | <text x="84" y="318" font-family="'Helvetica Neue', Arial, sans-serif" font-size="15" fill="#E8E8EC">Optimized prompts with retrieval</text> |
| 54 | <text x="84" y="340" font-family="'Helvetica Neue', Arial, sans-serif" font-size="15" fill="#E8E8EC">and in-context examples</text> |
| 55 | <text x="84" y="375" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#9CA3AF">✓ Lowest latency</text> |
| 56 | <text x="84" y="398" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#9CA3AF">✓ Lowest cost</text> |
| 57 | <text x="84" y="421" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#9CA3AF">✓ Sufficient for most apps</text> |
| 58 | <text x="84" y="450" font-family="'Helvetica Neue', Arial, sans-serif" font-size="13" fill="#6B7280">Complexity: ●○○</text> |
| 59 | </g> |
| 60 | |
| 61 | |
| 62 | <g id="card-workflows"> |
| 63 | <path fill="#1A1D27" stroke="#2D3348" stroke-width="1" filter="url(#cardShadow)" d="M462,185 H798 A12,12 0 0 1 810,197 V458 A12,12 0 0 1 798,470 H462 A12,12 0 0 1 450,458 V197 A12,12 0 0 1 462,185 Z" /> |
| 64 | <path fill="#5B9BD5" d="M453,185 H807 A3,3 0 0 1 810,188 V188 A3,3 0 0 1 807,191 H453 A3,3 0 0 1 450,188 V188 A3,3 0 0 1 453,185 Z" /> |
| 65 | |
| 66 | <g transform="translate(474.0, 212.0) scale(2.0)" fill="#5B9BD5"> |
| 67 | <path d="M8.01005 0.858582L6.01005 14.8586L7.98995 15.1414L9.98995 1.14142L8.01005 0.858582Z" /> |
| 68 | <path d="M12.5 11.5L11.0858 10.0858L13.1716 8L11.0858 5.91422L12.5 4.5L16 8L12.5 11.5Z" /> |
| 69 | <path d="M2.82843 8L4.91421 10.0858L3.5 11.5L0 8L3.5 4.5L4.91421 5.91422L2.82843 8Z" /> |
| 70 | </g> |
| 71 | <text x="518" y="237" font-family="'Helvetica Neue', Arial, sans-serif" font-size="20" font-weight="bold" fill="#E8E8EC">Workflows</text> |
| 72 | |
| 73 | <text x="474" y="270" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#5B9BD5" font-weight="bold">WHEN MORE COMPLEXITY IS WARRANTED</text> |
| 74 | |
| 75 | <rect x="474" y="290" width="312" height="1" fill="#2D3348" fill-opacity="0.5" /> |
| 76 | <text x="474" y="318" font-family="'Helvetica Neue', Arial, sans-serif" font-size="15" fill="#E8E8EC">LLMs + tools orchestrated</text> |
| 77 | <text x="474" y="340" font-family="'Helvetica Neue', Arial, sans-serif" font-size="15" fill="#E8E8EC">through predefined code paths</text> |
| 78 | <text x="474" y="375" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#9CA3AF">✓ Predictability</text> |
| 79 | <text x="474" y="398" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#9CA3AF">✓ Consistency</text> |
| 80 | <text x="474" y="421" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#9CA3AF">✓ Well-defined tasks</text> |
| 81 | <text x="474" y="450" font-family="'Helvetica Neue', Arial, sans-serif" font-size="13" fill="#6B7280">Complexity: ●●○</text> |
| 82 | </g> |
| 83 | |
| 84 | |
| 85 | <g id="card-agents"> |
| 86 | <path fill="#1A1D27" stroke="#2D3348" stroke-width="1" filter="url(#cardShadow)" d="M852,185 H1208 A12,12 0 0 1 1220,197 V458 A12,12 0 0 1 1208,470 H852 A12,12 0 0 1 840,458 V197 A12,12 0 0 1 852,185 Z" /> |
| 87 | <path fill="#D4845A" d="M843,185 H1217 A3,3 0 0 1 1220,188 V188 A3,3 0 0 1 1217,191 H843 A3,3 0 0 1 840,188 V188 A3,3 0 0 1 843,185 Z" /> |
| 88 | |
| 89 | <g transform="translate(864.0, 212.0) scale(2.0)" fill="#D4845A"> |
| 90 | <path fill-rule="evenodd" clip-rule="evenodd" d="M9 0V2H13L16 8.5L13 15H3L0 8.5L3 2H7V0H9ZM4.59794 11.7384L8 12.2618L11.4021 11.7384L11.0979 9.76163L8 10.2382L4.90206 9.76163L4.59794 11.7384ZM7 6.75C7 7.44036 6.44036 8 5.75 8C5.05964 8 4.5 7.44036 4.5 6.75C4.5 6.05964 5.05964 5.5 5.75 5.5C6.44036 5.5 7 6.05964 7 6.75ZM10.25 8C10.9404 8 11.5 7.44036 11.5 6.75C11.5 6.05964 10.9404 5.5 10.25 5.5C9.55964 5.5 9 6.05964 9 6.75C9 7.44036 9.55964 8 10.25 8Z" /> |
| 91 | </g> |
| 92 | <text x="908" y="237" font-family="'Helvetica Neue', Arial, sans-serif" font-size="20" font-weight="bold" fill="#E8E8EC">Agents</text> |
| 93 | |
| 94 | <text x="864" y="270" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#D4845A" font-weight="bold">WHEN FLEXIBILITY IS NEEDED</text> |
| 95 | |
| 96 | <rect x="864" y="290" width="332" height="1" fill="#2D3348" fill-opacity="0.5" /> |
| 97 | <text x="864" y="318" font-family="'Helvetica Neue', Arial, sans-serif" font-size="15" fill="#E8E8EC">LLMs dynamically direct their</text> |
| 98 | <text x="864" y="340" font-family="'Helvetica Neue', Arial, sans-serif" font-size="15" fill="#E8E8EC">own processes and tool usage</text> |
| 99 | <text x="864" y="375" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#9CA3AF">✓ Flexibility at scale</text> |
| 100 | <text x="864" y="398" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#9CA3AF">✓ Model-driven decisions</text> |
| 101 | <text x="864" y="421" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#9CA3AF">✓ Open-ended problems</text> |
| 102 | <text x="864" y="450" font-family="'Helvetica Neue', Arial, sans-serif" font-size="13" fill="#6B7280">Complexity: ●●●</text> |
| 103 | </g> |
| 104 | |
| 105 | |
| 106 | <polygon points="424,328 440,318 440,338" fill="#2D3348" /> |
| 107 | <polygon points="814,328 830,318 830,338" fill="#2D3348" /> |
| 108 | |
| 109 | |
| 110 | <g id="framework-note"> |
| 111 | <path fill="#1A1D27" stroke="#2D3348" stroke-width="1" d="M72,500 H1208 A12,12 0 0 1 1220,512 V628 A12,12 0 0 1 1208,640 H72 A12,12 0 0 1 60,628 V512 A12,12 0 0 1 72,500 Z" /> |
| 112 | |
| 113 | <g transform="translate(84.0, 524.0) scale(1.75)" fill="#E8B87D"> |
| 114 | <path fill-rule="evenodd" clip-rule="evenodd" d="M4 1H12V5H13.5L16 7.5V9H0V7.5L2.5 5H4V1ZM10 3V5H6V3H10Z" /> |
| 115 | <path d="M0 11V15H16V11H0Z" /> |
| 116 | </g> |
| 117 | <text x="124" y="546" font-family="'Helvetica Neue', Arial, sans-serif" font-size="18" font-weight="bold" fill="#E8B87D">On Frameworks</text> |
| 118 | <text x="84" y="580" font-family="'Helvetica Neue', Arial, sans-serif" font-size="16" fill="#E8E8EC">Start by using LLM APIs directly — many patterns can be implemented in a few lines of code.</text> |
| 119 | <text x="84" y="606" font-family="'Helvetica Neue', Arial, sans-serif" font-size="16" fill="#E8E8EC">If you do use a framework, ensure you understand the underlying code.</text> |
| 120 | <text x="84" y="624" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#9CA3AF">Incorrect assumptions about what's under the hood are a common source of customer error.</text> |
| 121 | </g> |
| 122 | |
| 123 | |
| 124 | <g id="footer"> |
| 125 | <text x="1220" y="700" text-anchor="end" font-family="'Helvetica Neue', Arial, sans-serif" font-size="10" fill="#6B7280">03</text> |
| 126 | </g> |
| 127 | </svg> |