---
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` 添加以下配置：

```env
# 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` 文件中设置以下变量：
```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` 端点：
```json
{
  "endpoint": "http://your-api-endpoint",
  "apiKey": "your-api-key",
  "model_id": "your-model-id",
  "apiType": "openai",
  "max_tokens": 2048,
  "name": "自定义模型名称",
  "systemPrompt": "自定义系统提示词"
}
```

### 支持的模型示例

1. ChatGLM API
```env
OPENAI_COMPATIBLE_ENDPOINT=http://localhost:8000/v1
OPENAI_COMPATIBLE_MODEL_ID=chatglm3-6b
```

2. FastChat API
```env
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 格式的模型：

```json
{
  "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 等）：

```json
{
  "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. 安装依赖：
```bash
npm install
```

2. 启动开发服务器：
```bash
npm run dev
```

3. 构建生产版本：
```bash
npm run build
```

## 部署

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

- Vercel
- Netlify
- Hugging Face Spaces

## 贡献

欢迎提交 Pull Request 或创建 Issue！

## 许可

MIT License