2025年6月

  • comfyUI/models/svd/
    svd.safetensors
    svd_image_decoder.safetensors
    svd_xt.safetensors
    svd_xt_image_decoder.safetensors

frames: 60 으로 설정
fps: 보통 6으로 고정 (모델 제한)
💡 만약 frames 대신 num_frames 라는 파라미터라면 동일하게 60으로 설정하세요.

정확한 요구사항을 받았습니다!
Windows 11 + RTX 4080 환경에서, First Order Motion Model (FOMM) 을 사용하여 사진 속 인물이 머리카락이 흔들리거나, 웃는 모습, 눈 깜빡임 등 자연스러운 움직임이 있는 동영상을 생성하는 전체 가이드 및 샘플 소스를 아래에 정리해 드릴게요.


✅ 목표

  • Windows 11 환경에서 GPU 활용
  • RTX 4080 기반 CUDA 12.x 지원
  • First Order Motion Model(FOMM) 설치 및 실행
  • 사진 → 머리카락 흔들림, 웃음, 눈 깜빡임 영상 생성
  • 무료 오픈소스 기반

🧰 필요한 도구 요약

항목설명
OSWindows 11
GPUNVIDIA RTX 4080
CUDA12.7 (기본적으로 설치됨)
Python3.9 or 3.10
PyTorchtorch==2.5.0+cu121 (CUDA 12.1 이상 호환 가능)
FOMMhttps://github.com/AliaksandrSiarohin/first-order-model
FFmpeg후처리용

🚀 Step-by-Step 설치 및 실행 가이드


🔧 1단계: 개발 환경 설정

1. Python 설치

python --version
pip --version

2. NVIDIA 드라이버 확인

nvidia-smi
위 명령어로 드라이버와 CUDA 버전 확인 (CUDA 12.7 이상)

3. PyTorch 설치 (CUDA 12.1 기준 — CUDA 12.7에서도 작동함)

공식 사이트에서 아래 명령어 복사:

pip install torch torchvision torchaudio --extra-index-url https://download.pytorch.org/whl/cu121

설치 확인:

python -c "import torch; print(torch.cuda.is_available())"

출력이 True라면 GPU가 정상적으로 인식되고 있음


📦 2단계: First Order Motion Model(FOMM) 설치

1. 소스 코드 복제

git clone https://github.com/AliaksandrSiarohin/first-order-model.git
cd first-order-model

2. 필요한 패키지 설치

pip install -r requirements.txt

필요 시 수동 설치:

pip install numpy opencv-python imageio configargparse

3. 사전 학습된 모델 다운로드

  • VoxCeleb2 256 모델

    • vox-cpk.pth.tar 파일 다운로드
    • 프로젝트 폴더 내 checkpoints/ 디렉토리에 넣기

🖼️ 3단계: 입력 파일 준비

1. inputs/source_image.jpg

  • 인물 사진 (고해상도, 얼굴 중심에 위치)
  • 예: inputs/source_image.jpg

2. inputs/driving_video.mp4

  • 표정 변화 또는 머리카락이 자연스럽게 움직이는 영상
  • 예: 유튜브에서 다운받은 사람 영상 중 웃는 장면 또는 바람 부는 장면
💡 샘플 드라이빙 영상이 필요하시면 알려주세요! 직접 제공 가능합니다.

🎬 4단계: AI 기반 움직임 생성 실행

기본 실행 명령어:

python demo.py --config config/vox-256.yaml \
               --checkpoint checkpoints/vox-cpk.pth.tar \
               --source_image inputs/source_image.jpg \
               --driving_video inputs/driving_video.mp4 \
               --result_video results/generated_video.mp4
이 스크립트는 드라이빙 영상의 움직임을 소스 이미지에 적용하여 영상을 생성합니다.

🎞️ 5단계: 결과물 확인 및 후처리

생성된 영상: results/generated_video.mp4

필요 시 SNS용 비율(9:16)으로 변환:

ffmpeg -i results/generated_video.mp4 \
       -vf "scale=1080:1920:force_original_aspect_ratio=decrease,pad=1080:1920:(ow-iw)/2:(oh-ih)/2" \
       results/output_9_16.mp4

📌 샘플 예제 소스 코드

run_fomm.bat (Windows 배치 파일 예시)

