LocalSite AI

LocalSite AI 是一款现代化的网络应用，利用AI技术根据自然语言提示生成完整的 HTML、CSS 和 JavaScript 代码。只需描述您想构建的内容，AI 就能为您创建一个功能齐全的网页。无论是快速原型设计还是复杂项目开发，LocalSite AI 都能让您的工作更高效。

核心功能

• AI 驱动的代码生成
  输入自然语言描述，AI 即可生成完整的网页代码，无需手动编写基础结构。
• 实时预览
  支持桌面、平板和移动设备视图，即时查看生成代码的效果，确保响应式设计无误。
• 代码编辑
  内置代码编辑器，允许用户直接在浏览器中对生成的代码进行调整和优化。
• 多 AI 提供商支持
  兼容多种 AI 提供商，包括 DeepSeek、自定义 OpenAI 兼容 API、本地模型（如 Ollama 和 LM Studio）等，满足不同需求。
• 响应式设计
  自动生成适用于桌面和移动设备的响应式代码，轻松适应各种屏幕尺寸。
• 现代化 UI
  简洁的暗色主题界面，注重用户体验，让开发者专注于创作。

技术栈

LocalSite AI 基于以下前沿技术构建：

• Next.js 15（使用 App Router）
• React 19
• Tailwind CSS
• Shadcn UI
• OpenAI SDK（用于 API 兼容）
• Monaco Editor（强大的代码编辑器）

这些技术确保了应用的高性能和易用性，同时为开发者提供了灵活的扩展能力。

快速入门指南

前提条件（具体安装请查看GitHub页面）

• Node.js（版本 18.17 或更高）
• npm 或 yarn
• 已安装 Ollama 或 LM Studio（用于本地模型）
• 或支持的提供商之一的 API 密钥

支持的 AI 提供商

本地模型

• Ollama
  安装 Ollama 并下载所需模型（如 llama2 或 codellama），启动服务器后配置 .env.local 文件：

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

• LM Studio
  安装 LM Studio 并启动本地服务器，配置 .env.local 文件：

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

云端提供商

• DeepSeek
  在 DeepSeek 平台获取 API 密钥并配置：

  DEEPSEEK_API_KEY=您的_deepseek_api_key
  DEEPSEEK_API_BASE=https://api.deepseek.com/v1
  

• 自定义 OpenAI 兼容 API
  使用任何兼容 OpenAI 的 API（如 Together AI、Groq 等），配置 .env.local 文件：

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

部署方式

Vercel 部署

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

1. 创建 Vercel 账户并连接到 GitHub。
2. 导入仓库并添加环境变量（如 DEEPSEEK_API_KEY、DEFAULT_PROVIDER 等）。
3. 点击“部署”即可完成。

其他托管选项

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

注意：如果使用 Vercel、Netlify 等云端平台，无法直接连接本地模型（如 Ollama 或 LM Studio）。如需使用本地模型，建议通过 ngrok 等隧道工具实现。

使用方法

1. 输入提示：描述您想创建的网站内容，例如：“一个包含联系表单的单页网站”。
2. 选择 AI 提供商和模型：从下拉菜单中选择合适的 AI 提供商和模型。
3. 生成代码：点击“生成”按钮，等待 AI 完成代码生成。
4. 实时预览：查看生成的网页效果，并切换视口（桌面、平板、移动设备）以测试响应式设计。
5. 编辑代码：切换到编辑模式，直接在浏览器中修改生成的代码。
6. 导出代码：复制代码或将其下载为 HTML 文件，方便后续使用。

未来路线图

AI 模型与提供商

• 集成更多本地模型（如 Ollama 和 LM Studio）
• 支持思考模型（如 Qwen3、DeepCoder 等）
• 添加更多预定义提供商（如 Anthropic、Groq 等）

高级代码生成

• 支持多种框架和库（如 React、Vue、Angular）
• 实现基于文件的代码生成（多文件项目）
• 提供保存和加载项目功能
• 引入代理式差异编辑功能，提升协作效率

UI/UX 改进

• 暗/亮主题切换
• 可自定义的代码编辑器设置
• 拖放式 UI 组件界面
• 生成代码的历史记录功能

可访问性

• 支持语音输入和转录功能
• 欢迎用户提出改进建议

桌面应用

• 开发跨平台桌面应用（基于 Electron）