Skip to content

codeitTeam5/SMB_GenMarketingContents

BranchesTags

Repository files navigation

AdGen — AI 광고 이미지 자동 생성 시스템

제품 사진 한 장과 텍스트 입력만으로 상업용 광고 이미지를 자동 생성하는 End-to-End AI 파이프라인입니다.
배경 제거 → AI 배경 생성 → 고해상도 변환 → 색보정 → 텍스트/도형 합성까지, 5단계 파이프라인이 하나의 API 호출로 실행됩니다.

시스템 아키텍처

사용자 → Next.js (편집기 UI) → FastAPI (요청 검증·라우팅) → Director (오케스트레이션) → 5-Stage Pipeline → 결과 이미지

flowchart LR
    subgraph Frontend
        UI["Next.js 14 + Konva Canvas"]
    end
    subgraph API["API Server"]
        FA["FastAPI + Pydantic v2"]
    end
    subgraph Core["AI Pipeline"]
        D["Director"] --> SEG["1. Segmenter<br>(BiRefNet)"]
        SEG --> FLUX["2. FluxEngine<br>(FLUX.1-Fill NF4)"]
        FLUX --> UP["3. Upscaler<br>(Real-ESRGAN)"]
        UP --> CM["4. ColorMaster"]
        CM --> AD["5. AdDesigner<br>(Text/Shape)"]
    end
    UI --> FA --> D
Loading

계층 구조

계층 역할 주요 기술
Frontend 입력 수집, 캔버스 편집, 실시간 프리뷰 Next.js 14, React 18, Konva.js, Zustand
API Server 요청 검증, 라우팅, 정적 리소스 제공 FastAPI, Pydantic v2, Uvicorn
Orchestrator 파이프라인 생명주기 관리, LLM 기획 Director, CreativeDirector, StateManager
AI Engine 이미지 생성·변환·합성 실행 FLUX.1-Fill-dev, Real-ESRGAN, BiRefNet
Infra GPU 메모리 관리, 비동기 작업 큐 VRAMHandler, Redis, Celery

핵심 기능

5단계 이미지 생성 파이프라인

단계 엔진 설명
1 Segmenter (BiRefNet/ISNet) 제품 배경 제거 + BBox 기하학 분석
2 FluxEngine (FLUX.1-Fill-dev NF4) AI 배경 생성 및 제품 합성
3 Upscaler (Real-ESRGAN x4) 고해상도 변환 (선택)
4 ColorMaster 밝기·대비·채도·선명도·색온도 보정
5 AdDesigner 텍스트·도형 레이어 렌더링 및 최종 합성

2단계 LLM 기획 시스템

AI가 단순히 이미지를 생성하는 것이 아니라, 기획(Plan) → 설계(Design) 2단계로 나눠 작업합니다.

  1. Planner LLM — 전체 톤앤매너, 색상, 폰트, 페이지 구성 등 전략 수립
  2. Designer LLM — 페이지별 배경 프롬프트, 제품 배치, 텍스트 레이어 상세 설계

OpenAI를 Primary로, Gemini를 Failover로 사용하는 이중화 구조입니다.

물리 기반 안전 장치

장치 설명
Safe Margin 상하좌우 5% 안전 영역 — 제품이 캔버스 경계에 잘리지 않도록 보정
Scale Guard 너비 80% / 높이 65% 상한 — 제품이 비정상적으로 확대되는 것을 방지
Layout Safety Cap 최종 좌표 0.0~1.0 범위 클램핑 — LLM 환각 값 차단

기술 스택

Backend

  • Python 3.10+, FastAPI, Pydantic v2, Uvicorn
  • PyTorch (CUDA, bfloat16)
  • Diffusers — FLUX.1-Fill-dev (NF4 양자화)
  • Real-ESRGAN — 4x 업스케일
  • Pillow — 이미지 처리 및 합성
  • Redis + Celery — 비동기 작업 큐

Frontend

  • Next.js 14, React 18, TypeScript
  • Konva.js + react-konva — 캔버스 기반 인터랙티브 편집
  • Zustand — 전역 상태 관리

AI / ML

  • FLUX.1-Fill-dev — Inpainting 기반 배경 생성 (NF4 양자화, 23GB GPU)
  • BiRefNet / ISNet — 제품 세그멘테이션 (누끼)
  • Real-ESRGAN x4 — 초해상도 업스케일
  • OpenAI GPT + Google Gemini — 2단계 LLM 기획 (Failover 이중화)

Infra

  • NVIDIA L4 24GB — 단일 GPU 환경
  • systemd — 서비스 관리
  • Redis — 캐싱 및 태스크 큐

프로젝트 구조

