From 7d45bf6598fb4210affa0fba7023832d8236c829 Mon Sep 17 00:00:00 2001 From: Simon <10131203+gaomeng1900@users.noreply.github.com> Date: Wed, 14 Jan 2026 17:27:35 +0800 Subject: [PATCH] feat(website): update CDN links and usage --- README-zh.md | 58 +++--- README.md | 58 +++--- packages/website/package.json | 2 +- packages/website/src/constants.ts | 12 +- packages/website/src/pages/Home.tsx | 4 +- packages/website/src/pages/docs/Layout.tsx | 2 +- .../pages/docs/integration/cdn-setup/page.tsx | 167 +++++++++++------- .../docs/introduction/quick-start/page.tsx | 79 ++++----- 8 files changed, 227 insertions(+), 155 deletions(-) diff --git a/README-zh.md b/README-zh.md index 1b7a8b8..a93ba3c 100644 --- a/README-zh.md +++ b/README-zh.md @@ -28,7 +28,22 @@ ## 🚀 快速开始 -### NPM 安装 +### 快速体验 (Demo CDN) + +最快的体验方式: + +```html + +``` + +> ⚠️ **仅用于技术评估。** Demo 模型有速率限制和使用限制,生产环境请使用 NPM 方式。 + +| 位置 | URL | +| ------ | --------------------------------------------------------------------------------------- | +| 全球 | https://cdn.jsdelivr.net/npm/@page-agent/cdn/dist/page-agent.demo.js | +| 中国 | https://registry.npmmirror.com/@page-agent/cdn/latest/files/dist/page-agent.demo.js | + +### NPM 安装(推荐) ```bash npm install page-agent @@ -37,40 +52,37 @@ npm install page-agent ```javascript import { PageAgent } from 'page-agent' -// 测试接口 -// @note: 限流,限制 prompt 内容,限制来源,随时变更,请替换成你自己的 -// @note: 使用 DeepSeek-chat(3.2) 官方版本,使用协议和隐私策略见 DeepSeek 网站 -const DEMO_MODEL = 'PAGE-AGENT-FREE-TESTING-RANDOM' -const DEMO_BASE_URL = 'https://hwcxiuzfylggtcktqgij.supabase.co/functions/v1/llm-testing-proxy' -const DEMO_API_KEY = 'PAGE-AGENT-FREE-TESTING-RANDOM' - const agent = new PageAgent({ - model: DEMO_MODEL, - baseURL: DEMO_BASE_URL, - apiKey: DEMO_API_KEY, + model: 'deepseek-chat', + baseURL: 'https://api.deepseek.com', + apiKey: 'YOUR_API_KEY', language: 'zh-CN', }) await agent.execute('点击登录按钮') ``` -### CDN 集成 +### CDN 引入 -Fastest way to try PageAgent is to include it via CDN. Demo model will be used by default. - -| Location | URL | -| -------- | ----------------------------------------------------------------------------- | -| Global | https://cdn.jsdelivr.net/npm/page-agent@latest/dist/umd/page-agent.js | -| China | https://registry.npmmirror.com/page-agent/latest/files/dist/umd/page-agent.js | +适用于无法使用 NPM 的环境,用法与 NPM 一致: ```html - + + ``` +| 位置 | URL | +| ------ | ----------------------------------------------------------------------------------- | +| 全球 | https://cdn.jsdelivr.net/npm/@page-agent/cdn/dist/page-agent.js | +| 中国 | https://registry.npmmirror.com/@page-agent/cdn/latest/files/dist/page-agent.js | + ## 🏗️ 架构设计 PageAgent adopts a simplified monorepo structure: diff --git a/README.md b/README.md index 4a982c6..272a81d 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,22 @@ The GUI Agent Living in Your Webpage. Control web interfaces with natural langua ## 🚀 Quick Start -### NPM Installation +### Quick Try (Demo CDN) + +Fastest way to try PageAgent: + +```html + +``` + +> ⚠️ **For technical evaluation only.** Demo model has rate limits and usage restrictions. Use NPM for production. + +| Location | URL | +| -------- | --------------------------------------------------------------------------------------- | +| Global | https://cdn.jsdelivr.net/npm/@page-agent/cdn/dist/page-agent.demo.js | +| China | https://registry.npmmirror.com/@page-agent/cdn/latest/files/dist/page-agent.demo.js | + +### NPM Installation (Recommended) ```bash npm install page-agent @@ -37,40 +52,37 @@ npm install page-agent ```javascript import { PageAgent } from 'page-agent' -// test server -// @note: rate limit. prompt limit. Origin limit. May change anytime. Use your own llm! -// @note Using official DeepSeek-chat(3.2). Go to DeepSeek website for privacy policy. -const DEMO_MODEL = 'PAGE-AGENT-FREE-TESTING-RANDOM' -const DEMO_BASE_URL = 'https://hwcxiuzfylggtcktqgij.supabase.co/functions/v1/llm-testing-proxy' -const DEMO_API_KEY = 'PAGE-AGENT-FREE-TESTING-RANDOM' - const agent = new PageAgent({ - model: DEMO_MODEL, - baseURL: DEMO_BASE_URL, - apiKey: DEMO_API_KEY, + model: 'deepseek-chat', + baseURL: 'https://api.deepseek.com', + apiKey: 'YOUR_API_KEY', language: 'en-US', }) await agent.execute('Click the login button') ``` -### CDN Integration +### CDN Build -Fastest way to try PageAgent is to include it via CDN. Demo model will be used by default. - -| Location | URL | -| -------- | ----------------------------------------------------------------------------- | -| Global | https://cdn.jsdelivr.net/npm/page-agent@latest/dist/umd/page-agent.js | -| China | https://registry.npmmirror.com/page-agent/latest/files/dist/umd/page-agent.js | +For environments where NPM is not available. Usage is identical to NPM: ```html - + + ``` +| Location | URL | +| -------- | ----------------------------------------------------------------------------------- | +| Global | https://cdn.jsdelivr.net/npm/@page-agent/cdn/dist/page-agent.js | +| China | https://registry.npmmirror.com/@page-agent/cdn/latest/files/dist/page-agent.js | + ## 🏗️ Structure PageAgent adopts a simplified monorepo structure: diff --git a/packages/website/package.json b/packages/website/package.json index 54d3697..06513d0 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -4,7 +4,7 @@ "version": "0.0.23", "type": "module", "scripts": { - "dev": "vite", + "dev": "vite --host 0.0.0.0", "build:website": "vite build", "preview": "vite preview", "typecheck": "tsc --noEmit" diff --git a/packages/website/src/constants.ts b/packages/website/src/constants.ts index 5742d7a..417853a 100644 --- a/packages/website/src/constants.ts +++ b/packages/website/src/constants.ts @@ -1,3 +1,9 @@ -export const CDN_URL = 'https://cdn.jsdelivr.net/npm/page-agent@latest/dist/umd/page-agent.js' -export const CDN_CN_URL = - 'https://registry.npmmirror.com/page-agent/latest/files/dist/umd/page-agent.js' +// Demo build (auto-init with demo LLM, for quick testing) +export const CDN_DEMO_URL = 'https://cdn.jsdelivr.net/npm/@page-agent/cdn/dist/page-agent.demo.js' +export const CDN_DEMO_CN_URL = + 'https://registry.npmmirror.com/@page-agent/cdn/latest/files/dist/page-agent.demo.js' + +// Full build (exports PageAgent class, usage identical to npm) +export const CDN_FULL_URL = 'https://cdn.jsdelivr.net/npm/@page-agent/cdn/dist/page-agent.js' +export const CDN_FULL_CN_URL = + 'https://registry.npmmirror.com/@page-agent/cdn/latest/files/dist/page-agent.js' diff --git a/packages/website/src/pages/Home.tsx b/packages/website/src/pages/Home.tsx index aacd353..4781ac3 100644 --- a/packages/website/src/pages/Home.tsx +++ b/packages/website/src/pages/Home.tsx @@ -12,10 +12,10 @@ import { Highlighter } from '../components/ui/highlighter' import { NeonGradientCard } from '../components/ui/neon-gradient-card' import { Particles } from '../components/ui/particles' import { SparklesText } from '../components/ui/sparkles-text' -import { CDN_CN_URL, CDN_URL } from '../constants' +import { CDN_DEMO_CN_URL, CDN_DEMO_URL } from '../constants' function getInjection(useCN?: boolean) { - const cdn = useCN ? CDN_CN_URL : CDN_URL + const cdn = useCN ? CDN_DEMO_CN_URL : CDN_DEMO_URL const injection = encodeURI( `javascript:(function(){var s=document.createElement('script');s.src=\`${cdn}?t=\${Math.random()}\`;s.setAttribute('crossorigin', true);s.type="text/javascript";s.onload=()=>console.log('PageAgent script loaded!');document.body.appendChild(s);})();` diff --git a/packages/website/src/pages/docs/Layout.tsx b/packages/website/src/pages/docs/Layout.tsx index 82e2fa5..555fda5 100644 --- a/packages/website/src/pages/docs/Layout.tsx +++ b/packages/website/src/pages/docs/Layout.tsx @@ -43,7 +43,7 @@ export default function DocsLayout({ children }: DocsLayoutProps) { items: [ { title: t('nav.configuration'), path: '/docs/integration/configuration' }, { title: t('nav.third_party_agent'), path: '/docs/integration/third-party-agent' }, - { title: '🚧 ' + t('nav.cdn_setup'), path: '/docs/integration/cdn-setup' }, + { title: t('nav.cdn_setup'), path: '/docs/integration/cdn-setup' }, { title: '🚧 ' + t('nav.security_permissions'), path: '/docs/integration/security-permissions', diff --git a/packages/website/src/pages/docs/integration/cdn-setup/page.tsx b/packages/website/src/pages/docs/integration/cdn-setup/page.tsx index f43f990..50b26c1 100644 --- a/packages/website/src/pages/docs/integration/cdn-setup/page.tsx +++ b/packages/website/src/pages/docs/integration/cdn-setup/page.tsx @@ -1,81 +1,124 @@ import { useTranslation } from 'react-i18next' -import BetaNotice from '@/components/BetaNotice' import CodeEditor from '@/components/CodeEditor' -import { CDN_CN_URL, CDN_URL } from '@/constants' +import { CDN_DEMO_CN_URL, CDN_DEMO_URL, CDN_FULL_CN_URL, CDN_FULL_URL } from '@/constants' export default function CdnSetup() { const { i18n } = useTranslation() const isZh = i18n.language === 'zh-CN' return ( -
- +
+
+

