파이쿵

CNN 시각화 : 피처맵 (3)

사과쿵 — Mon, 15 Jul 2019 14:12:44 +0900

다 만들어진 예제를 정리해서 올리는 데만 3~4시간이 걸린다.
올리려다 보면
수업 시간에 말로 하던 부분을 다른 방식으로 표현하게 되고
그러면서 내용이 추가된다.

전체 코드를 사용하려면
이전 글의 코드와 현재 글의 코드를 순서대로 나열해야 한다.

def predict_and_get_outputs(model, img_path):
    # (conv, pool) 레이어만 출력. flatten 레이어 이전까지.
    layer_outputs = [layer.output for layer in model.layers[:8]]
    layer_names = [layer.name for layer in model.layers[:8]]

    print([str(output.shape) for output in layer_outputs])
    # ['(?, 148, 148, 32)', '(?, 74, 74, 32)', '(?, 72, 72, 64)', '(?, 36, 36, 64)',
    #  '(?, 34, 34, 128)', '(?, 17, 17, 128)', '(?, 15, 15, 128)', '(?, 7, 7, 128)']

    # 마지막 레이어에 해당하는 7번째 레이어의 출력만 전달해도 될 것 같지만, 7번째 결과만 나옴.
    # train 연산에 loss가 포함되어 있지만, loss를 명시하지 않으면 결과를 얻지 못하는 것과 같다.
    activation_model = tf.keras.models.Model(inputs=model.input, outputs=layer_outputs)

    input_shape = (model.input.shape[1], model.input.shape[2])      # (150, 150)
    img_tensor = load_image(img_path, target_size=input_shape)

    for layer in layer_outputs:
        print(layer.shape)
    print('-' * 50)
    # (?, 148, 148, 32)
    # (?, 74, 74, 32)
    # (?, 72, 72, 64)
    # (?, 36, 36, 64)
    # (?, 34, 34, 128)
    # (?, 17, 17, 128)
    # (?, 15, 15, 128)
    # (?, 7, 7, 128)

    # 앞에 나온 layer_outputs 변수를 덮어썼다.
    # 하는 역할이 같고 미세한 부분이 다르지만 내용도 같기 때문에 다른 이름으로 만들 필요가 없다.
    layer_outputs = activation_model.predict(img_tensor)
    for layer in layer_outputs:
        print(layer.shape)
    # (1, 148, 148, 32)
    # (1, 74, 74, 32)
    # (1, 72, 72, 64)
    # (1, 36, 36, 64)
    # (1, 34, 34, 128)
    # (1, 17, 17, 128)
    # (1, 15, 15, 128)
    # (1, 7, 7, 128)

    return layer_outputs, layer_names


layer_outputs, layer_names = predict_and_get_outputs(model, cat_path)

모델과 사진 경로를 전달하면 해당 레이어의 출력 결과를 알려주는 함수를 구현했다.
이 코드에서 중요한 것은
원하는 출력 결과가 레이어 8개의 결과이기 때문에
8개의 연산이 들어있는 layer_outputs를 Model 객체를 생성할 때 전달하는 코드다.
연산을 구동하면 출력이 나오고
컨볼루션의 출력 결과를 피처맵이라고 부른다.

def show_activation_maps(layer, title, layer_index, n_cols=16):
    # size는 높이와 너비, 모두를 가리킨다. 가로/세로 크기가 같다. (150, 150)
    size, n_features = layer.shape[1], layer.shape[-1]
    assert n_features % n_cols == 0     # 반드시 나누어 떨어져야 한다

    n_rows = n_features // n_cols

    # 각각의 이미지를 따로 출력하지 않고, 큰 이미지에 모아서 한번에 출력하기 위한 변수
    big_image = np.zeros((n_rows*size, n_cols*size), dtype=np.float32)

    # 행과 열의 정해진 위치에 출력하기 위한 2차원 반복문
    for row in range(n_rows):
        for col in range(n_cols):
            # 특정 부분에 값들이 편중되어 있는 상태
            # 피처에 대해 반복하기 때문에 channel 변수는 피처맵 1개를 가리킨다.
            channel = layer[0, :, :, row * n_cols + col]      # shape : (size, size)

            # 특성이 잘 보이도록 0~255 사이로 재구성. 범위를 벗어나는 일부 값들은 클리핑.
            # 대략적으로 정규 분포에 따르면 95% 정도의 데이터 포함
            channel -= channel.mean()
            channel /= channel.std()
            channel *= 64
            channel += 128
            channel = np.clip(channel, 0, 255).astype('uint8')

            # 큰 이미지에서 자신의 영역을 찾아 복사
            big_image[row*size:(row+1)*size, col*size:(col+1)*size] = channel

    # 그래프에서는 행열(n_rows, n_cols) 순서가 xy로 바뀐다. n_cols가 앞에 와야 한다.
    plt.figure(figsize=(n_cols, n_rows))

    plt.xticks(np.arange(n_cols) * size)
    plt.yticks(np.arange(n_rows) * size)
    plt.title('layer {} : {}'.format(layer_index, title))
    plt.tight_layout()
    plt.imshow(big_image)           # cmap='gray'

한 줄에 16개의 피처를 출력한다.
모든 레이어의 필터 개수를 16의 배수로 설정했기 때문에
한 줄에 16개씩 출력하는 코드는 현재 모델에 대해서는 동작하지만
다른 모델에 대해서는 동작하지 않을 수 있다.

이 함수는 피처맵에 포함된 전체 피처를 모두 출력한다.
32개, 64개, 128개로 피처맵의 개수가 많아지는 것을 아래에서 볼 수 있다.

for i, (layer, name) in enumerate(zip(layer_outputs, layer_names)):
    show_activation_maps(layer, name, i)

plt.show()

출력 결과를 보면
레이어를 거쳐 갈수록, 정확하게는 풀링 레이어를 거칠 때마다
피처맵의 크기가 절반으로 줄어드는 것을 확인할 수 있다.
크기를 확인하기 위해 이번에는 일부러 눈금을 지우지 않고 두었다.

또한 이전 예제에서는 gray 컬러맵을 사용했는데
이번에는 viridis 기본 컬러맵을 사용했다.
흑백이 좋을 때도 있고 제한된 색상으로 표시하는 것이 좋을 때도 있다.

출력 결과에서 공백으로 표시되는 것은
해당 필터가 현재 이미지에 반응하지 않았다는 것을 의미한다.
결과물이 많아 고양이 사진만 사용했는데
개 사진을 사용하면 공백이었던 필터에 결과가 나타날 수도 있다.
또한 공백으로 가기 직전의 거의 공백처럼 보이는 피처맵도 있다.
뜬금없이 공백이 표시되는 것은 아니다.

