speech-recognition/yolo-index.html at main · haruu11113/speech-recognition · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <title>YOLOとp5.jsによるリアルタイム物体検出</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.min.js"></script>
  <script src="https://unpkg.com/ml5@0.1.2/dist/ml5.min.js" type="text/javascript"></script>

</head>

<body>
  <h1>YOLOとp5.jsによるリアルタイム物体検出</h1>
<ul>
    <li><a href="./index.html">go to: speech recognition</a></li>
    <li><a href="./video-index.html">go to: video speech recognition</a></li>
    <li><a href="./yolo-index.html">go to: yolo</a></li>
</ul>
  <p id="status">モデルの読み込み中...</p>
</body>
<script>
let video;
let yolo;
let status;
let objects = [];

function setup() {
    var h = 320 * 3;
    var w = 240 * 3;
    // ドキュメント内にcanvas要素を作成し、サイズをピクセル単位で設定する。
    // https://p5js.org/reference/#/p5/createCanvas
    createCanvas(h, w);
    // Webカメラからのオーディオ/ビデオを含む新しいHTML5 video要素を作成する
    // https://p5js.org/reference/#/p5/createCapture
    video = createCapture(VIDEO);
    // ビデオのサイズはキャンバスと同じ
    video.size(h, w);

    // YOLOオブジェクトを作成する
    yolo = ml5.YOLO(video, startDetecting);

    // 元のビデオは隠す
    video.hide();
    status = select('#status');
}

// 毎フレーム、p5.jsによって呼び出される。
function draw() {
    // イメージをp5.jsのcanvasに描画する。
    // image(img, x, y, [width], [height])
    // https://p5js.org/reference/#/p5/image

    // width: 描画するキャンバスの幅を保持するシステム変数。heihtも同様
    image(video, 0, 0, width, height);

    for (let i = 0; i < objects.length; i++) {
        noStroke();
        fill(0, 255, 0);
        // クラス名を境界ボックス左上に描く
        // 画面にテキストを描画する。最初のパラメータで指定された情報を、以降の追加パラメータで指定された位置の画面に表示する。
        // text(str, x, y, [x2], [y2])
        // https://p5js.org/reference/#/p5/text
        text(objects[i].className, objects[i].x * width, objects[i].y * height - 5);
        noFill();
        strokeWeight(4);
        stroke(0, 255, 0);
        // 境界ボックスを描く
        // 矩形を画面に描画する。
        // rect(x, y, w, h, [tl], [tr], [br], [bl])
        // https://p5js.org/reference/#/p5/rect
        rect(objects[i].x * width, objects[i].y * height, objects[i].w * width, objects[i].h * height);
    }
}

function startDetecting() {
    status.html('モデルを読み込んだ');
    detect();
}

// ビデオからのイメージを物体検出する
function detect() {
    yolo.detect(function(err, results) {
        // 結果を配列objectsに割り当てる
        objects = results;
        // 連続して検出
        detect();
    });
}
</script>
</html>