tensorflowjs-webcam-transfer-learning/index.html at master · mburakerman/tensorflowjs-webcam-transfer-learning · 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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<html lang="en">
  <head>
    <title>Webcam Transfer Learning</title>

    <link rel="icon" type="image/png" href="favicon.png" />

    <meta
      name="google-site-verification"
      content="Y9rbVPxXYY8HNwYGvnqNGNC1Gku8Rp5Sn5F0eK7gl2Q"
    />

    <meta name="title" content="Webcam Transfer Learning" />
    <meta
      name="description"
      content="Tensorflow.js Webcam Transfer Learning Demo"
    />

    <link
      href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap"
      rel="stylesheet"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tensorflow/4.2.0/tf.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@2.1.0/dist/mobilenet.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/knn-classifier@1.2.4/dist/knn-classifier.min.js"></script>

    <link rel="stylesheet" href="style.css?v=1.2" />

    <style>
      .github-corner:hover .octo-arm {
        animation: octocat-wave 560ms ease-in-out;
      }

      @keyframes octocat-wave {
        0%,
        100% {
          transform: rotate(0);
        }

        20%,
        60% {
          transform: rotate(-25deg);
        }

        40%,
        80% {
          transform: rotate(10deg);
        }
      }

      @media (max-width: 500px) {
        .github-corner:hover .octo-arm {
          animation: none;
        }

        .github-corner .octo-arm {
          animation: octocat-wave 560ms ease-in-out;
        }
      }
    </style>
  </head>

  <body>
    <a
      href="https://github.com/mburakerman/tensorflowjs-webcam-transfer-learning"
      target="_blank"
      class="github-corner"
      aria-label="View source on GitHub"
    >
      <svg
        width="60"
        height="60"
        viewBox="0 0 250 250"
        style="
          fill: #eaafc8;
          color: #fff;
          position: absolute;
          top: 0;
          border: 0;
          right: 0;
        "
        aria-hidden="true"
      >
        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
        <path
          d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
          fill="currentColor"
          style="transform-origin: 130px 106px"
          class="octo-arm"
        ></path>
        <path
          d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
          fill="currentColor"
          class="octo-body"
        ></path>
      </svg>
    </a>

    <h1>Webcam Transfer Learning</h1>

    <div id="app">
      <section id="tfjsController">
        <div class="train-buttons">
          <button id="left">Train left</button>
          <button id="middle">Train middle</button>
          <button id="right">Train right</button>
        </div>

        <video
          autoplay
          playsinline
          muted
          id="webcam"
          width="400"
          height="400"
        ></video>

        <p id="modelInfo">model is loading...</p>
        <p id="webcamInfo" style="display: none">waiting for webcam...</p>
        <div id="predictionInfo"></div>
      </section>

      <section id="game">
        <canvas height="450" width="750"></canvas>
      </section>
    </div>

    <div class="info">
      <h2>🔮 How to train your model? 🔮</h2>
      <p>
        After enabling your webcam, set your position and then click the button
        a few time until probability rate is 100%. Make this for left, middle
        and right. <br />
        Finally, you can use your arrow keys to move the car. <br />
        That's it. Have fun!
      </p>
    </div>

    <script src="game.js"></script>
    <script src="app.js"></script>
  </body>
</html>