# data[].attributes.body
1. 주제: 분류하기
2. 내용: 견과류 중 특징이 두드러지는 호두와 아몬드를 분류하기
3. 결과: p5 상에서는 분류가 정상적으로 이루어지지만, 마이크로비트와 연동은 실패함.

# data[].attributes.headline
202022827 정동규             1.주제: 색깔 강아지 구별하기                                            2. 제작 도구: Teachable Machine + Microbit            3. 기타사항:  시리얼통신이 작동이 안될 때가 간혹 있음. (컴퓨터사양에 따라 달라짐)

# data[].attributes.subject
202022827 정동규             1.주제: 색깔 강아지 구별하기                                            2. 제작 도구: Teachable Machine + Microbit            3. 기타사항:  시리얼통신이 작동이 안될 때가 간혹 있음. (컴퓨터사양에 따라 달라짐)

# data[].attributes.body
1. 주제: 햇님과 달님
2. 내용: 카메라에 호랑이 손이 인식되면 열쇠가 제공되지 않지만, 엄마 손이 인식되면 서보모터가 회전하며 문을 열 수 있는 대문 열쇠가 제공됨
3. 제작 도구: Teachable Machine + Microbit
4. 애로점: 제대로 작동이 되지 않을 때가 많음

# data[].attributes.attachment_link.title
마이크로비트와 티쳐블머신을 활용한 tiny sorter 제작(AI융합교육전공 202022829 정종하)

# data[].attributes.body
20번은 넘게 해도 안됩니다ㅠㅠ
1. 노트북, 데스크탑 둘다 안됨
2. 서보모터 빌려온 것으로 바꿔서 해봐도 안됨
3. 선을 꼽았다 뽑았다해도 안됨
*** 마이크로비트가  1개밖에 없어서 다른 것으로 바꿔서 하지 못했습니다. 안되는 이유가 마이크로비트 때문인지 모르겠지만 안됩니다 ㅠ

# data[].attributes.body
땅콩과 콩을 구분하도록 만들어보았습니다. 색깔이 비슷해서인지 잘 인식이 되지는 않습니다.

# data[].attributes.body
노트북의 문제인지, 혹은 무엇이 문제인지 모르겠지만, 서보모터가 작동이 잘 안되네요 ㅠㅠ
우선 아이디어만 먼저 제시하면,
초등학교 과학과 3학년 2학기, 동물의 한살이에서 동물을 분류하는 방법이 크게 3가지가 있습니다.
조류, 어류, 포유류로 분류하도록 하여, 학습된 데이터를 보고, 조류일 시 뒷판에 조류로 서브모터가 60도 정도 움직이고, 어류, 포유류도 마찬가지의 방법을 활용합니다.

그래서 단순히 빨간공, 초록공일 때 왼쪽 오른쪽으로 분류하기 보다는, 분류에  초점을 맞춰서 교과와 연계하여 동물을 분류하는 쪽으로 아이디어를 구상해 보았습니다.

또한, 서브모터가 아닌 티쳐블 머신을 활용한다 가정했을 때, 왼쪽 오른쪽으로 움직이는 것을 활용하여, 진실의 스무고개 같은 것도 할 수 있을 것 같다는 생각이 들었습니다. 감사합니다.

# data[].attributes.body
정보융합202111801 김소현

교수님께 마이크로비트를 빌려 다시 실행했는데 안됩니다ㅠㅠ

# data[].attributes.body
제목: 바둑알 구별하기
*시리얼통신, p5 전부 다 설정했는데 서보모터가 제대로 작동하지 않네요. 개별 작동은 잘 됩니다. 노트북이랑 데스크탑 두 군데애서 몇번이고 시도했는데 쉽지 않네요.

