assets/architecture.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1100 640" role="img" aria-label="HermesFace architecture">
  <defs>
    <linearGradient id="space" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#F3E5F5"/>
      <stop offset="1" stop-color="#E3F2FD"/>
    </linearGradient>
    <linearGradient id="core" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#7C4DFF"/>
      <stop offset="1" stop-color="#5E35B2"/>
    </linearGradient>
    <linearGradient id="side" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#448AFF"/>
      <stop offset="1" stop-color="#1976D2"/>
    </linearGradient>
    <linearGradient id="data" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#FFB300"/>
      <stop offset="1" stop-color="#FF8F00"/>
    </linearGradient>
    <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto">
      <path d="M0 0 L10 5 L0 10 Z" fill="#455A64"/>
    </marker>
    <filter id="soft" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="2" in="SourceGraphic"/>
    </filter>
  </defs>

  <style>
    text { font-family: 'Inter','Helvetica Neue',Arial,sans-serif; fill: #263238; }
    .title { font-size: 22px; font-weight: 700; fill: #263238; }
    .label { font-size: 15px; font-weight: 600; fill: #FFFFFF; }
    .small { font-size: 12px; fill: #FFFFFF; opacity: 0.9; }
    .note { font-size: 13px; fill: #455A64; }
    .edge { stroke: #455A64; stroke-width: 1.8; fill: none; }
  </style>

  <rect width="1100" height="640" fill="#FAFAFA"/>

  <!-- HF Space container -->
  <rect x="30" y="30" width="1040" height="580" rx="18" fill="url(#space)" stroke="#B39DDB" stroke-width="2"/>
  <text x="60" y="68" class="title">🤗 HuggingFace Space · Docker · cpu-basic (2 vCPU · 16 GB RAM · 50 GB)</text>

  <!-- Sync daemon -->
  <g>
    <rect x="70" y="120" width="230" height="160" rx="14" fill="url(#side)"/>
    <text x="185" y="156" text-anchor="middle" class="label">sync_hf.py</text>
    <text x="185" y="180" text-anchor="middle" class="small">persistence manager</text>
    <text x="88" y="214" class="small">• Startup: snapshot_download</text>
    <text x="88" y="234" class="small">• Periodic upload every 60 s</text>
    <text x="88" y="254" class="small">• SIGTERM → final upload</text>
    <text x="88" y="274" class="small">• CORS + CSP runtime patches</text>
  </g>

  <!-- Hermes Agent core -->
  <g>
    <rect x="360" y="100" width="440" height="360" rx="14" fill="url(#core)"/>
    <text x="580" y="140" text-anchor="middle" class="label">Hermes Agent (Nous Research)</text>
    <text x="580" y="164" text-anchor="middle" class="small">self-improving · 47 built-in tools</text>

    <g transform="translate(390 190)">
      <rect x="0" y="0" width="180" height="52" rx="10" fill="#B39DDB" opacity="0.95"/>
      <text x="90" y="30" text-anchor="middle" class="label" style="fill:#311B92">Web Dashboard</text>
      <text x="90" y="46" text-anchor="middle" class="small" style="fill:#311B92">:7860</text>
    </g>
    <g transform="translate(590 190)">
      <rect x="0" y="0" width="180" height="52" rx="10" fill="#B39DDB" opacity="0.95"/>
      <text x="90" y="30" text-anchor="middle" class="label" style="fill:#311B92">Gateway</text>
      <text x="90" y="46" text-anchor="middle" class="small" style="fill:#311B92">messaging · cron</text>
    </g>
    <g transform="translate(390 258)">
      <rect x="0" y="0" width="180" height="52" rx="10" fill="#B39DDB" opacity="0.95"/>
      <text x="90" y="30" text-anchor="middle" class="label" style="fill:#311B92">Skills Engine</text>
      <text x="90" y="46" text-anchor="middle" class="small" style="fill:#311B92">learn · refine</text>
    </g>
    <g transform="translate(590 258)">
      <rect x="0" y="0" width="180" height="52" rx="10" fill="#B39DDB" opacity="0.95"/>
      <text x="90" y="30" text-anchor="middle" class="label" style="fill:#311B92">Memory System</text>
      <text x="90" y="46" text-anchor="middle" class="small" style="fill:#311B92">LLM-powered recall</text>
    </g>
    <g transform="translate(390 326)">
      <rect x="0" y="0" width="180" height="52" rx="10" fill="#B39DDB" opacity="0.95"/>
      <text x="90" y="30" text-anchor="middle" class="label" style="fill:#311B92">Cron Scheduler</text>
    </g>
    <g transform="translate(590 326)">
      <rect x="0" y="0" width="180" height="52" rx="10" fill="#B39DDB" opacity="0.95"/>
      <text x="90" y="30" text-anchor="middle" class="label" style="fill:#311B92">47 Tools</text>
    </g>
    <text x="580" y="430" text-anchor="middle" class="small">terminal · file ops · web · vision · image gen · browser</text>
  </g>

  <!-- Connectors -->
  <g>
    <rect x="850" y="120" width="200" height="160" rx="14" fill="#37474F"/>
    <text x="950" y="152" text-anchor="middle" class="label">Messaging</text>
    <text x="862" y="182" class="small">• Telegram · Discord</text>
    <text x="862" y="202" class="small">• Slack · WhatsApp</text>
    <text x="862" y="222" class="small">• Signal · WeChat</text>
    <text x="862" y="242" class="small">• iMessage · +9 more</text>
    <text x="862" y="266" class="small">DoH DNS for TG/WA</text>
  </g>

  <!-- DNS + patches -->
  <g>
    <rect x="850" y="300" width="200" height="160" rx="14" fill="#607D8B"/>
    <text x="950" y="332" text-anchor="middle" class="label">HF Spaces fixes</text>
    <text x="862" y="362" class="small">• dns-resolve.py (DoH)</text>
    <text x="862" y="382" class="small">• dns-fix.cjs (Node)</text>
    <text x="862" y="402" class="small">• CSP frame-ancestors</text>
    <text x="862" y="422" class="small">• CORS allow-origins</text>
    <text x="862" y="442" class="small">• Atomic tar backup</text>
  </g>

  <!-- Dataset -->
  <g>
    <rect x="70" y="470" width="660" height="110" rx="14" fill="url(#data)"/>
    <text x="400" y="510" text-anchor="middle" class="label">🤗 HuggingFace Dataset (private) — username/HermesFace-data</text>
    <text x="400" y="538" text-anchor="middle" class="small">conversations · skills · memories · config · SOUL.md</text>
    <text x="400" y="562" text-anchor="middle" class="small">auto-sync every 60 s · survives every container restart</text>
  </g>

  <!-- End user -->
  <g>
    <rect x="760" y="470" width="290" height="110" rx="14" fill="#00838F"/>
    <text x="905" y="510" text-anchor="middle" class="label">You</text>
    <text x="905" y="536" text-anchor="middle" class="small">browser dashboard · chat apps</text>
    <text x="905" y="560" text-anchor="middle" class="small">embed in HF profile via iframe</text>
  </g>

  <!-- Edges -->
  <path class="edge" d="M300 200 L360 200" marker-end="url(#arrow)"/>
  <path class="edge" d="M300 230 C330 230 330 500 400 500" marker-end="url(#arrow)"/>
  <path class="edge" d="M800 200 L850 200" marker-end="url(#arrow)"/>
  <path class="edge" d="M800 280 C830 300 830 380 850 380" marker-end="url(#arrow)"/>
  <path class="edge" d="M950 460 L950 470" marker-end="url(#arrow)"/>
  <path class="edge" d="M580 460 L580 498" marker-end="url(#arrow)"/>
</svg>