使用完全免费的模型创建AI绘画网站

介绍

目前已有太多太多AI绘画的免费模型，而站点服务也有很多，下面以三个开源的项目为例来创建自己的免费AI绘画网站

一、Painter Leaf

项目地址：https://github.com/LeafYeeXYZ/PainterLeaf

演示：https://painter.leafyee.xyz/

基于免费和 API 的映像创建器。支持文生图， 图生文， 多模型， 中英双语提示词，功能包括：Cloudflare AI``HuggingFace

  • Prompt-to-image：支持多种模型（例如 、Flux.1``StableDiffusion 3.5)
  • Image-to-Prompt：将本地图片转换为提示
  • AI 翻译：在任何模型中使用中文提示
  • 商店：将您的作品保存到IndexedDB

1733220889567

1 部署

1.1 配置环境变量

您可以使用 or 模式。Fullstack``Client-Server

1.1.1 全栈式

在 file 或 中设置以下环境变量。.env``Vercel

钥匙 价值 必填
CF_USER_ID Cloudflare用户 ID ✅
CF_AI_API_KEY Cloudflare AIAPI 密钥 ✅
HF_API_KEY HuggingFaceAPI 密钥

免费计划的每个请求限制为 10 秒，这可能会导致错误（尤其是在使用模型时）。您可以订阅付费计划、在本地运行服务器或使用模式。Vercel``504``HuggingFace``Vercel``Client-Server

1.1.2 客户端-服务器

将服务器部署到 （请参阅此项目） 并在 file 或 中设置以下环境变量。Cloudflare Workers``.env``Vercel

钥匙 价值 必填
NEXT_PUBLIC_WORKERS_SERVER ServerURL（例如https://api.xxx.workers.dev) ✅

设置完成后，所有其他环境变量都将被忽略。NEXT_PUBLIC_WORKERS_SERVER

1.2 部署到 Vercel

将此项目部署到 （记得设置环境变量）。Vercel

1.3 常见问题

  • 429错误：您可能已超出 api 请求限制。请稍等片刻，减少请求频率，并考虑订阅付费计划。HuggingFace
  • 504error：请求已超过时间限制。有关解决方法，请参见上文。Vercel

2 开发

2.1 克隆仓库

1
2
git clone https://github.com/LeafYeeXYZ/PainterLeaf.git
cd PainterLeaf

2.2 安装依赖

1
bun install # or use other package manager you like

2.3 本地发展

1
bun run dev

2.4 构建

1
bun run build

二、Node.js 的 AI 图像生成 Web 应用

一个基于 Node.js 的 AI 图像生成 Web 应用，使用 Silicon Flow API 生成高质量图像。该应用提供了直观的用户界面，支持多种 AI 模型和丰富的图像生成参数控制

项目地址：https://github.com/D6397/drawing

主界面

功能特点

  • 支持多种 AI 模型选择
    • FLUX.1-schnell (Pro)
    • FLUX.1-schnell (Black Forest)
    • FLUX.1-dev (Black Forest)
    • Stable Diffusion 3.5 系列
    • 其他 Stable Diffusion 模型
  • 灵活的图像尺寸选项
    • 支持 1:1, 1:2, 3:2, 3:4, 16:9, 9:16 等多种比例
    • 最高支持 1024x1024 分辨率
  • 丰富的生成参数控制
    • 批量生成数量（1-4张）
    • 随机种子控制
    • 推理步数调节（1-50步）
    • 引导系数调整（1-20）
  • 高级功能
    • 支持反向提示词
    • 提示词增强功能
    • 快捷标签选择
  • 用户友好的界面
    • 响应式设计，支持移动端
    • 深色模式支持
    • 实时预览
    • 加载动画效果

安装说明

  1. 克隆项目
1
2
git clone https://github.com/D6397/drawing.git
cd ai-image-generator
  1. 安装依赖
1
npm install express cors node-fetch dotenv
  1. 配置环境变量
    • 在项目根目录创建 .env 文件
    • 在 Silicon Flow Cloud 获取 API Token
    • 很多免费绘图模型 保护sd 3.5 flux1 都免费
    • 添加以下配置：
1
API_TOKEN=你的_SILICON_FLOW_API_TOKEN  # 从 Silicon Flow Cloud 获取
  1. 启动服务器
1
node server.js
  1. 访问应用
    • 打开浏览器访问 http://localhost:3000
    • 默认端口为 3000，如需修改可在 server.js 中更改

快速使用

  1. 启动后，在浏览器中打开应用
  2. 从左侧面板选择 AI 模型
  3. 设置所需的图像尺寸和生成参数
  4. 在底部输入框中描述你想创建的图像
  5. 点击”生成图像”按钮
  6. 等待图像生成完成

三、 Next.js AI 图像生成器

使用 NextJS。稳定的扩散模型⚡✨ 免费且不限的图片！

项目地址：https://github.com/Xeven777/ai-img-nextsite

演示：https://img-gen7.netlify.app

项目支持Vercel 上部署

1733221242070

本地开发

首先，运行开发服务器：

1
2
3
4
5
6
7
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

使用浏览器打开 http://localhost:3000 以查看结果。

您可以通过修改 来开始编辑页面。页面会在您编辑文件时自动更新。app/page.tsx

此项目使用 next/font 自动优化和加载自定义 Google 字体 Inter