yceffort

Tensorflow.js - 07. Build an image classifier

Posted on February 03, 2020

Transfer learning image classifier 1. Introduction ๋ฐฐ์šฐ๊ฒŒ ๋  ๊ฒƒ 2. ์š”๊ตฌ ์‚ฌํ•ญ 3. Tensorflow.js์™€ MobileNet ๋ถˆ๋Ÿฌ์˜ค๊ธฐ 4. ๋ธŒ๋ผ์šฐ์ €์—์„œ MobileNet์„ ๋กœ๋”ฉ 5. MobileNet์„ ํ…Œ์ŠคํŠธ ํ•˜๊ธฐ Transfer learning image classifier ๋ณธ ํŠœํ† ๋ฆฌ์–ผ์—์„œ๋Š”, ๋ธŒ๋ผ์šฐ์ € ํ™˜๊ฒฝ์—์„œ Tesnorflow.js๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ปค์Šคํ…€ ์ด๋ฏธ์ง€ ๋ถ„๋ฅ˜๊ธฐ๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋ด…๋‹ˆ๋‹ค. ์ด๋ฒˆ ์žฅ์—์„œ๋Š”, ์ตœ์†Œํ•œ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ๋†’์€ ์ •ํ™•๋„๋ฅผ ๊ฐ€์ง„ ๋ชจ๋ธ์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•˜์—ฌ transfer learning(์ „์ดํ•™์Šต)์„ ํ™œ์šฉํ•ด๋ณผ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ์ด๋ฏธ ์ž˜ ํ•™์Šต๋˜์–ด ์žˆ๋Š” MobileNet์ด๋ผ๊ณ  ๋ถˆ๋ฆฌ์šฐ๋Š” ์ด๋ฏธ์ง€ ๋ถ„๋ฅ˜๊ธฐ๋ฅผ ํ™œ์šฉํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด ๋ชจ๋ธ์„ ๊ธฐ๋ฐ˜์œผ๋กœ, ์ด๋ฏธ์ง€ ํด๋ž˜์Šค๋ฅผ ์‚ฌ์šฉ์ž ์ •์˜ ํ•˜์—ฌ ํ•™์Šตํ•ด๋ณผ ๊ฒƒ์ž…๋‹ˆ๋‹ค. 1. Introduction ์ด๋ฒˆ ํŠœํ† ๋ฆฌ์–ผ์—์„œ๋Š”, ๊ฐ„๋‹จํ•œ teachable machineโ€ฆ

Read full post

Tensorflow.js - 06. What is Transfer Learning

Posted on January 22, 2020

์ „์ด ํ•™์Šต์ด๋ž€ ๋ฌด์—‡์ธ๊ฐ€? ์ „์ด ํ•™์Šต์ด๋ž€ ๋ฌด์—‡์ธ๊ฐ€? ์ •๊ตํ•œ ๋”ฅ๋Ÿฌ๋‹ ๋ชจ๋ธ์€ ์ˆ˜๋ฐฑ๋งŒ๊ฐœ์˜ ํŒŒ๋ผ๋ฏธํ„ฐ (๊ฐ€์ค‘์น˜)๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉฐ, ์ด๋ฅผ ์ฒ˜์Œ ๋ถ€ํ„ฐ ํ›ˆ๋ จํ•˜๋ ค๋ฉด ์—„์ฒญ๋‚œ ์–‘์˜ ์ปดํ“จํŒ… ์ž์›์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์Šต๋‹ˆ๋‹ค. ์ „์ดํ•™์Šต์€, ์ด๋ฏธ ๊ด€๋ จ๋œ ์ž‘์—…์— ๋Œ€ํ•ด ํ›ˆ๋ จ๋ฐ›์€ ๋ชจ๋ธ์˜ ํ•œ ๋ถ€๋ถ„์„ ์ทจํ•ด์„œ, ์ƒˆ๋กœ์šด ๋ชจ๋ธ์—์„œ ์ด๋ฅผ ์žฌ์‚ฌ์šฉํ•จ์œผ๋กœ์จ ์ด๋Ÿฌํ•œ ์ปดํ“จํŒ… ์ž์›์˜ ์†Œ๋ชจ๋ฅผ ๋‹จ์ถ•์‹œํ‚ค๋Š” ๊ธฐ์ˆ ์ž…๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ๋‹ค์Œ ํŠœํ† ๋ฆฌ์–ผ์€ ์ด๋ฏธ ์ด๋ฏธ์ง€๋‚ด์—์„œ 100โ€ฆ

