103 lines
6.8 KiB
XML
103 lines
6.8 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 300" width="700" height="300">
|
|
<defs>
|
|
<marker id="arrow-mal" viewBox="0 0 10 7" refX="10" refY="3.5" markerWidth="8" markerHeight="6" orient="auto-start-reverse">
|
|
<path d="M0,0 L10,3.5 L0,7z" fill="#666"/>
|
|
</marker>
|
|
</defs>
|
|
|
|
<!-- Title -->
|
|
<text x="350" y="22" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#333">Multimodal Agent: Observe → Reason → Act</text>
|
|
|
|
<!-- Center label -->
|
|
<rect x="280" y="130" width="140" height="42" rx="10" fill="#9b59b6" fill-opacity="0.12" stroke="#9b59b6" stroke-width="2"/>
|
|
<text x="350" y="148" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" font-weight="bold" fill="#9b59b6">Multimodal</text>
|
|
<text x="350" y="163" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" font-weight="bold" fill="#9b59b6">Agent</text>
|
|
|
|
<!-- ===== TOP: Observe ===== -->
|
|
<rect x="270" y="42" width="160" height="52" rx="8" fill="#3498db" fill-opacity="0.12" stroke="#3498db" stroke-width="1.5"/>
|
|
<text x="350" y="60" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="#3498db">Observe</text>
|
|
|
|
<!-- Screen icon -->
|
|
<rect x="290" y="67" width="24" height="18" rx="2" fill="none" stroke="#3498db" stroke-width="1.2"/>
|
|
<line x1="298" y1="85" x2="308" y2="85" stroke="#3498db" stroke-width="1.2"/>
|
|
<text x="325" y="80" font-family="Arial, sans-serif" font-size="8" fill="#3498db">Screen / Camera</text>
|
|
|
|
<!-- Camera icon -->
|
|
<rect x="386" y="67" width="18" height="14" rx="2" fill="none" stroke="#3498db" stroke-width="1"/>
|
|
<circle cx="395" cy="74" r="4" fill="none" stroke="#3498db" stroke-width="0.8"/>
|
|
<text x="410" y="80" font-family="Arial, sans-serif" font-size="8" fill="#3498db">API</text>
|
|
|
|
<!-- ===== RIGHT: Reason ===== -->
|
|
<rect x="500" y="110" width="160" height="82" rx="8" fill="#f39c12" fill-opacity="0.12" stroke="#f39c12" stroke-width="1.5"/>
|
|
<text x="580" y="132" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="#f39c12">Reason</text>
|
|
|
|
<!-- Brain/model icon -->
|
|
<circle cx="540" cy="158" r="12" fill="none" stroke="#f39c12" stroke-width="1.2"/>
|
|
<path d="M534,156 Q537,150 540,156 Q543,150 546,156" fill="none" stroke="#f39c12" stroke-width="1"/>
|
|
<path d="M534,160 Q537,166 540,160 Q543,166 546,160" fill="none" stroke="#f39c12" stroke-width="1"/>
|
|
|
|
<!-- CoT label -->
|
|
<rect x="560" y="145" width="36" height="16" rx="4" fill="#f39c12" fill-opacity="0.2" stroke="#f39c12" stroke-width="0.8"/>
|
|
<text x="578" y="156" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" font-weight="bold" fill="#f39c12">CoT</text>
|
|
|
|
<text x="580" y="180" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#666">Think step-by-step</text>
|
|
|
|
<!-- ===== BOTTOM: Act ===== -->
|
|
<rect x="270" y="208" width="160" height="62" rx="8" fill="#e74c3c" fill-opacity="0.12" stroke="#e74c3c" stroke-width="1.5"/>
|
|
<text x="350" y="228" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="#e74c3c">Act</text>
|
|
|
|
<!-- Action icons -->
|
|
<!-- Click icon -->
|
|
<circle cx="300" cy="252" r="6" fill="none" stroke="#e74c3c" stroke-width="1"/>
|
|
<circle cx="300" cy="252" r="2" fill="#e74c3c"/>
|
|
<text x="300" y="268" text-anchor="middle" font-family="Arial, sans-serif" font-size="7" fill="#e74c3c">Click</text>
|
|
|
|
<!-- Type icon -->
|
|
<rect x="328" y="246" width="16" height="12" rx="2" fill="none" stroke="#e74c3c" stroke-width="1"/>
|
|
<line x1="331" y1="250" x2="335" y2="250" stroke="#e74c3c" stroke-width="0.6"/>
|
|
<line x1="337" y1="250" x2="341" y2="250" stroke="#e74c3c" stroke-width="0.6"/>
|
|
<line x1="332" y1="254" x2="340" y2="254" stroke="#e74c3c" stroke-width="0.6"/>
|
|
<text x="336" y="268" text-anchor="middle" font-family="Arial, sans-serif" font-size="7" fill="#e74c3c">Type</text>
|
|
|
|
<!-- Tool icon -->
|
|
<rect x="362" y="246" width="16" height="12" rx="2" fill="none" stroke="#e74c3c" stroke-width="1"/>
|
|
<line x1="366" y1="252" x2="374" y2="252" stroke="#e74c3c" stroke-width="1"/>
|
|
<text x="370" y="268" text-anchor="middle" font-family="Arial, sans-serif" font-size="7" fill="#e74c3c">Tool</text>
|
|
|
|
<!-- Speak icon -->
|
|
<path d="M398,246 L414,246 L414,256 L406,256 L402,260 L402,256 L398,256 Z" fill="none" stroke="#e74c3c" stroke-width="1"/>
|
|
<text x="406" y="268" text-anchor="middle" font-family="Arial, sans-serif" font-size="7" fill="#e74c3c">Speak</text>
|
|
|
|
<!-- ===== LEFT: Environment Updates ===== -->
|
|
<rect x="40" y="110" width="160" height="82" rx="8" fill="#27ae60" fill-opacity="0.12" stroke="#27ae60" stroke-width="1.5"/>
|
|
<text x="120" y="132" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="#27ae60">Environment</text>
|
|
<text x="120" y="148" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="#27ae60">Updates</text>
|
|
|
|
<!-- State change icon -->
|
|
<rect x="80" y="158" width="30" height="22" rx="3" fill="none" stroke="#27ae60" stroke-width="1"/>
|
|
<text x="95" y="172" text-anchor="middle" font-family="Arial, sans-serif" font-size="7" fill="#27ae60">State</text>
|
|
|
|
<text x="120" y="172" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#27ae60">→</text>
|
|
|
|
<rect x="130" y="158" width="30" height="22" rx="3" fill="#27ae60" fill-opacity="0.15" stroke="#27ae60" stroke-width="1"/>
|
|
<text x="145" y="172" text-anchor="middle" font-family="Arial, sans-serif" font-size="7" fill="#27ae60">New</text>
|
|
|
|
<!-- ===== Circular Arrows ===== -->
|
|
<!-- Top → Right (Observe → Reason) -->
|
|
<path d="M430,68 Q490,68 500,120" fill="none" stroke="#666" stroke-width="1.8" marker-end="url(#arrow-mal)"/>
|
|
|
|
<!-- Right → Bottom (Reason → Act) -->
|
|
<path d="M500,192 Q490,240 430,240" fill="none" stroke="#666" stroke-width="1.8" marker-end="url(#arrow-mal)"/>
|
|
|
|
<!-- Bottom → Left (Act → Environment) -->
|
|
<path d="M270,240 Q210,240 200,192" fill="none" stroke="#666" stroke-width="1.8" marker-end="url(#arrow-mal)"/>
|
|
|
|
<!-- Left → Top (Environment → Observe) -->
|
|
<path d="M200,110 Q210,68 270,60" fill="none" stroke="#666" stroke-width="1.8" marker-end="url(#arrow-mal)"/>
|
|
|
|
<!-- Cycle step labels on arrows -->
|
|
<text x="476" y="82" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#999" transform="rotate(28,476,82)">perceive</text>
|
|
<text x="486" y="225" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#999" transform="rotate(-28,486,225)">execute</text>
|
|
<text x="222" y="225" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#999" transform="rotate(28,222,225)">update</text>
|
|
<text x="222" y="82" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="#999" transform="rotate(-28,222,82)">feedback</text>
|
|
</svg> |
