自己搭一个“AI生图”的项目，调用 Hugging Face 模型就能出图

摘要：TripleAI是一款基于React、TypeScript和TailwindCSS构建的深色主题AI图像生成器，支持HuggingFace、GiteeAI和ModelScope三大平台。主要功能包括多模型切换、图像编辑、动态视频转换、云存储、提示优化和多语言支持。采用隐私优先设计，所有数据存储在本地。技术栈包含Vite构建工具和S3/WebDAV协议，支持Vercel等主流部署方式。用户可配

flex8888

597人浏览 · 2026-01-08 17:26:34

flex8888 · 2026-01-08 17:26:34 发布

一个使用 React、TypeScript 和 Tailwind CSS 构建的时尚、深色主题的 AI 图像生成器。该应用程序利用 Hugging Face、Gitee AI 和 Model Scope 的强大生成模型，可在几秒钟内从文本提示创建高质量的图像。

✨ 软件获取使用✨

【点击进入项目页面】

项目介绍

✨ 功能

Triple AI 提供者：无缝切换 Hugging Face，Gitee AI，和 Model Scope 提供者以访问不同的模型生态系统和配额。
多模型支持：访问各种模型，包括：
- 拥抱面: Z-Image Turbo， Qwen Image Fast， Ovis Image， FLUX.1 Schnell
- Gitee 人工智能: Z-Image Turbo， Qwen Image， FLUX.1 Schnell， FLUX.1 Krea， FLUX.1 Dev
- 模型范围: Z-Image Turbo， FLUX.2， FLUX.1 Krea， FLUX.1
图像编辑器：精准修改现有图像。使用画笔和矩形工具引导AI编辑，并上传最多3张引用图像以进行风格或内容指导（由Qwen-Image-Edit提供支持）。
动态运动：使用先进的图像到视频模型（Wan2.2）将静态图像转换为动态短视频。体验电影般的运动效果，让您的艺术作品栩栩如生（支持在Hugging Face & Gitee AI上使用）。
云存储和画廊：配置S3兼容的存储（AWS, R2, MinIO）或WebDAV，以在云端私密地保存您的创作。直接从内置画廊浏览、管理和下载您的云资产。
提示优化：集成的AI提示增强器，将简单的想法扩展为详细的、电影般的描述（由Pollinations.ai为Hugging Face，DeepSeek为Gitee AI和Model Scope提供支持）。
自动翻译：智能检测和翻译非英文提示，以优化针对以英语为中心的模型（如FLUX）的性能。
高级控制：通过可调节的推理步骤、种子控制、引导比例（用于Flux）和高清模式（高清晰度）微调您的创作。
历史画廊：自动将生成的图像保存到本地。查看、缩放、平移和管理您的创作历史。
4倍分辨率：AI升级技术可将图像分辨率提高到4倍（仅在Hugging Face上支持）。
多语言：完全支持英语和中文（中文）界面。
令牌管理：配置个人 API 令牌以获得更高的速率限制和稳定性。
隐私优先：历史记录存储在您的浏览器的LocalStorage中；云凭证也存储在本地，从不发送到我们的服务器（除非用于与您的存储提供商进行身份验证）。

🛠 技术栈

框架：React 19
构建工具：Vite
样式： Tailwind CSS
图标: Lucide React
动画: CSS过渡和Tailwind
应用程序编程接口:
- 拥抱面推理API
- Gitee AI API
- 模型范围 API
- Pollinations.ai
- S3 / WebDAV 协议

🚀 开始使用

先决条件

Node.js (版本18或更高)
npm 或 yarn 或 pnpm

安装

克隆仓库：

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

安装依赖项：
```
npm install
```
启动开发服务器：
```
npm run dev
```
打开你的浏览器在http://localhost:5173。

📦 部署

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

选项 1: Vercel (推荐)

Vercel 优化了前端框架，并且不需要任何配置。

安装 Vercel CLI:
```
npm i -g vercel
```
在项目根目录下运行部署命令：
```
vercel
```
按照提示操作。Vercel将自动检测Vite并设置构建命令为npm run build和输出目录为dist。

或者，通过 Vercel 仪表盘：

