Qiaomu Artist Style

在欣赏 AI 绘画或研究艺术史时，我们常好奇：“如果让梵高、莫奈和毕加索画同一座山，会有什么不同？” Qiaomu Artist Style 是一个独特的画家风格对照网站，它使用完全相同的场景提示词，仅替换画家名字，生成了 383 位艺术大师的作品。

通过这种控制变量法，用户可以直观地对比不同艺术家在构图、色彩、笔触和情绪表达上的细微差异。无论是寻找创作灵感、学习风格迁移，还是单纯享受视觉盛宴，Qiaomu 都提供了一个清晰、沉浸且易于交互的数字化展厅。

核心亮点：同景异构、海量收录、极致交互

1. 同场景多风格，直观对比

• 控制变量实验：所有图片均基于统一提示词 “远处是山，近处是深林和小溪，{画家名字}风格的一幅画” 生成。
• 差异可视化：一眼看清印象派的光影、表现主义的扭曲、现实主义的细腻，帮助理解风格本质。
• 灵感激发器：为设计师、插画师提供丰富的风格参考，快速定位心仪的视觉基调。

2. 383 位大师，全覆盖收录

• 精选名单：从 1260 位绘图艺术家名单中筛选，优先保留有明确风格分类、带中文名或加粗标注的艺术家。
• 高质量呈现：仅展示已成功生成并本地存储为 WebP 格式的 383 位画家作品，确保浏览体验流畅无缺图。
• 多维信息：每张图片附带中文译名、原始风格名及属性标签，兼顾专业性与普及性。

3. 智能搜索与流派筛选

• 多语言搜索：支持通过画家英文名、中文名或风格标签（如“印象派”、“超现实主义”）快速检索。
• 流派过滤：按艺术流派一键筛选，聚焦特定历史时期或运动的作品集合。
• 本地收藏：利用浏览器 LocalStorage 保存喜欢的风格，建立个人专属灵感库，无需注册账号。

4. 沉浸式交互与移动端适配

• Lightbox 大图模式：点击缩略图进入全屏查看，支持键盘左右方向键快速切换前后画家。
• 一键复制提示词：方便用户直接在 Midjourney/Stable Diffusion 中复用测试。
• 响应式设计：
  • 桌面端：网格布局，信息丰富。
  • 移动端：单列图片流，横向滑动筛选标签，Lightbox 上下排列详情，完美适配小屏操作。

一键部署与使用

1. 在线体验

直接访问部署好的站点，无需任何配置即可浏览全部 383 位画家作品。

2. 私有部署 (Vercel)

项目采用纯静态架构，部署极其简单：

1. Fork 本仓库到你的 GitHub 账号。
2. 登录 Vercel，导入该仓库。
3. 保持默认配置，点击 Deploy。
4. 无需环境变量：页面直接读取仓库内的 public/generated/ 静态 WebP 图片。

3. 本地开发

git clone https://github.com/your-repo/qiaomu-artist-style.git
cd qiaomu-artist-style
npm install
npm run dev

访问 http://localhost:3000 预览。

🛠️ 定制你的同场景图库

Qiaomu 的核心逻辑是 “固定场景 + 变量艺术家”。你可以轻松将其改造为其他主题的对照库（如“一只猫”、“一座城市”等）。

步骤 1：修改提示词模板

编辑 data/site-config.ts：

export const siteConfig = {
  promptTemplate: "一只在窗台睡觉的加菲猫，{artist}风格的一幅画", // 修改此处
  // ...
};

步骤 2：重新生成图片

配置 HiAPI Key 后运行生成脚本：

export HIAPI_API_KEY="your_api_key"

# 强制重新生成前 12 位画家
npm run generate:images -- --limit=12 --force=true

# 分批生成后续画家（避免超时）
npm run generate:images -- --offset=12 --limit=25
npm run generate:images -- --offset=37 --limit=25

脚本特性：

• --force=true：覆盖已有图片，适用于更换场景后重刷。
• --stop-on-error=true：遇到错误立即停止，便于调试。
• 自动跳过已存在的 WebP 文件，支持断点续传。

步骤 3：更新作者名单（可选）

若需调整收录的画家列表：

npm run build:artists

规则：优先保留有中文名、明确分类的艺术家，最终补足至 500 人候选池。

自动化文档截图

README 中的产品截图由 Playwright 自动生成，确保展示效果与实际站点一致：

npm run build
npm run start
SCREENSHOT_URL=http://127.0.0.1:3000 npm run capture:screenshots

生成的截图将自动更新至 docs/assets/ 目录。