LoginSignup
9
2
@mimicetaceainプロトアウトスタジオ

訓練しなくでも官能評価士？！AIでマグロの色が変化しているかどうかを判断する～

Last updated at Posted at 2023-07-18

こんにちは！
東京圏のとある微生物検査室で、食品検査をやっている４年目人間です。
新人はもう言えないですが、実はまだ新人の時、あることすごく悩みました。

新人の悩み

いきなりですが、皆さん、インストア商品という名前、聞いたことありますが？

インストア商品は店舗の中で作った物、出来合いの物をパックして販売する商品のことです。こういった商品は店舗でどのぐらい時間販売できますか？
実は、販売できる時間は実験室で、店舗と同じ方法で調理して、同じ温度帯で保存して、最後官能検査と微生物検査を実施します。
その悩みは、官能検査です。官能検査は名前通りで、人の感覚で商品の外観や匂い、味とか、変化しているかとを判断する検査です。

誰でもできますよね？ と私も最初そう思いますが、実は、厳しい訓練で社内資格 官能検査士 を取る必要があります。
私は新人でまだ資格がない時、先輩たちがいない場合、「これ大丈夫かな？」で悩んで、検査できなくなることもあるし、現在逆に教える立場になる時、魚が食べない後輩さんには魚に対して分からないとか、新入りの外国社員は宗教の原因でそもそもベジタリアンとのこともあります。

この時、もし AIで食べ物が変色していることを判断できれば、人の判断がいらなくでも、検査ができるじゃないか？での発想で、今回の記事を試しました。
いきなりすべての食べ物に対応することは難しいので、今回は変色しやすい、しかも魚が食べない後輩と新入りのベジタリアン二人とも該当するマグロ:sushi:をターゲットにします。
210610-kmg-01.jpg

完成物

使用ツール

手順

0.5 マグロの変色はなんですか？

早速作成はじめたいですが、その前一つ大きいな問題があります。パソコンの前の皆さん、マグロの変色について、どのぐらい知ってますか？
マグロを買って、冷蔵庫に置いて、食べようとしたら変色してしまっていたなんて経験はありませんか。
なぜ変色してしまいましたか？食べで大丈夫ですか？いろいろ問題があると思いますが、簡単に説明します。
QQ截图20230718120508.png

一番多い変色は 茶色、黒色 に変色している場合です。原因は「酸化」で、ほどんとは冷凍マグロを解凍する時です。マグロの血液中にある「ミオグロビン」は空気と接触し、「酸化」を発生します。この反応は、-3℃から-10℃ の温度でもっとも酸性しやすいため、冷蔵冷凍庫の中によく発生します。

他にもいろいろ可能性がありますが、全部書くのは今回の主旨とズレますので、以下の記事を参照してください。
マグロの刺身が変色しても食べられる？色が黒や茶色の部分は食中毒になる？

１「Teachable Machineの検証」マグロは食べれるのか？変色しているのか？

AIでマグロの色が変化しているかどうかを判断する問題はまず どんなAI にするのは問題ですね。
世の中にAIを一言で表現しますが、中身は自然言語処理、画像データを解析し特定のパターンを検出や抽出する画像認識など、結構色んな種類があります。

今回はプログラミングをしなくても、画像や音声、ポーズなどを学習させてそれらを判別するモデルを簡単に作成することができる、Googleから開発したTeachable Machineを使用します。
QQ截图20230717215110.png
ほんとは実際のマグロをカメラで撮影してやりたいですが、変色するマグロの準備は時間かかりますから、今回はネットでダウンロードした美味しいマグロはと変色したマグロ20枚つづ用意しました。（本来は100以上するのはベストですが、ネットでも変色した写真はそんなにないです…）

実際に トレーニング して、識別させたら…？
QQ截图20230717215318.png
美味しいマグロをうまく認証できましたね！（拍手！！）

Node-REDでAIで変色を確認し、dashboardで商品番号を入力、LINE Botに送る

2「Node-REDの検証」Node-REDでも結果を反映させる

次に、Teachable Machineを動かすために、Node-REDというソフトウェアを使いました。
Node-REDはコードを書くよりも視覚的にわかるGUI（ビジュアルで見えるUI）によって、プログラムを書きます。 APIを取得する仕組みであったり、WEBアプリを作ったりできます。詳しく紹介は以下の記事を参考してください。
超初心者向けのNode-RED基本のき