{isZh ? 'CDN 引入' : 'CDN Setup'}

+

+ {isZh + ? 'CDN 提供两种构建版本:Demo 版用于快速体验,标准版用法与 NPM 一致。' + : 'CDN provides two builds: Demo for quick testing, standard build with usage identical to NPM.'} +

+
-

{isZh ? 'CDN 引入' : 'CDN Setup'}

+ {/* Demo Build Section */} +
+

{isZh ? '🚀 快速体验' : '🚀 Quick Try'}

-

- {isZh - ? '通过 CDN 快速集成 page-agent,无需复杂的构建配置。默认使用演示模型。' - : 'Fastest way to integrate page-agent via CDN. No complex build setup needed. Demo model will be used by default.'} -

- -
-

{isZh ? 'CDN 地址' : 'CDN URLs'}

- -
- - - - - - - - - - - - - - - - - -
{isZh ? '位置' : 'Location'}URL
{isZh ? '全球' : 'Global'}{CDN_URL}
{isZh ? '中国镜像' : 'China Mirror'}{CDN_CN_URL}
-
-
- -
-

{isZh ? '快速开始' : 'Quick Start'}

+

+ {isZh + ? '自动初始化并使用内置 Demo LLM,无需任何配置:' + : 'Auto-initializes with built-in demo LLM, no configuration needed:'} +

