forked from TingjiaInFuture/allbemcp
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex_zh.html
More file actions
338 lines (310 loc) · 16.4 KB
/
Copy pathindex_zh.html
File metadata and controls
338 lines (310 loc) · 16.4 KB
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
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AllBeAPI - 轻量级通用 SDK</title>
<meta name="description" content="轻量级通用 SDK，通过一致的 API 集成常用的第三方库。简化您的开发工作流程。">
<meta name="keywords" content="SDK, API, 轻量级, 通用, 开发, 集成, 第三方库">
<meta name="author" content="AllBeAPI 团队">
<!-- Open Graph -->
<meta property="og:title" content="AllBeAPI - 轻量级通用 SDK">
<meta property="og:description" content="通过我们的统一接口轻松集成流行库">
<meta property="og:type" content="website">
<meta property="og:url" content="https://allbeapi.com">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- Stylesheets -->
<link rel="stylesheet" href="assets/css/main.css">
<link rel="stylesheet" href="assets/css/components.css">
<!-- Preload critical resources -->
<link rel="preload" href="assets/css/main.css" as="style">
<link rel="preload" href="assets/js/main.js" as="script">
</head>
<body>
<!-- Language Switch -->
<div class="language-switch">
<div class="container">
<a href="index.html">English</a> | <a href="index_zh.html" class="active">中文</a>
</div>
</div>
<!-- Navigation -->
<nav class="navbar">
<div class="container">
<div class="navbar-content">
<a href="#" class="navbar-brand">AllBeAPI</a>
<ul class="navbar-nav">
<li><a href="#about" class="active">关于</a></li>
<li><a href="#features">特性</a></li>
<li><a href="#usage">使用示例</a></li>
<li><a href="docs/index_zh.html">文档</a></li>
<li><a href="https://github.com/TingjiaInFuture/allbeapi" target="_blank">GitHub</a></li>
</ul>
<div style="display: flex; align-items: center; gap: 1rem;">
<button class="theme-toggle" aria-label="切换主题">🌙</button>
</div>
</div>
</div>
</nav> <!-- Hero Section -->
<section class="hero">
<div class="container">
<div class="hero-content">
<h1>AI 赋能的下一代 API 平台</h1>
<p>AllBeAPI 从基础库集成发展为 AI 增强服务平台。在传统实用工具的基础上，提供图像处理、自然语言理解、智能文档转换和智能数据提取等前沿 AI 功能。</p>
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
<a href="#features" class="btn btn-primary btn-lg">探索 AI 功能</a>
<a href="https://github.com/TingjiaInFuture/allbeapi" target="_blank" class="btn btn-outline btn-lg">查看 GitHub</a>
<a href="docs/index_zh.html" class="btn btn-secondary btn-lg">查看文档</a>
</div>
</div>
</div>
</section> <!-- Stats Section -->
<section class="section">
<div class="container">
<div class="stats-grid">
<div class="stat-card">
<span class="stat-number">20+</span>
<span class="stat-label">当前与计划 API</span>
</div>
<div class="stat-card">
<span class="stat-number">AI</span>
<span class="stat-label">增强服务</span>
</div>
<div class="stat-card">
<span class="stat-number">REST</span>
<span class="stat-label">API 架构</span>
</div>
<div class="stat-card">
<span class="stat-number">MIT</span>
<span class="stat-label">开源协议</span>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="section section-alt">
<div class="container">
<h2 class="text-center">关于 AllBeAPI</h2>
<div class="grid grid-2" style="align-items: center; gap: 3rem;">
<div>
<p>一个<strong>轻量级的通用 SDK</strong>，通过一致的 API 集成了常用的第三方库。为各种功能提供单一访问点来简化开发，减少了学习和管理多个独立库及其依赖项的需求。</p>
<div class="alert alert-info">
<strong>💡 专业提示：</strong> 使用 AllBeAPI，您可以在不更改应用程序代码的情况下为相同功能切换不同的库。
</div>
</div>
<div>
<div class="code-example">
<div class="code-tabs">
<button class="code-tab active">JavaScript</button>
<button class="code-tab">Python</button>
</div>
<div class="code-content">
<pre class="code-block" data-language="javascript">const api = new AllBeApi();
// 将 Markdown 转换为 HTML
const html = await api.marked.render("# 你好世界");
// 生成二维码
const qrBlob = await api.pythonQrcode.generateQrcode("https://allbeapi.com");</pre>
<pre class="code-block" data-language="python" style="display: none;">from allbeapi import AllBeApi
api = AllBeApi()
# 将 Markdown 转换为 HTML
html = api.marked.render("# 你好世界")
# 生成二维码
qr_bytes = api.python_qrcode.generate_qrcode("https://allbeapi.com")</pre>
</div>
</div>
</div>
</div>
</div>
</section> <!-- Features Section -->
<section id="features" class="section">
<div class="container">
<h2 class="text-center">开箱即用的强大功能</h2>
<p class="text-center" style="font-size: 1.1rem; margin-bottom: 3rem; color: var(--text-secondary);">
通过单一、一致的 API 集成 13+ 个流行库
</p>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">📝</div>
<h3 class="feature-title">Markdown 处理</h3>
<p class="feature-description">使用 Marked.js 集成轻松将 Markdown 转换为 HTML，支持扩展和自定义渲染器。</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔍</div>
<h3 class="feature-title">HTML 解析与操作</h3>
<p class="feature-description">利用 BeautifulSoup 解析、提取数据和清理 HTML 内容，具有强大的 CSS 选择器。</p>
</div>
<div class="feature-card">
<div class="feature-icon">✨</div>
<h3 class="feature-title">代码格式化</h3>
<p class="feature-description">使用 Prettier 为 JavaScript、TypeScript、CSS、HTML 等语言美化您的代码。</p>
</div>
<div class="feature-card">
<div class="feature-icon">🎨</div>
<h3 class="feature-title">语法高亮</h3>
<p class="feature-description">使用 Pygments 为您的代码片段添加丰富的语法高亮，支持 500+ 种语言。</p>
</div>
<div class="feature-card">
<div class="feature-icon">📱</div>
<h3 class="feature-title">二维码生成</h3>
<p class="feature-description">使用 python-qrcode 快速生成二维码，支持各种格式和自定义选项。</p>
</div>
<div class="feature-card">
<div class="feature-icon">🛡️</div>
<h3 class="feature-title">HTML 清理</h3>
<p class="feature-description">通过 sanitize-html 的强大过滤功能清理 HTML 输入，防止 XSS 攻击。</p>
</div>
<div class="feature-card">
<div class="feature-icon">✅</div>
<h3 class="feature-title">JSON Schema 验证</h3>
<p class="feature-description">使用 Ajv（JavaScript 最快的 JSON schema 验证器）根据 Schema 验证 JSON 数据。</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔧</div>
<h3 class="feature-title">JavaScript/TypeScript Linting</h3>
<p class="feature-description">使用 ESLint 分析您的 JavaScript 和 TypeScript 代码，捕获错误并强制执行编码标准。</p>
</div>
<div class="feature-card">
<div class="feature-icon">📊</div>
<h3 class="feature-title">文本差异比较</h3>
<p class="feature-description">使用 Diff 比较文本并高亮显示差异，非常适合版本控制和变更跟踪。</p>
</div>
<div class="feature-card">
<div class="feature-icon">📋</div>
<h3 class="feature-title">CSV 解析</h3>
<p class="feature-description">使用 csv-parser 轻松将 CSV 数据转换为 JSON 格式，处理各种分隔符和格式。</p>
</div>
<div class="feature-card">
<div class="feature-icon">📈</div>
<h3 class="feature-title">图表生成</h3>
<p class="feature-description">使用 Mermaid CLI 从文本创建图表 - 流程图、序列图等等。</p>
</div>
<div class="feature-card">
<div class="feature-icon">📄</div>
<h3 class="feature-title">PDF 生成</h3>
<p class="feature-description">使用 PDFKit 以编程方式生成 PDF 文档，支持文本、图像和矢量图形。</p>
</div>
<div class="feature-card">
<div class="feature-icon">🖼️</div>
<h3 class="feature-title">图像处理</h3>
<p class="feature-description">使用 Pillow 执行各种图像操作 - 调整大小、旋转、过滤和格式转换。</p>
</div>
</div>
</div>
</section>
<!-- Usage Section -->
<section id="usage" class="section section-alt">
<div class="container">
<h2 class="text-center">易于使用的 SDK</h2>
<p class="text-center" style="font-size: 1.1rem; margin-bottom: 3rem; color: var(--text-secondary);">
我们提供流行语言的 SDK，助您快速上手
</p>
<div class="code-example">
<div class="code-tabs">
<button class="code-tab active">JavaScript</button>
<button class="code-tab">Python</button>
<button class="code-tab">cURL</button>
</div>
<div class="code-content">
<pre class="code-block" data-language="javascript">// 确保已引入 allbeapi.js
// <script src="SDK/JavaScript/allbeapi.js"></script>
const apiClient = new AllBeApi();
// 示例：将 Markdown 转换为 HTML
apiClient.marked.render("# 你好 AllBeAPI")
.then(response => {
console.log(response); // HTML 输出
// 假设响应是直接的 HTML 字符串或包含它的对象
// 如果是 { html: "<h1>你好 AllBeAPI</h1>" } 这样的对象, 请访问 response.html
})
.catch(error => console.error("错误:", error));
// 示例：生成二维码 (返回 Blob 对象)
apiClient.pythonQrcode.generateQrcode("https://res.allbeapi.top")
.then(blob => {
const imageUrl = URL.createObjectURL(blob);
console.log("二维码图片 URL:", imageUrl);
// 然后您可以在 <img> 标签中使用此 URL
// const imgElement = document.createElement('img');
// imgElement.src = imageUrl;
// document.body.appendChild(imgElement);
})
.catch(error => console.error("错误:", error));</pre>
<pre class="code-block" data-language="python" style="display: none;"># 确保 allbeapi.py 在您的 PYTHONPATH 中或与脚本在同一目录
# from allbeapi import AllBeApi # 假设文件名为 allbeapi.py
# 根据项目结构:
# import sys
# sys.path.append('SDK/Python') # 如果从不同根目录运行，请调整路径
# from allbeapi import AllBeApi
client = AllBeApi()
# 示例：将 Markdown 转换为 HTML
try:
html_output = client.marked.render("# 你好，来自 Python 的 AllBeAPI")
print(html_output) # 这很可能是一个 JSON 字符串或字典
except Exception as e:
print(f"错误: {e}")
# 示例：生成二维码 (返回字节流)
try:
qr_image_bytes = client.python_qrcode.generate_qrcode("https://res.allbeapi.top")
with open("example_qrcode_zh.png", "wb") as f:
f.write(qr_image_bytes) # 如果直接使用 requests，则是 response.content，否则是直接的字节流
print("二维码已保存至 example_qrcode_zh.png")
except Exception as e:
print(f"错误: {e}")</pre>
<pre class="code-block" data-language="bash" style="display: none;"># 将 Markdown 转换为 HTML
curl -X POST https://res.allbeapi.top/marked/render \
-H "Content-Type: application/json" \
-d '{"markdown": "# 你好 AllBeAPI"}'
# 生成二维码
curl -X POST https://res.allbeapi.top/python-qrcode/generate-qrcode \
-H "Content-Type: application/json" \
-d '{"data": "https://res.allbeapi.top"}' \
--output qrcode.png
# 格式化 JavaScript 代码
curl -X POST https://res.allbeapi.top/prettier/format \
-H "Content-Type: application/json" \
-d '{"code": "const x=1;", "parser": "babel"}'</pre>
</div>
</div>
<div class="text-center mt-4">
<p>
<a href="SDK/JavaScript/allbeapi.js" target="_blank" class="btn btn-outline">📄 JavaScript SDK</a>
<a href="SDK/Python/allbeapi.py" target="_blank" class="btn btn-outline" style="margin-left: 1rem;">🐍 Python SDK</a>
<a href="docs/api_zh.html" class="btn btn-primary" style="margin-left: 1rem;">📚 完整 API 文档</a>
</p>
</div>
</div>
</section>
<!-- Contribute Section -->
<section id="contribute" class="section">
<div class="container">
<h2 class="text-center">贡献力量</h2>
<div class="grid grid-2" style="align-items: center; gap: 3rem;">
<div>
<p>AllBeAPI 是一个开源项目。我们欢迎社区的贡献！无论是添加新的库集成、改进文档还是修复错误，我们都感谢您的帮助。</p>
<div class="alert alert-success">
<strong>🎉 加入我们的社区！</strong> 帮助我们构建最全面的开发者通用 SDK。
</div>
</div>
<div class="text-center">
<a href="https://github.com/TingjiaInFuture/allbeapi/issues" target="_blank" class="btn btn-success btn-lg">🐛 报告问题</a>
<a href="https://github.com/TingjiaInFuture/allbeapi/pulls" target="_blank" class="btn btn-info btn-lg mt-2">🔀 提交拉取请求</a>
<a href="docs/contributing_zh.html" class="btn btn-outline btn-lg mt-2">📖 贡献指南</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p>© <span id="currentYear"></span> AllBeAPI 项目. 基于 MIT 许可证授权。</p>
<p style="margin-top: 0.5rem; font-size: 0.875rem; opacity: 0.8;">
由开源社区用 ❤️ 构建
</p>
</div>
</footer>
<!-- Scripts -->
<script src="assets/js/main.js"></script>
<script src="SDK/JavaScript/allbeapi.js"></script>
<script>
document.getElementById("currentYear").textContent = new Date().getFullYear();
</script>
</body>
</html>