Nunchaku-flux-1-dev项目实战：从零搭建个人AI绘画网站

Nunchaku-flux-1-dev项目实战从零搭建个人AI绘画网站想拥有一个属于自己的AI绘画网站吗看着别人分享的酷炫AI画作是不是也想打造一个能随时生成、展示和分享个人作品的平台今天我们就来手把手实现这个想法。这个项目将带你从零开始搭建一个功能完整的个人AI绘画网站。我们会用Nunchaku-flux-1-dev这个强大的AI绘画模型作为核心引擎前端用流行的Vue或React来构建用户界面后端则用轻快的FastAPI来搭桥最终实现用户管理、在线生成、作品画廊等一整套功能。整个过程就像搭积木一步步来你会发现并没有想象中那么复杂。1. 项目蓝图与核心思路在动手写代码之前我们先来画个蓝图搞清楚这个网站要做什么以及我们打算怎么做。1.1 我们要做一个什么样的网站简单来说这个网站就是一个你的私人AI画室。用户主要是你自己和朋友可以在这里注册登录拥有自己的账号。生成画作输入一段文字描述选择风格点击生成等待AI创作。查看作品在一个公共画廊里浏览所有用户生成的精彩画作。管理作品在自己的个人空间里查看、下载或删除自己生成的作品。积分消费通过充值获得积分每次生成画作会消耗一定积分模拟一个简单的商业模式。1.2 技术栈选型为什么是它们AI引擎Nunchaku-flux-1-dev这是一个基于Flux架构的文本到图像生成模型。我们选择它是因为它在图像质量和生成速度上有一个不错的平衡而且社区活跃相对容易部署和集成。前端Vue 3 TypeScript ViteVue的学习曲线平缓生态丰富非常适合快速构建交互性强的单页面应用。用TypeScript能让我们的代码更健壮Vite则提供极快的开发体验。后端FastAPI SQLAlchemyFastAPI性能出色自动生成交互式API文档用起来非常爽。SQLAlchemy是Python里老牌的ORM能让我们用Python对象的方式来操作数据库。数据库PostgreSQL可靠、功能强大的开源关系型数据库适合存储用户、作品等结构化数据。其他工具JWT用于处理用户登录认证。Celery RedisAI生成图片可能比较耗时我们用Celery来做异步任务队列把生成任务丢到后台处理Redis作为消息代理和结果缓存。Docker用于容器化部署Nunchaku-flux-1-dev模型服务保证环境一致。整个系统的数据流大概是这样的用户在网页前端输入描述并提交 - 前端调用后端API - 后端将任务放入Celery队列 - 独立的AI模型服务运行在Docker中从队列取出任务并生成图片 - 生成完成后图片上传到存储如本地目录或云存储结果存回数据库 - 后端通知前端任务完成 - 前端更新界面展示新作品。2. 搭建开发环境与项目初始化工欲善其事必先利其器。我们先来把开发环境准备好。2.1 基础环境准备确保你的电脑上已经安装了Python 3.9Node.js 18和 npmDocker和 Docker ComposePostgreSQL也可以用Docker运行2.2 创建项目骨架我们创建一个总项目目录里面包含前端和后端两个子项目。mkdir my-ai-art-website cd my-ai-art-website mkdir backend frontend2.3 后端项目初始化进入后端目录创建虚拟环境并安装核心依赖。cd backend python -m venv venv # Windows: venv\Scripts\activate # Mac/Linux: source venv/bin/activate pip install fastapi uvicorn sqlalchemy psycopg2-binary pydantic python-jose[cryptography] passlib[bcrypt] celery redis python-multipart pillow创建一个requirements.txt文件记录依赖然后建立基本的项目结构backend/ ├── app/ │ ├── __init__.py │ ├── main.py # FastAPI应用入口 │ ├── core/ # 核心配置 │ ├── models/ # SQLAlchemy数据模型 │ ├── schemas/ # Pydantic数据验证模型 │ ├── api/ # 路由端点 │ ├── crud/ # 数据库增删改查操作 │ ├── worker.py # Celery worker入口 │ └── tasks.py # 异步任务定义如图像生成 ├── alembic/ # 数据库迁移可选 ├── static/ # 静态文件如生成的图片 ├── .env # 环境变量 └── requirements.txt2.4 前端项目初始化我们使用Vue 3和TypeScript来快速搭建。cd ../frontend npm create vuelatest . # 在创建过程中选择添加 TypeScript, Router, Pinia, ESLint 等。安装一些额外的UI库和工具比如我们使用Element Plus作为UI组件库Axios用于HTTP请求。npm install element-plus element-plus/icons-vue axios npm install sass --save-dev3. 核心后端服务搭建后端是连接前端和AI引擎的大脑我们先把它搭起来。3.1 数据库模型设计在app/models.py中我们定义两个核心的数据表用户和作品。from sqlalchemy import Column, Integer, String, Text, DateTime, ForeignKey, Boolean from sqlalchemy.orm import relationship from sqlalchemy.sql import func from app.core.database import Base # 假设Base在database.py中定义 class User(Base): __tablename__ users id Column(Integer, primary_keyTrue, indexTrue) username Column(String(50), uniqueTrue, indexTrue, nullableFalse) email Column(String(100), uniqueTrue, indexTrue, nullableFalse) hashed_password Column(String(200), nullableFalse) credits Column(Integer, default100) # 初始赠送100积分 is_active Column(Boolean, defaultTrue) created_at Column(DateTime(timezoneTrue), server_defaultfunc.now()) images relationship(GeneratedImage, back_populatesowner) class GeneratedImage(Base): __tablename__ generated_images id Column(Integer, primary_keyTrue, indexTrue) prompt Column(Text, nullableFalse) # 用户输入的描述 negative_prompt Column(Text, default) # 负面描述不希望出现的 style Column(String(50), defaultrealistic) # 风格如 realistic, anime image_url Column(String(500)) # 图片存储后的访问路径 status Column(String(20), defaultpending) # pending, processing, completed, failed owner_id Column(Integer, ForeignKey(users.id)) created_at Column(DateTime(timezoneTrue), server_defaultfunc.now()) owner relationship(User, back_populatesimages)3.2 用户认证与API端点使用FastAPI的依赖注入系统来处理JWT认证。在app/api/auth.py中实现登录、注册等端点。from fastapi import APIRouter, Depends, HTTPException, status from fastapi.security import OAuth2PasswordBearer, OAuth2PasswordRequestForm from sqlalchemy.orm import Session from app.core import security, dependencies from app import crud, schemas router APIRouter(prefix/auth, tags[authentication]) router.post(/register, response_modelschemas.User) def register(user_in: schemas.UserCreate, db: Session Depends(dependencies.get_db)): # 检查用户名和邮箱是否已存在 user crud.user.get_by_username(db, usernameuser_in.username) if user: raise HTTPException(status_code400, detail用户名已存在) user crud.user.get_by_email(db, emailuser_in.email) if user: raise HTTPException(status_code400, detail邮箱已注册) # 创建新用户 return crud.user.create(db, obj_inuser_in) router.post(/login) def login(form_data: OAuth2PasswordRequestForm Depends(), db: Session Depends(dependencies.get_db)): user crud.user.authenticate(db, usernameform_data.username, passwordform_data.password) if not user: raise HTTPException(status_code400, detail用户名或密码错误) access_token security.create_access_token(data{sub: user.username}) return {access_token: access_token, token_type: bearer}在app/api/images.py中实现与图像生成相关的端点。from fastapi import APIRouter, Depends, HTTPException, BackgroundTasks from app import schemas, crud, tasks from app.core.dependencies import get_current_active_user from app.models import User router APIRouter(prefix/images, tags[images]) router.post(/generate, response_modelschemas.TaskResponse) async def generate_image( task_in: schemas.ImageGenerateTask, background_tasks: BackgroundTasks, current_user: User Depends(get_current_active_user), db: Session Depends(dependencies.get_db) ): # 1. 检查用户积分是否足够 if current_user.credits 10: # 假设生成一张图消耗10积分 raise HTTPException(status_code400, detail积分不足) # 2. 扣减积分这里可以先预扣任务失败再返还 # 3. 在数据库中创建一条初始记录 db_image crud.image.create_with_owner(db, obj_intask_in, owner_idcurrent_user.id) # 4. 将生成任务放入Celery后台队列 background_tasks.add_task(tasks.process_image_generation, db_image.id) return {task_id: db_image.id, status: submitted, message: 图像生成任务已提交请稍后查看结果}3.3 集成AI模型服务Celery异步任务这是连接我们后端和Nunchaku-flux-1-dev模型的关键。我们使用Celery来处理耗时的生成任务。首先在app/tasks.py中定义任务。这里假设AI模型服务已经通过HTTP API或gRPC暴露了接口。from celery import Celery from app.core.config import settings from app.core.database import SessionLocal from app import crud import requests import json # 创建Celery应用 celery_app Celery( worker, brokersettings.CELERY_BROKER_URL, backendsettings.CELERY_RESULT_BACKEND ) celery_app.task(bindTrue, nameprocess_image_generation) def process_image_generation(self, image_id: int): 处理图像生成的Celery任务 db SessionLocal() try: # 1. 从数据库获取任务信息 db_image crud.image.get(db, idimage_id) if not db_image: return {status: failed, error: Image not found} # 2. 更新状态为处理中 db_image.status processing db.commit() # 3. 调用Nunchaku-flux-1-dev的API # 假设模型服务运行在 http://ai-model-service:8000 并提供了 /generate 接口 payload { prompt: db_image.prompt, negative_prompt: db_image.negative_prompt, style: db_image.style, num_inference_steps: 30, guidance_scale: 7.5, } response requests.post( http://ai-model-service:8000/generate, jsonpayload, timeout300 # 设置较长的超时时间 ) response.raise_for_status() result response.json() # 4. 假设API返回图片的base64数据或URL # 这里我们需要将图片保存到文件系统或对象存储并生成一个可访问的URL image_data result[image] # base64字符串 image_filename f{image_id}.png image_path f/app/static/generated/{image_filename} # ... 保存base64数据到 image_path ... # 5. 更新数据库记录 db_image.image_url f/static/generated/{image_filename} db_image.status completed db.commit() # 6. 可以在这里触发WebSocket或SSE通知前端任务完成 return {status: completed, image_url: db_image.image_url} except requests.exceptions.RequestException as e: db_image.status failed db.commit() return {status: failed, error: str(e)} except Exception as e: db_image.status failed db.commit() return {status: failed, error: str(e)} finally: db.close()4. 前端界面开发前端负责把一切呈现给用户提供一个友好易用的操作界面。4.1 页面路由与布局我们规划几个主要页面/或/gallery公共画廊展示所有用户的作品。/generateAI绘画生成器核心操作页面。/my-works个人作品集。/profile个人资料与积分管理。/login,/register登录注册页。在src/views/目录下创建对应的Vue组件。使用Vue Router进行路由管理。4.2 核心组件图像生成器在GenerateView.vue中我们构建一个表单让用户输入描述、选择风格并提交生成任务。template div classgenerate-container h2AI绘画生成器/h2 el-form :modelform :rulesrules refformRef label-width80px el-form-item label画面描述 propprompt el-input typetextarea v-modelform.prompt :rows4 placeholder详细描述你想要的画面例如一只戴着礼帽的橘猫在咖啡馆里看书阳光透过窗户蒸汽朋克风格细节丰富 /el-input /el-form-item el-form-item label排除内容 propnegativePrompt el-input v-modelform.negativePrompt placeholder描述你不希望出现在画面中的东西可选 /el-input /el-form-item el-form-item label绘画风格 propstyle el-select v-modelform.style placeholder请选择风格 el-option label写实 valuerealistic/el-option el-option label动漫 valueanime/el-option el-option label油画 valueoil_painting/el-option el-option label水彩 valuewatercolor/el-option el-option label赛博朋克 valuecyberpunk/el-option /el-select /el-form-item el-form-item el-button typeprimary clicksubmitGenerate :loadingloading 开始生成消耗10积分 /el-button span classcredit-info当前积分{{ userCredits }}/span /el-form-item /el-form !-- 任务状态显示区域 -- div v-ifcurrentTask classtask-status h3生成任务状态/h3 p任务ID: {{ currentTask.task_id }}/p p状态: el-tag :typestatusTagType{{ currentTask.status }}/el-tag/p div v-ifcurrentTask.status completed currentTask.image_url h4生成结果/h4 el-image :srccurrentTask.image_url fitcontain stylemax-height: 400px;/el-image el-button clickdownloadImage(currentTask.image_url)下载图片/el-button /div /div /div /template script setup langts import { ref, reactive, computed, onUnmounted } from vue import { ElMessage } from element-plus import { generateImage, pollTaskStatus } from /api/image import { useUserStore } from /stores/user const formRef ref() const loading ref(false) const currentTask refany(null) let pollInterval: number | null null const form reactive({ prompt: , negativePrompt: , style: realistic }) const userStore useUserStore() const userCredits computed(() userStore.credits) const submitGenerate async () { // 表单验证、提交API、轮询任务状态... } const startPolling (taskId: string) { // 开始轮询任务状态 } const downloadImage (url: string) { // 触发图片下载 } onUnmounted(() { if (pollInterval) clearInterval(pollInterval) }) /script4.3 状态管理与API通信使用Pinia来管理全局状态比如用户信息。在src/stores/user.ts中import { defineStore } from pinia import { ref } from vue import { login, getProfile } from /api/auth export const useUserStore defineStore(user, () { const token ref(localStorage.getItem(token) || ) const username ref() const credits ref(0) const setUserInfo (userData: any) { username.value userData.username credits.value userData.credits } const userLogin async (loginForm: any) { const res await login(loginForm) token.value res.access_token localStorage.setItem(token, res.access_token) // 获取并更新用户详情 const profile await getProfile() setUserInfo(profile) return profile } const userLogout () { token.value username.value credits.value 0 localStorage.removeItem(token) } return { token, username, credits, setUserInfo, userLogin, userLogout } })在src/api/image.ts中封装与图像相关的API调用import request from /utils/request export function generateImage(data: any) { return request({ url: /api/images/generate, method: post, data }) } export function getTaskStatus(taskId: string) { return request({ url: /api/images/tasks/${taskId}, method: get }) }5. 部署与运行让网站活起来所有代码写完后我们需要把各个部分组装起来并运行。5.1 使用Docker Compose编排服务创建一个docker-compose.yml文件在项目根目录来定义和运行所有服务数据库、Redis、AI模型服务、Celery Worker、后端API和前端。version: 3.8 services: postgres: image: postgres:15 environment: POSTGRES_USER: aiart POSTGRES_PASSWORD: your_secure_password POSTGRES_DB: aiart_db volumes: - postgres_data:/var/lib/postgresql/data ports: - 5432:5432 redis: image: redis:7-alpine ports: - 6379:6379 ai-model-service: # 这里需要你构建或拉取包含Nunchaku-flux-1-dev的镜像 # 例如: your-username/nunchaku-flux-service:latest build: ./ai-model-service # 假设你有一个Dockerfile在这里 ports: - 8001:8000 deploy: resources: reservations: devices: - driver: nvidia count: 1 capabilities: [gpu] # 如果模型需要GPU加速 backend: build: ./backend ports: - 8000:8000 depends_on: - postgres - redis - ai-model-service environment: - DATABASE_URLpostgresql://aiart:your_secure_passwordpostgres/aiart_db - REDIS_URLredis://redis:6379/0 - AI_MODEL_SERVICE_URLhttp://ai-model-service:8000 volumes: - ./backend/static:/app/static # 挂载静态文件目录 celery-worker: build: ./backend command: celery -A app.worker.celery_app worker --loglevelinfo depends_on: - redis - backend - ai-model-service environment: ... # 同backend frontend: build: ./frontend ports: - 8080:80 # 假设构建后是nginx服务静态文件 depends_on: - backend5.2 启动与测试在backend目录下运行数据库迁移如果你用了Alembic来创建表。在项目根目录运行docker-compose up -d。访问http://localhost:8080查看前端页面。访问http://localhost:8000/docs查看并测试后端API文档。现在你的个人AI绘画网站就基本跑起来了你可以注册账号尝试输入描述生成第一幅AI画作并在画廊里看到它。6. 总结与展望走完这一趟一个功能完整的个人AI绘画网站就从构想变成了现实。从设计数据库表到编写后端API和异步任务再到构建交互式的前端界面最后用Docker把所有服务整合在一起每一步都是在解决具体的问题。这个项目麻雀虽小五脏俱全。它涵盖了现代Web开发的几个关键环节用户系统、异步任务处理、第三方服务集成AI模型、前后端分离架构。你完全可以以此为基础添加更多有趣的功能比如社交功能让用户可以给作品点赞、评论、收藏。高级生成参数让高级用户调整采样器、步数、种子等。图片后期处理集成简单的图片裁剪、滤镜功能。多种AI模型除了Flux还可以接入Stable Diffusion、DALL-E等模型让用户选择。更完善的支付集成真实的支付渠道进行积分充值。开发过程中最关键的体会是“解耦”。把AI生成这个耗时操作丢给Celery保证了Web服务的响应速度用Docker容器化模型服务避免了环境依赖的噩梦。遇到问题很正常多查文档多看日志一步步调试每个坑踩过去都是经验。希望这个实战项目能给你带来启发和帮助。动手去改去加功能去部署到自己的服务器上这才是学习最快的方式。祝你玩得开心创造出更多有趣的作品获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。