JavaScriptでとにかく何か作ろう① 環境を作って書いてある通りのことが出来る喜び

Base64の応答不良の解決策をGPTさんに示してもらったまま

なんだかんだあって取り掛かれず数日が過ぎました。

その間に、どんどんうまく行かなかった記憶だけが膨らんでちょっと

モチベーションがアレなので

何か別のことをして心を持ち直させようと思います。

 

大昔に初めて作ったプログラムのゲームがJavaScriptブロック崩しでした。

 

でもそれっきりやっていなかったので

JavaScriptでいろんなものを作ってあの頃の感動を思い出し、

折れた心をどうにかこうにかしようと思います。

 

こちら↓

最低限の知識で簡単なWebアプリを作る(生JavaScript vs React&TypeScript、やりたいこと別サンプル集) #フロントエンド - Qiita

にお世話になりながら、まず環境を作る。

 

Node.jsは既に入っている・・・はず。

確認方法はGPTさんに聞いてみよう。

コマンドプロンプトを立ち上げて、

 

node -v

 

を入力してバージョンが・・・出た。入ってる。



Reactプロジェクトの作り方でエラーが・・・

プロジェクト名に大文字は使えないと怒られた。

React1にしてたからか。

では小文字にしよう。

 

正直、Reactがどんなものかまだ全然理解していないので

プロジェクト名はreact1にしておく。

 

npx create-react-app --template typescript react1

 

あ、フォルダが出来た。

 

その後もサイトにしたがってやっていって・・・

npm start

を入力すると・・・

おお、なんか出てきた。

 

わあ

すごい。

 

見た目も良くしたいのでMaterial UIのインストールも行う。

どこにインストールするのかな?

 

GPTさんに聞いたところ

 

プロジェクトのフォルダ内でインストールする必要があります。

 

とのことなので、

 

以下のGPTさんの指示に従います。

  • プロジェクトのルートディレクトリに移動します。例えば、プロジェクトのフォルダがmy-projectという名前の場合:

     
    cd path/to/my-project
  • プロジェクトのフォルダ内で以下のコマンドを実行して、Material-UIをインストールします:

     
    npm install @mui/material @emotion/react @emotion/styled

 

 

後はサイトの内容に従ってやっていくと

 

おおお。

書いてある通りにしたら出来る喜び。

 

M5stackCore2の時はそれが出来なかったので、

書いてある通りのことが出来ることがすごく嬉しい・・・

 

 

 

 

M5Stack Core2 音声認識したい⑪ Speech-to-Textを使おう!2 ・・・Base64だけなんとか。

全てが順調にいくかと思われたのですが・・・

 

Speech-to-TextのAPIを入れて、音声ファイルを読み込んで。

やりたいことの全てが載っているプログラムをGPTさんが提供くださったのですが・・

 

エラーが消えない!!

 

で、そのエラーの原因かもしれないのが

やっぱり毎回2回押さないと実行できないアレ

 

の可能性もないこともないかもと思い・・・

 

つまりいわゆる頓挫状態

 

ここはもう時は金なりです

言うてられん。

 

本を買います。

542円のアマゾン電子書籍

 

「覚えないで学ぶMicroPythonプログラミング」

 

microPythonの本は2冊だけヒットし、こちらの方が安かったのと、

目次を見ることができて、やりたいことが書いていそうな雰囲気がしたから

 

GPTさんとこちらの本を師匠に、再びUIFlowのファームウェアに頼らない

microPythonチャレンジします

 

・・・・

・・・・

 

・・・・

 

あかん

 

迷宮入りや。

すごい分かりやすい本なのに。

途中までは完璧やったのに。

 

自分のせいですわ・・・

本もGPTさんも親切やのになんでや・・

 

でも、いろいろやって分かったのはファームウェア間違って入れてた可能性

 

これで最後、もう一度だけ APIキーでBase64のデータを扱うプログラムだけ見直そう。

 

一度自分でWAVをBASE64にしよう・・・

 

以下はGPTさんより

 

import base64

# 音声ファイルを読み込んでBase64エンコード
with open("train.wav", "rb") as audio_file:
    audio_content = base64.b64encode(audio_file.read()).decode('utf-8')

