# webdraw

**Repository Path**: jsy96/webdraw

## Basic Information

- **Project Name**: webdraw
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-19
- **Last Updated**: 2026-06-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AI 矢量画板 · GLM-5.2

一个用**自然语言对话**控制矢量的网页画板。先画矢量到「预览层」，用自然语言反复修改（大小 / 缩放 / 平移 / 填充色 / 描边色 / 线条粗细 / 透明度 / 旋转 / 虚线 …），**确认后再落实到画板**。AI 后端使用 **GLM-5.2**，通过 function calling 输出结构化命令驱动画板。

## ✨ 功能特性

- **双层画板**：预览层（带橙色光晕，未定稿）+ 画板层（已确认落实），视觉上清晰区分。
- **自然语言控制**：用中文描述即可，例如「画一个蓝色圆形，放大两倍，半透明」。
- **预览 → 改 → 确认**工作流：所有新图形先进预览层，可反复修改，满意后再一键落实。
- **9 种矢量图形**：矩形、圆形、椭圆、直线、多边形、路径、文字、三角形、五角星。
- **完整变换**：平移、缩放、旋转，且缩放/旋转自动围绕图形中心，符合直觉。
- **对话历史**：完整记录每轮用户输入、AI 回复、工具调用与结果，刷新页面后自动恢复。
- **可用命令面板**：侧栏列出可点击的自然语言示例与 AI 工具清单。
- **撤销 / 导出 SVG**：支持撤销最近操作，支持一键导出当前画板为 SVG 文件。
- **安全**：API Key 只存在服务端环境变量中，**永远不会**进入前端代码或被提交到仓库。

## 🏗️ 架构

```
浏览器（前端）                 本地服务（Node.js，零依赖）         智谱 GLM
┌─────────────────┐           ┌──────────────────────┐          ┌─────────┐
│  SVG 双层画板    │  /api/chat │  从环境变量读 API Key │  HTTPS   │ GLM-5.2 │
│  对话 / 命令面板 │ ─────────▶ │  代理转发 /chat 请求  │ ───────▶ │(tool use)│
│  持久化/导出     │ ◀───────── │  返回模型响应        │ ◀─────── │         │
└─────────────────┘            └──────────────────────┘          └─────────┘
```

前端只和 `/api/chat` 通信，全程不知道、也无法接触到 API Key。

## 📦 项目结构

```
web/
├── server.js              # Node 后端（零依赖）：静态服务 + GLM 代理
├── start.bat              # Windows 启动脚本（全英文，双击即可）
├── start.ps1              # PowerShell 启动脚本
├── package.json
├── .env.example           # 环境变量示例（复制为 .env 后填写 key）
├── .gitignore             # 排除 .env 等敏感文件
├── README.md
└── public/                # 前端（纯静态）
    ├── index.html
    ├── styles.css
    └── js/
        ├── board.js       # 矢量画板（SVG 双层、变换、9 种图形、快照/恢复）
        ├── commands.js    # GLM 工具定义、命令执行器、系统提示词
        ├── ai.js          # AI 客户端：工具调用循环
        └── app.js         # 主入口：UI 绑定、对话、持久化、撤销、导出
```

## 🚀 快速开始

### 1. 配置 API Key（二选一，**只能从环境变量读取**）

**方式 A —— 环境变量（推荐）**

- Windows CMD：
  ```bat
  set GLM_API_KEY=你的key
  ```
- Windows PowerShell：
  ```powershell
  $env:GLM_API_KEY = "你的key"
  ```
- Linux / macOS：
  ```bash
  export GLM_API_KEY=你的key
  ```

**方式 B —— `.env` 文件**

把 `.env.example` 复制为 `.env`，填入：
```
GLM_API_KEY=你的key
GLM_MODEL=glm-5.2
```
`.env` 已被 `.gitignore` 排除，不会被提交。

### 2. 启动服务

需要先安装 [Node.js](https://nodejs.org/)（v14+）。本项目**零依赖**，无需 `npm install`。

- **Windows**：双击 `start.bat`（或右键 `start.ps1` →「使用 PowerShell 运行」）。
  脚本会在新窗口启动服务并自动打开浏览器。
- **手动启动**：
  ```bash
  cd web
  node server.js
  ```
  然后浏览器打开 <http://localhost:3000>。

启动后控制台会显示 API Key 是否已配置。若未配置，服务仍可启动，但 AI 对话不可用。

### 3. 开始使用

1. 在右侧对话框输入自然语言，例如「画一个蓝色的圆，放在中间」。
2. 图形会出现在**预览层**（带橙色光晕）。
3. 继续对话修改：「放大两倍」「改成红色描边」「向右移 100」「半透明」。
4. 满意后点 **✓ 确认落实**（或对 AI 说「确认」），图形进入画板。
5. 点击 **导出 SVG** 可下载当前作品。

## 🎮 可用命令（自然语言示例）

| 意图 | 示例 |
|------|------|
| 画图形 | 「画一个红色矩形，带圆角，绿色描边」 |
| 五角星 | 「画一颗黄色的五角星」 |
| 缩放 | 「把最后一个图形放大到两倍」 |
| 平移 | 「把图形向右平移 100 像素」 |
| 颜色 | 「把填充色改成紫色，描边加粗到 5」 |
| 旋转/透明 | 「旋转 45 度，并设为半透明」 |
| 确认 | 「确认，落实到画板」 |
| 清空 | 「清空预览层重新画」 |

## 🔧 AI 可调用的工具

| 工具 | 作用 |
|------|------|
| `draw_shape` | 在预览层绘制一个矢量图形 |
| `modify_shape` | 修改图形属性（大小 / 颜色 / 透明度 / 平移 / 缩放 / 旋转 / 虚线等） |
| `delete_shape` | 删除图形 |
| `confirm_shapes` | 预览层图形落实到画板 |
| `clear_preview` | 清空预览层 |
| `clear_board` | 清空整个画板 |

## ⚙️ 配置项（环境变量）

| 变量 | 默认值 | 说明 |
|------|--------|------|
| `GLM_API_KEY` | （必填） | 智谱 / GLM 的 API Key；也接受环境变量 `ANTHROPIC_AUTH_TOKEN` / `ANTHROPIC_API_KEY`（可复用 Claude Code 同款 coding-plan key） |
| `GLM_MODEL` | `glm-5.2` | 模型名 |
| `GLM_BASE_URL` | `https://open.bigmodel.cn/api/anthropic` | API 基址（**Anthropic 协议**端点；coding-plan 套餐必须走此端点，走 `/api/paas/v4` 会被误报"余额不足"） |
| `GLM_MAX_TOKENS` | `4096` | 每轮最大输出 token 数 |
| `PORT` | `3000` | 服务端口 |

## 🔒 安全说明

- API Key **只**通过 `process.env` 在服务端读取，前端代码、网络请求中均不包含。
- `.env` 默认被 `.gitignore` 排除，不会进入版本库。
- 请勿将真实 Key 写入任何脚本或文档并提交。

## 🧩 工作流说明

```
用户："画一个蓝色圆"
        │
        ▼
  draw_shape → 预览层（橙色光晕）
        │
用户："放大两倍，半透明"
        │
        ▼
  modify_shape → 预览层更新
        │
用户："确认"
        │
        ▼
  confirm_shapes → 画板层（落实）
```

预览层是「草稿区」，确认前可无限次修改，不会污染已落实的画板内容。