javascript/examples/example-prediction-web/index.html at 450f82776d6a1ad2ed88d4bf5cf788a149e9d000 · edge-ml/javascript · 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
<!DOCTYPE html>
<html>
    <head>
        <script>
            window.exports = undefined
            window.module = {}
        </script>
        <script src="model_javascript.js"></script>
        <script src="edgeML.js"></script>
    </head>
<body>

<pre id="warn"></pre>
<h1>devicemotion</h1>
<div>
    <span>number added datapoints:</span>
    <span id="numberadded">0</span>
</div>
<button id="startsense">enable sensor</button>
<button id="predict">predict</button>
<button id="predictperiodic">predict every 20 ms</button>
<pre id="prediction"></pre>

<script>
    const Predictor = edgeML.Predictor;

    const p = new Predictor(
        (input) => score(input),
        ['x', 'y', 'z'],
        50,
        ['Still', 'Shake'],
        {'scale': [79.25000000000001, 1.0, 1.5849999999999997, 1.0, 12.137992715350133, 233.5518440000001, 12.062295477964101, 23.600000000000005, 22.750000000000004, 34.60000000000001, 28.200000000000006, 1.0, 0.5640000000000001, 1.0, 4.851983387175274, 38.78205, 4.859832967726578, 11.0, 12.100000000000001, 12.200000000000003, 70.30000000000001, 0.025000000000000355, 1.4059999999999988, 1.0, 3.715476614703034, 23.929080000000006, 2.565530194566513, 13.850000000000001, 13.850000000000001, 10.100000000000001], 'center': [116.30000000000001, 0.0, 2.326, 50.0, 15.40061349427353, 237.17889599999998, 15.550241155686301, 32.9, 34.5, -34.5, 5.299999999999983, 0.0, 0.10599999999999966, 50.0, 4.708919621314427, 22.173924000000007, 4.756910762248962, 14.200000000000001, 14.200000000000001, -9.700000000000001, 548.0, 9.8, 10.96, 50.0, 3.5930132201259712, 12.909744, 11.87272504524551, 21.3, 21.3, 3.8000000000000003], 'name': 'RobustScaler'}
    )
</script>

<script>
    const warn = (...x) => document.getElementById("warn").innerHTML = x
    const startSensors = async (addDataPoint) => {
        function handleMotionEvent(event) {
            const x = event.accelerationIncludingGravity.x;
            const y = event.accelerationIncludingGravity.y;
            const z = event.accelerationIncludingGravity.z;
            const alpha = event.rotationRate.alpha;
	    const time = Math.floor(event.timeStamp + performance.timeOrigin);

            addDataPoint(time,'x', x)
            addDataPoint(time,'y', y)
            addDataPoint(time,'z', z)
            addDataPoint(time,'alpha', alpha)
        }

        window.addEventListener("devicemotion", handleMotionEvent, true);
    }
</script>

<script>
    const addDataPoint = (...x) => {
        p.addDataPoint(...x)
        document.getElementById("numberadded").innerHTML = parseInt(document.getElementById("numberadded").innerHTML) + 1
    }

    const predict = async () => {
        document.getElementById("prediction").innerHTML = JSON.stringify(await p.predict(), null, 2)
    }

    document.getElementById("startsense").onclick = () => {
        startSensors(addDataPoint)
    }

    document.getElementById("predict").onclick = () => {
        predict()
    }

    let interval2;
    document.getElementById("predictperiodic").onclick = () => {
        clearInterval(interval2)
        interval2 = setInterval(() => {
            predict()
        }, 20)
    }
</script>

</body>
</html>