print(audio_content)

 

train.wavはこのコード(名前をencode_audio.pyという)と同じところに置いています。

実行すると出来ました!

 

今日はじめての出来ました感

 

これをAPIキーでSpeech-to-Textへ・・・

 

・・・・

Base64が長すぎて貼り付け中に応答不良

 

これについては解決策をGPTさんが教えてくれたのでまた明日以降します

 

なんとか一つだけでも出来たものがあって良かった・・おやすみなさい

 

 

M5Stack Core2 音声認識したい⑩ Speech-to-Textを使おう!1

前回までに大きなテーマをつけるとしたらmicroPythonファームウェア失敗編です。

 

今回からはUIFlowのファームウェアでThonnyを用いてmicroPythonでのプログラミングをしていきます。

 

実はAPIは先になんとか取得に成功しているのです。

 

詳しくはここ

M5Stack Core2 音声認識したい② Speech-to-Text APIキーが遠い - 支援機器やアプリなどのメモ

 

 

で、今からはこの時にもお世話になりましたGPTさんに基本は従って進めます

 

以下、GPTさん

手順1: Wi-Fi接続の設定(続き)

  1. Wi-Fi接続プログラムの作成
    • Thonny IDEで新しいファイルを作成し、以下のコードをコピー&ペーストします。
 

import network

def connect_to_wifi(ssid, password):
    wlan = network.WLAN(network.STA_IF)
    wlan.active(True)
    wlan.connect(ssid, password)
    
    while not wlan.isconnected():
        pass
    
    print("Connected to WiFi:", wlan.ifconfig())

# Wi-FiSSIDとパスワードを入力
ssid = 'あなたのSSID'
password = 'あなたのパスワード'

connect_to_wifi(ssid, password)

  1. プログラムをM5Stack Core2に保存
    • Thonny IDEで「ファイル」メニューから「名前を付けて保存」を選択し、保存場所として「MicroPythonデバイス」を選びます。
    • ファイル名をwifi_connect.pyとして保存します。

 

一回一回止まって、私のOKを聞いてから次に進んでいただくようお願いしています。

ここまでOK

 

 

手順2: Wi-Fi接続プログラムの実行

  1. Wi-Fi接続プログラムの実行
    • Thonny IDEで「ファイル」メニューから「スクリプトを開く」を選択し、wifi_connect.pyを開きます。
    • Wi-FiSSIDとパスワードを自分のネットワーク情報に置き換えます。
    • Thonny IDEの「実行」メニューから「現在のスクリプトを実行」を選択します。

これでデバイスWi-Fiに接続されるはずです。コンソールに「Connected to WiFi:」と表示され、IPアドレスが表示されることを確認してください。

 

 

実行してみた・・・どきどき

 

あ。。

これ、よく考えたらUIFlowのファームウェア

実行→再起動→インターネット接続後止まる→実行→実行される

 

という仕様だから、そもそもインターネットつながってる。

このプログラムを実行する時点で、つながってないと実行できない流れなんだった

 

この仕様の解決方法は前回、1回諦めたので、ここままあこれで行きます。

 

 

 

 

M5Stack Core2 音声認識したい⑨ UIFlowのファームウェアに戻ります。microPythonをプログラムしていく方に今は専念します

いろいろやってますがなかなかうまく行きませんね。

 

ファームウェアは入ったっぽいのに、本機は再起動の度にインターネットにつなげてって言ってくる。

 

GPTさんによると、これは前のUIFlowのファームウェアが残っているせいらしい。

 

だから

M5Burner から削除しないとダメらしい。

一度Burnを押すとEraseが出てくるから押してみる

 

押しましたよ。

またエラーが出たけどUSB抜き差ししたら消えました。

 

エラーが消え、Eraseも成功しました。

少し文言が止まってしまったところがあったので信用できずリセットかけかけましたがその瞬間にsuccessが出たので良かったです。

ちょっと時間かかるみたいです。

 

 

次に、この左欄をAllにして

 

pythonと検索するといろいろ出てくる。

その中の

これ。esp32_allというのがバージョンのところに書いてあるのがいいらしい。

