Campus Life · 3/26/2025

[TUTORIAL] Membuat Model ML menggunakan Google Teachable Machine

12 min 0

Assalamu‘alaikum wr. wb.

Hello guys! Jika sebelumnya sudah pernah membahas mengenai beranekaragam Machine Learning (ML), kali ini kita akan melakukan Tutorial Cara menggunakan Google Teachable Machine untuk membuat Model Machine Learning (ML).

Sumber Tutorial : Ibnuu.com (Blog), Yunusmuhammad007.Medium.com, Medium.com (@dianitaolipmimi), dan Medium.com (@warronbebster)

Di era modern ini, Kecerdasan Buatan (AI) bukan lagi hal yang asing karena telah banyak berkontribusi dalam berbagai aspek kehidupan. Salah satu contoh penerapannya adalah pada fitur kamera smartphone, yang dapat mengenali usia dan gender pengguna secara otomatis.

Menariknya, pada Tanggal 7 November 2019 (10 Rabi'ul Awal 1441 H), Google meluncurkan Teachable Machine, sebuah alat yang memungkinkan pengguna membuat AI sendiri dengan cara yang mudah dan cepat.

Teachable machine adalah web-based tool dalam membuat model machine learning dengan cepat dan mudah. Terdapat 3 Project yang saat ini disediakan yaitu Image Project, Audio Project, dan Pose Project.

Berikut ini adalah Langkah-langkahnya untuk membuat Model Machine Learning (ML) menggunakan Google Teachable Machine. Kali ini, kita akan membuat Project sederhana, yaitu mendeteksi apakah Batu, Kertas, atau Gunting.

A. Membuat Model ML dengan Image Project

Pertama, bukalah Google Teachable Machine di sini (Teachablemachine.withgoogle.com) atau dapat mencarinya di Google.

Kemudian, klik "Get Started" dan pilihlah Image Project dari Ketiga lainnya seperti Audio dan Pose.

Setelah itu, pilihlah "Standard Model".

Maka, akan seperti ini Tampilan Kosong dari Google Teachable Machine.

Klik "Webcam" untuk menambahkan Gambar secara Realtime langsung dari Kamera.

Kemudian, tekanlah terus Tombol "Hold to Record" untuk mengambil Gambar sebanyak-banyaknya.

Jika sudah, namailah Class-nya sesuai dengan Kelas yang ingin kalian uji.

Jika ingin menambahkan Kelas lagi, klik saja "Add a Class".

Jika sudah selesai klik "Train Model" dan tunggulah sampai prosesnya selesai.

Setelah itu, Anda bisa mencoba untuk melakukan Pratinjau (Preview) dari Model ML yang telah Anda latih.

Inilah Proses dari Preview Model ML di Google Teachable Machine :

Jika tidak ingin Sampel Anda hilang, klik pada setiap "Titik Tiga (⋮) --> Download Samples" untuk mengunduh (Download) semua Sampel.

Terakhir, klik "Export Model" jika ingin menjadikan Kode-kodenya dalam Aplikasi/Platform apapun.

Maka, akan seperti ini Tampilan dari Export Model untuk beberapa Platform seperti TensorFlow.js, TensorFlow biasa (Python), dan TensorFlow Lite.

Tampilan Ekspor Model untuk Proyek di Google Teachable Machine (Untuk Tensorflow.js)

Tampilan Ekspor Model untuk Proyek di Google Teachable Machine (Untuk Tensorflow Python)

Tampilan Ekspor Model untuk Proyek di Google Teachable Machine (Untuk Tensorflow Lite)

B. Contoh Model ML dengan Image Project

Berikut ini adalah Contoh Model ML dengan Image Project dari Proyek di atas yaitu Pendeteksi Batu, Kertas, atau Gunting.

1. Tensorflow.js

Bagi kalian yang ingin mencoba Model ML dengan Tampilan Web, maka TensorFlow.js adalah solusinya.

a. Upload Model (Upload ke Cloud)

Jika ingin melakukan Upload Model, silakan klik "Upload my Model" dan tunggulah sampai selesai.

Jika sudah, maka akan seperti ini hasilnya :

Biasanya, akan tertera Link-nya seperti Contoh punya saya seperti ini :

https://teachablemachine.withgoogle.com/models/SfG8rpuyB/

Jika dibuka, Pertama klik terlebih dahulu "Izinkan/Allow while using this Site".

Terakhir, maka seperti ini hasilnya :

Hasil Demo :

b. Download Model (Secara Lokal)

Namun, jika ingin mecobanya secara Lokal di Komputer, maka klik saja "Download my Model".

Kemudian, Salinlah beberapa Kode Program yang telah tertera di atas dan Compress semua File Zip tersebut.

Dan inilah Kode Program HTML JavaScript yang telah di-Salin di atas, lalu sedikit dimodifikasi menjadi seperti ini dengan Nama File batu-kertas-gunting.html :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Teachable Machine Image Model</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/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
      // Boleh Ganti sesuai dengan Nama File Zip Anda
      const URL = "./bkg-my-image-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>

Jika menggunakan VS Code, jalankanlah sebagai Go Live Server agar dapat berjalan semestinya.

Kemudian, klik "Start" dan inilah Tampilannya :

Hasil Demo :

2. Tensorflow Biasa (Python)

Caranya hampir sama seperti di atas, yaitu klik "Download my Model" untuk yang menggunakan Library Keras dan tunggulah sampai selesai.

Dan inilah Kode Program Python dengan Library Keras yang telah di-Salin di atas, lalu sedikit dimodifikasi menjadi seperti ini dengan Nama File batu-kertas-gunting.py atau batu-kertas-gunting.ipynb di Jupyter Notebook :

from keras.models import load_model  # TensorFlow is required for Keras to work
from PIL import Image, ImageOps  # Install pillow instead of PIL
import numpy as np

# Disable scientific notation for clarity
np.set_printoptions(suppress=True)

# Load the model
model = load_model("keras_Model.h5", compile=False)

# Load the labels
class_names = open("labels.txt", "r").readlines()

# Create the array of the right shape to feed into the keras model
# The 'length' or number of images you can put into the array is
# determined by the first position in the shape tuple, in this case 1
data = np.ndarray(shape=(1, 224, 224, 3), dtype=np.float32)

# Replace this with the path to your image
image = Image.open("<IMAGE_PATH>").convert("RGB")

# resizing the image to be at least 224x224 and then cropping from the center
size = (224, 224)
image = ImageOps.fit(image, size, Image.Resampling.LANCZOS)

# turn the image into a numpy array
image_array = np.asarray(image)

# Normalize the image
normalized_image_array = (image_array.astype(np.float32) / 127.5) - 1

# Load the image into the array
data[0] = normalized_image_array

# Predicts the model
prediction = model.predict(data)
index = np.argmax(prediction)
class_name = class_names[index]
confidence_score = prediction[0][index]

# Print prediction and confidence score
print("Class:", class_name[2:], end="")
print("Confidence Score:", confidence_score)

Namun jika kalian menggunakan OpenCV, inilah Kode Python TensorFlow yang telah dimodifikasi dengan Nama File batu-kertas-gunting.py atau batu-kertas-gunting.ipynb di Jupyter Notebook :

from keras.models import load_model  # TensorFlow is required for Keras to work
import cv2  # Install opencv-python
import numpy as np

# Disable scientific notation for clarity
np.set_printoptions(suppress=True)

# Load the model
model = load_model("keras_Model.h5", compile=False)

# Load the labels
class_names = open("labels.txt", "r").readlines()

# CAMERA can be 0 or 1 based on default camera of your computer
camera = cv2.VideoCapture(0)

while True:
    # Grab the webcamera's image.
    ret, image = camera.read()

    # Resize the raw image into (224-height,224-width) pixels
    image = cv2.resize(image, (224, 224), interpolation=cv2.INTER_AREA)

    # Show the image in a window
    cv2.imshow("Webcam Image", image)

    # Make the image a numpy array and reshape it to the models input shape.
    image = np.asarray(image, dtype=np.float32).reshape(1, 224, 224, 3)

    # Normalize the image array
    image = (image / 127.5) - 1

    # Predicts the model
    prediction = model.predict(image)
    index = np.argmax(prediction)
    class_name = class_names[index]
    confidence_score = prediction[0][index]

    # Print prediction and confidence score
    print("Class:", class_name[2:], end="")
    print("Confidence Score:", str(np.round(confidence_score * 100))[:-2], "%")

    # Listen to the keyboard for presses.
    keyboard_input = cv2.waitKey(1)

    # 27 is the ASCII for the esc key on your keyboard.
    if keyboard_input == 27:
        break

camera.release()
cv2.destroyAllWindows()

3. Tensorflow Lite (TF Lite)

Untuk menggunakan Tensorflow Lite (TF Lite), silakan lihat Contoh-nya di GitHub berikut ini.

Untuk melihat Cara menggunakan TensorFlow Lite dengan Flutter untuk Teachable Machine, silakan lihat Tutorialnya di sini.

Itulah Tutorial Cara menggunakan Google Teachable Machine untuk membuat Model Machine Learning (ML). Jika ingin melihat Tutorial Sebelumnya mengenai TensorFlow, silakan lihat di sini.

Terima Kasih 😄😘👌👍 :)

Wassalamu‘alaikum wr. wb.

Campus Life Sainstek Tekno Tutorial

Join the conversation

[TUTORIAL] Membuat Model ML menggunakan Google Teachable Machine

A. Membuat Model ML dengan Image Project

B. Contoh Model ML dengan Image Project

Keep reading

Cara Mengubah Foto Profil di WhatsApp (HP Android & iOS/iPhone)

Inilah Pengertian Tentang RevOps

Program Deret Lucas dengan JavaScript (Console)