TensorFlow를 시작합니다.js

만약 당신이 나처럼 머신러닝(ML)이 무엇인지 계속 생각하고 모든 수학 용어에서 벗어난다면, 이것은 감동적인 순간이다. 왜냐하면 TensorFlow.js는 구원을 위한 것이기 때문이다.
찾을 수 있습니다code for this post here.

간단한 소개

5년 동안 프런트엔드 개발자로 일했지만 머신러닝과 인공지능에 대해서도 궁금해요.그러나 나는 그것을 깊이 연구할 기회가 없었다. 왜냐하면 나는 줄곧 바빴고, 대부분의 기계 학습 구조는 내가 접해 본 적이 없는 언어로 작성되었기 때문이다.
상황이 바뀌어 사람들이 현재 모바일 기기나 브라우저에서 기계로 공부하고 있다.TensorFlow.js는 브라우저나 Node.js에서 ML모델을 만들고 훈련하고 배치할 수 있는 라이브러리 중 하나입니다.솔직히 말해서, 나는 정말 흥분했다. 왜냐하면 그것은 나로 하여금 모형과 신경 네트워크를 놀 수 있게 하기 때문에, 매우 낮은 수준에 가거나 새로운 언어를 배울 필요가 없기 때문이다🤯.
오해하지 마라. 나는 새로운 언어를 배우는 것을 두려워하지 않는다. 사실 이것은 나의 취미 중의 하나이다.그러나 나는 여러 가지 다른 임무로 바빠서 이 분야를 깊이 연구할 시간이 전혀 없었다.
이 라이브러리의 장점은 ML을 미리 알 필요가 없고 고급 API만 처리하면 많은 개념을 간소화할 수 있기 때문에 바퀴를 재발명하는 것이 아니라 모델을 배치하고 문제를 해결하는 데 전념할 수 있다는 것이다🔥.
하지만 더 많은 선택이 있었고, 우리에게 많은 기회를 제공했다.기본적으로 너는 다음과 같이 할 수 있다.

미리 훈련된 모델을 도입하여 사용(예측 또는 배치)

미리 훈련된 모델(Keras 또는 Python)을 가져오고 데이터 집합

으로 훈련합니다

프라이버시 친선 모델 생성, 훈련, 예측 및 배치

제가 모르는 게 더 있을 수도 있어요.🤷‍.

핵심 개념

우리가 그것을 어떻게 사용하는지 진일보 토론하기 전에, 우리는 일치를 유지할 수 있도록 몇 가지 기본 개념을 숙지해야 한다.
장량TensorFlow.js에서 데이터의 중심 단위는 장량이다. 하나 이상의 차원 그룹을 형성하는 하나의 그룹 수치다.Tensor 실례는 정의된 수조shape의 형상 속성(즉 수조의 각 차원에 몇 개의 값이 있는지)을 가지고 있다.
변량
변수용 값의 장량을 초기화합니다.그러나 장량과 달리 그것들의 값은 변할 수 있다.
행동(Ops)
장량은 데이터를 저장할 수 있고, 조작 (ops) 은 데이터를 조작할 수 있습니다.TensorFlow.js는 선형 대수와 기계 학습에 적용되는 각종 조작을 제공했는데 이런 조작은 장량에서 실행할 수 있다.장량은 변하지 않기 때문에 이런 연산은 그것들의 값을 바꾸지 않는다.반대로ops는 새로운 장량을 되돌려줍니다.
모델 및 레이어
개념적으로 말하자면 모델은 일부 입력을 정하면 기대 출력이 발생하는 함수이다.TensorFlow.js에서는 모델을 생성하는 두 가지 방법이 있습니다.당신은 직접ops를 사용하여 모델이 하는 일을 나타낼 수 있습니다.
또는 고급 APItf.model를 사용하여 계층형 모델을 구축할 수 있습니다. 이것은 딥러닝에서 유행하는 추상화입니다.
경고: TensorFlow.js GPU를 사용하여 수학 연산을 가속화하기 때문에 장량과 변수를 처리할 때 GPU 메모리를 관리할 필요가 있습니다.그것은 이 점을 실현하는 데 도움을 주는 두 가지 기능을 제공했다. dispose 와 tf.tidy.잠시 후에 우리는 이 문제들을 깊이 토론할 것이다.

미리 훈련된 모형을 어떻게 사용합니까

