zoushiyang/page-agent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: update model integration doc

Browse Source
This commit is contained in:
Simon
2025-12-22 19:41:47 +08:00
parent 35db15460e
commit f521bd9beb
4 changed files with 112 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.vscode/settings.json vendored
View File

@@ -1,10 +1,12 @@
{ {
"editor.fontLigatures": true, "editor.fontLigatures": true,
"cSpell.words": [ "cSpell.words": [
"deepseek",
"HITL", "HITL",
"innerhtml", "innerhtml",
"llms", "llms",
"opensource", "opensource",
"qwen",
"retryable", "retryable",
"wouter" "wouter"
], ],

231
packages/website/src/docs/features/model-integration/page.tsx
View File

@@ -1,164 +1,133 @@
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import BetaNotice from '@/components/BetaNotice'
import CodeEditor from '@/components/CodeEditor' import CodeEditor from '@/components/CodeEditor'
// Recommended models: lightweight with excellent tool call capabilities
const MODELS = {
recommended: [
'gpt-4.1-mini',
'claude-haiku-4.5',
'gemini-3-flash',
'deepseek-3.2',
'qwen-3-max',
'gpt-5.2',
],
verified: [
'gpt-4.1',
'gpt-5',
'gpt-5-mini',
'gpt-5.1',
'grok-4',
'grok-code-fast',
'qwen3-max',
'deepseek-v3.2',
'claude-sonnet-3.5',
'claude-sonnet-4.5',
'gemini-2.5',
'gemini-3-pro',
],
}
export default function ModelIntegration() { export default function ModelIntegration() {
const { t } = useTranslation('docs') const { t } = useTranslation('docs')
const allModels = [...MODELS.recommended, ...MODELS.verified]
return ( return (
<div> <div className="max-w-4xl">
<h1 className="text-4xl font-bold mb-6">{t('model_integration.title')}</h1> <h1 className="text-4xl font-bold mb-4">{t('model_integration.title')}</h1>
<p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
<p className="text-xl text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
{t('model_integration.subtitle')} {t('model_integration.subtitle')}
</p> </p>
<h2 className="text-2xl font-bold mb-3">{t('model_integration.recommended')}</h2> {/* Models Section */}
<section className="mb-10">
<div className="grid md:grid-cols-3 gap-4 mb-6"> <h2 className="text-2xl font-semibold mb-3">{t('model_integration.available')}</h2>
<div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg"> <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
<h3 className="text-lg font-semibold mb-2 text-green-900 dark:text-green-300"> {t('model_integration.recommendation_logic')}
{t('model_integration.model_gpt4_title')}
</h3>
<p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
{t('model_integration.model_gpt4_badge')}
</p>
<ul className="text-sm text-gray-500 dark:text-gray-400 space-y-1">
<li>{t('model_integration.model_gpt4_1')}</li>
<li>{t('model_integration.model_gpt4_2')}</li>
<li>{t('model_integration.model_gpt4_3')}</li>
</ul>
</div>
<div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
<h3 className="text-lg font-semibold mb-2 text-purple-900 dark:text-purple-300">
{t('model_integration.model_deepseek_title')}
</h3>
<p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
{t('model_integration.model_deepseek_badge')}
</p>
<ul className="text-sm text-gray-500 dark:text-gray-400 space-y-1">
<li>{t('model_integration.model_deepseek_1')}</li>
<li>{t('model_integration.model_deepseek_2')}</li>
<li>{t('model_integration.model_deepseek_3')}</li>
</ul>
</div>
<div className="p-4 bg-orange-50 dark:bg-orange-900/20 rounded-lg">
<h3 className="text-lg font-semibold mb-2 text-orange-900 dark:text-orange-300">
{t('model_integration.model_qwen_title')}
</h3>
<p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
{t('model_integration.model_qwen_badge')}
</p>
<ul className="text-sm text-gray-500 dark:text-gray-400 space-y-1">
<li>{t('model_integration.model_qwen_1')}</li>
<li>{t('model_integration.model_qwen_2')}</li>
<li>{t('model_integration.model_qwen_3')}</li>
</ul>
</div>
<div className="p-4 bg-orange-50 dark:bg-orange-900/20 rounded-lg">
<h3 className="text-lg font-semibold mb-2 text-orange-900 dark:text-orange-300">
{t('model_integration.model_gemini_title')}
</h3>
<p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
{t('model_integration.model_gemini_badge')}
</p>
</div>
</div>
<h2 className="text-2xl font-bold mb-3">{t('model_integration.available')}</h2>
<div className="p-4 bg-emerald-50 dark:bg-emerald-900/20 rounded-lg mb-6">
<h3 className="text-lg font-semibold mb-3 text-emerald-900 dark:text-emerald-300">
{t('model_integration.available_verified')}
</h3>
<div className="flex flex-wrap gap-2">
<span className="inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-900 dark:text-emerald-200 px-3 py-1 text-sm">
gpt-4.1-mini/4.1/5
</span>
<span className="inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-900 dark:text-emerald-200 px-3 py-1 text-sm">
grok-4/grok-code-fast
</span>
<span className="inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-900 dark:text-emerald-200 px-3 py-1 text-sm">
qwen3
</span>
<span className="inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-900 dark:text-emerald-200 px-3 py-1 text-sm">
deepseek-v3.1/3.2
</span>
<span className="inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-900 dark:text-emerald-200 px-3 py-1 text-sm">
claude-sonnet-4/4.5/haiku-4.5
</span>
<span className="inline-flex items-center rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-900 dark:text-emerald-200 px-3 py-1 text-sm">
gemini-2.5
</span>
</div>
</div>
<h2 className="text-2xl font-bold mb-3">{t('model_integration.tips')}</h2>
<div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg mb-6">
<ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1 list-disc pl-5">
<li>{t('model_integration.tip_1')}</li>
<li>{t('model_integration.tip_2')}</li>
<li>{t('model_integration.tip_3')}</li>
</ul>
</div>
<h2 className="text-2xl font-bold mb-3">{t('model_integration.security')}</h2>
<div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 border-l-4 border-yellow-500 mb-4">
<p className="text-sm font-semibold text-yellow-900 dark:text-yellow-200">
{t('model_integration.security_warning')}
</p> </p>
</div> <div className="bg-linear-to-br from-emerald-50 to-cyan-50 dark:from-emerald-950/30 dark:to-cyan-950/30 rounded-xl p-6 border border-emerald-200/50 dark:border-emerald-800/50">
<div className="flex flex-wrap gap-2">
{allModels.map((model) => {
const isRecommended = MODELS.recommended.includes(model)
return (
<div
key={model}
className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
isRecommended
? 'bg-emerald-500 text-white shadow-sm'
: 'bg-white/60 dark:bg-gray-800/60 text-gray-700 dark:text-gray-300'
}`}
>
{model}
{isRecommended && <span className="ml-1">⭐</span>}
</div>
)
})}
</div>
</div>
</section>
<p className="text-gray-600 dark:text-gray-300 mb-4"> {/* Tips Section */}
{t('model_integration.security_desc')} <section className="mb-10">
</p> <h2 className="text-2xl font-semibold mb-4">{t('model_integration.tips')}</h2>
<div className="p-4 bg-blue-50 dark:bg-blue-950/20 rounded-lg border border-blue-200 dark:border-blue-800">
<ul className="text-sm text-gray-700 dark:text-gray-300 space-y-2 list-disc pl-5">
<li>{t('model_integration.tip_2')}</li>
<li>{t('model_integration.tip_3')}</li>
</ul>
</div>
</section>
<div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg mb-6"> {/* Security Section */}
<h3 className="text-lg font-semibold mb-3 text-blue-900 dark:text-blue-300"> <section className="mb-10">
{t('model_integration.security_backend_proxy')} <h2 className="text-2xl font-semibold mb-4">{t('model_integration.security')}</h2>
</h3> <div className="bg-yellow-50 dark:bg-yellow-950/20 border-l-4 border-yellow-500 p-5 rounded-r-lg mb-4">
<p className="text-sm text-gray-600 dark:text-gray-300 mb-3"> <p className="text-sm font-semibold text-yellow-900 dark:text-yellow-200">
{t('model_integration.security_backend_desc')} {t('model_integration.security_warning')}
</p> </p>
<ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1 list-none pl-0"> </div>
<li>{t('model_integration.security_method_1')}</li> <div className="bg-gray-50 dark:bg-gray-900/30 rounded-lg p-5 border border-gray-200 dark:border-gray-800">
<li>{t('model_integration.security_method_2')}</li> <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-2">
<li>{t('model_integration.security_method_3')}</li> {t('model_integration.security_backend_proxy')}
</ul> </h3>
</div> <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
{t('model_integration.security_backend_desc')}
</p>
<ul className="text-sm text-gray-600 dark:text-gray-400 space-y-1">
<li>{t('model_integration.security_method_1')}</li>
<li>{t('model_integration.security_method_2')}</li>
<li>{t('model_integration.security_method_3')}</li>
</ul>
</div>
</section>
<h2 className="text-2xl font-bold mb-3">{t('model_integration.configuration')}</h2> {/* Configuration Section */}
<section className="mb-10">
<CodeEditor <h2 className="text-2xl font-semibold mb-4">{t('model_integration.configuration')}</h2>
code={` <CodeEditor
// 百炼等其他兼容服务 code={`// OpenAI-compatible services (e.g., Alibaba Bailian)
const pageAgent = new PageAgent({ const pageAgent = new PageAgent({
baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1', baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
apiKey: 'your-api-key', apiKey: 'your-api-key',
model: 'qwen-plus' model: 'qwen-plus'
}); });
// 私有部署模型 // Self-hosted models (e.g., Ollama)
const pageAgent = new PageAgent({ const pageAgent = new PageAgent({
baseURL: 'http://localhost:11434/v1', baseURL: 'http://localhost:11434/v1',
apiKey: 'N/A', // Ollama 通常使用任意值 apiKey: 'N/A', // Ollama typically accepts any value
model: 'qwen3:latest' model: 'qwen3:latest'
}); });
// 测试接口 // Free testing endpoint
// @note: 限流，限制 prompt 内容，限制来源，随时变更，请替换成你自己的 // Note: Rate-limited, content-filtered, subject to change. Replace with your own.
// @note: 使用 DeepSeek-chat(3.2) 官方版本，使用协议和隐私策略见 DeepSeek 网站 // Note: Uses official DeepSeek-chat (3.2). See DeepSeek website for terms & privacy.
const DEMO_MODEL = 'PAGE-AGENT-FREE-TESTING-RANDOM' const DEMO_MODEL = 'PAGE-AGENT-FREE-TESTING-RANDOM'
const DEMO_BASE_URL = 'https://hwcxiuzfylggtcktqgij.supabase.co/functions/v1/llm-testing-proxy' const DEMO_BASE_URL = 'https://hwcxiuzfylggtcktqgij.supabase.co/functions/v1/llm-testing-proxy'
const DEMO_API_KEY = 'PAGE-AGENT-FREE-TESTING-RANDOM' const DEMO_API_KEY = 'PAGE-AGENT-FREE-TESTING-RANDOM'
`} `}
/> />
</section>
</div> </div>
) )
} }

27
packages/website/src/i18n/locales/en-US/docs.ts
View File

@@ -115,32 +115,17 @@ export default {
model_integration: { model_integration: {
title: 'Model Integration', title: 'Model Integration',
subtitle: subtitle:
'Supports OpenAI-compatible models with tool call support, including public cloud services and private deployments.', 'Supports models that comply with OpenAI API specification and support tool calls, including public cloud services and private deployments.',
recommendation_logic: 'Recommended: Lightweight models with strong ToolCall capabilities',
recommended: 'Recommended Models', recommended: 'Recommended Models',
model_gpt4_title: '⚡ gpt-4.1-mini',
model_gpt4_badge: 'Evaluation Baseline ✅',
model_gpt4_1: '• Cost-effective',
model_gpt4_2: '• Fast',
model_gpt4_3: '• High success rate',
model_deepseek_title: '💰 DeepSeek-3.2',
model_deepseek_badge: 'Economical',
model_deepseek_1: '• Much cheaper than similar models',
model_deepseek_2: '• ToolCall may error but usually auto-recovers',
model_deepseek_3: "• This site's free demo uses DeepSeek",
model_qwen_title: '🛡️ qwen3',
model_qwen_badge: 'Secure & Compliant',
model_qwen_1: '• Controllable, decent results, reasonable price',
model_qwen_2: '• ToolCall may error but usually auto-recovers',
model_qwen_3: '• Best for scenarios with detailed steps',
model_gemini_title: '⚡ gemini-2.5-flash',
model_gemini_badge: 'Highly efficient, high success rate, reasonable price',
available: 'Available Models', available: 'Available Models',
available_verified: '✅ Verified Working', available_verified: 'Verified Working Models',
tips: 'Tips', tips: 'Tips',
tip_1: 'Reasoning models (like GPT-5) are slower with no advantage', tip_1: 'Reasoning models (like GPT-5) are slower with no advantage',
tip_2: tip_2:
"Non-OpenAI models don't guarantee JSON schema compliance—tool call may error but usually recovers. Higher temperature recommended", 'Models with weaker ToolCall capabilities may return incorrect formats. Common errors usually auto-recover. Higher temperature recommended',
tip_3: 'Small/nano models perform poorly', tip_3:
'Small models or those unable to handle complex tool definitions typically perform poorly',
security: '🔐 Production Authentication', security: '🔐 Production Authentication',
security_warning: '⚠️ Never commit real LLM API Keys to your frontend codebase', security_warning: '⚠️ Never commit real LLM API Keys to your frontend codebase',
security_desc: security_desc:

24
packages/website/src/i18n/locales/zh-CN/docs.ts
View File

@@ -114,31 +114,15 @@ export default {
model_integration: { model_integration: {
title: '模型接入', title: '模型接入',
subtitle: '当前支持符合 OpenAI 接口规范且支持 tool call 的模型,包括公有云服务和私有部署方案。', subtitle: '当前支持符合 OpenAI 接口规范且支持 tool call 的模型,包括公有云服务和私有部署方案。',
recommendation_logic: '推荐使用 ToolCall 能力强的轻量级模型',
recommended: '推荐模型', recommended: '推荐模型',
model_gpt4_title: '⚡ gpt-4.1-mini',
model_gpt4_badge: '评估基准 ✅',
model_gpt4_1: '• 性价比高',
model_gpt4_2: '• 速度快',
model_gpt4_3: '• 成功率高',
model_deepseek_title: '💰 DeepSeek-3.2',
model_deepseek_badge: '经济实惠',
model_deepseek_1: '• 价格远低于同等级其他模型',
model_deepseek_2: '• ToolCall 有出错率,通常能够自动修复',
model_deepseek_3: '• 本网站提供的免费试用为 DeepSeek',
model_qwen_title: '🛡️ qwen3',
model_qwen_badge: '安全合规',
model_qwen_1: '• 可控、效果尚可,价格合理',
model_qwen_2: '• ToolCall 有出错率,通常能够自动修复',
model_qwen_3: '• 适合能给出详细步骤的场景',
model_gemini_title: '⚡ gemini-2.5-flash',
model_gemini_badge: '极其高效,成功率高,价格合理',
available: '可用模型', available: '可用模型',
available_verified: '✅ 已验证可用', available_verified: '已验证可用模型',
tips: '提示', tips: '提示',
tip_1: 'reasoning 模型(如 GPT-5),速度偏慢,没有必要', tip_1: 'reasoning 模型(如 GPT-5),速度偏慢,没有必要',
tip_2: tip_2:
'不保证 json schema 的模型(openAI 以外的几乎所有模型),tool call 有概率出错,通常能自动修复,建议 temperature 设置高一些', 'ToolCall 能力较弱的模型可能返回错误的格式，常见错误能够自动恢复，建议设置较高的 temperature',
tip_3: '小模型、nano 模型,效果不佳', tip_3: '小模型或者无法适应复杂 Tool 定义的模型，通常效果不佳',
security: '🔐 生产环境鉴权建议', security: '🔐 生产环境鉴权建议',
security_warning: '⚠️ 永远不要把真实的 LLM API Key 发布到前端代码库', security_warning: '⚠️ 永远不要把真实的 LLM API Key 发布到前端代码库',
security_desc: '在实际应用中,为了隐藏真实的 LLM API Key，建议采用以下架构:', security_desc: '在实际应用中,为了隐藏真实的 LLM API Key，建议采用以下架构:',