README.md

metadata

title: OpenSite
emoji: 🐳
colorFrom: blue
colorTo: blue
sdk: docker
pinned: true
app_port: 7860
license: mit
short_description: 一个强大的AI驱动的前端开发助手

DeepSite

一个强大的AI驱动的前端开发助手，帮助你快速创建和优化网页。

特性

• 🎨 智能UI生成
• 🔧 代码优化建议
• 🚀 实时预览
• 🔄 自定义模型支持
• 🌐 多语言支持

获取 Hugging Face 凭据

1. 访问 https://huggingface.co/settings/connected-applications
2. 创建新的 OAuth 应用：
   • 点击 "Create App"
   • 填写应用信息
   • 设置回调URL为您的 REDIRECT_URI
3. 获取 Client ID 和 Client Secret
4. 创建 Access Token 作为 DEFAULT_HF_TOKEN（可选）

环境变量配置

在项目根目录创建 .env 文件，参考 .env.example 添加以下配置：

# OAuth配置
OAUTH_CLIENT_ID=           # Hugging Face OAuth客户端ID
OAUTH_CLIENT_SECRET=       # Hugging Face OAuth客户端密钥
APP_PORT=7860             # 应用程序端口号
REDIRECT_URI=             # OAuth重定向URI
DEFAULT_HF_TOKEN=         # 默认的Hugging Face Token
DEFAULT_MODEL_ID=         # 默认模型ID

# OpenAI 兼容配置（可选）
OPENAI_COMPATIBLE_ENDPOINT=    # OpenAI兼容的API端点
OPENAI_COMPATIBLE_API_KEY=     # API密钥
OPENAI_COMPATIBLE_MODEL_ID=    # 模型ID
OPENAI_COMPATIBLE_MAX_TOKENS=  # 最大token数（默认2048）
OPENAI_COMPATIBLE_SYSTEM_PROMPT= # 系统提示词

OpenAI 兼容模型配置

DeepSite 支持两种配置 OpenAI 兼容模型的方式：

1. 通过环境变量配置（推荐）

在 .env 文件中设置以下变量：

OPENAI_COMPATIBLE_ENDPOINT=http://your-api-endpoint
OPENAI_COMPATIBLE_API_KEY=your-api-key
OPENAI_COMPATIBLE_MODEL_ID=your-model-id
OPENAI_COMPATIBLE_MAX_TOKENS=2048
OPENAI_COMPATIBLE_SYSTEM_PROMPT=你是一个专业的前端开发助手

2. 通过API动态配置

发送 POST 请求到 /api/custom-model 端点：

{
  "endpoint": "http://your-api-endpoint",
  "apiKey": "your-api-key",
  "model_id": "your-model-id",
  "apiType": "openai",
  "max_tokens": 2048,
  "name": "自定义模型名称",
  "systemPrompt": "自定义系统提示词"
}

支持的模型示例

1. ChatGLM API

OPENAI_COMPATIBLE_ENDPOINT=http://localhost:8000/v1
OPENAI_COMPATIBLE_MODEL_ID=chatglm3-6b

2. FastChat API

OPENAI_COMPATIBLE_ENDPOINT=http://localhost:8000/v1
OPENAI_COMPATIBLE_MODEL_ID=vicuna-7b-v1.5

3. 其他兼容 OpenAI API 的模型服务都可以通过类似方式配置

用户限制说明

未登录用户

• 每个IP地址最多允许4次请求
• 使用系统默认的 Hugging Face Token
• 受到提供商的token限制

登录用户

• 使用个人 Hugging Face Token
• Token限制说明：
  • 限制类型：单次请求的token限制（不是每月或总量限制）
  • Token计算：TOKENS_USED = prompt长度 + 历史提示长度 + HTML内容长度
  • 不同提供商的单次请求限制：
    • Fireworks AI: 最大 131,000 tokens
    • Nebius AI Studio: 最大 131,000 tokens
    • SambaNova: 最大 8,000 tokens
    • NovitaAI（默认）: 最大 16,000 tokens
    • 自定义模型: 根据配置设置

超出限制处理

1. 系统会返回400错误并提示切换提供商
2. 用户可以：
   • 减少输入内容长度
   • 切换到有更高token限制的提供商
   • 使用"auto"模式让系统自动选择合适的提供商
   • 配置自定义模型

自动模式（Auto）

• 默认使用 NovitaAI（16,000 tokens限制）
• 系统会自动处理token限制，选择合适的提供商
• 建议：如果不确定使用哪个提供商，建议使用自动模式

自定义模型配置

DeepSite 支持两种类型的自定义模型接入：

1. HuggingFace 格式

使用 HuggingFace Inference API 格式的模型：

{
  "endpoint": "https://your-model-endpoint",
  "apiKey": "your-api-key",
  "model_id": "your-model-id",
  "apiType": "hf",
  "max_tokens": 2048,
  "name": "自定义模型名称",
  "systemPrompt": "自定义系统提示词"
}

2. OpenAI 兼容格式

使用 OpenAI API 兼容格式的模型（如 ChatGLM、FastChat 等）：

{
  "endpoint": "http://your-api-endpoint",
  "apiKey": "your-api-key",
  "model_id": "your-model-id",
  "apiType": "openai",
  "max_tokens": 2048,
  "name": "自定义模型名称",
  "systemPrompt": "自定义系统提示词"
}

如何配置环境变量

1. 在项目根目录创建 .env 文件
2. 复制 .env.example 的内容到 .env
3. 填入相应的值：
   • 从 Hugging Face 获取 OAuth 凭据
   • 设置应用程序端口（默认7860）
   • 配置重定向URI
   • 设置默认的 Hugging Face Token
   • 配置默认模型ID（可选）

注意：.env 文件包含敏感信息，已在 .gitignore 中配置，不会被提交到版本控制系统。

最佳实践建议

1. 对于大型项目：

   • 使用 Fireworks AI 或 Nebius AI Studio（131k tokens限制）
   • 适合生成完整的网站或复杂应用
   • 或配置自定义大模型

2. 对于中小型项目：

   • 使用 NovitaAI（16k tokens限制）
   • 适合生成单个页面或简单组件

3. 对于快速原型：

   • 使用 SambaNova（8k tokens限制）
   • 适合生成简单的UI组件或快速测试

4. 对于特殊需求：

   • 配置自定义模型
   • 可以使用自己部署的模型或其他API服务
   • 灵活设置token限制和系统提示词

5. 通用建议：

   • 开始时使用自动模式
   • 根据项目需求和生成内容大小选择合适的提供商
   • 如遇到token限制，可以分步骤生成，然后组合内容
   • 对于特殊需求，考虑配置自定义模型

Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

开发

1. 安装依赖：

npm install

2. 启动开发服务器：

npm run dev

3. 构建生产版本：

npm run build

部署

项目可以部署到任何支持 Node.js 的平台。推荐使用：

• Vercel
• Netlify
• Hugging Face Spaces

贡献

欢迎提交 Pull Request 或创建 Issue！

许可

MIT License