Read full post

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ http ์š”์ฒญํ•˜๊ธฐ - fetch์— ๋Œ€ํ•œ ๊ณ ์ฐฐ

Posted on January 21, 2020

1. ์„œ๋ก  2. XMLHttpRequest 3. JQuery Ajax 3. async await & fetch 4. fetch polyfill 5. deep dive to fetch 5-1. ์—๋Ÿฌ ์ฒ˜๋ฆฌ 5-2. Abortable Fetch 5-3. fetch in react 6. ๊ฒฐ๋ก  1. ์„œ๋ก  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ http ์š”์ฒญ์„ ํ•˜๋Š” ๊ฒƒ์€ ์ด์ œ ๋น„์ผ๋น„์žฌํ•œ ์ผ์ด ๋˜์—ˆ๋‹ค. ์„œ๋ฒ„์—์„œ ๋ชจ๋“  ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์™€์„œ static ํ•œ html์„ ๋งŒ๋“ค์–ด์„œ ๋ณด์—ฌ์ฃผ๊ณ  ์žˆ๋Š” ์›นํŽ˜์ด์ง€๋Š” ์•„๋งˆ ์ฐพ๊ธฐ ์–ด๋ ค์šธ ๊ฒƒ์ด๋‹ค. ๋งจ ์ฒ˜์Œ ์›น์„ ๋ฐฐ์šธ ๋•Œ, jquery์˜ ajax ์š”์ฒญ์„ ๋ฐฐ์šฐ ๋˜ ๊ฒƒ์ด ํ•œ 5๋…„ ์ „ ์ฏค ๋˜์—ˆ๋‹ค. ๋น„๋™๊ธฐ http ์š”์ฒญ์ด ๋น„์ผ๋น„์žฌํ•œ ์š”์ฆ˜, ์ง€๊ธˆ์€ ๊ทธ ๊ธฐ์ˆ ์ด ์–ด๋””๊นŒ์ง€ ์™”์„๊นŒ? ๊ทธ๋ฆฌ๊ณ  ์–ด๋–ป๊ฒŒ ์จ์•ผ ๋” ๊น”๋”ํ•˜๊ฒŒ ์“ธ์ˆ˜ ์žˆ์„๊นŒ? 2. XMLHttpRequest Caniuse: XMLHttpRequest MDN: XMLHttpRequest whatwg: XMLHttpRequestโ€ฆ

Read full post

Tensorflow.js - 05. Training and Prediction in Node.js

Posted on January 15, 2020

Training and Prediction in Node.js 1. ์†Œ๊ฐœ 2. ์š”๊ตฌ ์‚ฌํ•ญ 3. Nodejs.app ์„ค์น˜ 4. ํ•™์Šต/ํ…Œ์ŠคํŠธ์šฉ ๋ฐ์ดํ„ฐ ์„ค์น˜ํ•˜๊ธฐ 5. ๊ตฌ์งˆ์„ ๊ตฌ๋ณ„ํ•˜๋Š” ๋ชจ๋ธ ๋งŒ๋“ค๊ธฐ 6. ๋ชจ๋ธ์„ ์„œ๋ฒ„์—์„œ ํ›ˆ๋ จ์‹œํ‚ค๊ธฐ 7. ํด๋ผ์ด์–ธํŠธ ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค๊ณ  display ์šฉ ์ฝ”๋“œ ๋งŒ๋“ค๊ธฐ 8. ์•ฑ ์‹คํ–‰ํ•˜๊ธฐ 9. ๋ฐฐ์šด๊ฒƒ Training and Prediction in Node.js ๋ณธ ํŠœํ† ๋ฆฌ์–ผ์—์„œ๋Š” MLBAM์—์„œ ์ œ๊ณตํ•˜๋Š” ํ”ผ์ณ ์„ผ์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ, ์•ผ๊ตฌ์˜ ์นญ ์œ ํ˜•์„ ์ถ”์ธกํ•˜๋Š” ๋ชจ๋ธ์„ ๋งŒ๋“ค์–ด๋ณผ ์˜ˆ์ •์ž…๋‹ˆ๋‹ค. ์ด ํŠœํ† ๋ฆฌ์–ผ์€ ์„œ๋ฒ„์‚ฌ์ด๋“œ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์ธ Node.js์—์„œ ์ง„ํ–‰๋  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค. ์ด ํŠœํ† ๋ฆฌ์–ผ์—์„œ๋Š” ๋ฅผ ์„œ๋ฒ„์‚ฌ์ด๋“œ์—์„œ npm package๋กœ ์„ค์น˜ํ•˜๊ณ , ๋ชจ๋ธ์„ ๋งŒ๋“  ๋‹ค์Œ, ์‹ค์ œ๋กœ ํ”ผ์น˜ ์„ผ์„œ ๋ฐ์ดํ„ฐ๋กœ ํ›ˆ๋ จ๊นŒ์ง€ ์ง„ํ–‰ํ•ด ๋ณผ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋˜ํ•œ ํ•™์Šต ์ง„ํ–‰ ์ƒํƒœ๋ฅผ ํด๋ผ์ด์–ธํŠธ์— ์ œ๊ณตํ•˜๊ณ , ํ›ˆ๋ จ๋œ ๋ชจ๋ธ์„ ๋ฐ”ํƒ•์œผ๋กœ ์˜ˆ์ธกํ•˜๋Š” ์„œ๋ฒ„/ํด๋ผ์ด์–ธํŠธ ์•„ํ‚คํ…์ณ๋„ ๋งŒ๋“ค์–ด ๋ณผ ๊ฒƒ์ž…๋‹ˆ๋‹ค.โ€ฆ

