champierre / tm2scratch

Connect Google Teachable Machine with Scratch
https://champierre.github.io/tm2scratch/
BSD 3-Clause "New" or "Revised" License
26 stars 27 forks source link

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

Open champierre opened 4 years ago

champierre commented 4 years ago

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

champierre commented 4 years ago

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

ukkari commented 4 years ago

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

ukkari commented 4 years ago

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

まず複数クラスを作って

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

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

champierre commented 4 years ago

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

tm2scratch

ukkari commented 4 years ago

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

champierre commented 4 years ago

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

kwaka1208 commented 3 years ago

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

EiichiroIto commented 1 year ago

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

book000 commented 1 year ago

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

ブラウザキャッシュも一つの原因のようではありますが、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にクエリを付与してもリダイレクト先には引き継がれないことを示すスクリーンショットです。 20221224-231438-firefox-smoQRNACBm 20221224-231429-firefox-3MrldseeMw


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

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

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

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


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

champierre commented 1 year ago

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

https://github.com/ml5js/ml5-library/issues/1452

champierre commented 1 year ago

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

Ref. https://github.com/champierre/tm2scratch/pull/39