# data[].attributes.body
제목 : 공부할래 ? 놀래?
*** 마이크로비트 실행화면에서는 작동하지 않음. 마이크로비트저장후 이미지 인식화면에서 작동해야 됨.***
학생은 3가지를 선택할수 있습니다. 국어공부, 수학공부, 레고놀이
1. 레고를 선택하면 서보모터는90도로 움직이지 않음.
2. 국어책을 선택하면 서보모터는 0도
3. 수학책을 선택하면 서보모터는 180도
국어와 수학을 선택하면 선물로 하리보간식이 나오고, 레고를 선택하면 움직임이 없어서 간식을 받을수 없습니다. (놀거니까 간식을 줄필요까지는 없겠죠.)

# data[].attributes.body
동영상 화질이 낮아서 코딩한 것을 따로 캡쳐했습니다. 작동 시연은 동영상을 봐주십시오.

# data[].attributes.body
시작하면 서보모터 90도로 설정

result 1: 초록색 캔디 인식하면 서보모터 0도 -> 90도

result 2: 빨간색 캔디 인식하면 서보모터 180도 -> 90도

result 3: 캔디가 없을 때, 서보모터가 80도~100도로 왔다 갔다하도록 코딩

*문제점: 결과값 2일 때는 서보모터의 속도가 현저히 느림. 느리지만 코딩한대로 작동함.

# data[].attributes.body
시리얼통신까지 잘 연결되어 마이크로비트 LED가 깜빡이고 있어도 작동을 안하는 경우가 많네요. 20번 넘게 시도하다보니 어찌어찌 실행되었는데 정확히는 어떻게 되었는지는 감이 안잡힙니다.

# data[].attributes.body
학교에 마이크로비트가 없어서 교대에서 빌렸는데 장치페어링이 되지 않습니다. 그래도 시도해보았습니다

# data[].attributes.body
서보모터가 작동하지 않아 DC모터를 활용해보았습니다.
손 부채질을 하면 선풍기가 돌아가고, 손을 모으고 추워하면 선풍기가 꺼집니다.

# data[].attributes.body
서보모터, 티처블머신, p5, tiny sorter를 활용한 결과물입니다.

# data[].attributes.body
집이 어두워서 그런지 색깔 인식을 제대로 못해서 물체로 변경해서 해보았습니다. 마이크로비트와 인공지능을 연결해서 할 수 있다니 놀랍네요

# data[].attributes.body
서브모터가 없어서 tiny sorter 대신 쓰레기를 분류해주는 마이크로비트를 만들어보았습니다
모터 대신 마이크로비트의 LED가 버리는 방향을 분류해줍니다
카메라에 쓰레기를 인식시키면 쓰레기의 종류를 먼저 마이크로비트 LED에 띄어준 후 paper는 왼쪽, can은 오른쪽, 나머지는 X 표시를 띄어 쓰레기를 분류해줍니다.

# data[].attributes.headline
아무 것도 없을 때 포함한 코드

# data[].attributes.subject
아무 것도 없을 때 포함한 코드

# data[].attributes.body
1번, 2번은 각각의 색상, 3번은 아무것도 없을 떄 를 학습한다.

# data[].attributes.headline
Makecode 프로그램에서 시리얼 값 수신하기

# data[].attributes.subject
Makecode 프로그램에서 시리얼 값 수신하기

# data[].attributes.headline
P5.js Web 에디터의 포트 및 teachable learning 모델 URL 입력

# data[].attributes.subject
P5.js Web 에디터의 포트 및 teachable learning 모델 URL 입력

# data[].attributes.body
내 컴퓨터의 com포트와 p5시리얼의 포트 그리고 P5.js에디터의 포트 값이 동일해야 함

# data[].attributes.headline
P5시리얼 프로그램의 포트 개방

# data[].attributes.subject
P5시리얼 프로그램의 포트 개방

# data[].attributes.body
내 컴퓨터의 com포트와 p5시리얼의 포트 값이 동일해야 함

# data[].attributes.headline
내 컴퓨터의 com 포트 찾기

# data[].attributes.subject
내 컴퓨터의 com 포트 찾기

