1회차 teachable machine (ver.Web)

크롤링 (python 활용) - 30분

코드(Colab)

!pip install selenium
!apt-get update
!apt install chromium-chromedriver

from selenium import webdriver
from urllib.request import urlopen
import urllib
from bs4 import BeautifulSoup as bs
from urllib.parse import quote_plus
from selenium.webdriver.common.keys import Keys
import time
import os
import subprocess

def imageDown(keyword):
    url = f'<https://www.google.com.br/search?q={keyword}&source=lnms&tbm=isch>'
    chrome_options = webdriver.ChromeOptions()
    chrome_options.add_argument('--headless')
    chrome_options.add_argument('--no-sandbox')
    chrome_options.add_argument('--disable-dev-shm-usage')
    driver = webdriver.Chrome('chromedriver', chrome_options=chrome_options)
    driver.get(url)

    body = driver.find_element_by_css_selector('body')

    # 스크롤 내리기 range수정시 전체 이미지 갯수 변경
    for i in range(30):
        body.send_keys(Keys.PAGE_DOWN)
        time.sleep(0.5)#한번 드래그 후 sleep

    imgs = driver.find_elements_by_css_selector('img.rg_i')

    os.makedirs(keyword, exist_ok=True)
    time.sleep(2.5)
    for idx, img in enumerate(imgs):
        # print(idx,img.get_attribute('src'))
        imgUrl = img.get_attribute('src')
        if imgUrl =="":
            print(imgUrl)
        imgName = f'./{keyword}/'+keyword + str(idx)+'.jpg'
        try:
            urllib.request.urlretrieve(imgUrl, imgName)
        except:
            print(imgUrl,"주소 가져오기 실패")
            print(imgName)

#키워드 선정 후 함수실행(이미지 크롤링)
keyword = "강호동"
imageDown(keyword=keyword)

#다운받은 파일은 앞축하여 한번에 다운받아야 편합니다.
command = f"zip -r /content/{keyword}.Zip /content/{keyword}"
subprocess.run(command.split(), capture_output=True)

진행중 일부 이후부터 None으로 나오는 이슈가 있음. 사용시 문제 없음. 스크롤 range안의 갯수 조절에 따라 이미지 갯수 조절 가능.

teachable machine이용 모델 학습( 1에서 다운받은 .zip파일 압축해제 후 업로드)

모델 추출하기

모델 학습 후 모델 내보내기 클릭

이후 화면에서 다운로드 선택(업로드 X) 후 모델 다운로드 및 아래 코드 복사

폴더 생성 후 폴더 내에 my_model 폴더 생성하고 그 안에 다운받은 모델 내용 넣어주기
index.html 파일 생성
파일 생성 후 body에 teacherble machine에서 복사한 html/js 코드 붙여넣기. (body에 코드 티쳐블머신에서 복사한 코드 붙여넣으면 됩니다.)

파일명 : index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

</body>
</html>

Teachable Machine에서 가져온 소스코드를 body 안에 넣습니다.

파일명 : index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    **<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/[email protected]/dist/tf.min.js>"></script>
<script src="<https://cdn.jsdelivr.net/npm/@teachablemachine/[email protected]/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>**

</body>
</html>

깃허브에 파일 업로드 후 정적 호스팅 후 실행
모델 새로 만들어서 바뀌게 해보기
자기가 원하는 모델 만들어서 결과 나오게 하기
모델 메타데이터 수정해보기 - 아래 json(my_model/metadata.json)에서 labels 부분의 배열내용 수정하면 출력 라벨을 수정 가능

-결과 화면

start누르기 전

start 누른 후