갈식북재가 되고 싶어요.

Ubiregi Advent Calendar 2019 5일차.
또 엔지니어 코걸이가 맡아.
역시 많이 피곤하지 않은 것 같다.이번 부가 달력은 3편이다.업무 중에도 코드를 쓸 줄 아는데, 업무가 끝난 후에 기사를 쓰기 위해 코드를 쓴다니, 정말 대단하다.
코드 쓰느라 피곤해.글을 쓰는 것도 귀찮다.아아......아...
그림 그려.그림을 그려보자...

갈식북재

갈식북재를 아십니까?알고 있습니다.후지산을 쓴 사람입니다.더 대단할 수도 있어.나 교양 없어.
갈식북재-위키백과
갈식북재(갈식북재, 달력 10년 9월 23일<1760년 10월 31일>)는 강호시대 후기의 부세화사다.화정문화의 대표 중 하나.
대표작으로는 《부악36경》, 《북재만화》가 있는데 세계적으로 유명한 화가이다.삼라만상을 묘사해 일생 3만점이 넘는 작품을 발표했다.
대단하군.. 그렇군..

ml5js 사용

나 진정했어.
나는 그림 그리는 것을 특별히 싫어하는 것도 아니고 좋아하지도 잘하지도 않고 자바스크립트의 힘을 빌려 갈식북재 같은 그림을 만들고 싶다.
사용한 것은ml5js.
ml5js는 홈페이지에서 기계를 이용하여 간단하게 학습할 수 있습니다!를 참고하십시오.내부에 tensorflow 모형을 사용한 것 같습니다.그림만 그리는 게 아니라 기계 공부도 잘 몰라서 이번에는 스타일 트랜스퍼를 사용했어요.

StyleTransfer?

StyleTransfer는 이미지에 다른 이미지 스타일을 적용하는 기술입니다.
스타일 트랜스퍼를 진행하려면 먼저 スタイルを提供する画像を学習する의 절차가 필요하지만, 유명한 갈식북재에 대해서는 필요 없다.ml5js에서 표준은 처음부터 학습부악 36경(기억)하는 모형을 탑재했다.

어쨌든

계속 해.
먼저 정식 example에서 모델을 빌려 씁시다.여기 있습니다.
ml5js는 변환할 때 이 모델을 참조합니다. http://{domain}/models/wave/라는 요구가 있을 수 있으므로 디렉터리를 퍼블릭 아래나 브라우저에서 볼 수 있는 곳에 두십시오.
이번에react를 사용해야 하기 때문에react와react-dom을 의존 포장에 추가했지만 원래는 ml5js만 사용하면 됩니다.버전은 현재 (2019 1207)의 최신 0.4.3이다.

yarn add react react-dom ml5

다음은 코드입니다.

import React, { useRef } from 'react'
import ml5 from 'ml5';

const StyleTrans = () => {
    const newImage = useRef(null);
    const srcImage = useRef(null);
    const file = useRef(null)
    return (
        <>
            <input ref={file} type="file" name="imageFile" onChange={(e) => {
                const reader = new FileReader()
                reader.onloadend = (e) => {
                    srcImage.current.src = e.target.result;
                }
                srcImage.current.onload = () => {
                    ml5.styleTransfer('models/wave')
                    .then(styleWave => styleWave.transfer(srcImage.current))
                    .then(result => {
                        newImage.current.src = result.src;
                    })
                }
                reader.readAsDataURL(file.current.files[0])
            }} />
            <img ref={srcImage} width={400} height={279} src="" alt="変換前の画像" />
            <img ref={newImage} src="" alt="変換後の画像" />
        </>
    )
}

엉망진창으로 많이 썼어요.중요한 것은 아래 부분이다.models/wave 모델의 위치를 표시합니다.result.src에는 변환된 이미지가 있고 출력이 끝난 이미지가 있습니다.간단하다

ml5.styleTransfer('models/wave')
.then(styleWave => styleWave.transfer(srcImage.current))
.then(result => {
    newImage.current.src = result.src;
})

원본 이미지 변환은?

이 근처는 제대로 조사하지 못했다.도무지 그림의 크기(용량)가 아니어서 해상도에 따라 잘 변환되지 않는다.
해상도가 높으면 메모리 유출을 일으키기 때문에 이번에는 약 400*400의 이미지를 사용했다.

바꾸다

후지 텔레비전 방송국

후지 텔레비전 방송국이 아이폰 사진을 수집하고 있는 것을 발견하였다.

왜 뒤에 설산이 보이는지 모르겠다.

최대 모델

고달이를 몰라요.고달이 아닐 수도 있어.나는 다다이에 대해서도 잘 모른다.미안합니다.

뭐가 녹았나봐요.

중학교 때의 나

이것은 중학교 때의 나다.왜 오래되고 아름다운 조화를 느끼게 하는가.이 사진은 아마 2005년(평성 17년) 때일 거예요.

소화 시대를 거쳐 현대 예술 작품이 되었다.대단하다

최후

이번에 갈식북재의 부악 36경을 배운 모형을 이용했고, 물론 자신이 배운 모형도 만들 수 있었다.언제 해볼래요?
그리고 이 글은 advent 달력에 등록된 지 5일째로 2019년 12월 7일 오전 00:55입니다.지각했어.