TensorFlowJS 좋다. 이제 더 이상 API 방식을 쓰지 않아도 웹브라우저 상에서 바로 TensorFlow Model을 사용할 수 있어서 그 반응 속도가 참 좋다 ㅎㅎ 물론 모델을 다운로드 받는 시간이 좀 있다는 건 함정 ㅋ 그래도 브라우저 캐쉬가 잘되게 4MB 단위로 잘 청크되어있으니 믿고 간다.

Angular에서 TFJS를 연동하다보면 몇가지 이슈에 부딪히게 된다. 간단히 해결한 내용을 공유해본다.

WARNING

WARNING in ./node_modules/@tensorflow/tfjs-core/dist/tf-core.esm.js
Module not found: Error: Can't resolve 'crypto' in '/Users/flynn/Projects/bluewhale/tfjs/node_modules/@tensorflow/tfjs-core/dist'

WARNING in ./node_modules/@tensorflow/tfjs-data/dist/tf-data.esm.js
Module not found: Error: Can't resolve 'crypto' in '/Users/flynn/Projects/bluewhale/tfjs/node_modules/@tensorflow/tfjs-data/dist'

crypto 이건 node에 있는 모듈인데 흠... 아래 방식으로 해결

const fs = require('fs');
const f = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js';

fs.readFile(f, 'utf8', function (err,data) {
  if (err) {
    return console.log(err);
  }
  var result = data.replace(/node: false/g, 'node: {crypto: true, stream: true}');

  fs.writeFile(f, result, 'utf8', function (err) {
    if (err) return console.log(err);
  });
});

• Referernce: https://gist.github.com/niespodd/1fa82da6f8c901d1c33d2fcbb762947d

@tensorflow/tfjs-vis TypeScript Error

학습도 시켜보려고 해서 학습된 상태를 보여주려면 @tensorflow/tfjs-vis 이 모듈을 쓰고 있길래 설치하고 서버를 띄우니 TypeScript 오류가 주르륵...

ERROR in node_modules/vega-embed/node_modules/vega-lite/build/src/legend.d.ts(46,18): error TS2320: Interface 'Legend' cannot simultaneously extend types 'BaseLegend<number, number, string, string, FontWeight, Align, TextBaseline, LayoutAlign, LabelOverlap, string, StringValue, DashArrayValue, OrientValue, AnchorValue, "left" | ... 8 more ... | "bottom-right">' and 'LegendMixins'.
  Named property 'labelOverlap' of types 'BaseLegend<number, number, string, string, FontWeight, Align, TextBaseline, LayoutAlign, LabelOverlap, string, StringValue, DashArrayValue, OrientValue, AnchorValue, "left" | ... 8 more ... | "bottom-right">' and 'LegendMixins' are not identical.
...

다행이 skipLibCheck 이 옵션으로 해결

tsconfig.json

...
"compilerOptions": {
  ...
  "skipLibCheck": true
}
...

사용하는 라이브러리의 타입체크는 포기하면 잘된다.

계속해서 이슈가 발생할때마다 이 문서를 업데이트 할 예정이다.