LeafGuard/index.html at main · Err-rr/LeafGuard · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LeafGuard </title>
    <link rel="stylesheet" href="style.css">

</head>
<body>
    <div class="container">
        <h1>LeafGuard
            <button class="refresh-button" id="refreshButton" onclick="resetToUpload()">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z"/>
                </svg>
            </button>
        </h1>

        <h1>Detect. Protect. Thrive.
            <button class="refresh-button" id="refreshButton" onclick="resetToUpload()">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z"/>
                </svg>
            </button>
        </h1>

        <div class="main-content">
            <div class="left-section">
                <div class="button-group">
                    <button type="button" class="action-button" onclick="startWebcam()">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z"/>
                        </svg>
                        Camera
                    </button>
                    <button type="button" class="action-button" onclick="document.getElementById('imageInput').click()">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
                        </svg>
                        Upload
                    </button>
                </div>

                <input type="file" id="imageInput" class="file-input" accept="image/*" onchange="handleImageUpload(event)">

                <div class="upload-area" onclick="document.getElementById('imageInput').click()" id="uploadArea">
                    <div class="upload-icon">
                        <svg width="40" height="40" viewBox="0 0 24 24" fill="#00bcd4">
                            <path d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z"/>
                        </svg>
                    </div>
                    <div class="upload-text">Click to upload image</div>
                    <div class="upload-subtext">or drag and drop here</div>
                </div>

                <div id="image-container" class="hidden"></div>

                <div class="mode-indicator" id="modeIndicator"></div>

                <div id="webcam-container" class="hidden"></div>
            </div>

            <div class="right-section">
                <div class="results-title">Detection Results</div>
                <div id="label-container">
                    <div class="loading">Choose camera or upload an image to start detection</div>
                </div>
            </div>
        </div>
    </div>

    <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>

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