8/25 과제 제출 - AI 서비스 완성! AI 웹개발 취업캠프 [NIPA/정보통신산업진흥원]

본인들이 관심있는 이미지를 가지고 티처블 머신에서 예측모델을 생성한 후 테스트한 결과 영상을 예측모델 소스와 같이 문서로 작성하여 제출하시오.

티처블 머신(Teachable Machine)

= 구글에서 만든 웹기반 노코드 인공지능 학습 툴

https://teachablemachine.withgoogle.com/

어떤 종류로 할까 고민하다가 해보고 싶었던건... 이 코디 사진은 어느 계절에 어울릴까??란 발상이 들면서 이런 테스트를 해보기로 했다.!

🚩 계절별 패션 학습 모델을 생성후 어떤 계절의 패션인지 테스트

봄 / 여름 / 가을 /겨울 각각 계절마다 입는 패션 이미지 그룹화

• 학습용어 개념

  에포크(epoch) : 인공지능이 훈련데이터 전체를 1번 학습하는 과정
  배치크기(batch size) : 1번 훈련할 때 처리하는 데이터의 크기
  학습률 : 학습률이 클수록 학습속도는 빠르지만, 최소값을 차지 못한거나 값이 발산할 수 있다. 반대로 학습률이 작으면, 학습속도가 느리고 국소값에 머무를 수 있다.

< spring >
< summer >
< fall >
< winter > 이건 왜 summer로 나오는거짘ㅋㅋ?? 애초에 겨울 학습데이터가 잘못되었나보다...

모델 내보내기 [예측 모델 소스]

Tensorflow.js

<div>Teachable Machine Image Model</div>
<button type="button" onclick="init()">Start</button>
<div id="webcam-container"></div>
<div id="label-container"></div>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@latest/dist/teachablemachine-image.min.js"></script>
<script type="text/javascript">
  // More API functions here:
  // https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image

  // the link to your model provided by Teachable Machine export panel
  const URL = "./my_model/";

  let model, webcam, labelContainer, maxPredictions;

  // Load the image model and setup the webcam
  async function init() {
      const modelURL = URL + "model.json";
      const metadataURL = URL + "metadata.json";

      // load the model and metadata
      // Refer to tmImage.loadFromFiles() in the API to support files from a file picker
      // or files from your local hard drive
      // Note: the pose library adds "tmImage" object to your window (window.tmImage)
      model = await tmImage.load(modelURL, metadataURL);
      maxPredictions = model.getTotalClasses();

      // Convenience function to setup a webcam
      const flip = true; // whether to flip the webcam
      webcam = new tmImage.Webcam(200, 200, flip); // width, height, flip
      await webcam.setup(); // request access to the webcam
      await webcam.play();
      window.requestAnimationFrame(loop);

      // append elements to the DOM
      document.getElementById("webcam-container").appendChild(webcam.canvas);
      labelContainer = document.getElementById("label-container");
      for (let i = 0; i < maxPredictions; i++) { // and class labels
          labelContainer.appendChild(document.createElement("div"));
      }
  }

  async function loop() {
      webcam.update(); // update the webcam frame
      await predict();
      window.requestAnimationFrame(loop);
  }

  // run the webcam image through the image model
  async function predict() {
      // predict can take in an image, video or canvas html element
      const prediction = await model.predict(webcam.canvas);
      for (let i = 0; i < maxPredictions; i++) {
          const classPrediction =
              prediction[i].className + ": " + prediction[i].probability.toFixed(2);
          labelContainer.childNodes[i].innerHTML = classPrediction;
      }
  }
</script>

*본 후기는 정보통신산업진흥원(NIPA)에서 주관하는 과제 기록으로 작성 되었습니다.