pbj0812의 코딩 일기

[Tensorflow] tensorflow.js 에서 학습 상황 모니터링하기 본문

인공지능 & 머신러닝/TensorFlow

[Tensorflow] tensorflow.js 에서 학습 상황 모니터링하기

pbj0812 2021. 1. 10. 00:48

0. 목표

 - tfjs-vis 를 이용한 tensorflow.js 내에서의 학습 상황 모니터링

1. vis.html

 - tfjs-vis import 필요

 - tfvis.show.modelSummary 를 이용하면 모델의 구조를 시각화

 - tfvis.show.history 를 이용하여 학습 상황 시각화

<!DOCTYPE html>
<html>
 
<head>
    <title>TensorFlow.js Tutorial - lemon</title>
 
    <!-- Import TensorFlow.js -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis"></script>
     
</head>
 
<body>
    <script>
        // 1. 데이터 준비합니다. 
        var xx = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        var yy = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
        var reason = tf.tensor(xx);
        var result = tf.tensor(yy);
 
        // 2. 모델의 모양을 만듭니다. 
        var X = tf.input({ shape: [1] });
        var Y = tf.layers.dense({ units: 1 }).apply(X);
        var model = tf.model({ inputs: X, outputs: Y });
        var compileParam = { optimizer: tf.train.adam(), loss: tf.losses.meanSquaredError }
        model.compile(compileParam);
        tfvis.show.modelSummary({name:'summary', tab:'model'},model);
 
        // 3. 데이터로 모델을 학습시킵니다. 
        console.log('model run');
        var _history = [];
        var fitParam = { 
            epochs: 100,
            callbacks: {
                onEpochEnd:
                    function(epoch, logs){
                        console.log('epoch', epoch, logs, 'RMSE : ', Math.sqrt(logs.loss));
                        _history.push(logs);
                        tfvis.show.history({name:'loss', tab:'history'}, _history, ['loss'])
                    }
            }
        } 
        
        console.log('model save');
        model.fit(reason, result, fitParam).then(function (result) {
            model.save('localstorage://my_model');
        });
    </script>
</body>
 
</html>

2. main.js

var http = require('http');
var fs = require('fs');
var app = http.createServer(function(request,response){
    var url = request.url;
    if(request.url == '/'){
      url = '/vis.html';
    }
    if(request.url == '/favicon.ico'){
      return response.writeHead(404);
    }
    response.writeHead(200);
    response.end(fs.readFileSync(__dirname + url));
 
});
app.listen(3001);

3. 실행

node main.js

4. 결과

 - localhost:3001

 1) model 탭

  - 모델의 구조 확인 가능

 2) history 탭

  - 실시간으로 모델 학습 상황 확인 가능

5. 참고

 - tensorflowjs-vis

 - tfjs-vis

Comments