`} + className="mb-3" + code={``} /> + +
+ + ⚠️{' '} + {isZh + ? '仅用于技术评估,Demo 模型有速率限制。' + : 'For evaluation only. Demo model has rate limits.'} + +
+ + + + + + + + + + + + + + + + + + +
+ {isZh ? '位置' : 'Location'} + URL
{isZh ? '全球' : 'Global'}{CDN_DEMO_URL}
{isZh ? '中国' : 'China'}{CDN_DEMO_CN_URL}
-
-
-

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

-
    -
  • - • {isZh ? '生产环境建议使用固定版本号' : 'Use fixed version number in production'} -
  • -
  • • {isZh ? '确保 HTTPS 环境下使用' : 'Ensure HTTPS environment'}
  • -
  • - •{' '} - {isZh - ? '配置 CSP 策略允许脚本执行' - : 'Configure CSP policy to allow script execution'} -
  • -
-
+ {/* CDN Build Section */} +
+

{isZh ? '📦 标准版' : '📦 Standard Build'}

+ +

+ {isZh + ? '将 PageAgent 类暴露到 globalThis,用法与 NPM 一致:' + : 'Exposes PageAgent class to globalThis, usage identical to NPM:'} +

+ + +`} + /> + + + + + + + + + + + + + + + + + + +
+ {isZh ? '位置' : 'Location'} + URL
{isZh ? '全球' : 'Global'}{CDN_FULL_URL}
{isZh ? '中国' : 'China'}{CDN_FULL_CN_URL}
+
+ + {/* Tips */} +
+

