Blooming: AI 기반 이미지 스타일 전환 플랫폼

AI 모델을 활용한 콘텐츠 이미지의 시각적 재해석

프로젝트 개요

Blooming은 사용자가 업로드한 콘텐츠 이미지와 선택한 스타일 이미지를 결합해 새로운 시각적 결과물을 생성하는 웹 애플리케이션입니다. TensorFlow Hub 스타일 전이 모델을 Flask 백엔드에 연동하고, React 프론트엔드에서 결과를 즉시 확인합니다. 모든 컴포넌트는 컨테이너로 분리되어 Nginx로 라우팅되며, docker-compose로 통합 운영(GCP 배포)됩니다.

서비스 화면

스타일 전이 결과 예시
이미지 업로드 및 결과 확인 화면

주요 기능

이미지 업로드·검증·보안

  • 콘텐츠/스타일 동시 업로드, 서버단 용량 제한 및 확장자 화이트리스트
  • MIME 검증, 해시 기반 중복 방지, (선택) presigned 업로드

AI 스타일 전이

  • TensorFlow Hub 모델 연동(워밍업/캐시)
  • style strength·콘텐츠 보존 슬라이더, (선택) seed로 재현성 제어

결과 갤러리 및 공유

  • react-grid-gallery로 반응형 갤러리
  • 썸네일/원본 동시 저장, (선택) Cloud Storage/CDN 캐싱

비동기 처리와 상태 표시

  • (선택) Celery/RQ + Redis 큐로 비동기 처리
  • 작업 ID·idempotency 키, 진행률 표시/재시도·취소 지원

컨테이너 배포/운영

  • React/Flask/Nginx 컨테이너화, docker-compose로 통합
  • 헬스체크, 제한 동시성(gunicorn/uvicorn workers) 설정, GCP VM(16GB)에 배포

콘텐츠 안전·라이선스

  • (선택) NSFW/저작권 필터, 스타일 이미지 출처/권한 고지
  • 사용자 데이터 보존기간·삭제 요청 처리

아키텍처

architecture-0
  • React: 업로드(react-dropzone) → 상태 표시(큐/폴링 또는 WebSocket)
  • Flask API: 전처리(리사이즈·sRGB·EXIF 회전·정규화) → TF Hub 추론 → 후처리(타일링/FP16 변환)
  • 저장: 결과 썸네일/원본 저장, Nginx로 정적 제공, (선택) Cloud Storage + CDN
  • 운영: docker-compose 오케스트레이션, 헬스체크·오토리스타트, 구조적 로깅·Sentry·Prometheus

기술 스택

프론트엔드: React, react-dropzone, react-grid-gallery 백엔드: Python, Flask, Pydantic, OpenAPI(Swagger), gunicorn/uvicorn AI 모델: TensorFlow Hub(Style Transfer), (선택) ONNX/TensorRT/GPU 비동기/캐시: (선택) Celery/RQ + Redis 인프라: Docker, docker-compose, Nginx 클라우드: GCP VM(16GB), (선택) Cloud Storage, Cloud CDN, Cloud Monitoring

담당 역할

문제 해결

회고