프로그래밍/Developer Student Clubs

[삽질기록] 모델을 웹상에

지누; 2020. 2. 16. 14:00

[ModelDepot 실행예시] 

깃허브 링크 🔗: https://github.com/ModelDepot/tfjs-yolo-tiny-demo

 

ModelDepot/tfjs-yolo-tiny-demo

Demo for https://www.npmjs.com/package/tfjs-yolo-tiny - ModelDepot/tfjs-yolo-tiny-demo

github.com

포스트링크 🔗: https://towardsdatascience.com/deep-learning-in-your-browser-a-brisk-guide-ca06c2198846

 

- src/index.js 파일 분석

import * as tf from '@tensorflow/tfjs';
import yolo, { downloadModel } from 'tfjs-yolo-tiny';

import { Webcam } from './webcam';

let model;
const webcam = new Webcam(document.getElementById('webcam'));

(async function main() {
  try {
    ga();
    model = await downloadModel();

    alert("Just a heads up! We'll ask to access your webcam so that we can " +
      "detect objects in semi-real-time. \n\nDon't worry, we aren't sending " +
      "any of your images to a remote server, all the ML is being done " +
      "locally on device, and you can check out our source code on Github.");

    await webcam.setup();

    doneLoading();
    run();
  } catch(e) {
    console.error(e);
    showError();
  }
})();

(생략)

tfjs 를 쓴 프로젝트 코드는 전체적으로 비슷하다.

index.html에서 틀을 잡고

index.js에서 yolo 알고리즘을 불러와서 처리한다.

 

1. tfjs를 import 시키고 yolo 알고리즘을 불러오는 코드 downloadModel에 yolo-tiny 모델이 불러와진다.

import * as tf from '@tensorflow/tfjs';
import yolo, { downloadModel } from 'tfjs-yolo-tiny';

2. downloandModel 을 model 변수 받고 로딩 완료 후 카메라 허용 팝업이 뜬다.

(async function main() {
  try {
    ga();
    model = await downloadModel();

    alert("Just a heads up! We'll ask to access your webcam so that we can " +
      "detect objects in semi-real-time. \n\nDon't worry, we aren't sending " +
      "any of your images to a remote server, all the ML is being done " +
      "locally on device, and you can check out our source code on Github.");

    await webcam.setup();

    doneLoading();
    run();
  } catch(e) {
    console.error(e);
    showError();
  }
})();

이후 webcam 코드는 대체적으로 비슷했기 때문에 이 모델을 어떻게 우리가 새롭게 트레이닝 시킨 weights를 적용해서 로드할지 고민했다.

 

그래서 확인한게 teachable machine 에서 model export 기능을 통해 코드를 확인해 보았다.

👉 model.json 그리고 metadata.json 형식의 모델과 metadata를 이미 호스팅 된 url을 통해 받아와서 동작하는 코드다.

 

일단 먼저 local에서 동작하는 코드를 작성해보고 호스팅은 나중에..

 

(참고자료)

How to deploy a tensorflow model to production https://youtu.be/T_afaArR0E8

 

[flask-yolo]

: 연수가 저번주에 찾아왔던 프로젝트. 아래 보이는 weights 파일만 우리가 트레이닝 시키고 난 걸로 바꾸면 동작할 것 같다.

 

- server.py

from flask import Flask, url_for, render_template, Response
from darkflow.net.build import TFNet
from facenet.src import facenet
from facenet.src.align import detect_face
import cv2
import tensorflow as tf
import numpy as np
import pickle
from scipy import misc

app = Flask(__name__)
options = {"model": "/home/rohitner/tensorflow/darkflow/cfg/tiny-yolo-voc.cfg",
           "load": "/home/rohitner/tensorflow/darkflow/bin/tiny-yolo-voc.weights",
           "threshold": 0.1, "gpu": 0.8}
tfnet = TFNet(options)

 

[Tensorflow.js 를 활용한 사물인식]

포스트 링크 🔗: https://blog.naver.com/shane5321/221700192580

<html>

<head>
    <title>Coco SSD</title>
    <script src="./tf.min.js"> </script>
    <script src="./coco-ssd.js"> </script>
</head>

<body>
    <font color="blue">
        <div id="info">...</div>
    </font>
    <video id="videoInput" width="240" height="320" style="position: absolute; left:10; top:30"></video>
    <canvas id="videoOutput" width="240" height="320" style="position: absolute; left:10; top:30"></canvas>
    <script>
        const info = document.getElementById("info");
        const constraints = { audio: false, video: true };
        const video = document.getElementById("videoInput");
        function successCallback(stream) {
            video.srcObject = stream;
            video.play();
        }
        function errorCallback(error) {
            console.log(error);
        }
        navigator.getUserMedia(constraints, successCallback, errorCallback);
        let net;
        async function makeNet() {
            info.innerHTML = "Now loading... Please wait.";
            net = await cocoSsd.load();
            info.innerHTML = "Ready to use!";
            setInterval(detect, 0);
        }
        (생략)
    </script>
</body>

</html>

[출처] [Droidscript] Tensorflow.js를 이용한 사물인식|작성자 Shane

[Yolo v2 to detect your own objects using Darkflow]

https://towardsdatascience.com/yolov2-to-detect-your-own-objects-soccer-ball-using-darkflow-a4f98d5ce5bf

 

YOLOv2 to detect your own objects (soccer ball) using Darkflow

This story introduces the basic steps for object detection on your custom dataset.

towardsdatascience.com

일단 회의부터..