tado/index.html

## index.html
<html>
<head>
  <meta charset="UTF-8">
  <title>Webcam Image Classification using a pre-trained customized model and p5.js</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <!-- Teachable Machine実行のためいろいろなJSライブラリーを読み込み -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
  <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js" type="text/javascript"></script>
</head>
<body>
  <!-- プログラム本体 -->
  <script src="sketch.js"></script>
</body>
</html>

## sketch.js
/* ===
Teachable Machine + p5.js + ml5 サンプルコード
事前にTeachable Machineで訓練されたカスタマイズモデルと
p5.js + ml5.jsを使ったウェブカメラ画像の分類。
グー、チョキ、パーの画像を学習
=== */

// 学習してアップロードしたモデルのURL
// !!ここに自分のモデルのURLを入力!!
let imageModelURL = 'https://teachablemachine.withgoogle.com/models/8dyZwOgL4/';

// Classifier変数
let classifier;
// ビデオ
let video;
let flippedVideo;
// 分類結果のラベルを格納
let label = "";

// モデルをプリロード
function preload() {
  classifier = ml5.imageClassifier(imageModelURL + 'model.json');
}

function setup() {
  createCanvas(640, 500);
  // ビデオを設定
  video = createCapture(VIDEO);
  video.size(640, 480);
  video.hide();
  flippedVideo = ml5.flipImage(video)
  classifyVideo();
}

function draw() {
  background(0);
  // ビデオを描画
  image(flippedVideo, 0, 0);
  // 分類結果のラベルを描画
  fill(255);
  textSize(16);
  textAlign(CENTER);
  text(label, width / 2, height - 4);
}

// 現在のビデオ画像からラベルを予測
function classifyVideo() {
  flippedVideo = ml5.flipImage(video)
  classifier.classify(flippedVideo, gotResult);
}

// 分類結果を取得
function gotResult(error, results) {
  // エラー処理
  if (error) {
    console.error(error);
    return;
  }

  // 結果をコンソールに表示
  // console.log(results[0]);

  // 分類結果のラベルを取得
  label = results[0].label;
  // 再度分類処理を行う
  classifyVideo();
}
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Webcam Image Classification using a pre-trained customized model and p5.js</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<!-- Teachable Machine実行のためいろいろなJSライブラリーを読み込み -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
	<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js" type="text/javascript"></script>
	</head>
	<body>
	<!-- プログラム本体 -->
	<script src="sketch.js"></script>
	</body>
	</html>
	/* ===
	Teachable Machine + p5.js + ml5 サンプルコード
	事前にTeachable Machineで訓練されたカスタマイズモデルと
	p5.js + ml5.jsを使ったウェブカメラ画像の分類。
	グー、チョキ、パーの画像を学習
	=== */

	// 学習してアップロードしたモデルのURL
	// !!ここに自分のモデルのURLを入力!!
	let imageModelURL = 'https://teachablemachine.withgoogle.com/models/8dyZwOgL4/';

	// Classifier変数
	let classifier;
	// ビデオ
	let video;
	let flippedVideo;
	// 分類結果のラベルを格納
	let label = "";

	// モデルをプリロード
	function preload() {
	classifier = ml5.imageClassifier(imageModelURL + 'model.json');
	}

	function setup() {
	createCanvas(640, 500);
	// ビデオを設定
	video = createCapture(VIDEO);
	video.size(640, 480);
	video.hide();
	flippedVideo = ml5.flipImage(video)
	classifyVideo();
	}

	function draw() {
	background(0);
	// ビデオを描画
	image(flippedVideo, 0, 0);
	// 分類結果のラベルを描画
	fill(255);
	textSize(16);
	textAlign(CENTER);
	text(label, width / 2, height - 4);
	}

	// 現在のビデオ画像からラベルを予測
	function classifyVideo() {
	flippedVideo = ml5.flipImage(video)
	classifier.classify(flippedVideo, gotResult);
	}

	// 分類結果を取得
	function gotResult(error, results) {
	// エラー処理
	if (error) {
	console.error(error);
	return;
	}

	// 結果をコンソールに表示
	// console.log(results[0]);

	// 分類結果のラベルを取得
	label = results[0].label;
	// 再度分類処理を行う
	classifyVideo();
	}