howard
/
Agent


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930
							<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AIGC 自动化工作流与知识库闭环架构</title>
    <link
        href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Noto+Sans+SC:wght@300;400;500;700&display=swap"
        rel="stylesheet">
    <style>
        :root {
            --bg: #09090b;
            --card-bg: rgba(255, 255, 255, 0.03);
            --card-border: rgba(255, 255, 255, 0.1);
            --text-primary: #f4f4f5;
            --text-secondary: #a1a1aa;

            --accent-cyan: #06b6d4;
            --accent-purple: #8b5cf6;
            --accent-pink: #ec4899;
            --accent-green: #10b981;
            --accent-amber: #f59e0b;
            --accent-red: #ef4444;
            --accent-blue: #3b82f6;

            --glow: 0 0 20px rgba(6, 182, 212, 0.3);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Outfit', 'Noto Sans SC', sans-serif;
            background-color: var(--bg);
            color: var(--text-primary);
            min-height: 100vh;
            overflow-x: hidden;
            background-image:
                radial-gradient(circle at 15% 50%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 85% 30%, rgba(6, 182, 212, 0.08) 0%, transparent 50%);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .header {
            text-align: center;
            margin-bottom: 60px;
            animation: fadeInDown 1s ease-out;
        }

        .header h1 {
            font-size: 2.5rem;
            font-weight: 800;
            background: linear-gradient(135deg, #fff, #a1a1aa);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 10px;
            letter-spacing: 1px;
        }

        .header p {
            color: var(--text-secondary);
            font-size: 1.1rem;
            max-width: 600px;
            margin: 0 auto;
        }

        /* Flowchart Flow */
        .flow-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            width: 100%;
        }

        /* Connecting vertical line */
        .flow-container::before {
            content: '';
            position: absolute;
            top: 20px;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            background: linear-gradient(to bottom, var(--card-border) 40%, var(--card-border) 60%, transparent 100%);
            background-size: 100% 20px;
            z-index: 0;
            box-shadow: var(--glow);
        }

        .layer {
            position: relative;
            width: 100%;
            display: flex;
            justify-content: center;
            margin-bottom: 60px;
            /* reduced from 80px to fit more steps */
            z-index: 1;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 0.8s forwards;
        }

        .layer:nth-child(2) {
            animation-delay: 0.15s;
        }

        .layer:nth-child(3) {
            animation-delay: 0.3s;
        }

        .layer:nth-child(4) {
            animation-delay: 0.45s;
        }

        .layer:nth-child(5) {
            animation-delay: 0.6s;
        }

        .layer:nth-child(6) {
            animation-delay: 0.75s;
        }

        .node {
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 16px;
            padding: 24px 32px;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            text-align: center;
            position: relative;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            min-width: 320px;
            max-width: 480px;
        }

        .node:hover {
            transform: translateY(-5px) scale(1.02);
            background: rgba(255, 255, 255, 0.05);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }

        /* Accent glows for different node types */
        .node.node-req {
            border-top: 3px solid var(--accent-cyan);
        }

        .node.node-search {
            border-top: 3px solid var(--accent-blue);
        }

        .node.node-process {
            border-top: 3px solid var(--accent-purple);
        }

        .node.node-pipeline {
            border-top: 3px solid var(--accent-pink);
        }

        .node.node-eval {
            border-top: 3px solid var(--accent-amber);
        }

        .node:hover.node-req {
            box-shadow: 0 0 20px rgba(6, 182, 212, 0.2);
        }

        .node:hover.node-search {
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
        }

        .node:hover.node-process {
            box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
        }

        .node:hover.node-pipeline {
            box-shadow: 0 0 20px rgba(236, 72, 153, 0.2);
        }

        .node:hover.node-eval {
            box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
        }

        .node-title {
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .node-desc {
            font-size: 0.9rem;
            color: var(--text-secondary);
            line-height: 1.6;
        }

        /* Side Branches / Split Layouts */
        .split-col {
            display: flex;
            gap: 40px;
            align-items: stretch;
            justify-content: center;
            width: 100%;
        }

        .sub-node-box {
            background: rgba(0, 0, 0, 0.2);
            border: 1px dashed var(--card-border);
            border-radius: 12px;
            padding: 16px;
            margin-top: 20px;
            text-align: left;
        }

        .sub-list {
            list-style: none;
            margin-top: 10px;
        }

        .sub-list li {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .icon-emoji {
            font-size: 1.2rem;
            filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.2));
        }

        /* Abstract structural capabilities styling */
        .ability-circles {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin: 15px 0;
        }

        .ability-circle {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 2px solid var(--accent-purple);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            color: #fff;
            background: rgba(139, 92, 246, 0.1);
        }

        .ability-circle.solid {
            background: var(--accent-purple);
            border-style: solid;
            box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
        }

        .ability-circle.outline {
            background: transparent;
            border-style: dashed;
            border-color: var(--accent-cyan);
            color: var(--accent-cyan);
        }

        .ability-circle.half {
            background: linear-gradient(135deg, var(--accent-purple) 50%, transparent 50%);
        }

        .case-square {
            width: 28px;
            height: 28px;
            border-radius: 4px;
            border: 1px solid var(--accent-purple);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            color: #fff;
            background: rgba(139, 92, 246, 0.2);
            transition: all 0.2s;
        }

        .case-square:hover {
            transform: translateY(-2px);
            background: rgba(139, 92, 246, 0.4);
        }

        .process-pipeline {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            gap: 12px;
            margin-top: 25px;
            padding: 15px;
            background: rgba(0, 0, 0, 0.2);
            border: 1px dashed var(--card-border);
            border-radius: 12px;
            position: relative;
        }

        .pipeline-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
        }

        .pipeline-arrow {
            margin-top: 8px;
            /* align with abilities */
            color: var(--accent-purple);
            font-weight: bold;
        }

        .case-cluster {
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
            justify-content: center;
            width: 60px;
        }

        .v-line {
            width: 1px;
            height: 15px;
            background-color: var(--card-border);
            position: relative;
        }

        .v-line.extract {
            background-color: var(--accent-cyan);
            border-left: 1px dashed var(--accent-cyan);
            width: 0;
        }

        .v-line-label {
            font-size: 0.65rem;
            color: var(--text-secondary);
            margin-bottom: -4px;
        }

        .v-line-label.extract {
            color: var(--accent-cyan);
        }

        .pipeline-grid {
            display: grid;
            grid-template-columns: auto 20px 40px 30px 1fr;
            align-items: center;
            row-gap: 5px;
            margin-top: 15px;
            text-align: left;
        }

        .pipeline-grid .cases {
            justify-self: end;
            display: flex;
            gap: 4px;
        }

        .pipeline-grid .dash {
            justify-self: center;
            color: var(--text-secondary);
            font-size: 0.8rem;
        }

        .pipeline-grid .ability {
            justify-self: center;
        }

        .pipeline-grid .impl {
            justify-self: center;
            padding: 8px 16px;
            border-radius: 8px;
            font-size: 0.85rem;
            background: rgba(236, 72, 153, 0.15);
            border: 1px solid var(--accent-pink);
            color: #fff;
            min-width: 180px;
            text-align: center;
        }

        .pipeline-grid .impl.dashed {
            background: rgba(236, 72, 153, 0.05);
            border: 1px dashed var(--accent-pink);
            color: var(--text-secondary);
        }

        .pipeline-grid .v-link {
            justify-self: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 25px;
            color: var(--text-secondary);
            font-size: 10px;
        }

        .pipeline-grid .v-link::before {
            content: '';
            width: 2px;
            flex: 1;
            background: var(--text-secondary);
            margin-bottom: 2px;
        }

        .pipeline-grid .v-link.impl-side {
            align-items: center;
            justify-self: center;
            margin-left: 0;
        }

        /* specific connecting arrows */
        .connector-label {
            position: absolute;
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--accent-cyan);
            background: var(--bg);
            padding: 4px 12px;
            border-radius: 6px;
            border: 1px solid var(--accent-cyan);
            box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
            white-space: nowrap;
            z-index: 2;
        }

        /* Specific placements for the eval loop */
        .eval-success {
            color: var(--accent-green) !important;
            border-color: var(--accent-green) !important;
        }

        .eval-fail {
            color: var(--accent-red) !important;
            border-color: var(--accent-red) !important;
        }

        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Pulse for the execution block */
        .pulse {
            animation: pulse-border 2s infinite;
        }

        @keyframes pulse-border {
            0% {
                box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.4);
            }

            70% {
                box-shadow: 0 0 0 15px rgba(6, 182, 212, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(6, 182, 212, 0);
            }
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="header">
            <h1>系统架构图流转拓扑</h1>
            <p>AIGC 自动化任务拆解与知识库演进全景图</p>
        </div>

        <div class="flow-container">

            <!-- Step 1: Requirements Extraction & DB Match -->
            <div class="layer">
                <div style="display: flex; justify-content: center; width: 100%; gap: 60px; position: relative;">
                    
                    <div class="node node-req" style="flex: 1; max-width: 400px;">
                        <div class="node-title">
                            <span class="icon-emoji">📥</span> 提取需求 (Requirements)
                        </div>
                        <div class="node-desc" style="line-height: 1.6;">
                            从原始的帖子、还原任务或用户指令中剖析意图。<br>
                            <span style="color:var(--text-secondary); font-size: 0.85rem;">(明确用户的核心诉求与待解任务)</span>
                        </div>
                    </div>

                    <div class="node node-eval" style="flex: 1; max-width: 350px; border-top-color: var(--accent-green); display: flex; flex-direction: column; justify-content: center; position: relative;">
                        <!-- Connector arrow pointing left and right -->
                        <div class="connector-label" style="left: -30px; top: 50%; transform: translate(-50%, -50%); z-index: 10;">⟷ 对齐 / 拦截</div>
                        
                        <div class="node-title">
                            <span class="icon-emoji">📂</span> 已有需求库 (Req DB)
                        </div>
                        <div class="node-desc">匹配 db_requirements.json 树状分布</div>
                        <div style="margin-top: 12px; font-size: 0.8rem; background: rgba(16, 185, 129, 0.1); padding: 8px; border-radius: 6px; border: 1px dashed rgba(16, 185, 129, 0.5);">
                            <span style="color: var(--accent-green); font-weight: bold; display: flex; align-items: center; gap: 6px;">
                                <span style="font-size: 1.1rem;">⚡</span>
                                <span>若已实现: 跳出循环，直接复用底层 Pipeline</span>
                            </span>
                        </div>
                    </div>

                </div>
            </div>

            <!-- Step 2: Research and Case Collection -->
            <div class="layer">
                <div class="node node-search" style="margin-top: 20px;">
                    <div class="connector-label" style="top: -34px; left: 50%; transform: translateX(-50%);">根据新需求/未满足需求 ⬇</div>
                    <div class="node-title">
                        <span class="icon-emoji">🔍</span> 调研核心 Case
                    </div>
                    <div class="node-desc">
                        面向全网或本地库，定向并发检索大量真实场景参考。<br>
                        获取高度相关的图文案例资料 (<b style="color:var(--accent-blue)">拿到 Case</b>)。
                    </div>
                    
                    <div style="font-size: 0.75rem; color: var(--text-secondary); width: 100%; text-align: center; margin-top: 15px; margin-bottom: 5px;">
                        <span style="color: var(--accent-blue); font-weight: bold;">■ 网络搜索</span> (外网新知) &nbsp;&nbsp;|&nbsp;&nbsp; 
                        <span style="color: var(--accent-purple); font-weight: bold;">■ 库内召回</span> (自有知识)
                    </div>
                    <div style="display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 15px; background: rgba(0,0,0,0.2); border-radius: 12px; border: 1px dashed rgba(255, 255, 255, 0.1);">
                        <!-- Network Cases -->
                        <div class="case-square" title="网络用例 01" style="background: rgba(59, 130, 246, 0.2); border-color: var(--accent-blue);">C1</div>
                        <div class="case-square" title="网络用例 02" style="background: rgba(59, 130, 246, 0.2); border-color: var(--accent-blue);">C2</div>
                        <div class="case-square" title="网络用例 03" style="background: rgba(59, 130, 246, 0.2); border-color: var(--accent-blue);">C3</div>
                        <div class="case-square" title="网络用例 04" style="background: rgba(59, 130, 246, 0.2); border-color: var(--accent-blue);">C4</div>
                        
                        <!-- Internal Cases -->
                        <div class="case-square" title="库内用例 05" style="background: rgba(139, 92, 246, 0.2); border-color: var(--accent-purple);">C5</div>
                        <div class="case-square" title="库内用例 06" style="background: rgba(139, 92, 246, 0.2); border-color: var(--accent-purple);">C6</div>
                        <div class="case-square" title="库内用例 07" style="background: rgba(139, 92, 246, 0.2); border-color: var(--accent-purple);">C7</div>
                        <div style="color: var(--text-secondary); display: flex; align-items: center; justify-content: center; margin-left: 5px; font-weight: bold;">...</div>
                    </div>
                </div>
            </div>

            <!-- Step 3: Process Design & Ability Extraction -->
            <div class="layer">
                <div style="display: flex; flex-direction: column; align-items: center; width: 100%; position: relative;">
                    <!-- New Flow Label -->
                    <div class="connector-label" style="top: -65px; left: 50%; transform: translateX(-50%);">解析业务场景特征 ⬇</div>

                    <!-- Top Row: Two Pools -->
                    <div style="display: flex; gap: 40px; justify-content: center; width: 100%; margin-bottom: 20px;">

                        <!-- Left: Ability Pool -->
                        <div class="node node-process"
                            style="flex: 1; max-width: 350px; border-top-color: var(--accent-cyan); display: flex; flex-direction: column;">
                            <div class="node-title">
                                <span class="icon-emoji">💡</span> 现有能力池 (Ability Pool)
                            </div>
                            <div class="node-desc" style="margin-bottom: 8px;">全局积累的标准原子能力库</div>
                            
                            <!-- Legend for Ability Pool -->
                            <div style="font-size: 0.75rem; color: var(--text-secondary); width: 100%; text-align: center; margin-bottom: 12px;">
                                <span style="display:inline-flex; align-items:center; gap:6px; margin-right:12px;">
                                    <div class="ability-circle solid" style="width:16px; height:16px; font-size:0; min-width:16px;"></div> <span style="color:var(--text-primary);">已实现能力</span>
                                </span>
                                <span style="display:inline-flex; align-items:center; gap:6px;">
                                    <div class="ability-circle outline" style="width:16px; height:16px; font-size:0; min-width:16px; border-color:var(--accent-cyan);"></div> <span style="color:var(--accent-cyan);">暂定新能力</span>
                                </span>
                            </div>

                            <div
                                style="display:flex; gap: 8px; flex-wrap:wrap; justify-content:center; padding: 15px; border-radius: 12px; background: rgba(0,0,0,0.3); border: 1px solid var(--card-border);">
                                <div class="ability-circle solid" title="已实现能力">A</div>
                                <div class="ability-circle solid" title="已实现能力">C</div>
                                <div class="ability-circle solid" title="已实现能力">E</div>
                                <div class="ability-circle solid" title="已实现能力">F</div>
                                <div class="ability-circle outline" title="暂定新能力" style="border-color: var(--accent-cyan); color: var(--accent-cyan);">B</div>
                                <div class="ability-circle solid" title="已实现能力">G</div>
                                <div class="ability-circle solid" title="已实现能力">H</div>
                                <div class="ability-circle solid" title="已实现能力">I</div>
                                <div class="ability-circle outline" title="暂定新能力" style="border-color: var(--accent-cyan); color: var(--accent-cyan);">D</div>
                            </div>
                        </div>

                        <!-- Right: Process Pool -->
                        <div class="node node-process"
                            style="flex: 1; max-width: 350px; border-top-color: var(--accent-amber); display: flex; flex-direction: column;">
                            <div class="node-title" style="color: var(--text-primary);">
                                <span class="icon-emoji">📚</span> 结构化工序池
                            </div>
                            <div class="node-desc" style="margin-bottom: 15px;">已验证的高分复用工序</div>

                            <div style="display: flex; flex-direction: column; gap: 10px; text-align: left;">
                                <!-- Process 1 -->
                                <div
                                    style="background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.5); padding: 10px; border-radius: 8px;">
                                    <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                                        <span
                                            style="font-weight: bold; font-size: 0.85rem; color: #fff;">人物视觉合成工序</span>
                                        <span
                                            style="background: var(--accent-amber); color: #000; font-size: 0.7rem; padding: 2px 6px; border-radius: 10px; font-weight: bold;">验证分数:
                                            8</span>
                                    </div>
                                    <div
                                        style="font-size: 0.75rem; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; margin-top: 5px;">
                                        包含能力:
                                        <div
                                            style="display: flex; align-items: center; gap: 4px; transform: scale(0.8); transform-origin: left center;">
                                            <div class="ability-circle solid">A</div>
                                            <div style="color: var(--text-secondary); font-size: 1rem;">➔</div>
                                            <div class="ability-circle solid">C</div>
                                            <div style="color: var(--text-secondary); font-size: 1rem;">➔</div>
                                            <div class="ability-circle solid">E</div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Process 2 (New) -->
                                <div
                                    style="background: rgba(245, 158, 11, 0.05); border: 1px dashed rgba(245, 158, 11, 0.3); padding: 10px; border-radius: 8px;">
                                    <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                                        <span
                                            style="font-weight: bold; font-size: 0.85rem; color: var(--text-secondary);">(NEW)
                                            特效错位新工序</span>
                                        <span
                                            style="background: rgba(255, 255, 255, 0.1); color: var(--text-secondary); font-size: 0.7rem; padding: 2px 6px; border-radius: 10px;">初始入库:
                                            0</span>
                                    </div>
                                    <div
                                        style="font-size: 0.75rem; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; margin-top: 5px;">
                                        包含能力:
                                        <div
                                            style="display: flex; align-items: center; gap: 4px; transform: scale(0.8); transform-origin: left center;">
                                            <div class="ability-circle solid">A</div>
                                            <div style="color: var(--text-secondary); font-size: 1rem;">➔</div>
                                            <div class="ability-circle outline"
                                                style="border-color: var(--accent-cyan); color: var(--accent-cyan);">B
                                            </div>
                                            <div style="color: var(--text-secondary); font-size: 1rem;">➔</div>
                                            <div class="ability-circle solid">C</div>
                                            <div style="color: var(--text-secondary); font-size: 1rem;">➔</div>
                                            <div class="ability-circle outline"
                                                style="border-color: var(--accent-cyan); color: var(--accent-cyan);">D
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Funnel Arrows -->
                    <div style="display: flex; justify-content: center; gap: 80px; margin-bottom: -15px; z-index: 10; position: relative;">
                        <div class="connector-label" style="position: static; font-size: 0.9rem; color: var(--accent-purple); border-color: var(--accent-purple); box-shadow: 0 0 10px rgba(139, 92, 246, 0.2);">
                            ↘ 提取引用能力
                        </div>
                        <div class="connector-label" style="position: static; font-size: 0.9rem; color: var(--accent-amber); border-color: var(--accent-amber); box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);">
                            复用现成工序 ↙
                        </div>
                    </div>

                    <!-- Center Base: Structured Process Builder -->
                    <div class="node node-process" style="width: 100%; max-width: 500px;">
                        <div class="node-title">
                            <span class="icon-emoji">🧩</span> 设计/复用结构化工序
                        </div>
                        <div class="node-desc">
                            参考原有的工序沉淀，结合新 Case 抽取出结构流向。
                        </div>

                        <div class="process-pipeline">
                            <div class="connector-label" style="top: -12px; left: 10px; font-weight: normal;">执行链条
                                (Structured Process)</div>

                            <!-- Step A -->
                            <div class="pipeline-step">
                                <div class="ability-circle solid" title="已实现的标准能力 (Implemented)">A</div>
                                <div class="v-line-label">支撑</div>
                                <div class="v-line"></div>
                                <div class="case-cluster">
                                    <div class="case-square" title="Case 01">C1</div>
                                    <div class="case-square" title="Case 02">C2</div>
                                </div>
                            </div>

                            <div class="pipeline-arrow">➔</div>

                            <!-- Step B -->
                            <div class="pipeline-step">
                                <div class="ability-circle outline" title="暂定的新能力 (Tentative)">B</div>
                                <div class="v-line-label extract">提炼</div>
                                <div class="v-line extract"></div>
                                <div class="case-cluster">
                                    <div class="case-square" title="Case 03">C3</div>
                                    <div class="case-square" title="Case 04">C4</div>
                                </div>
                            </div>

                            <div class="pipeline-arrow">➔</div>

                            <!-- Step C -->
                            <div class="pipeline-step">
                                <div class="ability-circle solid" title="已实现的标准能力 (Implemented)">C</div>
                                <div class="v-line-label">支撑</div>
                                <div class="v-line"></div>
                                <div class="case-cluster">
                                    <div class="case-square" title="Case 05">C5</div>
                                </div>
                            </div>

                            <div class="pipeline-arrow">➔</div>

                            <!-- Step D -->
                            <div class="pipeline-step">
                                <div class="ability-circle outline" title="暂定的新能力 (Tentative)">D</div>
                                <div class="v-line-label extract">提炼</div>
                                <div class="v-line extract"></div>
                                <div class="case-cluster">
                                    <div class="case-square" title="Case 06">C6</div>
                                    <div class="case-square" title="Case 07">C7</div>
                                </div>
                            </div>
                        </div>
                        <p style="font-size: 0.75rem; text-align:center; color:var(--text-secondary); margin-top:10px;">
                            (沉淀：由本轮提炼的新能力和新工序将反哺至上方池中)
                        </p>
                    </div>
                </div>
            </div>

            <!-- Step 4: Pipeline Assembly -->
            <div class="layer">
                <div class="node node-pipeline" style="min-width: 500px; margin-top: 20px;">
                    <div class="connector-label" style="top: -34px; left: 50%; transform: translateX(-50%);">下发执行规范 (JSON) ⬇</div>
                    <div class="node-title">
                        <span class="icon-emoji">⚙️</span> 设计可执行 Pipeline
                    </div>
                    <div class="node-desc" style="margin-bottom: 20px;">
                        将抽象能力序列下沉为具体的底层节点调用组
                    </div>

                    <div
                        style="background: rgba(0,0,0,0.3); padding: 20px; border-radius: 12px; border: 1px dashed var(--accent-pink); position: relative;">
                        <!-- Header -->
                        <div
                            style="display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 5px; padding-bottom: 8px; border-bottom: 1px solid var(--card-border);">
                            <div style="flex: 1; text-align: left;">能力序列 (with Cases)</div>
                            <div style="flex: 1; text-align: right;">真实工具表 (素材/要素)</div>
                        </div>

                        <div class="pipeline-grid" style="position: relative;">
                            <!-- Divider Line -->
                            <div
                                style="position: absolute; left: 50%; top: -15px; bottom: 0; width: 1px; background: linear-gradient(to bottom, transparent, var(--card-border) 10%, transparent); transform: translateX(-50%); z-index: 0;">
                            </div>

                            <!-- Row 1 -->
                            <div class="cases" style="z-index: 1;">
                                <div class="case-square" title="Case 01">C1</div>
                                <div class="case-square" title="Case 02">C2</div>
                            </div>
                            <div class="dash" style="z-index: 1;">一</div>
                            <div class="ability" style="z-index: 1;">
                                <div class="ability-circle solid" title="已实现的标准能力 (Implemented)">A</div>
                            </div>
                            <div class="dash" style="z-index: 1;">一</div>
                            <div class="impl" style="z-index: 1;">implements (确定工具)</div>

                            <!-- V-Link Row 1 -->
                            <div></div>
                            <div></div>
                            <div class="v-link">⬇</div>
                            <div></div>
                            <div class="v-link impl-side">⬇</div>

                            <!-- Row 2 -->
                            <div class="cases" style="z-index: 1;">
                                <div class="case-square" title="Case 03">C3</div>
                                <div class="case-square" title="Case 04">C4</div>
                            </div>
                            <div class="dash" style="z-index: 1;">一</div>
                            <div class="ability" style="z-index: 1;">
                                <div class="ability-circle outline" title="暂定的新能力 (Tentative)">B</div>
                            </div>
                            <div class="dash" style="z-index: 1;">一</div>
                            <div class="impl dashed" style="z-index: 1;">implements_candidates (已有工具替代)</div>

                            <!-- V-Link Row 2 -->
                            <div></div>
                            <div></div>
                            <div class="v-link">⬇</div>
                            <div></div>
                            <div class="v-link impl-side">⬇</div>

                            <!-- Row 3 -->
                            <div class="cases" style="z-index: 1;">
                                <div class="case-square" title="Case 05">C5</div>
                            </div>
                            <div class="dash" style="z-index: 1;">一</div>
                            <div class="ability" style="z-index: 1;">
                                <div class="ability-circle solid" title="已实现的标准能力 (Implemented)">C</div>
                            </div>
                            <div class="dash" style="z-index: 1;">一</div>
                            <div class="impl" style="z-index: 1;">im...</div>

                            <!-- V-Link dots -->
                            <div></div>
                            <div></div>
                            <div class="v-link" style="font-size: 14px; margin-top: -5px; color: var(--card-border);">⋮
                            </div>
                            <div></div>
                            <div class="v-link impl-side"
                                style="font-size: 14px; margin-top: -5px; color: var(--card-border);">⋮</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Step 5: Execution & Evaluate -->
            <div class="layer">
                <div class="split-col" style="align-items: flex-start; position: relative;">
                    <!-- New Flow Label -->
                    <div class="connector-label" style="top: -65px; left: 50%; transform: translateX(-50%);">投递至底层 Agent 引擎 ⬇</div>

                    <!-- Left Branch: Failure / Refactoring -->
                    <div class="node node-eval" style="border-top-color: var(--accent-red);">
                        <div class="connector-label eval-fail" style="top: -30px; right: 0;">⬅ 失败反馈 (Fail)</div>
                        <div class="node-title" style="color: var(--accent-red)">
                            <span class="icon-emoji">🔧</span> 工序重构
                        </div>
                        <div class="node-desc">
                            <strong>重试优先级机制</strong>
                        </div>
                        <ul class="sub-list" style="margin-top:15px; text-align: left;">
                            <li><span style="color:var(--accent-red)">[1] 替换出错底层工具</span><br>
                                <span style="font-size: 0.75rem; color: var(--text-secondary); margin-left: 18px;">⤤ 短路回退 <b>Step 4</b> (更换 API / 代码逻辑)</span>
                            </li>
                            <li style="margin-top: 8px;"><span style="color:var(--accent-red)">[2] 微调能力序列节点</span><br>
                                <span style="font-size: 0.75rem; color: var(--text-secondary); margin-left: 18px;">⤤ 中度回退 <b>Step 3</b> (删减 / 新增组装原子)</span>
                            </li>
                            <li style="margin-top: 8px;"><span style="color:var(--accent-red)">[3] 彻底打翻工序结构</span><br>
                                <span style="font-size: 0.75rem; color: var(--text-secondary); margin-left: 18px;">⤤ 深度回退 <b>Step 2</b> (重新提取用例与新能力)</span>
                            </li>
                        </ul>
                    </div>

                    <!-- Center Core: Execution Action -->
                    <div class="node pulse" style="border:2px solid var(--accent-cyan); min-width: 200px; background: rgba(6, 182, 212, 0.05);">
                        <div class="node-title" style="color: var(--accent-cyan);">
                            <span class="icon-emoji">🚀</span> 实际执行 Pipeline
                        </div>
                        <div class="node-desc">
                            在底层投递执行并产出最终成果<br><br>
                            ⬇<br>
                            <b style="font-size: 1.2rem; color: #fff; text-shadow: 0 0 10px rgba(255,255,255,0.5);">Result (核心产出结果)</b>
                        </div>
                        <br>
                        <div
                            style="background:var(--accent-amber); color:#000; padding:8px 0; border-radius:8px; font-weight:bold; width:80%; margin: 0 auto; box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);">
                            双向评估判定 (Evaluate)
                        </div>
                    </div>

                    <!-- Right Branch: Success / Accumulation -->
                    <div class="node node-eval" style="border-top-color: var(--accent-green);">
                        <div class="connector-label eval-success" style="top: -30px; left: 0;">成功通过 (Success) ➡</div>
                        <div class="node-title" style="color: var(--accent-green)">
                            <span class="icon-emoji">✨</span> 系统底座升维
                        </div>
                        <div class="node-desc">自动沉淀知识体系资产</div>
                        <div class="sub-node-box"
                            style="border-color: rgba(16, 185, 129, 0.3); background: rgba(16, 185, 129, 0.05); text-align: center;">
                            <div style="margin-bottom: 12px; font-size: 0.95rem;">✅ <b>新能力转为 Implemented</b></div>
                            <div style="font-size: 0.95rem; line-height: 1.5;">✅ <b>完整执行流沉淀为自有 Case 入库</b><br>
                                <span style="font-size: 0.75rem; color: #10B981; font-weight: normal; opacity: 0.9;">(反哺给 Step 1 实现拦截复用)</span>
                            </div>
                        </div>
                        <div
                            style="margin-top: 16px; font-weight: bold; background: linear-gradient(135deg, var(--accent-green), var(--accent-cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
                            🚀 结构化工序 (Pipeline) 效能评分 +1
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <script>
        document.querySelectorAll('.node').forEach((el, index) => {
            el.addEventListener('mouseenter', () => {
                el.style.transform = 'translateY(-5px) scale(1.02)';
            });
            el.addEventListener('mouseleave', () => {
                el.style.transform = 'translateY(0) scale(1)';
            });
        });
    </script>
</body>

</html>