[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81200":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":15,"stars30d":15,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":16,"rankGlobal":10,"rankLanguage":10,"license":17,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":20,"hasPages":18,"topics":21,"createdAt":10,"pushedAt":10,"updatedAt":27,"readmeContent":28,"aiSummary":29,"trendingCount":15,"starSnapshotCount":15,"syncStatus":13,"lastSyncTime":30,"discoverSource":31},81200,"CandyCraft","Saito-Sakuya\u002FCandyCraft","Saito-Sakuya","Candy Craft：一个可视化 AI 生图提示词优化工具，支持画板编排、相机布光和双模式 API（后台托管\u002F用户自定义），可直接部署到 Cloudflare Pages。","https:\u002F\u002Fcandy.aninoi.com",null,"JavaScript",26,2,1,0,1.43,"MIT License",false,"main",true,[22,23,24,25,26],"ai","cloudflare-pages","image-generation","javascript","prompt-engineering-tool","2026-06-12 02:04:12","# Candy Craft\n\n> AI 驱动的可视化生图提示词优化工具。\n\n[![License: MIT](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-yellow.svg)](.\u002FLICENSE)\n[![Deployable on Cloudflare Pages](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDeployable-Cloudflare%20Pages-F38020?logo=cloudflare&logoColor=white)](https:\u002F\u002Fdevelopers.cloudflare.com\u002Fpages\u002F)\n\n---\n\n## 目录\n\n- [项目简介](#项目简介)\n- [功能总览](#功能总览)\n- [工作流](#工作流)\n- [AI 输出稳定性](#ai-输出稳定性)\n- [目录结构](#目录结构)\n- [模块说明](#模块说明)\n- [快速开始](#快速开始)\n- [配置说明](#配置说明)\n- [技术栈](#技术栈)\n- [版本历史](#版本历史)\n\n---\n\n## 项目简介\n\nCandy Craft 是一个纯静态前端 + Cloudflare Pages Functions 的可视化生图提示词工作台。它把提示词分析、画板编辑、构图尺寸、相机布光、风格维度、文本保真、排除约束和最终提示词优化整合到一个可操作的界面中。\n\n当前版本：`BetaA.a.8`，版本号由 `js\u002Fversion.js` 单一来源驱动。\n\n支持两种 AI 调用方式：\n\n- `后台托管`：浏览器请求同源 `\u002Fapi\u002Fchat` 与 `\u002Fapi\u002Fanalyze-orchestrate`，上游密钥只保存在 Pages Secrets \u002F 服务端环境变量中。\n- `用户自定义`：浏览器按角色直连用户配置的 OpenAI 兼容端点，支持 `structure \u002F lighting \u002F normalize` 三角色分别配置 `Base URL + API Key + Model`。\n\n---\n\n## 功能总览\n\n### 提示词分析与迭代\n\n- 分析提示词后生成固定 8 项调节维度、画板元素、预设方案、场景建议与构图建议。\n- 支持预设方案独立刷新、维度独立刷新、单项维度修改、基于当前状态的迭代分析。\n- AI 输出使用版本化 JSON 契约、严格解析与失败回退，避免脏 JSON 直接污染 UI 状态。\n\n### 画板与海报工作区\n\n- 画板支持元素拖拽、缩放、图层、焦点、深度链接、前后景管理。\n- 首页提供独立海报模式入口；进入后画板占主体，工作流、构图尺寸、模板、图层、结果输出收纳到右侧参数面板。\n- 场景控制与维度雷达通过右侧快捷按钮打开悬浮窗，避免常驻挤占工作区。\n- 画板可视尺寸采用三档显示桶：横向 `10:7`、方形 `1:1`、纵向 `3:4`；最终出图比例仍以构图数据为准。\n\n### 构图尺寸\n\n- 构图尺寸只保留生图 AI 稳定可理解的两类信息：横竖比例与最终像素尺寸。\n- 尺寸模式：`preset_resolution`（长边分辨率）与 `custom_pixel`（自定义像素）。\n- 长边像素预设：`1024 \u002F 1536 \u002F 1920 \u002F 2048 \u002F 2560 \u002F 2712 \u002F 3072 \u002F 3840 \u002F 4096 \u002F 7680`。\n- 比例库覆盖横向、纵向、方形、黄金比例与纸张比例模板；纸张仅作为比例模板，不引入厘米、DPI 或印前语义。\n\n### 相机、布光与 3D 预览\n\n- 相机与布光支持三视图联动：俯视、正视、侧视。\n- 光源主状态为动态 `lights[]`，支持增删改查，软上限 12。\n- 灯光建议支持二轮细化、纠错重试 1 次、失败安全降级。\n- Three.js 3D 预览同步相机、主体代理、灯光 marker、覆盖体与视锥，只读预览，不阻断原三视图编辑。\n\n### 模板、文本与排除项\n\n- 模板体系支持本地保存、导出、导入、应用与旧模板兼容迁移，模板版本为 `cc.template.v1`。\n- 画板文本支持 Exact Text Blocks 原文透传，用于海报标题、招牌文字、封面文案等确定文本。\n- 支持对象级与全局“排除 \u002F 反向提示词”，最终以通用 `Avoid:` \u002F `Negative constraints` 表达，不默认绑定平台私有 `--no` 语法。\n\n### 视觉模式\n\n- Candy \u002F Pro 是视觉主题模式。\n- Candy 保留轻量糖果风格。\n- Pro 使用米黄 \u002F 深灰专业视觉、小圆角、弱阴影与更高对比度。\n- 明暗主题与 Candy \u002F Pro 可组合使用。\n\n---\n\n## 工作流\n\n```text\n用户输入提示词或进入海报模式\n  |\n  +-- 分析提示词\n  |     +-- 结构分析：元素、维度、预设、场景、构图\n  |     +-- 灯光细化：相机与光源建议\n  |     +-- 归一化：字段校验、冲突规避、失败回退\n  |\n  +-- 可视化编辑\n  |     +-- 画板：元素、图层、焦点、链接、文本透传、排除项\n  |     +-- 构图：比例、方向、最终像素尺寸\n  |     +-- 场景：相机、动态光源、Three.js 预览\n  |     +-- 维度：8 项滑杆与雷达图\n  |\n  +-- 优化提示词\n        +-- 收集当前画板与参数状态\n        +-- 生成结构化优化契约\n        +-- 输出最终可复制的生图 prompt\n```\n\n---\n\n## AI 输出稳定性\n\n核心 AI 步骤均使用固定 schema、字段顺序与语义校验：\n\n| 步骤 | 契约版本 | 说明 |\n|---|---|---|\n| 主分析 | `cc.analysis.v1` | 维度、元素、预设、场景建议、构图建议 |\n| 预设刷新 | `cc.presets_refresh.v1` | 只刷新预设方案 |\n| 维度刷新 | `cc.dimensions_refresh.v1` | 维度固定 8 项 |\n| 单项修改 | `cc.dimension_replace.v1` | 修改一个维度并保持总数 8 |\n| 灯光细化 | `cc.lighting.v2` | 动态光源归一化、重试降级 |\n| 最终优化 | `cc.optimize.v1` | JSON 包裹 + `finalPrompt` 文本输出 |\n\n`cc.optimize.v1` 的 block 顺序固定为：\n\n```text\nsubject -> composition -> foreground -> background -> camera -> lighting -> style -> exactText -> negativeConstraints -> renderConstraints\n```\n\n稳定性规则：\n\n- `Exact text blocks` 必须保留原文，不翻译、不改写、不纠错。\n- `Negative constraints` 只进入排除段，不混入正向主体、前景或背景描述。\n- 构图只输出 `aspect ratio \u002F orientation \u002F final pixel size \u002F --ar`，不输出厘米、DPI 或打印尺寸。\n- 室内 \u002F 棚拍在未显式给出时段词时不自动注入日出、黄金、正午或夜晚。\n- 流明值按场景分档软上限压制，避免合法但不实用的极值。\n- 托管编排与前端解析都会产生合同状态与可读错误信息，保证失败时可降级而不中断主流程。\n\n---\n\n## 目录结构\n\n```text\nintelligent-hawking\u002F\n|\n|-- index.html                         # 单页入口与 DOM 结构\n|-- README.md                          # 项目说明\n|-- LICENSE\n|\n|-- assets\u002F\n|   `-- favicon.svg\n|\n|-- css\u002F\n|   |-- variables.css                  # 设计 token、Candy\u002FPro、明暗变量\n|   |-- base.css                       # reset、全局基础、主题覆盖\n|   |-- layout.css                     # 页面、海报工作区、右侧检视器布局\n|   |-- components.css                 # 按钮、卡片、表单、设置、模板、弹窗\n|   |-- canvas.css                     # 画板、元素、图层、链接、文本\u002F排除标识\n|   |-- scene.css                      # 三视图、灯光、Three.js 区域\n|   `-- animations.css                 # 动画关键帧\n|\n|-- functions\u002Fapi\u002F\n|   |-- chat.js                        # 同源 \u002Fapi\u002Fchat 代理，SSE 透传\n|   `-- analyze-orchestrate.js         # 托管三角色编排与合同门禁\n|\n`-- js\u002F\n    |-- app.js                         # 主入口、状态机、DOM 搬运、流程编排\n    |-- ai-contract.js                 # AI 合同定义、错误码与状态生成\n    |-- prompt.js                      # 分析\u002F优化消息构建、响应解析、语义校验\n    |-- api.js                         # managed\u002Fcustom API 通道与角色配置\n    |-- settings.js                    # 设置面板、托管\u002F自定义三角色配置\n    |-- canvas.js                      # 画板、对象编辑、文本透传、排除项\n    |-- composition.js                 # 比例库、长边分辨率、自定义像素\n    |-- composition-recommendation.js   # 构图推荐归一化\n    |-- scene.js                       # 相机、动态光源、三视图状态\n    |-- scene-recommendation.js        # 场景推荐约束与时段漂移修复\n    |-- lighting-recommendation.js     # 灯光建议归一化、重试质量判定、流明软上限\n    |-- scene-preview-3d.js            # Three.js 3D 预览\n    |-- sliders.js                     # 维度滑杆\n    |-- radar.js                       # 雷达图封装\n    |-- presets.js                     # 预设方案卡片\n    |-- templates.js                   # 模板保存、导入、导出、应用\n    |-- style-toggle.js                # 动漫\u002F写实风格滑杆\n    |-- theme.js                       # 明暗主题\n    |-- ui-mode.js                     # Candy \u002F Pro UI 模式\n    |-- history.js                     # 历史记录\n    |-- utils.js                       # 通用工具\n    `-- version.js                     # APP_VERSION 单一版本源\n```\n\n---\n\n## 模块说明\n\n### 前端编排\n\n- `app.js` 是中央协调器，负责分析、优化、海报工作区进入\u002F退出、节点挂载\u002F回挂、状态快照与结果渲染。\n- `api.js` 负责双模式传输：后台托管走同源 Functions，自定义模式按角色直连用户端点。\n- `settings.js` 管理 `managed\u002Fcustom`、三角色配置、连接测试与旧单端点配置迁移。\n\n### 画板与构图\n\n- `canvas.js` 管理元素拖拽、缩放、焦点、链接、图层、文本透传与排除项。\n- `composition.js` 只维护生图 AI 能稳定理解的比例与像素尺寸，不维护厘米、DPI 或打印尺寸。\n- `templates.js` 以 `cc.template.v1` 保存 composition、elements、links、scene、dimensions、文本透传与排除项。\n\n### 相机与布光\n\n- `scene.js` 维护相机、动态光源数组、三视图与场景快照。\n- `scene-preview-3d.js` 读取同一份 scene snapshot 渲染 Three.js 只读预览。\n- `lighting-recommendation.js` 负责二轮灯光输出质量判定、兼容旧命名、纠错重试与流明分档软上限。\n\n### AI 合同\n\n- `ai-contract.js` 定义 schema、字段顺序、block 顺序和合同状态。\n- `prompt.js` 负责构建每一步消息、解析模型返回、生成合同元信息、保护 Exact Text Blocks 与 Negative Constraints。\n\n---\n\n## 快速开始\n\n### 1. 本地联调\n\n项目无构建步骤，推荐使用 Wrangler 启动静态页面 + Pages Functions：\n\n```bash\nnpx wrangler pages dev . --compatibility-date=2026-05-24\n```\n\n默认本地地址通常为：\n\n```text\nhttp:\u002F\u002F127.0.0.1:8788\n```\n\n### 2. 本地环境变量\n\n在仓库根目录创建 `.dev.vars`。该文件已加入 `.gitignore`，不要提交真实密钥。\n\n```bash\nUPSTREAM_BASE_URL=https:\u002F\u002Fapi.openai.com\u002Fv1\nUPSTREAM_API_KEY=sk-your-api-key\nDEFAULT_MODEL=gpt-4o\n```\n\n后台托管模式需要以上变量；用户自定义模式可在浏览器设置面板内填写自己的三角色端点。\n\n### 3. 使用流程\n\n1. 输入提示词并选择 Candy \u002F Pro、明暗主题与动漫 \u002F 写实风格档。\n2. 点击“分析提示词”，生成画板元素、维度、预设、构图建议和相机布光建议。\n3. 在画板中拖拽元素、调整图层、设置焦点、建立链接；必要时开启文本透传或排除内容。\n4. 调整构图比例、最终像素尺寸、相机、光源、Three.js 预览与 8 项维度。\n5. 点击“优化提示词”，输出经 `cc.optimize.v1` 合同校验的最终生图 prompt。\n6. 也可直接进入海报模式，在大画板工作区中从空画板开始创作。\n\n---\n\n## 配置说明\n\n### API 模式\n\n| 模式 | 请求路径 | 密钥位置 | 适用场景 |\n|---|---|---|---|\n| `managed` 后台托管 | `\u002Fapi\u002Fchat`、`\u002Fapi\u002Fanalyze-orchestrate` | Pages Secrets \u002F 服务端环境变量 | 公开部署、统一模型策略、浏览器不暴露密钥 |\n| `custom` 用户自定义 | `${BaseURL}\u002Fchat\u002Fcompletions` | 当前浏览器 localStorage | 本地测试、多供应商、多角色端点 |\n\n### 用户自定义三角色配置\n\n| 角色 | 作用 | 推荐模型倾向 |\n|---|---|---|\n| `structure` | 结构分析、元素、维度、预设 | `pro` 更稳，复杂提示词优先 |\n| `lighting` | 灯光细化、二轮纠错 | `flash` 可用，失败会重试\u002F降级 |\n| `normalize` | 合同归一化、最终 prompt | `pro` 更稳，负责最终输出质量 |\n\n### localStorage 键\n\n| Key | 说明 |\n|---|---|\n| `pc_api_mode` | `managed` \u002F `custom` |\n| `pc_role_structure_base_url` | structure 角色 Base URL |\n| `pc_role_structure_api_key` | structure 角色 API Key |\n| `pc_role_structure_model` | structure 角色模型 |\n| `pc_role_lighting_base_url` | lighting 角色 Base URL |\n| `pc_role_lighting_api_key` | lighting 角色 API Key |\n| `pc_role_lighting_model` | lighting 角色模型 |\n| `pc_role_normalize_base_url` | normalize 角色 Base URL |\n| `pc_role_normalize_api_key` | normalize 角色 API Key |\n| `pc_role_normalize_model` | normalize 角色模型 |\n| `cc_templates` | 本地模板库 |\n| `cc_ui_mode` | `candy` \u002F `pro` |\n\n旧版 `pc_custom_base_url \u002F pc_custom_api_key \u002F pc_custom_model` 会在首次读取时复制到三角色配置中作为兼容迁移来源。\n\n### Cloudflare Pages 部署\n\n1. 将仓库推送到 GitHub。\n2. Cloudflare Dashboard -> Workers & Pages -> Create -> Pages -> Connect to Git。\n3. 构建配置：\n   - Build command：留空\n   - Build output directory：`\u002F`\n   - Functions：启用，`functions\u002F` 会自动生效\n4. 在 Preview 与 Production 环境配置：\n   - `UPSTREAM_BASE_URL`\n   - `UPSTREAM_API_KEY`（Secret）\n   - `DEFAULT_MODEL`\n5. 推荐使用 `main` 作为 Production 分支，其他分支作为 Preview。\n\n### Cloudflare 后台密钥填写\n\n在 Cloudflare Pages 项目中进入：\n\n```text\nSettings -> Environment variables\n```\n\n分别给 `Production` 和 `Preview` 配置同名变量：\n\n基础兜底配置仍建议保留，供 `\u002Fapi\u002Fchat`、连接测试和任一未单独配置的角色使用：\n\n| 变量名 | 类型 | 示例 | 说明 |\n|---|---|---|---|\n| `UPSTREAM_BASE_URL` | Variable | `https:\u002F\u002Fapi.openai.com\u002Fv1` | OpenAI 兼容接口根地址，只填到 `\u002Fv1`，不要带 `\u002Fchat\u002Fcompletions` |\n| `UPSTREAM_API_KEY` | Secret | `sk-...` | 上游 API Key，必须用 Secret 保存 |\n| `DEFAULT_MODEL` | Variable | `gpt-4o` | 后台托管模式使用的模型名 |\n\n如果只想用一套托管模型，例如 DeepSeek，填写方式是：\n\n```text\nUPSTREAM_BASE_URL=https:\u002F\u002Fapi.deepseek.com\u002Fv1\nUPSTREAM_API_KEY=你的 DeepSeek API Key\nDEFAULT_MODEL=deepseek-v4-flash\n```\n\n如果希望 Cloudflare 后端也按角色使用多 AI 协作，可以在保留上面三项兜底配置的基础上，按需增加角色级覆盖：\n\n| 角色 | 变量名 | 建议用途 |\n|---|---|---|\n| 结构分析 | `STRUCTURE_BASE_URL` \u002F `STRUCTURE_API_KEY` \u002F `STRUCTURE_MODEL` | 复杂提示词结构拆解，建议用更稳的 pro 模型 |\n| 灯光细化 | `LIGHTING_BASE_URL` \u002F `LIGHTING_API_KEY` \u002F `LIGHTING_MODEL` | 灯光二轮建议，可用更快更便宜的 flash 模型 |\n| 最终归一化 | `NORMALIZE_BASE_URL` \u002F `NORMALIZE_API_KEY` \u002F `NORMALIZE_MODEL` | 最终合同归一化与 prompt 输出，建议用更稳的 pro 模型 |\n\n示例：\n\n```text\n# 全局兜底\nUPSTREAM_BASE_URL=https:\u002F\u002Fapi.deepseek.com\u002Fv1\nUPSTREAM_API_KEY=你的 DeepSeek API Key\nDEFAULT_MODEL=deepseek-v4-flash\n\n# 结构分析：可换成强模型\nSTRUCTURE_BASE_URL=https:\u002F\u002Fapi.example-pro.com\u002Fv1\nSTRUCTURE_API_KEY=你的结构分析 Key\nSTRUCTURE_MODEL=example-pro\n\n# 灯光细化：可继续用 flash\nLIGHTING_BASE_URL=https:\u002F\u002Fapi.deepseek.com\u002Fv1\nLIGHTING_API_KEY=你的 DeepSeek API Key\nLIGHTING_MODEL=deepseek-v4-flash\n\n# 最终归一化：建议用强模型\nNORMALIZE_BASE_URL=https:\u002F\u002Fapi.example-pro.com\u002Fv1\nNORMALIZE_API_KEY=你的归一化 Key\nNORMALIZE_MODEL=example-pro\n```\n\n注意：\n\n- 所有 `*_API_KEY` 都建议在 Cloudflare 中设置为 Secret，不要写进代码、README、`.dev.vars.example` 或前端设置。\n- `UPSTREAM_BASE_URL` 不要写成 `https:\u002F\u002Fapi.deepseek.com\u002Fv1\u002Fchat\u002Fcompletions`，代码会自动拼接 `\u002Fchat\u002Fcompletions`。\n- 角色级 `*_BASE_URL` 同样只填到 `\u002Fv1`，不要带 `\u002Fchat\u002Fcompletions`。\n- 某个角色的三项变量不完整时，会自动回退到全局 `UPSTREAM_* + DEFAULT_MODEL`。\n- `\u002Fapi\u002Fchat` 仍使用全局 `UPSTREAM_* + DEFAULT_MODEL` 作为单模型兜底路径。\n- 前端“用户自定义”模式仍是浏览器本地配置，不读取 Cloudflare 后台变量。\n\n---\n\n## 技术栈\n\n| 层面 | 技术 | 说明 |\n|---|---|---|\n| 结构 | HTML5 | 单页入口，无构建工具 |\n| 样式 | Vanilla CSS | CSS 变量、Candy\u002FPro、明暗主题 |\n| 逻辑 | Vanilla JS | ES Modules |\n| 3D | Three.js | 动态导入 CDN 模块，场景只读预览 |\n| 图表 | Chart.js | 雷达图 |\n| 渲染 | marked.js | 优化结果 Markdown 渲染 |\n| API | Cloudflare Pages Functions | `\u002Fapi\u002Fchat` 与 `\u002Fapi\u002Fanalyze-orchestrate` |\n| 存储 | localStorage | 设置、历史、模板、主题 |\n\n---\n\n## 版本历史\n\n| 版本 | 主要变更 |\n|---|---|\n| `BetaA.a.8` | 动态光源、Three.js、海报工作区、模板、Pro 主题、文本透传、排除项、AI 合同门禁 |\n| `BetaA.a.x` | 独立刷新、迭代分析、固定 8 维、结构化输出契约 |\n| Legacy v3.x | Cloudflare Pages Functions、夜间模式、画板图层、基础四灯布光与比例控制 |\n\n---\n\nCandy Craft — 可视化、可审计、可迭代的生图提示词工作台。\n","Candy Craft 是一个可视化 AI 生图提示词优化工具，支持画板编排、相机布光和双模式 API（后台托管\u002F用户自定义），可直接部署到 Cloudflare Pages。其核心功能包括提示词分析与迭代、画板编辑、构图尺寸调整、相机布光及3D预览等，通过将这些功能整合到一个可操作的界面中，为用户提供了一个高效的工作台。项目采用纯静态前端结合 Cloudflare Pages Functions 技术栈实现，并且支持两种AI调用方式以适应不同用户的隐私和安全需求。Candy Craft 适用于需要进行图像生成前后期处理的各种场景，特别是对于那些希望在不牺牲创意自由度的前提下提高工作效率的设计者和开发者来说，是一个非常实用的工具。","2026-06-11 04:03:52","CREATED_QUERY"]