edge-impulse-linux 1.17.1 → 1.17.2

package/cli/linux/webserver/public/webserver.js

@@ -2,6 +2,7 @@ window.WebServer = async () => {
 
     const els = {
         title: document.querySelector('#header-row h1'),
+        cameraOuterContainer: document.querySelector('#capture-camera .capture-camera-outer'),
         cameraContainer: document.querySelector('#capture-camera .capture-camera-inner'),
         cameraImg: document.querySelector('#capture-camera img'),
         timePerInference: document.querySelector('#time-per-inference'),
@@ -29,6 +30,9 @@ window.WebServer = async () => {
     ];
     let colorIx = 0;
     const labelToColor = { };
+    let isFirstClassification = true;
+    let inferenceIx = 0;
+    let lastClassification;
 
     function switchView(el) {
         for (let k of Object.keys(els.views)) {
@@ -150,6 +154,7 @@ window.WebServer = async () => {
                 inputEl.oninput = () => {
                     if (typeof threshold[k] === 'number') {
                         if (!inputEl.value || isNaN(Number(inputEl.value))) return;
+                        if (k === 'min_score' && Number(inputEl.value) === 0) return;
 
                         threshold[k] = Number(inputEl.value);
                     }
@@ -194,14 +199,65 @@ window.WebServer = async () => {
         bindThresholdSettings(opts.thresholds);
     });
 
+    const onWindowResize = () => {
+        if (els.cameraContainer.naturalWidth === 0) {
+            return;
+        }
+
+        let oldStyleWidth = els.cameraImg.style.width;
+        const containerWidth = els.cameraOuterContainer.getBoundingClientRect().width;
+
+        // height >480
+        if (els.cameraImg.naturalHeight > 480) {
+            // and fits within the container? just display as is
+            if (els.cameraImg.naturalWidth < containerWidth) {
+                els.cameraImg.style.width = els.cameraImg.naturalWidth + 'px';
+            }
+            else {
+                // does not fit within container? just use 100%
+                els.cameraImg.style.width = containerWidth + 'px';
+            }
+        }
+        else {
+            // what if we resize to 480 high?
+            const factor = els.cameraImg.naturalWidth / els.cameraImg.naturalHeight;
+            let newHeight = 480;
+            let newWidth = newHeight * factor;
+
+            // fits within the container? just display as is
+            if (newWidth < containerWidth) {
+                els.cameraImg.style.width = newWidth + 'px';
+            }
+            else {
+                // does not fit within container? just use 100%
+                els.cameraImg.style.width = containerWidth + 'px';
+            }
+        }
+
+        if (oldStyleWidth !== els.cameraImg.style.width && lastClassification) {
+            onClassification({
+                dontUpdateTable: true,
+                ...lastClassification,
+            });
+        }
+    };
+
+    let isFirstImage = true;
     socket.on('image', (opts) => {
+        if (isFirstImage) {
+            els.cameraImg.onload = () => {
+                onWindowResize();
+                els.cameraImg.onload = null;
+            };
+            isFirstImage = false;
+        }
         els.cameraImg.src = opts.img;
     });
+    window.addEventListener('resize', onWindowResize);
 
-    let isFirstClassification = true;
-    let inferenceIx = 0;
+    function onClassification(opts) {
+        lastClassification = opts;
 
-    socket.on('classification', (opts) => {
         let result = opts.result;
         let modelType = opts.modelType;
 
@@ -218,16 +274,39 @@ window.WebServer = async () => {
 
         els.imageClassify.row.style.display = 'none';
 
-        if (result.classification) {
+        if (result.classification && !opts.dontUpdateTable) {
+            const showOnlyTopResults = Object.keys(result.classification).length > 10 && !result.visual_anomaly_grid;
+
             if (isFirstClassification) {
-                for (let ix = 0; ix < Object.keys(result.classification).length; ix++) {
-                    const key = Object.keys(result.classification)[ix];
+                if (showOnlyTopResults) {
+                    // only 1 results th
+                    {
+                        let th = document.createElement('th');
+                        th.scope = 'col';
+                        th.textContent = th.title = 'Top 5 results';
+                        th.classList.add('px-0', 'text-center');
+                        els.resultsThead.appendChild(th);
+                    }
 
-                    let th = document.createElement('th');
-                    th.scope = 'col';
-                    th.classList.add('px-0', 'text-center');
-                    th.textContent = th.title = key;
-                    els.resultsThead.appendChild(th);
+                    // unless also have anomaly...
+                    if (Object.keys(result.classification).indexOf('anomaly') > -1) {
+                        let th = document.createElement('th');
+                        th.scope = 'col';
+                        th.textContent = th.title = 'anomaly';
+                        th.classList.add('px-0', 'text-center');
+                        els.resultsThead.appendChild(th);
+                    }
+                }
+                else {
+                    for (let ix = 0; ix < Object.keys(result.classification).length; ix++) {
+                        const key = Object.keys(result.classification)[ix];
+
+                        let th = document.createElement('th');
+                        th.scope = 'col';
+                        th.classList.add('px-0', 'text-center');
+                        th.textContent = th.title = key;
+                        els.resultsThead.appendChild(th);
+                    }
                 }
 
                 if (result.visual_anomaly_grid) {
@@ -264,15 +343,53 @@ window.WebServer = async () => {
             let td1 = document.createElement('td');
             td1.textContent = (++inferenceIx).toString();
             tr.appendChild(td1);
-            for (let k of Object.keys(result.classification)) {
+            if (showOnlyTopResults) {
+                // only print top 5
                 let td = document.createElement('td');
-                td.classList.add('text-center');
-                td.textContent = result.classification[k].toFixed(2);
-                if (result.classification[k] === highest && !isVisualAnomaly) {
-                    td.style.fontWeight = 600;
+
+                let results = [];
+                for (const key of Object.keys(result.classification)) {
+                    if (key === 'anomaly') continue;
+
+                    results.push({
+                        label: key,
+                        value: result.classification[key],
+                    });
+                }
+
+                const top = results.sort((a, b) => b.value - a.value).slice(0, 5);
+                for (let ix = 0; ix < top.length; ix++) {
+                    let span = ix === 0 ? document.createElement('strong') : document.createElement('span');
+                    span.textContent = `${top[ix].label}: ${top[ix].value.toFixed(2)}`;
+                    td.appendChild(span);
+
+                    if (ix !== top.length - 1) {
+                        let commaSpan = document.createElement('span');
+                        commaSpan.textContent = ', ';
+                        td.appendChild(commaSpan);
+                    }
                 }
                 tr.appendChild(td);
+
+                if (Object.keys(result.classification).indexOf('anomaly') > -1) {
+                    let anomalyTd = document.createElement('td');
+                    anomalyTd.classList.add('text-center');
+                    anomalyTd.textContent = result.classification.anomaly.toFixed(2);
+                    tr.appendChild(anomalyTd);
+                }
+            }
+            else {
+                for (let k of Object.keys(result.classification)) {
+                    let td = document.createElement('td');
+                    td.classList.add('text-center');
+                    td.textContent = result.classification[k].toFixed(2);
+                    if (result.classification[k] === highest && !isVisualAnomaly) {
+                        td.style.fontWeight = 600;
+                    }
+                    tr.appendChild(td);
+                }
             }
+
             if (result.visual_anomaly_grid) {
                 let td = document.createElement('td');
                 td.classList.add('text-center');
@@ -406,7 +523,9 @@ window.WebServer = async () => {
                 els.cameraContainer.appendChild(el);
             }
         }
-    });
+    }
+
+    socket.on('classification', onClassification);
 
     if (els.websocketAddress) {
         els.websocketAddress.textContent = `ws://${location.host}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "edge-impulse-linux",
-  "version": "1.17.1",
+  "version": "1.17.2",
   "description": "Node.js SDK and tools for Edge Impulse for Linux",
   "directories": {
     "example": "examples"