project/
├── app/
│   ├── api_server/              # FastAPI 서버
│   │   ├── main.py              # 앱 부트스트랩 및 Lifespan
│   │   ├── routers/             # API 엔드포인트
│   │   │   ├── project.py       # 프로젝트 CRUD + 생성 실행
│   │   │   ├── editor.py        # 실시간 레이어 편집
│   │   │   ├── presets.py       # 프리셋 조회
│   │   │   └── users.py         # 사용자 인증
│   │   └── schemas.py           # API I/O 스키마
│   ├── frontend/                # Next.js 14 클라이언트
│   │   └── src/app/
│   │       ├── page.tsx         # 로그인
│   │       ├── create/          # 생성 설정
│   │       └── editor/          # 캔버스 편집기
│   └── worker/                  # Celery 비동기 워커
├── core/
│   ├── orchestrator/
│   │   └── director.py          # 파이프라인 총괄 오케스트레이터
│   ├── generators/
│   │   ├── creative_dir.py      # 2단계 LLM 기획 (Planner + Designer)
│   │   └── detail_page_gen.py   # 5단계 제작 파이프라인 실행
│   ├── engines/
│   │   ├── vision/segmenter.py  # 배경 제거 (BiRefNet/ISNet)
│   │   ├── generation/
│   │   │   ├── flux_runner.py   # FLUX.1-Fill 배경 생성
│   │   │   └── ad_designer.py   # 텍스트/도형 렌더링
│   │   └── composition/
│   │       └── color_master.py  # 색보정 후처리
│   ├── resource_manager/
│   │   └── vram_handler.py      # GPU 메모리 관리 (싱글턴)
│   ├── schemas/                 # 내부 데이터 모델 (Manifest, UserRequest)
│   └── state_manager.py         # 파일 기반 프로젝트 상태 관리
├── config/
│   └── settings.py              # 전역 설정 (Pydantic BaseSettings)
├── data/
│   ├── static/                  # 폰트, 도형, 프리셋 JSON
│   └── outputs/                 # 사용자별 프로젝트 산출물
│       └── <user_id>/<project_id>/
│           ├── assets/          # 원본 이미지, 누끼
│           ├── renders/         # 중간 산출물
│           └── output/          # 최종 결과물
└── weights/                     # 모델 가중치 (Real-ESRGAN 등)

설치 및 실행

사전 요구사항

  • Python 3.10+
  • Node.js 20+
  • NVIDIA GPU (CUDA, VRAM 16GB 이상 권장)
  • Redis

환경 설정

# 1. 저장소 클론
git clone <repository-url>
cd project

# 2. Python 가상환경
python -m venv venv
source venv/bin/activate
pip install -r requirements/requirements.txt

# 3. 환경 변수
cp .env.template .env
# .env 파일에 API 키 입력:
#   OPENAI_API_KEY=...
#   HF_TOKEN=...

# 4. 프론트엔드
cd app/frontend
npm install
cd ../..

실행

# Backend (Port 8000)
PYTHONPATH=$(pwd):$PYTHONPATH \
python -m uvicorn app.api_server.main:app --host 0.0.0.0 --port 8000

# Frontend (Port 3000)
cd app/frontend && npm run dev -- -p 3000

또는 통합 재시작 스크립트:

bash restart_server.sh

API 엔드포인트

Method Endpoint 설명
POST /api/v1/projects/init 프로젝트 초기화 (이미지 업로드 + 설정)
POST /api/v1/projects/{id}/generate AI 이미지 생성 실행
GET /api/v1/projects/{id} 프로젝트 상태 및 매니페스트 조회
GET /api/v1/projects/ 프로젝트 목록 조회
POST /api/v1/projects/{id}/pages 페이지 추가
PUT /api/v1/editor/{id}/pages/{n}/layers/{l} 레이어 실시간 편집
GET /api/v1/presets/{type} 프리셋 조회 (tone, layout, content 등)
POST /api/v1/users/login 사용자 로그인

데이터 흐름

1. 사용자 입력 (이미지 + 설정 JSON)
   ↓
2. Pydantic v2 입력 검증 → UserRequest 생성
   ↓
3. Director: 프로젝트 구조 생성 + Segmenter로 기하학 분석
   ↓
4. CreativeDirector: Planner LLM → Designer LLM (페이지별 설계)
   ↓
5. DetailPageGenerator: 5단계 파이프라인 실행
   ├─ Step 1: 배경 제거 (BiRefNet)     → assets/01_cutout.png
   ├─ Step 2: AI 배경 생성 (Flux-Fill)  → renders/02_bg_gen.png
   ├─ Step 3: 고해상도 변환 (ESRGAN)    → renders/03_upscale.png
   ├─ Step 4: 색보정 (ColorMaster)      → renders/04_color.png
   └─ Step 5: 텍스트·도형 합성          → output/05_final.png
   ↓
6. manifest.json 갱신 → Frontend 렌더링

📥 발표 자료 및 협업일지

라이선스

이 프로젝트는 교육 및 포트폴리오 목적으로 제작되었습니다.

About

소상공인을 위한 마케팅용 콘텐츠 생성 서비스

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

0 watching

Forks

3 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages