Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Cyclone Prediction Web App Architecture</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 20px; | |
| background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| } | |
| .diagram-container { | |
| background: white; | |
| padding: 40px; | |
| border-radius: 16px; | |
| box-shadow: 0 20px 60px rgba(0,0,0,0.3); | |
| max-width: 1500px; | |
| } | |
| h1 { | |
| text-align: center; | |
| color: #1e3c72; | |
| margin-bottom: 10px; | |
| font-size: 28px; | |
| } | |
| .subtitle { | |
| text-align: center; | |
| color: #666; | |
| margin-bottom: 30px; | |
| font-size: 14px; | |
| } | |
| svg { | |
| width: 100%; | |
| height: auto; | |
| } | |
| .box { | |
| stroke-width: 2.5; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .box:hover { | |
| filter: brightness(0.95); | |
| transform: scale(1.02); | |
| } | |
| text { | |
| pointer-events: none; | |
| user-select: none; | |
| } | |
| .title-text { | |
| font-size: 14px; | |
| font-weight: bold; | |
| } | |
| .desc-text { | |
| font-size: 10px; | |
| } | |
| .arrow { | |
| fill: none; | |
| stroke: #555; | |
| stroke-width: 2; | |
| marker-end: url(#arrowhead); | |
| } | |
| .arrow-labeled { | |
| fill: none; | |
| stroke: #2196F3; | |
| stroke-width: 2.5; | |
| marker-end: url(#arrowhead-blue); | |
| } | |
| .layer-label { | |
| font-size: 13px; | |
| font-weight: bold; | |
| fill: #1e3c72; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="diagram-container"> | |
| <h1>🌀 Cyclone Prediction & Resource Optimization Web Application</h1> | |
| <p class="subtitle">End-to-End Architecture Diagram</p> | |
| <svg viewBox="0 0 1400 1800" xmlns="http://www.w3.org/2000/svg"> | |
| <defs> | |
| <marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto"> | |
| <polygon points="0 0, 10 3, 0 6" fill="#555"/> | |
| </marker> | |
| <marker id="arrowhead-blue" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto"> | |
| <polygon points="0 0, 10 3, 0 6" fill="#2196F3"/> | |
| </marker> | |
| <filter id="shadow"> | |
| <feDropShadow dx="2" dy="2" stdDeviation="3" flood-opacity="0.3"/> | |
| </filter> | |
| </defs> | |
| <!-- Title --> | |
| <rect x="0" y="0" width="1400" height="50" fill="#1e3c72" rx="8"/> | |
| <text x="700" y="32" text-anchor="middle" style="font-size: 20px; font-weight: bold; fill: white;"> | |
| WEB APPLICATION ARCHITECTURE | |
| </text> | |
| <!-- CLIENT LAYER --> | |
| <text x="50" y="85" class="layer-label">① CLIENT LAYER (Frontend)</text> | |
| <rect x="50" y="95" width="1300" height="140" fill="#e3f2fd" stroke="#1976d2" class="box" rx="8" filter="url(#shadow)"/> | |
| <rect x="100" y="120" width="380" height="90" fill="#fff" stroke="#1976d2" class="box" rx="6"/> | |
| <text x="290" y="145" text-anchor="middle" class="title-text" style="font-size: 16px; fill: #1976d2;">🌐 Web Browser Interface</text> | |
| <text x="290" y="165" text-anchor="middle" class="desc-text">React/Vue.js SPA</text> | |
| <text x="290" y="180" text-anchor="middle" class="desc-text">• Interactive maps (Leaflet/Mapbox)</text> | |
| <text x="290" y="195" text-anchor="middle" class="desc-text">• Real-time dashboards & charts</text> | |
| <rect x="510" y="120" width="380" height="90" fill="#fff" stroke="#1976d2" class="box" rx="6"/> | |
| <text x="700" y="145" text-anchor="middle" class="title-text" style="font-size: 16px; fill: #1976d2;">📱 Mobile App</text> | |
| <text x="700" y="165" text-anchor="middle" class="desc-text">React Native/Flutter</text> | |
| <text x="700" y="180" text-anchor="middle" class="desc-text">• Push notifications</text> | |
| <text x="700" y="195" text-anchor="middle" class="desc-text">• Offline mode with sync</text> | |
| <rect x="920" y="120" width="380" height="90" fill="#fff" stroke="#1976d2" class="box" rx="6"/> | |
| <text x="1110" y="145" text-anchor="middle" class="title-text" style="font-size: 16px; fill: #1976d2;">⚙️ Admin Portal</text> | |
| <text x="1110" y="165" text-anchor="middle" class="desc-text">Resource management UI</text> | |
| <text x="1110" y="180" text-anchor="middle" class="desc-text">• Model monitoring</text> | |
| <text x="1110" y="195" text-anchor="middle" class="desc-text">• System configuration</text> | |
| <!-- API GATEWAY --> | |
| <text x="50" y="280" class="layer-label">② API GATEWAY & LOAD BALANCING</text> | |
| <rect x="50" y="290" width="1300" height="100" fill="#fff3e0" stroke="#f57c00" class="box" rx="8" filter="url(#shadow)"/> | |
| <rect x="100" y="315" width="280" height="50" fill="#fff" stroke="#f57c00" class="box" rx="6"/> | |
| <text x="240" y="343" text-anchor="middle" class="title-text">Load Balancer (ALB/NGINX)</text> | |
| <rect x="410" y="315" width="280" height="50" fill="#fff" stroke="#f57c00" class="box" rx="6"/> | |
| <text x="550" y="335" text-anchor="middle" class="title-text">API Gateway (Kong/AWS)</text> | |
| <text x="550" y="352" text-anchor="middle" class="desc-text">Auth, Rate Limiting, Routing</text> | |
| <rect x="720" y="315" width="280" height="50" fill="#fff" stroke="#f57c00" class="box" rx="6"/> | |
| <text x="860" y="335" text-anchor="middle" class="title-text">WebSocket Server</text> | |
| <text x="860" y="352" text-anchor="middle" class="desc-text">Real-time updates</text> | |
| <rect x="1030" y="315" width="280" height="50" fill="#fff" stroke="#f57c00" class="box" rx="6"/> | |
| <text x="1170" y="335" text-anchor="middle" class="title-text">CDN (CloudFront)</text> | |
| <text x="1170" y="352" text-anchor="middle" class="desc-text">Static assets</text> | |
| <!-- BACKEND SERVICES --> | |
| <text x="50" y="435" class="layer-label">③ BACKEND SERVICES (Microservices in Kubernetes)</text> | |
| <rect x="50" y="445" width="1300" height="200" fill="#f3e5f5" stroke="#7b1fa2" class="box" rx="8" filter="url(#shadow)"/> | |
| <rect x="80" y="470" width="200" height="75" fill="#fff" stroke="#7b1fa2" class="box" rx="6"/> | |
| <text x="180" y="490" text-anchor="middle" class="title-text">User Service</text> | |
| <text x="180" y="508" text-anchor="middle" class="desc-text">Auth (JWT/OAuth)</text> | |
| <text x="180" y="522" text-anchor="middle" class="desc-text">Profile mgmt</text> | |
| <text x="180" y="536" text-anchor="middle" class="desc-text">FastAPI/Node.js</text> | |
| <rect x="300" y="470" width="200" height="75" fill="#fff" stroke="#7b1fa2" class="box" rx="6"/> | |
| <text x="400" y="490" text-anchor="middle" class="title-text">Prediction Service</text> | |
| <text x="400" y="508" text-anchor="middle" class="desc-text">ML model inference</text> | |
| <text x="400" y="522" text-anchor="middle" class="desc-text">Track/Intensity API</text> | |
| <text x="400" y="536" text-anchor="middle" class="desc-text">FastAPI + Celery</text> | |
| <rect x="520" y="470" width="200" height="75" fill="#fff" stroke="#7b1fa2" class="box" rx="6"/> | |
| <text x="620" y="490" text-anchor="middle" class="title-text">Data Service</text> | |
| <text x="620" y="508" text-anchor="middle" class="desc-text">Historical queries</text> | |
| <text x="620" y="522" text-anchor="middle" class="desc-text">Real-time feeds</text> | |
| <text x="620" y="536" text-anchor="middle" class="desc-text">GraphQL/REST</text> | |
| <rect x="740" y="470" width="200" height="75" fill="#fff" stroke="#7b1fa2" class="box" rx="6"/> | |
| <text x="840" y="490" text-anchor="middle" class="title-text">Resource Service</text> | |
| <text x="840" y="508" text-anchor="middle" class="desc-text">Optimization engine</text> | |
| <text x="840" y="522" text-anchor="middle" class="desc-text">Allocation API</text> | |
| <text x="840" y="536" text-anchor="middle" class="desc-text">Python (OR-Tools)</text> | |
| <rect x="960" y="470" width="200" height="75" fill="#fff" stroke="#7b1fa2" class="box" rx="6"/> | |
| <text x="1060" y="490" text-anchor="middle" class="title-text">Alert Service</text> | |
| <text x="1060" y="508" text-anchor="middle" class="desc-text">Notification engine</text> | |
| <text x="1060" y="522" text-anchor="middle" class="desc-text">SMS/Email/Push</text> | |
| <text x="1060" y="536" text-anchor="middle" class="desc-text">Twilio/FCM</text> | |
| <rect x="1180" y="470" width="160" height="75" fill="#fff" stroke="#7b1fa2" class="box" rx="6"/> | |
| <text x="1260" y="495" text-anchor="middle" class="title-text">Map Service</text> | |
| <text x="1260" y="513" text-anchor="middle" class="desc-text">GIS processing</text> | |
| <text x="1260" y="527" text-anchor="middle" class="desc-text">Tile generation</text> | |
| <text x="1260" y="541" text-anchor="middle" class="desc-text">PostGIS</text> | |
| <rect x="80" y="560" width="250" height="65" fill="#fff" stroke="#7b1fa2" class="box" rx="6"/> | |
| <text x="205" y="580" text-anchor="middle" class="title-text">Analytics Service</text> | |
| <text x="205" y="598" text-anchor="middle" class="desc-text">Historical analysis & reporting</text> | |
| <text x="205" y="612" text-anchor="middle" class="desc-text">Pandas/Spark processing</text> | |
| <rect x="350" y="560" width="250" height="65" fill="#fff" stroke="#7b1fa2" class="box" rx="6"/> | |
| <text x="475" y="580" text-anchor="middle" class="title-text">Batch Processing</text> | |
| <text x="475" y="598" text-anchor="middle" class="desc-text">Scheduled model retraining</text> | |
| <text x="475" y="612" text-anchor="middle" class="desc-text">Celery/Airflow workers</text> | |
| <rect x="620" y="560" width="250" height="65" fill="#fff" stroke="#7b1fa2" class="box" rx="6"/> | |
| <text x="745" y="580" text-anchor="middle" class="title-text">Search Service</text> | |
| <text x="745" y="598" text-anchor="middle" class="desc-text">Historical cyclone search</text> | |
| <text x="745" y="612" text-anchor="middle" class="desc-text">Elasticsearch</text> | |
| <rect x="890" y="560" width="450" height="65" fill="#fff" stroke="#7b1fa2" class="box" rx="6"/> | |
| <text x="1115" y="580" text-anchor="middle" class="title-text">External Integration Service</text> | |
| <text x="1115" y="598" text-anchor="middle" class="desc-text">NOAA, JTWC, IMD API connectors | Webhook handlers</text> | |
| <text x="1115" y="612" text-anchor="middle" class="desc-text">Data ingestion pipelines (Kafka consumers)</text> | |
| <!-- ML LAYER --> | |
| <text x="50" y="690" class="layer-label">④ ML/AI PREDICTION LAYER</text> | |
| <rect x="50" y="700" width="1300" height="160" fill="#ffebee" stroke="#c62828" class="box" rx="8" filter="url(#shadow)"/> | |
| <rect x="80" y="725" width="290" height="110" fill="#fff" stroke="#c62828" class="box" rx="6"/> | |
| <text x="225" y="745" text-anchor="middle" class="title-text" style="font-size: 15px;">🧠 ML Model Serving</text> | |
| <text x="225" y="765" text-anchor="middle" class="desc-text">TensorFlow Serving</text> | |
| <text x="225" y="780" text-anchor="middle" class="desc-text">PyTorch/TorchServe</text> | |
| <text x="225" y="795" text-anchor="middle" class="desc-text">NVIDIA Triton Inference</text> | |
| <text x="225" y="810" text-anchor="middle" class="desc-text">GPU-accelerated inference</text> | |
| <text x="225" y="825" text-anchor="middle" class="desc-text" style="font-style: italic;">Models: Genesis, Track, Intensity</text> | |
| <rect x="390" y="725" width="290" height="110" fill="#fff" stroke="#c62828" class="box" rx="6"/> | |
| <text x="535" y="745" text-anchor="middle" class="title-text" style="font-size: 15px;">📊 Feature Store</text> | |
| <text x="535" y="765" text-anchor="middle" class="desc-text">Feast/Tecton</text> | |
| <text x="535" y="780" text-anchor="middle" class="desc-text">Online feature serving</text> | |
| <text x="535" y="795" text-anchor="middle" class="desc-text">SST, wind shear, pressure</text> | |
| <text x="535" y="810" text-anchor="middle" class="desc-text">Environmental indices</text> | |
| <text x="535" y="825" text-anchor="middle" class="desc-text">Redis cache for low-latency</text> | |
| <rect x="700" y="725" width="290" height="110" fill="#fff" stroke="#c62828" class="box" rx="6"/> | |
| <text x="845" y="745" text-anchor="middle" class="title-text" style="font-size: 15px;">🔄 Model Registry</text> | |
| <text x="845" y="765" text-anchor="middle" class="desc-text">MLflow/DVC</text> | |
| <text x="845" y="780" text-anchor="middle" class="desc-text">Version control</text> | |
| <text x="845" y="795" text-anchor="middle" class="desc-text">A/B testing</text> | |
| <text x="845" y="810" text-anchor="middle" class="desc-text">Model lineage tracking</text> | |
| <text x="845" y="825" text-anchor="middle" class="desc-text">Automated deployment</text> | |
| <rect x="1010" y="725" width="300" height="110" fill="#fff" stroke="#c62828" class="box" rx="6"/> | |
| <text x="1160" y="745" text-anchor="middle" class="title-text" style="font-size: 15px;">⚡ Optimization Engine</text> | |
| <text x="1160" y="765" text-anchor="middle" class="desc-text">Google OR-Tools/Gurobi</text> | |
| <text x="1160" y="780" text-anchor="middle" class="desc-text">Resource allocation solver</text> | |
| <text x="1160" y="795" text-anchor="middle" class="desc-text">Route optimization (VRP)</text> | |
| <text x="1160" y="810" text-anchor="middle" class="desc-text">Multi-objective constraints</text> | |
| <text x="1160" y="825" text-anchor="middle" class="desc-text">Real-time recomputation</text> | |
| <!-- MESSAGE BROKER --> | |
| <text x="50" y="905" class="layer-label">⑤ MESSAGE BROKER & EVENT STREAMING</text> | |
| <rect x="50" y="915" width="1300" height="90" fill="#e8f5e9" stroke="#2e7d32" class="box" rx="8" filter="url(#shadow)"/> | |
| <rect x="100" y="940" width="380" height="45" fill="#fff" stroke="#2e7d32" class="box" rx="6"/> | |
| <text x="290" y="963" text-anchor="middle" class="title-text">Apache Kafka / RabbitMQ</text> | |
| <text x="290" y="978" text-anchor="middle" class="desc-text">Event streaming for real-time data ingestion</text> | |
| <rect x="510" y="940" width="380" height="45" fill="#fff" stroke="#2e7d32" class="box" rx="6"/> | |
| <text x="700" y="963" text-anchor="middle" class="title-text">Redis Pub/Sub</text> | |
| <text x="700" y="978" text-anchor="middle" class="desc-text">Real-time notifications & caching</text> | |
| <rect x="920" y="940" width="380" height="45" fill="#fff" stroke="#2e7d32" class="box" rx="6"/> | |
| <text x="1110" y="963" text-anchor="middle" class="title-text">Task Queue (Celery)</text> | |
| <text x="1110" y="978" text-anchor="middle" class="desc-text">Async job processing</text> | |
| <!-- DATA LAYER --> | |
| <text x="50" y="1050" class="layer-label">⑥ DATA STORAGE LAYER</text> | |
| <rect x="50" y="1060" width="1300" height="140" fill="#fff8e1" stroke="#f57f00" class="box" rx="8" filter="url(#shadow)"/> | |
| <rect x="80" y="1085" width="250" height="90" fill="#fff" stroke="#f57f00" class="box" rx="6"/> | |
| <text x="205" y="1105" text-anchor="middle" class="title-text">PostgreSQL + PostGIS</text> | |
| <text x="205" y="1123" text-anchor="middle" class="desc-text">Users, predictions, metadata</text> | |
| <text x="205" y="1138" text-anchor="middle" class="desc-text">Geospatial data</text> | |
| <text x="205" y="1153" text-anchor="middle" class="desc-text">Resource allocations</text> | |
| <text x="205" y="1168" text-anchor="middle" class="desc-text">Primary: RDS Multi-AZ</text> | |
| <rect x="350" y="1085" width="250" height="90" fill="#fff" stroke="#f57f00" class="box" rx="6"/> | |
| <text x="475" y="1105" text-anchor="middle" class="title-text">Time-Series DB</text> | |
| <text x="475" y="1123" text-anchor="middle" class="desc-text">InfluxDB/TimescaleDB</text> | |
| <text x="475" y="1138" text-anchor="middle" class="desc-text">Sensor data streams</text> | |
| <text x="475" y="1153" text-anchor="middle" class="desc-text">Wind, pressure, SST</text> | |
| <text x="475" y="1168" text-anchor="middle" class="desc-text">High-frequency metrics</text> | |
| <rect x="620" y="1085" width="250" height="90" fill="#fff" stroke="#f57f00" class="box" rx="6"/> | |
| <text x="745" y="1105" text-anchor="middle" class="title-text">Object Storage (S3)</text> | |
| <text x="745" y="1123" text-anchor="middle" class="desc-text">Satellite imagery</text> | |
| <text x="745" y="1138" text-anchor="middle" class="desc-text">Model artifacts</text> | |
| <text x="745" y="1153" text-anchor="middle" class="desc-text">Raw data archives</text> | |
| <text x="745" y="1168" text-anchor="middle" class="desc-text">Backups & logs</text> | |
| <rect x="890" y="1085" width="220" height="90" fill="#fff" stroke="#f57f00" class="box" rx="6"/> | |
| <text x="1000" y="1105" text-anchor="middle" class="title-text">MongoDB</text> | |
| <text x="1000" y="1123" text-anchor="middle" class="desc-text">Document store</text> | |
| <text x="1000" y="1138" text-anchor="middle" class="desc-text">Alerts history</text> | |
| <text x="1000" y="1153" text-anchor="middle" class="desc-text">User preferences</text> | |
| <text x="1000" y="1168" text-anchor="middle" class="desc-text">Logs & audit trails</text> | |
| <rect x="1130" y="1085" width="210" height="90" fill="#fff" stroke="#f57f00" class="box" rx="6"/> | |
| <text x="1235" y="1105" text-anchor="middle" class="title-text">Cache Layer</text> | |
| <text x="1235" y="1123" text-anchor="middle" class="desc-text">Redis/Memcached</text> | |
| <text x="1235" y="1138" text-anchor="middle" class="desc-text">Session store</text> | |
| <text x="1235" y="1153" text-anchor="middle" class="desc-text">API responses</text> | |
| <text x="1235" y="1168" text-anchor="middle" class="desc-text">Feature cache</text> | |
| <!-- EXTERNAL INTEGRATIONS --> | |
| <text x="50" y="1245" class="layer-label">⑦ EXTERNAL DATA SOURCES & INTEGRATIONS</text> | |
| <rect x="50" y="1255" width="1300" height="100" fill="#fce4ec" stroke="#880e4f" class="box" rx="8" filter="url(#shadow)"/> | |
| <rect x="80" y="1280" width="180" height="55" fill="#fff" stroke="#880e4f" class="box" rx="6"/> | |
| <text x="170" y="1302" text-anchor="middle" class="title-text">NOAA/NHC</text> | |
| <text x="170" y="1318" text-anchor="middle" class="desc-text">API feeds</text> | |
| <text x="170" y="1332" text-anchor="middle" class="desc-text">FTP servers</text> | |
| <rect x="280" y="1280" width="180" height="55" fill="#fff" stroke="#880e4f" class="box" rx="6"/> | |
| <text x="370" y="1302" text-anchor="middle" class="title-text">JTWC</text> | |
| <text x="370" y="1318" text-anchor="middle" class="desc-text">Forecast data</text> | |
| <text x="370" y="1332" text-anchor="middle" class="desc-text">Track updates</text> | |
| <rect x="480" y="1280" width="180" height="55" fill="#fff" stroke="#880e4f" class="box" rx="6"/> | |
| <text x="570" y="1302" text-anchor="middle" class="title-text">Satellite APIs</text> | |
| <text x="570" y="1318" text-anchor="middle" class="desc-text">GOES, Himawari</text> | |
| <text x="570" y="1332" text-anchor="middle" class="desc-text">Imagery streams</text> | |
| <rect x="680" y="1280" width="180" height="55" fill="#fff" stroke="#880e4f" class="box" rx="6"/> | |
| <text x="770" y="1302" text-anchor="middle" class="title-text">Ocean Buoys</text> | |
| <text x="770" y="1318" text-anchor="middle" class="desc-text">NDBC data</text> | |
| <text x="770" y="1332" text-anchor="middle" class="desc-text">Real-time sensors</text> | |
| <rect x="880" y="1280" width="180" height="55" fill="#fff" stroke="#880e4f" class="box" rx="6"/> | |
| <text x="970" y="1302" text-anchor="middle" class="title-text">Weather APIs</text> | |
| <text x="970" y="1318" text-anchor="middle" class="desc-text">OpenWeather</text> | |
| <text x="970" y="1332" text-anchor="middle" class="desc-text">ECMWF, GFS</text> | |
| <rect x="1080" y="1280" width="250" height="55" fill="#fff" stroke="#880e4f" class="box" rx="6"/> | |
| <text x="1205" y="1302" text-anchor="middle" class="title-text">SMS/Email Providers</text> | |
| <text x="1205" y="1318" text-anchor="middle" class="desc-text">Twilio, SendGrid, SNS</text> | |
| <text x="1205" y="1332" text-anchor="middle" class="desc-text">Firebase Cloud Messaging</text> | |
| <!-- MONITORING --> | |
| <text x="50" y="1400" class="layer-label">⑧ MONITORING, LOGGING & DEVOPS</text> | |
| <rect x="50" y="1410" width="1300" height="140" fill="#eceff1" stroke="#37474f" class="box" rx="8" filter="url(#shadow)"/> | |
| <rect x="80" y="1435" width="220" height="90" fill="#fff" stroke="#37474f" class="box" rx="6"/> | |
| <text x="190" y="1455" text-anchor="middle" class="title-text">Monitoring</text> | |
| <text x="190" y="1473" text-anchor="middle" class="desc-text">Prometheus</text> | |
| <text x="190" y="1488" text-anchor="middle" class="desc-text">Grafana dashboards</text> | |
| <text x="190" y="1503" text-anchor="middle" class="desc-text">Alert Manager</text> | |
| <text x="190" y="1518" text-anchor="middle" class="desc-text">Uptime monitoring</text> | |
| <rect x="320" y="1435" width="220" height="90" fill="#fff" stroke="#37474f" class="box" rx="6"/> | |
| <text x="430" y="1455" text-anchor="middle" class="title-text">Logging</text> | |
| <text x="430" y="1473" text-anchor="middle" class="desc-text">ELK Stack</text> | |
| <text x="430" y="1488" text-anchor="middle" class="desc-text">(Elasticsearch, Logstash)</text> | |
| <text x="430" y="1503" text-anchor="middle" class="desc-text">Kibana visualization</text> | |
| <text x="430" y="1518" text-anchor="middle" class="desc-text">Centralized logs</text> | |
| <rect x="560" y="1435" width="220" height="90" fill="#fff" stroke="#37474f" class="box" rx="6"/> | |
| <text x="670" y="1455" text-anchor="middle" class="title-text">CI/CD Pipeline</text> | |
| <text x="670" y="1473" text-anchor="middle" class="desc-text">GitHub Actions</text> | |
| <text x="670" y="1488" text-anchor="middle" class="desc-text">Jenkins</text> | |
| </svg> | |
| </p> | |
| </h1> | |
| </div> | |
| </body> | |
| </html> | |