早速簡単の仕組みを作ってみました！

今回はTeachable MachineをNode-REDに動かすために、以下のノードを追加することが必要です。

node-red-contrib-teachable-machine
teachable-machineで作成したモデルを使用するためのノード このノードは「image Project」のみに対応しているようです。
node-red-contrib-browser-utils
自分のPCのカメラの写真データを読み込んでくれるノード
node-red-contrib-image-output
読み込んだ画像をNode-RED上に表示してくれるノード

フローは以下の感じ接続しました。必要データはdebugに反映できるような仕組みです。

QQ截图20230718000612.png
目標は画像を認識して、その判断をdebugのノードに反映します。
実行して見たら…
QQ截图20230717235016.png
QQ截图20230718000819.png
見事返事が来ました！嬉しいです！

3 「dashboardの挑戦」商品番号の入力

うち微生物検査室は検査を担当しますが、実際の報告書などは別部門で作成しますから、こういう変色が発生する時、商品の写真とその商品番号を別部門に伝う必要があります。
うんん…Node-REDは直接入力画面ありませんね…？
でネットで調べたら、こういう記事を見つかりました。
WebのフォームからNode-REDで使用するデータを入力する方法
ダッシュボードの概要と基本操作

よく分からないですが、dashboardというノードを使ったら、webサイトを作成して、入力は可能です！
かなり（1時間ほど）試行錯誤、やっとできました。
ノードは一個だけ追加しますが、その代わりにdashboardのサイト設定は色々必要です。（TabとGroupのところ）
dashboardのサイト設定は上のリンクで詳しく説明がありますので、今回は割愛します。

node-red-dashboard
今回使うのはtext inputノードですが、実は色々な凄いものができます。例え以下の図

dashsales2-1024x546.png

フローを修正しました。Websiteから入力するものもdebugに反映する仕組みです。
QQ截图20230718025540.png
QQ截图20230718025634.png

そしてサイトに入力して見たら、返事がうまく来ました！
QQ截图20230718025616.png
QQ截图20230718025623.png

4 「もう慣れたLINE Bot」LINE Botに送信

Line Botは前回の作りものも使いましたから、使い方法は慣れました。
前回の記事は以下になります。

https://qiita.com/mimicetacea/items/db7d1f7232207e66370b

今回は判定した結果を他のグループに送るため、Line Botを使用します。
LINE Botに送信するには、LINEのノードが必要です。（ここまで来てもうノード必要のは慣れました（笑））
LINE Messagin API を利用できる Node-RED のノードを追加します。

node-red-contrib-line-messaging-api

早速手順3の商品番号入力とPushMessageと接続して、入力して見たら…
QQ截图20230718034132.png

4ACC25491B2F240E3CDE6F1CA67F030F.png
PushMessageが来ましたね！
残念ですが…そのあと1時間色々やって見ましたが、図を一緒に送る方法できませんでした。
以下の記事にできそうな感じですが、時間の問題でこの機能後回します！

https://qiita.com/youtoy/items/287a0782fdd185fc2004

作り直し

以上の折りたたみ内容は、一つの仕組みとしてでました、時間がある方、ぜひ読んでください。
私はそれを読み返す時、あることを意識しました。

この一連の操作…ホントにDXですか？
あるいはアナログ作業をデジタルしているだけですか？

実験室の動線を考えると、商品をパソコンのところに持って行って、そしてパソコンで何回作業するだけでも、もう手間十分かかります。新入りのITスキルを考えるとNode-REDを動かすこと（+dashboardも操作が必要）のは、十分イライラになる可能性があります。

じゃ、いまの若者に対して、ホントに何が一番シンプルでしょうか？
着眼点はスマホです。いまの若者たちは誰でもパソコンよりスマホは慣れています。

スマホで撮影---AIで判断---結果をスクリーンショットを撮る---番号と写真をLINE WORKSで送る

それだけのシンプルな方法でいいです。この方法で、作り直すことを決めました！

2「スマホ用サイト」CodePenでスマホサイトを作る

QQ截图20230718044009.png

シンプルと言いますが、操作のところをシンプルするためには、その 裏 頑張りが必要です。
今回はCodePenでスマホ用のAI判断サイトを書きました。
CodePenはブラウザ上でHTML,CSS,JavaScriptのコードを記述し、リアルタイムで表示を確認しながら開発をすることができるサービスです。

