使用代理访问各AI平台的API

项目地址#

LLM Proxy

背景#

由于各个 AI 公司对于中国大陆限制了访问，导致我们无法直接访问这些地区的 API，所以需要使用代理来访问这些地区的 API。

比如 OpenAI 的 API 访问限制：

中国大陆地区无法访问
香港地区无法访问

解决方案#

在一台美国服务器上部署一个代理，然后使用这个代理来访问 AI API。

部署#

我这里添加了 mongoose 来存储请求记录，所以需要安装 mongoose，如果你不需要则跳过。

1
# 初始化项目
2
npm init -y
3
# 安装 mongoose
4
npm install mongoose

使用 pm2 来启动项目：

1
# 启动项目
2
pm2 start llm-proxy.js --name llm-proxy
3
# 使用环境变量
4
MONGODB_URI=mongodb://localhost:27017/llm-proxy PORT=8088 HOST=0.0.0.0 pm2 start llm-proxy.js --name llm-proxy
5
# 查看项目
6
pm2 list
7
# 停止项目
8
pm2 stop llm-proxy

代码#

代理代码#

1
// 导入 Node.js 内置模块
2
const http = require('http');
3
const https = require('https'); // 需要根据目标URL的协议选择 http 或 https
4
const fs = require('fs');
5
const path = require('path');
6
const { URL } = require('url');
7
const mongoose = require('mongoose');
8

9
// 获取环境变量
10
const PORT = process.env.PORT || 8088;
11
const HOST = process.env.HOST || '0.0.0.0';
12
const MONGODB_URI = process.env.MONGODB_URI || '';
13

14
// 如果 MONGODB_URI 存在，则使用 MongoDB 存储请求记录
15
let AiProxyUsage = null;
16
if (MONGODB_URI) {
17
  try {
18
    mongoose.connect(MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true });
19
    const AiProxyUsageSchema = new mongoose.Schema({
20
      type: {
21
        type: String,
22
        required: true,
23
      },
24
      createTime: {
25
        type: String,
26
        required: true,
27
      },
28
    });
29
    AiProxyUsage = mongoose?.models?.AiProxyUsage || mongoose.model('AiProxyUsage', AiProxyUsageSchema);
30
  } catch (error) {
31
    console.error(`Error connecting to MongoDB: ${error}`);
32
  }
33
}
34

35
// API 路由映射
36
const apiMapping = {
37
  '/discord': 'https://discord.com/api',
38
  '/telegram': 'https://api.telegram.org',
39
  '/openai': 'https://api.openai.com',
40
  '/claude': 'https://api.anthropic.com',
41
  '/gemini': 'https://generativelanguage.googleapis.com',
42
  '/meta': 'https://www.meta.ai/api', // 注意：实际的Meta API可能不同
43
  '/groq': 'https://api.groq.com/openai',
44
  '/xai': 'https://api.x.ai',
45
  '/cohere': 'https://api.cohere.ai',
46
  '/huggingface': 'https://api-inference.huggingface.co',
47
  '/together': 'https://api.together.xyz',
48
  '/novita': 'https://api.novita.ai',
49
  '/portkey': 'https://api.portkey.ai',
50
  '/fireworks': 'https://api.fireworks.ai',
51
  '/openrouter': 'https://openrouter.ai/api'
52
};
53

54
// 允许转发到目标 API 的请求头列表（小写）
55
const allowedHeaders = ['accept', 'content-type', 'authorization'];
56

57
// 辅助函数：从路径名中提取匹配的前缀和剩余部分
58
function extractPrefixAndRest(pathname, prefixes) {
59
  for (const prefix of prefixes) {
60
    if (pathname.startsWith(prefix)) {
61
      return [prefix, pathname.slice(prefix.length)];
62
    }
63
  }
64
  return [null, null];
65
}
66

