Penjelasan Konsep Aplikasi Pendeteksi Ekspresi: Membuat AI Sendiri dari Kamera HP!
Pernahkah kamu melihat kamera HP bisa mengenali wajahmu sedang tersenyum atau serius? Nah, sekarang kamu bisa membuat AI sederhana seperti itu sendiri! Cukup dengan laptop, kamera HP, dan koneksi internet, kamu bisa melatih sebuah “otak kecil” yang bisa mengenali ekspresi wajahmu secara otomatis. Seru, kan? Yuk kita coba jadi ilmuwan muda yang menciptakan teknologi sendiri!
Setelah AI kamu jadi, saatnya membuatnya tampil keren di sebuah halaman web! Kita akan menggunakan GitHub Pages untuk memajang model kamu. Cukup buat file HTML yang memuat script dari Teachable Machine, tempelkan link model kamu, lalu aktifkan halaman web-nya. Hasilnya? Kamu punya web yang bisa langsung mengenali wajah kamu melalui kamera! Bayangkan serunya: AI buatan kamu sendiri bisa tahu kapan kamu tersenyum atau memasang wajah serius.
Buat Model di Teachable Machine
1. Buka: https://teachablemachine.withgoogle.com
2. Pilih "Image Project" → Standard Image Model.
3. Klik "Add a class" dan beri nama (misalnya: "Tersenyum", "Serius").
4. Klik "Webcam" dan ambil contoh gambar dari Android webcam.
5. Tambahkan beberapa gambar ke masing-masing kelas.
6. Klik "Train Model".
7. Setelah selesai, klik "Export Model" → "TensorFlow.js" → klik "Upload (hosted)".
8. Salin "Copy the sharable link".
Buat Halaman Web di GitHub
Kita butuh file HTML yang memuat model ini agar bisa ditampilkan di App Inventor.
Contoh isi index.html (script GitHub):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Teachable Machine Webcam</title>
</head>
<body>
<h1>Deteksi Wajah</h1>
<button type="button" onclick="init()">Mulai Kamera</button>
<div><canvas id="canvas"></canvas></div>
<div id="label-container"></div>
<script
src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teacha
blemachine-image.min.js"></script>
<script type="text/javascript">
const URL = "PASTE-LINK-MODEL-DI-SINI/";
let model, webcam, labelContainer, maxPredictions;
async function init() {
const modelURL = URL + "model.json";
const metadataURL = URL + "metadata.json";
model = await tmImage.load(modelURL, metadataURL);
maxPredictions = model.getTotalClasses();
const flip = true;
webcam = new tmImage.Webcam(200, 200, flip);
await webcam.setup();
await webcam.play();
window.requestAnimationFrame(loop);
document.getElementById("canvas").appendChild(webcam.canvas);
labelContainer = document.getElementById("label-container");
for (let i = 0; i < maxPredictions; i++) {
labelContainer.appendChild(document.createElement("div"));
}
}
async function loop() {
webcam.update();
await predict();
window.requestAnimationFrame(loop);
}
async function predict() {
const prediction = await model.predict(webcam.canvas);
for (let i = 0; i < maxPredictions; i++) {
const classPrediction = prediction[i].className + ": " +
(prediction[i].probability * 100).toFixed(2) + "%";
labelContainer.childNodes[i].innerHTML = classPrediction;
}
}
</script>
</body>
</html>
Ganti PASTE-LINK-MODEL-DI-SINI/ dengan URL dari model Teachable Machine.
Upload ke GitHub Pages
Saat tombol ditekan, halaman web dari GitHub (yang menjalankan model) terbuka, dan langsung menggunakan kamera Android untuk mengenali wajah/objek sesuai yang dilatih di Teachable Machine.
Catatan untuk Siswa MTs/SMP
Kasus 1: Detektif Ekspresi — Siapa yang Lagi Bohong?
Ilustrasi: Bayangkan kamu jadi detektif di kelas! Temanmu bilang dia nggak ngantuk, tapi ekspresinya seperti orang mau tidur. Kamu buat model AI di Teachable Machine dengan dua kelas: "Ngantuk" dan "Terjaga", lalu latih dengan ekspresi wajah teman-teman.
Saat diuji, AI langsung mendeteksi: "Ngantuk 95%" — ketahuan deh, bohongnya!
Tujuan tersembunyi: Melatih AI untuk membaca ekspresi wajah sebagai "sinyal diam-diam" dari perasaan seseorang.
Kasus 2: Warna Favoritku? Tanyakan ke Kamera!
Ilustrasi: Kamu sedang main tebak warna dengan temanmu. Kamu melatih model AI untuk mengenali warna merah, biru, dan hijau. Setelah itu, temanmu tunjukkan benda berwarna, dan kamera langsung menebak: "Hijau 99%"!
Keseruan: Seolah-olah kamu punya teman robot yang bisa menebak warna lebih cepat daripada manusia.
Kasus 3: Wajah Bahagia vs Wajah Serius
Ilustrasi: Kamu penasaran, berapa kali kamu tersenyum dalam sehari? Buat model dengan dua kelas: "Tersenyum" dan "Serius". Latih dengan wajahmu dan teman-teman saat tersenyum dan tidak. Setiap kali kamu buka kamera HP lewat aplikasi, AI akan menunjukkan apakah kamu sedang bahagia atau serius.
Pelajaran seru: Menyadari emosi sendiri lewat teknologi, dan belajar bagaimana komputer bisa memahami ekspresi.
Kasus 4: Robot Juri Lomba Fashion Show
Ilustrasi: Bayangkan kamu juri dalam lomba pakaian adat. Kamu latih AI untuk mengenali baju batik, seragam sekolah, dan kaos santai. Saat peserta tampil, kamera akan menampilkan prediksi: “Batik 89%” atau “Seragam 97%” seolah jadi juri digital!
Nilai tambah: Belajar mengenali pola dan ciri visual secara otomatis menggunakan kamera.
Kasus 5: Kamera Anti Barang Tertukar
Ilustrasi: Kamu dan temanmu sering tertukar sisir atau sendok saat piknik. Kamu melatih AI mengenali sisir dan sendok dari kameramu. Saat AI aktif, ia langsung memberi label: “Sisir 100%” nggak bakal tertukar lagi!
Manfaat nyata: Membuat AI jadi “pengingat visual” yang bisa bantu kehidupan sehari-hari.
Kasus 6: Alarm Wajah Marah di Rumah
Ilustrasi:
Kamu ingin tahu kapan orang tua sedang serius atau marah supaya tahu kapan harus diam. Kamu latih AI untuk mengenali wajah dengan ekspresi “Marah” dan “Netral”. Saat orang tua lewat di depan kamera HP, AI akan menampilkan status wajah. Kamu langsung tahu: "Oops, mending diam dulu deh!"
Menariknya: Kamera bisa menjadi pembaca situasi rumah jika digunakan secara bijak.
Fakta Menarik / Fun Facts
1. Kamu bisa bikin AI sendiri hanya dari HP dan webcam! Nggak perlu jadi ilmuwan dulu, cukup senyum di depan kamera dan ajari AI-nya.
2. Kamera HP kamu bukan cuma buat selfie, tapi juga bisa jadi "mata" buat mengenali ekspresi wajah, warna, atau benda favoritmu!
3. Model AI itu kayak otak kecil digital! Ia belajar dari contoh, seperti kamu belajar dari latihan soal.
4. Kamu bisa bikin website AI sendiri dan diakses dari mana aja bahkan teman kamu di kota lain bisa coba model AI buatanmu lewat GitHub Pages.
5. AI bisa belajar membedakan wajah kamu saat tersenyum, serius, bahkan melotot! Cuma butuh beberapa foto contoh aja, lho.
6. Teachable Machine dibuat oleh Google! Jadi, kamu sedang belajar teknologi dari perusahaan raksasa dunia.
7. Gabungin AI + Web + App Inventor = Aplikasi Keren buatan kamu sendiri! Bisa deteksi ekspresi langsung dari aplikasi Android.
8. Tanpa coding ribet, kamu sudah membuat program AI. Hebatnya, kamu juga jadi desainer dan developer sekaligus!
Rangkuman
Pernah nggak sih kamu kepikiran bikin aplikasi canggih yang bisa mengenali ekspresi wajah kamu sendiri? Di bab ini, kamu akan diajak bikin aplikasi pendeteksi ekspresi wajah hanya dengan kamera HP dan alat-alat seru yang tersedia gratis! Pertama-tama, kamu akan bermain-main di Teachable Machine dari Google.
Buat Model di Teachable Machine
1. Buka: https://teachablemachine.withgoogle.com
2. Pilih "Image Project" → Standard Image Model.
3. Klik "Add a class" dan beri nama (misalnya: "Tersenyum", "Serius").
4. Klik "Webcam" dan ambil contoh gambar dari Android webcam.
5. Tambahkan beberapa gambar ke masing-masing kelas.
6. Klik "Train Model".
7. Setelah selesai, klik "Export Model" → "TensorFlow.js" → klik "Upload (hosted)".
8. Salin "Copy the sharable link".
Buat Halaman Web di GitHub
Kita butuh file HTML yang memuat model ini agar bisa ditampilkan di App Inventor.
Contoh isi index.html (script GitHub):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Teachable Machine Webcam</title>
</head>
<body>
<h1>Deteksi Wajah</h1>
<button type="button" onclick="init()">Mulai Kamera</button>
<div><canvas id="canvas"></canvas></div>
<div id="label-container"></div>
<script
src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teacha
blemachine-image.min.js"></script>
<script type="text/javascript">
const URL = "PASTE-LINK-MODEL-DI-SINI/";
let model, webcam, labelContainer, maxPredictions;
async function init() {
const modelURL = URL + "model.json";
const metadataURL = URL + "metadata.json";
model = await tmImage.load(modelURL, metadataURL);
maxPredictions = model.getTotalClasses();
const flip = true;
webcam = new tmImage.Webcam(200, 200, flip);
await webcam.setup();
await webcam.play();
window.requestAnimationFrame(loop);
document.getElementById("canvas").appendChild(webcam.canvas);
labelContainer = document.getElementById("label-container");
for (let i = 0; i < maxPredictions; i++) {
labelContainer.appendChild(document.createElement("div"));
}
}
async function loop() {
webcam.update();
await predict();
window.requestAnimationFrame(loop);
}
async function predict() {
const prediction = await model.predict(webcam.canvas);
for (let i = 0; i < maxPredictions; i++) {
const classPrediction = prediction[i].className + ": " +
(prediction[i].probability * 100).toFixed(2) + "%";
labelContainer.childNodes[i].innerHTML = classPrediction;
}
}
</script>
</body>
</html>
Ganti PASTE-LINK-MODEL-DI-SINI/ dengan URL dari model Teachable Machine.
Upload ke GitHub Pages
1. Buat akun GitHub.
2. Buat repository baru, misalnya teachable-web.
3. Upload index.html ke repository tersebut.
4. Aktifkan GitHub Pages: Settings → Pages → Source → main /root → Save.
5. Catat URL GitHub Pages, misalnya: https://namamu.github.io/teachable-web/
Buat App di MIT App Inventor
1. Buka: https://ai2.appinventor.mit.edu
2. Tambahkan komponen:
4. Gunakan blok: when Button1.Click do set WebViewer1.Url to "https://namamu.github.io/teachable-web/"
5. Bangun (build) aplikasi dan instal di HP.
Hasil
4. Aktifkan GitHub Pages: Settings → Pages → Source → main /root → Save.
5. Catat URL GitHub Pages, misalnya: https://namamu.github.io/teachable-web/
Buat App di MIT App Inventor
1. Buka: https://ai2.appinventor.mit.edu
2. Tambahkan komponen:
- WebViewer
- Button
4. Gunakan blok: when Button1.Click do set WebViewer1.Url to "https://namamu.github.io/teachable-web/"
5. Bangun (build) aplikasi dan instal di HP.
Hasil
Saat tombol ditekan, halaman web dari GitHub (yang menjalankan model) terbuka, dan langsung menggunakan kamera Android untuk mengenali wajah/objek sesuai yang dilatih di Teachable Machine.
Catatan untuk Siswa MTs/SMP
- Gunakan objek mudah dikenali: ekspresi wajah, warna, atau benda seperti sendok/sisir.
- Gunakan bahasa sederhana di App Inventor dan desain minimal.
- Jelaskan bahwa “model” itu seperti "otak" kecil yang belajar dari contoh.
Kasus 1: Detektif Ekspresi — Siapa yang Lagi Bohong?
Ilustrasi: Bayangkan kamu jadi detektif di kelas! Temanmu bilang dia nggak ngantuk, tapi ekspresinya seperti orang mau tidur. Kamu buat model AI di Teachable Machine dengan dua kelas: "Ngantuk" dan "Terjaga", lalu latih dengan ekspresi wajah teman-teman.
Saat diuji, AI langsung mendeteksi: "Ngantuk 95%" — ketahuan deh, bohongnya!
Tujuan tersembunyi: Melatih AI untuk membaca ekspresi wajah sebagai "sinyal diam-diam" dari perasaan seseorang.
Kasus 2: Warna Favoritku? Tanyakan ke Kamera!
Ilustrasi: Kamu sedang main tebak warna dengan temanmu. Kamu melatih model AI untuk mengenali warna merah, biru, dan hijau. Setelah itu, temanmu tunjukkan benda berwarna, dan kamera langsung menebak: "Hijau 99%"!
Keseruan: Seolah-olah kamu punya teman robot yang bisa menebak warna lebih cepat daripada manusia.
Kasus 3: Wajah Bahagia vs Wajah Serius
Ilustrasi: Kamu penasaran, berapa kali kamu tersenyum dalam sehari? Buat model dengan dua kelas: "Tersenyum" dan "Serius". Latih dengan wajahmu dan teman-teman saat tersenyum dan tidak. Setiap kali kamu buka kamera HP lewat aplikasi, AI akan menunjukkan apakah kamu sedang bahagia atau serius.
Pelajaran seru: Menyadari emosi sendiri lewat teknologi, dan belajar bagaimana komputer bisa memahami ekspresi.
Kasus 4: Robot Juri Lomba Fashion Show
Ilustrasi: Bayangkan kamu juri dalam lomba pakaian adat. Kamu latih AI untuk mengenali baju batik, seragam sekolah, dan kaos santai. Saat peserta tampil, kamera akan menampilkan prediksi: “Batik 89%” atau “Seragam 97%” seolah jadi juri digital!
Nilai tambah: Belajar mengenali pola dan ciri visual secara otomatis menggunakan kamera.
Kasus 5: Kamera Anti Barang Tertukar
Ilustrasi: Kamu dan temanmu sering tertukar sisir atau sendok saat piknik. Kamu melatih AI mengenali sisir dan sendok dari kameramu. Saat AI aktif, ia langsung memberi label: “Sisir 100%” nggak bakal tertukar lagi!
Manfaat nyata: Membuat AI jadi “pengingat visual” yang bisa bantu kehidupan sehari-hari.
Kasus 6: Alarm Wajah Marah di Rumah
Ilustrasi:
Kamu ingin tahu kapan orang tua sedang serius atau marah supaya tahu kapan harus diam. Kamu latih AI untuk mengenali wajah dengan ekspresi “Marah” dan “Netral”. Saat orang tua lewat di depan kamera HP, AI akan menampilkan status wajah. Kamu langsung tahu: "Oops, mending diam dulu deh!"
Menariknya: Kamera bisa menjadi pembaca situasi rumah jika digunakan secara bijak.
Fakta Menarik / Fun Facts
1. Kamu bisa bikin AI sendiri hanya dari HP dan webcam! Nggak perlu jadi ilmuwan dulu, cukup senyum di depan kamera dan ajari AI-nya.
2. Kamera HP kamu bukan cuma buat selfie, tapi juga bisa jadi "mata" buat mengenali ekspresi wajah, warna, atau benda favoritmu!
3. Model AI itu kayak otak kecil digital! Ia belajar dari contoh, seperti kamu belajar dari latihan soal.
4. Kamu bisa bikin website AI sendiri dan diakses dari mana aja bahkan teman kamu di kota lain bisa coba model AI buatanmu lewat GitHub Pages.
5. AI bisa belajar membedakan wajah kamu saat tersenyum, serius, bahkan melotot! Cuma butuh beberapa foto contoh aja, lho.
6. Teachable Machine dibuat oleh Google! Jadi, kamu sedang belajar teknologi dari perusahaan raksasa dunia.
7. Gabungin AI + Web + App Inventor = Aplikasi Keren buatan kamu sendiri! Bisa deteksi ekspresi langsung dari aplikasi Android.
8. Tanpa coding ribet, kamu sudah membuat program AI. Hebatnya, kamu juga jadi desainer dan developer sekaligus!
Rangkuman
Pernah nggak sih kamu kepikiran bikin aplikasi canggih yang bisa mengenali ekspresi wajah kamu sendiri? Di bab ini, kamu akan diajak bikin aplikasi pendeteksi ekspresi wajah hanya dengan kamera HP dan alat-alat seru yang tersedia gratis! Pertama-tama, kamu akan bermain-main di Teachable Machine dari Google.
Di sana kamu bisa melatih model AI sendiri dengan memberikan contoh gambar wajah, misalnya wajah "tersenyum" atau "serius", lalu tinggal klik "Train Model" dan boom! AI kamu sudah belajar membedakan ekspresi!
Nah, supaya makin greget, kita akan hubungkan halaman web ini ke aplikasi Android buatanmu sendiri di MIT App Inventor. Cukup tambahkan komponen WebViewer dan satu tombol, lalu arahkan ke halaman web buatanmu tadi. Begitu tombol ditekan, kamera langsung aktif dan model AI bekerja! Ini tantangan seru: bisakah kamu bikin aplikasi sederhana dengan AI buatan sendiri? Jangan takut mencoba dan eksplorasi karena ini bukan cuma belajar teknologi, tapi juga berkreasi dan bermain dengan ide-ide kamu!
Nah, supaya makin greget, kita akan hubungkan halaman web ini ke aplikasi Android buatanmu sendiri di MIT App Inventor. Cukup tambahkan komponen WebViewer dan satu tombol, lalu arahkan ke halaman web buatanmu tadi. Begitu tombol ditekan, kamera langsung aktif dan model AI bekerja! Ini tantangan seru: bisakah kamu bikin aplikasi sederhana dengan AI buatan sendiri? Jangan takut mencoba dan eksplorasi karena ini bukan cuma belajar teknologi, tapi juga berkreasi dan bermain dengan ide-ide kamu!