2021년 11월 23일 화요일
2021년 11월 22일 월요일
HTML5 웹기반 인터렉티브 그래픽 개발 도구 Konva 소개
이 글은 konva를 이용한 HTML5 기반 인터렉티브 그래픽 개발 도구를 간략히 이야기한다.
- konvajs 사이트
콘바(Konva)는 웹 기반 인터렉티브 그래픽을 지원하는 HTML5 Canvas JavaScript 프레임워크이다. 콘바는 고성능 애니메이션, 화면 전환, 그래픽 노드 오버레이, 계층화, 필터링, 캐싱, 데스크톱 및 모바일 애플리케이션에 대한 이벤트 처리 등을 가능하게 한다. 이를 이용해, 딥러닝 라벨링 도구 같은 웹 기반 그래픽 편집기, 게임 등을 쉽게 개발할 수 있다.
콘바 기반 웹 그래픽 설명 서비스
개념
콘바는 가상 무대에 객체를 그리고, 이벤트 리스너를 추가한 후, 이동하고, 크기를 조정하거나, 다른 모양과 독립적으로 회전하는 등 애니메이션을 지원한다.
콘바는 다음과 같은 계층적 구조를 가진다.
설치
node.js 설치 후 다음 명령을 명령창에서 입력한다.
npm install konva
혹은 html 이나 자바 스크립트 파일에 아래 태그를 포함한다.
<script src="https://unpkg.com/konva@8/konva.min.js"></script>
사용 방법
콘바는 웹 기반 그래픽 처리를 위해 여기와 같은 다양한 API를 제공한다.
이러한 기능을 이용해, 다음 그래픽을 생성하는 예제를 확인해 보자.
다음 스크립트를 html로 저장해 크롬 등에서 실행해보자. 코드 명령 실행 순서는 위에서 소개한 개념도와 같이, 스테이지를 만든 후, 레이어에 툴팁, 라벨 등 도형을 추가한다. 콘바는 이와 같이 매우 직관적으로 동작되므로, 이해가 그리 어렵지 않다.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/konva@8.3.0/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Label Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight,
});
var layer = new Konva.Layer();
// tooltip
var tooltip = new Konva.Label({
x: 170,
y: 75,
opacity: 0.75,
});
tooltip.add(
new Konva.Tag({
fill: 'black',
pointerDirection: 'down',
pointerWidth: 10,
pointerHeight: 10,
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 10,
shadowOffsetX: 10,
shadowOffsetY: 10,
shadowOpacity: 0.5,
})
);
tooltip.add(
new Konva.Text({
text: 'Tooltip pointing down',
fontFamily: 'Calibri',
fontSize: 18,
padding: 5,
fill: 'white',
})
);
// label with left pointer
var labelLeft = new Konva.Label({
x: 20,
y: 130,
opacity: 0.75,
});
labelLeft.add(
new Konva.Tag({
fill: 'green',
pointerDirection: 'left',
pointerWidth: 20,
pointerHeight: 28,
lineJoin: 'round',
})
);
labelLeft.add(
new Konva.Text({
text: 'Label pointing left',
fontFamily: 'Calibri',
fontSize: 18,
padding: 5,
fill: 'white',
})
);
// simple label
var simpleLabel = new Konva.Label({
x: 180,
y: 150,
opacity: 0.75,
});
simpleLabel.add(
new Konva.Tag({
fill: 'yellow',
})
);
simpleLabel.add(
new Konva.Text({
text: 'Simple label',
fontFamily: 'Calibri',
fontSize: 18,
padding: 5,
fill: 'black',
})
);
// add the labels to layer
layer.add(tooltip).add(labelLeft).add(simpleLabel);
// add the layer to the stage
stage.add(layer);
</script>
</body>
</html>
Konva 기반 딥러닝 라벨링 도구 개발 사례
콘바를 이용하면, 딥러닝 학습 데이터 생성에 필요한 라벨링 도구를 웹기반으로 쉽게 개발할 수 있다. 다음은 관련 개발 사례이다.
마무리
이 글은 웹기반 인터렉티브 그래픽 에디터, 애니메이션 등 다양한 곳에 사용되는 콘바를 간략히 소개하였다. 콘바는 매우 많은 데모를 제공하여, 개발자가 손쉽게 서비스를 개발할 수 있도록 지원한다. 관심이 있다면, 아래 링크를 참고하길 바란다.
Reference
NVIDIA 기반 대규모 병렬 로보틱스 학습 기술
이 글은 NVIDIA 기반 대규모 병렬 로보틱스 학습 시뮬레이션 방법을 간략히 소개한다.
이 기술은 단일 GPU에서 대규모 병렬 처리를 사용해, 로봇을 4분 이내에 평평한 지형에서, 20분 내에 고르지 않은 지형도 걷을 수 있게 학습한다. ETH Zurich와 NVIDIA의 연구팀은 Massively Parallel Deep Reinforcement Learning을 사용하여 몇 분 안에 걷는 법(Learn to Walk in Minutes)이라는 논문을 릴리즈했다.
이 기술은 이전 방법과 비교할 때 훈련 시간을 몇 배나 줄일 수 있다. 현재 강화 학습 접근 방식은 데이터 수집과 정책 업데이트로 구성된다. PCIe(Peripheral Component Interconnect Express)를 통한 데이터 전송은 GPU 처리 시간보다 50배 느릴 수 있다. 이러한 문제를 극복하기 위해, 제안된 DRL 알고리즘은 PPO(Proximal Policy Optimization) 알고리즘을 기반으로 하며 모든 데이터를 GPU에 저장하도록 설계되었다.
연구팀은 단일 워크스테이션 GPU에서 Isaac Gym 물리 시뮬레이션 환경을 기반으로한 DRL 알고리즘으로 로봇을 훈련하는 여러 평가 실험을 수행했다. 실험 결과 흥미로운 관찰 결과가 나왔습니다. 시뮬레이션 및 배치 실험을 수행하여 최대 0.2m(가장 어려운 계단 난이도)까지 로봇이 오르내리는 성공률이 거의 100%에 달했다.
전반적으로 이 연구는 수천 대의 로봇이 병렬로 걷도록 가르치는 데 필요한 훈련 시간을 줄일 수 있음을 보여준다.
레퍼런스
2021년 11월 16일 화요일
LaTex 파일 MS Word로 변환하기
이 글은 수학, 논문, 연구 등 다양한 곳에서 사용하는 LaTex (라텍스) 파일 포맷을 워드파일로 변환하는 방법을 간략히 설명한다.
변환을 위해 컴파일러를 다운로드 받아 설치한다. 여기서는 pandoc을 사용한다.
다음 링크에서 다운로드해 프로그램을 설치한다.
pandoc 사용 방법은 다음과 같다.
라텍스에서 워드로 변환하는 명령은 다음과 같다.
pandoc -s MANUAL.txt -o example29.docx
레퍼런스
2021년 11월 1일 월요일
미국 생활의 장점과 단점
이 글은 미국 교환교수 생활 중에 느낀 장점과 단점을 간략히 정리한다.
장점
1. 한국처럼 다른 사람 시선에 신경쓰지 않아도 된다. 옷차림, 잘사는 수준, 결혼유무, 직장유무, 공부 등등
2. 차별이 별로 없다. 의외로 인종차별, 나이, 성별, 장애인 등에 차별이 없으며, 기회가 많다. 예. 차별금지법
3. 불법만 명시하고 나머지는 알아서 개인이 책임지는 네가티브 규제를 한다. 예. 규제 관점
4. 퇴근 시간이 보통 5시라, 자유시간이 많다. 주말은 누구도 터치하지 않는다. 예. 직장 문화
5. 사회적 소수자, 장애인 등에 대한 제도적 지원이 확실하다. 예. 제도적 지원
6. 사회에서 누가 실수를 해도 본인이 노력하면 다시 기회를 준다. 예. 로버트 다우너 등
7. 경쟁이 적다. 예를 들어, 학교, 직장, 사업 등에서 경쟁은 한국에 비해 적다.
8. 자연이 아름답다. 동물친화적이다.
9. 일처리가 합리적이다.
10. 일반적으로 사람들이 친절하다.
11. 법을 잘 지킨다. 법과 규정에 어긋나면 언론에 크게 알려지며, 소송을 당할 수 있다.
단점
1. 의료보험이 열악하다. 보험비 등이 비싸다.
2. 총기사고, 마약사고가 많아 위험하다. 다운타운에는 밤에 산책하기 어려울만큼 위험하다. 예. 총기사고
3. 일처리가 늦다. 특히, 관공서, 병원 등은 매우 느리다.
4. 모든 서비스는 전화로 예약해야 한다. 당연히, 영어를 잘 모르면 불편한 점이 많다.
5. 지역차가 있으나 일반적으로는 렌트비, 인건비 등이 비싸다.
6. 한국에 비해 맛집, 놀만한 곳이 별로 없다.
7. 인구밀도가 매우 낮기 때문에 외롭고 심심한 경우가 많다.
8. 영어를 어느정도해도, 문화적으로 이웃과 매우 친해지기란 힘들다.
9. 대중교통이 불편하다. 차가 없으면 생활하기 어렵다.
10. 주변에 도움을 받을 친인척이 별로 없다.
11. 시민들의 신고정신이 투철하다. 법과 규칙을 어길경우 적당히 지나가지 않는다.
느린 일처리
기타, 분권적 정부 사회 제도 및 인프라 시스템, 실무경력중시, 문서 이메일중심 업무처리, 개인주의 사고방식, 철저한 신용사회, 컨센서스 중심, DIY와 파티문화 등 많은 차이점이 있다. 겉으로 보기에는 한국과 비슷해 보이는 부분이 있는 것처럼 보이지만(한국에서 미국을 많이 벤치마킹했으므로), 실제 실행되는 상황은 전혀 다르다고 보면 된다. 미국은 장단점이 매우 확실한 나라이다.
피드 구독하기:
글 (Atom)