67
// 创建 HTTP 服务器
68
const server = http.createServer(async (req, res) => {
69
  // 解析请求 URL
70
  // Node.js 的 req.url 只包含路径和查询参数，需要结合 host 来构造完整 URL
71
  const requestUrl = new URL(req.url, `http://${req.headers.host}`);
72
  const pathname = requestUrl.pathname;
73

74
  // 1. 处理根路径和 index.html -> 提供本地 HTML 文件
75
  if (pathname === '/' || pathname === '/index.html') {
76
    const filePath = path.join(__dirname, 'index.html'); // 假设 index.html 在脚本同级目录下
77
    fs.readFile(filePath, (err, data) => {
78
      if (err) {
79
        console.error(`Error reading index.html: ${err}`);
80
        res.writeHead(500, { 'Content-Type': 'text/plain' });
81
        res.end('Internal Server Error - Could not read index.html');
82
      } else {
83
        res.writeHead(200, { 'Content-Type': 'text/html' });
84
        res.end(data);
85
      }
86
    });
87
    return; // 结束请求处理
88
  }
89

90
  // 2. 处理 robots.txt
91
  if (pathname === '/robots.txt') {
92
    res.writeHead(200, { 'Content-Type': 'text/plain' });
93
    res.end('User-agent: *\nDisallow: /');
94
    return; // 结束请求处理
95
  }
96

97
  // 3. 处理 API 代理
98
  const [prefix, rest] = extractPrefixAndRest(pathname, Object.keys(apiMapping));
99

100
  if (!prefix) {
101
    // 如果路径不匹配任何已知前缀，返回 404
102
    res.writeHead(404, { 'Content-Type': 'text/plain' });
103
    res.end('Not Found');
104
    return; // 结束请求处理
105
  }
106

107
  // 构建目标 API 的 URL
108
  const targetBaseUrl = apiMapping[prefix];
109
  const targetUrl = `${targetBaseUrl}${rest}${requestUrl.search}`; // 包含查询参数
110

111
  // 准备转发请求的选项
112
  const options = {
113
    method: req.method,
114
    headers: {},
115
    // agent: targetBaseUrl.startsWith('https') ? new https.Agent({ keepAlive: true }) : new http.Agent({ keepAlive: true }) // 可选：使用 agent 进行连接复用
116
  };
117

118
  // 复制允许的请求头
119
  for (const key in req.headers) {
120
    if (allowedHeaders.includes(key.toLowerCase())) {
121
      options.headers[key] = req.headers[key];
122
    }
123
  }
124
  // 确保 host 头部设置为目标主机，而不是代理服务器的主机
125
  options.headers['host'] = new URL(targetBaseUrl).host;
126

127

128
  // 选择 http 或 https 模块进行请求
129
  const protocol = targetBaseUrl.startsWith('https') ? https : http;
130

131
  // 创建代理请求
132
  const proxyReq = protocol.request(targetUrl, options, (proxyRes) => {
133
    // 设置响应头
134
    // 复制目标服务器的响应头到客户端响应
135
    const responseHeaders = { ...proxyRes.headers }; // 复制一份
136

137
    // 添加额外的安全响应头
138
    responseHeaders['X-Content-Type-Options'] = 'nosniff';
139
    responseHeaders['X-Frame-Options'] = 'DENY';
140
    responseHeaders['Referrer-Policy'] = 'no-referrer';
141
    // 可以选择性地删除或修改某些从目标服务器传来的头，例如 'transfer-encoding'
142
    // delete responseHeaders['transfer-encoding'];
143

144
    // 将目标服务器的状态码和处理后的响应头写入客户端响应
145
    res.writeHead(proxyRes.statusCode, responseHeaders);
146

147
    // 将目标服务器的响应体流式传输到客户端响应
148
    proxyRes.pipe(res, { end: true });
149
  });
150

151
  // 处理代理请求错误
152
  proxyReq.on('error', (err) => {
153
    console.error(`Proxy request error: ${err}`);
154
    if (!res.headersSent) {
155
      res.writeHead(502, { 'Content-Type': 'text/plain' }); // 502 Bad Gateway
156
    }
157
    res.end('Bad Gateway');
158
  });
159

160
  // 使用 MongoDB 存储请求记录
161
  if (MONGODB_URI && AiProxyUsage) {
162
    const usage = new AiProxyUsage({
163
      type: prefix,
164
      createTime: new Date().toISOString(),
165
    });
166
    usage.save();
167
  }
168

169
  // 将客户端请求体流式传输到代理请求
170
  // 对于 GET, HEAD 等没有 body 的请求，这不会做任何事
171
  req.pipe(proxyReq, { end: true });
172

173
});
174

175
// 启动服务器
176
server.listen(PORT, HOST, () => {
177
  console.log(`Node.js proxy server running on http://${HOST}:${PORT}`);
178
  console.log(`Root path serves './index.html'`);
179
  console.log('Proxying the following prefixes:');
180
  Object.keys(apiMapping).forEach(prefix => {
181
    console.log(`  ${prefix} -> ${apiMapping[prefix]}`);
182
  });
183
});
184

185
// 可选：更优雅地处理关闭信号，以便 pm2 reload/stop
186
process.on('SIGINT', () => {
187
  console.log('SIGINT signal received: closing HTTP server');
188
  server.close(() => {
189
    console.log('HTTP server closed');
190
    process.exit(0);
191
  });
192
});

前端页面#

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3

4
<head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <link rel="icon"
8
    href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">
9
  <title>LLM Proxy - 简单、安全、高效</title>
10
  <!-- seo -->
11
  <meta name="description" content="LLM Proxy - 提供简单、安全、高效、免费的 API 代理服务，让您的 AI 应用更加稳定、快速。">
12
  <meta name="keywords" content="LLM Proxy, API Proxy, AI, 代理, 简单, 安全, 高效">
13
  <meta name="robots" content="index, follow">
14
  <meta name="googlebot" content="index, follow">
15
  <meta name="bingbot" content="index, follow">
16
  <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
17
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
18
  <script src="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/languages/javascript.min.js"></script>
19
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/styles/atom-one-light.min.css">
20
  <script>
21
    // Tailwind 配置
