JS로 만드는 AI : TensorFlow.js - 4. 남의 모델을 이용하기 (생활코딩)

KHW·2021년 1월 4일

데이터분석

목록 보기

5/13

생활코딩 내용을 간단히 정리한다.

Tensorflow.js 사이트를 통해 우리는 다양한 이미 존재하는 모델을 사용 할 수 있다.
그 중 이미지를 검색하는 모델을 사용하고자 하는데 이미지 분류에 들어가서

<!-- Load TensorFlow.js. This is required to use MobileNet. -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.1"> </script>
<!-- Load the MobileNet model. -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@1.0.0"> </script>

<!-- Replace this with your image. Make sure CORS settings allow reading the image! -->
<img id="img" src="cat.jpg"></img>

<!-- Place your code in the script tag below. You can also use an external .js file -->
<script>
  // Notice there is no 'import' statement. 'mobilenet' and 'tf' is
  // available on the index-page because of the script tag above.

  const img = document.getElementById('img');

  // Load the model.
  mobilenet.load().then(model => {
    // Classify the image.
    model.classify(img).then(predictions => {
      console.log('Predictions: ');
      console.log(predictions);
    });
  });
</script>

위의 기본코드를 가져와서 실행에 옮긴다. 해당 코드의 script는 맨위는 tensorflow.js를 가져오고 그 다음 코드는 해당 model을 가져온다.

그 후 가져온 img를 통해 모델로 예측을 진행하여 결과값을 출력시켜주는 형태이다.

ex) 고양이

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
</head>
<body>
<!-- Load TensorFlow.js. This is required to use MobileNet. -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.1"> </script>
<!-- Load the MobileNet model. -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@1.0.0"> </script>

<!-- Replace this with your image. Make sure CORS settings allow reading the image! -->
<img id="img" src="src/cat.jpg"></img>

<!-- Place your code in the script tag below. You can also use an external .js file -->
<script>
    // Notice there is no 'import' statement. 'mobilenet' and 'tf' is
    // available on the index-page because of the script tag above.

    const img = document.getElementById('img');

    // Load the model.
    mobilenet.load().then(model => {
        // Classify the image.
        model.classify(img).then(predictions => {
            console.log('Predictions: ');
            console.log(predictions);
        });
    });
</script>
</body>
</html>

해당 코드를 통해 고양이 사진을 분석하는 모델을 통해 결과를 보면

고양이에서도 tabby cat일 가능성이 69퍼정도로 가장 높다.

사자

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
</head>
<body>
<!-- Load TensorFlow.js. This is required to use MobileNet. -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.1"> </script>
<!-- Load the MobileNet model. -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@1.0.0"> </script>

<!-- Replace this with your image. Make sure CORS settings allow reading the image! -->
<img id="img" src="src/lion.jpg"></img>

<!-- Place your code in the script tag below. You can also use an external .js file -->
<script>
    // Notice there is no 'import' statement. 'mobilenet' and 'tf' is
    // available on the index-page because of the script tag above.

    const img = document.getElementById('img');

    // Load the model.
    mobilenet.load().then(model => {
        // Classify the image.
        model.classify(img).then(predictions => {
            console.log('Predictions: ');
            console.log(predictions);
        });
    });
</script>
</body>
</html>