入れてみましょう。

 

というか前に一度入れて、本機から変な音がしたのこれだった気が・・・

 

やっぱり異音がしますね。

リセットするように言われましたが、消えた後画面には何も表示されません。

これがファームウェアが無い

という状態なんでしょう。

 

でもカチカチカチカチカチ鳴ってるのはなんかドキドキします。

Thonnyを立ち上げると止まりましたが、PC上で立ち上げただけだから偶然?

なのかな

 

おお、これもGPTさん曰く

「M5Stack Core2から「カチカチ」という音が鳴っている場合、これはデバイスがリセットを繰り返している可能性があります。」

なんでも知ってるね、あなたは。

 

しかし仕組みが分かったとこで解決する訳ではない。

これが鳴り続けているかぎり、microPythonのプログラムをいれようとしても

忙しいから入れられない的なエラーが出続けます。

 

もうどうしようもないのでこっちを入れてみた。

 

esp32_allじゃなくて、普通にバージョンが書いてある方。

 

あ、ダメだ

やっぱりカチカチ言い始めた。

 

もう駄目だ。

今日午前中からずっとこれやってる。

 

でもmicroPythonが動かせなかったわけじゃないし。

Thonnyで2回実行を押さないといけないと言うだけで・・・

 

これはもう少し慣れたら戻ってきて、

2回押しでmicroPythonのプログラムを打つ方にシフトチェンジします

 

 

安定のUIFlow

 

ああ・・・画面の色を変えられるだけでこんなに嬉しい。

この子↑が正常に動くだけで感無量

 

 

・・・と言ってる場合じゃない。

Thonnyで動くようにしないと

 

これは特に問題なく

そのままThonnyを立ち上げて、GPTさんにサンプルでもらった

プログラムを入れると動きました。

 

相変わらず2回実行ボタンを押す必要がありますが。

 

ところで、起動時のチーンって音、消せるんですね。。

さっきまで人がいるところでやってたからスピーカー部分をめっちゃ

手で塞いで、カバンの中に入れて音を小さくしてたのですが・・・

 

M5Burner のconfigureのLoadからBeep音っぽい項目をOFFにしたら消えました・・

M5Stack Core2 音声認識したい⑧ ファームウェアの容量?? もしかしてやっとmicroPythonのファームウェア入った・・・?

全てやり直しました。

 

ChatGPTさんに、一工程ずつ教えて下さいとお願いしました。

microPythonは動きます。

 

動くんです。

 

でも、実行する度に再起動

再起動するとインターネット接続画面で止まる

そこでまた実行

やっと動く

 

という今日の最初の状態に戻ります

そこをなんとか

 

ということで、今、ファームウェアの入れ直しをしています。

 

microPython公式からESP32_・・・.bin 的な名前のファームウェアをダウンロードしろと言われました。

 

それは昨日のうちにダウンロードしてたので、ありますと言ってみる。

 

そしたらM5Burner から自分でそれを本機に入れろと言われた

 

USER custom かなと思い、左欄の一番下をクリック

ログインしろと言われる

 

ずっとこのログイン何故かエラーが出続けてるから嫌々すると・・

初めて入れた!!

 

一番左のEXport・・・的な文言のあるボタンを押す。

 

入れますよ?選びますよ?

 

動き始めた・・・

 

入った

再起動した

 

それから・・・何をしたらいい・・?

 

Thonnyに書き込んだプログラムをmain.pyとして本機に保存

それから再起動・・・

 

変わらん!!

APIKEYで止まる!!

 

 

次だ!

 

えーっと・・・

またフラッシュ消去・・・

esptool erase_flash

 

GPTのいうコマンドだとエラーになるけど、これなら成功する。

なぜかは分かりません。

 

次にファームウェアを入れる度にずっとエラー。

どうも容量が合わないらしい。

 

ちがうやつ入れようとしてるんかな、自分・・・

 

GPTさんが

これを入れてみてと言ってきましたので入れます

 

esptool --port COM5 write_flash -z --flash_size 16MB 0x0000 "C:/Users/・・・/ESP32_GENERIC-20240222-v1.22.2.bin"

 

