| 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 | </defs> |
| 14 | |
| 15 | <!-- Background --> |
| 16 | <rect width="1280" height="720" fill="#0F1117"/> |
| 17 | |
| 18 | <!-- Page header --> |
| 19 | <g id="header"> |
| 20 | <rect x="60" y="40" width="4" height="32" rx="2" fill="#D4845A"/> |
| 21 | <text x="78" y="66" font-family="'Helvetica Neue', Arial, sans-serif" font-size="28" font-weight="bold" fill="#E8E8EC">Agents in Practice</text> |
| 22 | <text x="78" y="92" font-family="'Helvetica Neue', Arial, sans-serif" font-size="15" fill="#9CA3AF">Two promising applications demonstrating practical value</text> |
| 23 | </g> |
| 24 | |
| 25 | <!-- Left side: two application cards stacked --> |
| 26 | <!-- Customer Support --> |
| 27 | <g id="customer-support"> |
| 28 | <rect x="60" y="115" width="550" height="248" rx="12" fill="#1A1D27" stroke="#2D3348" stroke-width="1" filter="url(#cardShadow)"/> |
| 29 | <rect x="60" y="115" width="6" height="248" rx="3" fill="#5B9BD5"/> |
| 30 | <text x="86" y="148" font-family="'Helvetica Neue', Arial, sans-serif" font-size="20" font-weight="bold" fill="#5B9BD5">A. Customer Support</text> |
| 31 | |
| 32 | <text x="86" y="180" font-family="'Helvetica Neue', Arial, sans-serif" font-size="15" fill="#E8E8EC">Natural fit for open-ended agents:</text> |
| 33 | |
| 34 | <use data-icon="chunk/share-nodes" x="86" y="200" width="16" height="16" fill="#9CA3AF"/> |
| 35 | <text x="112" y="214" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#9CA3AF">Conversation flow + external information access</text> |
| 36 | |
| 37 | <use data-icon="chunk/toolbox" x="86" y="226" width="16" height="16" fill="#9CA3AF"/> |
| 38 | <text x="112" y="240" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#9CA3AF">Tools for customer data, orders, knowledge base</text> |
| 39 | |
| 40 | <use data-icon="chunk/code" x="86" y="252" width="16" height="16" fill="#9CA3AF"/> |
| 41 | <text x="112" y="266" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#9CA3AF">Programmatic actions (refunds, ticket updates)</text> |
| 42 | |
| 43 | <use data-icon="chunk/checkmark" x="86" y="278" width="16" height="16" fill="#9CA3AF"/> |
| 44 | <text x="112" y="292" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#9CA3AF">Measurable success via user-defined resolutions</text> |
| 45 | |
| 46 | <rect x="86" y="310" width="500" height="1" fill="#2D3348" fill-opacity="0.4"/> |
| 47 | <text x="86" y="337" font-family="'Helvetica Neue', Arial, sans-serif" font-size="13" fill="#E8B87D">Usage-based pricing — charge only for successful resolutions</text> |
| 48 | </g> |
| 49 | |
| 50 | <!-- Coding Agents --> |
| 51 | <g id="coding-agents"> |
| 52 | <rect x="60" y="388" width="550" height="272" rx="12" fill="#1A1D27" stroke="#2D3348" stroke-width="1" filter="url(#cardShadow)"/> |
| 53 | <rect x="60" y="388" width="6" height="272" rx="3" fill="#D4845A"/> |
| 54 | <text x="86" y="421" font-family="'Helvetica Neue', Arial, sans-serif" font-size="20" font-weight="bold" fill="#D4845A">B. Coding Agents</text> |
| 55 | |
| 56 | <text x="86" y="453" font-family="'Helvetica Neue', Arial, sans-serif" font-size="15" fill="#E8E8EC">Remarkable potential — agents are effective because:</text> |
| 57 | |
| 58 | <use data-icon="chunk/badge-check" x="86" y="473" width="16" height="16" fill="#9CA3AF"/> |
| 59 | <text x="112" y="487" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#9CA3AF">Code solutions verifiable via automated tests</text> |
| 60 | |
| 61 | <use data-icon="chunk/arrows-repeat" x="86" y="499" width="16" height="16" fill="#9CA3AF"/> |
| 62 | <text x="112" y="513" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#9CA3AF">Iterate using test results as feedback</text> |
| 63 | |
| 64 | <use data-icon="chunk/layers" x="86" y="525" width="16" height="16" fill="#9CA3AF"/> |
| 65 | <text x="112" y="539" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#9CA3AF">Well-defined and structured problem space</text> |
| 66 | |
| 67 | <use data-icon="chunk/target" x="86" y="551" width="16" height="16" fill="#9CA3AF"/> |
| 68 | <text x="112" y="565" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#9CA3AF">Output quality measured objectively</text> |
| 69 | |
| 70 | <rect x="86" y="583" width="500" height="1" fill="#2D3348" fill-opacity="0.4"/> |
| 71 | <text x="86" y="606" font-family="'Helvetica Neue', Arial, sans-serif" font-size="13" fill="#E8B87D">SWE-bench: solving real GitHub issues from PR descriptions alone</text> |
| 72 | <text x="86" y="628" font-family="'Helvetica Neue', Arial, sans-serif" font-size="13" fill="#6B7280">More time optimizing tools than the overall prompt</text> |
| 73 | </g> |
| 74 | |
| 75 | <!-- Right side: Coding agent flow diagram --> |
| 76 | <g id="coding-flow"> |
| 77 | <image href="../images/image_7.png" x="640" y="115" width="580" height="545" preserveAspectRatio="xMidYMid meet"/> |
| 78 | </g> |
| 79 | |
| 80 | <!-- Footer --> |
| 81 | <g id="footer"> |
| 82 | <text x="1220" y="700" text-anchor="end" font-family="'Helvetica Neue', Arial, sans-serif" font-size="10" fill="#6B7280">11</text> |
| 83 | </g> |
| 84 | </svg> |
| 85 |