Read full post

React count down์—์„œ ๋ฐฐ์šด event-emitter ์™€ requestAnimationFrame

Posted on January 14, 2020

๋ฆฌ์•กํŠธ์—์„œ ์นด์šดํŠธ ๋‹ค์šด์„ ๋งŒ๋“ค๋ฉฐ ๋ฐฐ์šด ๊ฒƒ๋“ค ๋ฆฌ์•กํŠธ์—์„œ ์นด์šดํŠธ ๋‹ค์šด์„ ๋งŒ๋“ ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ณด์ž. ๊ฐ€์žฅ ๋จผ์ € ์ƒ๊ฐ๋‚˜๋Š”๋Œ€๋กœ, ๋น ๋ฅด๊ฒŒ ๊ตฌํ˜„ํ•œ๋‹ค๋ฉด ์•„๋ž˜์™€ ๊ฐ™์€ ๋Š๋‚Œ์ด ๋  ๊ฒƒ์ด๋‹ค. ํ•˜์ง€๋งŒ ์ด ์ฝ”๋“œ๋Š” ํ•œ๊ฐ€์ง€ ๋ฌธ์ œ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. setInterval, setTimeout ์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋ฉ”์ธ ์“ฐ๋ ˆ๋“œ์—์„œ ์‹คํ–‰๋œ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์‹ฑ๊ธ€์Šค๋ ˆ๋“œ ๊ธฐ๋ฐ˜์œผ๋กœ, ๋™์‹œ์— ํ•  ์ˆ˜ ์žˆ๋Š” ์ผ์€ ๋‹จ ํ•œ๊ฐ€์ง€๋กœ ์ œํ•œ ๋˜์–ด ์žˆ๋‹ค. ๋”ฐ๋ผ์„œ ์ค‘๊ฐ„์— interruption์ด ์žˆ๊ฑฐ๋‚˜ ๋ชจ์ข…์˜ ์ด์œ ๋กœ ์ฒ˜์Œ์— ์„ ์–ธํ•œ ์‹œ๊ฐ„์„ ์ •ํ™•ํžˆ ์ง€์ผœ์„œ (์—ฌ๊ธฐ์„œ๋Š” 1000ms) ์‹คํ–‰์„ ๋ณด์žฅํ•ด์ฃผ์ง€๋Š” ์•Š๋Š”๋‹ค. ์•„๋ž˜ ์ฝ”๋“œ๋ฅผ ์‚ฌํŒŒ๋ฆฌ์—์„œ ์‹คํ–‰ํ•ด๋ณด์ž. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์€ ์˜ค์ง ์‹ฑ๊ธ€ ์Šค๋ ˆ๋“œ๋งŒ์„ ์‚ฌ์šฉํ•˜๋ฏ€๋กœ, ๋น„๋™๊ธฐ ์ด๋ฒค๋“œ๋“ค์„ ํ์— ๋Œ€๊ธฐ์‹œํ‚จ๋‹ค. ๋”ฐ๋ผ์„œ ๊ทธ ์‚ฌ์ด์— ๋‹ค๋ฅธ ์ด๋ฒคํŠธ (๋งˆ์šฐ์Šค, ํ‚ค๋ณด๋“œ ๋“ฑ) ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ์ด๋ฒคํŠธ๊ฐ€ ์ง€์—ฐ๋  ์ˆ˜ ์žˆ๋‹ค. ๋˜ํ•œ ์ง€์—ฐ์—†๋Š” ๋˜๋Š” ์ด 5ํšŒ ์ด์ƒ ์‹คํ–‰๋  ๊ฒฝ์šฐ, 4ms ์ด์ƒ์˜ ์ง€์—ฐ์‹œ๊ฐ„์ด ๊ฐ•์ œ์ ์œผ๋กœ ์ถ”๊ฐ€๋œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด๋Š” HTMLโ€ฆ

