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. 1. 克隆仓库：

   git clone https://github.com/weise25/LocalSite-ai.git
   cd LocalSite-ai

2. 2. 安装依赖：

   npm install
   # 或
   yarn install

3. 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. 4. 启动开发服务器：

   npm run dev
   # 或
   yarn dev

5. 5. 在浏览器中打开 http://localhost:3000。

支持的AI供应商

本地模型

Ollama

1. 1. 在本地机器上安装 Ollama。
2. 2. 拉取模型如llama2或codellama。
3. 3. 启动Ollama服务器。
4. 4. 在.env.local文件中设置：

   OLLAMA_API_BASE=http://localhost:11434
   DEFAULT_PROVIDER=ollama

LM Studio

1. 1. 在本地机器上安装 LM Studio。
2. 2. 下载模型并启动本地服务器。
3. 3. 在.env.local文件中设置：

   LM_STUDIO_API_BASE=http://localhost:1234/v1
   DEFAULT_PROVIDER=lm_studio

DeepSeek

1. 1. 访问 DeepSeek 创建账户或登录。
2. 2. 导航至API密钥部分。
3. 3. 创建新API密钥并复制。
4. 4. 在.env.local文件中设置：

   DEEPSEEK_API_KEY=您的deepseek_api密钥
   DEEPSEEK_API_BASE=https://api.deepseek.com/v1

自定义OpenAI兼容API

您可以使用任何OpenAI兼容的API：

1. 1. 从您选择的供应商获取API密钥（OpenAI、Together AI、Groq等）。
2. 2. 在.env.local文件中设置：

   OPENAI_COMPATIBLE_API_KEY=您的api密钥
   OPENAI_COMPATIBLE_API_BASE=https://api.of.provider.com/v1

部署

部署到Vercel

Vercel 是托管Next.js应用的推荐平台：

1. 1. 在Vercel创建账户并连接到您的GitHub账户。
2. 2. 导入您的仓库。
3. 3. 为您选择的供应商添加环境变量，例如：
• • DEEPSEEK_API_KEY
• • DEEPSEEK_API_BASE
• • DEFAULT_PROVIDER
4. 4. 点击”部署”。

其他托管选项

应用也可以部署在：

• • Netlify
• • Cloudflare Pages
• • 任何支持Next.js应用的平台

请注意：如果您将应用托管在平台（如Vercel、Netlify等）上，除非使用ngrok等隧道技术，否则无法通过Ollama或LM Studio使用本地模型。

使用指南

1. 1. 输入描述您想创建的网站类型的提示。
2. 2. 从下拉菜单中选择AI供应商和模型。
3. 3. 点击”生成”。
4. 4. 等待代码生成完成。
5. 5. 查看实时预览并调整视口（桌面、平板、手机）。
6. 6. 切换编辑模式以根据需要修改代码。
7. 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