slide/decks/gen2D/public/async-task.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400" 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>
    <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-yellow" 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="#fbbf24"/>
    </marker>
    <marker id="arrow-purple" 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="#c084fc"/>
    </marker>
  </defs>

  <!-- Background -->
  <rect width="800" height="400" fill="#0f172a" rx="8"/>

  <!-- Title -->
  <text x="400" y="30" font-size="16" fill="#e2e8f0" text-anchor="middle" font-weight="bold">Async Task Lifecycle</text>

  <!-- POST /generate (client request) -->
  <rect x="20" y="75" width="120" height="50" rx="6" fill="#1a1a2e" stroke="#60a5fa" stroke-width="1.5" filter="url(#shadow)"/>
  <text x="80" y="97" font-size="12" fill="#e2e8f0" text-anchor="middle" font-weight="bold">POST</text>
  <text x="80" y="113" font-size="11" fill="#60a5fa" text-anchor="middle">/generate</text>

  <!-- Arrow: POST → Create Task -->
  <line x1="142" y1="100" x2="178" y2="100" stroke="#60a5fa" stroke-width="2" marker-end="url(#arrow-blue)"/>

  <!-- Create Task -->
  <rect x="180" y="70" width="140" height="60" rx="6" fill="#1a1a2e" stroke="#818cf8" stroke-width="1.5" filter="url(#shadow)"/>
  <text x="250" y="95" font-size="13" fill="#e2e8f0" text-anchor="middle" font-weight="bold">Create Task</text>
  <text x="250" y="112" font-size="10" fill="#fbbf24" text-anchor="middle">status = running</text>
  <text x="250" y="124" font-size="10" fill="#94a3b8" text-anchor="middle">→ DB insert</text>

  <!-- Arrow: Create Task → Return taskId (immediate response) -->
  <path d="M 250,130 L 250,155 L 110,155 L 110,127" fill="none" stroke="#4ade80" stroke-width="2" marker-end="url(#arrow-green)"/>
  <rect x="130" y="142" width="150" height="22" rx="4" fill="#1e293b"/>
  <text x="205" y="158" font-size="10" fill="#4ade80" text-anchor="middle">return taskId immediately</text>

  <!-- Background goroutine label -->
  <rect x="350" y="50" width="430" height="310" rx="6" fill="none" stroke="#334155" stroke-width="1" stroke-dasharray="6,3"/>
  <text x="565" y="70" font-size="12" fill="#64748b" text-anchor="middle" font-style="italic">Background: goroutine</text>

  <!-- Arrow: Create Task → TaskQueue -->
  <line x1="322" y1="100" x2="378" y2="100" stroke="#60a5fa" stroke-width="2" marker-end="url(#arrow-blue)"/>

  <!-- TaskQueue (FIFO) -->
  <rect x="380" y="70" width="130" height="60" rx="6" fill="#1a1a2e" stroke="#c084fc" stroke-width="1.5" filter="url(#shadow)"/>
  <text x="445" y="92" font-size="13" fill="#e2e8f0" text-anchor="middle" font-weight="bold">TaskQueue</text>
  <text x="445" y="108" font-size="11" fill="#c084fc" text-anchor="middle">FIFO</text>
  <text x="445" y="122" font-size="10" fill="#94a3b8" text-anchor="middle">chan GenerateJob</text>

  <!-- FIFO items visualization -->
  <rect x="390" y="135" width="22" height="16" rx="3" fill="#c084fc" opacity="0.7"/>
  <rect x="416" y="135" width="22" height="16" rx="3" fill="#c084fc" opacity="0.5"/>
  <rect x="442" y="135" width="22" height="16" rx="3" fill="#c084fc" opacity="0.3"/>
  <text x="482" y="148" font-size="9" fill="#94a3b8">jobs...</text>

  <!-- Arrow: TaskQueue → Pipeline Execution -->
  <line x1="512" y1="100" x2="548" y2="100" stroke="#60a5fa" stroke-width="2" marker-end="url(#arrow-blue)"/>

  <!-- Pipeline Execution -->
  <rect x="550" y="70" width="170" height="60" rx="6" fill="#1a1a2e" stroke="#818cf8" stroke-width="1.5" filter="url(#shadow)"/>
  <text x="635" y="92" font-size="13" fill="#e2e8f0" text-anchor="middle" font-weight="bold">Pipeline Execution</text>
  <text x="635" y="108" font-size="10" fill="#94a3b8" text-anchor="middle">4-stage Eino pipeline</text>
  <text x="635" y="122" font-size="10" fill="#64748b" text-anchor="middle">prompt → asset → quality → format</text>

  <!-- Progress bar visualization -->
  <rect x="380" y="175" width="370" height="30" rx="6" fill="#1e293b" stroke="#334155" stroke-width="1"/>
  <!-- Progress segments -->
  <rect x="382" y="177" width="36" height="26" rx="4" fill="#818cf8" opacity="0.8"/>
  <text x="400" y="195" font-size="9" fill="#fff" text-anchor="middle">5%</text>
  <rect x="420" y="177" width="92" height="26" rx="4" fill="#60a5fa" opacity="0.8"/>
  <text x="466" y="195" font-size="9" fill="#fff" text-anchor="middle">25%</text>
  <rect x="514" y="177" width="100" height="26" rx="4" fill="#fbbf24" opacity="0.8"/>
  <text x="564" y="195" font-size="9" fill="#fff" text-anchor="middle">60%</text>
  <rect x="616" y="177" width="64" height="26" rx="4" fill="#4ade80" opacity="0.8"/>
  <text x="648" y="195" font-size="9" fill="#fff" text-anchor="middle">80%</text>
  <rect x="682" y="177" width="66" height="26" rx="4" fill="#34d399" opacity="0.9"/>
  <text x="715" y="195" font-size="9" fill="#fff" text-anchor="middle">100%</text>

  <!-- Arrow: Pipeline → Update Progress -->
  <line x1="635" y1="132" x2="635" y2="173" stroke="#fbbf24" stroke-width="1.5" marker-end="url(#arrow-yellow)"/>

  <!-- WebSocket push label -->
  <rect x="530" y="215" width="210" height="35" rx="6" fill="#1a1a2e" stroke="#c084fc" stroke-width="1.5" filter="url(#shadow)"/>
  <text x="635" y="230" font-size="12" fill="#c084fc" text-anchor="middle" font-weight="bold">WebSocket Push</text>
  <text x="635" y="244" font-size="10" fill="#94a3b8" text-anchor="middle">real-time progress updates</text>

  <!-- Arrow: progress bar → WebSocket -->
  <line x1="635" y1="205" x2="635" y2="213" stroke="#c084fc" stroke-width="1.5" marker-end="url(#arrow-purple)"/>

  <!-- Client receiving WebSocket -->
  <rect x="20" y="215" width="120" height="35" rx="6" fill="#1a1a2e" stroke="#c084fc" stroke-width="1.5" stroke-dasharray="4,3" filter="url(#shadow)"/>
  <text x="80" y="230" font-size="11" fill="#c084fc" text-anchor="middle" font-weight="bold">Client</text>
  <text x="80" y="244" font-size="9" fill="#94a3b8" text-anchor="middle">ws:// .../progress</text>

  <!-- Arrow: WebSocket → Client (across diagram) -->
  <path d="M 530,232 L 200,232 L 142,232" fill="none" stroke="#c084fc" stroke-width="1.5" stroke-dasharray="6,3" marker-end="url(#arrow-purple)"/>

  <!-- Completion path -->
  <!-- Arrow: Pipeline → Completion -->
  <line x1="720" y1="132" x2="720" y2="270" stroke="#4ade80" stroke-width="2" marker-end="url(#arrow-green)"/>

  <!-- Save Assets -->
  <rect x="550" y="270" width="140" height="50" rx="6" fill="#1a1a2e" stroke="#4ade80" stroke-width="1.5" filter="url(#shadow)"/>
  <text x="620" y="292" font-size="12" fill="#4ade80" text-anchor="middle" font-weight="bold">Save Assets</text>
  <text x="620" y="308" font-size="10" fill="#94a3b8" text-anchor="middle">→ disk / object store</text>

  <!-- Arrow: Save Assets → Update DB -->
  <line x1="620" y1="322" x2="620" y2="348" stroke="#4ade80" stroke-width="2" marker-end="url(#arrow-green)"/>

  <!-- Update DB -->
  <rect x="550" y="350" width="140" height="35" rx="6" fill="#1a1a2e" stroke="#4ade80" stroke-width="1.5" filter="url(#shadow)"/>
  <text x="620" y="372" font-size="12" fill="#4ade80" text-anchor="middle" font-weight="bold">Update DB (done)</text>

  <!-- Arrow: Update DB → status=done (notification to client) -->
  <path d="M 550,367 L 200,367 L 200,252" fill="none" stroke="#4ade80" stroke-width="1.5" stroke-dasharray="6,3" marker-end="url(#arrow-green)"/>
  <text x="370" y="360" font-size="10" fill="#4ade80" text-anchor="middle">status = done + assets</text>

  <!-- Legend -->
  <rect x="20" y="370" width="500" height="24" rx="6" fill="#1e293b" stroke="#334155" stroke-width="1" opacity="0"/>
  <line x1="20" y1="390" x2="50" y2="390" stroke="#60a5fa" stroke-width="2" marker-end="url(#arrow-blue)"/>
  <text x="60" y="394" font-size="10" fill="#94a3b8">Sync flow</text>
  <line x1="130" y1="390" x2="160" y2="390" stroke="#c084fc" stroke-width="1.5" stroke-dasharray="4,3" marker-end="url(#arrow-purple)"/>
  <text x="170" y="394" font-size="10" fill="#94a3b8">WebSocket push</text>
  <line x1="280" y1="390" x2="310" y2="390" stroke="#4ade80" stroke-width="1.5" stroke-dasharray="6,3" marker-end="url(#arrow-green)"/>
  <text x="320" y="394" font-size="10" fill="#94a3b8">Completion notify</text>
  <line x1="440" y1="390" x2="470" y2="390" stroke="#fbbf24" stroke-width="1.5" marker-end="url(#arrow-yellow)"/>
  <text x="480" y="394" font-size="10" fill="#94a3b8">Progress update</text>
</svg>