JavaScript로 머신러닝 시작하기: TensorFlow.js를 사용한 초보자 가이드
머신러닝(ML)은 소프트웨어 개발의 세계를 빠르게 변화시켰습니다. 최근까지 Python은 TensorFlow 및 PyTorch와 같은 라이브러리 덕분에 ML 공간에서 지배적인 언어였습니다. 그러나 TensorFlow.js의 등장으로 JavaScript 개발자는 이제 친숙한 구문을 사용하여 브라우저나 Node.js에서 직접 모델을 구축하고 훈련함으로써 흥미진진한 기계 학습의 세계에 뛰어들 수 있습니다.
이 블로그 게시물에서는 JavaScript를 사용하여 머신러닝을 시작하는 방법을 살펴보겠습니다. TensorFlow.js를 사용하여 간단한 모델을 구축하고 훈련하는 예를 살펴보겠습니다.
왜 TensorFlow.js인가요?
TensorFlow.js는 기계 학습 모델을 완전히 JavaScript로 정의, 훈련 및 실행할 수 있는 오픈 소스 라이브러리입니다. 브라우저와 Node.js 모두에서 실행되므로 다양한 ML 애플리케이션에 매우 다용도로 사용할 수 있습니다.
TensorFlow.js가 흥미로운 몇 가지 이유는 다음과 같습니다.
- 실시간 훈련: 브라우저에서 직접 모델을 실행하여 실시간 상호작용을 제공할 수 있습니다.
- 크로스 플랫폼: 서버와 클라이언트 환경 모두에서 동일한 코드를 실행할 수 있습니다.
- 하드웨어 가속: GPU 가속을 위해 WebGL을 사용하여 계산 속도를 높입니다.
시작하는 방법을 알아보세요!
1. TensorFlow.js 설정
코드를 살펴보기 전에 TensorFlow.js를 설치해야 합니다. <script>를 통해 프로젝트에 포함할 수 있습니다. 환경에 따라 태그 또는 npm을 사용하세요.</p> <h3> 브라우저 설정 </h3> <p>브라우저에서 TensorFlow.js를 사용하려면 다음 <script> HTML 파일의 태그:<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script> </pre><div class="contentsignin">로그인 후 복사</div></div> <h3> Node.js 설정 </h3> <p>Node.js 환경의 경우 npm을 사용하여 설치할 수 있습니다.<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">npm install @tensorflow/tfjs </pre><div class="contentsignin">로그인 후 복사</div></div> <h2> 2. 간단한 신경망 모델 구축 </h2> <p>기본 선형 함수 y = 2x - 1의 출력을 예측하는 간단한 신경망을 만들어 보겠습니다. TensorFlow.js를 사용하여 이 모델을 만들고 훈련하겠습니다.</p> <h3> 1단계: 모델 정의 </h3> <p>하나의 조밀한 레이어가 있는 순차 모델(레이어의 선형 스택)을 정의하는 것부터 시작하겠습니다.<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">// Import TensorFlow.js import * as tf from '@tensorflow/tfjs'; // Create a simple sequential model const model = tf.sequential(); // Add a single dense layer with 1 unit (neuron) model.add(tf.layers.dense({units: 1, inputShape: [1]})); </pre><div class="contentsignin">로그인 후 복사</div></div> <p>여기서는 하나의 조밀한 레이어로 모델을 만들었습니다. 레이어에는 하나의 뉴런(단위: 1)이 있으며 단일 입력 기능(inputShape: [1])이 필요합니다.</p> <h3> 2단계: 모델 컴파일 </h3> <p>다음으로 최적화 프로그램과 손실 함수를 지정하여 모델을 컴파일합니다.<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">// Compile the model model.compile({ optimizer: 'sgd', // Stochastic Gradient Descent loss: 'meanSquaredError' // Loss function for regression }); </pre><div class="contentsignin">로그인 후 복사</div></div> <p>작은 모델에 효과적인 SGD(Stochastic Gradient Descent) 최적화 프로그램을 사용합니다. 손실 함수인meanSquaredError는 이와 같은 회귀 작업에 적합합니다.</p> <h3> 3단계: 훈련 데이터 준비 </h3> <p>이제 함수 y = 2x - 1에 대한 훈련 데이터를 생성하겠습니다. TensorFlow.js에서 데이터는 텐서(다차원 배열)에 저장됩니다. 훈련 데이터를 생성하는 방법은 다음과 같습니다.<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">// Generate some synthetic data for training const xs = tf.tensor2d([0, 1, 2, 3, 4], [5, 1]); // Inputs (x values) const ys = tf.tensor2d([1, 3, 5, 7, 9], [5, 1]); // Outputs (y values) </pre><div class="contentsignin">로그인 후 복사</div></div> <p>이 경우 입력 값(0, 1, 2, 3, 4)이 포함된 텐서 xs와 y = 2x - 1을 사용하여 계산된 값이 포함된 해당 출력 텐서 ys를 만들었습니다.</p> <h3> 4단계: 모델 학습 </h3> <p>이제 데이터를 기반으로 모델을 훈련할 수 있습니다.<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">// Train the model model.fit(xs, ys, {epochs: 500}).then(() => { // Once training is complete, use the model to make predictions model.predict(tf.tensor2d([5], [1, 1])).print(); // Output will be close to 2*5 - 1 = 9 }); </pre><div class="contentsignin">로그인 후 복사</div></div> <p>여기에서는 500세대(훈련 데이터에 대한 반복) 동안 모델을 훈련합니다. 훈련 후 모델을 사용하여 입력 값 5에 대한 출력을 예측합니다. 이는 9에 가까운 값을 반환해야 합니다(y = 2*5 - 1 = 9).</p> <h2> 3. 브라우저에서 모델 실행 </h2> <p>브라우저에서 이 모델을 실행하려면 TensorFlow.js 라이브러리와 JavaScript 코드가 포함된 HTML 파일이 필요합니다.<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TensorFlow.js Example</title> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script> <script defer src="app.js"></script>