一个功能强大的 AI 驱动的网站制作器和服务器管理工具,基于 Electron 构建。
🚀 强大的 AI 驱动网站开发工具## 功能特性
- 支持 CSS 和 JavaScript 内联的 HTML
- 快速原型设计和开发
- 文件浏览器和代码编辑器
---- 项目预览功能
- 支持创建文件、文件夹和导入文件
ArtiMeow AI WebMaster 是一个革命性的网站开发工具,将先进的人工智能技术与传统Web开发工作流完美结合。无论您是初学者还是专业开发者,ArtiMeow都能帮助您更快、更智能地创建网站。### 💡 智能自动补全 (v1.1.0)
- HTML:87+ 标签、15+ 属性类别、代码片段、自动闭合
- JavaScript:50+ 关键字、40+ 全局对象、80+ DOM 事件、方法补全、Node 模块
-
AI Ask模式: 智能问答,获取编程建议和解决方案- 快捷键:Ctrl/Cmd + Space 手动触发,方向键导航,Tab/Enter 接受
-
AI Edit模式: AI辅助代码编辑,实时Diff对比
-
AI图片生成: 根据描述生成网站所需的图片### 🤖 AI Copilot
-
一键建站: 通过简单描述,AI自动生成完整网站三种智能模式:
-
Ask 模式:智能问答,帮助解决编程问题
-
语法高亮支持多种编程语言(HTML, CSS, JavaScript, Python, etc.)- Imgen 模式:AI 图片生成,直接保存到项目
-
智能代码补全和提示
-
多标签管理,轻松切换多个文件### 🚀 服务器管理
-
实时保存,自动备份- 一键启动/停止本地 Web 服务器
-
自动端口检测和冲突处理
-
一键启动本地开发服务器- 实时服务器状态监控
-
实时预览网站效果
-
自动端口分配,避免冲突### 🧅 Tor 网络支持
-
服务器状态监控- 支持将网站托管到 Tor 隐藏服务
-
mkp224o 集成,生成虚荣洋葱地址
-
内置Tor支持,保护隐私- ✨ 新增:三种二进制文件来源(内置/系统/自定义)
-
一键生成.onion域名- ✨ 新增:智能回退机制,找不到时询问用户
-
自定义虚拟名称(Vanity Address)
-
Tor地址管理和QR码生成### 🎨 精美界面
-
无边框窗口设计
-
树形文件结构,直观清晰- 跟随系统主题
-
支持子目录递归显示- 流畅的动画效果
-
拖拽操作,便捷管理- 专业的 UI 设计
-
右键菜单快捷操作
-
深色/浅色主题切换- 自定义图片生成 API
-
响应式布局设计- 编辑器字体和大小设置
-
自定义窗口控制- 主题偏好设置
-
流畅的动画效果- ✨ 新增:标签页式设置界面(6 个分类面板)
-
✨ 新增:二进制工具路径配置
-
Node.js 16.0 或更高版本### 前置要求
-
npm 或 yarn- Node.js 16 或更高版本
-
操作系统:Windows 10+, macOS 10.13+, Linux- npm 或 yarn
# 克隆仓库```bash
git clone https://github.com/B5-Software/ArtiMeow-AIWebMaster.git
cd ArtiMeow-AIWebMaster
# 进入目录```
cd ArtiMeow-AIWebMaster
2. 安装依赖
# 安装依赖```bash
npm installnpm install
npm start3. 启动应用
npm start
### 打包```
```bash### 构建应用
# 打包所有平台
npm run build构建所有平台:
```bash
# 仅打包 macOSnpm run build
npm run build:mac```
# 仅打包 Windows仅构建 macOS:
npm run build:win```bash
npm run build:mac
# 仅打包 Linux```
npm run build:linux
```仅构建 Windows:
```bash
## 📚 文档npm run build:win
```
### 快速链接
- [📖 完整教程](docs/tutorials/00-index.md) - 30篇详细教程仅构建 Linux:
- [🎯 快速入门指南](docs/tutorials/01-installation.md)```bash
- [🤖 AI功能使用](docs/tutorials/10-ai-ask-mode.md)npm run build:linux
- [🧅 Tor配置指南](docs/tutorials/19-tor-introduction.md)```
### 核心概念## 配置
- **项目管理**: 创建、配置和管理多个Web项目
- **AI集成**: 利用AI提升开发效率首次运行时,需要在设置中配置:
- **服务器部署**: 本地和Tor隐藏服务部署
1. **语言模型设置**
## 🛠️ 技术栈 - API URL(例如:`https://api.openai.com/v1/chat/completions`)
- API Key
### 核心技术 - 模型名称(例如:`gpt-4`)
- **Electron** - 跨平台桌面应用框架
- **Node.js** - 后端运行时2. **图片模型设置**
- **Express** - Web服务器框架 - API URL(例如:`https://api.openai.com/v1/images/generations`)
- API Key
### AI集成 - 模型名称(例如:`dall-e-3`)
- 支持OpenAI API
- 支持自定义AI模型接口## 使用指南
- 流式响应,实时反馈
### 创建工作区
### 其他依赖
- **marked** - Markdown渲染1. 点击"工作区"选项卡
- **diff** - 代码差异对比2. 点击"创建工作区"或"AI 一键建站"
- **uuid** - 唯一标识符生成3. 输入项目名称(AI 建站还需输入需求描述)
- **axios** - HTTP请求4. 等待创建完成
- **qrcode** - QR码生成
### 编辑项目
## 🏗️ 项目结构
1. 在工作区列表中点击"编辑"按钮
```2. 使用文件浏览器打开文件
ArtiMeow-AIWebMaster/3. 在编辑器中修改代码
├── main.js # Electron主进程4. 使用 Ctrl/Cmd + S 保存
├── package.json # 项目配置
├── assets/ # 资源文件### 启动服务器
│ ├── bin/ # 二进制工具(Tor, mkp224o)
│ ├── fonts/ # Font Awesome图标1. 切换到"服务器状态"选项卡
│ └── icons/ # 应用图标2. 点击项目卡片上的"启动"按钮
├── src/3. 点击"预览"按钮在浏览器中查看
│ ├── core/ # 核心模块
│ │ ├── ConfigManager.js # 配置管理### 使用 AI Copilot
│ │ ├── ProjectManager.js # 项目管理
│ │ ├── ServerManager.js # 服务器管理**Ask 模式**:
│ │ ├── TorManager.js # Tor管理1. 输入问题
│ │ └── WindowManager.js # 窗口管理2. 可选:添加上下文文件
│ ├── services/ # 服务层3. 点击"提问"获取答案
│ │ └── AIService.js # AI服务
│ ├── renderer/ # 渲染进程页面**Edit 模式**:
│ │ ├── index.html # 主页面1. 打开要编辑的文件
│ │ ├── workspace.html # 工作区2. 输入编辑指令(例如:"添加响应式设计")
│ │ ├── settings.html # 设置3. 可选:添加额外上下文
│ │ ├── about.html # 关于4. 查看 diff 对比
│ │ └── tutorials.html # 教程5. 接受或拒绝修改
│ ├── scripts/ # 渲染进程脚本
│ │ ├── ai-copilot.js # AI助手**Imgen 模式**:
│ │ ├── code-editor.js # 代码编辑器1. 输入图片描述
│ │ ├── file-explorer.js # 文件浏览器2. 等待 AI 生成
│ │ └── ...3. 选择保存位置
│ └── styles/ # 样式文件4. 图片将保存到项目中
│ ├── main.css # 主样式
│ ├── workspace.css # 工作区样式## 项目结构
│ └── ...
└── docs/ # 文档```
└── tutorials/ # 教程文件ArtiMeow-AIWebMaster/
```├── main.js # Electron 主进程
├── package.json
## 🤝 贡献├── assets/ # 资源文件
│ └── fonts/ # Font Awesome
我们欢迎所有形式的贡献!├── src/
│ ├── core/ # 核心模块
### 如何贡献│ │ ├── ConfigManager.js # 配置管理
│ │ ├── ProjectManager.js # 项目管理
1. Fork 本仓库│ │ ├── ServerManager.js # 服务器管理
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)│ │ ├── TorManager.js # Tor 管理
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)│ │ └── WindowManager.js # 窗口管理
4. 推送到分支 (`git push origin feature/AmazingFeature`)│ ├── services/ # 服务层
5. 开启 Pull Request│ │ └── AIService.js # AI 服务
│ ├── renderer/ # 渲染进程 HTML
### 贡献指南│ │ ├── index.html # 主窗口
- 遵循现有代码风格│ │ ├── workspace.html # 工作区窗口
- 添加必要的注释│ │ └── settings.html # 设置窗口
- 更新相关文档│ ├── scripts/ # 渲染进程脚本
- 确保所有测试通过│ └── styles/ # 样式文件
└── binaries/ # 二进制文件(Tor、mkp224o)
## 🐛 问题反馈```
如果您发现了Bug或有功能建议,请[提交Issue](https://github.com/B5-Software/ArtiMeow-AIWebMaster/issues)。## 技术栈
## 📝 更新日志- **Electron** - 跨平台桌面应用框架
- **Express** - Web 服务器
### Version 1.0.0 (2025-10-07)- **Axios** - HTTP 客户端
- 🎉 首次发布- **diff** - 文本差异比较
- ✨ AI Ask/Edit/Image三大模式- **Font Awesome** - 图标库
- 🌐 本地服务器支持- 纯 CSS(无 UI 框架依赖)
- 🧅 Tor隐藏服务集成
- 📁 智能文件管理## 数据存储
- 📚 30篇完整教程
应用数据存储在:
## 📄 许可证- **macOS/Linux**: `~/Documents/ArtiMeow-AIWebMaster/`
- **Windows**: `%USERPROFILE%\Documents\ArtiMeow-AIWebMaster\`
本项目采用 **B5-Software Free and Open Knowledge Public License 1.0** 许可证。
目录结构:
**简单来说:**```
- ✅ 可以自由使用、学习、修改和分发ArtiMeow-AIWebMaster/
- ✅ 可用于商业目的├── config.json # 应用配置
- ✅ 无需支付任何费用├── .project-settings/ # 项目设置
- ✅ 保留原作者署名│ └── [project-uuid]/
│ ├── project.json # 项目配置
详见 [LICENSE](LICENSE) 文件。│ └── tor/ # Tor 密钥(如果启用)
└── [project-uuid]/ # 项目文件
## 👨💻 作者 ├── index.html
└── ...
**B5-Software**```
- 🌐 官网: [https://b5-software.org](https://b5-software.org)## 开发
- 📧 邮箱: b5-software@autistici.org
- 💬 GitHub: [@B5-Software](https://github.com/B5-Software)### 调试
---
**ArtiMeow AI WebMaster** - 让 AI 帮你构建网站 🚀