Spaces:
Running
Running
File size: 12,021 Bytes
ceb3821 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 | <link rel="stylesheet" href="components/section-guide.css">
<!-- Guide Section -->
<section id="guide" class="section" aria-labelledby="guide-title">
<h2 id="guide-title" data-i18n="guide.title">使用指南</h2>
<!-- 项目简介 -->
<div class="guide-panel">
<h3><i class="fas fa-info-circle"></i> <span data-i18n="guide.intro.title">项目简介</span></h3>
<div class="guide-content">
<p data-i18n="guide.intro.desc">AIClient2API 是一个突破客户端限制的 API 代理服务，将 Gemini、Antigravity、Qwen Code、Kiro 等原本仅限客户端内使用的免费大模型，转换为可供任何应用调用的标准 OpenAI 兼容接口。</p>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon"><i class="fas fa-plug"></i></div>
<h4 data-i18n="guide.intro.feature1.title">统一接入</h4>
<p data-i18n="guide.intro.feature1.desc">通过标准 OpenAI 兼容协议，一次配置即可接入多种大模型</p>
</div>
<div class="feature-card">
<div class="feature-icon"><i class="fas fa-rocket"></i></div>
<h4 data-i18n="guide.intro.feature2.title">突破限制</h4>
<p data-i18n="guide.intro.feature2.desc">利用 OAuth 授权机制，有效突破免费 API 速率和配额限制</p>
</div>
<div class="feature-card">
<div class="feature-icon"><i class="fas fa-exchange-alt"></i></div>
<h4 data-i18n="guide.intro.feature3.title">协议转换</h4>
<p data-i18n="guide.intro.feature3.desc">支持 OpenAI、Claude、Gemini 三大协议间的智能转换</p>
</div>
<div class="feature-card">
<div class="feature-icon"><i class="fas fa-server"></i></div>
<h4 data-i18n="guide.intro.feature4.title">账号池管理</h4>
<p data-i18n="guide.intro.feature4.desc">支持多账号轮询、自动故障转移和配置降级</p>
</div>
</div>
</div>
</div>
<!-- 操作流程图 -->
<div class="guide-panel">
<h3><i class="fas fa-project-diagram"></i> <span data-i18n="guide.flow.title">操作流程图</span></h3>
<div class="guide-content">
<div class="process-flow">
<div class="flow-step">
<div class="step-number">1</div>
<div class="step-content">
<h4 data-i18n="guide.flow.step1.title">配置管理</h4>
<p data-i18n="guide.flow.step1.desc">在「配置管理」页面设置基本参数</p>
<ul>
<li>设置 API Key</li>
<li>选择启动时初始化的模型提供商</li>
<li>配置高级选项</li>
</ul>
</div>
</div>
<div class="flow-arrow">→</div>
<div class="flow-step flow-step-branch">
<div class="step-number">2</div>
<div class="step-content">
<h4 data-i18n="guide.flow.step2.title">生成授权</h4>
<p data-i18n="guide.flow.step2.desc">在「提供商池管理」页面生成 OAuth 授权</p>
<div class="branch-options">
<div class="branch-option">
<div class="branch-label">方式一：OAuth 授权</div>
<ul>
<li>点击「生成授权」按钮</li>
<li>在弹窗中完成 OAuth 登录</li>
<li>凭据自动保存</li>
</ul>
</div>
<div class="branch-divider">或</div>
<div class="branch-option">
<div class="branch-label">方式二：手动上传</div>
<ul>
<li>新增提供商节点</li>
<li>上传已有的授权文件</li>
<li>手动关联凭据路径</li>
</ul>
</div>
</div>
</div>
</div>
<div class="flow-arrow">→</div>
<div class="flow-step">
<div class="step-number">3</div>
<div class="step-content">
<h4 data-i18n="guide.flow.step3.title">管理凭据</h4>
<p data-i18n="guide.flow.step3.desc">在「凭据文件管理」页面查看和管理凭据</p>
<ul>
<li>查看已生成的凭据文件</li>
<li>自动关联到提供商池</li>
<li>删除无效凭据</li>
</ul>
</div>
</div>
<div class="flow-arrow">→</div>
<div class="flow-step">
<div class="step-number">4</div>
<div class="step-content">
<h4 data-i18n="guide.flow.step4.title">开始使用</h4>
<p data-i18n="guide.flow.step4.desc">在「仪表盘」查看路由示例并开始调用 API</p>
<ul>
<li>查看路由调用示例</li>
<li>复制 API 端点地址</li>
<li>在客户端中配置使用</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- 客户端配置指南 -->
<div class="guide-panel">
<h3><i class="fas fa-desktop"></i> <span data-i18n="guide.client.title">客户端配置指南</span></h3>
<div class="guide-content">
<p data-i18n="guide.client.desc">以下是常见 AI 客户端的配置方法，将 API 端点设置为本服务地址即可使用：</p>
<div class="client-config-list">
<div class="client-config-item">
<h4><i class="fas fa-cherry"></i> Cherry Studio</h4>
<div class="config-steps">
<ol>
<li data-i18n="guide.client.cherry.step1">打开设置 → 模型服务商</li>
<li data-i18n="guide.client.cherry.step2">添加自定义服务商</li>
<li data-i18n="guide.client.cherry.step3">设置 API 地址为: <code>http://localhost:3000/{provider}/v1</code></li>
<li data-i18n="guide.client.cherry.step4">填入 API Key（配置文件中的 REQUIRED_API_KEY）</li>
</ol>
</div>
</div>
<div class="client-config-item">
<h4><i class="fas fa-terminal"></i> Cline / Continue</h4>
<div class="config-steps">
<ol>
<li data-i18n="guide.client.cline.step1">打开 VS Code 设置</li>
<li data-i18n="guide.client.cline.step2">搜索 Cline 或 Continue 配置</li>
<li data-i18n="guide.client.cline.step3">设置 API Base URL 为: <code>http://localhost:3000/{provider}/v1</code></li>
<li data-i18n="guide.client.cline.step4">填入 API Key 和模型名称</li>
</ol>
</div>
</div>
<div class="client-config-item">
<h4><i class="fas fa-code"></i> 通用 cURL 调用</h4>
<div class="config-steps">
<pre><code>curl http://localhost:3000/{provider}/v1/chat/completions \
-H "Content-Type: application/json" \
-H "Authorization: Bearer YOUR_API_KEY" \
-d '{
"model": "模型名称",
"messages": [{"role": "user", "content": "Hello!"}],
"max_tokens": 1000
}'</code></pre>
</div>
</div>
</div>
<div class="guide-note">
<i class="fas fa-lightbulb"></i>
<span data-i18n="guide.client.note">提示：将 {provider} 替换为实际的提供商路径，如 gemini-cli-oauth、claude-kiro-oauth 等。可在仪表盘的路由示例中查看完整路径。</span>
</div>
</div>
</div>
<!-- Ollama 协议使用 -->
<div class="guide-panel">
<h3><i class="fas fa-llama"></i> <span data-i18n="guide.ollama.title">Ollama 协议使用</span></h3>
<div class="guide-content">
<p data-i18n="guide.ollama.desc">本项目支持 Ollama 协议，可以通过统一接口访问所有支持的模型。</p>
<div class="api-example">
<h4 data-i18n="guide.ollama.listModels">列出所有可用模型</h4>
<pre><code>curl http://localhost:3000/ollama/api/tags \
-H "Authorization: Bearer YOUR_API_KEY"</code></pre>
</div>
<div class="api-example">
<h4 data-i18n="guide.ollama.chat">聊天接口</h4>
<pre><code>curl http://localhost:3000/ollama/api/chat \
-H "Content-Type: application/json" \
-H "Authorization: Bearer YOUR_API_KEY" \
-d '{
"model": "[Claude] claude-sonnet-4.5",
"messages": [{"role": "user", "content": "你好"}]
}'</code></pre>
</div>
</div>
</div>
<!-- 常见问题 -->
<div class="guide-panel">
<h3><i class="fas fa-question-circle"></i> <span data-i18n="guide.faq.title">常见问题</span></h3>
<div class="guide-content">
<div class="faq-list">
<div class="faq-item">
<div class="faq-question" data-i18n="guide.faq.q1">Q: 请求返回 404 错误怎么办？</div>
<div class="faq-answer" data-i18n="guide.faq.a1">A: 检查接口路径是否正确。某些客户端会自动在 Base URL 后追加路径，导致路径重复。请查看控制台中的实际请求 URL，移除多余的路径部分。</div>
</div>
<div class="faq-item">
<div class="faq-question" data-i18n="guide.faq.q2">Q: 请求返回 429 错误怎么办？</div>
<div class="faq-answer" data-i18n="guide.faq.a2">A: 429 表示请求频率过高。建议配置多个账号到提供商池，启用轮询机制；或配置 Fallback 链实现跨类型降级。</div>
</div>
<div class="faq-item">
<div class="faq-question" data-i18n="guide.faq.q3">Q: OAuth 授权失败怎么办？</div>
<div class="faq-answer" data-i18n="guide.faq.a3">A: 确保 OAuth 回调端口可访问（Gemini: 8085, Antigravity: 8086, Kiro: 19876-19880）。Docker 用户需确保已正确映射这些端口。</div>
</div>
<div class="faq-item">
<div class="faq-question" data-i18n="guide.faq.q5">Q: 流式响应中断怎么办？</div>
<div class="faq-answer" data-i18n="guide.faq.a5">A: 检查网络稳定性，增加客户端请求超时时间。如使用代理，确保代理支持长连接。</div>
</div>
</div>
</div>
</div>
</section> |