# data[].attributes.body
1. 티처블머신에서 url주소를 p5에디터에 복사붙여넣기하고 일단 실행(포트넘버는 넣을 필요 없음)
2. 노트북과 마이크로비트를  usb로 연결
- 내컴퓨터의 속성에서 com 포트 찾기
3. p5.exe 시리얼프로그램 실행
4. 포트 이름을 p5에디터에 적고 실행
5. 메이크코드에서 시리얼 통신하고, 아이콘(하트, 체크, 등등) 코딩하고 실행
6. 서보모터코딩하고 실행
(중간에 마이크로비트 시리얼 연결 끊어지는 경우 있으니 다시 연결해줘야 함)

# data[].attributes.attachment_link.readable_text
Note: I've cleaned up the code and upgraded libraries, also created a local version that you can run on your computer. Check out the Github repository.

Teachable Machine is a web-based AI tool developed by Google, which enables you to train and use AI models without any AI knowledge. An AI tool for dummies. Neat, right?

But can it do more than simply demonstrating machine learning in the web browser? Can it be a practical tool too?

Interestingly, there's a demo on the Teachable Machine website called Tiny Sorter which use p5.js (an online JavaScript editor/compiler) to talk to an Arduino Leonardo with a servo. So it is entirely possible to run AI on your computer and do something useful.

This tutorial is about how to make Teachable Machine AI output its recognition results to an external device, such as a microcontroller. My method is not the same as the Tiny Sorter demo, however the principle is similar. This would be especially useful for people who has little knowledge about AI, but interested to use it for their Maker or physical computing projects.

(Note: the following steps only tested on Windows 10.)
Pros of this method:

No AI knowledge required

Fast, easy and free model training/hosting

Almost no need to install anything

Pretty low cost if you already have a computer

Can be used on any microcontrollers as long as you know how to program them to read serial inputs and do stuff

Cons of this method:

Recognition has to be done on your computer and thus reduce the range/mobility of your microcontroller

Computer needs Internet connection

The AI models have limitations, it may get false readings and cannot be further customized

May be more difficult to debug on the microcontroller's end

Some AI experts might tell you this is cute but not the real thing. Yeah, ok...

Step 1: Generate and upload your AI model

When you train your model, I would use Class 0 as the background image (nothing), then the things to be recognized would be named as "1", "2", "3"...etc. This will be easier for the devices to read results.

For image recognition, you can move your object around to improve AI accuracy, and there should be enough difference between each objects.

Or if you are training the sound recognition model, make sure to input enough background noise samples first. Same as above, I would name the sounds to recognized as "1", "2", "3"...

After the model finished training, click Export Model than select Tensorflow.js -> Upload. Copy the model link after it is done. (For now sound recognition can only choose Tensorflow.js.)

Step 2: Prepare the p5.js script

The p5.js scripts template can be found here:

Or you can find the complete code here. I haven't done the gesture recognition version, but it should be easy to modify.

This script is basically the combination of Teachable Machine's and p5.js's example code. There are 4 files total:

sketch.js (main code)

index.html (import libraries)

style.css

p5.serialport.js (serial port functions)

You can login p5.js and duplicate/save your script. You'll only need to change two places:

microcontroller's serial port on your computer (see step 4)

the link of your model (step 1)

Note: later I'll see if it's possible to update both code to the new p5.js 1.0.

Remember to change the COM__ to your serial port!

Step 3: Program your microcontroller

Your device (in this case, a BBC micro:bit) will need its own program to be able to read serial inputs and do something about it.

The serial outputs are strings or characters and have no new line characters (like \r\n).

The following example is to indicate received image recognition results by lighting up different LEDs on my BBC micro:bit:

Result 1 (a BPI:bit ESP32 board) - red LED (Pin 0)

Result 2 (a Arduino Nano 33 IoT with shield) - green LED (Pin 1)

Result 3 (a Adafruit Metro M4 Express) - blue LED (Pin 2)

