브라우저에서 이미지를 애니메이션화합니다.
개시하다
저번는 브라우저로 얼굴의 교체(Faceswap적인 것)와 배경의 교체(가상 배경적인 것)를 옮겼다는 말을 했다.이번에는 브라우저에서 이미지 애니메이션 기능을 이동해 보려고 합니다.
예를 들면 이런 느낌의 물건.왼쪽 그림은 오른쪽 그림입니다.또 왼쪽 그림은 https://thispersondoesnotexist.com/로 제작됐다.
이번에 하고 싶은 거.
이미지를 애니메이션화한 AI 모델 몇 개를 제시했다.이번에는 브라우저의 실행을 위해 품질이 공인된 White-Box-Cartoon 을 사용하고 싶습니다.
할 일
공식 홈페이지에 제공된 모델은tensorflow의 모델이다.이것을tensorflowjs 모델로 변환해서 브라우저에서 실행합니다.tensorflow 모델에서 tensorflow lite 모델로 변환하는 방법여기.이 공개되었으니 이것을 참고하여 변환하십시오.그리고 이것을 웹 워크맨으로 컴파일하세요.
그리고tensowflow lite 모델의 변환에 대해 @PINTO03091씨가 알려주세요.
해본 일
먼저github에서clone white-bix-cartoonization을 시작합니다.
!git clone --branch inference-tf-2.x https://github.com/steubk/White-box-Cartoonization.git
위 TFTLite 모델의 변환 블로그를 참조하여 자리 표시자를 만든 후Generator 부분의 무게를 얻어 SavedModel을 생성합니다.
model_path = './White-box-Cartoonization/test_code/saved_models'
tf.reset_default_graph()
config = tf.ConfigProto()
config.gpu_options.allow_growth = True
with tf.Session(config=config) as sess:
input_photo = tf.placeholder(tf.float32, [1, None, None, 3], name='input_photo')
network_out = network.unet_generator(input_photo)
final_out = guided_filter.guided_filter(input_photo, network_out, r=1, eps=5e-3)
final_out = tf.identity(final_out, name='final_output') # Create an identical filtering layer
all_vars = tf.trainable_variables()
gene_vars = [var for var in all_vars if 'generator' in var.name]
saver = tf.train.Saver(var_list=gene_vars)
sess.run(tf.global_variables_initializer())
saver.restore(sess, tf.train.latest_checkpoint(model_path))
# Export to SavedModel
tf.saved_model.simple_save(
sess,
'saved_model_dir',
inputs={input_photo.name: input_photo},
outputs={final_out.name: final_out})
!tensorflowjs_converter --input_format=tf_saved_model --output_node_names="final_output" --saved_model_tags=serve saved_model_dir/ web_model_dir/
!tensorflowjs_converter --input_format=tf_saved_model --output_node_names="final_output" --saved_model_tags=serve saved_model_dir/ web_model_dir_int8/ --quantize_uint8=*
이 업무 내용은 이쪽 노트에도 집행 기록으로 남아 있다.
파일 크기 확인
파일 크기는 다음과 같습니다.계량화하지 않을 때는 5.7M, 계량화하면 1.5M 정도다.
동작 확인
제작된 UINT8의 양적 모델을 사용하여 동작을 확인합니다.가져온 이미지의 크기 처리 시간과 품질에 따라 달라지기 때문에 몇 개의 사이즈를 바꾸어 보려고 합니다.또 이곳에서는 지포스 GTX 1660이 탑재된 리눅스 PC&크롬을 활용한 실험이 진행 중이다.(이후 MacBook과 Thinkpad를 다시 시도합니다.)
먼저 256x256의 이미지를 입력한 경우입니다.한 11FPS 정도 돼요.얼굴이 좀 꺼진 게 아쉬워요.
이어서 320x320을 사용해 보세요.단숨에 2~3FPS까지 내려갔다.얼굴이 좀 보이네.
해상도 좀 더 높여봐. 512x512.잘 맺혀서 얼굴도 보이네.질적으로 상당히 좋다.다만, FPS는 0.2 정도에 불과해 실시간 사용에는 절망적이다.
다음은 해상도를 낮춰 보자.
128x128을 시도해 보십시오.40FPS 정도 나와 속도가 굉장히 빠르지만 퀄리티는 조금 아쉬워요.원래 작은 이미지를 애니메이션화하는 것이 좋을 수 있지만 어느 정도의 큰 이미지를 대상으로 하는 것은 무리일 수 있다.
그나저나 256x256으로 영상을 변환하면 이런 느낌이에요.
320x320의 상황은 이렇다.
실시간으로 보면 256x256은 한계인가.
UINT8 양적 버전의 결과입니다.시위 행진은 아래 페이지에서 꼭 시도해 주십시오.
또 이번에 사용된 프레젠테이션 원고의 출처는 아래 창고에 있다.이번 모형을 웹워크러로 사용하는 npm 모듈해당 창고도 공개됐으니 효과적으로 활용해 주십시오.
또 이번 동작 확인에는 UINT8을 계량화한 물건을 사용했다.상술한 프레젠테이션 페이지도 무량화판을 시도할 수 있으니 흥미가 있으면 위의 프레젠테이션 페이지에서 확인하세요.(화질, 처리 속도는 크게 다르지 않다.)
동작 확인(Appendix)
추가로 맥북과 씽크패드로 동작을 확인했다.
이번에 사용한 맥북의 규격은 코어 5 2.4GHz이다.사파리로 움직여.위 프레젠테이션에서 Safari는 Webworker에서 WebGL을 사용할 수 없습니다. 오른쪽 위에 있는 컨트롤러에서 process On Local을 열고 reload model 단추를 누르십시오.
또 씽크패드의 규격은 코어 5.1.7GHz다.
맥북의 경우 256x256의 경우 약 2.2FPS, 320x320의 경우 약 1.5FPS다.또 씽크패드의 경우 256x256의 경우 1.1FPS, 320x320의 경우 약 0.5FPS 정도다.현실주의적 처리는 고통스러운 결과죠.
총결산
브라우저에서 이미지를 애니메이션화하는 데 도전해 봤습니다.GPU에 탑재된 PC라면 화질 차가 많지 않아 실시간 전환이 가능하다.GPU를 탑재하지 않았다면 상당히 엄격해 보였을 것이다.향후 PC와 스마트폰의 성능 향상이 기대된다.
참고 자료
그림은 다음 페이지의 물건을 사용합니다.
비디오는 다음 페이지의 내용을 사용합니다.
Reference
이 문제에 관하여(브라우저에서 이미지를 애니메이션화합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/wok/articles/0002_white-box-cartoon텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