@echo off
set PYTHONPATH=%CD%
python demo.py ^
    --config config/vox-256.yaml ^
    --checkpoint checkpoints/vox-cpk.pth.tar ^
    --source_image inputs/source_image.jpg ^
    --driving_video inputs/driving_video.mp4 ^
    --result_video results/generated_video.mp4

실행 방법:

run_fomm.bat

📁 전체 폴더 구조 예시

first-order-model/
├── config/
├── checkpoints/
│   └── vox-cpk.pth.tar
├── inputs/
│   ├── source_image.jpg
│   └── driving_video.mp4
├── results/
│   └── generated_video.mp4
├── demo.py
└── requirements.txt

📦 결과물 예시

조건결과물 특징
드라이빙 영상: 웃는 표정사진 속 인물도 웃는 듯한 효과
드라이빙 영상: 바람에 머리카락 흔들림사진 속 인물의 머리카락이 자연스럽게 날리는 듯한 효과
드라이빙 영상: 고개 돌림 / 눈 깜빡임표정 변화 포함된 영상 생성 가능

🙋‍♂️ 질문 남겨주세요!

  • 드라이빙 영상 샘플이 필요하신가요?
  • 여러 장의 사진을 자동 처리하고 싶으신가요?
  • 자동으로 트랜지션 없이 순수 영상만 만들고 싶으신가요?

필요하시면 자동 처리 스크립트, 배치 작업 예제, 드라이빙 영상 샘플도 보내드릴 수 있어요 😊


GPU 환경이 잘 갖춰져 있으니 매우 빠르고 고화질의 결과물을 얻으실 수 있을 거예요!
궁금한 점 언제든지 물어보세요 👍

react 17.2.4, typescript 4.3.5, ag-grid 26.1.0, openjdk 17, spring, ibatis, mariadb 기술 스택을 기반으로
react 테스트 수행화면에서 시나리오 목록의 ag-grid에 하나의 행의 체크 박스를 체크하고 상위에 있는 Result 버튼을 클릭하면 ag-grid의 test_id, scenario_id 파라메터 값을 가지고 Rsult 화면으로 이동하는 예제 만들어 주세요

You're absolutely right to point that out\! The error "react-router-dom has no exported member 'useNavigate'" typically indicates a version mismatch.

Here's why this error occurs and how to fix it:

The Problem: Version Mismatch

  • useNavigate is a hook introduced in react-router-dom v6.
  • If you're getting this error, it means you're likely trying to use useNavigate with an older version of react-router-dom, most commonly v5 or earlier. In v5, you would use useHistory instead.

The Solution: Upgrade react-router-dom to v6 (or later)

To resolve this, you need to upgrade your react-router-dom package to version 6 or newer.

  1. Uninstall the current version:

    npm uninstall react-router-dom
  2. Install the latest version (v6+):

    npm install react-router-dom

    This will install the latest stable version, which is currently v6.x.x.

  3. Install @types/react-router-dom (if using TypeScript):

    npm install @types/react-router-dom

    It's crucial to also update the type definitions to match the react-router-dom version. In some cases, react-router-dom v6 has its own built-in types, making @types/react-router-dom unnecessary or even problematic if it's an outdated version. If you still encounter type errors after upgrading, try removing @types/react-router-dom and see if the issue resolves.

Important Changes in react-router-dom v6:

When upgrading from v5 to v6, there are several breaking changes you need to be aware of and adapt your code for:

  • <Switch> is replaced by <Routes>:

    • Old (v5):

      import { Switch, Route } from 'react-router-dom';
      
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/about" component={AboutPage} />
      </Switch>
    • New (v6):

      import { Routes, Route } from 'react-router-dom';
      
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
  • component prop is replaced by element prop: As shown above, instead of component={Component}, you now use element={<Component />}.
  • exact prop is no longer needed: In v6, routes are matched exactly by default. You can use the * wildcard for nested routes.
  • useHistory is replaced by useNavigate:

    • Old (v5):

      import { useHistory } from 'react-router-dom';
      const history = useHistory();
      history.push('/some-path');
    • New (v6):

      import { useNavigate } from 'react-router-dom';
      const navigate = useNavigate();
      navigate('/some-path');
  • Nested Routes: V6 has improved nested routing capabilities.

Summary of the fix for the provided code:

The code you provided already uses useNavigate, Routes, and the element prop, which means it's written for react-router-dom v6. Therefore, the most probable cause of the error is that your node_modules still contain an older version of react-router-dom. Simply running the npm uninstall and npm install commands as described above should resolve it.