从 Eray 的帖子:解决xai等各种api国内无法使用问题 继续,用 Claude 重写了下主页文件。
站点示例:https://docx.vercel.app (国内有限访问)
查询了各个厂家的文档页,核对了请求格式,并挨个锚上了docs链接,代码和效果图见下方
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API Access 文档中心</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css" rel="stylesheet" />
<style>
:root {
--primary-color: #2563eb;
--secondary-color: #1e40af;
--background-color: #f8fafc;
--card-background: #ffffff;
--text-color: #1f2937;
--code-background: #f1f5f9;
}
body {
font-family: system-ui, -apple-system, sans-serif;
background-color: var(--background-color);
margin: 0;
padding: 20px;
color: var(--text-color);
line-height: 1.6;
}
.container {
max-width: 1000px;
margin: auto;
padding: 20px;
}
.header {
text-align: center;
margin-bottom: 40px;
padding: 40px 0;
background-color: var(--card-background);
border-radius: 16px;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
.header h1 {
margin: 0;
color: var(--primary-color);
font-size: 2.5rem;
}
.header p {
color: #64748b;
margin-top: 10px;
font-size: 1.1rem;
}
.api-section {
background-color: var(--card-background);
border-radius: 12px;
margin-bottom: 20px;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
overflow: hidden;
}
.api-header {
padding: 15px 20px;
background-color: var(--primary-color);
color: white;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.api-header:hover {
background-color: var(--secondary-color);
}
.api-content {
padding: 20px;
display: none;
}
.api-content.active {
display: block;
}
.code-block {
background-color: var(--code-background);
border-radius: 8px;
padding: 15px;
margin: 10px 0;
position: relative;
}
.copy-button {
position: absolute;
top: 10px;
right: 10px;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 4px;
padding: 5px 10px;
cursor: pointer;
font-size: 0.875rem;
}
.copy-button:hover {
background-color: var(--secondary-color);
}
.api-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
margin: 20px 0;
}
.api-card {
background-color: var(--card-background);
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
}
.badge {
display: inline-block;
padding: 4px 8px;
background-color: #e2e8f0;
border-radius: 4px;
font-size: 0.875rem;
margin-right: 5px;
margin-bottom: 5px;
}
.endpoint-url {
font-weight: bold;
color: var(--primary-color);
}
@media (max-width: 768px) {
.container {
padding: 10px;
}
.header {
padding: 20px 0;
}
.header h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>API Access 文档中心</h1>
<p>支持多种AI模型API的统一接入服务</p>
</div>
<div class="api-list">
<div class="api-card">
<h3>支持的API服务</h3>
<span class="badge">OpenAI</span>
<span class="badge">Gemini</span>
<span class="badge">Groq</span>
<span class="badge">Claude</span>
<span class="badge">Cohere</span>
<span class="badge">xAI</span>
<span class="badge">Mistral</span>
<span class="badge">GithubAI</span>
</div>
<div class="api-card">
<h3>部署区域</h3>
<span class="badge">HND1 (东京)</span>
</div>
</div>
<div class="api-section">
<div class="api-header" onclick="toggleSection('openai')">
<h2>OpenAI API</h2>
<span>▼</span>
</div>
<div class="api-content" id="openai">
<p>OpenAI API支持访问 <a href="https://platform.openai.com/docs/guides/text-generation" target="_blank">GPT</a> 模型。只需将原有请求中的域名改为我们的域名即可。</p>
<h4>基础URL</h4>
<div class="code-block">
<button class="copy-button" onclick="copyCode(this)">复制</button>
<code class="endpoint-url">${base_url}/openai/v1/</code>
</div>
<h4>示例代码</h4>
<div class="code-block">
<button class="copy-button" onclick="copyCode(this)">复制</button>
<pre>
curl ${base_url}/openai/v1/chat/completions \
-H "Content-Type: application/json" \
-H "Authorization: Bearer $OPENAI_API_KEY" \
-d '{
"model": "gpt-4o-2024-08-06",
"messages": [{"role": "user", "content": "Hello!"}]
}'</pre>
</div>
</div>
</div>
<div class="api-section">
<div class="api-header" onclick="toggleSection('gemini')">
<h2>Google Gemini API</h2>
<span>▼</span>
</div>
<div class="api-content" id="gemini">
<p>支持访问Google的 <a href="https://developers.googleblog.com/en/gemini-is-now-accessible-from-the-openai-library/" target="_blank">Gemini</a> 模型。使用方式与原生API完全一致。</p>
<h4>基础URL</h4>
<div class="code-block">
<button class="copy-button" onclick="copyCode(this)">复制</button>
<code class="endpoint-url">${base_url}/gemini/v1beta/</code>
</div>
<div class="code-block">
<button class="copy-button" onclick="copyCode(this)">复制</button>
<pre>
curl ${base_url}/gemini/v1beta/chat/completions \
-H "Content-Type: application/json" \
-H "Authorization: Bearer $GEMINI_API_KEY" \
-d '{
"model": "gemini-exp-1114",
"messages": [
{"role": "user", "content": "Explain to me how AI works"}
]
}'</pre>
</div>
</div>
</div>
<div class="api-section">
<div class="api-header" onclick="toggleSection('claude')">
<h2>Anthropic Claude API</h2>
<span>▼</span>
</div>
<div class="api-content" id="claude">
<p>支持访问 <a href="https://docs.anthropic.com/zh-CN/api/getting-started" target="_blank">Claude</a> 系列模型。</p>
<h4>基础URL</h4>
<div class="code-block">
<button class="copy-button" onclick="copyCode(this)">复制</button>
<code class="endpoint-url">${base_url}/claude/v1/</code>
</div>
<div class="code-block">
<button class="copy-button" onclick="copyCode(this)">复制</button>
<pre>
curl ${base_url}/claude/v1/messages \
-H "Content-Type: application/json" \
-H "x-api-key: $ANTHROPIC_API_KEY" \
-H "anthropic-version: 2023-06-01" \
-d '{
"model": "claude-3-5-sonnet-20241022",
"max_tokens": 1024,
"messages": [{"role": "user", "content": "Hello!"}]
}'</pre>
</div>
</div>
</div>
<div class="api-section">
<div class="api-header" onclick="toggleSection('groq')">
<h2>Groq API</h2>
<span>▼</span>
</div>
<div class="api-content" id="groq">
<p><a href="https://console.groq.com/docs/api-reference#chat" target="_blank">Groq </a>支持 OpenAI 格式的请求,提供更快的推理速度。</p>
<h4>基础URL</h4>
<div class="code-block">
<button class="copy-button" onclick="copyCode(this)">复制</button>
<code class="endpoint-url">${base_url}/groq/openai/v1/</code>
</div>
<div class="code-block">
<button class="copy-button" onclick="copyCode(this)">复制</button>
<pre>
curl ${base_url}/groq/openai/v1/chat/completions \
-H "Content-Type: application/json" \
-H "Authorization: Bearer $GROQ_API_KEY" \
-d '{
"model": "llama3-8b-8192",
"messages": [{"role": "user", "content": "Hello!"}]
}'</pre>
</div>
</div>
</div>
<div class="api-section">
<div class="api-header" onclick="toggleSection('cohere')">
<h2>Cohere API</h2>
<span>▼</span>
</div>
<div class="api-content" id="cohere">
<p>支持 <a href="https://docs.cohere.com/reference/chat" target="_blank">Cohere</a> 的各种模型和API端点。</p>
<h4>基础URL</h4>
<div class="code-block">
<button class="copy-button" onclick="copyCode(this)">复制</button>
<code class="endpoint-url">${base_url}/cohere/v2/</code>
</div>
<div class="code-block">
<button class="copy-button" onclick="copyCode(this)">复制</button>
<pre>
curl ${base_url}/cohere/v2/chat \
-H "Content-Type: application/json" \
-H "Authorization: Bearer $COHERE_API_KEY" \
-d '{
"model": "command-r-plus-08-2024",
"messages": [{"role": "user", "content": "Hello!"}],
"stream": true
}'</pre>
</div>
</div>
</div>
<div class="api-section">
<div class="api-header" onclick="toggleSection('xai')">
<h2>xAI (Grok) API</h2>
<span>▼</span>
</div>
<div class="api-content" id="xai">
<p>支持 <a href="https://docs.x.ai/docs/quickstart#making-your-first-request" target="_blank">xAI</a> 的 Grok 模型。</p>
<h4>基础URL</h4>
<div class="code-block">
<button class="copy-button" onclick="copyCode(this)">复制</button>
<code class="endpoint-url">${base_url}/xai/v1/</code>
</div>
<div class="code-block">
<button class="copy-button" onclick="copyCode(this)">复制</button>
<pre>
curl ${base_url}/xai/v1/chat/completions \
-H "Content-Type: application/json" \
-H "Authorization: Bearer $XAI_API_KEY" \
-d '{
"model": "grok-beta",
"messages": [
{
"role": "system",
"content": "You are Grok, a chatbot inspired by the Hitchhikers Guide to the Galaxy."
},
{
"role": "user",
"content": "What is the meaning of life, the universe, and everything?"
}
],
"stream": true,
"temperature":0
}'</pre>
</div>
</div>
</div>
<div class="api-section">
<div class="api-header" onclick="toggleSection('mistral')">
<h2>Mistral API</h2>
<span>▼</span>
</div>
<div class="api-content" id="mistral">
<p>支持 <a href="https://docs.mistral.ai/api/" target="_blank">Mistral</a> 的各种模型。</p>
<h4>基础URL</h4>
<div class="code-block">
<button class="copy-button" onclick="copyCode(this)">复制</button>
<code class="endpoint-url">${base_url}/mistral/v1/</code>
</div>
<div class="code-block">
<button class="copy-button" onclick="copyCode(this)">复制</button>
<pre>
curl ${base_url}/mistral/v1/chat/completions \
-H "Content-Type: application/json" \
-H "Authorization: Bearer $MISTRAL_API_KEY" \
-d '{
"model": "mistral-small-latest",
"messages": [{"role": "user", "content": "Hello!"}],
"stream": true
}'</pre>
</div>
</div>
</div>
<div class="api-section">
<div class="api-header" onclick="toggleSection('github')">
<h2>Github API</h2>
<span>▼</span>
</div>
<div class="api-content" id="github">
<p>支持 <a href="https://ai.azure.com/github/model/docs" target="_blank">Github AI</a> 的各种模型。</p>
<h4>基础URL</h4>
<div class="code-block">
<button class="copy-button" onclick="copyCode(this)">复制</button>
<code class="endpoint-url">${base_url}/github/v1/</code>
</div>
<div class="code-block">
<button class="copy-button" onclick="copyCode(this)">复制</button>
<pre>
curl ${base_url}/github/v1/chat/completions \
-H "Content-Type: application/json" \
-H "Authorization: Bearer $GITHUB_API_KEY" \
-d '{
"model": "gpt-4o",
"messages": [{"role": "user", "content": "Hello!"}],
"stream": true
}'</pre>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const BASE_URL = 'https://pua.vercel.app';
const elements = document.querySelectorAll('code');
elements.forEach(element => {
element.innerText = element.innerText.replace('${base_url}', BASE_URL);
});
const codeBlocks = document.querySelectorAll('pre');
codeBlocks.forEach(block => {
block.innerHTML = block.innerHTML.replace('${base_url}', BASE_URL);
});
});
function toggleSection(id) {
const content = document.getElementById(id);
const header = content.previousElementSibling;
const arrow = header.querySelector('span');
content.classList.toggle('active');
arrow.textContent = content.classList.contains('active') ? '▲' : '▼';
}
function copyCode(button) {
const codeBlock = button.nextElementSibling;
const textArea = document.createElement('textarea');
textArea.value = codeBlock.textContent.trim();
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
const originalText = button.textContent;
button.textContent = '已复制!';
setTimeout(() => {
button.textContent = originalText;
}, 2000);
}
</script>
</body>
</html>
注意:vercel 国内访问受限,需自定义域后使用
