Files
ANSCMSCORE/architecture-diagram.html
2026-03-28 12:05:34 +11:00

637 lines
21 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ANSCloud Integration Architecture</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'DM Sans', sans-serif;
background: #0a0e1a;
color: #e0e4ef;
min-height: 100vh;
padding: 30px 20px;
overflow-x: hidden;
}
.page-title {
text-align: center;
margin-bottom: 40px;
}
.page-title h1 {
font-family: 'JetBrains Mono', monospace;
font-size: 22px;
font-weight: 700;
color: #fff;
letter-spacing: -0.5px;
margin-bottom: 6px;
}
.page-title .sub {
font-size: 13px;
color: #6b7394;
font-weight: 400;
}
/* ── Main Architecture ── */
.arch-container {
max-width: 1100px;
margin: 0 auto 50px;
position: relative;
}
/* ── Tier Section ── */
.tier-section {
margin-bottom: 30px;
position: relative;
}
.tier-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.tier-badge {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 4px;
letter-spacing: 0.5px;
white-space: nowrap;
}
.tier-1 .tier-badge { background: #1a3a2a; color: #4ade80; border: 1px solid #2d5a3e; }
.tier-2 .tier-badge { background: #1a2a4a; color: #60a5fa; border: 1px solid #2d4a6e; }
.tier-3 .tier-badge { background: #2a1a3a; color: #c084fc; border: 1px solid #4a2d6e; }
.tier-label {
font-size: 15px;
font-weight: 600;
color: #c0c8e0;
}
.tier-desc {
font-size: 12px;
color: #6b7394;
margin-left: auto;
font-style: italic;
}
/* ── Flow Row ── */
.flow-row {
display: flex;
align-items: center;
gap: 0;
padding: 16px 20px;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.tier-1 .flow-row { background: linear-gradient(135deg, #0d1a14 0%, #0f1820 100%); border: 1px solid #1a3a2a; }
.tier-2 .flow-row { background: linear-gradient(135deg, #0d1420 0%, #0f1828 100%); border: 1px solid #1a2a4a; }
.tier-3 .flow-row { background: linear-gradient(135deg, #14101e 0%, #18122a 100%); border: 1px solid #2a1a3a; }
/* ── Boxes ── */
.box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 12px 16px;
border-radius: 8px;
min-width: 120px;
text-align: center;
position: relative;
flex-shrink: 0;
}
.box-icon {
font-size: 20px;
margin-bottom: 5px;
}
.box-title {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 700;
margin-bottom: 3px;
white-space: nowrap;
}
.box-sub {
font-size: 10px;
color: #6b7394;
line-height: 1.3;
}
/* Box themes */
.box-partner {
background: #141824;
border: 1px solid #2a3050;
min-width: 150px;
}
.box-partner .box-title { color: #94a3c8; }
.box-api {
background: linear-gradient(145deg, #1a3a2a, #153020);
border: 1px solid #2d5a3e;
}
.box-api .box-title { color: #4ade80; }
.box-protocol {
background: linear-gradient(145deg, #1a2a4a, #152040);
border: 1px solid #2d4a6e;
}
.box-protocol .box-title { color: #60a5fa; }
.box-lib {
background: linear-gradient(145deg, #2a1a3a, #201530);
border: 1px solid #4a2d6e;
}
.box-lib .box-title { color: #c084fc; }
.box-broker {
background: linear-gradient(145deg, #2a2010, #201810);
border: 1px solid #5a4a2d;
}
.box-broker .box-title { color: #fbbf24; }
.box-device {
background: linear-gradient(145deg, #1a1418, #201820);
border: 1px solid #4a3040;
}
.box-device .box-title { color: #f472b6; }
.box-gateway {
background: linear-gradient(145deg, #1a2820, #152218);
border: 1px solid #2d5a3e;
}
.box-gateway .box-title { color: #34d399; }
/* ── Arrows ── */
.arrow {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 8px;
flex-shrink: 0;
}
.arrow-line {
font-family: 'JetBrains Mono', monospace;
font-size: 14px;
color: #3a4060;
letter-spacing: -2px;
white-space: nowrap;
}
.arrow-label {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
font-weight: 600;
white-space: nowrap;
margin-top: 2px;
}
.tier-1 .arrow-label { color: #4ade80; }
.tier-2 .arrow-label { color: #60a5fa; }
.tier-3 .arrow-label { color: #c084fc; }
/* ── Languages list ── */
.lang-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 6px;
justify-content: center;
}
.lang-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
padding: 2px 6px;
border-radius: 3px;
background: rgba(255,255,255,0.06);
color: #8890a8;
border: 1px solid rgba(255,255,255,0.08);
}
/* ── Cloud B Detail ── */
.cloud-b-section {
max-width: 1100px;
margin: 0 auto 40px;
}
.cloud-b-section h2 {
font-family: 'JetBrains Mono', monospace;
font-size: 16px;
font-weight: 700;
color: #fbbf24;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 8px;
}
.cloud-b-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 14px;
}
.cloud-b-card {
background: linear-gradient(145deg, #12161f 0%, #0e1218 100%);
border: 1px solid #1e2438;
border-radius: 10px;
padding: 18px;
position: relative;
}
.cloud-b-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
border-radius: 10px 10px 0 0;
}
.cloud-b-card:nth-child(1)::before { background: #4ade80; }
.cloud-b-card:nth-child(2)::before { background: #fbbf24; }
.cloud-b-card:nth-child(3)::before { background: #f472b6; }
.cloud-b-card h3 {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
font-weight: 700;
margin-bottom: 10px;
}
.cloud-b-card:nth-child(1) h3 { color: #4ade80; }
.cloud-b-card:nth-child(2) h3 { color: #fbbf24; }
.cloud-b-card:nth-child(3) h3 { color: #f472b6; }
.cb-item {
font-size: 12px;
color: #8890a8;
padding: 4px 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
display: flex;
align-items: flex-start;
gap: 6px;
}
.cb-item:last-child { border: none; }
.cb-dot {
width: 5px;
height: 5px;
border-radius: 50%;
margin-top: 5px;
flex-shrink: 0;
}
.cloud-b-card:nth-child(1) .cb-dot { background: #4ade80; }
.cloud-b-card:nth-child(2) .cb-dot { background: #fbbf24; }
.cloud-b-card:nth-child(3) .cb-dot { background: #f472b6; }
/* ── Comparison Table ── */
.compare-section {
max-width: 1100px;
margin: 0 auto 40px;
}
.compare-section h2 {
font-family: 'JetBrains Mono', monospace;
font-size: 16px;
font-weight: 700;
color: #c0c8e0;
margin-bottom: 16px;
}
.compare-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.compare-table th {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 700;
text-align: left;
padding: 10px 14px;
border-bottom: 2px solid #1e2438;
color: #8890a8;
}
.compare-table td {
padding: 10px 14px;
border-bottom: 1px solid #141824;
color: #a0a8c0;
}
.compare-table tr:hover td {
background: rgba(255,255,255,0.02);
}
.compare-table .tier-name {
font-family: 'JetBrains Mono', monospace;
font-weight: 600;
}
.t1c { color: #4ade80; }
.t2c { color: #60a5fa; }
.t3c { color: #c084fc; }
.star { color: #fbbf24; }
.check { color: #4ade80; }
.cross { color: #f87171; opacity: 0.6; }
/* ── RPC Flow ── */
.rpc-section {
max-width: 1100px;
margin: 0 auto 40px;
}
.rpc-section h2 {
font-family: 'JetBrains Mono', monospace;
font-size: 16px;
font-weight: 700;
color: #c0c8e0;
margin-bottom: 16px;
}
.rpc-flow {
background: linear-gradient(145deg, #0e1218 0%, #12161f 100%);
border: 1px solid #1e2438;
border-radius: 10px;
padding: 24px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
line-height: 1.8;
overflow-x: auto;
}
.rpc-flow .actor { color: #fbbf24; font-weight: 700; }
.rpc-flow .action { color: #4ade80; }
.rpc-flow .proto { color: #60a5fa; }
.rpc-flow .data { color: #c084fc; }
.rpc-flow .dim { color: #3a4060; }
.rpc-flow .step { color: #f472b6; font-weight: 700; }
/* ── Responsive ── */
@media (max-width: 900px) {
.cloud-b-grid { grid-template-columns: 1fr; }
.flow-row { flex-wrap: wrap; justify-content: center; gap: 8px; }
.arrow { padding: 4px 6px; }
.compare-table { font-size: 11px; }
.compare-table th, .compare-table td { padding: 8px 8px; }
}
</style>
</head>
<body>
<div class="page-title">
<h1>ANSCloud — Partner Integration Architecture</h1>
<div class="sub">3-Tier Integration Strategy: REST API → AMQP Protocol → C++ FFI Library</div>
</div>
<!-- ════════════════════════════════════════════════════ -->
<!-- TIER 1 -->
<!-- ════════════════════════════════════════════════════ -->
<div class="arch-container">
<div class="tier-section tier-1">
<div class="tier-header">
<span class="tier-badge">TIER 1</span>
<span class="tier-label">REST / WebSocket API Gateway</span>
<span class="tier-desc">★ Recommended for most partners</span>
</div>
<div class="flow-row">
<div class="box box-partner">
<div class="box-icon">🌐</div>
<div class="box-title">Partner CMS</div>
<div class="box-sub">Any language</div>
<div class="lang-tags">
<span class="lang-tag">Node.js</span>
<span class="lang-tag">Python</span>
<span class="lang-tag">Go</span>
<span class="lang-tag">Java</span>
<span class="lang-tag">C#</span>
<span class="lang-tag">PHP</span>
<span class="lang-tag">Ruby</span>
</div>
</div>
<div class="arrow">
<div class="arrow-line">──────►</div>
<div class="arrow-label">HTTPS / WSS</div>
</div>
<div class="box box-api">
<div class="box-icon">🛡️</div>
<div class="box-title">API Gateway</div>
<div class="box-sub">Cloud B<br>Auth + Rate Limit</div>
</div>
<div class="arrow">
<div class="arrow-line">──────►</div>
<div class="arrow-label">AMQP internal</div>
</div>
<div class="box box-broker">
<div class="box-icon">📨</div>
<div class="box-title">RabbitMQ</div>
<div class="box-sub">Cloud B<br>Exchanges + Queues</div>
</div>
<div class="arrow">
<div class="arrow-line">──────►</div>
<div class="arrow-label">AMQP TLS</div>
</div>
<div class="box box-device">
<div class="box-icon">📷</div>
<div class="box-title">AIBOX</div>
<div class="box-sub">anscloud-device<br>C++ + Your RabbitMQ API</div>
</div>
</div>
</div>
<!-- ════════════════════════════════════════════════════ -->
<!-- TIER 2 -->
<!-- ════════════════════════════════════════════════════ -->
<div class="tier-section tier-2">
<div class="tier-header">
<span class="tier-badge">TIER 2</span>
<span class="tier-label">Native AMQP Protocol (Direct Broker Access)</span>
<span class="tier-desc">Advanced integrators, on-prem</span>
</div>
<div class="flow-row">
<div class="box box-partner">
<div class="box-icon"></div>
<div class="box-title">Partner CMS</div>
<div class="box-sub">Native AMQP lib</div>
<div class="lang-tags">
<span class="lang-tag">amqplib</span>
<span class="lang-tag">pika</span>
<span class="lang-tag">amqp091-go</span>
<span class="lang-tag">Spring AMQP</span>
</div>
</div>
<div class="arrow">
<div class="arrow-line">════════════════════════►</div>
<div class="arrow-label">AMQP 0-9-1 (direct, same protocol)</div>
</div>
<div class="box box-broker">
<div class="box-icon">📨</div>
<div class="box-title">RabbitMQ</div>
<div class="box-sub">Cloud B<br>Partner vhost</div>
</div>
<div class="arrow">
<div class="arrow-line">──────►</div>
<div class="arrow-label">AMQP TLS</div>
</div>
<div class="box box-device">
<div class="box-icon">📷</div>
<div class="box-title">AIBOX</div>
<div class="box-sub">anscloud-device<br>C++ + Your RabbitMQ API</div>
</div>
</div>
</div>
<!-- ════════════════════════════════════════════════════ -->
<!-- TIER 3 -->
<!-- ════════════════════════════════════════════════════ -->
<div class="tier-section tier-3">
<div class="tier-header">
<span class="tier-badge">TIER 3</span>
<span class="tier-label">C++ Gateway Library via FFI</span>
<span class="tier-desc">Your CMS, embedded, C/C++ partners</span>
</div>
<div class="flow-row">
<div class="box box-partner">
<div class="box-icon">🔧</div>
<div class="box-title">Partner CMS</div>
<div class="box-sub">Links .dll / .so</div>
<div class="lang-tags">
<span class="lang-tag">cgo</span>
<span class="lang-tag">ctypes</span>
<span class="lang-tag">P/Invoke</span>
<span class="lang-tag">ffi-napi</span>
<span class="lang-tag">JNI</span>
</div>
</div>
<div class="arrow">
<div class="arrow-line">──────►</div>
<div class="arrow-label">C API (FFI)</div>
</div>
<div class="box box-lib">
<div class="box-icon">📦</div>
<div class="box-title">anscloud-gateway</div>
<div class="box-sub">C++ lib (CMSCore)<br>gateway_agent_c.h</div>
</div>
<div class="arrow">
<div class="arrow-line">──────►</div>
<div class="arrow-label">Your RabbitMQ API</div>
</div>
<div class="box box-broker">
<div class="box-icon">📨</div>
<div class="box-title">RabbitMQ</div>
<div class="box-sub">Cloud B</div>
</div>
<div class="arrow">
<div class="arrow-line">──────►</div>
<div class="arrow-label">AMQP TLS</div>
</div>
<div class="box box-device">
<div class="box-icon">📷</div>
<div class="box-title">AIBOX</div>
<div class="box-sub">anscloud-device<br>C++ + Your RabbitMQ API</div>
</div>
</div>
</div>
</div>
<!-- ════════════════════════════════════════════════════ -->
<!-- Cloud B Detail -->
<!-- ════════════════════════════════════════════════════ -->
<div class="cloud-b-section">
<h2>☁️ Cloud B — Messaging Platform (You Own)</h2>
<div class="cloud-b-grid">
<div class="cloud-b-card">
<h3>API Gateway Layer</h3>
<div class="cb-item"><div class="cb-dot"></div>REST endpoints for commands, status, telemetry</div>
<div class="cb-item"><div class="cb-dot"></div>WebSocket for real-time event streaming</div>
<div class="cb-item"><div class="cb-dot"></div>Webhook push to partner URLs</div>
<div class="cb-item"><div class="cb-dot"></div>API key auth + JWT per tenant</div>
<div class="cb-item"><div class="cb-dot"></div>Rate limiting per partner tier</div>
<div class="cb-item"><div class="cb-dot"></div>Serves Tier 1 partners</div>
</div>
<div class="cloud-b-card">
<h3>RabbitMQ Broker</h3>
<div class="cb-item"><div class="cb-dot"></div>ex.command → direct → device queues</div>
<div class="cb-item"><div class="cb-dot"></div>ex.device.telemetry → topic → ingest</div>
<div class="cb-item"><div class="cb-dot"></div>ex.device.events → topic → processor</div>
<div class="cb-item"><div class="cb-dot"></div>ex.device.status → topic → tracker</div>
<div class="cb-item"><div class="cb-dot"></div>ex.broadcast → fanout → all devices</div>
<div class="cb-item"><div class="cb-dot"></div>vhost isolation per tenant</div>
</div>
<div class="cloud-b-card">
<h3>AIBOX Devices</h3>
<div class="cb-item"><div class="cb-dot"></div>anscloud-device (C++ static lib)</div>
<div class="cb-item"><div class="cb-dot"></div>Uses YOUR existing RabbitMQ C++ API</div>
<div class="cb-item"><div class="cb-dot"></div>IMessageBroker adapter pattern</div>
<div class="cb-item"><div class="cb-dot"></div>Auto boot → connect → heartbeat</div>
<div class="cb-item"><div class="cb-dot"></div>Publishes telemetry, events, status</div>
<div class="cb-item"><div class="cb-dot"></div>Receives & executes commands</div>
</div>
</div>
</div>
<!-- ════════════════════════════════════════════════════ -->
<!-- RPC Command Flow -->
<!-- ════════════════════════════════════════════════════ -->
<div class="rpc-section">
<h2>Command RPC Flow (Tier 1 Example)</h2>
<div class="rpc-flow">
<span class="step"></span> <span class="actor">Partner</span> <span class="action">POST</span> <span class="proto">/api/v1/devices/AIBOX-001/commands</span> <span class="data">{"command":"get_config"}</span><br>
<span class="dim"></span><br>
<span class="step"></span> <span class="actor">API GW</span> <span class="action">generates</span> <span class="data">cmd_id + correlation_id</span><span class="action">publish to</span> <span class="proto">ex.command</span> <span class="dim">routing_key=AIBOX-001</span><br>
<span class="dim"></span><br>
<span class="step"></span> <span class="actor">RabbitMQ</span> <span class="action">routes</span><span class="proto">q.cmd.AIBOX-001</span><br>
<span class="dim"></span><br>
<span class="step"></span> <span class="actor">AIBOX</span> <span class="action">consumes</span><span class="action">executes locally</span><span class="action">publishes response</span><span class="proto">ex.command.response</span><br>
<span class="dim"></span><br>
<span class="step"></span> <span class="actor">API GW</span> <span class="action">matches</span> <span class="data">correlation_id</span><span class="action">resolves pending request</span><br>
<span class="dim"></span><br>
<span class="step"></span> <span class="actor">Partner</span> <span class="action">receives</span> <span class="proto">HTTP 200</span> <span class="data">{"status":"success","result":{"version":"3.2.0","cameras":3}}</span><br>
<br>
<span class="dim">── Partner sees a simple REST call. RabbitMQ is completely hidden. ──</span>
</div>
</div>
<!-- ════════════════════════════════════════════════════ -->
<!-- Comparison -->
<!-- ════════════════════════════════════════════════════ -->
<div class="compare-section">
<h2>Tier Comparison</h2>
<table class="compare-table">
<thead>
<tr>
<th></th>
<th>Language Support</th>
<th>Setup Effort</th>
<th>Latency</th>
<th>Partner Needs</th>
<th>You Control</th>
<th>Best For</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tier-name t1c">Tier 1 — REST API</td>
<td>Any <span class="star"></span></td>
<td>Minutes <span class="star"></span></td>
<td>~50ms added</td>
<td>API key + docs</td>
<td>Auth, rate limits, versioning <span class="star"></span></td>
<td>SaaS partners, web/mobile</td>
</tr>
<tr>
<td class="tier-name t2c">Tier 2 — AMQP Direct</td>
<td>Has AMQP lib</td>
<td>Hours</td>
<td>Lowest <span class="star"></span></td>
<td>Protocol guide + credentials</td>
<td>vhost isolation</td>
<td>Large integrators, on-prem</td>
</tr>
<tr>
<td class="tier-name t3c">Tier 3 — C++ FFI</td>
<td>Has FFI support</td>
<td>Days</td>
<td>Low</td>
<td>DLL/so + C headers</td>
<td>Full protocol encapsulated</td>
<td>Your CMS, embedded, C++ devs</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>