Ultra Character Layer

애니메이션 캐릭터 이미지를 레이어 단위로 분해하는 파이프라인을 웹 UI와 API로 감싼 프로젝트입니다.

개요

Ultra Character Layer는 세 부분으로 구성됩니다.

• 이미지를 업로드하고 결과를 확인하는 Next.js 프론트엔드
• 작업 상태를 추적하고 PSD를 내보내는 FastAPI 백엔드
• 단일 캐릭터 이미지를 의미 단위 레이어로 분해하는 see-through/ 연구 파이프라인

이미지를 올리고, 추론 작업을 실행하고, 생성된 레이어를 확인한 뒤 PSD로 내려받는 흐름을 목표로 합니다.

시스템 흐름

flowchart LR
  User["사용자 이미지 업로드"] --> Frontend["Next.js 프론트엔드"]
  Frontend --> API["FastAPI 백엔드"]
  API --> Modal["Modal SeeThrough 워커"]
  Modal --> PSD["레이어 PSD bytes"]
  PSD --> Export["export/*.psd + latest.psd"]
  API --> Frontend
  Frontend --> Viewer["레이어 미리보기 UI"]

Loading

레포 구조

.
├── frontend/                       # Next.js 업로드/결과 확인 UI
├── backend/                        # FastAPI 서버와 Modal 워커 연결
├── see-through/                    # 레이어 분해 연구 파이프라인
├── export/                         # 생성 PSD 출력, Git 제외
└── start.sh

웹 앱 실행

백엔드:

cd backend
python -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
uvicorn server:app --reload

프론트엔드:

cd frontend
npm install
npm run dev

브라우저에서 http://localhost:3000을 엽니다.

연구 파이프라인 직접 실행

cd see-through
conda create -n see_through python=3.12 -y
conda activate see_through
pip install -r requirements.txt
python inference/scripts/inference_psd.py \
  --srcp common/assets/test_image.png \
  --save_to_psd

모델 설정, 선택 annotator, 논문 관련 정보는 see-through/README.md를 참고합니다.

API 메모

백엔드는 작업 상태를 메모리에 저장하고 생성된 PSD를 export/에 씁니다. 가장 최근 성공 결과는 export/latest.psd로 연결합니다.

주요 구현 파일:

• backend/server.py: API 엔드포인트, 작업 상태, PSD 저장, 레이어 직렬화
• backend/modal_worker.py: 원격 추론 실행
• frontend/: 업로드와 결과 확인 UI

시각 자료

기존 UI 테스트 스크린샷은 see-through/ui/test_screenshots/ 아래에 있으며, 인터페이스 변경을 문서화할 때 재사용할 수 있습니다.