ImageClassifierApp_TensorFlowJS/index.html at master · fduque/ImageClassifierApp_TensorFlowJS · 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
<html>

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!-- Load the latest version of TensorFlow.js -->
    <script src="https://unpkg.com/@tensorflow/tfjs"></script>
    <script src="https://unpkg.com/@tensorflow-models/mobilenet"></script>
    <!--Add an import of KNN Classifier-->
    <script src="https://unpkg.com/@tensorflow-models/knn-classifier"></script>
</head>

<body>

    <div class="jumbotron">
        <div class="container-fluid">
            <div class="card text-center" style="width: 18rem;">
                <div class="card-title">
                    <strong>Image Classifier App</strong>
                </div>
                <!-- Activate WebCam that we will use to capture images -->
                <div>
                    <video autoplay playsinline muted id="webcam" width="224" height="224"></video>
                </div>
                <div class="card-body">
                    <h5 class="card-title text-center">Let's start!</h5>
                    <p class="card-text text-left">Step 1: Take some pictures.</p>
                    <div class="container-fluid">
                        <div class="col">
                            <a id="class-a" href="#" class="btn btn-primary">Add Image A</a>
                        </div>
                        <div class="col">
                            <a id="class-b" href="#" class="btn btn-primary">Add Image B</a>
                        </div>
                        <div class="col">
                            <a id="class-c" href="#" class="btn btn-primary">Add Image C</a>
                        </div>
                    </div>
                    <br>
                    <p class="card-text text-left">Step 2: Check results.</p>
                    <div id="console"></div>
                </div>
            </div>
        </div>
    </div>


    <!-- Add an image that we will use to test
    <img id="img" crossOrigin src="https://i.imgur.com/JlUvsxa.jpg" width=227 height=227/>
    -->
    <!-- Load index.js after the content of the page -->
    <script src="index.js"></script>
</body>

</html>