佩因图尔（免费AI图像生成器）

一款采用React、TypeScript和Tailwind CSS构建的简洁、暗色主题AI图像生成器。该应用利用来自Hugging Face、Gitee AI、Model Scope和A4F的强大生成模型，可在几秒钟内根据文本提示创建高质量图像。

✨ 特性

• 多提供商架构：无缝切换Hugging Face、Gitee AI、Model Scope和A4F。您还可以添加自定义OpenAI兼容提供商，以无限扩展功能。
• 多样化的模型生态：访问广泛的模型，包括：
  • 生成类：Z-Image Turbo、Qwen Image、Ovis Image、FLUX.1 Schnell/Dev/Krea、FLUX.2。
  • 文本/优化类：OpenAI 4o-mini、DeepSeek V3/R1、Qwen 3、Gemini 2.5 Flash Lite。
• 专业图像编辑器：使用Qwen-Image-Edit模型精确地修改现有图像。功能包括画笔/矩形选择、参考图像支持（最多3张）以及AI辅助提示优化。
• 实时动态效果（Wan 2.2）：使用先进的Wan 2.2模型将静态图像转换为5秒的动态电影级视频（支持Hugging Face和Gitee AI）。
• 灵活的存储系统：
  • 本地（OPFS）：浏览器内的高性能持久化本地存储。
  • 云端：连接S3兼容存储（AWS、R2、MinIO）或WebDAV，以在不同设备间同步您的创作。
• 提示工程：集成的AI提示增强器，可将简单的想法扩展为详细的描述。包含自动翻译功能，用于优化针对以英语为中心的模型（如FLUX）的提示。
• 高级控制：通过可调节的推理步数、种子控制、引导尺度和高清模式（4倍超分辨率）精细调整您的创作。
• 服务模式：
  • 本地：完全在浏览器中使用公共API运行。
  • 服务器端：连接到私有后端以代理请求。
  • 混合模式：结合本地逻辑与服务器功能的混合模式。
• 注重隐私：历史记录和凭据存储在浏览器的LocalStorage中。无用户追踪。

🛠 技术栈

• 框架：React 19
• 构建工具：Vite
• 样式：Tailwind CSS
• 图标：Lucide React
• 状态管理：Zustand（带持久化）
• 存储：OPFS（Origin Private File System）
• APIs：Hugging Face Inference、Gitee AI、Model Scope、A4F、Pollinations.ai、S3 / WebDAV协议

🚀 快速上手

先决条件

• Node.js（v18或更高版本）
• npm或yarn或pnpm

安装

1. 克隆仓库：

   git clone https://github.com/Amery2010/peinture.git
   cd peinture
   

2. 安装依赖项：

   npm install
   

3. 启动开发服务器：

   npm run dev
   

4. 打开浏览器，访问http://localhost:5173。

📦 部署

该项目是一个静态单页应用（SPA），因此可以轻松部署到任何支持静态托管的平台上。

选项1：Vercel（推荐）

Vercel专为前端框架优化，无需任何配置。

1. 安装Vercel CLI：

   npm i -g vercel
   

2. 在项目根目录下运行部署命令：

   vercel
   

3. 按照提示操作。Vercel会自动检测Vite，并将构建命令设置为npm run build，输出目录设置为dist。

或者通过Vercel仪表板：

1. 将代码推送到GitHub。
2. 在Vercel中导入仓库。
3. 保持默认的“框架预设”为Vite。
4. 点击部署。

选项2：Cloudflare Pages

Cloudflare Pages是在Cloudflare网络上托管静态资产的最佳方式。

1. 将代码推送到GitHub仓库。
2. 登录Cloudflare仪表板并前往Compute (Workers & Pages) > 创建应用 > Pages > 连接到Git。
3. 选择您的仓库。
4. 在“构建设置”中：
   • 框架预设：Vite
   • 构建命令：npm run build
   • 构建输出目录：dist
5. 点击保存并部署。

选项3：静态CDN（Nginx、Apache、Netlify、S3）

要在任何标准Web服务器或CDN上托管：

1. 在本地构建项目：

   npm run build
   

2. 这将生成一个包含index.html和打包资源的dist文件夹。

3. 将dist文件夹的内容上传到您服务器的公共根目录（例如/var/www/html或S3存储桶）。

4. 对于SPA很重要：确保您的服务器配置为将所有404请求重定向到index.html，以便React Router（如果未来添加）或客户端逻辑处理路由。

⚙️ 配置

您可以在应用的设置菜单中配置API令牌。