22
    tailwind.config = {
23
      theme: {
24
        extend: {
25
          fontFamily: {
26
            sans: ['-apple-system', 'BlinkMacSystemFont', 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', 'Arial', 'sans-serif'],
27
            mono: ['SF Mono', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace'],
28
          },
29
          maxWidth: {
30
            'screen-xl': '1280px',
31
          },
32
          colors: {
33
            'apple-blue': {
34
              50: '#E8F2FF',
35
              100: '#C9E0FF',
36
              200: '#A6CDFF',
37
              300: '#83BAFF',
38
              400: '#5FA7FF',
39
              500: '#3C94FF',
40
              600: '#0071E3', // Apple 按钮蓝
41
              700: '#0051A5',
42
              800: '#00356B',
43
              900: '#001A36',
44
            },
45
            'apple-gray': {
46
              50: '#F9F9F9', // 浅灰背景
47
              100: '#F5F5F7', // Apple 官网背景灰
48
              200: '#E8E8ED',
49
              300: '#D2D2D7',
50
              400: '#B1B1B6',
51
              500: '#86868B', // Apple 官网文字灰
52
              600: '#6E6E73',
53
              700: '#414144',
54
              800: '#2D2D2F',
55
              900: '#1D1D1F', // Apple 官网深色文字
56
            }
57
          },
58
          boxShadow: {
59
            'apple': '0 2px 5px -1px rgba(0, 0, 0, 0.1), 0 2px 5px -1px rgba(0, 0, 0, 0.06)',
60
            'apple-md': '0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.05)',
61
            'apple-lg': '0 10px 20px -5px rgba(0, 0, 0, 0.1), 0 5px 10px -5px rgba(0, 0, 0, 0.04)',
62
          },
63
          borderRadius: {
64
            'apple': '10px',
65
            'apple-sm': '6px'
66
          }
67
        }
68
      }
69
    }
70
  </script>
71
  <style type="text/tailwindcss">
72
    body {
73
      -webkit-font-smoothing: antialiased;
74
      -moz-osx-font-smoothing: grayscale;
75
      letter-spacing: -0.2px;
76
    }
77
    .copy-btn:disabled svg {
78
      color: theme('colors.green.500');
79
    }
80
    /* 苹果风格滚动条 */
81
    ::-webkit-scrollbar {
82
      width: 8px;
83
      height: 8px;
84
    }
85
    ::-webkit-scrollbar-track {
86
      background: #f3f4f6; /* gray-100 instead of apple-gray.100 */
87
      border-radius: 100px;
88
    }
89
    ::-webkit-scrollbar-thumb {
90
      background: #d1d5db; /* gray-300 instead of apple-gray.300 */
91
      border-radius: 100px;
92
    }
93
    ::-webkit-scrollbar-thumb:hover {
94
      background: #9ca3af; /* gray-400 instead of apple-gray.400 */
95
    }
96

97
    /* 代码高亮自定义样式 */
98
    pre {
99
      position: relative;
100
      background: #f9fafb; /* gray-50 instead of apple-gray.50 */
101
      border-radius: 0.375rem; /* rounded-md instead of borderRadius.apple-sm */
102
      margin: 0;
103
      padding: 1rem;
104
      overflow: auto;
105
    }
106
    pre code {
107
      font-family: theme('fontFamily.mono');
108
      font-size: 0.9rem;
109
      line-height: 1.5;
110
      display: block;
111
      padding: 0;
112
    }
113
    /* 关键词高亮样式 */
114
    .hljs-keyword {
115
      color: #0033cc;
116
      font-weight: 500;
117
    }
118
    /* 字符串高亮样式 */
119
    .hljs-string {
120
      color: #067d17;
121
    }
122
    /* 注释高亮样式 */
123
    .hljs-comment {
124
      color: #888888;
125
      font-style: italic;
126
    }
127
    /* 函数高亮样式 */
128
    .hljs-function {
129
      color: #6f42c1;
130
    }
131
    /* 数字高亮样式 */
132
    .hljs-number {
133
      color: #986801;
134
    }
135
    /* 属性高亮样式 */
136
    .hljs-attr, .hljs-property {
137
      color: #e36209;
138
    }
139
    .code-container {
140
      position: relative;
141
      border-radius: 0.375rem; /* rounded-md instead of borderRadius.apple-sm */
142
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow-sm instead of boxShadow.apple */
143
      overflow: hidden;
144
      width: 100%;
145
      max-width: 100%;
146
      margin: 0 auto;
147
    }
148
    .code-header {
149
      display: flex;
150
      justify-content: space-between;
151
      align-items: center;
152
      padding: 0.5rem 1rem;
153
      background: #f3f4f6; /* gray-100 instead of apple-gray.100 */
154
      border-bottom: 1px solid #e5e7eb; /* gray-200 instead of apple-gray.200 */
155
    }
156
    .code-title {
157
      font-size: 0.85rem;
158
      font-weight: 500;
159
      color: #4b5563; /* gray-600 instead of apple-gray.600 */
160
    }
161
    .code-copy-btn {
162
      background: transparent;
163
      border: none;
164
      cursor: pointer;
165
      padding: 0.25rem;
166
      border-radius: 4px;
167
      color: #6b7280; /* gray-500 instead of apple-gray.500 */
168
      transition: all 0.2s;
169
    }
170
    .code-copy-btn:hover {
171
      color: #2563eb; /* blue-600 instead of apple-blue.600 */
172
      background: rgba(0, 0, 0, 0.05);
173
    }
174
  </style>
175
  <script>
176
    // 确保highlight.js在页面加载完成后立即执行高亮
177
    window.onload = function () {
178
      hljs.configure({
179
        languages: ['javascript']
180
      });
181
      hljs.highlightAll();
182
    };
183
  </script>
184
</head>
185

186
<body class="bg-apple-gray-50 text-apple-gray-900 font-sans flex flex-col items-center min-h-screen py-8 px-4">
187

188
  <div class="w-full max-w-screen-xl space-y-6 md:space-y-8">
189

190
    <div class="bg-gradient-to-br from-blue-600 to-blue-400 rounded-apple shadow-apple-lg text-center p-8 md:p-12">
191
      <h1 class="text-4xl md:text-6xl font-medium tracking-tight mb-2 md:mb-3 text-white">LLM Proxy</h1>
192
      <h2 class="text-xl md:text-2xl font-light mb-6 md:mb-8 text-white/90">简单、安全、高效</h2>
193
      <p class="text-base md:text-xl leading-relaxed font-light text-white/90 mx-auto">
194
        使用美国西部服务器，免费提供简单、安全、高效的 API 代理服务，让您的 AI 应用更加稳定、快速。
195
      </p>
196
    </div>
197

198
    <div class="bg-white rounded-apple shadow-apple-md p-6 md:p-8">
199
      <h2 class="text-xl md:text-2xl font-medium text-apple-gray-900 mb-3 text-left">可用端点</h2>
200
      <p class="text-sm md:text-base font-light text-apple-gray-600 mb-6">选择并配置您需要的 AI 服务接口</p>
201
      <div class="overflow-x-auto rounded-apple-sm">
202
        <table class="w-full text-left text-sm md:text-base table-fixed">
203
          <thead>
204
            <tr>
205
              <th class="w-[18%] pb-3 pt-2 px-3 md:px-4 font-medium text-apple-gray-600 border-b border-apple-gray-200">
206
                服务
207
              </th>
208
              <th class="w-[42%] pb-3 pt-2 px-3 md:px-4 font-medium text-apple-gray-600 border-b border-apple-gray-200">
209
                代理地址
210
              </th>
211
              <th class="w-[40%] pb-3 pt-2 px-3 md:px-4 font-medium text-apple-gray-600 border-b border-apple-gray-200">
212
                原始地址</th>
213
            </tr>
214
          </thead>
215
          <tbody class="divide-y divide-apple-gray-200">
216
            <tr>
217
              <td class="py-3.5 px-3 md:px-4 font-medium text-apple-gray-800 align-middle">OpenAI</td>
218
              <td class="py-3.5 px-3 md:px-4 align-middle">
219
                <div class="flex items-center gap-1">
220
                  <span
221
                    class="font-mono text-apple-gray-600 break-words min-w-0 text-sm">https://llm-proxy.mihouo.com/openai</span>
222
                  <button
223
                    class="copy-btn flex-shrink-0 p-1.5 rounded-full text-apple-gray-500 hover:bg-apple-gray-100 hover:text-apple-blue-600 focus:outline-none focus:ring-1 focus:ring-apple-blue-500 transition-colors duration-150"
224
                    data-copy-text="https://llm-proxy.mihouo.com/openai" aria-label="复制地址">
225
                  </button>
226
                </div>
227
              </td>
228
              <td class="py-3.5 px-3 md:px-4 align-middle">
229
                <a href="https://platform.openai.com/docs/api-reference" target="_blank" rel="noopener noreferrer"
230
                  class="font-mono text-apple-blue-600 hover:underline break-words text-sm">https://api.openai.com</a>
231
              </td>
232
            </tr>
233
            <tr>
234
              <td class="py-3.5 px-3 md:px-4 font-medium text-apple-gray-800 align-middle">Anthropic Claude</td>
235
              <td class="py-3.5 px-3 md:px-4 align-middle">
236
                <div class="flex items-center gap-1">
237
                  <span
238
                    class="font-mono text-apple-gray-600 break-words min-w-0 text-sm">https://llm-proxy.mihouo.com/claude</span>
239
                  <button
240
                    class="copy-btn flex-shrink-0 p-1.5 rounded-full text-apple-gray-500 hover:bg-apple-gray-100 hover:text-apple-blue-600 focus:outline-none focus:ring-1 focus:ring-apple-blue-500 transition-colors duration-150"
241
                    data-copy-text="https://llm-proxy.mihouo.com/claude" aria-label="复制地址">
242
                  </button>
243
                </div>
244
              </td>
245
              <td class="py-3.5 px-3 md:px-4 align-middle">
246
                <a href="https://docs.anthropic.com/claude/reference/getting-started-with-the-api" target="_blank"
247
                  rel="noopener noreferrer"
248
                  class="font-mono text-apple-blue-600 hover:underline break-words text-sm">https://api.anthropic.com</a>
249
              </td>
250
            </tr>
251
            <tr>
252
              <td class="py-3.5 px-3 md:px-4 font-medium text-apple-gray-800 align-middle">Google Gemini</td>
253
              <td class="py-3.5 px-3 md:px-4 align-middle">
254
                <div class="flex items-center gap-1">
255
                  <span
256
                    class="font-mono text-apple-gray-600 break-words min-w-0 text-sm">https://llm-proxy.mihouo.com/gemini</span>
257
                  <button
258
                    class="copy-btn flex-shrink-0 p-1.5 rounded-full text-apple-gray-500 hover:bg-apple-gray-100 hover:text-apple-blue-600 focus:outline-none focus:ring-1 focus:ring-apple-blue-500 transition-colors duration-150"
259
                    data-copy-text="https://llm-proxy.mihouo.com/gemini" aria-label="复制地址">
260
                  </button>
261
                </div>
262
              </td>
263
              <td class="py-3.5 px-3 md:px-4 align-middle">
264
                <a href="https://ai.google.dev/api/rest" target="_blank" rel="noopener noreferrer"
265
                  class="font-mono text-apple-blue-600 hover:underline break-words text-sm">https://generativelanguage.googleapis.com</a>
266
              </td>
267
            </tr>
268
            <tr>
269
              <td class="py-3.5 px-3 md:px-4 font-medium text-apple-gray-800 align-middle">Groq</td>
270
              <td class="py-3.5 px-3 md:px-4 align-middle">
271
                <div class="flex items-center gap-1">
272
                  <span
273
                    class="font-mono text-apple-gray-600 break-words min-w-0 text-sm">https://llm-proxy.mihouo.com/groq</span>
274
                  <button
275
                    class="copy-btn flex-shrink-0 p-1.5 rounded-full text-apple-gray-500 hover:bg-apple-gray-100 hover:text-apple-blue-600 focus:outline-none focus:ring-1 focus:ring-apple-blue-500 transition-colors duration-150"
276
                    data-copy-text="https://llm-proxy.mihouo.com/groq" aria-label="复制地址">
277
                  </button>
278
                </div>
279
              </td>
280
              <td class="py-3.5 px-3 md:px-4 align-middle">
281
                <a href="https://console.groq.com/docs/api-reference" target="_blank" rel="noopener noreferrer"
282
                  class="font-mono text-apple-blue-600 hover:underline break-words text-sm">https://api.groq.com</a>
283
              </td>
284
            </tr>
285
            <tr>
286
              <td class="py-3.5 px-3 md:px-4 font-medium text-apple-gray-800 align-middle">Meta AI</td>
287
              <td class="py-3.5 px-3 md:px-4 align-middle">
288
                <div class="flex items-center gap-1">
289
                  <span
290
                    class="font-mono text-apple-gray-600 break-words min-w-0 text-sm">https://llm-proxy.mihouo.com/meta</span>
291
                  <button
292
                    class="copy-btn flex-shrink-0 p-1.5 rounded-full text-apple-gray-500 hover:bg-apple-gray-100 hover:text-apple-blue-600 focus:outline-none focus:ring-1 focus:ring-apple-blue-500 transition-colors duration-150"
293
                    data-copy-text="https://llm-proxy.mihouo.com/meta" aria-label="复制地址">
294
                  </button>
295
                </div>
296
              </td>
297
              <td class="py-3.5 px-3 md:px-4 align-middle">
298
                <a href="https://developers.facebook.com/docs/graph-api" target="_blank" rel="noopener noreferrer"
299
                  class="font-mono text-apple-blue-600 hover:underline break-words text-sm">https://developers.facebook.com/docs/graph-api</a>
300
              </td>
301
            </tr>
302
            <tr>
303
              <td class="py-3.5 px-3 md:px-4 font-medium text-apple-gray-800 align-middle">Cohere</td>
304
              <td class="py-3.5 px-3 md:px-4 align-middle">
305
                <div class="flex items-center gap-1">
306
                  <span
307
                    class="font-mono text-apple-gray-600 break-words min-w-0 text-sm">https://llm-proxy.mihouo.com/cohere</span>
308
                  <button
309
                    class="copy-btn flex-shrink-0 p-1.5 rounded-full text-apple-gray-500 hover:bg-apple-gray-100 hover:text-apple-blue-600 focus:outline-none focus:ring-1 focus:ring-apple-blue-500 transition-colors duration-150"
310
                    data-copy-text="https://llm-proxy.mihouo.com/cohere" aria-label="复制地址">
311
                  </button>
312
                </div>
313
              </td>
314
              <td class="py-3.5 px-3 md:px-4 align-middle">
315
                <a href="https://docs.cohere.com/reference/about" target="_blank" rel="noopener noreferrer"
316
                  class="font-mono text-apple-blue-600 hover:underline break-words text-sm">https://api.cohere.ai</a>
317
              </td>
318
            </tr>
319
            <tr>
320
              <td class="py-3.5 px-3 md:px-4 font-medium text-apple-gray-800 align-middle">Together AI</td>
321
              <td class="py-3.5 px-3 md:px-4 align-middle">
322
                <div class="flex items-center gap-1">
323
                  <span
324
                    class="font-mono text-apple-gray-600 break-words min-w-0 text-sm">https://llm-proxy.mihouo.com/together</span>
325
                  <button
326
                    class="copy-btn flex-shrink-0 p-1.5 rounded-full text-apple-gray-500 hover:bg-apple-gray-100 hover:text-apple-blue-600 focus:outline-none focus:ring-1 focus:ring-apple-blue-500 transition-colors duration-150"
327
                    data-copy-text="https://llm-proxy.mihouo.com/together" aria-label="复制地址">
328
                  </button>
329
                </div>
330
              </td>
331
              <td class="py-3.5 px-3 md:px-4 align-middle">
332
                <a href="https://docs.together.ai/reference/inference" target="_blank" rel="noopener noreferrer"
333
                  class="font-mono text-apple-blue-600 hover:underline break-words text-sm">https://api.together.xyz</a>
334
              </td>
335
            </tr>
336
            <tr>
337
              <td class="py-3.5 px-3 md:px-4 font-medium text-apple-gray-800 align-middle">X.ai (Grok)</td>
338
              <td class="py-3.5 px-3 md:px-4 align-middle">
339
                <div class="flex items-center gap-1">
340
                  <span
341
                    class="font-mono text-apple-gray-600 break-words min-w-0 text-sm">https://llm-proxy.mihouo.com/xai</span>
342
                  <button
343
                    class="copy-btn flex-shrink-0 p-1.5 rounded-full text-apple-gray-500 hover:bg-apple-gray-100 hover:text-apple-blue-600 focus:outline-none focus:ring-1 focus:ring-apple-blue-500 transition-colors duration-150"
344
                    data-copy-text="https://llm-proxy.mihouo.com/xai" aria-label="复制地址">
345
                  </button>
346
                </div>
347
              </td>
348
              <td class="py-3.5 px-3 md:px-4 align-middle">
349
                <a href="https://docs.x.ai/" target="_blank" rel="noopener noreferrer"
350
                  class="font-mono text-apple-blue-600 hover:underline break-words text-sm">https://api.x.ai</a>
351
              </td>
352
            </tr>
353
            <tr>
354
              <td class="py-3.5 px-3 md:px-4 font-medium text-apple-gray-800 align-middle">Hugging Face</td>
355
              <td class="py-3.5 px-3 md:px-4 align-middle">
356
                <div class="flex items-center gap-1">
357
                  <span
358
                    class="font-mono text-apple-gray-600 break-words min-w-0 text-sm">https://llm-proxy.mihouo.com/huggingface</span>
359
                  <button
360
                    class="copy-btn flex-shrink-0 p-1.5 rounded-full text-apple-gray-500 hover:bg-apple-gray-100 hover:text-apple-blue-600 focus:outline-none focus:ring-1 focus:ring-apple-blue-500 transition-colors duration-150"
361
                    data-copy-text="https://llm-proxy.mihouo.com/huggingface" aria-label="复制地址">
362
                  </button>
363
                </div>
364
              </td>
365
              <td class="py-3.5 px-3 md:px-4 align-middle">
366
                <a href="https://huggingface.co/docs/api-inference/index" target="_blank" rel="noopener noreferrer"
367
                  class="font-mono text-apple-blue-600 hover:underline break-words text-sm">https://api-inference.huggingface.co</a>
368
              </td>
369
            </tr>
370
            <tr>
371
              <td class="py-3.5 px-3 md:px-4 font-medium text-apple-gray-800 align-middle">OpenRouter</td>
372
              <td class="py-3.5 px-3 md:px-4 align-middle">
373
                <div class="flex items-center gap-1">
374
                  <span
375
                    class="font-mono text-apple-gray-600 break-words min-w-0 text-sm">https://llm-proxy.mihouo.com/openrouter</span>
376
                  <button
377
                    class="copy-btn flex-shrink-0 p-1.5 rounded-full text-apple-gray-500 hover:bg-apple-gray-100 hover:text-apple-blue-600 focus:outline-none focus:ring-1 focus:ring-apple-blue-500 transition-colors duration-150"
378
                    data-copy-text="https://llm-proxy.mihouo.com/openrouter" aria-label="复制地址">
379
                  </button>
380
                </div>
381
              </td>
382
              <td class="py-3.5 px-3 md:px-4 align-middle">
383
                <a href="https://openrouter.ai/docs" target="_blank" rel="noopener noreferrer"
384
                  class="font-mono text-apple-blue-600 hover:underline break-words text-sm">https://openrouter.ai/api</a>
385
              </td>
386
            </tr>
387
            <tr>
388
              <td class="py-3.5 px-3 md:px-4 font-medium text-apple-gray-800 align-middle">Fireworks AI</td>
389
              <td class="py-3.5 px-3 md:px-4 align-middle">
390
                <div class="flex items-center gap-1">
391
                  <span
392
                    class="font-mono text-apple-gray-600 break-words min-w-0 text-sm">https://llm-proxy.mihouo.com/fireworks</span>
393
                  <button
394
                    class="copy-btn flex-shrink-0 p-1.5 rounded-full text-apple-gray-500 hover:bg-apple-gray-100 hover:text-apple-blue-600 focus:outline-none focus:ring-1 focus:ring-apple-blue-500 transition-colors duration-150"
395
                    data-copy-text="https://llm-proxy.mihouo.com/fireworks" aria-label="复制地址">
396
                  </button>
397
                </div>
398
              </td>
399
              <td class="py-3.5 px-3 md:px-4 align-middle">
400
                <a href="https://readme.fireworks.ai/reference/introduction" target="_blank" rel="noopener noreferrer"
401
                  class="font-mono text-apple-blue-600 hover:underline break-words text-sm">https://api.fireworks.ai</a>
402
              </td>
403
            </tr>
404
            <tr>
405
              <td class="py-3.5 px-3 md:px-4 font-medium text-apple-gray-800 align-middle">Portkey AI</td>
406
              <td class="py-3.5 px-3 md:px-4 align-middle">
407
                <div class="flex items-center gap-1">
408
                  <span
409
                    class="font-mono text-apple-gray-600 break-words min-w-0 text-sm">https://llm-proxy.mihouo.com/portkey</span>
410
                  <button
411
                    class="copy-btn flex-shrink-0 p-1.5 rounded-full text-apple-gray-500 hover:bg-apple-gray-100 hover:text-apple-blue-600 focus:outline-none focus:ring-1 focus:ring-apple-blue-500 transition-colors duration-150"
412
                    data-copy-text="https://llm-proxy.mihouo.com/portkey" aria-label="复制地址">
413
                  </button>
414
                </div>
415
              </td>
416
              <td class="py-3.5 px-3 md:px-4 align-middle">
417
                <a href="https://portkey.ai/docs/api-reference/introduction" target="_blank" rel="noopener noreferrer"
418
                  class="font-mono text-apple-blue-600 hover:underline break-words text-sm">https://api.portkey.ai</a>
419
              </td>
420
            </tr>
421
            <tr>
422
              <td class="py-3.5 px-3 md:px-4 font-medium text-apple-gray-800 align-middle">Novita AI</td>
423
              <td class="py-3.5 px-3 md:px-4 align-middle">
424
                <div class="flex items-center gap-1">
425
                  <span
426
                    class="font-mono text-apple-gray-600 break-words min-w-0 text-sm">https://llm-proxy.mihouo.com/novita</span>
427
                  <button
428
                    class="copy-btn flex-shrink-0 p-1.5 rounded-full text-apple-gray-500 hover:bg-apple-gray-100 hover:text-apple-blue-600 focus:outline-none focus:ring-1 focus:ring-apple-blue-500 transition-colors duration-150"
429
                    data-copy-text="https://llm-proxy.mihouo.com/novita" aria-label="复制地址">
430
                  </button>
431
                </div>
432
              </td>
433
              <td class="py-3.5 px-3 md:px-4 align-middle">
434
                <a href="https://docs.novita.ai/api-reference" target="_blank" rel="noopener noreferrer"
435
                  class="font-mono text-apple-blue-600 hover:underline break-words text-sm">https://api.novita.ai</a>
436
              </td>
437
            </tr>
438
            <tr>
439
              <td class="py-3.5 px-3 md:px-4 font-medium text-apple-gray-800 align-middle">Discord</td>
440
              <td class="py-3.5 px-3 md:px-4 align-middle">
441
                <div class="flex items-center gap-1">
442
                  <span
443
                    class="font-mono text-apple-gray-600 break-words min-w-0 text-sm">https://llm-proxy.mihouo.com/discord</span>
444
                  <button
445
                    class="copy-btn flex-shrink-0 p-1.5 rounded-full text-apple-gray-500 hover:bg-apple-gray-100 hover:text-apple-blue-600 focus:outline-none focus:ring-1 focus:ring-apple-blue-500 transition-colors duration-150"
446
                    data-copy-text="https://llm-proxy.mihouo.com/discord" aria-label="复制地址">
447
                  </button>
448
                </div>
449
              </td>
450
              <td class="py-3.5 px-3 md:px-4 align-middle">
451
                <a href="https://discord.com/developers/docs/intro" target="_blank" rel="noopener noreferrer"
452
                  class="font-mono text-apple-blue-600 hover:underline break-words text-sm">https://discord.com/api</a>
453
              </td>
454
            </tr>
455
            <tr>
456
              <td class="py-3.5 px-3 md:px-4 font-medium text-apple-gray-800 align-middle">Telegram</td>
457
              <td class="py-3.5 px-3 md:px-4 align-middle">
458
                <div class="flex items-center gap-1">
459
                  <span
460
                    class="font-mono text-apple-gray-600 break-words min-w-0 text-sm">https://llm-proxy.mihouo.com/telegram</span>
461
                  <button
462
                    class="copy-btn flex-shrink-0 p-1.5 rounded-full text-apple-gray-500 hover:bg-apple-gray-100 hover:text-apple-blue-600 focus:outline-none focus:ring-1 focus:ring-apple-blue-500 transition-colors duration-150"
463
                    data-copy-text="https://llm-proxy.mihouo.com/telegram" aria-label="复制地址">
464
                  </button>
465
                </div>
466
              </td>
467
              <td class="py-3.5 px-3 md:px-4 align-middle">
468
                <a href="https://core.telegram.org/bots/api" target="_blank" rel="noopener noreferrer"
469
                  class="font-mono text-apple-blue-600 hover:underline break-words text-sm">https://core.telegram.org/bots/api</a>
470
              </td>
471
            </tr>
472
          </tbody>
473
        </table>
474
      </div>
475
    </div>
476

477
    <!-- 使用示例 -->
478
    <div class="bg-white rounded-apple shadow-apple-md p-6 md:p-8 text-center">
479
      <h2 class="text-xl md:text-2xl font-medium mb-4 text-apple-gray-800">使用示例</h2>
480
      <p class="text-base md:text-lg font-light text-apple-gray-600 mb-6">通过几行简单的代码，即可轻松连接到 API 服务</p>
481

482
      <div class="code-container mx-auto text-left">
483
        <div class="code-header">
484
          <span class="code-title">JavaScript</span>
485
          <button class="code-copy-btn" aria-label="复制代码">
486
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-4 h-4"
487
              viewBox="0 0 16 16">
488
              <path
489
                d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z">
490
              </path>
491
              <path
492
                d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z">
493
              </path>
494
            </svg>
495
          </button>
496
        </div>
497
        <pre><code class="language-javascript">// 导入 OpenAI 库
498
const { OpenAI } = require('openai');
499

500
// 创建 API 客户端实例
501
const openai = new OpenAI({
502
  apiKey: 'sk-**************************************',
503
  baseURL: 'https://llm-proxy.mihouo.com/openai/v1',
504
});
505

506
// 发送请求示例
507
async function generateResponse() {
508
  const response = await openai.chat.completions.create({
509
    model: "gpt-3.5-turbo",
510
    messages: [
511
      { role: "system", content: "你是一个专业的AI助手。" },
512
      { role: "user", content: "你好，请介绍一下自己。" }
513
    ],
514
    temperature: 0.7,
515
  });
516

517
  console.log(response.choices[0].message.content);
518
}</code></pre>
519
      </div>
520
    </div>
521

522
    <div class="bg-white rounded-apple shadow-apple-md p-6 text-center">
523
      <div class="flex flex-col md:flex-row items-center justify-center space-y-2 md:space-y-0 md:space-x-8">
524
        <p class="flex items-center text-apple-gray-500 text-sm">
525
          <span class="inline-block w-2.5 h-2.5 bg-green-500 rounded-full mr-2"></span>
526
          <span class="font-light">状态：</span>
527
          <span class="text-apple-gray-700 font-medium ml-1">运行中</span>
528
        </p>
529
        <p class="text-sm text-apple-gray-500">
530
          <span class="font-light">北京时间：</span>
531
          <span id="live-time" class="font-medium text-apple-gray-700 ml-1">加载中...</span>
532
        </p>
533
      </div>
534
    </div>
535

536
  </div>
537
  <script>
538
    // 时间更新脚本
539
    function updateLiveTime() {
540
      const timeElement = document.getElementById('live-time');
541
      if (timeElement) {
542
        const now = new Date();
543
        const beijingTime = now.toLocaleString('zh-CN', {
544
          timeZone: 'Asia/Shanghai',
545
          hour12: false,
546
          year: 'numeric', month: '2-digit', day: '2-digit',
547
          hour: '2-digit', minute: '2-digit', second: '2-digit'
548
        });
549
        timeElement.textContent = beijingTime.replace(/[\/]/g, '-').replace(/\s+/g, ' ').trim();
550
      }
551
    }
552
    updateLiveTime();
553
    setInterval(updateLiveTime, 1000);
554

555
    // --- 复制按钮脚本 ---
556
    document.addEventListener('DOMContentLoaded', () => {
557
      const copyButtons = document.querySelectorAll('.copy-btn');
558

559
      // 确保在DOM加载完成后再次尝试高亮
560
      hljs.configure({
561
        languages: ['javascript']
562
      });
563
      hljs.highlightAll();
564

565
      // 代码块复制功能
566
      const codeBlock = document.querySelector('pre code');
567
      const codeCopyBtn = document.querySelector('.code-copy-btn');
568

569
      if (codeBlock && codeCopyBtn) {
570
        codeCopyBtn.addEventListener('click', () => {
571
          const code = codeBlock.textContent;
572

573
          navigator.clipboard.writeText(code).then(() => {
574
            // 复制成功反馈
575
            const originalSvg = codeCopyBtn.innerHTML;
576

577
            // 替换为成功图标
578
            codeCopyBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-4 h-4 text-green-500" viewBox="0 0 16 16"><path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"/></svg>`;
579

580
            // 1.5秒后恢复原始图标
581
            setTimeout(() => {
582
              codeCopyBtn.innerHTML = originalSvg;
583
            }, 1500);
584
          }).catch(err => {
585
            console.error('无法复制代码: ', err);
586
            alert('复制失败，请手动复制。');
587
          });
588
        });
589
      }
590

591
      // SVG Icons - 苹果风格图标
592
      const originalIconSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-4 h-4" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>`;
593
      const successIconSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-4 h-4" viewBox="0 0 16 16"><path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"/></svg>`;
594

595
      copyButtons.forEach(button => {
596
        button.innerHTML = originalIconSvg; // 设置初始图标
597

598
        button.addEventListener('click', () => {
599
          const textToCopy = button.dataset.copyText;
600

601
          if (!textToCopy) {
602
            console.error('无复制内容');
603
            return;
604
          }
605
          if (!navigator.clipboard) {
606
            console.error('剪贴板 API 不可用');
607
            alert('抱歉，您的浏览器不支持或未启用剪贴板功能。');
608
            return;
609
          }
610

611
          navigator.clipboard.writeText(textToCopy).then(() => {
612
            // 成功反馈 - 苹果风格的平滑过渡
613
            button.innerHTML = successIconSvg;
614
            button.disabled = true;
615

616
            setTimeout(() => {
617
              button.innerHTML = originalIconSvg; // 恢复图标
618
              button.disabled = false;
619
            }, 1500); // 1.5秒后恢复
620

621
          }).catch(err => {
622
            console.error('无法复制文本: ', err);
623
            alert('复制失败，请手动复制。');
624
          });
625
        });
626
      });
627
    });
628
  </script>
629
</body>
630

631
</html>