IT & Art

오늘은 ROS 컨트롤러와 영상을 보여주는 React 웹앱을 만들고 CLOi 시뮬레이터에 연결해 보겠습니다. React-Nipple 먼저 조이스틱을 직접 만들기 어려우니, 널리 알려진 nipple.js를 사용합니다. React에서 사용할 수 있는 버전이 npm에서 제공되므로 그걸 사용합니다. react-nipple A react wrapper for the [nipplejs](https://www.npmjs.com/package/nipplejs) on-screen-joystick. www.npmjs.com ReactNipple 설치 후 import해서 move, end 이벤트만 처리하면 되는데요, 조이스틱을 움직이기 시작하면 start(무시해도 됩니다) 이벤트 이후 지속적으로 move 이벤트가 올라오고 조..

Text-to-Speech 활성화Node 앱설치부터#npm i --save @google-cloud/text-to-speech수정사항const start = (client) => { ...중략... client.on('tts', (text) => { console.log("---TTS Audio Data from Text Requested: ", text); getAudioBufferFromText(text).then((results) => { console.log("results: ", results); client.emit('ttsResult', results); }).catch((err) => console.lo..

지난 편에서 ROS2와 LG CLOi 시뮬레이터를 설치하고 터미널에서 명령을 보내봤습니다. 오늘은 방향키 GUI를 가진 React 웹앱을 만들어 연결해 봅시다. CLI - Subscribe 테스트 지난 편에서 키보드를 누르면 ROS 토픽(/cloi1/cmd_vel)으로 데이터가 publish되어 시뮬레이터의 클로이를 움직였는데요, 클로이가 해당 토픽에 subscribe하고 있기 때문에 움직일 수 있던 거에요. 이는 ROS2 CLI로도 확인할 수 있는데요, ros2 topic echo 명령을 치면, 키보드를 누를 때 전송되는 데이터를 확인할 수 있습니다. $ ros2 topic echo /cloi1/cmd_vel linear: x: 0.0 y: 0.0 z: 0.0 angular: x: 0.0 y: 0.0 ..

ROS는 로봇을 컨트롤하는 기술입니다. OS라기보다는 (MQTT처럼) publish-subscribe 구조로 명령과 상태를 주고 받는 메시지 브로커에 가깝죠. 꼭 로봇이 없어도 시뮬레이터를 사용해 ROS를 해볼 수 있는데요, 오늘은 인천공항 로봇으로 널리 알려진 LG CLOi 로봇 시뮬레이터를 통해 작업해 보겠습니다. ROS2 설치 및 실행 ROS는 ROS1과 ROS2 두 개 버전이 있는데요, ROS1에 비해 ROS2는 설치부터 아주 간단합니다. ROS1 설치하려면 준비과정도 복잡하고 오류도 많이 나는 데다가 설치 후에도 설정해 줄 것들이 많아요. 따라서 우리는 ROS2를 사용하겠습니다. 윈도우나 맥에서도 ROS2를 깔 수 있지만, 여기서는 리눅스(Ubuntu 18.04 LTS)를 기준으로 합니다. In..

★Sample Code(Github) 인공지능, 딥러닝 하면 떠오르는 텐서플로우(TensorFlow)를 웹앱에서도 개발 및 사용할 수 있는 TensorFlow.js 자바스크립트 머신러닝 라이브러리에 대해 알아봅시다. TensorFlow.js | 자바스크립트 개발자를 위한 머신러닝 브라우저, Node.js 또는 Google Cloud Platform에서 모델을 학습시키고 배포합니다. TensorFlow.js는 자바스크립트 및 웹 개발을 위한 오픈소스 ML 플랫폼입니다. www.tensorflow.org 인공지능 서비스는 특히 영상(Vision)과 음성(Speech) 서비스에 특화되어 있는데요, AWS AI, Google Cloud AI 등 세계적인 클라우드 기반 AI 서비스를 들여다 보면 얼굴, 포즈, 사..

★Sample Code(Github) 지난 기본편 튜토리얼에서 위와 같은 시스템을 만들었죠. 오늘은 그 첫 걸음이자 워밍업으로 실제 기상청 날씨 API를 연동해 보겠습니다. 기상자료개방포털[데이터:오픈 API] data.kma.go.kr 날씨예보 API 등록 먼저 공공데이터포털 가입합니다. 공공데이터 포털 국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Datase www.data.go.kr 동네예보 서비스 검색 후 활용 신청합니다. 활용 조건이 저작자 표시니까 아래와 같이 기재하면 되겠네요. 본 저작물은 기상청에서 2021년 작성하여 공공누리 제1유형으로 개방한 동네예보..

React 3D 웹앱 Basic 시리즈입니다. React 3D 웹앱 - 1. 개요 React 3D 웹앱 - 2. Three.js React 3D 웹앱 - 3. 3D 모델 React 3D 웹앱 - 4. 3D 뷰어 Github 지난 편에서는 3D 앱에 넣을 애셋(재료)들을 구해봤습니다. 애셋들을 이용해서 React 3D 웹앱을 만들어 봅시다. 오늘의 목표 위와 같은 구성으로 앱을 만들어 볼 텐데요, 우선 create-react-library 패키지를 사용해서 React 라이브러리를 만듭니다. create-react-library react3d 애셋들은 create-react-library로 자동 생성된 example 앱의 public 폴더 안에 넣습니다. 3D 캐릭터는 public/character/, HD..

Dialogflow 웹앱 시리즈입니다. Dialogflow - 1. Intent Dialogflow - 2. Context Dialogflow - 3. Fulfillment Dialogflow - 4. 외부 사이트 연동 Dialogflow - 5. Webhook Dialogflow - 6. 클라이언트 Dialogflow - 7. 챗봇 클라이언트 Dialogflow - 8. Node.js 클라이언트 Dialogflow - 9. React 클라이언트 ★Sample Code 지난 시간에는 React App을 Dialogflow와 바로 연결할 수 없어서 Node App을 구현했습니다. 오늘은 마지막으로 React App과 Node App을 음성으로 연동해 보겠습니다. React App 생성 먼저 React 라이..

Dialogflow 웹앱 시리즈입니다. Dialogflow - 1. Intent Dialogflow - 2. Context Dialogflow - 3. Fulfillment Dialogflow - 4. 외부 사이트 연동 Dialogflow - 5. Webhook Dialogflow - 6. 클라이언트 Dialogflow - 7. 챗봇 클라이언트 Dialogflow - 8. Node.js 클라이언트 Dialogflow - 9. React 클라이언트 ★Sample Code 지금까지 클라이언트 사이드에서 텍스트 기반 웹앱과 챗봇을 살펴봤어요. 이제 오디오 입력을 받아 처리하는 React App만 남았는데요, React App 같은 웹앱은 Dialogflow와 직접 통신할 수 없습니다. Dialogflow AP..

Dialogflow 웹앱 시리즈입니다. Dialogflow - 1. Intent Dialogflow - 2. Context Dialogflow - 3. Fulfillment Dialogflow - 4. 외부 사이트 연동 Dialogflow - 5. Webhook Dialogflow - 6. 클라이언트 Dialogflow - 7. 챗봇 클라이언트 Dialogflow - 8. Node.js 클라이언트 Dialogflow - 9. React 클라이언트 ★Sample Code 지난 시간에는 텍스트 기반 클라이언트 웹앱을 만들어 보았습니다. 오늘은 유명한 메신저 서비스, Slack에 챗봇을 연동해 보겠습니다. Slack 챗봇 연동 널리 알려진 메신저 서비스들의 챗봇으로 연동할 수도 있습니다. Integration..