이미지 처리 백엔드

AkeboshiHimari commented 3 months ago

개요

서버사이드 이미지 처리용 백엔드

사용 기술

백엔드 및 통신

AWS S3: 이미지 저장
AWS Lambda: 이미지 처리
AWS SQS: 이미지 처리 요청 생성
AWS DynamoDB: 처리 상태 저장
MongoDB: 게시글 저장
이미지 처리
Sharp : 이미지 webp 변환 및 자르기
smartcrop.js: 컨텐츠 인식 이미지 자르기
smartcrop-sharp: Sharp - smartcrop.js 어댑터
node-vibrant: 이미지에서 주요 색상 추출
opencvjs: 고급 이미지 처리 라이브러리
lbpcascade_animeface: anime face 감지에 최적화된 opencv용 cascade classifier

백엔드 레이어 개요

sequenceDiagram
    participant User
    participant Next.js
    participant MongoDB
    participant S3
    participant SQS
    participant Lambda as 이미지 처리 Lambda
    participant DynamoDB

    User->>User: 0. 이미지에 임시 URL 지정
    User->>Next.js: 1. 폼 제출
    Next.js->>MongoDB: 2-1. 부스 등록
    activate MongoDB
    Note right of Next.js: status: pending
    MongoDB-->>Next.js: 2-2. ObjectId 반환
    Deactivate MongoDB
    Next.js->>S3: 3-1: Presigned URL요청
    activate Next.js
    activate S3
    S3 -->> Next.js: 3-2: Presigned URL 반환
    deactivate S3
    Next.js ->> S3: 3-3: Presigned URL로 이미지 업로드
        activate S3
    S3 -->> Next.js: 3-4: 업로드 성공 응답
        deactivate S3
    Next.js->>SQS: 4-1: 메시지 전송 (ObjectId, 이미지 URL)
        deactivate Next.js
    SQS->>Lambda: 4-2: 트리거
    activate Lambda
    S3->>Lambda: 5-1: 원본 이미지 다운로드
    Lambda ->> Lambda: 5-2: 이미지 처리
    Lambda->>DynamoDB: 5-3: 처리 상태 업데이트
    Lambda->>S3: 5-4: 처리된 이미지 업로드 및 원본 삭제
    Lambda->>MongoDB: 5-5: 처리된 이미지 URL로 업데이트
    deactivate Lambda
    Note right of MongoDB: (status: open)

    loop 5초마다
        Next.js->>DynamoDB: 처리 상태 ajax 요청
                activate Next.js
        activate DynamoDB
        DynamoDB -->> Next.js: 처리 상태 반환
                deactivate DynamoDB
        Next.js->>User: 처리 상태 업데이트
                        deactivate Next.js
    end

폼 제출
MongoDB에 부스 등록
이미지 업로드
업로드 성공시 SQS에 처리요청 전송
SQS 트리거로 이미지 처리
처리된 이미지로 원본 이미지 대체
대체된 이미지 URL로 MongoDB 부스 업데이트
- 이미지 처리 완료될때마다 DynamoDB에 상태 업데이트

이미지 처리 개요

graph TD
    A[시작] --> B{SQS 메시지 확인}
    B -->|description| C[인포 이미지 처리]
    B -->|thumbnail| D[썸네일 이미지 처리]
    B -->|product| E[상품 이미지 처리]

    C --> C1[width, height 구하기]
    C1 --> C2["파일명에 -w{width}-h{height} 추가"]
    C2 --> C3{"8192px 이상?"}
    C3 -->|Yes| C4[8192px마다 이미지 분할]
    C4 --> C5["파일명에 -d{현재 분할}-{총 분할} 추가"]
    C3 -->|No| C6[분할 없음]
    C5 --> F
    C6 --> F

    D --> D1[얼굴 위치 감지 lbpcascade_animeface]
    D1 --> D2[3:4 비율로 얼굴 중심 크롭]
    D2 --> F

    E --> E1[얼굴 위치 감지 lbpcascade_animeface]
    E1 --> E2{상품 이미지 타입}
    E2 -->|타입 1| E3[1:1 비율로 얼굴 중심 크롭, 꽉 차게]
    E2 -->|타입 2| E4[1:1 비율로 얼굴 중심 크롭, 얼굴 영역 맞춤]
    E4 --> E5[파일명에 -t 추가]
    E3 --> F
    E5 --> F

    F[공통 처리]
    F --> F1[webp로 변환]
    F1 --> F4[이미지 저장]
    F4 --> F5[원본 이미지 삭제]
    F5 --> F6{"i- 접두어?"}
    F6 -->|No| F7[MongoDB 업데이트]
    F6 -->|Yes| G[종료]
    F7 --> G

