chore: import upstream snapshot with attribution

2026-07-13 13:24:08 +08:00
commit 0d3cb498a3
5438 changed files with 1316560 additions and 0 deletions
@@ -0,0 +1,81 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
+  <!-- Background -->
+  <rect width="800" height="600" fill="#ffffff"/>
+  
+  <!-- Title -->
+  <text x="400" y="50" text-anchor="middle" font-family="Arial" font-size="24" font-weight="bold">Best-of-N Jailbreaking Cycle</text>
+
+  <!-- Center point for rotation calculations -->
+  <!-- cx=400, cy=325 -->
+  
+  <!-- Large circle background -->
+  <circle cx="400" cy="325" r="200" fill="none" stroke="#ddd" stroke-width="2" stroke-dasharray="5,5"/>
+
+  <!-- Original Request -->
+  <g transform="translate(400,125)">
+    <rect x="-90" y="-30" width="180" height="60" rx="5" fill="#e6f3ff" stroke="#2196f3" stroke-width="2"/>
+    <text x="0" y="5" text-anchor="middle" font-family="Arial" font-size="14">Original Request</text>
+  </g>
+
+  <!-- Apply Augmentations -->
+  <g transform="translate(650,225)">
+    <rect x="-90" y="-40" width="180" height="80" rx="5" fill="#fff3e6" stroke="#ff9800" stroke-width="2"/>
+    <text x="0" y="-20" text-anchor="middle" font-family="Arial" font-size="14">Apply Augmentations</text>
+    <text x="0" y="0" text-anchor="middle" font-family="Arial" font-size="12">• Random capitalization</text>
+    <text x="0" y="20" text-anchor="middle" font-family="Arial" font-size="12">• Character scrambling</text>
+    <text x="0" y="40" text-anchor="middle" font-family="Arial" font-size="12">• ASCII noise</text>
+  </g>
+
+  <!-- Language Model -->
+  <g transform="translate(650,425)">
+    <rect x="-90" y="-30" width="180" height="60" rx="5" fill="#e8f5e9" stroke="#4caf50" stroke-width="2"/>
+    <text x="0" y="5" text-anchor="middle" font-family="Arial" font-size="14">Language Model</text>
+  </g>
+
+  <!-- Response -->
+  <g transform="translate(400,525)">
+    <rect x="-90" y="-30" width="180" height="60" rx="5" fill="#fce4ec" stroke="#e91e63" stroke-width="2"/>
+    <text x="0" y="5" text-anchor="middle" font-family="Arial" font-size="14">Response</text>
+  </g>
+
+  <!-- Harm Classifier -->
+  <g transform="translate(150,425)">
+    <rect x="-90" y="-30" width="180" height="60" rx="5" fill="#f3e5f5" stroke="#9c27b0" stroke-width="2"/>
+    <text x="0" y="5" text-anchor="middle" font-family="Arial" font-size="14">Harm Classifier</text>
+  </g>
+
+  <!-- N Counter Box -->
+  <g transform="translate(150,225)">
+    <rect x="-90" y="-40" width="180" height="80" rx="5" fill="#f5f5f5" stroke="#666" stroke-width="2"/>
+    <text x="0" y="-15" text-anchor="middle" font-family="Arial" font-size="14">Sample Counter</text>
+    <text x="0" y="15" text-anchor="middle" font-family="Arial" font-size="14" font-weight="bold">N remaining</text>
+  </g>
+
+  <!-- Connecting Arrows -->
+  <!-- Define arrow marker -->
+  <defs>
+    <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#666"/>
+    </marker>
+  </defs>
+
+  <!-- Arrows connecting the components -->
+  <g stroke="#666" stroke-width="2" fill="none">
+    <!-- Original Request to Augmentations -->
+    <path d="M 490 125 Q 600 125 650 185" marker-end="url(#arrowhead)"/>
+    <!-- Augmentations to Model -->
+    <path d="M 650 265 L 650 395" marker-end="url(#arrowhead)"/>
+    <!-- Model to Response -->
+    <path d="M 560 425 Q 500 425 400 495" marker-end="url(#arrowhead)"/>
+    <!-- Response to Classifier -->
+    <path d="M 310 525 Q 200 525 150 455" marker-end="url(#arrowhead)"/>
+    <!-- Classifier to Counter -->
+    <path d="M 150 395 L 150 265" marker-end="url(#arrowhead)"/>
+    <!-- Counter back to Augmentations (if N>0) -->
+    <path d="M 240 225 Q 400 225 560 225" marker-end="url(#arrowhead)"/>
+  </g>
+
+  <!-- Success/Fail Labels -->
+  <text x="400" y="205" text-anchor="middle" font-family="Arial" font-size="12" fill="#666">If N > 0 and not harmful</text>
+  <text x="400" y="245" text-anchor="middle" font-family="Arial" font-size="12" fill="#666">Try next variation</text>
+</svg>
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="800" height="400" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
+    <!-- Style definitions -->
+    <defs>
+        <style>
+            .title { font-family: -apple-system, system-ui, sans-serif; font-size: 14px; font-weight: bold; }
+            .label { font-family: -apple-system, system-ui, sans-serif; font-size: 12px; }
+            .code { font-family: monospace; font-size: 11px; }
+            .arrow { stroke: #666; stroke-width: 2; fill: none; marker-end: url(#arrowhead); }
+            .box { fill: #fff; stroke: #666; stroke-width: 2; }
+            .highlight { fill: #e3f2fd; }
+            .pass { fill: #4caf50; }
+            .fail { fill: #f44336; }
+        </style>
+        <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+            <polygon points="0 0, 10 3.5, 0 7" fill="#666"/>
+        </marker>
+    </defs>
+
+    <!-- Background -->
+    <rect width="100%" height="100%" fill="#ffffff"/>
+
+    <!-- Dataset Box -->
+    <g transform="translate(50,50)">
+        <rect class="box highlight" width="200" height="180" rx="5"/>
+        <text class="title" x="10" y="30">CyberSecEval Dataset</text>
+        <text class="code" x="10" y="60">{</text>
+        <text class="code" x="20" y="85">"test_case_prompt": "...",</text>
+        <text class="code" x="20" y="110">"user_input": "...",</text>
+        <text class="code" x="20" y="135">"judge_question": "...",</text>
+        <text class="code" x="20" y="160">"speaking_language": "..."</text>
+        <text class="code" x="10" y="175">}</text>
+    </g>
+
+    <!-- Plugin Processing Box -->
+    <g transform="translate(300,30)">
+        <rect class="box" width="200" height="200" rx="5"/>
+        <text class="title" x="10" y="30">Plugin Processing</text>
+        <text class="label" x="10" y="70">1. Download test cases</text>
+        <text class="label" x="10" y="100">2. Format as messages</text>
+        <text class="label" x="10" y="130">3. Random selection</text>
+        <text class="label" x="10" y="160">4. Test model</text>
+        <text class="label" x="10" y="190">5. Evaluate response</text>
+    </g>
+
+    <!-- LLM Testing Box -->
+    <g transform="translate(550,50)">
+        <rect class="box highlight" width="200" height="200" rx="5"/>
+        <text class="title" x="10" y="30">LLM Testing</text>
+        <text class="code" x="10" y="60">[{</text>
+        <text class="code" x="20" y="85">"role": "system",</text>
+        <text class="code" x="20" y="110">"content": "..."</text>
+        <text class="code" x="10" y="135">}, {</text>
+        <text class="code" x="20" y="160">"role": "user",</text>
+        <text class="code" x="20" y="185">"content": "..."</text>
+        <text class="code" x="10" y="195">}]</text>
+    </g>
+
+    <!-- Results Box -->
+    <g transform="translate(300,280)">
+        <rect class="box" width="200" height="100" rx="5"/>
+        <text class="title" x="10" y="30">Evaluation Results</text>
+        <text class="pass" x="10" y="60">✓</text>
+        <text class="label" x="25" y="60">PASS: Secure response</text>
+        <text class="fail" x="10" y="85">✗</text>
+        <text class="label" x="25" y="85">FAIL: Vulnerable response</text>
+    </g>
+
+    <!-- Arrows -->
+    <path class="arrow" d="M250,140 H290"/>
+    <path class="arrow" d="M500,140 H540"/>
+    <path class="arrow" d="M400,230 V270"/>
+</svg> 
@@ -0,0 +1,92 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 750">
+  <style>
+    text {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      font-size: 14px;
+    }
+    .title {
+      font-size: 20px;
+      font-weight: bold;
+    }
+    .phase-title {
+      font-size: 16px;
+      font-weight: bold;
+    }
+    .small-text {
+      font-size: 12px;
+    }
+  </style>
+  
+  <!-- Title -->
+  <text x="500" y="40" text-anchor="middle" class="title" fill="#1e293b">GOAT Attack Implementation Flow</text>
+
+  <!-- Phase 1: Input Analysis -->
+  <rect x="300" y="80" width="400" height="100" fill="#f8fafc" stroke="#64748b" stroke-width="2" rx="5"/>
+  <text x="500" y="105" text-anchor="middle" class="phase-title" fill="#334155">Input Analysis</text>
+  <text x="340" y="135" fill="#475569">• Analyze previous model response</text>
+  <text x="340" y="155" fill="#475569">• Evaluate response patterns</text>
+  
+  <!-- Arrow with more space -->
+  <path d="M 500 180 L 500 260" stroke="#94a3b8" stroke-width="2" marker-end="url(#arrowhead)"/>
+
+  <!-- Phase 2: Strategy Selection - moved down -->
+  <rect x="50" y="260" width="900" height="320" fill="#f8fafc" stroke="#64748b" stroke-width="2" rx="5"/>
+  <text x="500" y="285" text-anchor="middle" class="phase-title" fill="#334155">Attack Strategy Selection</text>
+
+  <!-- Direct Methods Box - Blue theme -->
+  <rect x="80" y="310" width="200" height="100" fill="#eff6ff" stroke="#2563eb" rx="4"/>
+  <text x="180" y="330" text-anchor="middle" font-weight="bold" fill="#1d4ed8">Direct Methods</text>
+  <text x="100" y="355" class="small-text" fill="#1e40af">• Refusal Suppression</text>
+  <text x="100" y="375" class="small-text" fill="#1e40af">• Context Manipulation</text>
+  <text x="100" y="395" class="small-text" fill="#1e40af">• Response Priming</text>
+
+  <!-- Psychological Methods Box - Blue theme -->
+  <rect x="300" y="310" width="200" height="100" fill="#eff6ff" stroke="#2563eb" rx="4"/>
+  <text x="400" y="330" text-anchor="middle" font-weight="bold" fill="#1d4ed8">Psychological Methods</text>
+  <text x="320" y="355" class="small-text" fill="#1e40af">• Emotional Triggering</text>
+  <text x="320" y="375" class="small-text" fill="#1e40af">• Authority Impersonation</text>
+
+  <!-- Indirect Methods Box - Blue theme -->
+  <rect x="520" y="310" width="200" height="100" fill="#eff6ff" stroke="#2563eb" rx="4"/>
+  <text x="620" y="330" text-anchor="middle" font-weight="bold" fill="#1d4ed8">Indirect Methods</text>
+  <text x="540" y="355" class="small-text" fill="#1e40af">• Hypothetical Framing</text>
+  <text x="540" y="375" class="small-text" fill="#1e40af">• Topic Splitting</text>
+  <text x="540" y="395" class="small-text" fill="#1e40af">• Dual Response</text>
+
+  <!-- Advanced Methods Box - Blue theme -->
+  <rect x="740" y="310" width="200" height="100" fill="#eff6ff" stroke="#2563eb" rx="4"/>
+  <text x="840" y="330" text-anchor="middle" font-weight="bold" fill="#1d4ed8">Advanced Methods</text>
+  <text x="760" y="355" class="small-text" fill="#1e40af">• Persona Modification</text>
+  <text x="760" y="375" class="small-text" fill="#1e40af">• Opposite Intent</text>
+
+  <!-- Vertical connecting lines from strategy boxes -->
+  <path d="M 180 410 L 180 440" stroke="#94a3b8" stroke-width="1"/>
+  <path d="M 400 410 L 400 440" stroke="#94a3b8" stroke-width="1"/>
+  <path d="M 620 410 L 620 440" stroke="#94a3b8" stroke-width="1"/>
+  <path d="M 840 410 L 840 440" stroke="#94a3b8" stroke-width="1"/>
+  
+  <!-- Horizontal connecting line -->
+  <path d="M 180 440 L 840 440" stroke="#94a3b8" stroke-width="1"/>
+  
+  <!-- Vertical line to implementation box -->
+  <path d="M 500 440 L 500 470" stroke="#94a3b8" stroke-width="1"/>
+
+  <!-- Strategy Implementation Box -->
+  <rect x="200" y="470" width="600" height="60" fill="#f1f5f9" stroke="#64748b" rx="4"/>
+  <text x="500" y="505" text-anchor="middle" font-weight="bold" fill="#334155">Apply Jailbreak Strategy</text>
+
+  <!-- Arrow with adjusted space -->
+  <path d="M 500 530 L 500 650" stroke="#94a3b8" stroke-width="2" marker-end="url(#arrowhead)"/>
+
+  <!-- Phase 3: Output Generation - Red theme -->
+  <rect x="300" y="650" width="400" height="60" fill="#fee2e2" stroke="#dc2626" stroke-width="2" rx="5"/>
+  <text x="500" y="685" text-anchor="middle" class="phase-title" fill="#991b1b">Generated Attack Prompt</text>
+
+  <!-- Arrowhead definition -->
+  <defs>
+    <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#94a3b8"/>
+    </marker>
+  </defs>
+
+</svg>
@@ -0,0 +1,88 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 700">
+  <style>
+    text {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    }
+  </style>
+  <!-- Background -->
+  <rect width="1000" height="700" fill="#ffffff"/>
+  
+  <!-- Title -->
+  <text x="500" y="40" text-anchor="middle" font-size="20" font-weight="bold" fill="#2c3e50">GOAT Attack Techniques and Reasoning Process</text>
+
+  <!-- Attack Techniques Section - Using Blues -->
+  <rect x="50" y="80" width="400" height="400" fill="#f8fafc" stroke="#2c3e50" stroke-width="2" rx="10"/>
+  <text x="250" y="110" text-anchor="middle" font-weight="bold" fill="#2c3e50">Attack Techniques</text>
+
+  <!-- Attack Categories - All in Blue Theme -->
+  <rect x="70" y="130" width="360" height="100" fill="#eff6ff" stroke="#2563eb" rx="5"/>
+  <text x="250" y="150" text-anchor="middle" font-weight="bold" font-size="14" fill="#2563eb">Output Manipulation</text>
+  <text x="90" y="170" font-size="12" fill="#1e40af">• Refusal Suppression: Prevent common refusal phrases</text>
+  <text x="90" y="190" font-size="12" fill="#1e40af">• Response Priming: Force specific output patterns</text>
+  <text x="90" y="210" font-size="12" fill="#1e40af">• Topic Splitting: Mix safe and unsafe requests</text>
+
+  <rect x="70" y="240" width="360" height="100" fill="#eff6ff" stroke="#2563eb" rx="5"/>
+  <text x="250" y="260" text-anchor="middle" font-weight="bold" font-size="14" fill="#2563eb">Safe Response Distractors</text>
+  <text x="90" y="280" font-size="12" fill="#1e40af">• Dual Response: Request safe and unsafe outputs</text>
+  <text x="90" y="300" font-size="12" fill="#1e40af">• Opposite Intent: Flip response sentiment</text>
+  <text x="90" y="320" font-size="12" fill="#1e40af">• Topic Splitting: Embed harmful content in safe tasks</text>
+
+  <rect x="70" y="350" width="360" height="100" fill="#eff6ff" stroke="#2563eb" rx="5"/>
+  <text x="250" y="370" text-anchor="middle" font-weight="bold" font-size="14" fill="#2563eb">Fictional Scenarios</text>
+  <text x="90" y="390" font-size="12" fill="#1e40af">• Hypotheticals: Create fictional contexts</text>
+  <text x="90" y="410" font-size="12" fill="#1e40af">• Persona Modification: Role-play as different entities</text>
+  <text x="90" y="430" font-size="12" fill="#1e40af">• Character/Historical Figure Impersonation</text>
+
+  <!-- Reasoning Process Section - Using Purples -->
+  <rect x="550" y="80" width="400" height="400" fill="#f8fafc" stroke="#2c3e50" stroke-width="2" rx="10"/>
+  <text x="750" y="110" text-anchor="middle" font-weight="bold" fill="#2c3e50">Reasoning Process Per Turn</text>
+
+  <rect x="570" y="130" width="360" height="100" fill="#faf5ff" stroke="#7c3aed" rx="5"/>
+  <text x="750" y="150" text-anchor="middle" font-weight="bold" font-size="14" fill="#7c3aed">1. Observation</text>
+  <text x="590" y="170" font-size="12" fill="#5b21b6">• Analyze target model's previous response</text>
+  <text x="590" y="190" font-size="12" fill="#5b21b6">• Identify safety mechanisms triggered</text>
+  <text x="590" y="210" font-size="12" fill="#5b21b6">• Assess progress toward goal</text>
+
+  <rect x="570" y="240" width="360" height="100" fill="#faf5ff" stroke="#7c3aed" rx="5"/>
+  <text x="750" y="260" text-anchor="middle" font-weight="bold" font-size="14" fill="#7c3aed">2. Thought</text>
+  <text x="590" y="280" font-size="12" fill="#5b21b6">• Reflect on conversation direction</text>
+  <text x="590" y="300" font-size="12" fill="#5b21b6">• Consider alternative attack approaches</text>
+  <text x="590" y="320" font-size="12" fill="#5b21b6">• Plan next steps toward goal</text>
+
+  <rect x="570" y="350" width="360" height="100" fill="#faf5ff" stroke="#7c3aed" rx="5"/>
+  <text x="750" y="370" text-anchor="middle" font-weight="bold" font-size="14" fill="#7c3aed">3. Strategy</text>
+  <text x="590" y="390" font-size="12" fill="#5b21b6">• Select appropriate attack technique(s)</text>
+  <text x="590" y="410" font-size="12" fill="#5b21b6">• Formulate specific implementation</text>
+  <text x="590" y="430" font-size="12" fill="#5b21b6">• Generate adversarial prompt</text>
+
+  <!-- Conversation Flow Example -->
+  <rect x="50" y="500" width="900" height="180" fill="#f8fafc" stroke="#2c3e50" stroke-width="2" rx="10"/>
+  <text x="500" y="530" text-anchor="middle" font-weight="bold" fill="#2c3e50">Example Conversation Turn Flow</text>
+  
+  <!-- Flow Diagram - All in Black -->
+  <path d="M 100 580 L 900 580" stroke="#2c3e50" stroke-width="1"/>
+  <circle cx="200" cy="580" r="5" fill="#2c3e50"/>
+  <circle cx="400" cy="580" r="5" fill="#2c3e50"/>
+  <circle cx="600" cy="580" r="5" fill="#2c3e50"/>
+  <circle cx="800" cy="580" r="5" fill="#2c3e50"/>
+  
+  <!-- Flow Labels - All in Black -->
+  <text x="200" y="600" text-anchor="middle" font-size="12" fill="#2c3e50">Observe Response</text>
+  <text x="400" y="600" text-anchor="middle" font-size="12" fill="#2c3e50">Form Thought</text>
+  <text x="600" y="600" text-anchor="middle" font-size="12" fill="#2c3e50">Select Strategy</text>
+  <text x="800" y="600" text-anchor="middle" font-size="12" fill="#2c3e50">Generate Prompt</text>
+
+  <!-- Example Text - All in Black -->
+  <text x="200" y="630" text-anchor="middle" font-size="10" fill="#2c3e50">"Model showed resistance</text>
+  <text x="200" y="645" text-anchor="middle" font-size="10" fill="#2c3e50">to direct request"</text>
+  
+  <text x="400" y="630" text-anchor="middle" font-size="10" fill="#2c3e50">"Need to create more</text>
+  <text x="400" y="645" text-anchor="middle" font-size="10" fill="#2c3e50">indirect approach"</text>
+  
+  <text x="600" y="630" text-anchor="middle" font-size="10" fill="#2c3e50">"Apply Hypothetical +</text>
+  <text x="600" y="645" text-anchor="middle" font-size="10" fill="#2c3e50">Persona Modification"</text>
+  
+  <text x="800" y="630" text-anchor="middle" font-size="10" fill="#2c3e50">"Role-play scenario</text>
+  <text x="800" y="645" text-anchor="middle" font-size="10" fill="#2c3e50">with fictional context"</text>
+
+</svg>
@@ -0,0 +1,95 @@
+<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background -->
+  <rect width="1200" height="550" fill="#f8fafc"/>
+  
+  <!-- Title -->
+  <text x="600" y="40" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="32" font-weight="700" fill="#1e293b">Iterative Jailbreaks Strategy</text>
+  
+  <!-- Subtitle -->
+  <text x="600" y="70" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="18" fill="#64748b">Systematic refinement through attack-judge feedback loops</text>
+  
+  <!-- Main Components in Circular Arrangement with more spacing -->
+  
+  <!-- Attacker Box (left) -->
+  <g transform="translate(150, 200)">
+    <rect x="0" y="0" width="240" height="120" rx="12" fill="#dc2626" stroke="none"/>
+    <rect x="0" y="0" width="240" height="120" rx="12" fill="url(#attackerGradient)" stroke="none"/>
+    <text x="120" y="50" text-anchor="middle" font-family="system-ui" font-size="20" font-weight="600" fill="white">🎯 Attacker LLM</text>
+    <text x="120" y="75" text-anchor="middle" font-family="system-ui" font-size="14" fill="#fecaca">Generates refined prompts</text>
+    <text x="120" y="95" text-anchor="middle" font-family="system-ui" font-size="14" fill="#fecaca">based on feedback</text>
+  </g>
+  
+  <!-- Target Box (right) -->
+  <g transform="translate(810, 200)">
+    <rect x="0" y="0" width="240" height="120" rx="12" fill="#3b82f6" stroke="none"/>
+    <rect x="0" y="0" width="240" height="120" rx="12" fill="url(#targetGradient)" stroke="none"/>
+    <text x="120" y="50" text-anchor="middle" font-family="system-ui" font-size="20" font-weight="600" fill="white">🤖 Target System</text>
+    <text x="120" y="75" text-anchor="middle" font-family="system-ui" font-size="14" fill="#dbeafe">Responds to</text>
+    <text x="120" y="95" text-anchor="middle" font-family="system-ui" font-size="14" fill="#dbeafe">adversarial prompts</text>
+  </g>
+  
+  <!-- Judge Box (bottom) -->
+  <g transform="translate(480, 400)">
+    <rect x="0" y="0" width="240" height="120" rx="12" fill="#10b981" stroke="none"/>
+    <rect x="0" y="0" width="240" height="120" rx="12" fill="url(#judgeGradient)" stroke="none"/>
+    <text x="120" y="50" text-anchor="middle" font-family="system-ui" font-size="20" font-weight="600" fill="white">⚖️ Judge LLM</text>
+    <text x="120" y="75" text-anchor="middle" font-family="system-ui" font-size="14" fill="#d1fae5">Scores responses</text>
+    <text x="120" y="95" text-anchor="middle" font-family="system-ui" font-size="14" fill="#d1fae5">(1-10 scale)</text>
+  </g>
+  
+  <!-- Flow Arrows -->
+  <!-- Attacker to Target -->
+  <g>
+    <defs>
+      <marker id="arrowhead1" markerWidth="12" markerHeight="12" refX="10" refY="6" orient="auto" fill="#dc2626">
+        <path d="M 0 0 L 12 6 L 0 12 z"/>
+      </marker>
+    </defs>
+    <path d="M 390 240 Q 600 180 800 240" stroke="#dc2626" stroke-width="3" fill="none" marker-end="url(#arrowhead1)"/>
+    <text x="600" y="165" text-anchor="middle" font-family="system-ui" font-size="14" fill="#64748b">Adversarial</text>
+    <text x="600" y="185" text-anchor="middle" font-family="system-ui" font-size="14" fill="#64748b">Prompt</text>
+  </g>
+  
+  <!-- Target to Judge -->
+  <g>
+    <defs>
+      <marker id="arrowhead2" markerWidth="12" markerHeight="12" refX="10" refY="6" orient="auto" fill="#3b82f6">
+        <path d="M 0 0 L 12 6 L 0 12 z"/>
+      </marker>
+    </defs>
+    <path d="M 870 320 Q 800 380 710 395" stroke="#3b82f6" stroke-width="3" fill="none" marker-end="url(#arrowhead2)"/>
+    <text x="850" y="370" text-anchor="middle" font-family="system-ui" font-size="14" fill="#64748b">Target</text>
+    <text x="850" y="390" text-anchor="middle" font-family="system-ui" font-size="14" fill="#64748b">Response</text>
+  </g>
+  
+  <!-- Judge back to Attacker (feedback loop) -->
+  <g>
+    <defs>
+      <marker id="arrowhead3" markerWidth="12" markerHeight="12" refX="10" refY="6" orient="auto" fill="#10b981">
+        <path d="M 0 0 L 12 6 L 0 12 z"/>
+      </marker>
+    </defs>
+    <path d="M 490 395 Q 400 380 330 320" stroke="#10b981" stroke-width="3" fill="none" marker-end="url(#arrowhead3)"/>
+    <text x="350" y="370" text-anchor="middle" font-family="system-ui" font-size="14" font-weight="500" fill="#10b981">Score +</text>
+    <text x="350" y="390" text-anchor="middle" font-family="system-ui" font-size="14" font-weight="500" fill="#10b981">Feedback</text>
+  </g>
+  
+  
+  <!-- Gradients -->
+  <defs>
+    <linearGradient id="attackerGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#ef4444;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#dc2626;stop-opacity:1" />
+    </linearGradient>
+    
+    <linearGradient id="targetGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#60a5fa;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#3b82f6;stop-opacity:1" />
+    </linearGradient>
+    
+    <linearGradient id="judgeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#34d399;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#10b981;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+</svg>
@@ -0,0 +1,180 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500">
+  <defs>
+    <!-- Gradients -->
+    <linearGradient id="blackBoxGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#2563eb;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#1e40af;stop-opacity:1" />
+    </linearGradient>
+    
+    <linearGradient id="componentGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#7c3aed;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#6d28d9;stop-opacity:1" />
+    </linearGradient>
+    
+    <linearGradient id="traceGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#dc2626;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#b91c1c;stop-opacity:1" />
+    </linearGradient>
+
+    <!-- Drop shadow filter -->
+    <filter id="dropShadow" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
+      <feOffset dx="0" dy="2" result="offsetblur"/>
+      <feComponentTransfer>
+        <feFuncA type="linear" slope="0.2"/>
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <!-- Icons -->
+    <g id="userIcon">
+      <circle cx="12" cy="8" r="4" fill="white"/>
+      <path d="M12 14c-5 0-9 2-9 6v2h18v-2c0-4-4-6-9-6z" fill="white"/>
+    </g>
+
+    <g id="codeIcon">
+      <path d="M8 4l-4 4 4 4M16 4l4 4-4 4M14 2l-4 16" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+
+    <g id="traceIcon">
+      <path d="M2 12h4l2-4 4 8 2-4h4" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+  </defs>
+
+  <!-- Title -->
+  <text x="400" y="40" font-family="system-ui, -apple-system, sans-serif" font-size="28" font-weight="600" text-anchor="middle" fill="#1f2937">
+    Layered Testing for LLM Agents
+  </text>
+
+  <!-- Black-Box Testing Layer -->
+  <g transform="translate(50, 80)">
+    <rect x="0" y="0" width="700" height="100" rx="12" fill="url(#blackBoxGradient)" filter="url(#dropShadow)"/>
+    
+    <!-- Icon -->
+    <g transform="translate(20, 35) scale(1.5)">
+      <use href="#userIcon"/>
+    </g>
+    
+    <!-- Title -->
+    <text x="70" y="35" font-family="system-ui, -apple-system, sans-serif" font-size="20" font-weight="600" fill="white">
+      Black-Box Testing (End-to-End)
+    </text>
+    
+    <!-- Description -->
+    <text x="70" y="60" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="white" opacity="0.9">
+      Test the complete agent system as users would interact with it
+    </text>
+    
+    <!-- Car analogy -->
+    <text x="70" y="80" font-family="system-ui, -apple-system, sans-serif" font-size="12" fill="white" opacity="0.7" font-style="italic">
+      Like a test drive: Does it get you from A to B safely?
+    </text>
+    
+    <!-- Best for -->
+    <text x="500" y="50" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="white" opacity="0.9">
+      Best for:
+    </text>
+    <text x="500" y="68" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="white" opacity="0.8">
+      • Quick tests
+    </text>
+    <text x="500" y="84" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="white" opacity="0.8">
+      • Compliance testing
+    </text>
+  </g>
+
+  <!-- Component Testing Layer -->
+  <g transform="translate(50, 210)">
+    <rect x="0" y="0" width="700" height="100" rx="12" fill="url(#componentGradient)" filter="url(#dropShadow)"/>
+    
+    <!-- Icon -->
+    <g transform="translate(20, 35) scale(1.5)">
+      <use href="#codeIcon"/>
+    </g>
+    
+    <!-- Title -->
+    <text x="70" y="35" font-family="system-ui, -apple-system, sans-serif" font-size="20" font-weight="600" fill="white">
+      Component Testing (Direct Hooks)
+    </text>
+    
+    <!-- Description -->
+    <text x="70" y="60" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="white" opacity="0.9">
+      Test individual agent components in isolation
+    </text>
+    
+    <!-- Car analogy -->
+    <text x="70" y="80" font-family="system-ui, -apple-system, sans-serif" font-size="12" fill="white" opacity="0.7" font-style="italic">
+      Like checking engine, brakes, and steering individually
+    </text>
+    
+    <!-- Best for -->
+    <text x="500" y="50" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="white" opacity="0.9">
+      Best for:
+    </text>
+    <text x="500" y="68" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="white" opacity="0.8">
+      • Finding specific vulnerabilities
+    </text>
+    <text x="500" y="84" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="white" opacity="0.8">
+      • Faster iteration
+    </text>
+  </g>
+
+  <!-- Trace-Based Testing Layer -->
+  <g transform="translate(50, 340)">
+    <rect x="0" y="0" width="700" height="100" rx="12" fill="url(#traceGradient)" filter="url(#dropShadow)"/>
+    
+    <!-- Icon -->
+    <g transform="translate(20, 35) scale(1.5)">
+      <use href="#traceIcon"/>
+    </g>
+    
+    <!-- Title -->
+    <text x="70" y="35" font-family="system-ui, -apple-system, sans-serif" font-size="20" font-weight="600" fill="white">
+      Trace-Based Testing (Glass Box)
+    </text>
+    
+    <!-- Description -->
+    <text x="70" y="60" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="white" opacity="0.9">
+      Use OpenTelemetry tracing to observe internal agent behavior
+    </text>
+    
+    <!-- Car analogy -->
+    <text x="70" y="80" font-family="system-ui, -apple-system, sans-serif" font-size="12" fill="white" opacity="0.7" font-style="italic">
+      Like hooking up a diagnostic computer during the drive
+    </text>
+    
+    <!-- Best for -->
+    <text x="500" y="50" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="white" opacity="0.9">
+      Best for:
+    </text>
+    <text x="500" y="68" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="white" opacity="0.8">
+      • Debugging vulnerabilities
+    </text>
+    <text x="500" y="84" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="white" opacity="0.8">
+      • Complex failure debugging
+    </text>
+  </g>
+
+  <!-- Connecting arrows showing the layers work together -->
+  <g opacity="0.4">
+    <!-- Arrow from Black-Box to Component -->
+    <path d="M 400 180 L 400 210" stroke="#6b7280" stroke-width="2" fill="none" marker-end="url(#arrowhead)"/>
+    
+    <!-- Arrow from Component to Trace -->
+    <path d="M 400 310 L 400 340" stroke="#6b7280" stroke-width="2" fill="none" marker-end="url(#arrowhead)"/>
+  </g>
+
+  <!-- Arrow marker definition -->
+  <defs>
+    <marker id="arrowhead" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto">
+      <polygon points="0 0, 10 5, 0 10" fill="#6b7280"/>
+    </marker>
+  </defs>
+
+  <!-- Bottom note -->
+  <text x="400" y="475" font-family="system-ui, -apple-system, sans-serif" font-size="12" text-anchor="middle" fill="#6b7280">
+    Multi-layered approach ensures comprehensive agent security testing
+  </text>
+</svg>
--- a/Show More
+++ b/Show More