こんにちは、yui_tangです。
ここ にいますので、よかったら他のメンバーの顔も見て帰ってください 😆
この記事は？
スターフェスティバル Advent Calendar 2022 の 6 日目の記事です ✨✨✨✨
昨日はDPontaro さんのPrisma についての記事でした。
わたしが技術選定をしたので、こんな記事を書くほどに気に入ってくれてうれしい限りです。
さて本題
簡単に作ってみた趣味アプリを紹介する記事です。
Metal? or not?
なんのこっちゃだと思いますが、簡単に言うと
Web Audio API を通して Input された音声を、
teachable machine を用いて事前に作成したモデルにて、tensorflow.js を通して
メタルか？それ以外か？ をリアルタイムに判別する Web アプリケーションです。
(※ページに行くと音声に入力へのアクセスを求めますのでご注意ください
そこまでの必要もないのですが、Next.js 13 で実装し、Vercel 上に Deploy しています。
ソースコードはこちらです。
簡単な説明
Teachable Machine
「Teachable Machine（ティーチャブルマシン）」は、Google社が無料で提供している「機械学習ツール」です。 「Teachable Machine」のサイトにブラウザからアクセスするだけで利用できるため、ハイスペックなPC環境がなくても機械学習を体験できます。
今回はプログラミングも不要で簡単に機械学習済みモデルが作成できるこちらのサービスを利用しました。
このサービス、ビジュアルプログラミング言語「Scratch」とも連携できる拡張機能が存在しており、小学生がプログラミング教育でこれを利用した AI ベースのアプリケーションを作ったりしています。
- 画像
- 音声
- 動画
を対象に学習させることができ、ホビーユースには十分遊べる有能っぷり。
主に Web Frontend を主戦場にしている人の中には、中々機械学習と縁遠い人も多いのでは？
そんな中、まずは気軽に触りながら自分で学習済みモデルを作ってみる、なんてユースケースには最適なサービスなので、ぜひ利用してみてください！
今回はこの音声プロジェクトを使って、粛々とメタルとその他の音楽のデータをサンプルとして食わせる（手動）という泥臭い作業によってモデルが作られています。（作られたモデルは export してソースコードにコミット済み。
TensorFlow.js
今回はこのモデルは Web ブラウザ上で利用していくため、TensorFlow.js 向けにモデルを出力し、それを @tensorflow/tfjs を介して利用しています。
さすが Google、Sample Codeもしっかり用意されているのでとっつきやすいですね！
実装
Next.js
サンプルコードを参考に Next.js での実装に置き換えています。
以下に、大事な点を説明します。
MediaDevices.getUserMedia()
音声入力のメディアを取得し、その入力を持つ MediaStream を生成します。 setStream() 実行時に、ユーザーへメディア入力許可を求めます。
const stream = await navigator.mediaDevices.getUserMedia({
audio: true,
video: false,
});
setStream(stream);
判別機から返る結果を state にセットしてリアルタイムに数値とグラフを書き換える
Audio input の読み込み、モデルの読み込みが完了したら推論スタートをしています。設定は google のドキュメントのまま。
useEffect(() => {
if (recognizer === null || stream === null) {
return;
}
try {
if (recognizer.isListening()) {
return;
}
recognizer.listen(
async (result) => {
const scores = result.scores as PredictResult;
setPredictionResult((prev) => ({ ...prev, ...scores }));
},
{
includeSpectrogram: true, // in case listen should return result.spectrogram
probabilityThreshold: 0.75,
invokeCallbackOnNoiseAndUnknown: true,
overlapFactor: 0.5, // probably want between 0.5 and 0.75. More info in README
}
);
} catch (e) {
console.error(e);
}
// Stop the recognition in 5 seconds.
setTimeout(() => recognizer.stopListening(), 60000);
}, [labels, recognizer, stream]);
使ってみよう！！
それでは、試しに世界で一番短い曲としてギネスブックに掲載されており、正確な長さは 1.316 秒とされている有名なイギリスのバンドの曲、You Sufferで試してみました。(チームメンバーに薦められチョイス！)
見事にこの曲はメタルだと認められましたね！ (諸説あります
(※ 結果の正確さを保証するものではありません。とても雑なモデルなので趣味の範囲であることをご了承ください。)
今後は
精度に納得がいかないので、もっと自分で緻密にモデルを作ったり転移学習させたり、お気に入りの曲たちを元にオリジナル曲を作らせるなどの制作活動に勤しんでいきたいと思っています。
まとめ
ChatGPT や Stable Diffusion を始めとした AI サービスが発達していく中で、主に Web frontend エンジニアがすべき準備できることとして、
- モダンな Web フロントエンド開発の技術を習得しておくこと。そのためには、最新の Web フロントエンドフレームワークやライブラリなどを学習し、実際にプロジェクトで使用することで実践的なスキルを習得することが大切です。
- AI サービスを扱う上での注意点を知ること。例えば、プライバシーやセキュリティー、データ保護などの面での注意点があります。また、AI サービスを実装する際には、倫理的な観点からも気をつける必要があります。
- AI サービスとの連携を考えること。AI サービスを Web フロントエンドで利用する場合、その連携方法や実装方法などを考慮する必要があります。これらを検討し、実装することで、Web フロントエンドから AI サービスを有効活用することができます。
上記のようなことを意識し、積極的に学習や実践を重ねていくことで、スキルを磨き、AI サービスを活用することができるようになるでしょう。
(まとめはほぼ ChatGPT が書きました。)
明日は @k1rnt の出番です！お楽しみに ✋
Discussion