1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

かわいい!から始まったスタックちゃん開発。M5StackとDifyをつないだら「保育スタックちゃん」が生まれた〜!

1
Posted at

こんにちは。元幼稚園教諭のりゆです。

最近は生成AIやテクノロジー分野で色々な技術を触って遊びながら、プロトタイピングの領域で研修講師をしています。

ずっと気になっていた、かわいいあの子がやってきた!

ずっと「かわいいな〜」と思っていたスタックチャン。
おおえさんに教えてもらって、ついに買いました!

まずはスイッチを押してみたら起動した!Wi-Fiを設定したら勝手に動き出した!!

かわいすぎる。

Wi-Fiを設定したら動き出した時の様子。もう、ずっと見ていられる……!

最初は動いている姿を見ているだけで満足していましたが、見ているうちに欲が出てきました。

スタックちゃんをしゃべらせたい!

そして、どうせなら私が今まで学んできた保育の知識を使って、保育の相談に答えてくれる「保育スタックちゃん」にしたい!

ということで、知識ほぼゼロからスタックちゃん開発が始まりました。

リアルタイムで試行錯誤していた記録はこちらです。

👶保育の相談に答える「保育スタックちゃん」が生まれました

最終的にできたのがこちらです。

スタックちゃんに話しかけると、Difyに入れた保育の知識をもとに、声で返事をしてくれます。

私がスタックちゃんに話しかける
        ↓
M5Stack CoreS3が録音する
        ↓
Dify APIに質問を送る
        ↓
Difyが保育の知識をもとに回答する
        ↓
スタックちゃんが声で返事をする

保育スタックちゃん生まれた〜〜〜!

ここまで来るのに、音が出なくなったり、SDカードが必要になったり、Wi-Fiにつながらなかったり。

とにかく色々ありました。笑

✍️使ったもの

  • M5Stack CoreS3:今回のスタックちゃん本体
  • Arduino IDE:CoreS3にプログラムを書き込むために利用
  • M5Stackchanライブラリ:スタックちゃんを動かすために利用
  • M5Unified:マイクの動作確認で利用
  • AI_StackChan_Ex:AIと音声で会話する仕組みの土台
  • Dify:保育の知識をもとに回答するAIを作成
  • Google Apps Script(GAS):APIキーを中継するために利用
  • OpenAI API:最初の音声会話テストで利用
  • microSDカード
  • Wi-Fi環境

🗣️まずはスタックちゃんをしゃべらせたい!

タカヲさんに「スタックちゃんをしゃべらせたいんだ〜」と相談してみたところ、AI_StackChan_Exなどを教えてもらいました。

まずはブラウザから動かせる方法を試してみました。

しゃべった!!!

と思ったのに、なぜか途中から音声が聞こえなくなってしまいました。

ログには入力した日本語が表示されているので、言葉は受け取っていそう。でも音が出ない。なんでだろう?

入力した日本語は受け取れていそうなログ

Wi-Fiをつなぎ直してみたら、精度はまだ低いけれど、もう一度しゃべりました!

理由は完全には分からないけれど、とりあえず一歩前進!

ここから「完成しているものを動かすだけじゃなくて、自分でも開発してみたい!」と思うようになりました。

💻本格的にスタックちゃん開発へ!と思ったら早速エラー

まずはVS CodeにPlatformIO IDEという拡張機能を入れてみました。

VS CodeにPlatformIO IDEを入れている画面

インストールでエラーが出た!と思ったら、M5Stackの型番を選べていなかったことが原因でした。

M5Stackの型番設定で出たエラー

機械が違えば、書き込むプログラムの設定も変わるんですね。なるほど。

型番を設定して進めてみたら、次はSDカードが必要なコードだったことが発覚!

SDカードが必要だと分かった時の画面

SDカードがいらないコードに書き換えることも考えましたが、まずは最速で動かしてみたいのでSDカードを買うことにしました。

そして2週間後……。

SDカードを手に入れた!けど!

Macから書き込めない!

カードリーダーが手元にありませんでした。笑

コードだけではなく、型番、SDカード、カードリーダーなど、ハードウェア開発は必要なものがたくさんあるんだと知りました。

🤖Arduinoで小さな「できた!」を増やしてみる

いったんArduino IDEで動かしてみることにしました。

ちなみにコンパイルとは、人が書いたプログラムをM5Stackが理解できる言葉に翻訳することらしいです。