CNN 시각화 : 피처맵 (2)

사과쿵 — Mon, 15 Jul 2019 11:17:53 +0900

이전 글에서 얘기했던 것처럼
지금부터 설명하는 코드는 "케라스 창시자"를 토대로 했고
수업에 사용하기 위해서 필요하기는 하지만
정해진 수업 시간을 넘어가는 부분에 대해서는 과감하게 정리를 했다.
또한 나만의 스타일이 있어서
내식대로 변수 이름부터 상당한 부분을 수정했음을 밝힌다.
설명이 부족한 부분에 대해서는 "케라스 창시자"에 나오는 원본 코드를 참조하기 바란다.

이번 코드를 구동하기 위해서는
모델 파일과 시각화를 적용할 사진이 필요하다.
모델 파일은 "케라스 창시자"에 나오는 두 번째 모델을 학습한 파일이고
사진 파일은 도서에 첨부된 개와 고양이 파일 중에서 하나씩을 골랐다.
다운로드 받은 파일은 cats_and_dogs 폴더를 만들고 그 안에 복사하도록 한다.

개와 고양이 모델 파일 다운로드
개 사진 다운로드
고양이 사진 다운로드

그러면 순서대로 전체 코드를 살펴보도록 하자.

import tensorflow as tf
import numpy as np
import matplotlib.pyplot as plt


def show_image(img_path, target_size):
    img = tf.keras.preprocessing.image.load_img(img_path, target_size=target_size)
    img_tensor = tf.keras.preprocessing.image.img_to_array(img)

    # print(img_tensor[0, 0])                         # [31.  2.  6.]
    # print(np.min(img_tensor), np.max(img_tensor))   # 0.0 255.0
    # print(img_tensor.dtype, img_tensor.shape)       # float32 (150, 150, 3)

    # 스케일링하지 않으면 이미지 출력 안됨
    img_tensor /= 255

    plt.imshow(img_tensor)
    plt.show()


cat_path = 'cats_and_dogs/cat.1574.jpg'
dog_path = 'cats_and_dogs/dog.1525.jpg'

show_image(cat_path, target_size=(150, 150))
show_image(dog_path, target_size=(150, 150))

특정 이미지를 화면에 표시하기 위해 만들었고
실제로 사용하지는 않는다.
전달한 이미지가 어떤 건지 확인하는 용도로 구현했다.
가장 중요한 부분은 스케일링.
딥러닝은 작은 숫자에 강하다고 해야 할까?
숫자가 클 경우 수렴하는데 오래 걸리기 때문에 스케일링이 필요하다.
원본은 0~255 사이의 RGB 정수 값을 갖기 때문에
이를 0~1 사이의 실수로 변환하는 것이 좋다.

나름 귀여운 사진을 골랐다.
피처맵을 출력할 때는 x축과 y축에 들어가는 눈금은 표시하지 않는다.

# 4개의 예제 중에서 두 번째 예제 사용
model_path = 'cats_and_dogs_2/cats_and_dogs_2.h5'
model = tf.keras.models.load_model(model_path)
model.summary()

먼저 모델을 로드해서 네트웍 구조를 보자.
여러 개의 모델 중에서 굳이 성능이 좋지 않은 두 번째 모델을 사용한 이유가 있다.

