import { Fragment } from 'react' import { Link } from 'wouter' import CodeEditor from '@/components/CodeEditor' import { Heading } from '@/components/Heading' import { useLanguage } from '@/i18n/context' const BASELINE = new Set([ 'gpt-5.1', 'gpt-5.4-mini', 'claude-haiku-4.5', 'gemini-3.1-flash-lite', 'deepseek-v4-flash', 'qwen3.5-plus', 'qwen3.5-flash', ]) // Models grouped by brand, newest first const MODEL_GROUPS: Record = { Qwen: [ 'qwen3.6-max', 'qwen3.6-plus', 'qwen3.6-flash', 'qwen3.5-plus', 'qwen3.5-flash', 'qwen3-coder-next', 'qwen-3-max', 'qwen-3-plus', ], OpenAI: [ 'gpt-5.5', 'gpt-5.4', 'gpt-5.4-mini', 'gpt-5.4-nano', 'gpt-5.2', 'gpt-5.1', 'gpt-5', 'gpt-5-mini', 'gpt-4.1', 'gpt-4.1-mini', ], DeepSeek: ['deepseek-v4-pro', 'deepseek-v4-flash', 'deepseek-3.2'], Google: ['gemini-3.1-flash-lite', 'gemini-3-pro', 'gemini-3-flash', 'gemini-2.5'], Anthropic: [ 'claude-opus-4.7', 'claude-opus-4.6', 'claude-opus-4.5', 'claude-sonnet-4.5', 'claude-haiku-4.5', 'claude-sonnet-3.5', ], MiniMax: ['MiniMax-M2.7', 'MiniMax-M2.7-highspeed', 'MiniMax-M2.5', 'MiniMax-M2.5-highspeed'], xAI: ['grok-4.1-fast', 'grok-4', 'grok-code-fast'], MoonshotAI: ['kimi-k2.5'], 'Z.AI': ['glm-5', 'glm-4.7'], } const ModelBadge = ({ model, baseline }: { model: string; baseline?: boolean }) => (
{model} {baseline && }
) export default function Models() { const { isZh } = useLanguage() return (

{isZh ? '模型' : 'Models'}

{isZh ? '当前支持符合 OpenAI 接口规范且支持 tool call 的模型,包括公有云服务和私有部署方案。' : 'Supports models that comply with OpenAI API specification and support tool calls, including public cloud services and private deployments.'}

{isZh ? '已测试模型' : 'Tested Models'}
{Object.entries(MODEL_GROUPS).map(([brand, models]) => ( {brand}
{models.map((model) => ( ))}
))}
Tips
  • {isZh ? '⭐ 推荐使用 ToolCall 能力强的轻量级模型' : '⭐ Recommended: Fast, lightweight models with strong ToolCall capabilities'}
  • {isZh ? 'ToolCall 能力较弱的模型可能返回错误的格式,常见错误能够自动恢复,建议设置较高的 temperature' : 'Models with weaker ToolCall capabilities may return incorrect formats. Common errors usually auto-recover. Higher temperature recommended'}
  • {isZh ? '小模型或者无法适应复杂 Tool 定义的模型,通常效果不佳' : 'Small models or those unable to handle complex tool definitions typically perform poorly'}
{isZh ? '配置方式' : 'Configuration'}
{isZh ? '免费测试接口' : 'Free Testing API'}

{isZh ? '以下免费测试接口仅供 PageAgent.js 和 PageAgent Extension 的技术评估和测试使用。' : 'The following free testing endpoint is provided for testing and technical evaluation.'}

{isZh ? '⚠️ 仅供技术评估和研发用途,禁止用于生产环境。数据通过中国大陆服务器处理。请勿输入任何个人身份信息或敏感数据。使用即表示您同意' : '⚠️ Strictly for technical evaluation and R&D only. Data is processed via servers in Mainland China. Do not input any PII or sensitive data. By using this API you agree to the'}{' '} {isZh ? '使用条款' : 'Terms of Use'}

Qwen (Alibaba Cloud China)

{isZh ? '通过阿里云函数计算(中国大陆)转发至百炼 Qwen 模型' : 'Proxied via Alibaba Cloud FC (Mainland China) to BaiLian Qwen models'} {' · '} {isZh ? '使用条款' : 'Terms of Use'}

{isZh ? '🔐 生产环境鉴权' : '🔐 Production Authentication'}

{isZh ? '如果你只是将它用作个人助手,可以直接连接你的 LLM 服务。' : 'If you only use it as a personal assistant, you can connect to your LLM service directly.'}

{isZh ? ( <> 如果你计划将它集成到你的 Web 应用中,建议搭建一个后端代理来转发 LLM 请求,并使用{' '} customFetch 携带 Cookie 或其他鉴权信息: ) : ( <> If you plan to integrate it into your web app, it's better to have a backend proxy for the LLM and use customFetch to authenticate the request with cookies or other methods: )}

fetch(url, { ...init, credentials: 'include' }), });`} />

{isZh ? '⚠️ 永远不要把真实的 LLM API Key 提交到前端代码中' : '⚠️ NEVER commit real LLM API keys to your frontend code'}

{isZh ? '主动缓存' : 'Prompt Caching'}

{isZh ? ( <> 一些 LLM 能从主动缓存中受益很多。由于各个供应商的主动缓存接口不同,推荐使用{' '} transformRequestBody {' '} 为你的模型供应商配置缓存提示。 ) : ( <> Some LLMs benefit significantly from prompt caching. Because each provider exposes caching differently, use{' '} transformRequestBody {' '} to add provider-specific cache hints. )}

Claude

{isZh ? 'Claude 支持全局 Automatic prompt caching。使用兼容 Claude 的代理时,只需要在请求体顶层添加 cache_control。' : 'Claude supports global Automatic prompt caching. When using a Claude-compatible proxy, add cache_control at the top level of the request body.'}

({ ...requestBody, cache_control: { type: 'ephemeral' }, }), });`} />
{isZh ? '阿里云百炼 Qwen' : 'Alibaba Cloud Bailian Qwen'} { const [systemMessage, ...restMessages] = requestBody.messages if (systemMessage.role !== 'system' || typeof systemMessage.content !== 'string') { return requestBody } return { ...requestBody, messages: [ { ...systemMessage, content: [ { type: 'text', text: systemMessage.content, cache_control: { type: 'ephemeral' }, }, ], }, ...restMessages, ], } }, });`} />
{isZh ? '本地 LLMs' : 'Local LLMs'}

{isZh ? '通过 Ollama、LM Studio 等本地 OpenAI-compatible 运行时接入 PageAgent,实现离线或局域网部署。' : 'Use local OpenAI-compatible runtimes such as Ollama and LM Studio with PageAgent for offline or LAN deployments.'}

Requirements
  • {isZh ? '务必打开 CORS,否则浏览器无法直接请求本地 LLM 服务。' : 'Enable CORS, otherwise the browser cannot call your local LLM endpoint directly.'}
  • {isZh ? '将 context length 或 content length 至少设置为 8000。普通页面常常需要 15k token 左右,默认 4k 很容易被截断。' : 'Set context length or content length to at least 8000. A typical page often needs around 15k tokens, so the default 4k usually truncates prompts.'}
  • {isZh ? '需要支持 tool_call 的模型。' : 'Use a model with tool_call support.'}
  • {isZh ? '小于 10B 参数的模型通常效果不佳。' : 'Models smaller than 10B are usually not strong enough.'}
{isZh ? '基础配置' : 'Basic Configuration'}
Ollama

{isZh ? '已在 Ollama 0.15 + qwen3:14b (RTX3090 24GB) 上测试通过。' : 'Tested on Ollama 0.15 with qwen3:14b (RTX3090 24GB).'}

{isZh ? '⚠️ 注意事项' : '⚠️ Important Notes'}

{isZh ? '如果浏览器侧请求失败,优先检查 Ollama 是否已按上面的要求开启 CORS。' : 'If browser-side requests fail, check whether Ollama has CORS enabled as required above.'}

{isZh ? '建议启动参数' : 'Recommended Startup'}

{isZh ? '启动 Ollama 时建议同时放大上下文窗口并开启跨域访问。' : 'When starting Ollama, increase the context window and enable cross-origin access.'}

macOS / Linux

Windows (PowerShell)

LM Studio

{isZh ? '⚠️ 注意事项' : '⚠️ Important Notes'}

  • {isZh ? 'Agent 必须启用 disableNamedToolChoice,否则 tool_choice 参数会报错。' : 'Enable disableNamedToolChoice in the agent config, otherwise the tool_choice parameter may fail.'}
) }