この時に「保育スタックちゃんを生み出して」とお願いした結果がこちら。こんな感じになるの!?笑

まずM5Stackchanライブラリを入れて、簡単な動きから作りました。

  • 画面をタッチしたら「タッチしたよ」と表示する
  • 画面をタッチしたら音が鳴る

画面をタッチしたら文字を表示するテスト

画面をタッチしたら音を鳴らすテスト

動いた!嬉しい!

いきなりAIと音声会話をしようとすると、どこで失敗しているのか全然分かりません。

タッチできた、画面に表示できた、音が鳴った、と1つずつ確認すると、何ができていて何ができていないのか分かりやすくなりました。

🧠Difyに私の保育の知識を入れてみる

次はDifyとつなげます。

Difyでは、自分が今まで蓄積してきた保育の知見をまとめたスプレッドシートから、質問への回答を返せるようにしました。

まずは音声を使わず、固定の質問を送ってみます。

スタックちゃんをタッチ
        ↓
ArduinoからDifyへ固定の質問を送る
        ↓
Difyの回答を受け取る
        ↓
シリアルモニターに表示する

シリアルモニターとは、M5Stackの中で何が起きているのか文字で確認できる画面です。

画面や音に何も出ていないと「動いていない!」と思ってしまいますが、シリアルモニターを見ると、Wi-Fiの接続状況やDifyから返ってきた回答を確認できます。

そしてついに……。

Difyから回答返ってきた〜〜〜!

Dify APIとの接続をシリアルモニターで確認

回答の中にあるAnswerを取り出して、スタックちゃんのディスプレイにも表示させることができました。

🔐APIキーをArduinoに直接書くのは危ないよ

DifyのAPIキーをArduinoのコードに直接書けば、簡単につなげられそうです。

でも、そのコードを誰かに共有したり公開したりすると、APIキーも一緒に見えてしまいます。危ない!

そこで今回は、GASにAPIキーの中継役をしてもらいました。

スタックちゃん
   ↓
GAS(APIキーを持つ)
   ↓
Dify

今回はプロトタイプなのでこの形で進めていますが、実際に多くの人が使う場合は、GAS側の認証やアクセス制限なども必要になりそうです。

📶Difyにつながらない!原因はWi-Fi?

無事に接続できた!と思ったら、シリアルモニターを見るとWi-Fiにつながっていないっぽい。

色々触ってみて分かったのは、今回使ったインターネット共有では、共有設定の画面を開きっぱなしにしないとダメだったということでした。

画面を開いたまま、もう一度試してみると……。

インターネット共有を確認している画面

お〜!Difyの回答出た!!!

APIが動かない時は、コードやDifyの設定だけではなく、次の順番で確認すると良さそうです。

  1. Wi-Fiにつながっている?
  2. APIのURLは合っている?
  3. APIキーは正しく渡せている?
  4. 質問は送信されている?
  5. 回答はどの項目に入っている?

🎤CoreS3で録音と再生をしてみる

文字でDifyとやり取りできたので、いよいよ音声です!

まずはCoreS3のマイクとスピーカーだけを試します。

Arduino IDEのこちらのサンプルを使いました。

ファイル → スケッチ例 → M5Unified → Basic → Microphone
私「こんにちは」
        ↓
CoreS3が録音
        ↓
CoreS3から「こんにちは」が再生される

録音できた!再生もできた!

これでCoreS3のマイクとスピーカー自体は動いていることが分かりました。

🤖AI_StackChan_ExをDify APIに書き換える

音声会話の仕組みには、AI_StackChan_Exを使わせていただきました。

まずはOpenAI APIキーを設定して試してみます。

会話できた!!!

次はOpenAI APIへ直接質問を送る部分を、Dify APIへ送る形に書き換えました。

ここでも、YAMLのAPIキー設定でエラーが出たり、つながったように見えるのに音声を聞き取ってくれなかったりしました。

設定を見直して、もう一度試して……。

やった!Dify接続までできた!!!

Dify APIへの書き換え中の画面

Difyとの接続に成功した時の画面

そしてついに、スタックちゃんに話しかけると、Difyに入れた保育の知識を使って声で返事をしてくれました。

しゃべった〜!保育スタックちゃん生まれた〜!

完成した保育スタックちゃんはこちらです!

