tfjs mobilenet - penny4860/study-note GitHub Wiki

Note

html ๋ฌธ์„œ์— ํ…์ŠคํŠธ๋ฅผ ๋ณ€๊ฒฝ

  1. (html) js๋กœ ์ œ์–ดํ•  element๋ฅผ ์ •์˜
    • <div id="status"></div>
  2. (js) status ํ•จ์ˆ˜์ •์˜
    • const demoStatusElement = document.getElementById('status');
    • const status = msg => demoStatusElement.innerText = msg;
  3. (js) ํ•จ์ˆ˜์‚ฌ์šฉ
    • status("Loading....")

ํƒœ๊ทธ์˜ ๋‚ด์šฉ์„ ์ˆจ๊ฒผ๋‹ค๊ฐ€ ํŠน์ • ์‹œ์ ์— ๋ Œ๋”๋ง

  1. (html) img ํƒœ๊ทธ์—์„œ style ์†์„ฑ์œผ๋กœ display off
    • <img style="display: none" id="cat" src="cat.jpg" width=224 height=224 />
  2. (js) image ๋ Œ๋”๋ง์„ ์›ํ•˜๋Š” ์‹œ์ ์— display ์†์„ฑ ๋ณ€๊ฒฝ
    • const catElement = document.getElementById('cat');
    • catElement.style.display = '';

tfjs ์˜ inference

  1. load model
    • mobilenet = await tf.loadLayersModel(MOBILENET_MODEL_PATH);
  2. image element ๋ฅผ ์ค€๋น„
    • const imgElement = document.getElementById('cat');
  3. prediction ๊ณผ์ •์„ ์ต๋ช…ํ•จ์ˆ˜๋กœ ์ •์˜
  4. ์ต๋ช…ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰
    • const values = await logits.data();

image file์„ ์—…๋กœ๋“œ

  1. (html) input ํƒœ๊ทธ๋ฅผ ์ค€๋น„
    • Upload an image: <input type="file" id="files" name="files[]" multiple />
  2. input element๋ฅผ ๊ฐ€์ ธ์™€์„œ ๋ฆฌ์Šค๋„ˆ๋ฅผ ๋“ฑ๋ก
    • const FILES_ELEMENT = document.getElementById('files');
    • FILES_ELEMENT.addEventListener('change', e => fileUploadListener(e));
  3. ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๋ฅผ ๊ตฌํ˜„
    • let reader = new FileReader();
    • reader.onload = e => imgLoader(e);
  4. FileReader ๋ฆฌ์Šค๋„ˆ๋ฅผ ๊ตฌํ˜„
โš ๏ธ **GitHub.com Fallback** โš ๏ธ