AI - 인공지능

수현·2022년 12월 3일

Book

목록 보기

3/12

📂 인공지능

1. 티처블 머신

티처블 머신 : 구글의 인공지능 기술, 데이터를 신경망 알고리즘으로 학습시켜 학습 모델 생성

✔ 인공지능, 머신러닝, 인공 신경망 알고리즘

인공 지능 - 인간의 지적 능력을 기계나 컴퓨터를 이용해서 인공적으로 구현, 컴퓨터가 인간처럼 학습하고 행동하는 기술 (ex. 알파고)

머신러닝 - 많은 양의 데이터를 기계가 학습하는 과정

인공 신경망 알고리즘 - 머신러닝에서 인간처럼 뇌의 신경망 구조를 모방한 알고리즘 사용

📌 티처블 머신 활용 과일 도감

1) 티처블 머신에서 인공지능 만들기

이미지 프로젝트 ➡ 표준 이미지 모델
(1) 클래스 등록 영역 : 이미지 판단 결과가 될 클래스 등록
(2) 학습 영역 : 클래스와 이미지 데이터를 티처블 머신이 인공지능을 자동으로 학습
(3) 미리보기 영역 : 만든 인공지능 모델 내려받기, 예시 코드 제공

2) 데이터 등록 (200장 이상 샘플 이미지 촬영)

웹캠으로 사물을 직접 촬영
이미지 파일 올리기

3) 모델 학습 시키고 테스트

입력 ➡ 사용으로 변경
웹캠에 비춰 테스트
이미지 파일 등록하여 테스트

4) 모델을 티처블 머신에 업로드

업로드 하면 TensorFlow.js 코드 생성
(➡ 웹에서 직접 모델 활용 / Node.js 통해 서버에서 활용 가능한 라이브러리)

# 공유 가능한 링크 
https://teachablemachine.withgoogle.com/models/q1urCXww_/

# 모델에서 사용할 코드 스니펫
<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@1.3.1/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/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 = "https://teachablemachine.withgoogle.com/models/q1urCXww_/";

    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>

5) HTML 파일에 자바스크립트 코드 넣기

index.html 파일

<!DOCTYPE html>
<html lang="ko">
    <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>인공지능 과일 도감</title>
    </head>

    <body>
        상단 인공지능 모델 코드 붙여넣기
    </body>
</html>