_________________________________________________________________
Layer (type)                 Output Shape              Param #   
=================================================================
conv2d_68 (Conv2D)           (None, 148, 148, 32)      896       
_________________________________________________________________
max_pooling2d_68 (MaxPooling (None, 74, 74, 32)        0         
_________________________________________________________________
conv2d_69 (Conv2D)           (None, 72, 72, 64)        18496     
_________________________________________________________________
max_pooling2d_69 (MaxPooling (None, 36, 36, 64)        0         
_________________________________________________________________
conv2d_70 (Conv2D)           (None, 34, 34, 128)       73856     
_________________________________________________________________
max_pooling2d_70 (MaxPooling (None, 17, 17, 128)       0         
_________________________________________________________________
conv2d_71 (Conv2D)           (None, 15, 15, 128)       147584    
_________________________________________________________________
max_pooling2d_71 (MaxPooling (None, 7, 7, 128)         0         
_________________________________________________________________
flatten_21 (Flatten)         (None, 6272)              0         
_________________________________________________________________
dense_46 (Dense)             (None, 512)               3211776   
_________________________________________________________________
dropout_23 (Dropout)         (None, 512)               0         
_________________________________________________________________
dense_47 (Dense)             (None, 1)                 513       
=================================================================
Total params: 3,453,121
Trainable params: 3,453,121
Non-trainable params: 0
_________________________________________________________________

뒤쪽 예제들은 VGG16 모델을 재사용하는 모델이라서
레이어의 개수가 너무 많아서 보여줘야 하는 것들도 많기 때문에 적절하지 않다.

여기서 보려고 하는 것은
필터 슬라이딩의 결과물인 피처맵이고
풀링을 포함해도 8개밖에 없어서 비교가 쉽다.
레이어 후반부에 해당하는 FC 레이어의 가중치는
피처를 추출하는 것이 아니라 분류를 목적으로 하기 때문에 출력하지 않는다.

궁금한 분들은 당연히 출력해서 결과를 확인하는 것도 좋을 것이다.
그러나 문제가 있다.
컨볼루션과 풀링에서는 정확하게 이미지 단위로 데이터가 존재하는 것에 반해
FC(dense) 레이어에서는 1차원이고
이걸 몇 개의 이미지로 분할할 것인지부터 크기를 어떻게 해야할지 막막하다.
다시 말해 인접한 데이터를 이미지처럼 상하좌우로 붙여서 출력하기 어렵다.
어떡해야 하는지는 나도 안해봐서 모른다.

어쨌거나 출력 결과에서 얘기하려고 하는 것은
컨볼루션과 풀링에 해당하는 8개 레이어의 피처맵만 출력한다는 것.

def load_image(img_path, target_size):
    img = tf.keras.preprocessing.image.load_img(img_path, target_size=target_size)
    img_tensor = tf.keras.preprocessing.image.img_to_array(img)

    # 배치 사이즈 추가 + 스케일링 결과 반환
    return img_tensor[np.newaxis] / 255     # (1, 150, 150, 3)


# 첫 번째 등장하는 컨볼루션 레이어의 모든 피처맵(32개) 출력
def show_first_feature_map(loaded_model, img_path):
    first_output = loaded_model.layers[0].output
    print(first_output.shape, first_output.dtype)   # (?, 148, 148, 32) <dtype: 'float32'>

    # 1개의 출력을 갖는 새로운 모델 생성
    model = tf.keras.models.Model(inputs=loaded_model.input, outputs=first_output)

    # 입력으로부터 높이와 너비를 사용해서 target_size에 해당하는 튜플 생성
    target_size = (loaded_model.input.shape[1], loaded_model.input.shape[2])
    img_tensor = load_image(img_path, target_size)

    print(loaded_model.input.shape)     # (?, 150, 150, 3)
    print(img_tensor.shape)             # (1, 150, 150, 3)

    first_activation = model.predict(img_tensor)

    # 컨볼루션 레이어에서 필터 크기(3), 스트라이드(1), 패딩(valid)을 사용했기 때문에
    # 150에서 148로 크기가 일부 줄었음을 알 수 있다. 필터 개수는 32.
    print(first_activation.shape)       # (1, 148, 148, 32)
    print(first_activation[0, 0, 0])    # [0.00675746 0. 0.02397328 0.03818807 0. ...]

    # 19번째 활성 맵 출력. 기본 cmap은 viridis. gray는 흑백 컬러맵.
    # [0, :, :, feature_index]
    # 0은 첫 번째 데이터(원본 이미지)의 피처맵을 가리킨다. 사진은 1장만 사용했기 때문에 0만 가능
    # 가운데 콜론(:)은 높이와 너비를 가리키는 차원의 모든 데이터
    # feature_index는 보고 싶은 피처맵이 있는 채널을 가리킨다.
    # 32개의 필터를 사용했다면 0부터 31까지의 피처맵이 존재한다.
    plt.figure(figsize=(16, 8))
    for i in range(first_activation.shape[-1]):
        plt.subplot(4, 8, i + 1)

        # 눈금 제거. fignum은 같은 피켜에 연속 출력
        plt.axis('off')
        plt.matshow(first_activation[0, :, :, i], cmap='gray', fignum=0)
    plt.tight_layout()
    plt.show()

개와 고양이 모델로부터 첫 번째 컨볼루션 레이어의 피처맵만 출력해 보자.
이전 글에서처럼 전체 레이어를 비교하는 것도 중요하지만
현재 피처에서 각각의 피처들이 어떤 역할을 했는지 비교하는 것도 중요하다.

아래의 한 줄짜리 코드를 통해 앞에서 정의한 함수가 어떻게 동작했는지 결과를 보도록 하자.

show_first_feature_map(model, cat_path)

show_first_feature_map(model, dog_path)

첫 번째 레이어의 피처맵만 출력해도
꽤 다양한 결과가 만들어졌다는 것을 알 수 있다.
또한 지금은 비슷해 보여도
두 번째 레이어로 넘어가면서 현저하게 달라지는 피처맵이 발생할 것이다.
이렇게 여러 개의 컨볼루션을 수행하게 되면
다양한 필터를 만나게 되고 결과적으로 하는 역할이 다른 피처맵이 만들어지게 된다.

CNN 시각화 : 피처맵 (1)

사과쿵 — Mon, 15 Jul 2019 10:24:19 +0900

가끔 수업을 들으러 오는 수강생들로부터
파이쿵 블로그에 대한 얘기를 듣는다.
아직 내공이 깊지 않아
기본적인 것들에 대해서만 게시하고 있을 뿐인데
자주 방문했고 도움이 되었다고 한다.

과거에 수업했던 자료들을 모두 올려놓긴 했지만
최근 자료들은 괜히 부담스러워서 수업에서만 사용하고 있었는데
수강생들의 얘기를 듣다 보니
대단하지 않아도 많은 분들에게 보여드려야 하겠다는 압박을 은연 중에 받았다.

"케라스 창시자"라는 도서에 딥러닝 관련 좋은 예제들이 많다.
최근에 나온 책이라 모두 잘 동작하고
박해선님께서 번역해서 번역도 깔끔하지만
도서 하단의 역자 주가 아주 매력적인 책이다.
최근의 수업에서는 이 책에 나오는 내용 일부를 수정해서 진행한다.
수업을 진행하면서
이 책에서 발췌했다고 하고
괜히 무안해서 내 식대로 많이(?) 수정해서 사용한다고 얘기한다.

앞에 있는 사진이 딥러닝 기초를 수업할 때 가장 중요하게 생각하는 사진이다.
이 사진 한 장이면 딥러닝이 무엇인지 알 수 있다고 수업을 한다.

사진을 보면 레이어가 뒤쪽으로 넘어가면서
모양이 선명하지 않고 뭉개지는 것을 볼 수 있다.
이게 사람이 사물을 기억하는 방식이다.
앞에서는 선명하게 기억하려고 노력하겠지만
결국에는 사물에 대한 흐릿하게 기억할 수밖에 없다는 것을 보여준다.

멀리서 엄마가 걸어오고 있다고 판단했지만
가까이 와서 보니 엄마가 아니었다.
이게 CNN이다.
레이어 후반에 있는 흐릿한 이미지가 될 수 있는 사진은 매우 많다.
선명한 사진을 압축하는 과정에서 동일한 이미지처럼 보여지는 것이다.

CNN 아키텍처에서는 일반적으로 풀링(pooling)을 거치게 되면
가로와 세로 크기가 절반으로 줄어든다.
여기서 절반으로 줄어든다는 것은 필터 슬라이딩의 결과물인 피처 맵(feature map, activation map)이다.
따라서 앞의 사진에서 주의해야 할 점은
레이어 뒤쪽으로 갈수록 크기가 줄어들고 있다는 점이다.
다만 보기 좋게 출력하기 위해 모두 같은 크기로 했지만
실제로는 풀링을 거칠수록 줄어들기 때문에 픽셀이 거칠게 표시되는 것이다.
대신 채널(channel, 두께)의 깊이가 깊어진다.
다만 이 사진에서는 특정 피처맵 하나만 출력해야 하기 때문에 채널을 표시할 수는 없다.

참.. 앞의 사진이 피처맵을 보여준다는 것은 알고 있겠지?
설마..

CNN 아키텍처에서 이미지로 표현할 수 있는 데이터에 어떤 것이 있을까?
가중치로 표현되는 필터와 필터의 결과물인 피처맵밖에 없다.
피처맵은 컨볼루션과 풀링 레이어의 결과물이고
첫 번째 입력인 원본 사진과 달리
RGB 컴포넌트로 구성된 것이 아니라서 색상을 입힐 수가 없다.
16개의 필터를 사용했다면 채널 16개인 피처맵이 만들어지고
그중에서 1개의 피처맵만 표시하게 된다.

사진 또는 이미지라고 불리는 것은
픽셀이라는 형태로 표현되는 데이터이긴 하지만
인접한 데이터(픽셀)는 연관성이 깊을 수밖에 없고
이것을 상관관계가 강하다고 한다.
내 친구가 검정이라면 나 또한 검정일 확률이 높다는 뜻이다.
피처맵이 이미지는 아니지만
이미지로 표시할 수 있는 데이터의 범위로 스케일링한다면
각각의 픽셀(데이터)이 갖는 상관관계를 시각적으로 볼 수 있게 된다.

실제로 표시를 해보면
앞의 사진에서 보는 것처럼
완전 엉뚱한 형태의 이미지가 나타나지 않는다는 것을 알 수 있다.
원본 사진을 한 번 필터링했다고 해서
자동차가 알 수 없는 무언가로 변하지는 않는다.

간단하게 코드만 올리려고 했는데
강사의 직업병으로 인해 설명이 길어졌다.
코드는 다음 글에서 따로 게시한다.

텐서플로 라이트 전체보기

사과쿵 — Fri, 7 Jun 2019 09:55:05 +0900

텐서플로 라이트는 여기까지.미안.
서버와 연동하는 모델과 연동하지 않고 독립적으로 동작하는 모델까지 모두 구현했으므로
내가 하려고 하는 정도로는 충분하다.
스마트폰과 연동하려고 한다면, 플러터와 함께 보는 것이 좋다.

플러터 (스마트폰 앱) 전체보기

사과쿵 — Fri, 7 Jun 2019 09:54:26 +0900

미안.
아빠가 목록을 빨리 만들어야 우재가 보기 편할텐데..
많이 늦었네.
티스토리는 한번에 다섯 개씩만 보여주게 되어 있어서 많이 불편해.
지금 하고 있는 프로젝트.. 성공하길 바래!
파이링~~

0. 플러터

31. 플러터 : 앨범 + 카메라

서핑 트립 : 다대포 (2)

사과쿵 — Wed, 29 May 2019 16:59:44 +0900

대박의 꿈은 사라지고
피로에 지친 육신만 남았다.
다대포에 계속 있을 수는 없고 우리는 트립을 왔기 때문에
송정으로 가기로 했다.
배가 고팠는데, 얘기할 분위기가 아니었다.

송정에 도착하니 난리도 아니다.
파도가 꽤 좋긴 했는데, 라인업에 사람들이 무지하게 늘어서 있었다.
서프홀릭에서 보드를 빌린다.
서프홀릭은 라인업까지는 다대포의 10분의 1도 안된다.
차가 많이 다니지 않는 길 건너면 백사장, 그 앞에 바로 라인업.

로컬 서퍼분들과 재호 선생님이 흥분 했다.
다대포를 만회해야한다는 생각이 너무 보였다.
바다에서는 각자 인생을 가는 거다.
입수. 열심히 즐겼다.

마침 파도가 내가 타기에 적당한 수준이었다.
아침보다 줄었다고 하는데..
사람도 처음보다 빠지고 해서 아주 좋았다.
근데 너무 힘들었다.
나는 한 시간쯤 타고 나왔고 나머지 분들은 조금 더 타고 나왔다.
모두 엄청 상기된 상태였다.
무지하게 많이 탔다고 열변을 토한다.

나는 정상적인 파도는 타지 못했다.
라인업에서 파도가 부서지기 전에 탔어야 했는데
피크가 깨지고 나서 거품이 되었을 때 두세 개 정도 탔다.
피크에서 타는 것과는 천지차이.
그래도 좋았다.

점심을 먹어야 하는데 분위기가 이상하다.
다대포 파도가 살아났단다.
다대포로 다시 갈 것이냐 송정에서 나머지 시간을 보낼 것이냐!
부산의 양끝이라 1시간 걸린다.
저녁에 죽도 갈 때도 그만큼 시간이 더 걸릴 것이다.
유명한 개미집에 가서 얘기하기로 한다.
사실 얘기할 필요도 없다.
결정된 상태였지만 괜히 미안해서 결정을 연기한 것뿐이었다.

캠프생들이 신경 쓰였을 것이다.
나는 전혀 상관없었고
멘탈이 나갈 뻔 했던 그곳을 다시 방문하는 것도 멘탈에 좋을 것 같았다.
여자 캠프생 둘도 좋다고 한다.
그래서 물어봤다.
보드 또 빌려야 하냐고. 우리는 오늘 두 번 빌렸다.
다행스럽게 그냥 빌려주셨다.

다시 다대포.
아까와는 다르게 바람 한점 없고 파도는 말랑말랑하다.
좋은 파도라는 것을 설악과 죽도만 경험한 나도 알 정도였다.
송정보다 훨씬 좋았다.
일단 서퍼가 많이 없어서 라인업에서 겹치지 않고 앉을 수 있었다.

대박, 대박!
라인업의 오른쪽 끝에 있었는데..
파도가 오기 전에 일찌감치 패들링으로 보드를 움직이고
가까이 왔을 때 폭풍 패들링을 해서 파도를 잡았다.
다른 서퍼들이 하는 것처럼!
상상할 수 없이 어설펐겠지만 서핑 인생 첫 번째 성공이었다.

그 후로 몇 개의 파도를 더 잡을 수 있었고
파도 위에 있을 때의 기분도 충분히 느낄 수 있었다.
살이 쪄서 파도가 날 무거워한다고 생각했었다.
문제는 타이밍이었다.
파도타기의 정석이랄까..
지켜야 할 규칙이 있는데, 규칙을 전혀 지키지 않고 있었던 것이었다.
지킨다고 생각한 건 나의 착각.

해피엔딩.
다대포에서 최악의 서핑과 최선의 서핑을 모두 맛봤다.
스스로 파도를 잡을 수 있음을 증명했다.
등대까지의 패들링도 효과를 입증했고
등대 앞에서의 보드 컨트롤,
라인업 한쪽에서의 보드 컨트롤도 입증했다.
보드 날려먹지 않고 비슷한 정도로 기다렸고 잡았다!

죽도에 도착하니 새벽 1시.
차를 타고 오면서
파도를 기다릴 때부터 테이크옵해서 일어날 때까지의 상황을
여러 번에 걸쳐 이미지 트레이닝했다.
예전과는 다르게 테이크옵할 때의 중요한 점, 보드의 각도 등이 상상된다.

다음엔 만리포를 말씀하신다.
월요일에 역대급 파도가 만리포에 들어와서 모두를 흥분시켰다.
대한민국에서 볼 수 없는 수준의 파도였다.

난 아무 곳이나 오케이!
재호 선생님이 아니어도 로컬 서퍼가 없어도
서핑은 그냥 재밌다. 딴 동네 가서 하면 더 재밌다!

서핑 트립 : 다대포 (1)

사과쿵 — Wed, 29 May 2019 16:36:32 +0900

초밥을 벗어나기 전에
서핑 중에 느꼈던 어려웠던 점을 정리하려고 했는데
놀기도 해야 하고 공부도 해야 하고 돈도 벌어야 해서..

할 수 없다.
머리에서 사라지기 전에 첫 번째 서핑 여행을 정리하는 것이 맞다.
5월 마지막 주 월화수 3일의 시간이 생겼다.
수요일은 어떻게 될지 몰랐지만
월요일과 화요일 이틀은 망고서프에서 보내려고 했다.
결국 수요일은 집에 왔고
도서관에 나와 밀렸던 뒷정리 하고, 지금 이 글을 쓰고 있다.

토요일인가 일요일인가..
재호 선생님께서 트립 간다고 전화를 주셨다.
망고서프는 월요일과 화요일 이틀 쉰다고.
다대포 갈건데 같이 갈거냐고.

월요일 오전에 도착해서 늘 하던대로 등대까지 패들링.
(물론 나하고는 그다지 상관없을 수 있지만)
저녁 전에는 파도가 꽤 좋아서
보드 컨트롤과 실제 파도 잡는 연습을 했다.
참.. 뭐라고 해야 할지..
시도는 무지하게 했고 잡지는 못했고.
그래도 잡은 것도 아니고
잡지 못했다고 얘기하기는 싫은 상황이 몇 번은 있었다.
중요한 점은 내가 라인업과 같은 라인에 있었다는 점이다.
아직까지는 라인업에 있으면 주요 길목을 막아버리는 길막이다.

참, 일요일 배드민턴 대회가 있어
기분 좋게 승급을 하고 점심 먹고 나와서 발목을 접질렀다.
다대포를 가야 하는데 구경만 해야 하는 상황.
발목 나갈 각오를 하고 바다에 들어간 상황이었는데
놀랍게도 바다에서 나오니 발목이 거의 아프지 않았다.
발목을 쓸 일이 없어 시도하긴 했지만 놀라웠다.

어찌 됐든
저녁 7시. 다대포로 출발.
서퍼라면 누구나 만나보고 교류하길 원하는
죽도 로컬 서퍼 세 분과 함께 였다.
여기에 재호 선생님, 나.
같이 캠프에 참가했던 두 사람은 다대포에서 합류. 총 7명이었다.

열심히 달려 자정이 되기 전에 도착해서
늦은 저녁을 거하게 먹고
모두가 하나 된다는 원모텔에 숙소를 잡았다.
참고로 다대포나 송정은 접근성이 너무 좋아서 게스트하우스가 없다.
원모델에서도 맥주 몇 캔을 마시고 나니 새벽 2시.
재호 선생님과 남자 로컬 서퍼 두 분은 3시까지 담소.

새벽 6시에 기상해서 힐링서프로 갔다.
나를 포함한 캠프생들은 그 시간에 보드를 빌릴 수 있었다.
차트가 잘 나온 날에는
새벽부터 손님이 많다고 했다.
굳이 죽도에서 다대포까지 왜 왔겠는가!
그 놈의 차트가 대박 파도 터진다고 해서 온 것 아니겠는가!

7시가 조금 못 되어서 입수.
하얀 거품이 엄청 길게 퍼지는 모습이 장관이었다.
죽도와 달리 힐링서프에서 백사장까지
4차선 도로를 건너고 공영 주차장을 지나
시민들의 휴식처인 공원까지 지나고
매우 넓은 백사장을 지나 그 만큼의 갯벌을 지나야
라인업 초입에 도착할 수 있었다.
간만의 차가 심한 곳이었다.

헐.. 바람이 불고 조류가 많이 셌다.
그래도 깊지 않아 힘들지만 파도를 뚫고 라인업까지 갔다.
등대까지 다녔던 패들링이 효과를 봤다.

그런데 문제가 생겼다.
임대한 스펀지 보드가 그동안 타던 것하고 너무 달라
컨트롤을 전혀 할 수가 없었다.
라인업까지 나갈 때도 좌우로 흔들리는 것은 기본이고
패들링하다 미끄러지는 일까지 생겼다.
라인업에서 보드에 앉아 파도를 기다려야 하는데
앉아 있을 수가 없었다. 바람 때문에 보드 방향조차 돌릴 수가 없었다.

보드에 앉았다 넘어졌다를 몇 번 반복하고 나니까
백사장 왼쪽에 있는 산책로가 있는 갯바위에 가까이 가 있었다.
서퍼 몇이 있기는 했지만
선생님을 찾아 반대편으로 겁나게 패들링을 했다.
15분쯤 하지 않았을까?
느낌이 이상했다.
좀 가깝게 간 것 같기는 한데
가까워졌다고 얘기하기도 뭐한 거리만큼 이동했다.
잠깐 쉬면 원래 자리로 돌아간다.
헐.. 살짝 겁 났다.

그만큼의 패들링을 다시 했고
그제서야 선생님을 만날 수 있었다.
너무 안심했지만
실제로는 내가 선생님쪽으로 간게 아니고
재호 선생님이 조류에 밀려 내쪽으로 온 것이었다.
함께 처음 자리로 돌아가려고 했고
선생님을 따라 갈 수 있으리라고 여겼지만
선생님만 갔고 나는 남았다.

그래도 처음 라인업이라고 생각했던 곳으로 계속 패들링.
주변에 있던 서퍼들은 어느샌가 보이지 않는다.
내가 갔는지 그들이 왔는지 모르는 상황, 캠프생 둘이 함께 있다.
너무 반가워서 인사를 하고
이때까지도 나가야 한다는 생각을 못했다.
캠프생들이 여기서 파도를 잡고 있었다,라고 생각을 했었다.
두 사람이 바닷가쪽으로 이동하기에
파도라서 하나 잡아보려는 시도는 해봐야 할 것 같아서
몇 개 잡아보는 척 했고 다시 혼자가 됐다.

나가기 위해 패들링을 했다.
아까보다 현격하게 이동하는 거리가 짧아졌다.
좀 전에는 짧기는 했지만 이동하는 느낌이 있었는데
움직이긴 하는데.. 움직이는 것 같지 않은 느낌이랄까..

패들링을 얼마나 했는지도 모르겠다.
백사장으로 나가는 걸 포기하고
숲이 있는 갯바위로 방향을 바꿨다.
앞서 몇 명이 그쪽으로 나가는 것을 봤었고 바보 같다는 생각을 했었다.
이런 조류와 바람이 산책로가 있는 곳으로 가지 않고
바다쪽으로 나를 밀어붙였다.
겁나게 패들링을 해도 갯바위하고 점점 멀어지는 느낌이다.
패들링하는 오른쪽은 망망대핸데..

삐뽀삐뽀.
어디선가 사이렌 소리가 울린다.
해양 경찰이 출동했다. 배가 두 대나 왔다.
뭐라고 하는데.. 잘 안 들렸다.
자존심이 남아서 그랬을까, 갯바위쪽으로 가는 중이라고 했다.
가까이 오지 않은 상태에서 손짓으로 오라고 한다.
마지 못해 갔다.
조류와 바람을 등에 업으니까 꽤 먼 거리였는데 금방 도착했다.
해양 경찰 한 분이 바다에 뛰어들어 쏘세지 하나를 건네주고 잡이라 한다.
배까지의 거리는 얼마 안 되는데.. 잡았다.
헤엄치면서 나를 끌어가려 하는데 앞으로 가질 않는다.
내가 보드 위에서 물장구를 쳐서 도와드렸다.

나는 첫 번째 구조자였다.
가장 먼저, 가장 멀리 떠내려간 서퍼였던 것이다.
총 9명이 구조되었고 8명은 두 번째 배로 구조되었다.
그 중에는 로컬 서퍼도 한 분 계셨다.
나하고 비슷하거나 더 있어 보이는 분이었는데
다대포에서 활동하시는 로컬 서퍼로써 화가 많이 나보였다.

해양 경찰이 모는 배로 먼 바다를 여행하니 좋았다.
나 말고 모두 기분이 나빠 보였다.
망고서프의 이름을 알리지 않기 위해 서울에서 왔다고 했다.
배에 계신 분들이 친절하게 해주셨고
왜 이 날씨에 바다에 나갔냐고 뭐라 하지 않았다.

다대포항에 도착했는데 해수욕장까지는 직접 가라고 한다.
헐.
우리 모두는 슈트를 입었고 신발도 전화도 없다.
있는 거라곤 거추장스러운 보드뿐!
경찰이 힐링서프에 전화를 해줬고 선생님께서 오셨다.
너무 놀래서 얼굴이 하애지셨다.
회센터 아주머니와 대화 중이던 나는
너무 즐겁게 웃고 하는 바람에 혼났다.
캠프생하고 트립 왔는데.. 그 심정 오죽 했겠는가!

로컬 서퍼분들도 그렇고 선생님도 그렇고
간신히 빠져나왔다고 했다.
평생 이런 조류와 바람은 처음이었다고.
우리가 구조된 이후로 다대포는 임시 폐쇄되었다.

여기서 놀라운 점 하나.
두 시간을 패들링하고 조류와 바람에 시달렸음에도
패들링할 수 있는 힘이 남아 있었다.
패들링은 어꺠로 하는 게 아니라 등으로 하는 거다.

14. 플러터 : 개와 고양이 사진 분류 (케라스) (5)

사과쿵 — Sun, 19 May 2019 12:28:43 +0900

이번 프로젝트는 너무 힘들었기에
문제를 해결하는데 사용했던 몇 가지 함수를 정리한다.
훨씬 더 많은 코드를 만들어서 검증했지만
완성하고 나서 보니 대부분은 의미 없었던 함수였다.

첫 번째는 지정한 사진에 대해 정확도를 보여주는 코드다.
에뮬레이터에서 시험해 보면
결과가 너무 말도 안되게 나와서 어떤 문제인지 먼저 찾아야 했다.
데스크탑에서도 똑같이 말도 안되게 나오는지 확인이 필요했다.

나의 실수로 서로 다른 파일을 사용했던 관계로
데스크탑에서는 결과가 너무 잘 나왔다.
개와 고양이 모델 파일을 여러 개 만드는 과정에서 발생한
말도 안되는 실수로 일 주일은 날려 먹었다.

어쨌든 데스크탑과 스마트폰에서
동일한 결과가 나온다는 것을 검증하는 것은 중요하다.
물론 변환을 거쳤기 때문에 미세한 오차가 발생하는 것은 감안해야 한다.

scaling 옵션에 따라 결과가 다르게 나오는 점도 확인해야 한다.
True 옵션을 사용하는 것이 맞다.

import tensorflow as tf
from PIL import Image
import numpy as np


def load_image(img_path, scaling):
    img = Image.open(img_path)
    img = img.resize([150, 150])
    img.load()
    data = np.float32(img)

    # 스케일링 유무에 따라 결과가 달라진다. 하는 것이 좋은 결과를 만든다.
    # 학습할 때 스케일링을 적용했기 때문에 여기서도 적용하는 것이 맞다.
    if scaling:
        data /= 255
    return data


def predict_model(model_path, images, scaling):
    model = tf.keras.models.load_model(model_path)

    stack = []
    for img_path in images:
        d = load_image(img_path, scaling=scaling)

        d = d[np.newaxis]   # (150, 150, 3) ==> (1, 150, 150, 3)
        stack.append(d)

    # (1, 150, 150, 3)으로 구성된 배열 결합 ==> (4, 150, 150, 3)
    data = np.concatenate(stack, axis=0)

    preds = model.predict(data)
    print(preds.reshape(-1))


images = ['cats_and_dogs/small/test/cats/cat.1500.jpg',
          'cats_and_dogs/small/test/cats/cat.1501.jpg',
          'cats_and_dogs/small/test/dogs/dog.1500.jpg',
          'cats_and_dogs/small/test/dogs/dog.1501.jpg']

predict_model('models/cats_and_dogs_small_4.h5', images, scaling=False)
predict_model('models/cats_and_dogs_small_4.h5', images, scaling=True)
# False : [0. 0. 1. 1.]
# True  : [0.00184013 0.00273606 0.94292957 0.9738878 ]

앞의 코드보다 더 중요한 것이 있다.
같은 모델이라도 변환을 거쳤기 때문에
그 과정에서 원하지 않던 결과가 나올 수도 있다.

스마트폰에 사용한 모델을 데스크탑에서 사용할 수 있으면 좋지 않을까?
그래서 준비했다.
텐서플로 라이트 모델을 데스크탑에서 사용하는 코드.

def test_tflite_model(tflite_path, images):
    interpreter = tf.lite.Interpreter(model_path=tflite_path)
    interpreter.allocate_tensors()

    # 입력 텐서 정보 : 인덱스를 알아야 데이터를 전달할 수 있다.
    input_details = interpreter.get_input_details()
    # [{'name': 'conv2d_60_input', 'index': 3, 'shape': array([  1, 150, 150,   3], dtype=int32),
    #   'dtype': <class 'numpy.float32'>, 'quantization': (0.0, 0)}]

    # 출력 텐서 정보 : 인덱스를 알아야 결과를 받아올 수 있다.
    output_details = interpreter.get_output_details()
    # [{'name': 'dense_41/Sigmoid', 'index': 18, 'shape': array([1, 1], dtype=int32),
    #   'dtype': <class 'numpy.float32'>, 'quantization': (0.0, 0)}]

    result = []
    for img_path in images:
        input_data = load_image(img_path, scaling=True)
        input_data = input_data[np.newaxis]

        # 입력 데이터 전달
        interpreter.set_tensor(input_details[0]['index'], input_data)
        interpreter.invoke()

        # 출력 데이터 읽기
        output_data = interpreter.get_tensor(output_details[0]['index'])
        result.append(output_data)

    # 1차원 변환 출력
    print(np.reshape(result, -1))


# 텐서플로 라이트 모델 경로와 시험할 사진 경로 전달
test_tflite_model('models/cats_and_dogs.tflite', images)

위의 코드는 내가 만든 코드는 아니고 스택 오버플로우를 참고했다.
여기서는 난수를 사용해서 어떤 데이터에 대해서도 동작하도록 처리하고 있다.
더 범용적인 코드라고 보면 된다.
나도 두고두고 봐야 하니까 코드를 붙여넣어 둔다.

How to import the tensorflow lite interpreter in Python?

def test_tflite_model_by_stack_overflow(tflite_path):
    # Load TFLite model and allocate tensors.
    interpreter = tf.contrib.lite.Interpreter(model_path=tflite_path)
    interpreter.allocate_tensors()

    # Get input and output tensors.
    input_details = interpreter.get_input_details()
    output_details = interpreter.get_output_details()

    # Test model on random input data.
    input_shape = input_details[0]['shape']

    # 사진 경로 매개 변수는 없다. 난수로 만들면 되니까. 문법적으로 에러 나지 않는 것만 확인하면 된다.
    input_data = np.array(np.random.random_sample(input_shape), dtype=np.float32)
    interpreter.set_tensor(input_details[0]['index'], input_data)

    interpreter.invoke()
    output_data = interpreter.get_tensor(output_details[0]['index'])
    print(output_data)

13. 플러터 : 개와 고양이 사진 분류 (케라스) (4)

사과쿵 — Thu, 16 May 2019 15:08:12 +0900

이번 프로젝트의 마지막인 안드로이드 부분만 남았다.

6번
파이썬으로 작업한 딥러닝 모델 파일을 추가한다.
MainActivity.java 파일이 포함된 java 프로젝트와 같은 위치에 assets 폴더를 생성하고
cats_and_dogs.tflite 모델 파일을 붙여넣는다.

7번
gradle 파일을 수정한다.
위의 그림에서 profile 폴더 바로 아래 있는 파일이다.
같은 이름이 두 개 있어서 헷갈리기 딱 좋다.

android {
    ...

    // 추가한 부분
    aaptOptions {
        noCompress "tflite"
    }
}

dependencies {
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

    // 추가한 부분
    implementation 'org.tensorflow:tensorflow-lite:+'
}

8번
경로 수신 및 모델 연동 코드를 구현한다.
MainActivity.java 파일을 열고 아래 코드를 붙여넣는다.

package tflite.com.catdog.flutter_catdog;

import android.os.Bundle;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;

import android.app.Activity;
import android.content.res.AssetFileDescriptor;
import android.util.Log;

import java.io.FileInputStream;
import java.nio.MappedByteBuffer;
import java.nio.channels.FileChannel;
import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.ByteOrder;

import org.tensorflow.lite.Interpreter;

// 기본적으로 포함되어 있는 모듈
import io.flutter.app.FlutterActivity;
import io.flutter.plugins.GeneratedPluginRegistrant;

// MethodChannel 관련 모듈 (추가해야 함)
import io.flutter.plugin.common.MethodChannel;
import io.flutter.plugin.common.MethodChannel.MethodCallHandler;
import io.flutter.plugin.common.MethodChannel.Result;
import io.flutter.plugin.common.MethodCall;

public class MainActivity extends FlutterActivity {
    // 채널 문자열. 플러터에 정의한 것과 동일해야 한다.
    private static final String mChannel = "catdog/predict";
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // 빌트인 코드
        super.onCreate(savedInstanceState);
        GeneratedPluginRegistrant.registerWith(this);
        
        // 추가한 함수.
        new MethodChannel(getFlutterView(), mChannel).setMethodCallHandler(
                new MethodCallHandler() {
                    @Override
                    public void onMethodCall(MethodCall call, Result result) {
                        // 각각의 메소드를 switch로 분류. 아이폰에서는 else if 사용.
                        switch (call.method) {
                            case "predictImage":
                                // Map<String, String> args = (HashMap) call.arguments;
                                // String path = args.get("path");
                                String path = call.argument("path");
                                
                                final Bitmap bitmapRaw = BitmapFactory.decodeFile(path);
                                
                                int cx = 150, cy = 150;
                                Bitmap bitmap = Bitmap.createScaledBitmap(bitmapRaw, cx, cy, false);
                                
                                int[] pixels = new int[cx * cy];
                                bitmap.getPixels(pixels, 0, cx, 0, 0, cx, cy);
                                
                                // 두 가지 방법 모두 동작. 입력 텐서는 자료형을 내부적으로 재해석한다.
                                // float[][][][] input_img = getInputImage_1(pixels, cx, cy);
                                ByteBuffer input_img = getInputImage_2(pixels, cx, cy);
                                // float[] input_img = getInputImage_3(pixels, cx, cy);
                                
                                Interpreter tf_lite = getTfliteInterpreter("cats_and_dogs.tflite");
                                
                                float[][] pred = new float[1][1];
                                tf_lite.run(input_img, pred);
                                
                                final String predText = String.format("%f", pred[0][0]);
                                Log.d("예측", predText);
                                result.success(predText);
                                break;
                            default:
                                result.notImplemented();
                        }
                    }
                }
        );
    }
    
    // 입력 이미지와 동일한 형태의 배열 사용
    private float[][][][] getInputImage_1(int[] pixels, int cx, int cy) {
        float[][][][] input_img = new float[1][cx][cy][3];
        
        int k = 0;
        for (int y = 0; y < cy; y++) {
            for (int x = 0; x < cx; x++) {
                int pixel = pixels[k++];        // ARGB : ff4e2a2a
                
                input_img[0][y][x][0] = ((pixel >> 16) & 0xff) / (float) 255;
                input_img[0][y][x][1] = ((pixel >> 8) & 0xff) / (float) 255;
                input_img[0][y][x][2] = ((pixel >> 0) & 0xff) / (float) 255;
            }
        }
        
        return input_img;
    }
    
    // 다루기 편한 1차원 배열 사용
    private ByteBuffer getInputImage_2(int[] pixels, int cx, int cy) {
        ByteBuffer input_img = ByteBuffer.allocateDirect(cx * cy * 3 * 4);
        input_img.order(ByteOrder.nativeOrder());
        
        for (int i = 0; i < cx * cy; i++) {
            int pixel = pixels[i];        // ARGB : ff4e2a2a
            
            input_img.putFloat(((pixel >> 16) & 0xff) / (float) 255);
            input_img.putFloat(((pixel >> 8) & 0xff) / (float) 255);
            input_img.putFloat(((pixel >> 0) & 0xff) / (float) 255);
        }
        
        return input_img;
    }
    
    // 될 것 같지만 되지 않는 코드
    private float[] getInputImage_3(int[] pixels, int cx, int cy) {
        float[] input_img = new float[cx * cy * 3 * 4];
        
        int k = 0;
        for (int i = 0; i < cx * cy; i++) {
            int pixel = pixels[i];        // ARGB : ff4e2a2a
            
            input_img[k++] = ((pixel >> 16) & 0xff) / (float) 255;
            input_img[k++] = ((pixel >> 8) & 0xff) / (float) 255;
            input_img[k++] = ((pixel >> 0) & 0xff) / (float) 255;
        }
        
        return input_img;
    }
    
    // 모델 파일 인터프리터를 생성하는 공통 함수
    // loadModelFile 함수에 예외가 포함되어 있기 때문에 반드시 try, catch 블록이 필요하다.
    private Interpreter getTfliteInterpreter(String modelPath) {
        try {
            return new Interpreter(loadModelFile(MainActivity.this, modelPath));
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }
    
    // 모델을 읽어오는 함수로, 텐서플로 라이트 홈페이지에 있다.
    // MappedByteBuffer 바이트 버퍼를 Interpreter 객체에 전달하면 모델 해석을 할 수 있다.
    private MappedByteBuffer loadModelFile(Activity activity, String modelPath) throws IOException {
        AssetFileDescriptor fileDescriptor = activity.getAssets().openFd(modelPath);
        FileInputStream inputStream = new FileInputStream(fileDescriptor.getFileDescriptor());
        FileChannel fileChannel = inputStream.getChannel();
        long startOffset = fileDescriptor.getStartOffset();
        long declaredLength = fileDescriptor.getDeclaredLength();
        return fileChannel.map(FileChannel.MapMode.READ_ONLY, startOffset, declaredLength);
    }
}

코드를 교체하고 나서 문제가 발생했다면
오른쪽 상단에 있는 Setup SDK 메뉴를 선택해서 해결해야 한다.
아래와 같은 화면이 뜨고 적당한 버전을 선택해서 연결한다.

9번
개와 고양이 사진을 에뮬레이터로 찍기는 어렵다.
안드로이드 폰에 올려서 결과를 볼 수도 있겠지만
여기서는 에뮬레이터로 복사해서 가져다 쓰도록 한다.

[View - Tool Windows - Device File Explorer] 메뉴를 선택한다.
[sdcard - Download] 폴더에서 마우스 오른쪽 버튼을 눌러 업로드를 선택한다.
개와 고양이 폴더에서 각각 2개씩 추가했다.

4장의 사진을 업로드하고 나면 아래와 같이 확인할 수 있다.

이제 모든게 끝났다.
완성을 하지 못해서 계속 비공개로 유지했었다.
마지막으로 우재 폰을 사용해서 카메라 메뉴도 확인했다.
모니터에 있는 개와 고양이 사진을 얼마나 잘 분류하던지..
감동이었다.

일요일 12시 20분.
우재는 곤충 박사님이 부탁한 프로젝트를 하고 있고
서진이는 한동안 잊고 살았던 파이썬을 다시 공부하고 있다.
모두 흥미를 느끼고 있어 좋다.
일요일이 일요일이다.
다만 많이 시끄럽다. ^^

12. 플러터 : 개와 고양이 사진 분류 (케라스) (3)

사과쿵 — Thu, 16 May 2019 14:27:39 +0900

모델 파일은 생성했고
이제 스마트폰에 올릴 코드를 구성하면 된다.
먼저 플러터 코드를 구성하고 다음 글에서 안드로이드 코드를 구현한다.

3번
안드로이드 스튜디오에서 flutter_catdog으로 플러터 프로젝트를 생성한다.
프로젝트 옵션에서는 지금처럼 코틀린 사용은 표시하지 않는다. ^^

4번
pubspec.yaml 파일을 열고 이미지 피커 모듈을 추가한다.
잊지 말고, 상단에 있는 Packages upgrade 메뉴를 눌러 업그레이드를 진행한다.

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  image_picker:

5번
안드로이드와 연동하는 코드를 구현한다.
사진과 카메라 중에서 선택할 수 있고
선택하거나 촬영한 사진으로부터 경로를 가져와서 안드로이드에 전달한다.

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:image_picker/image_picker.dart';  // 이미지 피커

class CatDogNets extends StatefulWidget {
    @override
    CatDogNetsState createState() => CatDogNetsState();
}

class CatDogNetsState extends State<CatDogNets> {
    static const MethodChannel mMethodChannel = MethodChannel('catdog/predict');
    
    String mResult = 'No Photo!';   // 예측 결과를 수신할 문자열
    File mPhoto;                    // 선택 또는 촬영한 사진. ImagePicker 반환값
    
    @override
    Widget build(BuildContext context) {
        Widget photo = (mPhoto != null) ? Image.file(mPhoto) : Placeholder();
        
        return Material(
            child: Column(
                children: <Widget>[
                    Expanded(
                        child: Center(child: photo),
                    ),
                    Row(
                        children: <Widget>[Text(mResult, style: TextStyle(fontSize: 23))],
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    ),
                    Row(
                        children: <Widget>[
                            RaisedButton(
                                child: Text('사진', style: TextStyle(fontSize: 23)),
                                onPressed: () => onPhoto(ImageSource.gallery),
                            ),
                            RaisedButton(
                                child: Text('카메라', style: TextStyle(fontSize: 23)),
                                onPressed: () => onPhoto(ImageSource.camera),
                            ),
                        ],
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    )
                ],
                mainAxisAlignment: MainAxisAlignment.end,
            ),
        );
    }
    
    // 앨범과 카메라 양쪽에서 호출. ImageSource.gallery와 ImageSource.camera 두 가지밖에 없다.
    void onPhoto(ImageSource source) async {
        mPhoto = await ImagePicker.pickImage(source: source);
        
        try {
            var photoPath = <String, String>{'path': mPhoto.path};
            String received = await mMethodChannel.invokeMethod('predictImage', photoPath);

            // 안드로이드로부터 결과 수신하고, 선택한 사진으로 변경
            mResult = received;
            setState(() => {});
        } on PlatformException {}
    }
}

void main() {
    runApp(MaterialApp(home: CatDogNets()));
}