cmhub/prototypes/cmhub-homepage-v2.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 2600" width="1440" height="2600" font-family="'Space Grotesk','PingFang SC','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif">
  <defs>
    <linearGradient id="btn2" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#8071FF"/><stop offset="1" stop-color="#5B49E8"/>
    </linearGradient>
    <linearGradient id="glow" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#1A2136"/><stop offset="1" stop-color="#141A2B"/>
    </linearGradient>
    <radialGradient id="halo" cx="0.5" cy="0.3" r="0.8">
      <stop offset="0" stop-color="#2A2560" stop-opacity="0.55"/>
      <stop offset="1" stop-color="#0E131F" stop-opacity="0"/>
    </radialGradient>
    <filter id="lift" x="-30%" y="-30%" width="160%" height="160%">
      <feDropShadow dx="0" dy="24" stdDeviation="40" flood-color="#000000" flood-opacity="0.45"/>
    </filter>
    <filter id="liftsm" x="-40%" y="-40%" width="180%" height="180%">
      <feDropShadow dx="0" dy="12" stdDeviation="22" flood-color="#000000" flood-opacity="0.4"/>
    </filter>
    <style>
      .mono{font-family:'JetBrains Mono','SFMono-Regular',Consolas,monospace}
      .txt{fill:#E7EBF5}.mut{fill:#8892A8}.dim{fill:#5B6478}
      .indigo{fill:#8B7CFF}.amber{fill:#F4B152}.mint{fill:#4FD6A0}
      .eyebrow{font-size:13px;font-weight:600;letter-spacing:4px;fill:#8B7CFF}
      .h1{font-size:60px;font-weight:700;letter-spacing:-1.6px;fill:#F1F3FA}
      .lead{font-size:18px;font-weight:400;fill:#9AA3B8}
      .sectitle{font-size:38px;font-weight:700;letter-spacing:-0.8px;fill:#F1F3FA}
      .body{font-size:15.5px;font-weight:400;fill:#93a}
      .body2{font-size:15.5px;font-weight:400;fill:#93A0B6}
      .kick{font-size:12px;font-weight:600;letter-spacing:2px;fill:#5B6478}
      .code{font-size:14.5px}.ln{font-size:13px;fill:#3C465C}
      .metric{font-size:13px;font-weight:700;letter-spacing:1px}
      .num{font-size:15px;font-weight:700;letter-spacing:2px}
    </style>
  </defs>

  <!-- deep console background -->
  <rect width="1440" height="2600" fill="#0E131F"/>
  <rect x="620" y="0" width="820" height="760" fill="url(#halo)"/>

  <!-- ============ NAV (window chrome vibe) ============ -->
  <g>
    <circle cx="130" cy="46" r="6" fill="#F4B152"/>
    <circle cx="150" cy="46" r="6" fill="#4FD6A0"/>
    <circle cx="170" cy="46" r="6" fill="#8B7CFF"/>
    <text x="196" y="52" font-size="21" font-weight="700" class="txt">cmhub</text>
    <text x="272" y="52" font-size="13" class="mono dim">/ 生成 API</text>

    <text x="560" y="51" font-size="15" class="mut">功能</text>
    <text x="650" y="51" font-size="15" class="mut">计费</text>
    <text x="740" y="51" font-size="15" class="mut">文档</text>

    <text x="1092" y="51" font-size="15" font-weight="600" class="txt">登录</text>
    <rect x="1168" y="26" width="152" height="40" rx="10" fill="url(#btn2)"/>
    <text x="1244" y="51" text-anchor="middle" font-size="15.5" font-weight="600" fill="#fff">免费注册</text>
  </g>
  <line x1="0" y1="84" x2="1440" y2="84" stroke="#1C2436"/>

  <!-- ============ HERO ============ -->
  <!-- left -->
  <g>
    <rect x="120" y="150" width="238" height="30" rx="15" fill="#161D2E" stroke="#293350"/>
    <circle cx="140" cy="165" r="4" fill="#4FD6A0"/>
    <text x="154" y="170" font-size="12.5" class="mono mut">HTTP 接口 · 拿 Key 就调</text>

    <text x="118" y="256" class="h1">你的程序，</text>
    <text x="118" y="326" class="h1">一次调用，</text>
    <text x="118" y="396" class="h1"><tspan fill="#8B7CFF">标题</tspan> 和 <tspan fill="#F4B152">主图</tspan> 就到。</text>

    <text x="120" y="452" class="lead">生成标题、生成主图，全封装成 HTTP 接口。桌面端带一把</text>
    <text x="120" y="480" class="lead">API Key 直接调，按点数计费——换底层模型，价格不变。</text>

    <rect x="120" y="524" width="188" height="56" rx="12" fill="url(#btn2)"/>
    <text x="214" y="559" text-anchor="middle" font-size="17" font-weight="600" fill="#fff">免费注册　→</text>

    <rect x="324" y="524" width="250" height="56" rx="12" fill="#141A2A" stroke="#2A3450"/>
    <path d="M356 552 v11 M350 557 l6 6 l6 -6 M347 571 h18" stroke="#E7EBF5" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
    <text x="384" y="548" font-size="15" font-weight="600" class="txt">下载 Windows 客户端</text>
    <text x="384" y="568" font-size="12.5" class="mono dim">v1.0.0 · 48 MB</text>

    <text x="120" y="626" font-size="13.5" class="mono dim">注册即用 · 免邮箱验证 · 失败自动退点 · 生成标题 <tspan class="amber" font-weight="700">2 点</tspan> 起</text>
  </g>

  <!-- right: SIGNATURE — API terminal (curl → JSON) -->
  <g filter="url(#lift)"><rect x="640" y="146" width="680" height="470" rx="16" fill="url(#glow)"/></g>
  <g>
    <!-- title bar -->
    <path d="M640 162 a16 16 0 0 1 16 -16 h648 a16 16 0 0 1 16 16 v26 h-680 z" fill="#10151F"/>
    <circle cx="664" cy="166" r="5" fill="#39435C"/>
    <circle cx="682" cy="166" r="5" fill="#39435C"/>
    <circle cx="700" cy="166" r="5" fill="#39435C"/>
    <text x="980" y="171" text-anchor="middle" font-size="12.5" class="mono dim">generate-title · request</text>
    <line x1="640" y1="188" x2="1320" y2="188" stroke="#1E2740"/>

    <!-- gutter -->
    <rect x="640" y="188" width="46" height="428" fill="#0C111B"/>
    <g class="mono ln" text-anchor="end">
      <text x="672" y="228">1</text><text x="672" y="256">2</text><text x="672" y="284">3</text>
      <text x="672" y="312">4</text><text x="672" y="340">5</text><text x="672" y="368">6</text>
      <text x="672" y="396">7</text><text x="672" y="424">8</text><text x="672" y="452">9</text>
      <text x="672" y="480">10</text><text x="672" y="508">11</text><text x="672" y="536">12</text>
      <text x="672" y="564">13</text>
    </g>

    <!-- code -->
    <g class="mono code">
      <text x="702" y="228"><tspan class="mint">$</tspan> <tspan class="txt">curl -X POST cm.833729.com/api/v1/generate/title \</tspan></text>
      <text x="722" y="256" class="mut">-H <tspan class="amber">"Authorization: Bearer sk_cmhub_••••"</tspan> \</text>
      <text x="722" y="284" class="mut">-d <tspan class="amber">'{"prompt":"白色纯棉基础款T恤"}'</tspan></text>

      <text x="702" y="340" class="dim">// 200 OK</text>
      <text x="702" y="368" class="mut">{</text>
      <text x="722" y="396"><tspan class="indigo">"titles"</tspan><tspan class="mut">: [</tspan><tspan class="amber">"纯棉白T恤男夏季薄款…"</tspan><tspan class="mut">, …],</tspan></text>
      <text x="722" y="424"><tspan class="indigo">"alias"</tspan><tspan class="mut">: </tspan><tspan class="amber">"title-standard"</tspan><tspan class="mut">,</tspan></text>
      <text x="722" y="452"><tspan class="indigo">"model_used"</tspan><tspan class="mut">: </tspan><tspan class="amber">"gpt-5.5"</tspan><tspan class="mut">,</tspan></text>
      <!-- highlighted points line -->
      <rect x="702" y="466" width="600" height="26" rx="6" fill="#241E12"/>
      <text x="722" y="484"><tspan class="indigo">"points_cost"</tspan><tspan class="mut">: </tspan><tspan class="mint" font-weight="700">2</tspan><tspan class="dim">,   ← 本次扣点</tspan></text>
      <text x="722" y="516"><tspan class="indigo">"points_balance"</tspan><tspan class="mut">: </tspan><tspan class="mint" font-weight="700">98</tspan></text>
      <text x="702" y="544" class="mut">}<tspan class="txt">▋</tspan></text>
    </g>
    <!-- status strip -->
    <line x1="640" y1="578" x2="1320" y2="578" stroke="#1E2740"/>
    <text x="662" y="600" font-size="12" class="mono dim">200 · 128 ms</text>
    <text x="1298" y="600" text-anchor="end" font-size="12" class="mono"><tspan class="mint">●</tspan> <tspan class="dim">Bearer 鉴权 · 只认 Key</tspan></text>
  </g>

  <line x1="120" y1="712" x2="1320" y2="712" stroke="#1C2436"/>

  <!-- ============ 四步上手 ============ -->
  <g>
    <text x="120" y="800" class="eyebrow">开始使用</text>
    <text x="120" y="852" class="sectitle">四步，在你的程序里生成</text>
    <text x="120" y="890" class="lead">用户端负责注册、充值、管 Key；生成走 API。后台配模型和价，调用方零改动。</text>

    <line x1="176" y1="992" x2="1256" y2="992" stroke="#212A40" stroke-dasharray="2 7"/>

    <g class="mono">
      <text x="120" y="984" class="num indigo">01</text>
      <circle cx="180" cy="992" r="7" fill="#0E131F" stroke="#8B7CFF" stroke-width="2.5"/>
      <text x="120" y="1036" font-size="19" font-weight="700" class="txt" font-family="system-ui">注册账号</text>
      <text x="120" y="1064" class="body2" font-family="system-ui">邮箱 + 密码即注册即用，</text>
      <text x="120" y="1086" class="body2" font-family="system-ui">免验证，不送点数。</text>
    </g>
    <g class="mono">
      <text x="420" y="984" class="num indigo">02</text>
      <circle cx="480" cy="992" r="7" fill="#0E131F" stroke="#8B7CFF" stroke-width="2.5"/>
      <text x="420" y="1036" font-size="19" font-weight="700" class="txt" font-family="system-ui">扫码充值点数</text>
      <text x="420" y="1064" class="body2" font-family="system-ui">微信 / 支付宝扫码，</text>
      <text x="420" y="1086" class="body2" font-family="system-ui">按汇率换成点数。</text>
    </g>
    <g class="mono">
      <text x="720" y="984" class="num indigo">03</text>
      <circle cx="780" cy="992" r="7" fill="#0E131F" stroke="#8B7CFF" stroke-width="2.5"/>
      <text x="720" y="1036" font-size="19" font-weight="700" class="txt" font-family="system-ui">生成 API Key</text>
      <text x="720" y="1064" class="body2" font-family="system-ui">明文只显示一次，</text>
      <text x="720" y="1086" class="body2" font-family="system-ui">库内只存哈希。</text>
    </g>
    <g class="mono">
      <text x="1020" y="984" class="num amber">04</text>
      <circle cx="1080" cy="992" r="7" fill="#F4B152"/>
      <text x="1020" y="1036" font-size="19" font-weight="700" class="txt" font-family="system-ui">桌面端填 Key 用</text>
      <text x="1020" y="1064" class="body2" font-family="system-ui">客户端带 Key 调接口，</text>
      <text x="1020" y="1086" class="body2" font-family="system-ui">生成标题与主图。</text>
    </g>
  </g>

  <!-- ============ 能力 (endpoint cards) ============ -->
  <g>
    <text x="120" y="1226" class="eyebrow">两个端点</text>
    <text x="120" y="1272" class="sectitle">调两个接口，产出能上架</text>
  </g>
  <g filter="url(#liftsm)"><rect x="120" y="1318" width="576" height="228" rx="16" fill="#151B2A"/></g>
  <g>
    <rect x="152" y="1350" width="238" height="30" rx="8" fill="#0F1420"/>
    <text x="168" y="1370" class="mono" font-size="13.5"><tspan class="mint">POST</tspan> <tspan class="txt">/generate/title</tspan></text>
    <rect x="580" y="1350" width="86" height="30" rx="15" fill="#241E12"/>
    <text x="623" y="1370" text-anchor="middle" class="metric amber">2 点起</text>
    <text x="152" y="1436" font-size="22" font-weight="700" class="txt">生成标题</text>
    <text x="152" y="1472" class="body2">给商品生成多个吸睛中文标题，可纯文字也可看图。</text>
    <text x="152" y="1498" class="body2">传能力别名，换底层模型价格不变；失败自动退点。</text>
  </g>
  <g filter="url(#liftsm)"><rect x="744" y="1318" width="576" height="228" rx="16" fill="#151B2A"/></g>
  <g>
    <rect x="776" y="1350" width="252" height="30" rx="8" fill="#0F1420"/>
    <text x="792" y="1370" class="mono" font-size="13.5"><tspan class="mint">POST</tspan> <tspan class="txt">/generate/image</tspan></text>
    <rect x="1200" y="1350" width="90" height="30" rx="15" fill="#241E12"/>
    <text x="1245" y="1370" text-anchor="middle" class="metric amber">10 点起</text>
    <text x="776" y="1436" font-size="22" font-weight="700" class="txt">生成主图 / 改图</text>
    <text x="776" y="1472" class="body2">传商品原图 + 提示词，同步产出电商主图（改图需原图）。</text>
    <text x="776" y="1498" class="body2">按分辨率计价，结果以 URL 返回，客户端直接下载。</text>
  </g>

  <!-- ============ 计费 (amber meter panel) ============ -->
  <g filter="url(#lift)"><rect x="120" y="1626" width="1200" height="300" rx="20" fill="#12182699"/></g>
  <rect x="120" y="1626" width="1200" height="300" rx="20" fill="none" stroke="#232C42"/>
  <g>
    <text x="168" y="1702" class="eyebrow">怎么计费</text>
    <text x="166" y="1756" font-size="33" font-weight="700" fill="#F1F3FA" letter-spacing="-0.5">按「操作 + 能力别名 + 分辨率」定价</text>
    <text x="168" y="1798" font-size="16" class="body2">运营在后台配价，你只认稳定别名。换供应商、换模型，你的账单口径不变。</text>

    <g class="mono" font-size="14.5">
      <text x="168" y="1852"><tspan class="mint">✓</tspan> <tspan class="body2" font-family="system-ui">充值→点数，充多少到多少</tspan></text>
      <text x="500" y="1852"><tspan class="mint">✓</tspan> <tspan class="body2" font-family="system-ui">失败自动退点，不白扣</tspan></text>
      <text x="800" y="1852"><tspan class="mint">✓</tspan> <tspan class="body2" font-family="system-ui">并发扣点安全，不超扣</tspan></text>
    </g>

    <text x="1272" y="1700" text-anchor="end" class="kick">当前余额</text>
    <text x="1272" y="1752" text-anchor="end" font-size="46" font-weight="700" class="amber mono">1,280</text>
    <text x="1272" y="1774" text-anchor="end" font-size="13" class="dim">点</text>
    <rect x="1020" y="1802" width="252" height="10" rx="5" fill="#20283C"/>
    <rect x="1020" y="1802" width="176" height="10" rx="5" fill="#F4B152"/>
    <text x="1020" y="1838" font-size="12.5" class="mono dim">≈ 128 次标题 · 本月已消耗 128 点</text>
  </g>

  <!-- ============ 下载 ============ -->
  <g>
    <text x="120" y="2022" class="eyebrow">下载客户端</text>
    <text x="120" y="2068" class="sectitle">装上桌面端，填 Key 就能生成</text>
  </g>
  <g filter="url(#liftsm)"><rect x="120" y="2106" width="1200" height="180" rx="18" fill="#151B2A"/></g>
  <g>
    <rect x="152" y="2142" width="70" height="70" rx="18" fill="url(#btn2)"/>
    <rect x="172" y="2162" width="13" height="13" rx="2" fill="#fff"/><rect x="189" y="2162" width="13" height="13" rx="2" fill="#fff"/>
    <rect x="172" y="2178" width="13" height="13" rx="2" fill="#F4B152"/><rect x="189" y="2178" width="13" height="13" rx="2" fill="#fff"/>

    <text x="248" y="2164" font-size="22" font-weight="700" class="txt">cmhub 桌面客户端</text>
    <text x="248" y="2192" class="mono" font-size="13.5" fill="#93A0B6">Windows 10/11 · v1.0.0 · 更新 2026-07-06 · 48 MB</text>
    <text x="248" y="2220" class="mono" font-size="13" fill="#5B6478">SHA256　9f2c…a17e　（下载后请核对校验值）</text>
    <text x="248" y="2250" font-size="12.5" class="amber">首次安装若提示「未知发布者」，点『更多信息 → 仍要运行』——客户端正在申请代码签名。</text>

    <rect x="1052" y="2156" width="236" height="80" rx="14" fill="url(#btn2)"/>
    <path d="M1092 2188 v20 M1084 2198 l8 9 l8 -9 M1080 2220 h24" stroke="#fff" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
    <text x="1188" y="2191" text-anchor="middle" font-size="18" font-weight="700" fill="#fff">下载 .exe</text>
    <text x="1188" y="2214" text-anchor="middle" font-size="12.5" fill="#CFC9F5">前期由本站直连下载</text>
  </g>

  <!-- ============ FOOTER (editor status bar) ============ -->
  <rect x="0" y="2400" width="1440" height="200" fill="#0B0F18"/>
  <g>
    <circle cx="130" cy="2452" r="6" fill="#F4B152"/><circle cx="150" cy="2452" r="6" fill="#4FD6A0"/><circle cx="170" cy="2452" r="6" fill="#8B7CFF"/>
    <text x="196" y="2458" font-size="18" font-weight="700" class="txt">cmhub</text>
    <text x="120" y="2492" class="mono" font-size="13" fill="#5B6478">自助用户端 · 计费 AI 能力网关 · 运营后台，三合一。</text>

    <text x="740" y="2446" font-size="13" font-weight="600" class="mut">开发者</text>
    <text x="740" y="2474" font-size="13.5" class="dim">接口文档</text>
    <text x="740" y="2498" font-size="13.5" class="dim">可用模型</text>
    <text x="920" y="2446" font-size="13" font-weight="600" class="mut">账户</text>
    <text x="920" y="2474" font-size="13.5" class="dim">登录</text>
    <text x="920" y="2498" font-size="13.5" class="dim">免费注册</text>

    <text x="1320" y="2474" text-anchor="end" class="mono" font-size="12" fill="#4A5468">© 2026 cmhub · v1.0.0</text>
    <text x="1320" y="2498" text-anchor="end" class="mono" font-size="12" fill="#4A5468">粤ICP备 000000 号（占位）</text>
  </g>
</svg>