Read full post

2020๋…„, ๋งค์ผ github์— contribution ํ•˜๊ธฐ

Posted on January 11, 2020

๋ธ”๋กœ๊ทธ์˜ ์„ฑ์žฅ 2018๋…„ 5์›” 1์ผ์— ๋ธ”๋กœ๊ทธ๋ฅผ ์‹œ์ž‘ํ•œ ์ด๋ก€๋กœ ํ—›์†Œ๋ฆฌ๋ฅผ ์ง€๊ป„์ด๋Š” ๋ธ”๋กœ๊ทธ์—์„œ, ์ œ๋ฒ• ์ด์‚ฌ๋žŒ ์ €์‚ฌ๋žŒ ์ฐพ์•„์˜ค๋Š” ๋ธ”๋กœ๊ทธ๋กœ ์„ฑ์žฅํ–ˆ๋‹ค. ๊พธ์ค€ํ•œ ๋ธ”๋กœ๊ทธ ๋ป˜ ๊ธ€๊ณผ ํšŒ์‚ฌ์—์„œ ์ผํ•˜๋Š” ๊ฒƒ ๋•๋ถ„์— github contribution์— ์ดˆ๋ก์ƒ‰ ๋ถˆ๋„ ๋งŽ์ด ๋“ค์–ด์˜ค๊ณ  ์žˆ๋‹ค. github contribution์€ 2013๋…„์— ์ƒ๊ธด ์ด๋ž˜๋กœ ๊ฐœ๋ฐœ์ž์˜ daily ์„ฑ๊ณผ ์ง€ํ‘œ๋ฅผ ์•Œ๋ ค์ฃผ๋Š”๋ฐ ๋„์›€์„ ์ฃผ๊ณ  ์žˆ๋‹ค. contribution์˜ ๊ธฐ์ค€ default branch (master)๋‚˜ gh-pages (github page ๋ธŒ๋žœ์น˜)์— ๊ธฐ์—ฌํ•˜๋Š” ๊ฒƒ ์ด์Šˆ๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ PR์„ ๋งŒ๋“œ๋Š”๊ฒƒ PR ๋ฆฌ๋ทฐ๋ฅผ ์ œ์ถœํ•˜๋Š” ๊ฒƒ ๋งค์ผ๋งค์ผ Contribution ํ•ด๋ณด๊ธฐ ํ•™๊ต๊ฐ€ ๋๋‚˜์„œ ์‹ฌ์‹ฌํ•ด์กŒ๊ฒ ๋‹ค, 2020๋…„์— daily๋กœ contribution์„ ํ•ด๋ด์•ผ ๊ฒ ๋‹ค. ๋‹ฌ๋ ฅ์— ๋ชจ๋‘ ์ดˆ๋ก๋ถˆ์ด ๋“ค์–ด์˜ค๋„๋ก

Read full post

Chrome Samesite ์ฟ ํ‚ค ์ •์ฑ…

Posted on January 09, 2020