あ、初めてちゃんと何かしてるっぽい表示が出てる

コマンドプロンプト上のパーセントがゆっくり上がってく。


出てきたメッセージをGPTさんに見てもらったら

素晴らしいですね!

って褒められた。

やっとちゃんとファームウェア入ったってこと・・・?

 

 

 

M5Stack Core2 音声認識したい⑦ なんか機械から異音が!!Thonny無限ループも終わらない→終わった

やばいやばい

 

m5stackCore2本体の電源を一度切ったら

ずっと中で

カチカチカチカチカチって鳴ってる

画面真っ暗切れた状態なのに!

 

やってしまった?

壊した?

 

半泣きになりつつダメもとでそのままFactoryTestをBurnしたら、

なんと入りました!!

 

こんなにこの画面が愛しかったことはない・・・

 

USBドライバーいれて 

 

次は、最初からmicroPythonを入れてみようかな

 

あ、後入れ終わったらPCも再起動しておこう。

 

どうしたらいいかChatGPTに聞く

 

フラッシュを消せと

esptool erase_flash

 

これを入れる。

消せた

 

ファームウェアを入れ直せと言われた

 

microPythonじゃなくて、正常に今まで動いていたUIFlowを入れる。

 

 

と、止まった!!!

 

え?じゃあmicroPythonのファームウェアがダメってこと??

この警告はマジだったってことか・・・

 

M5Stack Core2 音声認識したい⑥ まだまだトラブル

無事、工場出荷状態に戻せた後からです。

 

USBドライバーも入れました。

しつこいですが入れ方は

m5stack公式ページの↓ここの3番目に書いてあるものです。私の場合。

 

次に、ファームウェア

ファームウェアの概念がこの数日で完璧に感覚的に理解出来て来た。

 

M5Burner から該当のものを入れます。

 

・・・

あれ、やっぱりネットつながらな・・・

 

 

何もWi-Fiが登録されない・・・

そうか、、、そりゃそうか

 

API KEYも変わっているので

UIFlowで入れ直す・・・

 

よしつながった。

 

ここまでは良い。

 

次に

マイクロPythonだ。

 

でも、ファームウェアはUIFlowで良いとしたらこのまま動くのでは??

 

・・・・

う、うまくいった。

 

最初の一回目の実行は本体が再起動されてAPI KEY表示のまま止まったけど、

そのまま再度実行すると、昨夜ぶりに

Hello,M5Stack!が・・・

 

Hello 本当に hello・・・

 

・・・

プログラム実行の度に再起動→API KEYで止まる→再度実行→フリーズしたまま

もしくは一個前のプログラムが起動

 

・・・

 

ついにChatGPTの有料に申し込んでしまった・・・・

本をまた買おうかとも思ったけど、新しいことをやる度に買い足していくより

ChatGPTさんにお尋ねした方が経済的では無いかと考え・・

 

最近、M5関係でかなり散財しているので躊躇しましたが

他の仕事にもきっと使えるだろうということで購入しました

 

・・・

 

さて、新ChatGPTさんに聞きながら、ファームウェアの入替が大事ということが分かりました。

UIFlowのままじゃダメなのかな

 

Core2の中をいくら探してもmicroPythonのファームウェアは見つけられず。

 

仕方ないのでCore を見たらありました。

 

入れようとしたらなんか怖いこと言われましたが

何かあったらその時はその時!

ということで行ってしまいましょう。

 

というまあまあ覚悟をもってやったのに、

 

本体再起動!リセットボタンじゃなくて切って、起動の再起動!

はい、

 

APPModeに!

しても同じ!

 

最終手段、FactoryTest!

 

 

Burn!!

 

 

なんでや!!

 

 

USB抜去!!

USB再挿入!!!

 



まじか!!

 

普通にFactoryTestに戻さなくても

microPython入ったわ。。。

 

 

今度はThonnyの無限ループ

Thonnyのシェルが何かをずっとずっと書き込んで止まりません

 

stopボタンを押しても書き込んでます。

 

アンインストールしてしまいました。

 

再インストール

 

再インストール後の初起動なのにずっと何か書き込んでいる!!

 

続く!