ラベルを追加、削除名前を変更して、学習モデルを更新しても metadata.json が更新されないから、tm2scratch に反映されない

[champierre]

変更されるときもあるので、すぐには更新されずある一定期間ごとに更新されているのか？

[champierre]

https://teachablemachine.withgoogle.com/ 側の問題なのか、仕様だと思われる。確認していただいてもよろしいでしょうか？ @ukkari

[ukkari]

了解です。確認してみますね。

[ukkari]

試してみましたが、下記すべてのシナリオでちゃんとmetadata.json更新されます。

まず複数クラスを作って

1. クラスを消してみる
2. クラスを追加してみる
3. クラスの名前を変更してみる

これ、なにかキャッシュの問題だったりしませんか？ @champierre

[champierre]

@ukkari 少し時間をおけば更新されるのですが、添付キャプチャのようにモデルを更新した直後すぐには metdata.json は更新されていません。ワークショップでは、クラスを追加したり、あるいは学習モデルを作り直すということは頻繁に起こると思われ、そうした状況ではたとえ数分のタイムラグでも「あれ？モデルが更新されてないぞ」となるケースが頻発するように思えます。

[ukkari]

これって、100% Reproします？10回位私の環境でこの動画と同じ手順で試してみたのですが、全て瞬時に反映されちゃうんですよね。 @champierre

[champierre]

私の自宅からと @yokobond さんの環境では再現します。ネットワークに依存するのかもしれないので、外出したときなど別の環境で試してみます。

[kwaka1208]

これ、今日の授業でも発生していました。 @champierre さんのGIF画像を参考にmetdata.jsonを確認しましたが、metdata.jsonは更新されていたけれど、Stretch3に反映されていない感じでした。

[EiichiroIto]

こちら、イベントで使用させていただいたときに同じ現象を確認しました。
Chromeの開発者ツールで確認したところ、TeachableMachine でモデルを更新しても、Chrome側がmetadata.jsonのディスクキャッシュを返してしまい、更新された内容が反映されないようです。
loadImageClassificationModelFromURL では、fetch(${url}metadata.json) とされていますが、URLに日付や時刻を付記したクエリーを加えることで毎回キャッシュを回避できるのではないでしょうか。

[book000]

こんにちは。本拡張機能を利用させていただいている中でこの件に躓いてしまったので色々検証しました。
長くなりますので、お時間のある時にお読みいただけたらと思います。

ブラウザキャッシュも一つの原因のようではありますが、Teachable Machineでモデルを更新しても Google側のキャッシュが更新されない ようで、URLに何かしら付加させない限りレスポンスが最新にならないようです。
具体的には、以下の手順で確認できます:

1. Google Teachable Machine で画像プロジェクトを作成し、「モデルをエクスポート」からアップロードする
2. teachablemachine.withgoogle.com のリンクが得られるので、別のタブで https://teachablemachine.withgoogle.com/models/XXXXXXXX/metadata.json にアクセスする
   • Google Cloud Storage storage.googleapis.com へリダイレクトされる
3. Google Teachable Machine のタブに戻りラベルの名前を変えるなどの変更を加え、「モデルをエクスポート」からクラウドモデルを更新する
4. metadata.json にアクセスしているタブに戻り、リロードする
   • labels のデータが変更されないことが確認できる
   • 環境によってはブラウザ側でキャッシュされている可能性があるので、シークレットモードでも確認する
5. ブラウザのシークレットモードを開き、https://teachablemachine.withgoogle.com/models/XXXXXXXX/metadata.json にアクセスする
   • labels のデータが変更されないことが確認できる

最新のデータを得るためには、リダイレクト先の storage.googleapis.com のURL末尾に ?202212250030 など適当なURLクエリを付与してアクセスしなければなりません。
また、リダイレクト前の teachablemachine.withgoogle.com/models/XXXXXXXX/metadata.json にクエリを付与してもリダイレクト先には引き継がれません。

以下はブラウザのネットワークタブから見られる、リダイレクト元のURLにクエリを付与してもリダイレクト先には引き継がれないことを示すスクリーンショットです。

---

これらの検証結果をもとに、storage.googleapis.com へのURLを作りそこからモデルデータを拾うような処理を書きなおしました: book000@2ccc791
そのうえで動作確認をしていたのですが、本拡張機能で利用している ml5 が以下のように引数のURLにあるクエリを引き継がない状態で metadata.json にアクセスするので TM2Scratch では最新のメタデータを持つが ml5 は古いキャッシュのデータを利用する ようになってしまいました。

https://github.com/ml5js/ml5-library/blob/c3123cac0b1dfa0ed8e3e2588e8dea72ccd05aa8/src/ImageClassifier/index.js#L103-L105

これによって、「音声ラベル のどれか を受け取ったとき」のようなラベルを選択できるところでは最新のラベルを選択できますが、認識に使用されているモデルは古いモデルなため新しく追加したラベルは一切発生しない…というバグが起こります。

以下はブラウザのネットワークタブから見られる、ml5 がクエリを引き継がずに metadata.json にアクセスしたことを示すスクリーンショットです。

---

したがって、ml5 側で修正を加えない限り（クエリを適切に引き継ぐような挙動にならない限り）本件は修正できないかと思われます。
storage.googleapis.com のレスポンスヘッダーに cache-control: public, max-age=3600 があるので、1時間はGoogle側(またはCDN側)でキャッシュされているのかなと推測します。

[champierre]

@EiichiroIto @book000 問題を調査していただきどうもありがとうございます。ml5.js 側での修正が必要なので、とりあえず issue を作成して反応を待ちたいと思います。

ml5js/ml5-library#1452

[champierre]

@book000 @EiichiroIto @kwaka1208 ml5.js の修正を待ってからだと時間がかかりそうなので、修正を反映した ml5.js をこちらで用意して、それを利用する形でキャッシュ問題を暫定的に解決しました。https://stretch3.github.io/ にも反映済みです。

Ref. #39