Hugging Face令牌（可选）

应用程序开箱即用，使用公共配额即可运行。然而，对于大量使用或高峰时段，建议提供您自己的令牌。

1. 从Hugging Face设置获取令牌。
2. 将其粘贴到设置中的Hugging Face令牌字段。

Gitee AI令牌（使用Gitee时必需）

要使用Gitee AI提供商，您必须提供API令牌。

1. 从Gitee AI仪表板获取令牌。
2. 将其粘贴到设置中的Gitee AI令牌字段。
3. Gitee AI为生成的图像提供每日免费配额。

Model Scope令牌（使用Model Scope时必需）

要使用Model Scope提供商，您必须提供API令牌。

1. 从Model Scope仪表板获取令牌。
2. 将其粘贴到设置中的Model Scope令牌字段。

A4F令牌（使用A4F时必需）

要使用A4F提供商，您必须提供API令牌。

1. 从A4F仪表板获取令牌。
2. 将其粘贴到设置中的A4F令牌字段。
3. A4F为生成的图像提供每日免费配额。

令牌安全地存储在您的浏览器localStorage中，仅用于对相应推理端点的请求进行身份验证。

云存储（可选）

要将您的创作保存到云端：

1. 前往设置 > 存储。
2. 选择S3存储或WebDAV。
3. 输入您的凭据（例如，S3的Access Key/Secret Key，WebDAV的URL/用户名/密码）。
4. 使用“测试连接”按钮进行验证。
5. 配置完成后，将出现“图库”选项卡，您可以直接从创作或编辑视图上传图像。

❓ 常见问题解答

问：这项服务可以免费使用吗？
答：是的，本项目完全免费。默认使用公共 API 配额。由于高峰时段公共配额可能有限制，您可以在设置中配置自己的 Hugging Face Token，以获得更稳定的生成体验和更高的使用配额。Gitee AI 和 Model Scope 则需要您提供 Token 才能使用其免费配额。

问：我的数据和隐私安全吗？
答：当然安全。我们非常重视隐私保护。所有生成记录、设置和 Token 都会本地存储在您的浏览器中（LocalStorage）。我们没有后端数据库，也不会收集您的个人使用数据。请注意：生成的图片会保留 24 小时，请务必下载您喜欢的作品。提示词历史为临时保存，关闭页面后会自动清除。

问：多 Token 系统是如何工作的？
答：您可以输入多个 Token，用逗号分隔。系统会自动创建一个 Token 池。如果当前 Token 的每日配额用尽，系统会自动将其标记为当天已耗尽，并无缝切换到下一个可用 Token，确保您的创作不会中断。此机制适用于 Hugging Face、Gitee AI 和 Model Scope。

问：这款应用由哪些服务提供支持？
答：Hugging Face 的图像生成由 Hugging Face 提供，提示优化则由 Pollinations.ai 提供。Gitee AI 的图像生成和提示优化由 Gitee AI 提供。Model Scope 的图像生成和提示优化由 Model Scope 提供。

问：什么是 Live Motion？
答：Live 功能可以将静态图片转换成动态短视频。通过利用先进的图像转视频模型（如 Wan2.2），AI 会分析场景构图，生成自然流畅的运动效果和电影级的视觉效果，让您的作品栩栩如生。目前仅支持 Hugging Face 和 Gitee AI。

问：图像编辑器如何工作？
答：图像编辑器允许您使用 AI 对现有图片进行修改。您可以在透明图层上绘制（使用画笔或矩形工具）来指示需要修改的位置，然后输入 AI 指令。系统会将您的绘制内容与原图合并，并发送至 Qwen-Image-Edit 模型。您还可以上传最多 3 张参考图，以引导 AI 的艺术风格或内容。

问：我可以自己托管这个项目吗？
答：可以！这是一个基于 MIT 许可证的开源项目。您可以从 GitHub 上 Fork 该仓库，并部署到 Vercel、Cloudflare Pages 或任何静态托管服务上。

🔄 保持您的 Fork 最新

如果您已经 Fork 了该项目，可以通过 GitHub Actions 自动同步您的仓库与原始仓库。

1. 在您的 Fork 仓库中，创建一个名为 .github/workflows/sync.yml 的新文件。
2. 将以下内容粘贴到文件中：

name: Upstream Sync

permissions:
  contents: write

on:
  schedule:
    - cron: "0 0 * * *" # 每天 UTC 时间 00:00 运行
  workflow_dispatch: # 允许手动触发

