【M5StickC Plus】話題のAI「ChatGPT」にプログラミングしてもらったよ


この記事は[IoTLTのアドベントカレンダーの2022](https://qiita.com/advent-calendar/2022/iotlt) の 3日目の記事です。


私はプログラミングできると勘違いされてますが、実は全然ダメです。
ググったものをコピペしてちょっと修正するようなことばかりで、何も見ずにゼロからプログラミングするなんて至難の業です。

<br>
そんな私に朗報がありました。<br>
最近、私のTwitterのタイムラインで、ChatGPTというAIモデルに関する話題が頻繁に登場するようになって来ました。<br>
ChatGPTは会話だけでなくプログラミングもしてくれると知り、早速ためしに手元にある　「M5StickC Plus」でもできるかチャレンジしてみました。
<br><br>
なお、ChatGPTは、こちらのリンクから誰でも無料で試すことができます。<br>

[https://chat.openai.com/chat](https://chat.openai.com/chat)


<br>

## Arduino IDE

### Hello World

まずは、基本のHello World。
以下を内容でAIに頼んでみました。
<B><font color="BLUE">「M5StickCPlusの画面に「Hello World」を表示するプログラムを作ってください」</font></B>

すると、すぐ回答がありました。
特に言語を指定しなかったら、Arudino IDE のプログラムを作ってくれました。

![Image from Gyazo](https://i.gyazo.com/a402c0db1c14b7e8ed1dad9bd0078144.jpg)

それもAIさんの解説付きです。
ただ、ライブラリまでは気が回らなかったらしく、1行目のM5stickCを M5stickCPlus.h に人力で修正して、コンパイル、M5StickCPlusに書き込みました。

その結果がこれ
<blockquote class="twitter-tweet"><p lang="zxx" dir="ltr"><a href="https://t.co/1BKhwPrvzQ">pic.twitter.com/1BKhwPrvzQ</a></p>&mdash; たつや (@tatsuya1970) <a href="https://twitter.com/tatsuya1970/status/1598989068645601280?ref_src=twsrc%5Etfw">December 3, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

位置を指定してなかったこと、Hello Worldがループの中にあったため、一定間隔でHello World を表示する結果になりました。
<br>
次はもう少し表示場所などを具体的にした依頼文にしました。

<B><font color="BLUE">『「M5StickCPlus.h」というライブラリを使って、M5StickCPlusの画面に中央に固定した「Hello World」を表示するプログラムを作ってください。』</font></B>


[![Image from Gyazo](https://i.gyazo.com/824d2bf81a03972a45005c186ec52833.png)](https://gyazo.com/824d2bf81a03972a45005c186ec52833)

なぜか、指示してないのに、シレっとフォントサイズを２倍にされてます。
このほうが見やすいという判断なのでしょうか。

<br>
実行結果！
<p>
<img src="https://i.gyazo.com/dad0c47eaf064fbee2a8e75dbfd0555b.jpg" width=60%>


素晴らしい！！
<br><br>

### センサーの値を表示

次はセンサーの値を表示させます。

以下の文章でAIに頼みます。
<B><font color="BLUE">『「M5StickCPlus.h」というライブラリを使って、M5StickCPlusの画面に中央に固定した加速度センサーの値を表示するプログラムを作ってください』</font></B>

[![Image from Gyazo](https://i.gyazo.com/7ce0c86724138209106a6806177882cc.png)](https://gyazo.com/7ce0c86724138209106a6806177882cc)

なんかエラー出ました。
[![Image from Gyazo](https://i.gyazo.com/e7640d6690d8dab74e37fca946408ab4.png)](https://gyazo.com/e7640d6690d8dab74e37fca946408ab4)

その後、試行錯誤の上、以下の文章でうまくいきました。

<B><font color="BLUE">『「M5StickCPlus.h」というライブラリを使う。「M5.IMU.getAccelData(&accX,&accY,&accZ)」で加速度センサーの値を求める。その値をM5StickCPlusの画面に中央に固定して表示するプログラムを作ってください。』</font></B>

ここまでいくと自分でコード書いた方が早いのでは？　とは言わないでください。
ちなみに、ここに至るまで6時間かかりました　（笑）

AIが生成したプログラム

``` python
#include "M5StickCPlus.h"

void setup() {
  M5.begin();
  M5.IMU.Init();
}

void loop() {
  // 加速度センサーから値を取得
  float accX, accY, accZ;
  M5.IMU.getAccelData(&accX, &accY, &accZ);

  // 画面の中央に表示
  M5.Lcd.setCursor(240/2, 135/2);
  M5.Lcd.printf("x: %f\n", accX);
  M5.Lcd.printf("y: %f\n", accY);
  M5.Lcd.printf("z: %f\n", accZ);
}

```

<br>

結果
<img src="https://i.gyazo.com/444c65b752adda71e329cc2526bcd2f0.jpg" width=60%>

なんとかできました。
<br>

## UIFlowの MicroPython


UIFlowにも挑戦しました。
※この事例は、そのあと同じ文章を何度唱えても、なぜか再現できないのですが。

### Hello World

では
<B><font color="BLUE">『「M5StickCPlus」の画面に「Hello World」を表示するmicro pythonのプログラムを作ってください。』</font></B>

AIの回答
[![Image from Gyazo](https://i.gyazo.com/7a359027eb9b4e649b997e8d2d42dfb7.jpg)](https://gyazo.com/7a359027eb9b4e649b997e8d2d42dfb7)



これをUI-Flowにコピペして、実行（RUN)すると、

m5stickplus なんてモジュールないよ　　ってエラー
<img src="https://i.gyazo.com/27dd094d14f7a442de23ec09674fcbe7.jpg" width=60%>


では、文章を　M5StickCPlus ではなく M5Stackにしてみると
 
<B><font color="BLUE">『「M5Stack」の画面に「Hello World」を表示するmicro pythonのプログラムを作ってください。』</font></B>

[![Image from Gyazo](https://i.gyazo.com/6e4c55184e23b2b19a078c99737e66df.jpg)](https://gyazo.com/6e4c55184e23b2b19a078c99737e66df)

おお、成功！
<img src="https://i.gyazo.com/399da67c1d31e0301de019daff66be99.jpg" width=60%>


### センサーの値の表示

次に、加速度センサー　の値を表示させてみます。

<B><font color="BLUE">『「M5Stack」の画面に加速度センサーの値を表示するmicro pythonのプログラムを作ってください。』</font></B>

AIの回答
[![Image from Gyazo](https://i.gyazo.com/86ca8fe4c12bac50a3d14f36223f8efc.jpg)](https://gyazo.com/86ca8fe4c12bac50a3d14f36223f8efc)

これをコンパイルして実行すると、「変数が定義されてないよ」　って怒られました。
<img src="https://i.gyazo.com/974a87b97c1921e21d48801da4086a9e.jpg" width=60%>


自分でUIFlowで書くとたったこれだけのことが難しい。
[![Image from Gyazo](https://i.gyazo.com/89c4edc184bb26d9eea58adba063622c.png)](https://gyazo.com/89c4edc184bb26d9eea58adba063622c)

本末転倒ですが、先にMicroPythonでの正解を見てから調整していくことにしました。
これが正解のプログラム。
[![Image from Gyazo](https://i.gyazo.com/35764877195f7f51d56d88c6d1ff7cd5.png)](https://gyazo.com/35764877195f7f51d56d88c6d1ff7cd5)


で、いろいろ試行錯誤した最終結果がこの文章。
ここまでするのならAIいらなくね？　とは言わないでくださいw

<B><font color="BLUE">『「M5Stack」の画面に加速度センサーの値を表示するプログラムを作ってください。imuライブラリーをインポートしてください。X軸はimu0.acceleration[0])、　y軸はimu0.acceleration[1])、z軸はimu0.acceleration[2])　です。』</font></B>


それを受けて、AIは以下のコードを生成してくれました。

```python
# Import the necessary libraries
from m5stack import *
from m5ui import *
from uiflow import *

# Import the imu library
import imu

# Initialize the imu
imu0 = imu.IMU()

while True:
    # Read the accelerometer data
    accel_x = imu0.acceleration[0]
    accel_y = imu0.acceleration[1]
    accel_z = imu0.acceleration[2]

    # Clear the screen
    lcd.clear()

    # Print the sensor data on the screen
    lcd.print("Accel X: {}\n".format(accel_x), 0, 0)
    lcd.print("Accel Y: {}\n".format(accel_y), 0, 10)
    lcd.print("Accel Z: {}\n".format(accel_z), 0, 20)

    # Sleep for 1 second
    time.sleep(1)

```

<br> 
実行！
<p>


動いた！
<img src="https://i.gyazo.com/2872d3fbf6feca9000c2ec23d9c097e2.jpg" width=60%>


<br><br>
たしかに、現段階では自分でプログラミングした方が圧倒的に早いですが、どちらかというと世界的にはマイナーな方に入るM5Stackのプログラミングがここまでできるとは驚きでした。

ここ数ヶ月でもの凄い進化を遂げた画像生成AIのように、プログラミングAIもあっという間に進化するような気がします。

人類がプログラミングから解放されるシンギュラリティの未来がみえて来ました。


<br>

明日は　[kitazaki](https://qiita.com/kitazaki) さんの予定です。
お楽しみに。