AkeboshiHimari commented 3 months ago

OpenCV를 nodejs 환경에서 적용하는 것이 여러모로 쉽지 않은 것으로 보임 대신 Python 을 사용하는 것이 좋아보임

AkeboshiHimari commented 3 months ago

Sharp → Pillow OpenCVJS → cv2 Node-vibrant → color-thief Smartcrop.js → smartcrop.py anime-face → OK

AkeboshiHimari commented 3 months ago

테스트 결과 python에서는 opencv 이용한 anime-face-detection 기능이 원할히 작동함

AkeboshiHimari commented 3 months ago

처리할 파일을 이미지 접두어로 구분하는 대신에 SQS 메시지 내용으로 구분하는 것으로 변경 SQS 메시지 예시:

{
    "_id": "MONGO_OBJECT_ID",
    "images": {
        "thumbnail": "https://.../process/booth/thumbnail.png",
        "description": [
            "https://.../process/booth/1.jpg",
            "https://.../process/booth/2.jpg"
        ],
        "product": [
            "https://.../process/booth/p1.jpg",
            "https://.../process/booth/p2.jpg"
        ],
        "watermark": "https://.../process/watermark/logo.jpg"
    }
}

AkeboshiHimari commented 3 months ago

이미지 처리 Lambda용 repository 생성 python에서 이미지 색상 추출에는 vibrant-python사용 vibrant palette: Muted

Back-Won commented 3 months ago

이미지 처리 중: https://kiteapp.s3.ap-northeast-2.amazonaws.com/artist/QjTtNCKvFvQw0JrtfohEk.png 콘텐츠 타입: image/png 원본 이미지 모드: RGBA RGBA에서 RGB로 변환됨 최종 이미지 모드: RGB 이미지 저장됨: output_faces/TEST_ID_001_썸네일.png 상태 업데이트: TEST_ID_001 - 썸네일_완료 이미지 처리 중: https://kiteapp.s3.ap-northeast-2.amazonaws.com/artist/QjTtNCKvFvQw0JrtfohEk.png 콘텐츠 타입: image/png 원본 이미지 모드: RGBA RGBA에서 RGB로 변환됨 최종 이미지 모드: RGB 이미지 저장됨: output_faces/TEST_ID_001_설명_1.png 상태 업데이트: TEST_ID_001 - 설명_1_완료 이미지 처리 중: https://kiteapp.s3.ap-northeast-2.amazonaws.com/artist/7JYhze1wBRe7OcLN_C_9c.png 콘텐츠 타입: image/png 원본 이미지 모드: RGBA RGBA에서 RGB로 변환됨 최종 이미지 모드: RGB 이미지 저장됨: output_faces/TEST_ID_001_설명_2.png 상태 업데이트: TEST_ID_001 - 설명_2_완료 상태 업데이트: TEST_ID_001 - 설명_모두_완료 이미지 처리 중: https://kiteapp.s3.ap-northeast-2.amazonaws.com/test/GSWwZ0AWUAAM2T21.jpg 콘텐츠 타입: image/jpeg 원본 이미지 모드: RGB 최종 이미지 모드: RGB 이미지 저장됨: output_faces/TEST_ID_001_제품_1.png 상태 업데이트: TEST_ID_001 - 제품_1_완료 이미지 처리 중: https://kiteapp.s3.ap-northeast-2.amazonaws.com/test/GSWwWnaXoAAeegN1.jpg 콘텐츠 타입: image/jpeg 원본 이미지 모드: RGB 최종 이미지 모드: RGB 이미지 저장됨: output_faces/TEST_ID_001_제품_2.png 상태 업데이트: TEST_ID_001 - 제품_2_완료 상태 업데이트: TEST_ID_001 - 제품_모두_완료 이미지 처리 중: https://kiteapp.s3.ap-northeast-2.amazonaws.com/test/watermark.jpg 이미지 다운로드 오류: 404 Client Error: Not Found for url: https://kiteapp.s3.ap-northeast-2.amazonaws.com/test/watermark.jpg 상태 업데이트: TEST_ID_001 - 모든_처리_완료

일단은 내가 생각 하는 것 처럼 작동은함 상태 업데이트 코드는 다이나모 db 로 들어 가는거임

stratocanvas / kite