tf.js-coco/index.html at main · MDGcode/tf.js-coco · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Multiple object detection using pre trained model in TensorFlow.js</title>
    <meta charset="utf-8">
    <!-- Import the webpage's stylesheet -->
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

    <section id="demos" class="invisible">

      <div id="liveView" class="camView">
        <button id="webcamButton">Enable Webcam</button>
        <label for="cameraSelect" id="cameraLabel" class="camera-label" style="display:none;margin-left:8px;">Camera:</label>
        <select id="cameraSelect" style="display:none;margin-left:6px;"></select>
        <!-- Person threshold UI (dropdown 10..100 step 10) -->
        <label for="personThreshold" id="thresholdLabel" style="display:none;margin-left:12px;">Person threshold:</label>
        <select id="personThreshold" style="display:none;margin-left:6px;vertical-align:middle;">
          <option value="10">10%</option>
          <option value="20">20%</option>
          <option value="30">30%</option>
          <option value="40" selected>40%</option>
          <option value="50">50%</option>
          <option value="60">60%</option>
          <option value="70">70%</option>
          <option value="80">80%</option>
          <option value="90">90%</option>
          <option value="100">100%</option>
        </select>
        <!-- Room ID input -->
        <label for="roomIdInput" id="roomLabel" style="display:none;margin-left:12px;">Room ID:</label>
        <input id="roomIdInput" type="number" min="1" value="1" style="display:none;width:64px;margin-left:6px;">
        <!-- Person count display -->
        <div id="personCount" class="person-count">Persons: 0</div>
        <video id="webcam" autoplay muted width="640" height="480"></video>
      </div>
    </section>

    <!-- Import TensorFlow.js library -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"> </script>
    <!-- Load the coco-ssd model to use to recognize things in images -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>

    <!-- Import the page's JavaScript to do some stuff -->
    <script src="script.js" defer></script>
  </body>
</html>