| 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720"> |
| 2 | <defs> |
| 3 | <radialGradient id="agentGlow" cx="50%" cy="40%" r="50%"> |
| 4 | <stop offset="0%" stop-color="#D4845A" stop-opacity="0.08"/> |
| 5 | <stop offset="100%" stop-color="#D4845A" stop-opacity="0"/> |
| 6 | </radialGradient> |
| 7 | </defs> |
| 8 | |
| 9 | <!-- Background --> |
| 10 | <rect width="1280" height="720" fill="#0F1117"/> |
| 11 | <rect width="1280" height="720" fill="url(#agentGlow)"/> |
| 12 | |
| 13 | <!-- Page header --> |
| 14 | <g id="header"> |
| 15 | <rect x="60" y="50" width="4" height="36" rx="2" fill="#D4845A"/> |
| 16 | <text x="78" y="80" font-family="'Helvetica Neue', Arial, sans-serif" font-size="32" font-weight="bold" fill="#E8E8EC">Agents: Autonomous LLM Systems</text> |
| 17 | </g> |
| 18 | |
| 19 | <!-- Diagram: centered, breathing-style hero --> |
| 20 | <g id="diagram"> |
| 21 | <image href="../images/image_6.png" x="200" y="110" width="880" height="367" preserveAspectRatio="xMidYMid meet"/> |
| 22 | </g> |
| 23 | |
| 24 | <!-- Key capability tags below diagram — horizontal strip, naked text --> |
| 25 | <g id="capabilities"> |
| 26 | <rect x="60" y="500" width="1160" height="1" fill="#2D3348" fill-opacity="0.3"/> |
| 27 | |
| 28 | <!-- Tag-style capabilities --> |
| 29 | <rect x="80" y="520" width="200" height="36" rx="18" fill="#D4845A" fill-opacity="0.12" stroke="#D4845A" stroke-width="1" stroke-opacity="0.3"/> |
| 30 | <text x="180" y="544" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#D4845A">Complex Inputs</text> |
| 31 | |
| 32 | <rect x="300" y="520" width="220" height="36" rx="18" fill="#D4845A" fill-opacity="0.12" stroke="#D4845A" stroke-width="1" stroke-opacity="0.3"/> |
| 33 | <text x="410" y="544" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#D4845A">Reasoning & Planning</text> |
| 34 | |
| 35 | <rect x="540" y="520" width="200" height="36" rx="18" fill="#D4845A" fill-opacity="0.12" stroke="#D4845A" stroke-width="1" stroke-opacity="0.3"/> |
| 36 | <text x="640" y="544" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#D4845A">Reliable Tool Use</text> |
| 37 | |
| 38 | <rect x="760" y="520" width="200" height="36" rx="18" fill="#D4845A" fill-opacity="0.12" stroke="#D4845A" stroke-width="1" stroke-opacity="0.3"/> |
| 39 | <text x="860" y="544" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#D4845A">Error Recovery</text> |
| 40 | |
| 41 | <rect x="980" y="520" width="200" height="36" rx="18" fill="#D4845A" fill-opacity="0.12" stroke="#D4845A" stroke-width="1" stroke-opacity="0.3"/> |
| 42 | <text x="1080" y="544" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#D4845A">Human Checkpoints</text> |
| 43 | </g> |
| 44 | |
| 45 | <!-- Bottom insight text — breathing style, no cards --> |
| 46 | <g id="insight"> |
| 47 | <text x="640" y="596" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="18" fill="#E8E8EC">Implementation is often straightforward: <tspan font-weight="bold" fill="#E8B87D">LLMs using tools in a loop.</tspan></text> |
| 48 | <text x="640" y="628" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="16" fill="#9CA3AF">Higher costs + compounding errors → extensive testing in sandboxed environments + guardrails.</text> |
| 49 | </g> |
| 50 | |
| 51 | <!-- Footer --> |
| 52 | <g id="footer"> |
| 53 | <text x="1220" y="700" text-anchor="end" font-family="'Helvetica Neue', Arial, sans-serif" font-size="10" fill="#6B7280">10</text> |
| 54 | </g> |
| 55 | </svg> |
| 56 |