## Table of Contents

# Transfer learning audio recognizer

이번 튜토리얼에서는, Tensorflow.js를 활용하여 브라우저에서 학습시키는 커스텀 오디오 분류기를 만들어 볼 것입니다. 브라우저에서 슬라이더를 컨트롤을 하여 사운드를 만들어 볼 것입니다.

비교적 적은 학습 자료로 짧은 소리를 분류하는 모델을 만들기 위해 전송 학습을 사용할 것입니다. 그리고 음성 명령 인식을 위해 미리 훈련된 모델을 사용할 것입니다, 이 모델 위에 우리가 맞춤형 사운드 클래스를 인식하도록 새로운 모델을 훈련시킬 예정입니다.

## 1. 소개

먼저, 20가지의 음성 명령을 인식할 수 있는 [사전 학습된 모델](https://github.com/tensorflow/tfjs-models/tree/master/speech-commands). 그 다음 마이크를 활용하여, 당신의 목소리를 인식하고, 슬라이더를 좌우로 움직일 수 있게 하는 간단한 신경망을 만들어 볼 것입니다.

이번 학습에서는 음성인식과 관련된 배경지식을 설명하지는 않습니다. 만약 이에 관하여 궁금한 것이 있다면, [이 튜토리얼](https://www.tensorflow.org/tutorials/sequences/audio_recognition)을 참고하시기 바랍니다.

또한 이번 튜토리얼에서 나오는 용어를 모아 머신러닝을 위한 [용어집](https://docs.google.com/document/d/1YcLoCbDFfE6qJGZikBbjfbiI_dG4iETyIBEcS-NQbNE/edit)도 참고하세요.

이번 튜토리얼에서 배울 수 있는 것

- 미리 훈련된 음성 명령 인식 모델을 불러오는 법
- 마이크를 통한 실시간 예측을 하는 방법
- 브라우저의 마이크를 활용해 커스텀 음성 인식 모델을 사용하고 훈련하는 법

## 2. 요구사항

이번 튜토리얼을 마치기 위해서는, 아래와 같은 것들이 필요합니다.

1. 최신버전의 크롬 또는 다른 모던 브라우저
2. 로컬 머신에서 작동할 수 있는 텍스트 편집기 또는, Codepen, Glitch와 같은 툴
3. HTML, CSS, 자바스크립트, Chrome Devtool에 대한 기본적인 지식
4. 신경망에 대한 높은 수준의 이해. 초심자거나 다시 공부가 필요하다면, [3blue1brown](https://www.youtube.com/watch?v=aircAruvnKk)의 영상이나 [이 영상](https://www.youtube.com/watch?v=SV-cgdobtTA)을 참고해주세요.

## 3. Tensorflow.js와 오디오 모델 로딩

`index.html`에 아래 코드를 붙여 넣어주세요.

```html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/speech-commands"></script>
  </head>
  <body>
    <div id="console"></div>
    <script src="index.js"></script>
  </body>
</html>
```

첫번째 스크립트 태그는 Tensorflow.js 라이브러리를 , 두번째 스크립트 태그는 이미 학습된 [음성 명령 모델](https://github.com/tensorflow/tfjs-models/tree/master/speech-commands)을 불러옵니다. `<div id="console">` 는 모델에서의 결과를 표시할 것입니다.

## 4. 실시간 예측

`index.js`를 만들고 연다음에, 아래 코드를 붙여 넣어주세요.

```javascript
let recognizer

function predictWord() {
  // Array of words that the recognizer is trained to recognize.
  const words = recognizer.wordLabels()
  recognizer.listen(
    ({ scores }) => {
      // Turn scores into a list of (score,word) pairs.
      scores = Array.from(scores).map((s, i) => ({ score: s, word: words[i] }))
      // Find the most probable word.
      scores.sort((s1, s2) => s2.score - s1.score)
      document.querySelector('#console').textContent = scores[0].word
    },
    { probabilityThreshold: 0.75 },
  )
}

async function app() {
  recognizer = speechCommands.create('BROWSER_FFT')
  await recognizer.ensureModelLoaded()
  predictWord()
}

app()
```

## 5. 예측을 테스트 해보기

로컬 머신에 마이크가 있는지 확인하세요. 혹시 없다면, 스마트폰에서 열어서 마이크를 사용해도됩니다. 웹페이지에서 실행하기 위해서, 먼저 `index.html`을 브라우저에서 엽니다. 로컬 파일에서 작업중이라면, 마이크에 엑세스 하기 위해서 web server 를 실행 한 다음에 `http://localhost:port/`를 활용하면 됩니다.

8000 port에서 실행하고 싶다면, 파이썬을 활용해도 됩니다.

`python -m SimpleHTTPServer`

처음에 모델을 다운로드 하는데 시간이 좀 걸립니다. 모델이 로딩되면, 페이지 맨 위에 단어 들이 뜨는 것을 볼 수 있을 것입니다. 이 모델은 0~9의 영문 숫자, 그리고 간단한 단어 `left` `right` `yes` `no` 등을 인식할 수 있습니다.

이들 단어중 하나를 말해보세요. 단어를 정확히 인식하나요? `probabilityThreshold`를 조정해서 한번 시험해보세요. 이 변수는 모델이 결과값을 예측하는 정도를 조절해줍니다. 0.75라는 값은 주어진 단어에 대해서 75% 이상의 확률로 확신한다면, 그 결과를 응답한다는 뜻입니다.

음성 인식 모델과 이 API에 대해서 좀더 자세히 알고 싶다면, Github의 [README.md](https://github.com/tensorflow/tfjs-models/blob/master/speech-commands/README.md)를 참고해보세요.

## 6. 데이터 수집

더 흥미롭게 만들어 봅시다. 슬라이더를 컨트롤 하기 위해, 모든 단어를 인식하는 대신 짧은 단어만 활용해봅시다.

우리는 세가지 명령어 - `left` `right` `noise` 만 인식하도록 훈련 시켜 볼 것입니다. 이 단어로 슬라이더를 움직여 볼 것입니다. `Noise`는 음성인식에서 인식하게 될 중요한 단어인데, 그 이유는 우리는 슬라이더가 올바른 사운드에만 반응하기를 원하기 때문입니다. 우리가 일반적으로 말하는 단어로 말할 때는 움직여서는 안됩니다.

1. 먼저 데이터를 수집해야 합니다. `<body/>` 태그에 원래 있던 `<div id="console"/>` 대신 아래 코드를 붙여 넣습니다.

```html
<button id="left" onmousedown="collect(0)" onmouseup="collect(null)">
  Left
</button>
<button id="right" onmousedown="collect(1)" onmouseup="collect(null)">
  Right
</button>
<button id="noise" onmousedown="collect(2)" onmouseup="collect(null)">
  Noise
</button>
```

2. 아래 코드를 `index.js`에 붙여넣습니다.

```javascript
// One frame is ~23ms of audio.
const NUM_FRAMES = 3
let examples = []

function collect(label) {
  if (recognizer.isListening()) {
    return recognizer.stopListening()
  }
  if (label == null) {
    return
  }
  recognizer.listen(
    async ({ spectrogram: { frameSize, data } }) => {
      let vals = normalize(data.subarray(-frameSize * NUM_FRAMES))
      examples.push({ vals, label })
      document.querySelector(
        '#console',
      ).textContent = `${examples.length} examples collected`
    },
    {
      overlapFactor: 0.999,
      includeSpectrogram: true,
      invokeCallbackOnNoiseAndUnknown: true,
    },
  )
}

function normalize(x) {
  const mean = -100
  const std = 10
  return x.map((x) => (x - mean) / std)
}
```

3. `app()`에서 `predictWord()`를 지우고 아래 코드를 붙여넣습니다.

### 코드를 자세히 보기

우리는 Left, Right, Noise라고 이름 붙인 세가지 버튼을 추가했습니다. 이 셋은, 우리 모델이 인식하기를 바라는 각각의 음성 명령입니다. 이 버튼을 누르면, 새롭게 추가한 `collect()` 함수를 실행하는데, 이 함수는 우리 모델에 훈련용 샘플을 만들어 줍니다.

`collect()`는 `recognizer.listen()`의 결과물인 `label` 과 연관 이 있습니다. `includeSpectrogram`가 true라면, `recognizer.listen()`는 1초의 오디오를 43개의 프레임으로 나눈 음성 데이터를 보내는데, 이는 각 프레임당 23ms 의 오디오 정보를 가지고 있습니다.

```javascript
recognizer.listen(async ({spectrogram: {frameSize, data}}) => {
...
}, {includeSpectrogram: true});
```

우리는 슬라이더를 컨트롤 하기 위해 짧은 단어만 필요하므로, 3개의 프레임 (70ms)만 취할 것입니다.

```javascript
let vals = normalize(data.subarray(-frameSize * NUM_FRAMES))
```

숫자 관련 이슈를 피하기 위해, 데이터를 평균 0, 분산 1인 데이터로 정규화 할 것입니다.이 경우, 음성은 -100 언저리의, 표준편차 10의 데이터로 구성되어 있습니다.

```javascript
const mean = -100
const std = 10
return x.map((x) => (x - mean) / std)
```

결국엔, 훈련 예제에는 두가지 필드만 남습니다.

- label: 0, 1, 2는 각각 left, right, nosie를 나타냅니다.
- vals: 음성정보를 가지고 있는 696개의 숫자

그리고 우리는 이 데이터를 모두 `examples`에 보관합니다.

```javascript
examples.push({ vals, label })
```

## 7. 수집한 데이터 테스트

각각의 예제 별로 데이터를 수집하기 위해, 각 버튼을 3~4초간 누르면서 반복적으로 음성을 제공합니다. 각 레이블 별로 150개 정도의 예제가 필요합니다. 예를 들어, `left`는 손가락 스냅소리, 휘파람은 `right`, 그 외의 침묵이나 대화 소리는 `Noise`로 할 수 있을 것입니다.

예제 데이터를 모은다면, 페이지 상단에 카운터가 뜰 것입니다. console.log()를 활용해 examples에 어떤 변수들이 담기는지 살펴보세요. 이 시점에서 목표는, 데이터 수집 프로세스를 테스트 하는 것입니다. 나중에, 전체 앱을 테스트 할 때 이 데이터를 다시 볼 것입니다.

## 8. 모델 훈련시키기

1. `index.html`에 `Noise` 버튼 하단에 아래 버튼을 추가하세요.

```html
<br /><br />
<button id="train" onclick="train()">Train</button>
```

2. 아래 코드를 index.js에 추가하세요.

```javascript
const INPUT_SHAPE = [NUM_FRAMES, 232, 1]
let model

async function train() {
  toggleButtons(false)
  const ys = tf.oneHot(
    examples.map((e) => e.label),
    3,
  )
  const xsShape = [examples.length, ...INPUT_SHAPE]
  const xs = tf.tensor(flatten(examples.map((e) => e.vals)), xsShape)

  await model.fit(xs, ys, {
    batchSize: 16,
    epochs: 10,
    callbacks: {
      onEpochEnd: (epoch, logs) => {
        document.querySelector('#console').textContent = `Accuracy: ${(
          logs.acc * 100
        ).toFixed(1)}% Epoch: ${epoch + 1}`
      },
    },
  })
  tf.dispose([xs, ys])
  toggleButtons(true)
}

function buildModel() {
  model = tf.sequential()
  model.add(
    tf.layers.depthwiseConv2d({
      depthMultiplier: 8,
      kernelSize: [NUM_FRAMES, 3],
      activation: 'relu',
      inputShape: INPUT_SHAPE,
    }),
  )
  model.add(tf.layers.maxPooling2d({ poolSize: [1, 2], strides: [2, 2] }))
  model.add(tf.layers.flatten())
  model.add(tf.layers.dense({ units: 3, activation: 'softmax' }))
  const optimizer = tf.train.adam(0.01)
  model.compile({
    optimizer,
    loss: 'categoricalCrossentropy',
    metrics: ['accuracy'],
  })
}

function toggleButtons(enable) {
  document.querySelectorAll('button').forEach((b) => (b.disabled = !enable))
}

function flatten(tensors) {
  const size = tensors[0].length
  const result = new Float32Array(tensors.length * size)
  tensors.forEach((arr, i) => result.set(arr, i * size))
  return result
}
```

3. 앱을 로드할 때 `buildModel()`을 호출하세요.

```javascript
async function app() {
  recognizer = speechCommands.create('BROWSER_FFT')
  await recognizer.ensureModelLoaded()
  // Add this line.
  buildModel()
}
```

앱을 새로고침 한다면, `Train` 버튼이 나타날 것입니다. 이 버튼을 클릭하면 데이터를 다시 수집해서 테스트하거나, 10 단계 까지 기다렸다가 예측과 함께 학습된 내용을 테스트 해볼 수 있습니다.

### 코드 살펴보기

여기에서는 크게 두가지 함수가 있습니다. `buildModel()`은 모델 아키텍쳐를 정의하고, `train()`은 수집한 데이터로 모델을 훈련 시킵니다.

#### 모델 아키텍쳐

이 모델에는 4개의 레이어가 있습니다. 음성데이터를 처리하기 위한 합성곱 레이어, max-pool layer, flatten layer, 그리고 3개의 레이어를 연결해주는 dense layer가 있습니다.

```javascript
model = tf.sequential()
model.add(
  tf.layers.depthwiseConv2d({
    depthMultiplier: 8,
    kernelSize: [NUM_FRAMES, 3],
    activation: 'relu',
    inputShape: INPUT_SHAPE,
  }),
)
model.add(tf.layers.maxPooling2d({ poolSize: [1, 2], strides: [2, 2] }))
model.add(tf.layers.flatten())
model.add(tf.layers.dense({ units: 3, activation: 'softmax' }))
```

input 모델의 형태는 `[NUM_FRAMES, 232, 1]`입니다. 이는 각 프레임이 23의 오디오를 갖고 있으며, 또 이들은 각각 232개의 서로 다른 진동수를 포함하고 있습니다. (232인 이유는, 사람의 목소리를 인식하는데 필요한 frequency의 양입니다) 이번 코드랩에서는, 단어 전체를 말하는 대신 소리를 만들기 때문에 3프레임 짜리 (~70ms) 샘플을 사용하고 있습니다.

모델을 훈련시키기 위해 모델을 컴파일 합니다.

```javascript
const optimizer = tf.train.adam(0.01)
model.compile({
  optimizer,
  loss: 'categoricalCrossentropy',
  metrics: ['accuracy'],
})
```

여기에서는 [아담](https://arxiv.org/abs/1412.6980)을 사용했는데, 이는 딥러닝에서 가장 자주 사용되는 보편적인 옵티마이저입니다. loss와 분류를 위한 손실함수에는 `categoricalCrossEntropy`를 사용했습니다. 간단하게 말해, 이 방법론은 예측값이 어느정도의 확률로 나오는지 (각 클래스당)를 계싼하며, 100%~0%의 값으로 나옵니다. 여기에 또한 metric을 모니터링 하기 위해 `accuracy`를 변수로 넘겨주었습니다. 이는 각각의 모델들이 훈련을 거치면서 몇퍼센트의 정확도를 갖게 되는지 알려 줄 것입니다.

#### 학습

학습은 모든 데이터를 총 1회 하며, 배치사이즈는 16이고, 현재의 정확도가 화면상에 나타날 것입니다.

```javascript
await model.fit(xs, ys, {
  batchSize: 16,
  epochs: 10,
  callbacks: {
    onEpochEnd: (epoch, logs) => {
      document.querySelector('#console').textContent = `Accuracy: ${(
        logs.acc * 100
      ).toFixed(1)}% Epoch: ${epoch + 1}`
    },
  },
})
```

## 9. 슬라이더를 실시간으로 움직이기

이제 우리 모델을 훈련시킬 수 있으니, 실시간으로 예측하고 슬라이더를 움직이는 코드를 추가합니다. `Train` 버튼 바로 밑에 아래 코드를 추가해주세요.

```html
<br /><br />
<button id="listen" onclick="listen()">Listen</button>
<input type="range" id="output" min="0" max="10" step="0.1" />
```

그리고 아래 코드를 `index.js`에 추가해주세요.

```javascript
async function moveSlider(labelTensor) {
  const label = (await labelTensor.data())[0]
  document.getElementById('console').textContent = label
  if (label == 2) {
    return
  }
  let delta = 0.1
  const prevValue = +document.getElementById('output').value
  document.getElementById('output').value =
    prevValue + (label === 0 ? -delta : delta)
}

function listen() {
  if (recognizer.isListening()) {
    recognizer.stopListening()
    toggleButtons(true)
    document.getElementById('listen').textContent = 'Listen'
    return
  }
  toggleButtons(false)
  document.getElementById('listen').textContent = 'Stop'
  document.getElementById('listen').disabled = false

  recognizer.listen(
    async ({ spectrogram: { frameSize, data } }) => {
      const vals = normalize(data.subarray(-frameSize * NUM_FRAMES))
      const input = tf.tensor(vals, [1, ...INPUT_SHAPE])
      const probs = model.predict(input)
      const predLabel = probs.argMax(1)
      await moveSlider(predLabel)
      tf.dispose([input, probs, predLabel])
    },
    {
      overlapFactor: 0.999,
      includeSpectrogram: true,
      invokeCallbackOnNoiseAndUnknown: true,
    },
  )
}
```

### 코드 살펴보기

#### 실시간 예측

`listen()` 함수는 마이크를 득고 실시간으로 예측하는 역할을 합니다. 이 코드는 `collect()`와 굉장히 유사합니다. 유일한 차이점은, 학습된 모델을 바탕으로 예측을 한다는 점입니다.

```javascript
const probs = model.predict(input)
const predLabel = probs.argMax(1)
await moveSlider(predLabel)
```

결과물인 `model.predict(input)`는 `[1, numClasses]`의 형태를 가지고 있습니다. 이는 클래스에 대한 각 확률 분포를 표현합니다. 더 간단히 말하자면, 이는 합계가 1인 각 출력 클래스에 대한 신뢰도 일 뿐입니다. 텐서는 단일크기이기 때문에 1의 합계를 가집니다.

확룰 분포를 가장 가능성이 높은 클래스를 나타내는 단일 정수로 변환하기 위해서는, `probs.argMax(1)`를 호출해야되는데, 이는 가장 확류이 높은 클래스의 index를 보여줍니다.

#### 슬라이더 움직이기

`moveSlider()` 함수는 만약 레이블이 0이라면 왼쪽으로, 1이라면 오른쪽으로, 2라면 움직이지 않습니다.

#### Disposing tensors

GPU 메모리를 정리하기 위해서, `tf.dispose()`함수를 호출하는 굉장히 중요합니다. 이 함수 대신 `tf.tidy()`를 사용하는 방법도 있습니다만, 이는 async 함수로 사용할 수 없습니다.

```javascript
tf.dispose([input, probs, predLabel])
```

## 10. 최종 결과물 확인

브라우저에서 index.html을 열고, 이전 섹션에서 처럼 3개의 명령에 해당하는 각각의 버튼을 활용해서 데이터를 수집합니다. 데이터를 수집하기 위해서는 각 버튼을 3~4초를 누른 채 유지해야 합니다.

샘플을 수집한 뒤에는, 학습 버튼을 누릅니다. 이 후에 모델이 학습하기 시작하며, 정확도가 90% 이상까지 향상될 것입니다. 모델 성능이 좋지 못하다면, 더 많은 데이터를 수집하세요.

학습이 끝나면, '듣기' 버튼을 눌러 마이크를 활용해 슬라이더를 제어하세요.

더많은 예제를 http://js.tensorflow.org/ 에서 확인하세요.


```toc tight: true, from-heading: 1 to-heading: 3 ``` # Transfer learning audio recognizer  이번 튜토리얼에서는, Tensorflow.js를 활용하여 브라우저에서 학습시키는 커스텀 오디오 분류기를 만들어 볼 것입니다. 브라우저에서 슬라이더를 컨트롤을 하여 사운드를 만들어 볼 것입니다....

Tensorflow.js - 08. Build an audio recognizer

## Table of Contents

# Transfer learning image classifier

본 튜토리얼에서는, 브라우저 환경에서 Tesnorflow.js를 활용하여 커스텀 이미지 분류기를 만드는 방법을 알아봅니다.

이번 장에서는, 최소한의 데이터를 활용하여 높은 정확도를 가진 모델을 만들기 위하여 transfer learning(전이학습)을 활용해볼 것입니다. 우리는 이미 잘 학습되어 있는 MobileNet이라고 불리우는 이미지 분류기를 활용할 것입니다. 이 모델을 기반으로, 이미지 클래스를 사용자 정의 하여 학습해볼 것입니다.

## 1. Introduction

이번 튜토리얼에서는, 간단한 [teachable machine](https://teachablemachine.withgoogle.com/)을 만들어 볼 것입니다. teachable machine이란, 자바스크립트로 작성된 유연하고도 강력한 머신러닝 라이브러리인 tensorflow.js를 활용하여 브라우저에서 작동할 수 있는 커스텀 이미지 분류기 입니다. 먼저 MobileNet이라고 불리우는 모델을 브라우저 환경에서 불러오고 실행해볼 것입니다. 그 다음에는 전이학습을 활용하여 이미 학습된 MobileNet 모델을 커스터마이징하고 우리의 앱에서 실행할 수 있도록 할 것입니다.

이 튜토리얼에서는 teachable machine 애플리케이션을 만드는데 필요한 이론적 배경을 소개하지는 않습니다. 만약 궁금하다면, [이 튜토리얼](https://beta.observablehq.com/@nsthorat/how-to-build-a-teachable-machine-with-tensorflow-js)을 참고하시기 바랍니다.

### 배우게 될 것

- 이미 학습된 MobileNet 모델을 불러오고 새로운 데이터로 예측하는 방법
- 웹캠을 활용하여 예측하는 법
- MobileNet을 즉시 활성화하여, 웹캠에서 인식된 이미지를 분류하는 법

## 2. 요구 사항

1. 최신버전의 크롬 또는 모던 브라우저
2. 로컬 머신에서 실행할 수 있는 텍스트 에디터, 혹은 웹에서 이용할 수 있는 Codepen이나 Glitch
3. HTML, CSS, Javascript, Chrome Devtool에 대하한 기본적인 지식
4. 신경망에 대한 높은 수준의 이해. 만약 이에 관련된 지식이 필요하다면, [3blue1brown](https://www.youtube.com/watch?v=aircAruvnKk)이나 [video on Deep Learning in Javascript by Ashi Krishnan](https://www.youtube.com/watch?v=SV-cgdobtTA)를 보는 것을 추천합니다.

## 3. Tensorflow.js와 MobileNet 불러오기

index.html을 열고 아래 코드를 넣어주세요.

```html
<html>
  <head>
    
    <script src="https://unpkg.com/@tensorflow/tfjs"></script>
    <script src="https://unpkg.com/@tensorflow-models/mobilenet"></script>
  </head>
  <body>
    <div id="console"></div>
    
    <img
      id="img"
      crossorigin
      src="https://i.imgur.com/JlUvsxa.jpg"
      width="227"
      height="227"
    />
    
    <script src="index.js"></script>
  </body>
</html>
```

## 4. 브라우저에서 MobileNet을 로딩

`index.js`를만들고 연다음에, 아래 코드를 넣어주세요.

```javascript
let net

async function app() {
  console.log('Loading mobilenet..')

  // Load the model.
  net = await mobilenet.load()
  console.log('Successfully loaded model')

  // Make a prediction through the model on our image.
  const imgEl = document.getElementById('img')
  const result = await net.classify(imgEl)
  console.log(result)
}

app()
```

## 5. MobileNet을 테스트 하기

index.html을 웹브라우저에서 열어보세요.

자바스크립트 콘솔에, 사진의 강아지가 어떤 강아지인지 예측한 작업내역을 볼 수 있습니다. 이 작업은 모델을 다운로드 하는데 시간이 약간의 시간이 걸릴 수 있으므로 조금 기다리시기 바랍니다.

```json
[
  { "className": "kelpie", "probability": 0.5226836204528809 },
  {
    "className": "American Staffordshire terrier, Staffordshire terrier, American pit bull terrier, pit bull terrier",
    "probability": 0.1948588341474533
  },
  { "className": "malinois", "probability": 0.11830379068851471 }
]
```

## 6. 브라우저에서 웹캠을 활용하여 MobileNet 모델을 실행하기

지금부터는 좀 더 실시간 데이터를 다뤄보도록 하겠습니다. 웹캠으로 부터 넘어온 이미지를 바탕으로 예측을 할 수 있도록 작업해보겠습니다.

먼저, 웹캠을 video element에 설정해보겠습니다. `index.html` 파일을 열어, `body` 에 아래 코드를 넣고, 강아지 이미지 로딩을 위해 사용했던 `img` 태그를 삭제하세요.

```html
<video autoplay playsinline muted id="webcam" width="224" height="224"></video>
```

`index.js`를 열고 파일의 최상단에 위 코드를 넣어주세요.

```javascript
const webcamElement = document.getElementById('webcam')
```

이제 `app()` function 내부에서, 이미지를 기반으로한 예측을 제거하고 대신 웹캠 엘리먼트를 통해 예측을 하는 무한루프 로직을 만들 수 있습니다.

```javascript
async function app() {
  console.log('Loading mobilenet..')

  // Load the model.
  net = await mobilenet.load()
  console.log('Successfully loaded model')

  // Create an object from Tensorflow.js data API which could capture image
  // from the web camera as Tensor.
  const webcam = await tf.data.webcam(webcamElement)
  while (true) {
    const img = await webcam.capture()
    const result = await net.classify(img)

    document.getElementById('console').innerText = `
      prediction: ${result[0].className}\n
      probability: ${result[0].probability}
    `
    // Dispose the tensor to release the memory.
    img.dispose()

    // Give some breathing room by waiting for the next animation frame to
    // fire.
    await tf.nextFrame()
  }
}
```

웹페이지에서 콘솔창을 열어본다면, MobileNet에서 웹캠의 매 프레임을 바탕으로 예측한 결과를 볼수 있을 것입니다.

그러나 이는 ImageNet의 데이터 세트가 일반적으로 웹캠에 나타나는 이미지와 매우 많이 다르기 때문에 정확하지 않을 수 있습니다. 이것을 테스트 해보는 한가지 방법은, 노트북 카메라 (웹캠)에 강아지 사진이 있는 폰을 비추는 것입니다.

## 7. MobileNet에 Custom 분류기를 추가하기

이제, 조금 더 유용하게 만들어 봅시다. 우리는 웹캠을 활용하여 3개의 object로 분류하는 분류기를 만들어 볼 것입니다. 분류를 위해서 MobileNet을 활용할 것입니다만, 이번에는 특정 웹캠 이미지에 대한 모델의 내부활성화를 활용하여, (internal representation, activation) 분류에 사용해 볼 것입니다.

여기에서는 "K-Nearest Neighbors Classifier"라고 불리는 모듈을 사용할 것입니다. 이는 웹캠에서 입력되는 이미지를 서로다른 카테고리로 효과적으로 분리해주며, 사용자가 예측을 시도할 때 단순히 가장 확률이 높은 결과 하나만 리턴하게 할 것입니다.

KNN Classifier를 index.html의 head 태그 마지막에 import 하세요.

```html
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/knn-classifier"></script>
```

index.html의 마지막에 세개의 버튼을 추가합니다. 각각의 버튼들은 이미지를 모델에서 훈련시키는데 사용됩니다.

```html
<button id="class-a">Add A</button>
<button id="class-b">Add B</button>
<button id="class-c">Add C</button>
```

`index.js`의 최상단에서는 classifier를 선언합니다.

```javascript
const classifier = knnClassifier.create()
```

app 함수를 업데이트 합니다.

```javascript
async function app() {
  console.log('Loading mobilenet..')

  // 모델을 로드한다.
  net = await mobilenet.load()
  console.log('Successfully loaded model')

  // 웹캠의 데이터를 tensor로 변환하는 tensorflwjs api를 만든다.
  const webcam = await tf.data.webcam(webcamElement)

  // 웹캠에서 이미지를 로딩하고, 특정 클래스와 연관짓는다.
  const addExample = async (classId) => {
    // Capture an image from the web camera.
    const img = await webcam.capture()

    // conv_preds라는 활성함수를 가져오고, KNN 분류기에 넘긴다.
    const activation = net.infer(img, 'conv_preds')

    // 중간 활성화 함수를 분류기에 넘긴다.
    classifier.addExample(activation, classId)

    // tensor를 메모리에 dispose 한다.
    img.dispose()
  }

  // 버튼을 클릭하면, 각 클래스별로 예제를 추가한다.
  document
    .getElementById('class-a')
    .addEventListener('click', () => addExample(0))
  document
    .getElementById('class-b')
    .addEventListener('click', () => addExample(1))
  document
    .getElementById('class-c')
    .addEventListener('click', () => addExample(2))

  while (true) {
    if (classifier.getNumClasses() > 0) {
      const img = await webcam.capture()

      // 웹켐의 mobilnet의 활성함수를 가져온다.
      const activation = net.infer(img, 'conv_preds')
      // 분류기에서 가장 근접한 결과를 가져온다.
      const result = await classifier.predictClass(activation)

      const classes = ['A', 'B', 'C']
      document.getElementById('console').innerText = `
        prediction: ${classes[result.label]}\n
        probability: ${result.confidences[result.label]}
      `

      img.dispose()
    }

    await tf.nextFrame()
  }
}
```

이제 index.html 페이지를 로드 하면, 세 클래스에 각각에 대한 이미 캡처를 하기 위하여 공통 오브젝트를 사용하거나, 얼굴/바디 제스쳐를 활용할 수 있다. `add` 버튼을 클릭할 때마다, 하나의 이미지가 예제로서 해당 클래스에 추가됩니다. 이작업을 하는 동안, 모델은 웹캠 이미지에 대한 예측을 계속하고 결과를 실시간으로 보여줍니다.

## 8. Optional: 예제를 확장하기

이제 아무 동작도 나타내지 않는 클래스를 추가해 보세요.

## 9. 우리가 배운 것

이 예제에서, Tensorflow.js를 활용하여 간단한 머신러닝 학습 웹 애플리케이션을 구현했습니다. 웹캠에서 이미지를 분류하기 위해 미리 학습된 MobileNet 모델을 로드하고 사용했습니다. 그런 다음 모델을 커스텀하여 이미지를 세가지 사용자 정의 범주로 분류합니다.

[예제](https://codesandbox.io/s/tensorflowjs-07-build-an-image-classifier-28kc5)

`toc tight: true, from-heading: 1 to-heading: 3 ` # Transfer learning image classifier 본 튜토리얼에서는, 브라우저 환경에서 Tesnorflow.js를 활용하여 커스텀 이미지 분류기를 만드는 방법을 알아봅니다. 이번 장에서는, 최소한의 데이터를 활용하여 높은 정확도를 가진 모델...

Tensorflow.js - 07. Build an image classifier

# 전이 학습이란 무엇인가?

정교한 딥러닝 모델은 수백만개의 파라미터 (가중치)를 가지고 있으며, 이를 처음 부터 훈련하려면 엄청난 양의 컴퓨팅 자원이 필요한 경우가 많습니다. 전이학습은, 이미 관련된 작업에 대해 훈련받은 모델의 한 부분을 취해서, 새로운 모델에서 이를 재사용함으로써 이러한 컴퓨팅 자원의 소모를 단축시키는 기술입니다.

예를 들어, 다음 튜토리얼은 이미 이미지내에서 1000 여가지의 다른 종류의 이미지를 인식하도록 훈련된 모델을 활용해, 자신만의 인식기를 만드는 방법을 보여줍니다. 사전에 학습된 모델의 기존의 지식을 활용하여, 원래 그 모델이 썼던것 보다 훨씬 더 적은 학습용 데이터를 활용하여, 자신만의 이미지를 인식하도록 할 수 있습니다.

이는 브라우저나 모바일과 같은 리소스가 제약되어 있는 환경에서 모델을 커스터마이징 하는 것 뿐만 아니라, 새로운 모델을 빠르게 개발하는데에도 굉장히 유용합니다.

전이학습을 할 때, 보통 원래 모델의 가중치를 조정하지 않습니다. 대신, 우리는 최종 레이어를 제거하여, 이렇게 잘린 모델의 출력위에 새로운 (얇은) 모델을 학습시킵니다. 그리고 이 기법은 다음 두 튜토리얼에서 진행할 것입니다.

- [Build a transfer-learning based image classifier](/2020/01/tensorflowjs-07-build-an-image-classifier/) [원문](https://www.tensorflow.org/js/tutorials/transfer/image_classification)
- [Build a transfer-learning based audio recognizer](/2020/01/tensorflowjs-08-build-an-audio-recognizer/) [원문](https://www.tensorflow.org/js/tutorials/transfer/audio_recognizer)


`toc tight: true, from-heading: 1 to-heading: 3 ` # 전이 학습이란 무엇인가? 정교한 딥러닝 모델은 수백만개의 파라미터 (가중치)를 가지고 있으며, 이를 처음 부터 훈련하려면 엄청난 양의 컴퓨팅 자원이 필요한 경우가 많습니다. 전이학습은, 이미 관련된 작업에 대해 훈련받은 모델의 한 부분을 취해서, 새로운 ...

Tensorflow.js - 06. What is Transfer Learning

## Table of Contents

# Training and Prediction in Node.js

본 튜토리얼에서는 MLBAM에서 제공하는 피쳐 센서 데이터를 바탕으로, 야구의 칭 유형을 추측하는 모델을 만들어볼 예정입니다. 이 튜토리얼은 서버사이드 애플리케이션인 Node.js에서 진행될 예정입니다.

이 튜토리얼에서는 `tfjs-node`를 서버사이드에서 npm package로 설치하고, 모델을 만든 다음, 실제로 피치 센서 데이터로 훈련까지 진행해 볼 것입니다. 또한 학습 진행 상태를 클라이언트에 제공하고, 훈련된 모델을 바탕으로 예측하는 서버/클라이언트 아키텍쳐도 만들어 볼 것입니다.

## 1. 소개

이 시간에는 강력하고 유연한 자바스크립트 머신러닝 라이브러리인 Tensorflow.js를 활용하여, 서버에서 야구 피치 유형을 학습하고 분류하는 방법을 배우게 됩니다. 피치 센서 데이터에서 미치 유형을 예측하고, 웹 클라이언트에서 예측을 호출하는 모델을 가진 웹 애플리케이션을 만들어볼 것입니다. 이 코드의 완전 버전은 [Github Repo](https://github.com/tensorflow/tfjs-examples/tree/master/baseball-node)에 있습니다.

배우게 될 것

- Nodejs를 활용하여 npm package로 tensorflow.js를 설치하는 법
- Nodejs 환경에서 데이터를 학습시키고 테스트 하는법
- Nodejs 서버에서 Tensorflowjs에서 모델을 훈련시키는 법
- 학습된 모델을 배포해서 클라이언트/서버 애플리케이션에서 작동시키는 법

## 2. 요구 사항

본 튜토리얼을 완료하기 위해서는

- 최신버전의 크롬 또는 다른 모던 브라우저
- 텍스트 에디터와 로컬 머신에서 실행하기 위한 커맨드 터미널
- HTML, CSS, Javascript, Chrome Devtool에 대한 기본적인 지식
- 신경망에 대한 높은 수준의 개념적 이해. 혹시 학습이 필요하다면, 이 두 비디오 [1](https://www.youtube.com/watch?v=aircAruvnKk) [2](https://www.youtube.com/watch?v=SV-cgdobtTA)를 보는 것을 추천합니다.

## 3. Nodejs.app 설치

Nodejs와 npm을 설치합니다. 지원하는 플랫폼과 디펜던시를 확인하기 위해서는, [tfjs-node 설치가이드](https://github.com/tensorflow/tfjs-node/blob/master/README.md)를 참고해주세요.

Nodejs app을 설치하기 위한`./baseball` 폴더를 만듭니다. 이 두개의 링크 [package.json](https://github.com/tensorflow/tfjs-examples/blob/master/baseball-node/package.json) [webpack.config.js](https://github.com/tensorflow/tfjs-examples/blob/master/baseball-node/webpack.config.js) 를 다운받고 해당 폴더에 복사하여
npm package dependency를 설정해주세요. 그리고 `npm install` 명령어를 이용하여 디펜던시를 설치합니다.

> tfjs-node의 링크가 [여기](https://github.com/tensorflow/tfjs/tree/master/tfjs-node) 로 변경되었습니다.

```shell
$ cd baseball
$ ls
package.json  webpack.config.js
$ npm install
...
$ ls
node_modules  package.json  package-lock.json  webpack.config.js
```

이제 코드를 작성하고 모델을 훈련시킬 준비가 되었습니다.

## 4. 학습/테스트용 데이터 설치하기

아래 하단에 있는 두 링크의 데이터를 활용해 학습과 테스트를 할 거십니다. 두 파일을 다운받아서 살펴보세요.

[pitch_type_training_data.csv](https://storage.googleapis.com/mlb-pitch-data/pitch_type_training_data.csv)

[https://storage.googleapis.com/mlb-pitch-data/pitch_type_test_data.csv](https://storage.googleapis.com/mlb-pitch-data/pitch_type_test_data.csv)

학습용 데이터를 살펴봅시다.

```
vx0,vy0,vz0,ax,ay,az,start_speed,left_handed_pitcher,pitch_code
7.69914900671662,-132.225686405648,-6.58357157666866,-22.5082591074995,28.3119270826735,-16.5850095967027,91.1,0,0
6.68052308575228,-134.215511616881,-6.35565979491619,-19.6602769147989,26.7031848314466,-14.3430602022656,92.4,0,0
2.56546504690782,-135.398673977074,-2.91657310799559,-14.7849950586111,27.8083916890792,-21.5737737390901,93.1,0,0
```

이 데이터에는 8개의 정보가 있습니다.

- 공의 속도 (vx0, vy0, vz0)
- 공의 가속 (ax, ay, az)
- 시구 속도 (starting speed of pitch) (이게 정확한 번역이 맞나...)
- 투수가 좌투인지 여부

그리고 결과 정보엔 아래와 같이 나옵니다.

- 7개의 구질 중 하나의 값

```
Fastball (2-seam), Fastball (4-seam), Fastball (sinker), Fastball (cutter), Slider, Changeup, Curveball
```

우리의 목표는 주어진 투구 센서 데이터로 어떤 구질인지 맞추는 모델을 만드는 것입니다.

모델을 만들기전에, 학습 데이터와 테스트 데이터를 준비해야 합니다. `./baseball` 에 `pitch_type.js` 파일을 생성한 후, 아래의 코드를 복사해서 넣어주셋요. 이 코드는 [tf.data.csv](https://js.tensorflow.org/api/latest/#data.csv)를 활용하여 데이터를 로딩합니다. 또한 데이터를 min-maxn normalization을 통해 정규화합니다. (항상 하기를 추천합니다)

```javascript
const tf = require('@tensorflow/tfjs')

// 주어진 값 사이로 정규화 하는 함수
function normalize(value, min, max) {
  if (min === undefined || max === undefined) {
    return value
  }
  return (value - min) / (max - min)
}

// 데이터는 URL또는 로컬 파일로 로딩가능
const TRAIN_DATA_PATH =
  'https://storage.googleapis.com/mlb-pitch-data/pitch_type_training_data.csv'
const TEST_DATA_PATH =
  'https://storage.googleapis.com/mlb-pitch-data/pitch_type_test_data.csv'

// 데이터 학습을 위한 상수
const VX0_MIN = -18.885
const VX0_MAX = 18.065
const VY0_MIN = -152.463
const VY0_MAX = -86.374
const VZ0_MIN = -15.5146078412997
const VZ0_MAX = 9.974
const AX_MIN = -48.0287647107959
const AX_MAX = 30.592
const AY_MIN = 9.397
const AY_MAX = 49.18
const AZ_MIN = -49.339
const AZ_MAX = 2.95522851438373
const START_SPEED_MIN = 59
const START_SPEED_MAX = 104.4

const NUM_PITCH_CLASSES = 7
const TRAINING_DATA_LENGTH = 7000
const TEST_DATA_LENGTH = 700

// csv 데이터를 features와 labels로 변환함
// 각 feature 필드는 위에서 선언한 상수를 기반으로 정규화 됨
const csvTransform = ({ xs, ys }) => {
  const values = [
    normalize(xs.vx0, VX0_MIN, VX0_MAX),
    normalize(xs.vy0, VY0_MIN, VY0_MAX),
    normalize(xs.vz0, VZ0_MIN, VZ0_MAX),
    normalize(xs.ax, AX_MIN, AX_MAX),
    normalize(xs.ay, AY_MIN, AY_MAX),
    normalize(xs.az, AZ_MIN, AZ_MAX),
    normalize(xs.start_speed, START_SPEED_MIN, START_SPEED_MAX),
    xs.left_handed_pitcher,
  ]
  return { xs: values, ys: ys.pitch_code }
}

const trainingData = tf.data
  .csv(TRAIN_DATA_PATH, { columnConfigs: { pitch_code: { isLabel: true } } })
  .map(csvTransform)
  .shuffle(TRAINING_DATA_LENGTH)
  .batch(100)

// evaluation을 위해 학습용 데이터를 한 배치로 모두 로딩함
const trainingValidationData = tf.data
  .csv(TRAIN_DATA_PATH, { columnConfigs: { pitch_code: { isLabel: true } } })
  .map(csvTransform)
  .batch(TRAINING_DATA_LENGTH)

// evaluation을 위해 테스트용 데이터를 한 배치로 모두 로딩함
const testValidationData = tf.data
  .csv(TEST_DATA_PATH, { columnConfigs: { pitch_code: { isLabel: true } } })
  .map(csvTransform)
  .batch(TEST_DATA_LENGTH)
```

## 5. 구질을 구별하는 모델 만들기

이제 모델을 만들 준비를 마쳤습니다. [tf.layers](https://js.tensorflow.org/api/latest/#layers.dense)를 활용하여 input 데이터 (8개의 array로 이루어진)를 ReLU를 활성화 유닛으로 구성된 3개의 hidden fully-connected 레이어를 활용하여 연결하고, 이어서 7개의 유닛으로 구성된 1개의 softmax 출력 레이어를 활용하여 각 구질 유형 중 하나를 나타내도록 합니다.

모델을 학습 할 때는 adam 옵티마이저를 활용하고, 손실함수로는 sparseCategoricalCrossentroy를 활용합니다. 이러한 선택의 이유가 궁금하다면, [모델 훈련 가이드](https://www.tensorflow.org/js/guide/train_models)를 참고하세요.

아래의 코드를 `pitch_type.js`에 추가해주세요.

```javascript
const model = tf.sequential()
model.add(tf.layers.dense({ units: 250, activation: 'relu', inputShape: [8] }))
model.add(tf.layers.dense({ units: 175, activation: 'relu' }))
model.add(tf.layers.dense({ units: 150, activation: 'relu' }))
model.add(tf.layers.dense({ units: NUM_PITCH_CLASSES, activation: 'softmax' }))

model.compile({
  optimizer: tf.train.adam(),
  loss: 'sparseCategoricalCrossentropy',
  metrics: ['accuracy'],
})
```

학습을 메인서버에서 실행시키는 코드는 나중에 작성합니다.

`pitch_type.js`를 완성하기 위해, 검증 및 테스트 데이터 세트를 평가하고, 단일 표본의 구질을 예측하고, 정확도 메트릭을 계산하는 함수를 작성해봅시다. `pitch_type.js`의 끝에 아래의 코드를 추가해주세요.
\

```javascript
// 학습용 데이터에서 도출한 각 구질별 확률을 리턴합니다.
async function evaluate(useTestData) {
  let results = {}
  await trainingValidationData.forEachAsync((pitchTypeBatch) => {
    const values = model.predict(pitchTypeBatch.xs).dataSync()
    const classSize = TRAINING_DATA_LENGTH / NUM_PITCH_CLASSES
    for (let i = 0; i < NUM_PITCH_CLASSES; i++) {
      results[pitchFromClassNum(i)] = {
        training: calcPitchClassEval(i, classSize, values),
      }
    }
  })

  if (useTestData) {
    await testValidationData.forEachAsync((pitchTypeBatch) => {
      const values = model.predict(pitchTypeBatch.xs).dataSync()
      const classSize = TEST_DATA_LENGTH / NUM_PITCH_CLASSES
      for (let i = 0; i < NUM_PITCH_CLASSES; i++) {
        results[pitchFromClassNum(i)].validation = calcPitchClassEval(
          i,
          classSize,
          values,
        )
      }
    })
  }
  return results
}

async function predictSample(sample) {
  let result = model.predict(tf.tensor(sample, [1, sample.length])).arraySync()
  var maxValue = 0
  var predictedPitch = 7
  for (var i = 0; i < NUM_PITCH_CLASSES; i++) {
    if (result[0][i] > maxValue) {
      predictedPitch = i
      maxValue = result[0][i]
    }
  }
  return pitchFromClassNum(predictedPitch)
}

// 각 구질을 예측한 것에 대해서 정확도를 계산합니다.
function calcPitchClassEval(pitchIndex, classSize, values) {
  // 결과는 7개의 서로다른 구질로 구성되어 있습니다.
  let index = pitchIndex * classSize * NUM_PITCH_CLASSES + pitchIndex
  let total = 0
  for (let i = 0; i < classSize; i++) {
    total += values[index]
    index += NUM_PITCH_CLASSES
  }
  return total / classSize
}

// Returns the string value for Baseball pitch labels
function pitchFromClassNum(classNum) {
  switch (classNum) {
    case 0:
      return 'Fastball (2-seam)'
    case 1:
      return 'Fastball (4-seam)'
    case 2:
      return 'Fastball (sinker)'
    case 3:
      return 'Fastball (cutter)'
    case 4:
      return 'Slider'
    case 5:
      return 'Changeup'
    case 6:
      return 'Curveball'
    default:
      return 'Unknown'
  }
}

module.exports = {
  evaluate,
  model,
  pitchFromClassNum,
  predictSample,
  testValidationData,
  trainingData,
  TEST_DATA_LENGTH,
}
```

## 6. 모델을 서버에서 훈련시키기

server.js 라는 새로운 파일을 작성한다음, 서버에서 훈련과 평가를 담당하는 모델을 만들어서 동작하게 합니다. 먼저, HTTP server를 만들고, `socket.io` API을 사용해 소켓을 활용해 양방향 통신을 하도록합니다.

아래 코드를 server.js에 작성해주세요.

```javascript
require('@tensorflow/tfjs-node')

const http = require('http')
const socketio = require('socket.io')
const pitch_type = require('./pitch_type')

const TIMEOUT_BETWEEN_EPOCHS_MS = 500
const PORT = 8001

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms))
}

// 서버를 시작하고, 모델을 훈련시키고, 현재 상태를 소켓 연결로 내보낸다.
async function run() {
  const port = process.env.PORT || PORT
  const server = http.createServer()
  const io = socketio(server)

  server.listen(port, () => {
    console.log(`  > Running socket on port: ${port}`)
  })

  io.on('connection', (socket) => {
    socket.on('predictSample', async (sample) => {
      io.emit('predictResult', await pitch_type.predictSample(sample))
    })
  })

  let numTrainingIterations = 10
  for (var i = 0; i < numTrainingIterations; i++) {
    console.log(`Training iteration : ${i + 1} / ${numTrainingIterations}`)
    await pitch_type.model.fitDataset(pitch_type.trainingData, { epochs: 1 })
    console.log('accuracyPerClass', await pitch_type.evaluate(true))
    await sleep(TIMEOUT_BETWEEN_EPOCHS_MS)
  }

  io.emit('trainingComplete', true)
}

run()
```

여기까지 왔다면, 서버를 실행하고 테스트 할 수 있습니다. 밑에서 보이는 로그처럼, 서버에서 각 iteration 마다 하나의 epoch으로 학습하는 모습을 볼 수 있습니다. (또한 `model.fitDataset` API를 활용해서 한번의 호출로 여러 epoch에 걸쳐 학습할 수도 있습니다.) 만약 여기에서 에러를 접하게 된다면, node나 npm 설치상황을 확인해보시기 바랍니다.

```shell
$ npm run start-server
...
  > Running socket on port: 8001
Epoch 1 / 1
eta=0.0 ========================================================================================================>
2432ms 34741us/step - acc=0.429 loss=1.49
```

Ctrl+C로 서버를 중단시킵니다. 다음 단계에서 다시 이 부분을 실행할 것입니다.

## 7. 클라이언트 페이지를 만들고 display 용 코드 만들기

서버가 준비되었으므로, 다음 단계는 브라우저에서 실행할 클라이언트 코드를 작성하는 것입니다. 간단한 페이지를 만들어서, 서버에서 모델 예측을 호출하고 결과를 표시합니다. `socket.io`를 활용해서 클라이언트/서버 커뮤니케이션을 진행합니다.

먼저 `./baseball`폴더에 index.html 을 만들고 아래 코드를 복사합니다.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Pitch Training Accuracy</title>
  </head>
  <body>
    <h3 id="waiting-msg">Waiting for server...</h3>
    <p>
      <span style="font-size:16px" id="trainingStatus"></span>
    </p>

    <p></p>
    <div id="predictContainer" style="font-size:16px;display:none">
      Sensor data: <span id="predictSample"></span>
      <button
        style="font-size:18px;padding:5px;margin-right:10px"
        id="predict-button"
      >
        Predict Pitch
      </button>
      <p>
        Predicted Pitch Type:
        <span style="font-weight:bold" id="predictResult"></span>
      </p>
    </div>

    <script src="dist/bundle.js"></script>
    <style>
      html,
      body {
        font-family: Roboto, sans-serif;
        color: #5f6368;
      }
      body {
        background-color: rgb(248, 249, 250);
      }
    </style>
  </body>
</html>
```

`client.js`를 `./baseball` 폴더에 만들고 아래 내용을 복사합니다.

```javascript
import io from 'socket.io-client'
const predictContainer = document.getElementById('predictContainer')
const predictButton = document.getElementById('predict-button')

const socket = io('http://localhost:8001', {
  reconnectionDelay: 300,
  reconnectionDelayMax: 300,
})

const testSample = [2.668, -114.333, -1.908, 4.786, 25.707, -45.21, 78, 0] // Curveball

predictButton.onclick = () => {
  predictButton.disabled = true
  socket.emit('predictSample', testSample)
}

// functions to handle socket events
socket.on('connect', () => {
  document.getElementById('waiting-msg').style.display = 'none'
  document.getElementById('trainingStatus').innerHTML = 'Training in Progress'
})

socket.on('trainingComplete', () => {
  document.getElementById('trainingStatus').innerHTML = 'Training Complete'
  document.getElementById('predictSample').innerHTML =
    '[' + testSample.join(', ') + ']'
  predictContainer.style.display = 'block'
})

socket.on('predictResult', (result) => {
  plotPredictResult(result)
})

socket.on('disconnect', () => {
  document.getElementById('trainingStatus').innerHTML = ''
  predictContainer.style.display = 'none'
  document.getElementById('waiting-msg').style.display = 'block'
})

function plotPredictResult(result) {
  predictButton.disabled = false
  document.getElementById('predictResult').innerHTML = result
  console.log(result)
}
```

클라이언트가 `trainingComplete` 소켓 메시지를 처리하여 예측 버튼을 표시합니다. 이 버튼을 클릭하면 클라이언트는 샘플 센서 데이터가 포함된 소켓 메시지를 전송합니다. `predictResult` 메시지를 받으면 페이지에 예측을 표시합니다.

## 8. 앱 실행하기

아래 두 코드를 실행해서 클라이언트 / 서버 를 실행합니다.

```shell
[In one terminal, run this first]
$ npm run start-client

[In another terminal, run this next]
$ npm run start-server
```

브라우저에서 http://localhost:8080/ 를 엽니다. 모델 학습이 끝나면, Predict Sample 버튼을 눌러보세요. 브라우저에서 예측 결과가 뜰 것입니다. 그리고 테스트 csv 파일의 몇가지 예제를 활용해서 샘플 센서 데이터를 자유롭게 수정하고, 모델이 얼마나 정확하게 예측하는지 확인해보세요.

## 9. 배운것

본 튜토리얼에서는, Tensorflow.js를 활용한 간닪한 머신러닝 웹 애플리케이션을 만들어 보았습니다. 센서 데이터를 활용해서 구질이 무엇인지 분류하는 모델을 만들어 보았습니다. node.js 코드를 작성해서 서버를 만들고, 클라이언트에 데이터를 통해 학습한 모델을 전송합니다.

[tensorflow.org/js](https://www.tensorflow.org/js)를 방문해서, 더욱 많은 예제와 데모를 보시고, 당신의 애플리케이션에서 Tensorflow.js를 어떻게 활용할수 있을지 살펴보세요.

https://codesandbox.io/s/tensorflowjs-05-training-prediction-nodejs-tc6c4


`toc tight: true, from-heading: 1 to-heading: 3 ` # Training and Prediction in Node.js 본 튜토리얼에서는 MLBAM에서 제공하는 피쳐 센서 데이터를 바탕으로, 야구의 칭 유형을 추측하는 모델을 만들어볼 예정입니다. 이 튜토리얼은 서버사이드 애플리케이션인 Node.js에서 진행될 ...

Tensorflow.js - 05. Training and Prediction in Node.js

`toc tight: true, from-heading: 1 to-heading: 3 ` # Handwritten digit recognition with CNNs 이 튜토리얼에서는, Tensorflow.js의 CNN을 활용해 손글씨 숫자를 인식하는 모델을 만들어 볼 것입니다. 먼저, 손으로 쓴 수천개의 숫자 이미지와 이들의 라벨 (어떤 숫자인지...

Tensorflow 1

Tensorflow.js - 08. Build an audio recognizer

Tensorflow.js - 07. Build an image classifier

Tensorflow.js - 06. What is Transfer Learning

Tensorflow.js - 05. Training and Prediction in Node.js

Tensorflow.js - 04. CNN