๋ฌธ์ œ์˜ ์‹œ์ž‘ ์ง€๋‚œ ์ฃผ๋ง, ์—„์ฒญ๋‚˜๊ฒŒ ๊ธ‰ํ•˜๊ฒŒ ๋น ๋ฅธ ์†๋„๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ heroku์— ์˜ฌ๋ฆด ์ผ์ด ์žˆ์—ˆ๋‹ค. DB๋„ ์ƒˆ๋กœ๋งŒ๋“ค์–ด์•ผํ•˜๊ณ , ๋กœ๊ทธ์ธ๋„ ํ•„์š”ํ•œ ์‚ฌ์ดํŠธ๋ผ DB๋Š” Heroku์˜ Clean DB๋ฅผ, ๋กœ๊ทธ์ธ์€ google sign-in for websites์„ ์‚ฌ์šฉํ•˜์˜€๋‹ค. ์ฒ˜์Œ์—๋Š” passport google auth๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๋‹ค๊ฐ€, ๊ทธ๋ƒฅ ํ•˜๋Š” ๊น€์— ์ง์ ‘ api ๋„ํ๋จผํŠธ๋ฅผ ๋ณด๋ฉด์„œ ์ง„ํ–‰ํ•˜์˜€๋‹ค. ์ง„ํ–‰ ํ•˜๋‹ค๋ณด๋‹ˆ, ๋กœ๊ทธ์ธ์ด ์•ˆ๋˜๋Š” ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜์˜€๋‹ค. Chrome beta๋ฅผ ๊ธฐ๋ณธ ๋ธŒ๋ผ์šฐ์ €๋กœ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์—ˆ๋Š”๋ฐ, ๋ฌธ์ œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์•˜๋‹ค. https://github.com/anthonyjgrove/react-google-login/issues/261 https://github.com/google/google-api-javascript-client/issues/561 https://bugs.chromium.org/p/chromium/issues/detail?id=1019168#c2โ€ฆ

Read full post

Tensorflow.js - 04. CNN

Posted on January 02, 2020

Handwritten digit recognition with CNNs 1. ๋“ค์–ด๊ฐ€๊ธฐ์ „์— ๋งŒ๋“ค์–ด ๋ณผ ๊ฒƒ ์šฐ๋ฆฌ๊ฐ€ ๋ฐฐ์šธ ๊ฒƒ ํ•™์Šต ์ „์— ์ค€๋น„ํ•ด์•ผ ํ•  ๊ฒƒ 2. Set up HTML, Javascript ์ƒ์„ฑ ๋ฐ์ดํ„ฐ์™€ ์ฝ”๋“œ๋ฅผ ์œ„ํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ ์ƒ์„ฑ ํ…Œ์ŠคํŠธ ํ•ด๋ณด๊ธฐ 3. Load the Data 4. ์ž‘์—…์˜ ๊ฐœ๋…ํ™” 5. ๋ชจ๋ธ ์•„ํ‚คํ…์ณ ๋””์ž์ธ ํ•ฉ์„ฑ๊ณฑ ๋ฐ์ดํ„ฐ๋ฅผ ํ‰ํ‰ํ•˜๊ฒŒ ๋งŒ๋“ค๊ธฐ ํ™•๋ฅ ๋ถ„ํฌ๋ฅผ ๊ณ„์‚ฐํ•˜๊ธฐ 6. ๋ชจ๋ธ ํ›ˆ๋ จํ•˜๊ธฐ ๋ฉ”ํŠธ๋ฆญ ๋ชจ๋‹ˆํ„ฐ๋ง ๋ฐ์ดํ„ฐ๋ฅผ tensor๋กœ ๋ณ€ํ™˜ํ•˜๊ธฐ 7. ๋ชจ๋ธ ํ‰๊ฐ€ํ•˜๊ธฐ ์˜ˆ์ธกํ•˜๊ธฐ ๊ฐ ์ˆซ์ž๋‹น ์ •ํ™•๋„ Confusion Matrix ๊ฒฐ๊ณผ 8. ์ •๋ฆฌ Handwritten digit recognition with CNNs ์ด ํŠœํ† ๋ฆฌ์–ผ์—์„œ๋Š”, Tensorflow.js์˜ CNNโ€ฆ

Read full post

๋จธ์ง€๋œ ๋ธŒ๋žœ์น˜๋ฅผ ์‚ญ์ œํ•˜๋Š” ์Šคํฌ๋ฆฝํŠธ

Posted on January 01, 2020

remote์—์„œ ์ด๋ฏธ master๋กœ ๋จธ์ง€๋œ local/remote ๋ธŒ๋žœ์น˜๋ฅผ ์‚ญ์ œํ•˜๋Š” ์Šคํฌ๋ฆฝํŠธ ์šฐ๊ต์ˆ˜๋‹˜๊ป˜ ๊ฐ์‚ฌ์˜ ๋ง์”€์„ ๐Ÿ™‡โ€โ™‚๏ธ

Read full post