BIN/smartBin.html at main · Engineering-MJ/BIN · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smart Bin System</title>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
    <script
        src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@latest/dist/teachablemachine-image.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Smart Bin System</h1>
    </header>
    <main>
        <button type="button" onclick="init()">Start</button>
        <button type="button" onclick="startWebcam()">Open Webcam</button>
        <button type="button" onclick="captureImage()">Capture Photo</button>
        <select id="camera-select"></select>
        <input type="file" id="image-input" onchange="handleImageUpload(event)" />

        <div id="video-container">
            <video id="webcam" autoplay playsinline></video>
        </div>
        <div id="image-container"></div>
        <div id="label-container"></div>
        <div id="feedback"></div>

        <!-- Leaderboard Section -->
        <h2>Leaderboard</h2>
        <ul id="leaderboard"></ul>
    </main>
    <script src="script.js"></script>
    <!-- <script type="text/javascript">


    </script> -->
</body>

</html>