[react] React와 TensorFlow의 통합 방법

26 Dec 2023

react

React와 TensorFlow를 통합하여 머신 러닝 모델을 웹 애플리케이션에 통합하는 방법에 대해 알아봅니다.

1. TensorFlow.js 소개

TensorFlow.js는 웹 애플리케이션에서 머신 러닝 모델을 실행하고 훈련시키기 위한 라이브러리로, TensorFlow의 JavaScript 버전입니다. TensorFlow.js를 사용하면 브라우저에서 실시간으로 머신 러닝을 수행할 수 있습니다.

2. React에서 TensorFlow.js 사용하기

React 애플리케이션에서 TensorFlow.js를 사용하려면, 다음과 같은 단계를 따를 수 있습니다.

TensorFlow.js 라이브러리 설치: 프로젝트에 TensorFlow.js 라이브러리를 설치합니다.

npm install @tensorflow/tfjs

모델 로드: 미리 훈련된 TensorFlow 모델을 로드하거나, 웹 애플리케이션에서 모델을 훈련시킬 수 있습니다.
데이터 처리: React에서 가져온 데이터를 TensorFlow 모델에 입력으로 제공하고 결과를 처리합니다.
결과 표시: TensorFlow 모델의 출력을 React 컴포넌트에 표시합니다.

3. 예제

다음은 React에서 TensorFlow.js를 사용하여 간단한 이미지 분류기를 구현하는 예제입니다.

import React, { useState, useEffect } from 'react';
import * as tf from '@tensorflow/tfjs';
import * as mobilenet from '@tensorflow-models/mobilenet';

function ImageClassifier() {
  const [model, setModel] = useState(null);
  const [image, setImage] = useState(null);
  const [predictions, setPredictions] = useState(null);

  useEffect(() => {
    async function loadModel() {
      const loadedModel = await mobilenet.load();
      setModel(loadedModel);
    }
    loadModel();
  }, []);

  const handleImageUpload = (event) => {
    const file = event.target.files[0];
    const imageUrl = URL.createObjectURL(file);
    setImage(imageUrl);
    predictImage(file);
  };

  const predictImage = async (file) => {
    const img = await tf.browser.fromPixels(image);
    const processedImg = tf.image.resizeBilinear(img, [224, 224]).toFloat().div(255);
    const prediction = await model.classify(processedImg);
    setPredictions(prediction);
  };

  return (
    <div>
      <input type="file" onChange={handleImageUpload} />
      {image && <img src={image} alt="Uploaded" />}
      {predictions && (
        <ul>
          {predictions.map((prediction, i) => (
            <li key={i}>{prediction.className} - {prediction.probability.toFixed(2)}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

이 예제에서는 React 함수 컴포넌트를 사용하여 이미지를 업로드하고, TensorFlow.js 모델을 사용하여 이미지를 분류합니다.

4. 결론

React와 TensorFlow.js를 통합하여 웹 애플리케이션에서 실시간 머신 러닝을 수행하는 것은 간단하지만 강력한 기능을 제공합니다. 이를 통해 사용자는 훈련된 모델을 사용하여 웹 애플리케이션에서 머신 러닝을 활용할 수 있습니다.

참고 자료

TensorFlow.js 공식 문서: TensorFlow.js 문서
React 공식 문서: React 문서