유행하는 Keras 파이톤 라이브러리에서 미리 훈련된 모델을 사용하여 예측할 수 있습니다.이것은 데이터 과학자가 되지 않아도 이 모델을 사용할 수 있고, 심지어는 강력한 ML 기반 응용 프로그램을 구축할 필요가 없다는 것을 의미한다.
다행히도 TensorFlow.js를 통해 사용할 수 있는 모델이 많이 공개되었다.이를 위해 TensorFlow.js converter 을 사용해야 합니다. 이것은 미리 훈련된 모델을 TenserFlow.js 이해할 수 있는 형식에 불러오는 소스 라이브러리입니다.
주의: 이를 위해서는 Python에 대해 좀 알고 로컬에 설치해야 합니다.
언제든지 사용할 수 있는 모델을 만들기 위해 두 가지 작업을 수행해야 합니다.먼저 모델을 로컬에 저장한 다음 변환기를 실행해서 변환합니다.하지만 변환을 실행할 필요가 없는 더 간단한 방법을 찾았다.변환 논리가 tensorflowjs 파이톤 패키지에서 이미 실현되었습니다.😁, 그래서 쓸 거야.

모델 저장

모바일넷 네트워크를 가져와 로컬에 저장하고 싶은 예를 보여 드리겠습니다.먼저 instructions here to install the pre-requisites의 지침을 따르십시오.
그런 다음 모델을 로컬에 저장하기 위해 다음 코드를 작성할 수 있습니다.

from keras.applications import mobilenet
import tensorflowjs as tfjs

mobilenet = mobilenet.MobileNet()

save_path = "output\\mobilenet"
tfjs.converters.save_keras_model(mobilenet, save_path)

\이 작업을 실행하면 mobilenet 폴더에 다음 파일이 포함된 output 폴더가 있어야 합니다.

맞혀 봐, 너는 그것을 사용하고 너의 첫 번째 TensorFlow.js 프로그램을 작성할 준비가 되어 있다.
CLI 명령을 사용하여 모델을 변환하려면 this tutorial를 참조하십시오.

응용 프로그램에서 이 모델 사용하기

제 예시에서 저는 Angular을 사용했지만 당신이 좋아하는 프레임, 심지어vanilla JS까지 마음대로 사용할 수 있습니다.🙃.

응용 프로그램 만들기

Angular CLI를 설치했기 때문에 명령 프롬프트를 열고 새 애플리케이션을 만듭니다.

ng new mobilenet

cd mobilenet

TensorFlow를 설치합니다.js

응용 프로그램을 만들고 모든 npm 패키지를 설치하는 데 시간이 좀 걸립니다.완료되면 TensorFlow.js 패키지를 추가합니다.

npm install @tensorflow/tfjs --save

완성되면 저장된 모델의 내용을 자산 폴더에 복사하고 선택한 편집기 VS Code 를 사용하여 이 폴더를 엽니다😁).
예측을 위해서는 이미지 클래스가 필요합니다.따라서 프로젝트의 어느 곳에 파일을 만들고 this file의 내용을 추가합니다.나는 이미 그것을 나의 자산 서류철에 넣었다.

모델 가져오기 및 사용

app.component.ts 파일을 열고 가져오기 문을 추가합니다.

import * as tf from '@tensorflow/tfjs';
import { IMAGENET_CLASSES } from '../assets/imagenet-classes';

데이터를 저장하는 변수와 우리가 사용해야 하는 HTML 요소에 대한 참조가 필요합니다.

model: tf.Model;
classes: any[];
imageData: ImageData;

@ViewChild('chosenImage') img: ElementRef;
@ViewChild('fileUpload') fileUpload: ElementRef;

이 모델은 우리의 예측 결과를 위한 모델이 있고, imageData 우리의 파일을 업로드한 파일을 그것으로 변환하여 페이지의 이미지에 표시합니다.
두 개의 글로벌 변수, 이미지 크기는 모델 트레이닝의 크기이며 예측 결과에서 선택할 예측 수(배열이기 때문)입니다.

const IMAGE_SIZE = 224;
const TOPK_PREDICTIONS = 5;

모델을 로드하고 ngOnInit에 호출하는 방법을 추가합니다.

ngOnInit() {
  this.loadModel();
}

async loadModel() {
  this.model = await tf.loadModel('/assets/model.json');
}

HTML에 파일과 이미지를 업로드해야 하므로 다음과 같이 추가할 수 있습니다.

<div class="container">
  <h2>
    Using MobileNet neural network in Angular
  </h2>
  <div class="upload" [hidden]="!model">
    Upload an image:
    <input
      #fileUpload
      type="file"
      id="files"
      name="files[]"
      (change)="fileChangeEvent($event)"
    />
  </div>
  <div>
    <img
      #chosenImage
      width="224"
      height="224"
      class="sample-image"
    />
    <div class="predictions">
      <div
        *ngFor="let class of classes"
        class="row"
      >
        <div class="col-sm-6">
          {{class.className}}
        </div>
        <div class="col-sm-6">
          {{class.probability.toFixed(3)}}
        </div>
      </div>
    </div>
  </div>
</div>

또한 CSS를 통해 더욱 예뻐질 수 있습니다.

.container {
  padding: 200px;

  .sample-image {
    margin: 20px;
  }

  .predictions {
    margin-top: 20px;
    width: 100%;
  }
}