Result 0 (background only) - white LED (Pin 8)

The serial output baud rate is 9600. Since micro:bit's default rate is 115200, I had to reset it in the beginning.

let result = ""
serial.redirect(
 SerialPin.USB_TX,
 SerialPin.USB_RX,
 BaudRate.BaudRate9600
)

basic.forever(function () {
 result = serial.readString()
 if (result == "0") {
 pins.digitalWritePin(DigitalPin.P0, 0)
 pins.digitalWritePin(DigitalPin.P1, 0)
 pins.digitalWritePin(DigitalPin.P2, 0)
 pins.digitalWritePin(DigitalPin.P8, 1)
 } else if (result == "1") {
 pins.digitalWritePin(DigitalPin.P0, 1)
 pins.digitalWritePin(DigitalPin.P1, 0)
 pins.digitalWritePin(DigitalPin.P2, 0)
 pins.digitalWritePin(DigitalPin.P8, 0)
 } else if (result == "2") {
 pins.digitalWritePin(DigitalPin.P0, 0)
 pins.digitalWritePin(DigitalPin.P1, 1)
 pins.digitalWritePin(DigitalPin.P2, 0)
 pins.digitalWritePin(DigitalPin.P8, 0)
 } else if (result == "3") {
 pins.digitalWritePin(DigitalPin.P0, 0)
 pins.digitalWritePin(DigitalPin.P1, 0)
 pins.digitalWritePin(DigitalPin.P2, 1)
 pins.digitalWritePin(DigitalPin.P8, 0)
 }
})

Step 4: Connect your device's serial port

Download and unzip p5.js serial control program. Connect your device to USB and run the p5.serialcontrol.exe (for Windows). You may have to set it allowed to run in your antivirus program.

Once the program launched, open the serial port of your device. If you are not sure, open Device Manager to see which COM port it has.

Remember to close the COM port in p5.serialcontrol whenever you need to flash code onto your board! Otherwise it will be blocked.

After the serial port is connected and set in the p5.js sketch, everything would be good to go.

Step 5: Employ the power of AI!

Go back to the p5.js script editor and click Run. After a short while a webcam window should appear beside the script. You may see your device's serial port light blinking, indicating the data it received.

If you forget to open the serial port, nothing wrong will happen. The p5.js script would simply run as usual.

In the demo below I can indeed send image recognition results to my micro:bit:

Another demo here is using an Arduino Nano and a mini servo to indicate the sound recognition results: (The background noise is not a result. A result would only be returned when the model recognized something.)

Result 1 (finger snapping) - turn to 0 degrees

Result 2 (clapping) - turn to 180 degrees

I added a small delay at the end, for the servo needs some time to finish its turn.

Below is the Arduino code for controlling two LEDs based on 3 labels.

Remote control possibilities?

It is possible to control something not directly connected to your computer. One possible way is to use HC-05 Bluetooth module on the microcontroller as a wireless serial port.

If you are using micro:bit, you can use one to simply resend results to others via the "radio" function.

# data[].attributes.attachment_link.title
Use Teachable Machine AI to Control Anything

# data[].attributes.attachment_link.description
How to easily employ AI image/sound recognition for your microcontrollers, even if you know nothing about machine learning. Find this and other hardware projects on Hackster.io.

# data[].attributes.body
하트표시

# data[].attributes.headline
티처블머신(오디오인식) 서보모터

# data[].attributes.subject
티처블머신(오디오인식) 서보모터

# data[].attributes.body
김영수코드

# data[].attributes.body
추연희캔디분별기

# data[].attributes.body
A김채순

# data[].attributes.headline
A반 이연정(결과값 2가 느리게 반응

# data[].attributes.body
A반 이연정(결과값 2가 느리게 반응😅)

# data[].attributes.attachment_link.title
Tiny Sorter: A fun starter project with Arduino + machine learning

# data[].attributes.body
https://experiments.withgoogle.com/tiny-sorter/view

# data[].attributes.body
code