+ 💡 {isZh ? '提示' : 'Tips'} +

+
    +
  • • {isZh ? '生产环境推荐使用 NPM' : 'NPM is recommended for production'}
  • +
  • • {isZh ? '生产环境建议锁定版本号' : 'Lock version number in production'}
  • +
  • • {isZh ? '确保 HTTPS 环境' : 'Ensure HTTPS environment'}
  • +
) diff --git a/packages/website/src/pages/docs/introduction/quick-start/page.tsx b/packages/website/src/pages/docs/introduction/quick-start/page.tsx index 8e8c7e3..e92f139 100644 --- a/packages/website/src/pages/docs/introduction/quick-start/page.tsx +++ b/packages/website/src/pages/docs/introduction/quick-start/page.tsx @@ -2,10 +2,11 @@ import { useTranslation } from 'react-i18next' import BetaNotice from '@/components/BetaNotice' import CodeEditor from '@/components/CodeEditor' -import { CDN_CN_URL, CDN_URL } from '@/constants' +import { CDN_DEMO_CN_URL, CDN_DEMO_URL } from '@/constants' export default function QuickStart() { - const { t } = useTranslation('docs') + const { t, i18n } = useTranslation('docs') + const isZh = i18n.language === 'zh-CN' return (
@@ -16,64 +17,62 @@ export default function QuickStart() {

{t('quick_start.installation')}

+ {/* Demo CDN - One Line */}

- {t('quick_start.step1_title')} + {isZh ? '🚀 快速体验(Demo CDN)' : '🚀 Quick Try (Demo CDN)'}

-
-
-

{t('quick_start.step1_cdn')}

- `} - language="html" - /> -
-
-

{t('quick_start.step1_npm')}

- -
+
+ + ⚠️ {isZh ? '仅用于技术评估' : 'For evaluation only'} +
+ `} + language="html" + />
+ {/* NPM - Recommended */}

- {t('quick_start.step2_title')} + {isZh ? '📦 NPM 安装(推荐)' : '📦 NPM Install (Recommended)'}

+ {t('quick_start.step2_title')} +

+ +
+ +
+

{t('quick_start.step3_title')}