112 lines
6.2 KiB
XML
112 lines
6.2 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 650" font-family="Arial, sans-serif">
|
|
<defs>
|
|
<linearGradient id="serverGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
|
|
</linearGradient>
|
|
<linearGradient id="frontendGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#11998e;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#38ef7d;stop-opacity:1" />
|
|
</linearGradient>
|
|
<linearGradient id="backendGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#fc4a1a;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#f7b733;stop-opacity:1" />
|
|
</linearGradient>
|
|
<linearGradient id="dbGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#4facfe;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#00f2fe;stop-opacity:1" />
|
|
</linearGradient>
|
|
<linearGradient id="storageGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#a8edea;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#fed6e3;stop-opacity:1" />
|
|
</linearGradient>
|
|
<linearGradient id="apiGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#ffecd2;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#fcb69f;stop-opacity:1" />
|
|
</linearGradient>
|
|
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feDropShadow dx="2" dy="2" stdDeviation="3" flood-opacity="0.3"/>
|
|
</filter>
|
|
</defs>
|
|
|
|
<!-- Title -->
|
|
<text x="400" y="30" text-anchor="middle" font-size="20" font-weight="bold" fill="#333">
|
|
CaStAD Single Server Architecture
|
|
</text>
|
|
|
|
<!-- Main Server Box -->
|
|
<rect x="100" y="50" width="600" height="420" rx="15" fill="url(#serverGrad)" filter="url(#shadow)" opacity="0.15"/>
|
|
<rect x="100" y="50" width="600" height="420" rx="15" fill="none" stroke="url(#serverGrad)" stroke-width="3"/>
|
|
<text x="400" y="80" text-anchor="middle" font-size="16" font-weight="bold" fill="#667eea">Single Server</text>
|
|
|
|
<!-- Frontend Box -->
|
|
<rect x="150" y="100" width="500" height="70" rx="10" fill="url(#frontendGrad)" filter="url(#shadow)"/>
|
|
<text x="400" y="130" text-anchor="middle" font-size="14" font-weight="bold" fill="white">Frontend</text>
|
|
<text x="400" y="150" text-anchor="middle" font-size="12" fill="white">React + Vite (Port 5173)</text>
|
|
|
|
<!-- Arrow from Frontend to Backend -->
|
|
<path d="M 400 170 L 400 190" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/>
|
|
<defs>
|
|
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
|
|
<polygon points="0 0, 10 3.5, 0 7" fill="#666"/>
|
|
</marker>
|
|
</defs>
|
|
|
|
<!-- Backend Box -->
|
|
<rect x="150" y="190" width="500" height="100" rx="10" fill="url(#backendGrad)" filter="url(#shadow)"/>
|
|
<text x="400" y="215" text-anchor="middle" font-size="14" font-weight="bold" fill="white">Backend</text>
|
|
<text x="400" y="235" text-anchor="middle" font-size="12" fill="white">Express.js (Port 3001)</text>
|
|
|
|
<!-- Service boxes inside Backend -->
|
|
<rect x="175" y="250" width="120" height="30" rx="5" fill="white" opacity="0.9"/>
|
|
<text x="235" y="270" text-anchor="middle" font-size="11" fill="#fc4a1a">Auth Service</text>
|
|
|
|
<rect x="315" y="250" width="120" height="30" rx="5" fill="white" opacity="0.9"/>
|
|
<text x="375" y="270" text-anchor="middle" font-size="11" fill="#fc4a1a">Render Service</text>
|
|
|
|
<rect x="455" y="250" width="120" height="30" rx="5" fill="white" opacity="0.9"/>
|
|
<text x="515" y="270" text-anchor="middle" font-size="11" fill="#fc4a1a">API Proxy</text>
|
|
|
|
<!-- Arrow from Backend to Database -->
|
|
<path d="M 400 290 L 400 310" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/>
|
|
|
|
<!-- Database Box -->
|
|
<rect x="150" y="310" width="500" height="60" rx="10" fill="url(#dbGrad)" filter="url(#shadow)"/>
|
|
<text x="400" y="340" text-anchor="middle" font-size="14" font-weight="bold" fill="white">Database</text>
|
|
<text x="400" y="358" text-anchor="middle" font-size="12" fill="white">SQLite (File-based)</text>
|
|
|
|
<!-- Arrow from Database to Storage -->
|
|
<path d="M 400 370 L 400 390" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/>
|
|
|
|
<!-- File Storage Box -->
|
|
<rect x="150" y="390" width="500" height="60" rx="10" fill="url(#storageGrad)" filter="url(#shadow)"/>
|
|
<text x="400" y="418" text-anchor="middle" font-size="14" font-weight="bold" fill="#333">File Storage</text>
|
|
<text x="400" y="438" text-anchor="middle" font-size="11" fill="#666">Local Filesystem (downloads/, temp/, uploads/)</text>
|
|
|
|
<!-- External APIs -->
|
|
<path d="M 400 470 L 400 500" stroke="#666" stroke-width="2" marker-end="url(#arrowhead)"/>
|
|
|
|
<!-- Gemini API -->
|
|
<rect x="120" y="520" width="150" height="60" rx="10" fill="url(#apiGrad)" filter="url(#shadow)"/>
|
|
<text x="195" y="545" text-anchor="middle" font-size="13" font-weight="bold" fill="#333">Gemini API</text>
|
|
<text x="195" y="565" text-anchor="middle" font-size="10" fill="#666">AI Content</text>
|
|
|
|
<!-- Suno API -->
|
|
<rect x="325" y="520" width="150" height="60" rx="10" fill="url(#apiGrad)" filter="url(#shadow)"/>
|
|
<text x="400" y="545" text-anchor="middle" font-size="13" font-weight="bold" fill="#333">Suno API</text>
|
|
<text x="400" y="565" text-anchor="middle" font-size="10" fill="#666">AI Music</text>
|
|
|
|
<!-- YouTube API -->
|
|
<rect x="530" y="520" width="150" height="60" rx="10" fill="url(#apiGrad)" filter="url(#shadow)"/>
|
|
<text x="605" y="545" text-anchor="middle" font-size="13" font-weight="bold" fill="#333">YouTube API</text>
|
|
<text x="605" y="565" text-anchor="middle" font-size="10" fill="#666">Video Upload</text>
|
|
|
|
<!-- Connecting lines to APIs -->
|
|
<path d="M 300 500 L 195 520" stroke="#666" stroke-width="1.5" stroke-dasharray="5,5"/>
|
|
<path d="M 400 500 L 400 520" stroke="#666" stroke-width="1.5" stroke-dasharray="5,5"/>
|
|
<path d="M 500 500 L 605 520" stroke="#666" stroke-width="1.5" stroke-dasharray="5,5"/>
|
|
|
|
<!-- Capacity Label -->
|
|
<rect x="620" y="60" width="70" height="25" rx="5" fill="#e74c3c"/>
|
|
<text x="655" y="78" text-anchor="middle" font-size="11" fill="white">~50 users</text>
|
|
</svg> |