| 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720" |
| 2 | font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" |
| 3 | font-size="12"> |
| 4 | <!-- |
| 5 | Module Composition Chart Template |
| 6 | Usage: Breakdown of a large module into sub-modules |
| 7 | Scenarios: Pipeline stages, architecture internals, three-stage processes |
| 8 | Supports: 1 Parent Container + 3 Sub-modules |
| 9 | --> |
| 10 | <defs> |
| 11 | <marker id="mcArrow" markerWidth="10" markerHeight="10" refX="9" refY="5" orient="auto" markerUnits="strokeWidth"> |
| 12 | <path d="M0,0 L10,5 L0,10 Z" fill="#94A3B8"/> |
| 13 | </marker> |
| 14 | </defs> |
| 15 | <!-- Background --> |
| 16 | <rect width="1280" height="720" fill="#FFFFFF"/> |
| 17 | <!-- Title Area --> |
| 18 | <g id="header" data-pptx-bounds="40 30 1000 65"> |
| 19 | <rect x="40" y="32" width="8" height="36" rx="4" fill="#3B82F6"/> |
| 20 | <text x="64" y="60" font-size="32" font-weight="800" fill="#0F172A">Recommendation Engine Pipeline</text> |
| 21 | <text x="64" y="90" font-size="14" font-weight="600" fill="#64748B" letter-spacing="0.5"> |
| 22 | PARENT CONTAINER DECLARES "WHAT", SUB-MODULES DECLARE "HOW" — RECALL → RANK → RERANK |
| 23 | </text> |
| 24 | </g> |
| 25 | <g id="pipeline-shell" data-pptx-bounds="40 150 1200 430"> |
| 26 | <!-- Parent module and its attached label. --> |
| 27 | <rect x="40" y="150" width="40" height="430" rx="8" fill="#3B82F6"/> |
| 28 | <text x="60" y="370" text-anchor="middle" font-size="24" fill="#FFFFFF">⚙</text> |
| 29 | <rect x="100" y="150" width="1140" height="430" rx="12" fill="#F8FAFC" fill-opacity="0.6" stroke="#93C5FD" stroke-width="1.5" stroke-dasharray="6 4"/> |
| 30 | <text x="670" y="175" text-anchor="middle" font-size="13" font-weight="700" fill="#2563EB" letter-spacing="1">PARENT CONTAINER · RECOMMENDATION PIPELINE · INPUT: CONTEXT → OUTPUT: EXPOSURE</text> |
| 31 | </g> |
| 32 | <g id="pipeline-stages" data-pptx-bounds="130 200 1080 352"> |
| 33 | <!-- ==================== Card 1: Recall ==================== --> |
| 34 | <g id="recall-stage-card"> |
| 35 | <rect x="130" y="200" width="340" height="352" rx="8" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1"/> |
| 36 | <!-- Header & Badge --> |
| 37 | <rect x="130" y="220" width="6" height="40" rx="3" fill="#3B82F6"/> |
| 38 | <rect x="150" y="220" width="40" height="40" rx="8" fill="#EFF6FF"/> |
| 39 | <text x="170" y="246" text-anchor="middle" font-size="16" font-weight="800" fill="#3B82F6">01</text> |
| 40 | <text x="200" y="246" font-size="20" font-weight="800" fill="#0F172A">Recall Stage</text> |
| 41 | <!-- Role Subtitle --> |
| 42 | <rect x="146" y="276" width="308" height="30" rx="6" fill="#EFF6FF"/> |
| 43 | <text x="300" y="296" text-anchor="middle" font-size="13" font-weight="700" fill="#2563EB">Filter candidates from massive corpus</text> |
| 44 | <!-- Bullet 1 --> |
| 45 | <circle cx="156" cy="336" r="4" fill="#3B82F6"/> |
| 46 | <text x="168" y="341" font-size="14" font-weight="700" fill="#1E293B">Multi-channel Triggering</text> |
| 47 | <text x="168" y="361" font-weight="500" fill="#64748B">Collaborative filtering, trending, interests</text> |
| 48 | <!-- Bullet 2 --> |
| 49 | <circle cx="156" cy="386" r="4" fill="#3B82F6"/> |
| 50 | <text x="168" y="391" font-size="14" font-weight="700" fill="#1E293B">Dual-channel Indexing</text> |
| 51 | <text x="168" y="411" font-weight="500" fill="#64748B">Vector retrieval + Inverted index fusion</text> |
| 52 | <!-- Bullet 3 --> |
| 53 | <circle cx="156" cy="436" r="4" fill="#3B82F6"/> |
| 54 | <text x="168" y="441" font-size="14" font-weight="700" fill="#1E293B">Candidate Pool</text> |
| 55 | <text x="168" y="461" font-weight="500" fill="#64748B">Outputs hundreds to thousands per user</text> |
| 56 | <!-- Metrics Box --> |
| 57 | <rect x="146" y="486" width="308" height="54" rx="6" fill="#F8FAFC" stroke="#F1F5F9" stroke-width="1"/> |
| 58 | <line x1="300" y1="496" x2="300" y2="530" stroke="#E2E8F0" stroke-width="1"/> |
| 59 | <text x="223" y="508" text-anchor="middle" font-weight="600" fill="#64748B">Avg Latency</text> |
| 60 | <text x="223" y="530" text-anchor="middle" font-size="16" font-weight="800" fill="#3B82F6">< 50 ms</text> |
| 61 | <text x="377" y="508" text-anchor="middle" font-weight="600" fill="#64748B">Pool Size</text> |
| 62 | <text x="377" y="530" text-anchor="middle" font-size="16" font-weight="800" fill="#3B82F6">~2,000</text> |
| 63 | </g> |
| 64 | <!-- Arrow 1-2 --> |
| 65 | <line x1="475" y1="376" x2="495" y2="376" stroke="#94A3B8" stroke-width="3" marker-end="url(#mcArrow)"/> |
| 66 | <!-- ==================== Card 2: Ranking ==================== --> |
| 67 | <g id="ranking-stage-card"> |
| 68 | <rect x="500" y="200" width="340" height="352" rx="8" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1"/> |
| 69 | <!-- Header & Badge --> |
| 70 | <rect x="500" y="220" width="6" height="40" rx="3" fill="#6366F1"/> |
| 71 | <rect x="520" y="220" width="40" height="40" rx="8" fill="#EEF2FF"/> |
| 72 | <text x="540" y="246" text-anchor="middle" font-size="16" font-weight="800" fill="#6366F1">02</text> |
| 73 | <text x="570" y="246" font-size="20" font-weight="800" fill="#0F172A">Ranking Stage</text> |
| 74 | <!-- Role Subtitle --> |
| 75 | <rect x="516" y="276" width="308" height="30" rx="6" fill="#EEF2FF"/> |
| 76 | <text x="670" y="296" text-anchor="middle" font-size="13" font-weight="700" fill="#4F46E5">Precise scoring and optimal output</text> |
| 77 | <!-- Bullet 1 --> |
| 78 | <circle cx="526" cy="336" r="4" fill="#6366F1"/> |
| 79 | <text x="538" y="341" font-size="14" font-weight="700" fill="#1E293B">Deep Model Prediction</text> |
| 80 | <text x="538" y="361" font-weight="500" fill="#64748B">Multi-tower DNN for CTR/CVR est.</text> |
| 81 | <!-- Bullet 2 --> |
| 82 | <circle cx="526" cy="386" r="4" fill="#6366F1"/> |
| 83 | <text x="538" y="391" font-size="14" font-weight="700" fill="#1E293B">Multi-objective Fusion</text> |
| 84 | <text x="538" y="411" font-weight="500" fill="#64748B">Weighted formula or Pareto frontier</text> |
| 85 | <!-- Bullet 3 --> |
| 86 | <circle cx="526" cy="436" r="4" fill="#6366F1"/> |
| 87 | <text x="538" y="441" font-size="14" font-weight="700" fill="#1E293B">Top-K Refinement</text> |
| 88 | <text x="538" y="461" font-weight="500" fill="#64748B">Select Top-K candidates for next stage</text> |
| 89 | <!-- Metrics Box --> |
| 90 | <rect x="516" y="486" width="308" height="54" rx="6" fill="#F8FAFC" stroke="#F1F5F9" stroke-width="1"/> |
| 91 | <line x1="670" y1="496" x2="670" y2="530" stroke="#E2E8F0" stroke-width="1"/> |
| 92 | <text x="593" y="508" text-anchor="middle" font-weight="600" fill="#64748B">Avg Latency</text> |
| 93 | <text x="593" y="530" text-anchor="middle" font-size="16" font-weight="800" fill="#6366F1">< 100 ms</text> |
| 94 | <text x="747" y="508" text-anchor="middle" font-weight="600" fill="#64748B">Top-K Size</text> |
| 95 | <text x="747" y="530" text-anchor="middle" font-size="16" font-weight="800" fill="#6366F1">~200</text> |
| 96 | </g> |
| 97 | <!-- Arrow 2-3 --> |
| 98 | <line x1="845" y1="376" x2="865" y2="376" stroke="#94A3B8" stroke-width="3" marker-end="url(#mcArrow)"/> |
| 99 | <!-- ==================== Card 3: Rerank ==================== --> |
| 100 | <g id="rerank-stage-card"> |
| 101 | <rect x="870" y="200" width="340" height="352" rx="8" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1"/> |
| 102 | <!-- Header & Badge --> |
| 103 | <rect x="870" y="220" width="6" height="40" rx="3" fill="#8B5CF6"/> |
| 104 | <rect x="890" y="220" width="40" height="40" rx="8" fill="#F5F3FF"/> |
| 105 | <text x="910" y="246" text-anchor="middle" font-size="16" font-weight="800" fill="#8B5CF6">03</text> |
| 106 | <text x="940" y="246" font-size="20" font-weight="800" fill="#0F172A">Rerank Stage</text> |
| 107 | <!-- Role Subtitle --> |
| 108 | <rect x="886" y="276" width="308" height="30" rx="6" fill="#F5F3FF"/> |
| 109 | <text x="1040" y="296" text-anchor="middle" font-size="13" font-weight="700" fill="#7C3AED">Strategic intervention & diversity tuning</text> |
| 110 | <!-- Bullet 1 --> |
| 111 | <circle cx="896" cy="336" r="4" fill="#8B5CF6"/> |
| 112 | <text x="908" y="341" font-size="14" font-weight="700" fill="#1E293B">Diversity Scattering</text> |
| 113 | <text x="908" y="361" font-weight="500" fill="#64748B">Prevent homogeneity, disperse categories</text> |
| 114 | <!-- Bullet 2 --> |
| 115 | <circle cx="896" cy="386" r="4" fill="#8B5CF6"/> |
| 116 | <text x="908" y="391" font-size="14" font-weight="700" fill="#1E293B">Business Rules</text> |
| 117 | <text x="908" y="411" font-weight="500" fill="#64748B">Boost / Filter / Targeted pinning</text> |
| 118 | <!-- Bullet 3 --> |
| 119 | <circle cx="896" cy="436" r="4" fill="#8B5CF6"/> |
| 120 | <text x="908" y="441" font-size="14" font-weight="700" fill="#1E293B">Final Exposure</text> |
| 121 | <text x="908" y="461" font-weight="500" fill="#64748B">Generate final user-visible sequence</text> |
| 122 | <!-- Metrics Box --> |
| 123 | <rect x="886" y="486" width="308" height="54" rx="6" fill="#F8FAFC" stroke="#F1F5F9" stroke-width="1"/> |
| 124 | <line x1="1040" y1="496" x2="1040" y2="530" stroke="#E2E8F0" stroke-width="1"/> |
| 125 | <text x="963" y="508" text-anchor="middle" font-weight="600" fill="#64748B">Avg Latency</text> |
| 126 | <text x="963" y="530" text-anchor="middle" font-size="16" font-weight="800" fill="#8B5CF6">< 30 ms</text> |
| 127 | <text x="1117" y="508" text-anchor="middle" font-weight="600" fill="#64748B">Final Exp.</text> |
| 128 | <text x="1117" y="530" text-anchor="middle" font-size="16" font-weight="800" fill="#8B5CF6">~20</text> |
| 129 | </g> |
| 130 | </g> |
| 131 | <!-- ==================== Bottom Section: Data Flow ==================== --> |
| 132 | <g id="data-flow" data-pptx-bounds="40 610 1200 80"> |
| 133 | <rect x="40" y="610" width="40" height="80" rx="8" fill="#64748B"/> |
| 134 | <path d="M 47 636 H 64 V 631 L 74 641 L 64 651 V 646 H 47 Z" fill="#FFFFFF"/> |
| 135 | <path d="M 73 664 H 56 V 669 L 46 659 L 56 649 V 654 H 73 Z" fill="#FFFFFF"/> |
| 136 | <rect x="100" y="610" width="1140" height="80" rx="12" fill="#F8FAFC" stroke="#CBD5E1" stroke-width="1.5" stroke-dasharray="6 4"/> |
| 137 | <text x="670" y="632" text-anchor="middle" font-weight="700" fill="#475569" letter-spacing="1">END-TO-END DATA FLOW · UPSTREAM LOGS → ENGINE PROCESSING → DOWNSTREAM FEEDBACK</text> |
| 138 | <!-- Direction marker makes the feedback-stream reading order explicit. --> |
| 139 | <line x1="120" y1="668" x2="1220" y2="668" stroke="#94A3B8" stroke-width="1" stroke-dasharray="4 2" marker-end="url(#mcArrow)"/> |
| 140 | <!-- Input 1 --> |
| 141 | <rect x="130" y="650" width="196" height="36" rx="6" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1"/> |
| 142 | <text x="228" y="673" text-anchor="middle" font-size="13" font-weight="600" fill="#475569">User Action Logs</text> |
| 143 | <!-- Input 2 (Highlighted) --> |
| 144 | <rect x="346" y="650" width="196" height="36" rx="6" fill="#EFF6FF" stroke="#93C5FD" stroke-width="1"/> |
| 145 | <text x="444" y="673" text-anchor="middle" font-size="13" font-weight="700" fill="#2563EB">Persona & Features</text> |
| 146 | <!-- Input 3 --> |
| 147 | <rect x="562" y="650" width="196" height="36" rx="6" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1"/> |
| 148 | <text x="660" y="673" text-anchor="middle" font-size="13" font-weight="600" fill="#475569">Feed Exposure Stream</text> |
| 149 | <!-- Input 4 --> |
| 150 | <rect x="778" y="650" width="196" height="36" rx="6" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1"/> |
| 151 | <text x="876" y="673" text-anchor="middle" font-size="13" font-weight="600" fill="#475569">Click / Dwell Feedback</text> |
| 152 | <!-- Input 5 (Highlighted Output) --> |
| 153 | <rect x="994" y="650" width="196" height="36" rx="6" fill="#ECFDF5" stroke="#6EE7B7" stroke-width="1"/> |
| 154 | <text x="1092" y="673" text-anchor="middle" font-size="13" font-weight="700" fill="#059669">A/B Testing Metrics</text> |
| 155 | </g> |
| 156 | </svg> |
| 157 |