HTML의 예측 부분은 예측 결과를 포함할 것입니다. classes 라는 변수에 저장될 것이라고 가정합니다.
이제 TypeScript 파일로 돌아가서 예측 코드를 추가합시다.먼저 파일 입력에 대한 예측 논리를 트리거하는 프로세서를 만듭니다.

fileChangeEvent(event: any) {
  const file = event.target.files[0];
  if (!file || !file.type.match('image.*')) {
    return;
  }

  this.classes = [];

  const reader = new FileReader();
  reader.onload = e => {
    this.img.nativeElement.src = e.target['result'];
    this.predict(this.img.nativeElement);
  };

  reader.readAsDataURL(file);
}

이 방법에서 우리가 하는 일은 선택한 파일을 읽고 그림의 원본으로 페이지에 놓으면 선택한 그림을 볼 수 있고predict 방법을 호출할 수 있습니다.파일을 먼저 읽어야 하기 때문에 onload 이벤트 처리 프로그램에서 다른 방식으로 호출합니다.
이제 예측 코드를 작성해 보겠습니다.

async predict(imageData: ImageData): Promise<any> {
  this.fileUpload.nativeElement.value = '';
  const startTime = performance.now();
  const logits = tf.tidy(() => {
    // tf.fromPixels() returns a Tensor from an image element.
    const img = tf.fromPixels(imageData).toFloat();

    const offset = tf.scalar(127.5);
    // Normalize the image from [0, 255] to [-1, 1].
    const normalized = img.sub(offset).div(offset);

    // Reshape to a single-element batch so we can pass it to predict.
    const batched = normalized.reshape([1, IMAGE_SIZE, IMAGE_SIZE, 3]);

    // Make a prediction through mobilenet.
    return this.model.predict(batched);
  });

  // Convert logits to probabilities and class names.
  this.classes = await this.getTopKClasses(logits, TOPK_PREDICTIONS);
  const totalTime = performance.now() - startTime;
  console.log(`Done in ${Math.floor(totalTime)}ms`);
}

만약 네가 첫눈에 이곳의 코드를 이해하지 못한다면, 충분히 된다.기왕 우리가 이미 이 모델을 도입했으니, 우리는 반드시 그것의 내부 구조를 이해해야 한다.
우선, 나는 앞에서 언급한 tidy 함수를 사용하여 메모리 유출이 없도록 확보했다.
그리고 나는 그림을 이 모델에서 예상되는 부동 데이터 형식으로 변환할 것이다.
완성된 후에 우리는 데이터를 [0255] 범위에서 [-1,1]로 표준화해야 한다.scalar 조작은 주어진 값을 가진 장량을 생성합니다.
마지막으로 입력한 내용을 [1, IMAGE SIZE, IMAGE SIZE, 3] 단위로 재구성하고 predict를 호출해야 합니다.
일단 결과를 얻으면 우리는 결과에서 최고급x류를 추출해야 하기 때문에 이를 실현할 수 있다.

async getTopKClasses(logits, topK): Promise<any[]> {
  const values = await logits.data();

  const valuesAndIndices = [];
  for (let i = 0; i < values.length; i++) {
    valuesAndIndices.push({ value: values[i], index: i });
  }
  valuesAndIndices.sort((a, b) => {
    return b.value - a.value;
  });
  const topkValues = new Float32Array(topK);
  const topkIndices = new Int32Array(topK);
  for (let i = 0; i < topK; i++) {
    topkValues[i] = valuesAndIndices[i].value;
    topkIndices[i] = valuesAndIndices[i].index;
  }

  const topClassesAndProbs = [];
  for (let i = 0; i < topkIndices.length; i++) {
    topClassesAndProbs.push({
      className: IMAGENET_CLASSES[topkIndices[i]],
      probability: topkValues[i]
    });
  }
  return topClassesAndProbs;
}

알겠습니다. 이 방법을 alogit형상이라고 부르는 예측 결과를 기억하세요.logit는 보통 Tensor 또는 수조 또는 유형화 수조이다.
기본적으로 우리는 기다림data 방법을 통해 결과를 얻었다.그리고 이 그룹의 출력 값과 인덱스를 사용하여 새 그룹을 만듭니다.
이를 바탕으로 우리는 형성된 수조에 따라 결과류를 계산해 낸다.마찬가지로 코드의 역할을 이해할 필요가 없습니다. 비교적 높은 차원에서 GitHub 메모리 라이브러리에서 얻은 클래스에 결과를 비추는 것입니다.

어플리케이션 실행

이 프로그램을 실행할 수 있습니다. localhost:4200 돌아가서 어떤 예측을 얻었는지 보십시오.😎.
이것이 바로 시작이 쉬운 정도다.네가 이 지침을 좋아하길 바란다. 나는 네가 가서 보도록 격려할 수 있다.
마찬가지로 code for this post here를 찾을 수 있습니다.