コードは以下になります。実際の動きは一番最初の動画になります。
いきなりコードを書くのは難しいですが、もし使いたい場合は、そのままコピペしたら使えますし、そのコードを修正したい場合は、ChatGPTとかを利用して、修正していただくのは一番手軽くです！

CodePenコード
HTML
<h1>マグロ変色判定</h1>
<button onclick="start()">開始</button><br>
<video id="webcam" width="320" height="240" muted autoplay playsinline></video>
<font color="red"><h1 id="result"></h1></font>

<p>変色になる場合は、スクリーンショットを撮り、太郎さんに送りましょう<p>
<h2>　商品番号の送付忘れないでね！</h2>
CSS
#webcam {
  transform: scaleX(-1);
}
JavaScript
// 作成したモデルのURL
const imageModelURL = 'https://teachablemachine.withgoogle.com/models/laZyaYTNi/';

// メインの関数（ここでは定義しているだけでボタンクリックされたら実行）
async function start() {
  // カメラからの映像ストリーム取得
  const stream = await navigator.mediaDevices.getUserMedia({
    audio: false,
    video: ture,
  });
  
  // 「id="webcam"」となっているパーツ（videoタグ）を取得
  const video = document.getElementById('webcam');
  
  // videoにカメラ映像ストリームをセット
  video.srcObject = stream;
  
  // Googleのサーバーにアップロードした自作モデルを読み込みにいきます
  classifier = ml5.imageClassifier(imageModelURL + 'model.json', video, () => {
    // 読み込みが完了次第ここが実行されます
    console.log('モデルの読み込みが完了しました');
  });
  
  // 繰り返し処理
  function loop() {
    // 推論を実行し、エラーがあればerrに、結果をresultsに格納して、
    // 推論が完了次第 { } の中身を実行します
    classifier.classify(async (err, results) => {
      // 結果のresultsは配列ですが、先頭に中身があれば以下の処理を実行します
      if (results[0]) {
        document.getElementById("result").textContent = results[0].label;// 結果を画面表示
      }
      // 推論終了1秒後に自分の関数を実行（ループになる）
      setTimeout(loop, 1000);
    });
  }

  // 最初の繰り返し処理を実行
  loop();
}

3 そのあと

判断したものを別部門の担当者に送るボタンが必要かな...？と一瞬悩みましたが、もうスマホを手に握ってますから、送るだけで終わりますよね…
この考えで、最後の作業、人の手で完了させます。

遠回りの反省とまとめ

今回の作り物、すごく遠回り気がしました（笑）。
途中で一番悩みになったのは、

色々技術を使って、見た目よいツールにしますか？

それとも

作成が簡単だけど、みんなに使いやすいにしますか？

私の答えは、２番です。技術は簡単ですが、問題解決できたらいいです！
むしろ簡単ですから、まだDXの世界に入ってない方に説明するのもしやすいです。

最近色々凄い技術の記事を読んで、技術に突っ込み過ぎで、段々この重要なことを忘れた気がします。
今回の作り物でこのことを見直しのは自分的にスッキリした感じです。

でも途中の遠回りは無駄ではないと思います。Node-REDやdashboardとかの利用方法、必ずいつか別のところで活躍と思います。

最後の最後残り問題

今回の記事で残り問題三つがあります。

  • 写真を判断する精度が悪いです。おそらく最初の材料が足りないです。自分でマグロを買ってどんどん写真を撮る必要ですかね…
  • 色温度とホワイトバランスの影響が気になります。同じ写真でLightroomで色んなパターンの写真を編集して材料にするのは改善ができるかな？（試し価値がありますが、凄く編集量です。）
  • Node-REDでLINE Botに写真送る問題です。記事の通りやるとおそらくできます。

解決できたら、まだ記事を更新します～

更新一

CodePenで作ったサイトで写真撮る時、実は一つ問題があります。
それはスマホで開きとしたら、使うカメラはスマホの前のカメラです。
後ろのカメラを使いたい時、JavaScriptのコードのgetUserMedia()を工夫が必要です。
Codeは以下になります。

camera.JS
navigator.mediaDevices.getUserMedia({
    audio: false,
    video:  {
      facingMode: 'environment', 
    },
  });

facingModeのところ、userは前のカメラ、environmentは後ろのカメラになります。

以上、更新一、コードの小さい修正～

9
2
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
Sign upLogin
9
2