火遍全网的AI在线生成前端页面DeepSite开源替代LocalSite
安爸
发布于
LocalSite AI – 现已支持思维模型！
一款现代化的网页应用，利用AI技术根据自然语言描述生成HTML、CSS和JavaScript代码。只需描述您想构建的内容，AI就会为您创建一个完整的、自包含的网页。
功能特性
- • AI驱动的代码生成：通过文本描述生成完整网页
- • 实时预览：在桌面、平板和手机视图中查看生成的代码效果
- • 代码编辑：直接在浏览器中编辑生成的代码
- • 多AI供应商支持：支持DeepSeek、自定义OpenAI兼容API和本地模型
- • 响应式设计：适配桌面和移动设备
- • 现代化UI：简洁的深色主题界面，注重用户体验
技术栈
- • Next.js 15 应用路由
- • React 19
- • Tailwind CSS
- • Shadcn UI
- • OpenAI SDK（用于API兼容）
- • Monaco编辑器
快速开始
先决条件
- • Node.js（18.17或更高版本）
- • npm 或 yarn
- • 已安装 Ollama 或 LM Studio
- • 或来自支持供应商的API密钥（见下文）
安装步骤
- 1. 克隆仓库：
git clone https://github.com/weise25/LocalSite-ai.git cd LocalSite-ai - 2. 安装依赖：
`npm install或
yarn install`
- 3. 将根目录下的
.env.example文件重命名为.env.local并添加您的API密钥：
`# 选择以下供应商之一：
DeepSeek API
DEEPSEEK_API_KEY=您的deepseek_api密钥
DEEPSEEK_API_BASE=https://api.deepseek.com/v1
自定义OpenAI兼容API
OPENAI_COMPATIBLE_API_KEY=您的api密钥
OPENAI_COMPATIBLE_API_BASE=https://api.openai.com/v1
默认供应商(deepseek, openai_compatible, ollama, lm_studio)
DEFAULT_PROVIDER=lm_studio`
- 4. 启动开发服务器：
`npm run dev或
yarn dev`
- 5. 在浏览器中打开 http://localhost:3000。
支持的AI供应商
本地模型
Ollama
- 1. 在本地机器上安装 Ollama。
- 2. 拉取模型如
llama2或codellama。 - 3. 启动Ollama服务器。
- 4. 在
.env.local文件中设置：
OLLAMA_API_BASE=http://localhost:11434 DEFAULT_PROVIDER=ollama
LM Studio
- 1. 在本地机器上安装 LM Studio。
- 2. 下载模型并启动本地服务器。
- 3. 在
.env.local文件中设置：
LM_STUDIO_API_BASE=http://localhost:1234/v1 DEFAULT_PROVIDER=lm_studio
DeepSeek
- 1. 访问 DeepSeek 创建账户或登录。
- 2. 导航至API密钥部分。
- 3. 创建新API密钥并复制。
- 4. 在
.env.local文件中设置：
DEEPSEEK_API_KEY=您的deepseek_api密钥 DEEPSEEK_API_BASE=https://api.deepseek.com/v1
自定义OpenAI兼容API
您可以使用任何OpenAI兼容的API：
- 1. 从您选择的供应商获取API密钥（OpenAI、Together AI、Groq等）。
- 2. 在
.env.local文件中设置：
OPENAI_COMPATIBLE_API_KEY=您的api密钥 OPENAI_COMPATIBLE_API_BASE=https://api.of.provider.com/v1
部署
部署到Vercel
Vercel 是托管Next.js应用的推荐平台：
- 1. 在Vercel创建账户并连接到您的GitHub账户。
- 2. 导入您的仓库。
- 3. 为您选择的供应商添加环境变量，例如：
- •
DEEPSEEK_API_KEY - •
DEEPSEEK_API_BASE - •
DEFAULT_PROVIDER
- •
- 4. 点击”部署”。
其他托管选项
应用也可以部署在：
- • Netlify
- • Cloudflare Pages
- • 任何支持Next.js应用的平台
请注意：如果您将应用托管在平台（如Vercel、Netlify等）上，除非使用ngrok等隧道技术，否则无法通过Ollama或LM Studio使用本地模型。
使用指南
- 1. 输入描述您想创建的网站类型的提示。
- 2. 从下拉菜单中选择AI供应商和模型。
- 3. 点击”生成”。
- 4. 等待代码生成完成。
- 5. 查看实时预览并调整视口（桌面、平板、手机）。
- 6. 切换编辑模式以根据需要修改代码。
- 7. 复制代码或下载为HTML文件。
发展路线
AI模型和供应商
- • 集成 Ollama 用于本地模型执行
- • 支持 LM Studio 使用本地模型
- • 预定义供应商：DeepSeek
- • 自定义OpenAI兼容API支持
- • 支持思维模型（Qwen3、DeepCoder等）
- • 添加更多预定义供应商（Anthropic、Groq等）
高级代码生成
- • 选择不同框架和库（React、Vue、Angular等）
- • 基于文件的代码生成（多文件）
- • 保存和加载项目
- • 代理差异编辑能力
UI/UX改进
- • 深色/浅色主题切换
- • 可自定义的代码编辑器设置
- • UI组件的拖放界面
- • 生成代码历史记录
可访问性
- • 提示的转录和语音输入
- • 任何建议都欢迎
桌面应用
- • 转换为跨平台桌面应用（Electron）
项目地址
https://github.com/weise25/LocalSite-ai/blob/main/README.md
扫码加入技术交流群，备注「开发语言-城市-昵称」
（文：GitHubStore）
扫描二维码，在手机上阅读