TensorFlow.js는 웹 브라우저와 Node.js에서 기계 학습 모델을 훈련하고 배포하기 위한 JavaScript 라이브러리입니다. 이 튜토리얼에서는 브라우저에서 최소 모델을 훈련하고 모델을 사용하여 예측함으로써 TensorFlow.js를 시작하는 방법을 보여줍니다.
예제 코드는 GitHub 에서 사용할 수 있습니다.
전제 조건
이 튜토리얼을 완료하려면 개발 환경에 다음이 설치되어 있어야 합니다.
예제 설치
소스 코드를 가져오고 종속 항목을 설치합니다.
- tfjs-examples 저장소를 복제하거나 다운로드하세요.
-
getting-started디렉터리로 변경합니다:cd tfjs-examples/getting-started. - 종속성 설치:
yarn install.
package.json 파일을 보면 TensorFlow.js가 종속성이 아니라는 것을 알 수 있습니다. 이는 예제가 CDN에서 TensorFlow.js를 로드하기 때문입니다. index.html 의 전체 HTML은 다음과 같습니다.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"> </script>
</head>
<body>
<h4>Tiny TFJS example<hr/></h4>
<div id="micro-out-div">Training...</div>
<script src="./index.js"> </script>
</body>
</html>
헤드의 <script> 요소는 TensorFlow.js 라이브러리를 로드하고, 본문 끝의 <script> 요소는 머신러닝 스크립트를 로드합니다.
TensorFlow.js에 대한 종속성을 확보하는 다른 방법은 설정 튜토리얼을 참조하세요.
예제 실행
예제를 실행하고 결과를 확인하세요.
-
tfjs-examples/getting-started디렉터리에서yarn watch실행하세요. - 브라우저에서
http://127.0.0.1:1234로 이동합니다.
페이지 제목과 그 아래에 38.31612014770508 과 같은 숫자가 표시되어야 합니다. 정확한 숫자는 다양하지만 39에 가까울 것입니다.
방금 무슨 일이 일어났나요?
index.js 가 로드되면 방정식 $ y = 2x - 1 $를 만족하는 $ x $ 및 $ y $ 값을 사용하여 tf.sequential 모델을 학습합니다.
// Create a simple model.
const model = tf.sequential();
model.add(tf.layers.dense({units: 1, inputShape: [1]}));
// Prepare the model for training: Specify the loss and the optimizer.
model.compile({loss: 'meanSquaredError', optimizer: 'sgd'});
// Generate some synthetic data for training. (y = 2x - 1)
const xs = tf.tensor2d([-1, 0, 1, 2, 3, 4], [6, 1]);
const ys = tf.tensor2d([-3, -1, 1, 3, 5, 7], [6, 1]);
// Train the model using the data.
await model.fit(xs, ys, {epochs: 250});
그런 다음 보이지 않는 $ x $ 값 20 에 대한 $ y $ 값을 예측하고 DOM을 업데이트하여 예측을 표시합니다.
// Use the model to do inference on a data point the model hasn't seen.
// Should print approximately 39.
document.getElementById('micro-out-div').innerText =
model.predict(tf.tensor2d([20], [1, 1])).dataSync();
$ 2 * 20 - 1 $의 결과는 39이므로 예측된 $ y $ 값은 약 39가 되어야 합니다.
무엇 향후 계획
이 튜토리얼에서는 TensorFlow.js를 사용하여 브라우저에서 모델을 훈련시키는 최소한의 예를 제공했습니다. JavaScript를 사용한 훈련 모델에 대한 더 자세한 소개는 TensorFlow.js 가이드를 참조하세요.
시작하는 다양한 방법
TensorFlow.js 및 웹 ML을 시작하는 더 많은 방법은 다음과 같습니다.
TensorFlow.js 웹 ML 과정 보기
웹 ML에 대한 실용적인 소개를 원하는 웹 개발자라면 Google 개발자 비디오 과정인 웹 개발자를 위한 기계 학습을 확인하세요. 이 과정에서는 웹사이트와 애플리케이션에서 TensorFlow.js를 사용하는 방법을 보여줍니다.
텐서를 직접 다루지 않고 ML 프로그램 코딩
최적화 프로그램이나 텐서 조작을 관리하지 않고 기계 학습을 시작하려면 ml5.js 라이브러리를 확인하세요.
TensorFlow.js를 기반으로 구축된 ml5.js 라이브러리는 간결하고 접근하기 쉬운 API를 통해 웹 브라우저에서 기계 학습 알고리즘 및 모델에 대한 액세스를 제공합니다.
TensorFlow.js 설치
웹 브라우저 또는 Node.js에서 구현하기 위해 TensorFlow.js를 설치하는 방법을 알아보세요.
사전 학습된 모델을 TensorFlow.js로 변환
사전 학습된 모델을 Python에서 TensorFlow.js로 변환하는 방법을 알아보세요.
기존 TensorFlow.js 코드에서 배우기
tfjs-examples 저장소는 TensorFlow.js를 사용하여 다양한 ML 작업에 대한 작은 예제 구현을 제공합니다.
TensorFlow.js 모델의 동작 시각화
tfjs-vis TensorFlow.js와 함께 사용하도록 고안된 웹 브라우저의 시각화를 위한 작은 라이브러리입니다.
TensorFlow.js로 처리할 데이터 준비
TensorFlow.js는 ML 모범 사례를 사용하여 데이터 처리를 지원합니다.
,TensorFlow.js는 웹 브라우저와 Node.js에서 기계 학습 모델을 훈련하고 배포하기 위한 JavaScript 라이브러리입니다. 이 튜토리얼에서는 브라우저에서 최소 모델을 훈련하고 모델을 사용하여 예측함으로써 TensorFlow.js를 시작하는 방법을 보여줍니다.
예제 코드는 GitHub 에서 사용할 수 있습니다.
전제 조건
이 튜토리얼을 완료하려면 개발 환경에 다음이 설치되어 있어야 합니다.
예제 설치
소스 코드를 가져오고 종속 항목을 설치합니다.
- tfjs-examples 저장소를 복제하거나 다운로드하세요.
-
getting-started디렉터리로 변경합니다:cd tfjs-examples/getting-started. - 종속성 설치:
yarn install.
package.json 파일을 보면 TensorFlow.js가 종속성이 아니라는 것을 알 수 있습니다. 이는 예제가 CDN에서 TensorFlow.js를 로드하기 때문입니다. index.html 의 전체 HTML은 다음과 같습니다.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"> </script>
</head>
<body>
<h4>Tiny TFJS example<hr/></h4>
<div id="micro-out-div">Training...</div>
<script src="./index.js"> </script>
</body>
</html>
헤드의 <script> 요소는 TensorFlow.js 라이브러리를 로드하고, 본문 끝의 <script> 요소는 머신러닝 스크립트를 로드합니다.
TensorFlow.js에 대한 종속성을 확보하는 다른 방법은 설정 튜토리얼을 참조하세요.
예제 실행
예제를 실행하고 결과를 확인하세요.
-
tfjs-examples/getting-started디렉터리에서yarn watch실행하세요. - 브라우저에서
http://127.0.0.1:1234로 이동합니다.
페이지 제목과 그 아래에 38.31612014770508 과 같은 숫자가 표시되어야 합니다. 정확한 숫자는 다양하지만 39에 가까울 것입니다.
방금 무슨 일이 일어났나요?
index.js 가 로드되면 방정식 $ y = 2x - 1 $를 만족하는 $ x $ 및 $ y $ 값을 사용하여 tf.sequential 모델을 학습합니다.
// Create a simple model.
const model = tf.sequential();
model.add(tf.layers.dense({units: 1, inputShape: [1]}));
// Prepare the model for training: Specify the loss and the optimizer.
model.compile({loss: 'meanSquaredError', optimizer: 'sgd'});
// Generate some synthetic data for training. (y = 2x - 1)
const xs = tf.tensor2d([-1, 0, 1, 2, 3, 4], [6, 1]);
const ys = tf.tensor2d([-3, -1, 1, 3, 5, 7], [6, 1]);
// Train the model using the data.
await model.fit(xs, ys, {epochs: 250});
그런 다음 보이지 않는 $ x $ 값 20 에 대한 $ y $ 값을 예측하고 DOM을 업데이트하여 예측을 표시합니다.
// Use the model to do inference on a data point the model hasn't seen.
// Should print approximately 39.
document.getElementById('micro-out-div').innerText =
model.predict(tf.tensor2d([20], [1, 1])).dataSync();
$ 2 * 20 - 1 $의 결과는 39이므로 예측된 $ y $ 값은 약 39가 되어야 합니다.
무엇 향후 계획
이 튜토리얼에서는 TensorFlow.js를 사용하여 브라우저에서 모델을 훈련시키는 최소한의 예를 제공했습니다. JavaScript를 사용한 훈련 모델에 대한 더 자세한 소개는 TensorFlow.js 가이드를 참조하세요.
시작하는 다양한 방법
TensorFlow.js 및 웹 ML을 시작하는 더 많은 방법은 다음과 같습니다.
TensorFlow.js 웹 ML 과정 보기
웹 ML에 대한 실용적인 소개를 원하는 웹 개발자라면 Google 개발자 비디오 과정인 웹 개발자를 위한 기계 학습을 확인하세요. 이 과정에서는 웹사이트와 애플리케이션에서 TensorFlow.js를 사용하는 방법을 보여줍니다.
텐서를 직접 다루지 않고 ML 프로그램 코딩
최적화 프로그램이나 텐서 조작을 관리하지 않고 기계 학습을 시작하려면 ml5.js 라이브러리를 확인하세요.
TensorFlow.js를 기반으로 구축된 ml5.js 라이브러리는 간결하고 접근하기 쉬운 API를 통해 웹 브라우저에서 기계 학습 알고리즘 및 모델에 대한 액세스를 제공합니다.
TensorFlow.js 설치
웹 브라우저 또는 Node.js에서 구현하기 위해 TensorFlow.js를 설치하는 방법을 알아보세요.
사전 학습된 모델을 TensorFlow.js로 변환
사전 학습된 모델을 Python에서 TensorFlow.js로 변환하는 방법을 알아보세요.
기존 TensorFlow.js 코드에서 배우기
tfjs-examples 저장소는 TensorFlow.js를 사용하여 다양한 ML 작업에 대한 작은 예제 구현을 제공합니다.
TensorFlow.js 모델의 동작 시각화
tfjs-vis TensorFlow.js와 함께 사용하도록 고안된 웹 브라우저의 시각화를 위한 작은 라이브러리입니다.
TensorFlow.js로 처리할 데이터 준비
TensorFlow.js는 ML 모범 사례를 사용하여 데이터 처리를 지원합니다.