最初はスイッチを押して「かわいい!」と言っていただけなのに、自分が持っている保育の知識で会話してくれるところまで育ちました。嬉しい!

🏫保育スタックちゃんを展示会に連れて行ってみた!

出来立てほやほやの保育スタックちゃんを、Interface誌主催の「つくったもの展示の会 in 工学院大学 新宿キャンパス」に出展してきました!

自分の机の上で動かしていたスタックちゃんを、初めてたくさんの人に触ってもらいます。

ちゃんと声を聞き取れるかな?返事してくれるかな?とドキドキしていましたが、たくさんの方が話しかけてくれました。嬉しい!

中でも印象的だったのが、インドから来た学生さんが話しかけてくれたこと。

「多言語でも認識できるのかな?」と、その場にいるみんなでスタックちゃんを見守る会になりました😳

なんだか可愛らしい方でほっこり。インドのご家族にもこの様子を届けてあげたいなぁと思いました🥹🇮🇳

作っている時は「動いた!」だけで嬉しかったけれど、実際に人が使ってくれると、自分だけでは気づけなかったことがたくさん見えてきました。

📝会話ログを取ったら、聞き間違いも見えてきた

展示会では、保育スタックちゃんとの会話ログも取ってみました。

ログを見返してみると、ちょいちょい「はじめしゃちょーエンディング」という言葉が入っていました。

……なんでだろう。笑

会話しているその場では普通に動いているように見えても、ログを残すと「何と聞き取ったのか」「どんな回答を返したのか」を後から確認できます。

特に展示会場は、周りの人の声や音がたくさん入る環境です。静かな部屋で試した時とは、音声認識の結果が変わることが分かりました。

ログを取ることは、ただ記録するだけではなく、スタックちゃんをもっと賢く育てるために大事そうです。

💡展示会に置いて初めて分かった3つの課題

1. 会場では音量が小さい

家や静かな場所では聞こえていた声も、展示会場に置くと周りの音に負けてしまい、返事が聞こえにくくなりました。

会場で使うなら、スピーカーの音量を上げるだけで足りるのか、外付けスピーカーが必要なのかを試したいです。本番前に、実際の会場に近い騒がしい環境で確認することも大切そうです。

2. 「生成中」が分かりにくい

質問したあと、スタックちゃんが考えているのか、声を聞き取れなかったのかが見た目では分かりません。

待っている人からすると「もう一度話しかけた方がいいのかな?」となってしまいます。

画面に「考え中……」と表示したり、表情を変えたり、動いたり、短い音を鳴らしたりして、今の状態が分かるようにしたいです。

3. 返答までに時間がかかる

Difyで回答を作って、音声にして返すまでには少し時間がかかります。展示会で誰かが待っていると、無音の数秒がとても長く感じました。

まず「ちょっと待ってね!」とすぐに反応してから回答を考えるようにすると、待っていることが分かりやすそうです。

さらに、Difyのフローや利用するモデル、音声生成までの処理を見直して、どこに時間がかかっているのかログで確認していきたいです。

🔧次の展示に向けてやりたい対策

  • 会場の騒音に負けない音量や外付けスピーカーを試す
  • 質問を受け取ったら「考え中……」の画面・表情・動きを出す
  • まず短い相づちを返して、待っている状態を伝える
  • 音声認識・Dify・音声生成にかかった時間をログへ残す
  • 聞き間違えた言葉を確認して、騒がしい場所での認識精度を上げる

完成したと思って展示会へ持っていきましたが、人に使ってもらったことで、次に直したいことが一気に見えてきました。

これもアウトプットしたからこそ分かったこと!保育スタックちゃんをもっと会話しやすい子に育てていきたいです。

今後作りたい機能がたくさんある

  • 子どもの声も聞き取りやすいように音声認識の精度を上げたい
  • 子どもにも分かりやすい言葉で話せるようにしたい
  • 回答に合わせて表情や動きを変えたい
  • 保育士さんや子どもたちに実際に触ってもらいたい
  • どんな相談で役立つのか検証したい
  • APIキーを守る仕組みをもっと強くしたい

分からないことだらけでしたが、「まず触ってみる」「1個ずつ動かしてみる」を続けたら、かわいい相棒が少しずつ自分の作りたい姿に近づいていきました。

スタックちゃん、かわいいだけじゃなくて開発も楽しい!

これからもっと保育スタックちゃんを育てていきたいと思います!

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?