[Day36] 얼굴 표정 인식으로 이모티콘 보이는 웹 어플리케이션 만들기
오늘 실습한 내용은 카메라로 사람의 얼굴 표정을 (표정이 밝은지 어두운지를) 인식한 후, 거기에 맞게 이미지를 보여주는 어플리케이션을 만들어 보는 것이었습니다. 이것을 웹 어플리케이션으로 구현하기 위해 TFJS라는 모바일 넷 프레임워크를 사용하였고, 웹 사이트로 구동시키기 위해서 깃허브 페이지를 이용했습니다. 아래 구현하는 데 도움이 되는 여러 글들을 공유합니다.
W3Schools Online Web Tutorials
HTML Example:
This is a heading
This is a paragraph.
Try it Yourself » CSS Example: body { background-color: lightblue; } h1 { color: white; text-align: ce
www.w3schools.com
2. 웹 표준과 호환성
www.smartebiz.kr/new/subpage02_02.html
웹 표준과 웹 호환성 - 웹 접근성 | 웹발전연구소
홈 > 웹 접근성 > 웹 표준과 웹 호환성 웹 표준(Web Standards) 정의 웹 표준이란 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준으로, 다른 기종 혹은 플랫폼에 따
www.smartebiz.kr
3. Chrome DevTools
developers.google.com/web/tools/chrome-devtools
Chrome DevTools | Google Developers
Option 1
developers.google.com
4. Web Development Tools
developer.apple.com/safari/tools/
Tools - Safari - Apple Developer
Powered by the WebKit engine, Safari offers a great set of built-in web development tools.
developer.apple.com
5. Tensors
TensorFlow.js | 자바스크립트 개발자를 위한 머신러닝
브라우저, Node.js 또는 Google Cloud Platform에서 모델을 학습시키고 배포합니다. TensorFlow.js는 자바스크립트 및 웹 개발을 위한 오픈소스 ML 플랫폼입니다.
www.tensorflow.org
6. Making predictions from 2d data
www.tensorflow.org/js/tutorials/training/linear_regression
Making predictions from 2d data | TensorFlow.js
이 자습서에서는 자동차 세트를 설명하는 숫자 데이터에서 예측을 수행하도록 모델을 학습합니다. 이 연습에서는 다양한 종류의 모델을 학습하는 데 일반적인 단계를 보여 주지만 작은 데이터
www.tensorflow.org
7. 모델
TensorFlow.js 모델
모든 프로젝트에서 즉시 사용할 수 있는 선행 학습된 TensorFlow.js 모델을 탐색하세요.
www.tensorflow.org
8. MobileNet
github.com/tensorflow/tfjs-models/tree/master/mobilenet
tensorflow/tfjs-models
Pretrained models for TensorFlow.js. Contribute to tensorflow/tfjs-models development by creating an account on GitHub.
github.com
9. 값으로서의 함수와 콜백
opentutorials.org/course/743/6508
값으로서의 함수와 콜백 - 생활코딩
값으로서의 함수 JavaScript에서는 함수도 객체다. 다시 말해서 일종의 값이다. 거의 모든 언어가 함수를 가지고 있다. JavaScript의 함수가 다른 언어의 함수와 다른 점은 함수가 값이 될 수 있다는
opentutorials.org
10. WebRTC samples getUserMedia ⇒ canvas
webrtc.github.io/samples/src/content/getusermedia/canvas/
getUserMedia to canvas
WebRTC samples getUserMedia ⇒ canvas Take snapshot Draw a frame from the video onto the canvas element using the drawImage() method. The variables canvas, video and stream are in global scope, so you can inspect them from the console. View source on GitH
webrtc.github.io
11. webrtc / samples
github.com/webrtc/samples/tree/gh-pages/src/content/getusermedia/canvas
webrtc/samples
WebRTC Web demos and samples. Contribute to webrtc/samples development by creating an account on GitHub.
github.com
12. HTML Canvas Reference
www.w3schools.com/tags/ref_canvas.asp
HTML Canvas Reference
HTML Canvas Reference HTML Canvas Reference The HTML tag is used to draw graphics, on the fly, via scripting (usually JavaScript). To learn more about , please read our HTML Canvas tutorial. Colors, Styles, and Shadows Property Description fillStyle Sets o
www.w3schools.com
13. Githup pages
GitHub Pages
Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.
pages.github.com
14. HTTPS와 SSL 인증서
opentutorials.org/course/228/4894
HTTPS와 SSL 인증서 - 생활코딩
HTTPS VS HTTP HTTP는 Hypertext Transfer Protocol의 약자다. 즉 Hypertext 인 HTML을 전송하기 위한 통신규약을 의미한다. HTTPS에서 마지막의 S는 Over Secure Socket Layer의 약자로 Secure라는 말을 통해서 알 수 있듯이
opentutorials.org
15. Facial Expression
www.kaggle.com/ahmedmoorsy/facial-expression
Facial Expression
www.kaggle.com
16. Kaggle(캐글) API 사용법 - 데이터셋 다운로드와 제출을 손쉽게
teddylee777.github.io/kaggle/Kaggle-API-%EC%82%AC%EC%9A%A9%EB%B2%95
Kaggle(캐글) API 사용법 - 데이터셋 다운로드와 제출을 손쉽게
Kaggle API를 활용하여 데이터셋 다운로드와 바로 제출하는 방법에 대하여 알아보겠습니다.
teddylee777.github.io
17. Google facial expression comparison dataset
research.google/tools/datasets/google-facial-expression/
Google facial expression comparison dataset – Google Research
This dataset is a large-scale facial expression dataset consisting of face image triplets along with human annotations that specify which two faces in each triplet form the most similar pair in terms of facial expression. Each triplet in this dataset was a
research.google
18. Keras Applications
keras.io/api/applications/#mobilenetv2
Keras documentation: Keras Applications
Keras Applications Keras Applications are deep learning models that are made available alongside pre-trained weights. These models can be used for prediction, feature extraction, and fine-tuning. Weights are downloaded automatically when instantiating a mo
keras.io
19. TFJS Github
github.com/tensorflow/tfjs/tree/master/tfjs-converter
tensorflow/tfjs
A WebGL accelerated JavaScript library for training and deploying ML models. - tensorflow/tfjs
github.com