jobs:
  sync_latest_from_upstream:
    name: 同步上游仓库的最新提交
    runs-on: ubuntu-latest
    if: ${{ github.event.repository.fork }}

    steps:
      # 步骤 1：执行标准的 checkout 操作
      - name: 检出目标仓库
        uses: actions/checkout@v3

      # 步骤 2：执行同步操作
      - name: 同步上游更改
        id: sync
        uses: aormsby/Fork-Sync-With-Upstream-action@v3.4
        with:
          upstream_sync_repo: Amery2010/peinture
          upstream_sync_branch: main
          target_sync_branch: main
          target_repo_token: ${{ secrets.GITHUB_TOKEN }} # 自动生成，无需设置

          # 设置 test_mode 为 true 可以运行测试而非实际操作！！
          test_mode: false

      - name: 同步检查
        if: failure()
        run: |
          echo "[错误] 由于上游仓库的工作流文件发生了变化，GitHub 已自动暂停计划中的自动更新。您需要手动同步您的 Fork。"
          exit 1

3. 提交更改。此后，您的 Fork 将每天检查更新并自动同步。

🤝 贡献

欢迎贡献！请随时提交 Pull Request。

1. Fork 该项目
2. 创建您的功能分支 (git checkout -b feature/AmazingFeature)
3. 提交您的更改 (git commit -m '添加一些 AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开 Pull Request

📄 许可证

根据 MIT 许可证发布。

Peinture 快速上手指南

Peinture 是一款基于 React、TypeScript 和 Tailwind CSS 构建的现代化 AI 图像生成工具。它支持切换 Hugging Face、Gitee AI（码云）、Model Scope（魔搭）等多个提供商，具备文生图、图片编辑、动态视频生成及云端同步等功能。

环境准备

在开始之前，请确保您的开发环境满足以下要求：

• 操作系统：Windows / macOS / Linux
• Node.js：版本 v18 或更高（推荐使用 LTS 版本）
• 包管理器：npm、yarn 或 pnpm（任选其一）

国内开发者提示：若安装依赖速度较慢，建议配置国内镜像源。

• npm: npm config set registry https://registry.npmmirror.com
• yarn: yarn config set registry https://registry.npmmirror.com

安装步骤

1. 克隆项目

将代码仓库克隆到本地并进入项目目录：

git clone https://github.com/Amery2010/peinture.git
cd peinture

2. 安装依赖

使用包管理器安装项目所需依赖：

npm install

(如需使用 yarn 或 pnpm，可分别运行 yarn 或 pnpm install)

3. 启动开发服务器

运行以下命令启动本地开发环境：

npm run dev

启动成功后，终端会显示访问地址（通常为 http://localhost:5173）。在浏览器中打开该地址即可使用。

基本使用

1. 配置 API Token

虽然应用默认使用公共配额，但为了获得更稳定的服务和更高的生成限额，建议在首次使用时配置 Token。

• 点击界面右上角的 设置 (Settings) 图标。
• 根据您选择的提供商填入对应的 Token：
  • Gitee AI：访问 Gitee AI Dashboard 获取（国内访问速度快，推荐）。
  • Model Scope：访问 Model Scope Dashboard 获取。
  • Hugging Face：访问 Hugging Face Settings 获取。
  • A4F：访问 A4F Dashboard 获取。
• Token 仅存储在您浏览器的本地存储中，不会上传至第三方服务器。

2. 生成图像

• 在主界面的输入框中输入描述词（Prompt），例如：“一只在太空漫步的猫，赛博朋克风格”。
• 点击 生成 按钮。
• 系统会自动调用配置的模型（如 FLUX.1, Qwen Image 等）并在数秒内返回高清图片。
• 提示优化：如果不确定如何描述，可使用内置的 "AI Prompt Enhancer" 功能，自动将简单想法扩展为详细的英文提示词。

3. 图片编辑与动态化

• 编辑模式：上传图片后，使用画笔或矩形工具标记需要修改的区域，输入指令即可利用 Qwen-Image-Edit 模型进行局部重绘。
• 动态视频 (Live Motion)：选中生成的静态图片，启用 Wan 2.2 模型功能，可将图片转换为 5 秒的动态 cinematic 视频（需 Hugging Face 或 Gitee AI 支持）。

4. 保存与同步

• 本地保存：生成的图片默认保存在浏览器的高性能本地存储 (OPFS) 中，关闭页面不会丢失。
• 云端同步：在设置中配置 S3 (兼容 AWS/R2/MinIO) 或 WebDAV 凭证后，可一键将作品同步至云端，实现多设备访问。