본문 바로가기
[자바스크립트] dat.GUI - GUI 만들기 진행중인 프로젝트의 GUI 부분에서 애로사항이 발생했습니다. 전부터 눈여겨 보던 dat.GUI 라이브러리를 이용해 해결하려 합니다. 구글 데이터 아트팀 개발. 경량 그래픽 사용자 인터페이스. 사용하기 쉽다. 훨씬 보기 좋고 사용하기에도 좋아보입니다. 조금씩 업데이트해서 기존 GUI와 비교해보도록 하겠습니다. [끝]. 2021.03.31 - 코드 안의 params.Label을 params.knn_label로 오타 수정했습니다. 2021. 3. 24.
[자바스크립트] Node.js - Tensorflow.js Generator를 이용한 데이터셋 만들기 파이썬의 케라스처럼 Tensorflow.js에도 data generator가 있습니다. Javascript에서는 function* 처럼 표현을 하는데요, 사용하면서 주의점이 하나 있는데 일반 함수처럼 인자를 받으면 제대로 작동하지 않습니다. -> function* imageGenerator(x) 실행 안됨... 따라서 imgPath 라는 이미지파일 경로를 저장한 배열이 전역변수로 필요합니다. let imgPath = []; async function* imageGenerator() { for (let i = 0; i < imgPath.length; i++) { console.log(i); const img = await loadImage(imgPath[i]); const tens = await tf.br.. 2021. 1. 23.
[자바스크립트] Node.js - 이미지파일 불러오기 (pureimage) Tensorflow.js 이미지 분류기를 사용하는데 필요한 기능입니다. 전의 글에서는 이미지 파일의 경로를 가져왔다면, 이번에는 파일을 읽어들이는 예제입니다. node-canvas(이하 canvas)는 네이티브 라이브러리기 때문에 빠르지만 node-pre-gyp의 컴파일이 필요합니다. 즉, 에러가 발생하기 쉽고 설치가 어려운 단점이 있습니다. (어제 이상없이 설치했는데 오늘은 설치가 안됨...) pureimage는 순수 javascript로 만들어서 별다른 오류없이 쉽게 설치가 가능합니다. 가끔씩 pureimage에서 파일을 읽어들일때 에러가 발생해서 canvas를 이용했었는데, 최근 오류가 수정된듯 하여 앞으로 pureimage를 쓸 예정입니다. //pureimage const PImage = requ.. 2021. 1. 23.
[자바스크립트] Node.js - 하위경로 이미지 파일의 경로 읽기 Tensorflow.js를 이용한 이미지 분류기를 학습시키기 위해서는 가장 먼저 데이터셋을 만들어야 합니다. 저는 사용할 스크립트(index.js)와 동일한 위치에 shapes 라는 이름의 폴더를 만들고, 다음과 같이 디렉토리를 구성하여 학습 자료로 사용했습니다. - ./shapes/circle/circle001~020.png - ./shapes/triangle/triangle001~020.png - ./shapes/rectangle/rectangle001~020.png 총 3종류의 클래스(circle, triangle, rectangle)가 있고 각각 20개의 이미지 파일을 가지고 있습니다. 제가 사용한 스크립트는 시작할 폴더위치(shapes)를 지정하면 하위 폴더(circle, triangle, re.. 2021. 1. 23.
[자바스크립트] Node.js - Tensorflow.js를 이용한 이미지 분류 예제 안녕하세요? 만들오 입니다. 요즘 머신러닝 공부를 하고있습니다. Python이 쉽고 또 많이 사용하기 때문에 접근하기 좋지만 Javascript 언어로 사용할 수 있는 방법이 있어 소개를 드립니다. tensorflow.js의 가장 큰 장점은 브라우저에서 결과물을 쉽게 사용할 수 있다는점 입니다. 오늘은 그동안 작업한 최종 결과물만 공유하고 나중에 조금씩 나누어서 글을 작성해 보겠습니다. const tf = require('@tensorflow/tfjs-node'); const path = require('path'); const fs = require('fs'); const { createCanvas, loadImage } = require('canvas'); const canvas = createCan.. 2021. 1. 23.
[자바스크립트] Node.js - Socket.io 사용 예제 안녕하세요? 만들오 입니다. Socket.io를 사용한 예제를 기록합니다. const app = require('express')() const http = require('http').createServer(app) const io = require('socket.io')(http) app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html') }) io.on('connection', function(socket){ socket.emit('fromServer', 'Welcome to my server.') socket.on('event', function(data){ console.log(data) }) socket.on('discon.. 2021. 1. 23.