CodeReview/frontend/public/diagram.svg

361 lines
22 KiB
XML
Raw Normal View History

2025-10-24 16:20:32 +08:00
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="1200" height="1200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Define styles with deep red color scheme -->
<defs>
<style type="text/css">
<![CDATA[
.title { font-family: 'Arial', sans-serif; font-size: 26px; font-weight: 700; fill: #8B0000; }
.subtitle { font-family: 'Arial', sans-serif; font-size: 14px; fill: #A52A2A; font-weight: 500; }
.layer-title { font-family: 'Arial', sans-serif; font-size: 14px; font-weight: 600; fill: #ffffff; }
.component-title { font-family: 'Arial', sans-serif; font-size: 11.5px; font-weight: 600; fill: #8B0000; }
.component-text { font-family: 'Arial', sans-serif; font-size: 9.5px; fill: #2c3e50; }
.note-text { font-family: 'Arial', sans-serif; font-size: 8.5px; fill: #7f8c8d; font-style: italic; }
.legend-text { font-family: 'Arial', sans-serif; font-size: 10px; fill: #2c3e50; }
.section-label { font-family: 'Arial', sans-serif; font-size: 11px; font-weight: 600; fill: #8B0000; letter-spacing: 0.5px; }
.arrow { fill: none; stroke: #8B0000; stroke-width: 2; marker-end: url(#arrowhead); }
.arrow-thick { fill: none; stroke: #DC143C; stroke-width: 3; marker-end: url(#arrowhead-crimson); }
.arrow-data { fill: none; stroke: #CD5C5C; stroke-width: 2; marker-end: url(#arrowhead-light); }
.shadow { filter: drop-shadow(0px 3px 5px rgba(139,0,0,0.2)); }
]]>
</style>
<!-- Deep red gradient definitions -->
<linearGradient id="grad-main" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#8B0000;stop-opacity:1" />
<stop offset="100%" style="stop-color:#A52A2A;stop-opacity:1" />
</linearGradient>
<linearGradient id="grad-secondary" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#B22222;stop-opacity:1" />
<stop offset="100%" style="stop-color:#CD5C5C;stop-opacity:1" />
</linearGradient>
<linearGradient id="grad-accent" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#DC143C;stop-opacity:1" />
<stop offset="100%" style="stop-color:#C71585;stop-opacity:1" />
</linearGradient>
<linearGradient id="grad-highlight" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#FF6347;stop-opacity:1" />
<stop offset="100%" style="stop-color:#FF4500;stop-opacity:1" />
</linearGradient>
<linearGradient id="grad-dark" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#800020;stop-opacity:1" />
<stop offset="100%" style="stop-color:#A52A2A;stop-opacity:1" />
</linearGradient>
<!-- Arrow markers -->
<marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
<polygon points="0 0, 10 3, 0 6" fill="#8B0000" />
</marker>
<marker id="arrowhead-crimson" markerWidth="12" markerHeight="12" refX="10" refY="3" orient="auto">
<polygon points="0 0, 12 3, 0 6" fill="#DC143C" />
</marker>
<marker id="arrowhead-light" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
<polygon points="0 0, 10 3, 0 6" fill="#CD5C5C" />
</marker>
</defs>
<!-- Background -->
<rect width="1200" height="1200" fill="#FFF5F5" stroke="black" stroke-width="2"/>
<!-- Title Section -->
<g id="header">
<rect x="50" y="20" width="1120" height="65" fill="url(#grad-main)" rx="6" class="shadow"/>
<text x="610" y="50" text-anchor="middle" class="layer-title" font-size="24">XCodeReviewer: Multi-LLM Code Audit Platform</text>
<text x="610" y="72" text-anchor="middle" class="layer-title" font-size="12">Unified Abstraction Architecture with Concurrent Processing Engine</text>
</g>
<!-- USER PERSONAS -->
<g id="user-layer">
<text x="60" y="108" class="section-label">USER PERSONAS</text>
<rect x="50" y="115" width="1120" height="55" fill="url(#grad-secondary)" rx="5" class="shadow"/>
<rect x="70" y="128" width="345" height="35" fill="#ffffff" rx="4"/>
<circle cx="88" cy="145" r="10" fill="#8B0000"/>
<text x="105" y="143" class="component-title" font-size="11">System Administrator</text>
<text x="105" y="155" class="note-text">Global Config &amp; User Management</text>
<rect x="435" y="128" width="345" height="35" fill="#ffffff" rx="4"/>
<circle cx="453" cy="145" r="10" fill="#B22222"/>
<text x="470" y="143" class="component-title" font-size="11">Developer</text>
<text x="470" y="155" class="note-text">Project Creation &amp; Code Analysis</text>
<rect x="800" y="128" width="345" height="35" fill="#ffffff" rx="4"/>
<circle cx="818" cy="145" r="10" fill="#CD5C5C"/>
<text x="835" y="143" class="component-title" font-size="11">Security Auditor</text>
<text x="835" y="155" class="note-text">Issue Review &amp; Risk Assessment</text>
</g>
<!-- LAYER 0: INFRASTRUCTURE -->
<g id="layer-0">
<text x="60" y="193" class="section-label">LAYER 0 · INFRASTRUCTURE &amp; DEPLOYMENT</text>
<rect x="50" y="200" width="1120" height="90" fill="url(#grad-main)" rx="5" class="shadow"/>
<rect x="70" y="215" width="260" height="60" fill="#ffffff" rx="3"/>
<text x="85" y="230" class="component-title">🐳 Docker Container</text>
<text x="85" y="243" class="component-text">Multi-stage: Node.js 18 + Nginx</text>
<text x="85" y="254" class="component-text">Docker Compose Orchestration</text>
<text x="85" y="265" class="note-text">Port: 5174 → 80</text>
<rect x="350" y="215" width="260" height="60" fill="#ffffff" rx="3"/>
<text x="365" y="230" class="component-title">💚 Health Monitoring</text>
<text x="365" y="243" class="component-text">Interval: 30s | Timeout: 10s</text>
<text x="365" y="254" class="component-text">HTTP Healthcheck (wget)</text>
<text x="365" y="265" class="note-text">Retries: 3 | Start: 40s</text>
<rect x="630" y="215" width="260" height="60" fill="#ffffff" rx="3"/>
<text x="645" y="230" class="component-title">🌐 Network &amp; Serving</text>
<text x="645" y="243" class="component-text">Bridge Network Isolation</text>
<text x="645" y="254" class="component-text">Nginx Static Assets</text>
<text x="645" y="265" class="note-text">SPA Routing Config</text>
<rect x="910" y="215" width="240" height="60" fill="#ffffff" rx="3"/>
<text x="925" y="230" class="component-title">⚙️ Environment Config</text>
<text x="925" y="243" class="component-text">LLM Provider Keys</text>
<text x="925" y="254" class="component-text">Supabase Credentials</text>
<text x="925" y="265" class="note-text">Optional Database</text>
</g>
<!-- LAYER 1: PRESENTATION -->
<g id="layer-1">
<text x="60" y="313" class="section-label">LAYER 1 · PRESENTATION (React 18 + TypeScript)</text>
<rect x="50" y="320" width="1120" height="125" fill="url(#grad-secondary)" rx="5" class="shadow"/>
<rect x="70" y="335" width="210" height="95" fill="#ffffff" rx="3"/>
<text x="85" y="349" class="component-title">📊 Dashboard</text>
<text x="85" y="361" class="component-text">Quality Trends</text>
<text x="85" y="371" class="component-text">Project Statistics</text>
<text x="85" y="381" class="component-text">System Overview</text>
<text x="85" y="391" class="note-text">Recharts Viz</text>
<text x="85" y="400" class="note-text">Real-time Updates</text>
<rect x="295" y="335" width="210" height="95" fill="#ffffff" rx="3"/>
<text x="310" y="349" class="component-title">📁 Projects</text>
<text x="310" y="361" class="component-text">Repo Integration</text>
<text x="310" y="371" class="component-text">ZIP Upload</text>
<text x="310" y="381" class="component-text">Language Detection</text>
<text x="310" y="391" class="note-text">GitHub/GitLab API</text>
<text x="310" y="400" class="note-text">Team Collaboration</text>
<rect x="520" y="335" width="210" height="95" fill="#ffffff" rx="3"/>
<text x="535" y="349" class="component-title">⚡ Instant Analysis</text>
<text x="535" y="361" class="component-text">Code Snippet Input</text>
<text x="535" y="371" class="component-text">Real-time Results</text>
<text x="535" y="381" class="component-text">10+ Languages</text>
<text x="535" y="391" class="note-text">No Persistence</text>
<text x="535" y="400" class="note-text">Privacy Protected</text>
<rect x="745" y="335" width="210" height="95" fill="#ffffff" rx="3"/>
<text x="760" y="349" class="component-title">✅ Audit Tasks</text>
<text x="760" y="361" class="component-text">Batch Processing</text>
<text x="760" y="371" class="component-text">Progress Tracking</text>
<text x="760" y="381" class="component-text">Issue Management</text>
<text x="760" y="391" class="note-text">Max: 40 Files</text>
<text x="760" y="400" class="note-text">200KB per File</text>
<rect x="970" y="335" width="180" height="95" fill="#ffffff" rx="3"/>
<text x="985" y="349" class="component-title">🛡️ Admin Panel</text>
<text x="985" y="361" class="component-text">User Management</text>
<text x="985" y="371" class="component-text">System Config</text>
<text x="985" y="381" class="component-text">LLM Settings</text>
<text x="985" y="391" class="note-text">RBAC Control</text>
<text x="985" y="400" class="note-text">Admin Only</text>
</g>
<!-- LAYER 2: APPLICATION LOGIC -->
<g id="layer-2">
<text x="60" y="468" class="section-label">LAYER 2 · APPLICATION LOGIC</text>
<rect x="50" y="475" width="1120" height="115" fill="url(#grad-dark)" rx="5" class="shadow"/>
<rect x="70" y="490" width="490" height="85" fill="#ffffff" rx="3"/>
<text x="85" y="504" class="component-title">🧠 Code Analysis Engine</text>
<text x="85" y="516" class="component-text">• Analysis Service (codeAnalysis.ts) - XAI Framework</text>
<text x="85" y="527" class="component-text">• Project Service (repoScan.ts, repoZipScan.ts)</text>
<text x="85" y="538" class="component-text">• LLM Orchestrator (llm-service.ts)</text>
<text x="85" y="549" class="component-text">• Config Manager (env.ts, database.ts)</text>
<text x="85" y="560" class="note-text">Features: analysis/, projects/</text>
<rect x="580" y="490" width="280" height="40" fill="#ffffff" rx="3"/>
<text x="595" y="504" class="component-title">⚠️ Error Handler</text>
<text x="595" y="516" class="component-text">Status Classification: 401/403/429/500+</text>
<text x="595" y="527" class="note-text">Detailed Error Messages</text>
<rect x="880" y="490" width="270" height="40" fill="#ffffff" rx="3"/>
<text x="895" y="504" class="component-title">📦 Batch Processor</text>
<text x="895" y="516" class="component-text">Worker Pool (Shared Index)</text>
<text x="895" y="527" class="note-text">Update Every 10 Files</text>
<rect x="580" y="540" width="280" height="35" fill="#ffffff" rx="3"/>
<text x="595" y="554" class="component-title">🔄 Retry Logic</text>
<text x="595" y="565" class="component-text">Exponential Backoff: 1s, 2s, 4s</text>
<rect x="880" y="540" width="270" height="35" fill="#ffffff" rx="3"/>
<text x="895" y="554" class="component-title">📝 Logging System</text>
<text x="895" y="565" class="component-text">Console (Emoji-prefixed)</text>
</g>
<!-- LAYER 2.5: CONCURRENCY (CORE INNOVATION 1) -->
<g id="layer-2-5">
<text x="60" y="613" class="section-label">⭐ LAYER 2.5 · CONCURRENCY CONTROL (CORE INNOVATION #1)</text>
<rect x="50" y="620" width="1120" height="110" fill="url(#grad-highlight)" rx="5" class="shadow" stroke="#FFD700" stroke-width="2"/>
<rect x="70" y="635" width="340" height="80" fill="#ffffff" rx="3"/>
<text x="85" y="649" class="component-title">🎯 Worker Pool Orchestrator</text>
<text x="85" y="661" class="component-text">• Concurrency: LLM_CONCURRENCY = 2</text>
<text x="85" y="672" class="component-text">• Rate Limit: LLM_GAP_MS = 500ms</text>
<text x="85" y="683" class="component-text">• Timeout: 150s per request</text>
<text x="85" y="694" class="component-text">• Shared index for parallel workers</text>
<text x="85" y="705" class="note-text">Configurable concurrency control</text>
<rect x="430" y="635" width="340" height="80" fill="#ffffff" rx="3"/>
<text x="445" y="649" class="component-title">📊 Performance Metrics</text>
<text x="445" y="661" class="component-text">• Throughput: ~0.13 files/s (2 workers)</text>
<text x="445" y="672" class="component-text">• Capacity: 40 files/batch</text>
<text x="445" y="683" class="component-text">• File Size: 200KB max</text>
<text x="445" y="694" class="component-text">• Progress: Update every 10 files</text>
<text x="445" y="705" class="note-text">Rate limit avoidance strategy</text>
<rect x="790" y="635" width="360" height="80" fill="#ffffff" rx="3"/>
<text x="805" y="649" class="component-title">📁 File Filtering Engine</text>
<text x="805" y="661" class="component-text">• Supported: .js, .ts, .py, .java, .go, .cpp, .c, etc.</text>
<text x="805" y="672" class="component-text">• Excluded: node_modules, .git, dist, build, vendor</text>
<text x="805" y="683" class="component-text">• Size Check: 200KB per file limit</text>
<text x="805" y="694" class="component-text">• Type Check: Text-based source only</text>
<text x="805" y="705" class="note-text">Smart filtering for efficient processing</text>
</g>
<!-- LAYER 3: LLM ABSTRACTION (CORE INNOVATION 2) -->
<g id="layer-3">
<text x="60" y="753" class="section-label">⭐ LAYER 3 · LLM ABSTRACTION (CORE INNOVATION #2)</text>
<rect x="50" y="760" width="1120" height="180" fill="url(#grad-accent)" rx="5" class="shadow" stroke="#FFD700" stroke-width="2"/>
<rect x="70" y="775" width="320" height="75" fill="#ffffff" rx="3"/>
<text x="85" y="789" class="component-title">🔀 LLM Service Layer</text>
<text x="85" y="801" class="component-text">• Unified Interface (LLMService)</text>
<text x="85" y="812" class="component-text">• Factory Pattern (llm-factory.ts)</text>
<text x="85" y="823" class="component-text">• Config Manager (env.ts)</text>
<text x="85" y="834" class="component-text">• Provider-agnostic Design</text>
<text x="85" y="845" class="note-text">Switch providers without code change</text>
<rect x="410" y="775" width="320" height="75" fill="#ffffff" rx="3"/>
<text x="425" y="789" class="component-title">🛠️ BaseLLMAdapter</text>
<text x="425" y="801" class="component-text">• Error Classification (401/403/429/500+)</text>
<text x="425" y="812" class="component-text">• Retry Logic (Exponential Backoff)</text>
<text x="425" y="823" class="component-text">• Timeout Protection (Promise.race)</text>
<text x="425" y="834" class="component-text">• Abstract Base for All Adapters</text>
<text x="425" y="845" class="note-text">Consistent error handling across providers</text>
<rect x="750" y="775" width="400" height="30" fill="#FFD700" rx="3"/>
<text x="950" y="795" text-anchor="middle" class="component-title" font-size="12">11 Provider Adapters</text>
<rect x="750" y="815" width="400" height="120" fill="#ffffff" rx="3"/>
<text x="765" y="829" class="component-title">☁️ Cloud Providers (10)</text>
<text x="765" y="841" class="component-text">• Google Gemini (gemini-2.5-flash)</text>
<text x="765" y="852" class="component-text">• OpenAI GPT (gpt-4o-mini)</text>
<text x="765" y="863" class="component-text">• Anthropic Claude (claude-3-5-sonnet)</text>
<text x="765" y="874" class="component-text">• Alibaba Qwen • DeepSeek • Zhipu AI</text>
<text x="765" y="885" class="component-text">• Moonshot Kimi • Baidu ERNIE</text>
<text x="765" y="896" class="component-text">• MiniMax • Bytedance Doubao</text>
<text x="765" y="907" class="note-text">HTTPS with TLS 1.3 encryption</text>
<text x="765" y="918" class="note-text">Custom endpoints &amp; proxy support</text>
<rect x="70" y="860" width="320" height="70" fill="#ffffff" rx="3" stroke="#16a34a" stroke-width="2"/>
<text x="85" y="874" class="component-title" fill="#16a34a">🔒 Ollama (Local Model)</text>
<text x="85" y="886" class="component-text">• Models: llama3, codellama, qwen2.5</text>
<text x="85" y="897" class="component-text">• Endpoint: localhost:11434/v1</text>
<text x="85" y="908" class="component-text">• No External API Calls</text>
<text x="85" y="919" class="note-text" fill="#16a34a">✅ Privacy Mode: Local processing only</text>
<rect x="410" y="860" width="320" height="70" fill="#ffffff" rx="3"/>
<text x="425" y="874" class="component-title">⚙️ Configuration Manager</text>
<text x="425" y="886" class="component-text">• API Keys: Environment Variables</text>
<text x="425" y="897" class="component-text">• Base URLs: Custom Endpoints</text>
<text x="425" y="908" class="component-text">• Timeout: VITE_LLM_TIMEOUT = 150s</text>
<text x="425" y="919" class="note-text">Flexible provider configuration</text>
</g>
<!-- LAYER 4: DATA PERSISTENCE -->
<g id="layer-4">
<text x="60" y="963" class="section-label">LAYER 4 · DATA PERSISTENCE (Supabase BaaS)</text>
<rect x="50" y="970" width="1120" height="110" fill="url(#grad-main)" rx="5" class="shadow"/>
<rect x="70" y="985" width="530" height="80" fill="#ffffff" rx="3"/>
<text x="85" y="999" class="component-title">🐘 PostgreSQL Database</text>
<text x="85" y="1011" class="component-text">• profiles: users, roles, permissions, system preferences</text>
<text x="85" y="1022" class="component-text">• projects: repositories, languages, team members, metadata</text>
<text x="85" y="1033" class="component-text">• audit_tasks: status, progress, quality metrics, scan results</text>
<text x="85" y="1044" class="component-text">• audit_issues: vulnerabilities, severity, XAI explanations</text>
<text x="85" y="1055" class="note-text">Row-Level Security (RLS) + Indexes for performance</text>
<rect x="620" y="985" width="260" height="37" fill="#ffffff" rx="3"/>
<text x="635" y="999" class="component-title">🔐 Authentication</text>
<text x="635" y="1011" class="component-text">JWT Tokens + Session Mgmt</text>
<rect x="900" y="985" width="250" height="37" fill="#ffffff" rx="3"/>
<text x="915" y="999" class="component-title">📦 Object Storage</text>
<text x="915" y="1011" class="component-text">ZIP Uploads &amp; Artifacts</text>
<rect x="620" y="1032" width="260" height="33" fill="#ffffff" rx="3"/>
<text x="635" y="1046" class="component-title">⚡ Realtime Sync</text>
<text x="635" y="1057" class="note-text">WebSocket-based Live Updates</text>
<rect x="900" y="1032" width="250" height="33" fill="#ffffff" rx="3"/>
<text x="915" y="1046" class="component-title">🛡️ Row-Level Security</text>
<text x="915" y="1057" class="note-text">RBAC Enforcement at DB Level</text>
</g>
<!-- LAYER 5: EXTERNAL SERVICES -->
<g id="layer-5">
<text x="60" y="1103" class="section-label">LAYER 5 · EXTERNAL SERVICES</text>
<rect x="50" y="1110" width="1120" height="75" fill="url(#grad-secondary)" rx="5" class="shadow"/>
<rect x="70" y="1125" width="320" height="45" fill="#ffffff" rx="3"/>
<text x="85" y="1139" class="component-title">🔗 Version Control Systems</text>
<text x="85" y="1151" class="component-text">GitHub API • GitLab API</text>
<text x="85" y="1162" class="note-text">Repository metadata and branch info</text>
<rect x="410" y="1125" width="520" height="45" fill="#ffffff" rx="3"/>
<text x="425" y="1139" class="component-title">🧠 Cloud LLM Provider APIs</text>
<text x="425" y="1151" class="component-text">Gemini • OpenAI • Claude • Qwen • DeepSeek • Zhipu • Moonshot • Baidu • MiniMax • Doubao</text>
<text x="425" y="1162" class="note-text">HTTPS communication with TLS 1.3 encryption</text>
<rect x="950" y="1125" width="200" height="45" fill="#ffffff" rx="3" stroke="#16a34a" stroke-width="2"/>
<text x="965" y="1139" class="component-title" fill="#16a34a">🔒 Ollama (Local)</text>
<text x="965" y="1151" class="component-text">Local Model Processing</text>
<text x="965" y="1162" class="note-text" fill="#16a34a">No External Communication</text>
</g>
<!-- DATA FLOW ARROWS -->
<g id="data-flows">
<!-- Users to Presentation -->
<path d="M 240,170 L 240,320" class="arrow" stroke-width="2.5"/>
<path d="M 600,170 L 600,320" class="arrow" stroke-width="2.5"/>
<path d="M 972,170 L 972,320" class="arrow" stroke-width="2.5"/>
<!-- Infrastructure to Presentation -->
<path d="M 600,290 L 600,320" class="arrow" stroke-width="2"/>
<!-- Presentation to Application -->
<path d="M 600,445 L 600,475" class="arrow" stroke-width="2.5"/>
<!-- Application to Concurrency (Critical) -->
<path d="M 600,590 L 600,620" class="arrow-thick"/>
<!-- Concurrency to LLM (Critical) -->
<path d="M 600,730 L 600,760" class="arrow-thick"/>
<!-- LLM to Data -->
<path d="M 600,940 L 600,970" class="arrow-data" stroke-width="2.5"/>
<!-- LLM to External -->
<path d="M 800,940 L 800,1110" class="arrow" stroke-width="2"/>
<!-- Data Feedback Loop -->
<path d="M 70,970 Q 20,650 70,445" class="arrow-data" stroke-dasharray="5,5"/>
</g>
</svg>