116 lines
8.1 KiB
XML
116 lines
8.1 KiB
XML
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 450" font-family="system-ui, sans-serif" font-size="13">
|
||
|
|
<defs>
|
||
|
|
<filter id="shadow" x="-2%" y="-2%" width="104%" height="104%">
|
||
|
|
<feDropShadow dx="1" dy="2" stdDeviation="2" flood-opacity="0.3"/>
|
||
|
|
</filter>
|
||
|
|
<!-- Arrow markers -->
|
||
|
|
<marker id="arrow-blue" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
|
||
|
|
<path d="M 0 0 L 10 5 L 0 10 z" fill="#60a5fa"/>
|
||
|
|
</marker>
|
||
|
|
<marker id="arrow-green" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
|
||
|
|
<path d="M 0 0 L 10 5 L 0 10 z" fill="#4ade80"/>
|
||
|
|
</marker>
|
||
|
|
<marker id="arrow-red" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
|
||
|
|
<path d="M 0 0 L 10 5 L 0 10 z" fill="#f87171"/>
|
||
|
|
</marker>
|
||
|
|
<marker id="arrow-gray" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
|
||
|
|
<path d="M 0 0 L 10 5 L 0 10 z" fill="#94a3b8"/>
|
||
|
|
</marker>
|
||
|
|
</defs>
|
||
|
|
|
||
|
|
<!-- Background -->
|
||
|
|
<rect width="900" height="450" fill="#0f172a" rx="8"/>
|
||
|
|
|
||
|
|
<!-- Title -->
|
||
|
|
<text x="450" y="30" font-size="16" fill="#e2e8f0" text-anchor="middle" font-weight="bold">Pipeline Detail — 4-Stage Flow with Retry Logic</text>
|
||
|
|
|
||
|
|
<!-- PipelineState shared state box (dashed border, center) -->
|
||
|
|
<rect x="310" y="190" width="280" height="70" rx="6" fill="none" stroke="#fbbf24" stroke-width="2" stroke-dasharray="8,4" filter="url(#shadow)"/>
|
||
|
|
<rect x="310" y="190" width="280" height="70" rx="6" fill="#1e293b" opacity="0.9"/>
|
||
|
|
<text x="450" y="218" font-size="14" fill="#fbbf24" text-anchor="middle" font-weight="bold">PipelineState</text>
|
||
|
|
<text x="450" y="238" font-size="11" fill="#94a3b8" text-anchor="middle">Shared state across all stages</text>
|
||
|
|
<text x="450" y="252" font-size="10" fill="#64748b" text-anchor="middle">prompt / asset / quality / result</text>
|
||
|
|
|
||
|
|
<!-- START node -->
|
||
|
|
<rect x="20" y="90" width="80" height="44" rx="6" fill="#1a1a2e" stroke="#60a5fa" stroke-width="1.5" filter="url(#shadow)"/>
|
||
|
|
<text x="60" y="116" font-size="13" fill="#e2e8f0" text-anchor="middle" font-weight="bold">START</text>
|
||
|
|
|
||
|
|
<!-- Arrow: START → PromptOptimizer -->
|
||
|
|
<line x1="102" y1="112" x2="138" y2="112" stroke="#60a5fa" stroke-width="2" marker-end="url(#arrow-blue)"/>
|
||
|
|
|
||
|
|
<!-- PromptOptimizer -->
|
||
|
|
<rect x="140" y="72" width="150" height="80" rx="6" fill="#1a1a2e" stroke="#818cf8" stroke-width="1.5" filter="url(#shadow)"/>
|
||
|
|
<text x="215" y="95" font-size="13" fill="#e2e8f0" text-anchor="middle" font-weight="bold">PromptOptimizer</text>
|
||
|
|
<text x="215" y="112" font-size="10" fill="#94a3b8" text-anchor="middle">prompt_builder</text>
|
||
|
|
<text x="215" y="126" font-size="10" fill="#60a5fa" text-anchor="middle">string → Prompt</text>
|
||
|
|
<text x="215" y="142" font-size="10" fill="#fbbf24" text-anchor="middle">progress: 5-25%</text>
|
||
|
|
|
||
|
|
<!-- Arrow: PromptOptimizer → AssetGenerator -->
|
||
|
|
<line x1="292" y1="112" x2="328" y2="112" stroke="#60a5fa" stroke-width="2" marker-end="url(#arrow-blue)"/>
|
||
|
|
|
||
|
|
<!-- AssetGenerator -->
|
||
|
|
<rect x="330" y="72" width="150" height="80" rx="6" fill="#1a1a2e" stroke="#818cf8" stroke-width="1.5" filter="url(#shadow)"/>
|
||
|
|
<text x="405" y="95" font-size="13" fill="#e2e8f0" text-anchor="middle" font-weight="bold">AssetGenerator</text>
|
||
|
|
<text x="405" y="112" font-size="10" fill="#94a3b8" text-anchor="middle">asset_generator</text>
|
||
|
|
<text x="405" y="126" font-size="10" fill="#60a5fa" text-anchor="middle">Prompt → Image</text>
|
||
|
|
<text x="405" y="142" font-size="10" fill="#fbbf24" text-anchor="middle">progress: 25-60%</text>
|
||
|
|
|
||
|
|
<!-- Arrow: AssetGenerator → QualitySupervisor -->
|
||
|
|
<line x1="482" y1="112" x2="518" y2="112" stroke="#60a5fa" stroke-width="2" marker-end="url(#arrow-blue)"/>
|
||
|
|
|
||
|
|
<!-- QualitySupervisor (diamond shape) -->
|
||
|
|
<polygon points="590,60 660,112 590,164 520,112" fill="#1a1a2e" stroke="#fbbf24" stroke-width="1.5" filter="url(#shadow)"/>
|
||
|
|
<text x="590" y="108" font-size="12" fill="#e2e8f0" text-anchor="middle" font-weight="bold">Quality</text>
|
||
|
|
<text x="590" y="122" font-size="12" fill="#e2e8f0" text-anchor="middle" font-weight="bold">Supervisor</text>
|
||
|
|
|
||
|
|
<!-- QualitySupervisor detail label -->
|
||
|
|
<text x="590" y="180" font-size="10" fill="#94a3b8" text-anchor="middle">quality_supervisor</text>
|
||
|
|
<text x="590" y="194" font-size="10" fill="#60a5fa" text-anchor="middle">Image → QualityReport</text>
|
||
|
|
<text x="590" y="208" font-size="10" fill="#fbbf24" text-anchor="middle">progress: 60-80%</text>
|
||
|
|
|
||
|
|
<!-- PASS path: QualitySupervisor → FormatAdapter -->
|
||
|
|
<line x1="662" y1="100" x2="698" y2="80" stroke="#4ade80" stroke-width="2" marker-end="url(#arrow-green)"/>
|
||
|
|
<text x="680" y="82" font-size="11" fill="#4ade80" text-anchor="middle" font-weight="bold">PASS</text>
|
||
|
|
|
||
|
|
<!-- FormatAdapter -->
|
||
|
|
<rect x="700" y="55" width="160" height="55" rx="6" fill="#1a1a2e" stroke="#4ade80" stroke-width="1.5" filter="url(#shadow)"/>
|
||
|
|
<text x="780" y="78" font-size="13" fill="#e2e8f0" text-anchor="middle" font-weight="bold">FormatAdapter</text>
|
||
|
|
<text x="780" y="95" font-size="10" fill="#94a3b8" text-anchor="middle">format_adapter 80-100%</text>
|
||
|
|
|
||
|
|
<!-- Arrow: FormatAdapter → END -->
|
||
|
|
<line x1="862" y1="82" x2="880" y2="82" stroke="#4ade80" stroke-width="2" marker-end="url(#arrow-green)"/>
|
||
|
|
|
||
|
|
<!-- END node -->
|
||
|
|
<rect x="822" y="135" width="60" height="36" rx="6" fill="#1a1a2e" stroke="#4ade80" stroke-width="1.5" filter="url(#shadow)"/>
|
||
|
|
<text x="852" y="157" font-size="13" fill="#4ade80" text-anchor="middle" font-weight="bold">END</text>
|
||
|
|
<line x1="840" y1="112" x2="852" y2="135" stroke="#4ade80" stroke-width="1.5"/>
|
||
|
|
|
||
|
|
<!-- FAIL path: QualitySupervisor → back to PromptOptimizer (retry < 3) -->
|
||
|
|
<path d="M 590,166 L 590,310 L 215,310 L 215,154" fill="none" stroke="#f87171" stroke-width="2" stroke-dasharray="6,3" marker-end="url(#arrow-red)"/>
|
||
|
|
<rect x="330" y="295" width="120" height="24" rx="4" fill="#1e293b" stroke="#f87171" stroke-width="1"/>
|
||
|
|
<text x="390" y="312" font-size="11" fill="#f87171" text-anchor="middle" font-weight="bold">FAIL: retry < 3</text>
|
||
|
|
|
||
|
|
<!-- DEGRADED path: QualitySupervisor → FormatAdapter (retry >= 3) -->
|
||
|
|
<path d="M 660,164 L 700,164 L 700,112" fill="none" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="4,3" marker-end="url(#arrow-gray)"/>
|
||
|
|
<rect x="640" y="148" width="110" height="20" rx="4" fill="#1e293b"/>
|
||
|
|
<text x="695" y="162" font-size="10" fill="#94a3b8" text-anchor="middle">retry ≥ 3 (degraded)</text>
|
||
|
|
|
||
|
|
<!-- Legend -->
|
||
|
|
<rect x="20" y="370" width="860" height="60" rx="6" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
||
|
|
<text x="40" y="390" font-size="12" fill="#94a3b8" font-weight="bold">Legend:</text>
|
||
|
|
<line x1="100" y1="386" x2="140" y2="386" stroke="#60a5fa" stroke-width="2" marker-end="url(#arrow-blue)"/>
|
||
|
|
<text x="150" y="390" font-size="11" fill="#94a3b8">Normal flow</text>
|
||
|
|
<line x1="240" y1="386" x2="280" y2="386" stroke="#4ade80" stroke-width="2" marker-end="url(#arrow-green)"/>
|
||
|
|
<text x="290" y="390" font-size="11" fill="#94a3b8">Pass / Success</text>
|
||
|
|
<line x1="400" y1="386" x2="440" y2="386" stroke="#f87171" stroke-width="2" stroke-dasharray="6,3" marker-end="url(#arrow-red)"/>
|
||
|
|
<text x="450" y="390" font-size="11" fill="#94a3b8">Fail / Retry</text>
|
||
|
|
<line x1="540" y1="386" x2="580" y2="386" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="4,3" marker-end="url(#arrow-gray)"/>
|
||
|
|
<text x="590" y="390" font-size="11" fill="#94a3b8">Degraded fallback</text>
|
||
|
|
<rect x="710" y="378" width="60" height="18" rx="3" fill="none" stroke="#fbbf24" stroke-width="1.5" stroke-dasharray="6,3"/>
|
||
|
|
<text x="740" y="392" font-size="11" fill="#94a3b8" text-anchor="middle">Shared state</text>
|
||
|
|
|
||
|
|
<!-- PipelineState connections (dashed lines to each node) -->
|
||
|
|
<line x1="215" y1="152" x2="350" y2="190" stroke="#fbbf24" stroke-width="1" stroke-dasharray="3,3" opacity="0.5"/>
|
||
|
|
<line x1="405" y1="152" x2="450" y2="190" stroke="#fbbf24" stroke-width="1" stroke-dasharray="3,3" opacity="0.5"/>
|
||
|
|
<line x1="590" y1="164" x2="530" y2="190" stroke="#fbbf24" stroke-width="1" stroke-dasharray="3,3" opacity="0.5"/>
|
||
|
|
</svg>
|