将你的代码推送到GitHub。
在 Vercel 中导入仓库。
保持默认的"框架预设"为Vite。
点击部署。

选项2：Cloudflare Pages

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

将你的代码推送到 GitHub 仓库。
登录 Cloudflare 仪表板，然后前往 计算（Workers & Pages） > 创建应用程序 > GitHub Pages > 连接到 Git。
选择你的仓库。
在“构建设置”中：
- 框架预设：Vite
- 构建命令：npm run build
- 生成输出目录：dist
点击 保存和部署。

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

托管在任何标准的网页服务器或CDN上：

在本地构建项目：
```
npm run build
```
这将生成一个dist包含index.html和捆绑资产的文件夹。
将文件夹的内容上传到你服务器的公共根目录（例如，或一个S3桶）。dist/var/www/html
对SPAs重要：确保您的服务器配置为将所有404请求重定向到index.html，以便由React Router（如果将来添加）或客户端逻辑处理路由。

⚙️ 配置

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

拥抱面令牌（可选）

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

获取一个令牌从Hugging Face 设置。
将其粘贴到Hugging Face 令牌字段中。

Gitee AI 代币（Gitee 所需）

要使用 Gitee AI 提供者，您必须提供一个 API 令牌。

获取一个令牌来自 Gitee AI 仪表盘。
将其粘贴到Gitee AI Token设置中的字段中。
Gitee AI为生成图像提供每日免费配额。

模型范围令牌（模型范围所需）

要使用Model Scope提供程序，您必须提供一个API令牌。

从Model Scope 仪表盘获取令牌。
将其粘贴到设置中的Model Scope Token字段。

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

云存储（可选）

将您的创作保存到云端：

前往 设置 > 存储。
选择 S3 存储 或 WebDAV。
输入您的凭证（例如，S3的访问密钥/秘密密钥，WebDAV的URL/用户/密码）。
使用“测试连接”按钮进行验证。
一旦配置好后，将会出现一个“画廊”标签，您可以直接从创作或编辑视图上传图片。

❓ 常见问题

问：此服务是否免费使用？

答：这个项目是完全免费的。默认使用公共 API 配额。由于在高峰时段公共配额可能会有潜在限制，您可以在设置中配置自己的 Hugging Face 令牌，以获得更稳定的生成体验和更高的使用配额。Gitee AI 和 Model Scope 要求您提供令牌以使用其免费配额。

问：我的数据和隐私安全吗？

答：所有生成历史、设置和tokens都存储在您的浏览器本地（LocalStorage）。我们没有后端数据库，也不收集您的个人使用数据。请注意：生成的图像会在24小时之前保留，所以请确保下载您喜欢的图像。Prompt历史是临时的，当您关闭页面时会清除。

问：多代币系统如何运作？

答：您可以输入多个用逗号分隔的代币。系统会自动创建一个池。如果当前的代币用完了每日配额，系统会自动标记为今日已用完，并无缝切换到下一个可用的代币，确保您的创建不会中断。此机制适用于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的艺术风格或内容。

🔄 保持你的叉子更新

如果你已经 forked这个项目，你可以使用GitHub Actions自动将你的仓库与原始仓库同步。

.github/workflows/sync.yml在你的分支仓库中，在。创建一个新的文件。
将以下内容粘贴到文件中：

name: Upstream Sync

permissions:
  contents: write

on:
  schedule:
    - cron: "0 0 * * *" # Run every day at 00:00 UTC
  workflow_dispatch: # Allow manual triggering

jobs:
  sync_latest_from_upstream:
    name: Sync latest commits from upstream repo
    runs-on: ubuntu-latest
    if: ${{ github.event.repository.fork }}

    steps:
      # Step 1: run a standard checkout action
      - name: Checkout target repo
        uses: actions/checkout@v3

      # Step 2: run the sync action
      - name: Sync upstream changes
        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 }} # Automatically generated, no need to set

          # Set test_mode true to run tests instead of the true action!!
          test_mode: false

      - name: Sync check
        if: failure()
        run: |
          echo "[Error] Due to a change in the workflow file of the upstream repository, GitHub has automatically suspended the scheduled automatic update. You need to manually sync your fork."
          exit 1