edge-impulse-linux 1.4.8 → 1.5.1

package/cli/linux/webserver/public/inference-server.js

@@ -0,0 +1,185 @@
+window.InferenceServer = async () => {
+    // hello world
+    const els = {
+        uploadFile: document.querySelector('#upload-file'),
+        runInferenceBtn: document.querySelector('#run-inference'),
+        resultSection: document.querySelector('#result-section'),
+        resultSectionPre: document.querySelector('#result-section pre'),
+        previewSection: document.querySelector('#preview-section'),
+        previewSectionImgContainer: document.querySelector('#preview-image-container'),
+        previewSectionImg:  document.querySelector('#preview-section img'),
+        features: document.querySelector('#features'),
+    };
+
+    const colors = [
+        '#e6194B', '#3cb44b', '#ffe119', '#4363d8', '#f58231', '#42d4f4', '#f032e6', '#fabed4',
+        '#469990', '#dcbeff', '#9A6324', '#fffac8', '#800000', '#aaffc3',
+    ];
+    const labelToColor = { };
+
+    if (els.uploadFile) {
+        els.uploadFile.oninput = () => {
+            if (els.uploadFile.files.length > 0) {
+                els.runInferenceBtn.disabled = false;
+            }
+            else {
+                els.runInferenceBtn.disabled = true;
+            }
+        };
+        if (els.uploadFile.files.length > 0) {
+            els.runInferenceBtn.disabled = false;
+        }
+        else {
+            els.runInferenceBtn.disabled = true;
+        }
+    }
+
+    if (els.features) {
+        els.features.oninput = () => {
+            if (els.features.value.length > 0) {
+                els.runInferenceBtn.disabled = false;
+            }
+            else {
+                els.runInferenceBtn.disabled = true;
+            }
+        };
+        if (els.features.value.length > 0) {
+            els.runInferenceBtn.disabled = false;
+        }
+        else {
+            els.runInferenceBtn.disabled = true;
+        }
+    }
+
+    els.runInferenceBtn.onclick = async (ev) => {
+        ev.preventDefault();
+
+        const origText = els.runInferenceBtn.textContent;
+
+        els.runInferenceBtn.disabled = true;
+        els.runInferenceBtn.textContent = 'Running inference...';
+
+        try {
+            let resp;
+            if (els.uploadFile) {
+                if (els.uploadFile.files.length === 0) return;
+
+                let formData = new FormData();
+                formData.append('file', els.uploadFile.files[0]);
+
+                resp = await fetch('/api/image', {
+                    body: formData,
+                    method: 'post',
+                });
+            }
+            else if (els.features) {
+                if (els.features.value.length === 0) return;
+
+                let features = els.features.value.split(',').map(n => Number(n.trim()));
+
+                resp = await fetch('/api/features', {
+                    body: JSON.stringify({
+                        features: features,
+                    }),
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    method: 'post',
+                });
+            }
+            else {
+                throw new Error('Could not find either upload or features elements');
+            }
+
+            const text = await resp.text();
+            let body;
+            try {
+                body = JSON.parse(text);
+            }
+            catch (ex) {
+                throw new Error(text);
+            }
+
+            if (els.uploadFile && body.result.bounding_boxes) {
+                els.previewSection.style.display = '';
+
+                const dataUrl = await new Promise((resolve, reject) => {
+                    const reader = new FileReader();
+
+                    reader.onload = e => {
+                        resolve(e.target.result);
+                    };
+                    reader.onerror = err => {
+                        reject(err);
+                    };
+
+                    reader.readAsDataURL(els.uploadFile.files[0]);
+                });
+
+                els.previewSectionImg.src = dataUrl;
+
+                const result = body.result;
+                let factor = 1;
+
+                for (let oldEl of els.previewSectionImgContainer.querySelectorAll('.bounding-box-container')) {
+                    oldEl.parentNode.removeChild(oldEl);
+                }
+
+                for (let b of result.bounding_boxes) {
+                    let bb = {
+                        x: b.x / factor,
+                        y: b.y / factor,
+                        width: b.width / factor,
+                        height: b.height / factor,
+                        label: b.label,
+                        value: b.value
+                    };
+                    if (!labelToColor[bb.label]) {
+                        labelToColor[bb.label] = colors[0];
+                        colors.splice(0, 1);
+                    }
+                    let color = labelToColor[bb.label];
+                    let el = document.createElement('div');
+                    el.classList.add('bounding-box-container');
+                    el.style.position = 'absolute';
+                    el.style.border = 'solid 3px ' + color;
+                    // if (modelType === 'object_detection') {
+                        el.style.width = (bb.width) + 'px';
+                        el.style.height = (bb.height) + 'px';
+                        el.style.left = (bb.x) + 'px';
+                        el.style.top = (bb.y) + 'px';
+                    // }
+                    // else if (modelType === 'constrained_object_detection') {
+                    //     let centerX = bb.x + (bb.width / 2);
+                    //     let centerY = bb.y + (bb.height / 2);
+                    //     el.style.borderRadius = '10px';
+                    //     el.style.width = 20 + 'px';
+                    //     el.style.height = 20 + 'px';
+                    //     el.style.left = (centerX - 10) + 'px';
+                    //     el.style.top = (centerY - 10) + 'px';
+                    // }
+                    let label = document.createElement('div');
+                    label.classList.add('bounding-box-label');
+                    label.style.background = color;
+                    label.textContent = bb.label + ' (' + bb.value.toFixed(2) + ')';
+                    el.style.whiteSpace = 'nowrap';
+                    el.appendChild(label);
+                    els.previewSectionImgContainer.appendChild(el);
+                }
+            }
+            else {
+                els.previewSection.style.display = 'none';
+            }
+
+            els.resultSection.style.display = '';
+            els.resultSectionPre.textContent = JSON.stringify(body, null, 4);
+        }
+        catch (ex) {
+            alert('Failed to run inference: ' + (ex.message || ex.toString()));
+        }
+        finally {
+            els.runInferenceBtn.disabled = false;
+            els.runInferenceBtn.textContent = origText;
+        }
+    };
+};

package/cli/linux/webserver/views/escape-html-template-tag/escape.ts

@@ -0,0 +1,64 @@
+const ENTITIES: {
+    [key: string]: string
+} = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+    '/': '&#x2F;',
+    '`': '&#x60;',
+    '=': '&#x3D;'
+};
+
+const inspect = Symbol.for('nodejs.util.inspect.custom');
+
+const ENT_REGEX = new RegExp(Object.keys(ENTITIES).join('|'), 'g');
+
+export function join(array: (string | HtmlSafeString)[], separator: string | HtmlSafeString) {
+    if (separator === undefined || separator === null) {
+        separator = ',';
+    }
+    if (array.length <= 0) {
+        return new HtmlSafeString([''], []);
+    }
+    return new HtmlSafeString(['', ...Array(array.length - 1).fill(separator), ''], array);
+}
+
+export function safe(value: unknown) {
+    return new HtmlSafeString([String(value)], []);
+}
+
+function escapehtml(unsafe: unknown): string {
+    if (unsafe instanceof HtmlSafeString) {
+        return unsafe.toString();
+    }
+    if (Array.isArray(unsafe)) {
+        return join(unsafe, '').toString();
+    }
+    return String(unsafe).replace(ENT_REGEX, (char) => ENTITIES[char]);
+}
+
+export class HtmlSafeString {
+    private _parts: readonly string[];
+    private _subs: readonly unknown[];
+    constructor(parts: readonly string[], subs: readonly unknown[]) {
+        this._parts = parts;
+        this._subs = subs;
+    }
+
+    toString(): string {
+        return this._parts.reduce((result, part, i) => {
+            const sub = this._subs[i - 1];
+            return result + escapehtml(sub) + part;
+        });
+    }
+
+    [inspect]() {
+        return `HtmlSafeString '${this.toString()}'`;
+    }
+}
+
+export default function escapeHtml(parts: TemplateStringsArray, ...subs: unknown[]) {
+    return new HtmlSafeString(parts, subs);
+}

package/cli/linux/webserver/views/escape-html-template-tag/index.ts

@@ -0,0 +1,2 @@
+import escapeHtml, { join, safe } from './escape';
+export default Object.assign(escapeHtml, { default: escapeHtml, join, safe });

package/cli/linux/webserver/views/inference-server-view.ts

@@ -0,0 +1,179 @@
+import html from './escape-html-template-tag';
+
+export type InferenceServerModelViewModel = {
+    mode: 'features',
+    featuresCount: number,
+} | {
+    mode: 'image',
+    width: number,
+    height: number,
+    depth: 'Grayscale' | 'RGB',
+    isObjectDetection: boolean,
+};
+
+export type InferenceServerViewModel = {
+    studioLink: string,
+    owner: string,
+    projectName: string,
+    projectVersion: number,
+    serverPort: number,
+    model: InferenceServerModelViewModel,
+};
+
+export const renderInferenceServerView = (vm: InferenceServerViewModel) => {
+    let resultsColClass = `col-12`;
+    if (vm.model.mode === 'image' && vm.model.isObjectDetection) {
+        resultsColClass = `col-12 col-lg-6`;
+    }
+
+    return html`<!DOCTYPE html>
+    <html>
+
+    <head>
+        <meta charset="utf-8">
+        <title>${vm.owner} / ${vm.projectName} (v${vm.projectVersion}) - Edge Impulse inference server</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0" />
+        <link rel="stylesheet" href="/assets/argon-dashboard.css">
+        <link rel="stylesheet" href="/assets/mobileclient.css">
+        <!-- generics -->
+        <link rel="icon" href="/assets/favicon-color/favicon-32.png" sizes="32x32">
+        <link rel="icon" href="/assets/favicon-color/favicon-57.png" sizes="57x57">
+        <link rel="icon" href="/assets/favicon-color/favicon-76.png" sizes="76x76">
+        <link rel="icon" href="/assets/favicon-color/favicon-96.png" sizes="96x96">
+        <link rel="icon" href="/assets/favicon-color/favicon-128.png" sizes="128x128">
+        <link rel="icon" href="/assets/favicon-color/favicon-196.png" sizes="196x196">
+        <link rel="icon" href="/assets/favicon-color/favicon-228.png" sizes="228x228">
+        <!-- Android -->
+        <link rel="shortcut icon" href="/assets/favicon-color/favicon-196.png" sizes="196x196">
+        <!-- iOS -->
+        <link rel="apple-touch-icon" href="/assets/favicon-color/favicon-120.png" sizes="120x120">
+        <link rel="apple-touch-icon" href="/assets/favicon-color/favicon-152.png" sizes="152x152">
+        <link rel="apple-touch-icon" href="/assets/favicon-color/favicon-180.png" sizes="180x180">
+        <!-- Windows -->
+        <meta name="msapplication-TileColor" content="#FFFFFF">
+        <meta name="msapplication-TileImage" content="/assets/favicon-color/favicon-144.png">
+
+        <!-- (c) Copyright 2024, Edge Impulse Inc. -->
+    </head>
+
+    <body>
+        <div class="container-fluid">
+            <div class="row align-items-center border-bottom" id="header-row">
+                <div class="col-auto mt-3 mb-3 pr-0">
+                    <img src="/assets/mark.svg">
+                </div>
+                <div class="col align-middle inference-server-view-title-col">
+                    <h1 class="text-dark mb-0 border-left pl-4"
+                        title="Edge Impulse inference server">
+                        Edge Impulse inference server
+                    </h1>
+                </div>
+            </div>
+            <div class="row mt-3">
+                <div class="col">
+                    <div class="card shadow">
+                        <div class="card-body text-left mb--4">
+                            <div class="row card-sub-header border-bottom mt--2">
+                                <div class="col">
+                                    <h4>Model information</h4>
+                                </div>
+                            </div>
+                            <div class="mb-2 text-sm">
+                                Inference server for "<a href="${vm.studioLink}" target="_blank">${vm.owner} / ${vm.projectName}</a>" (v${vm.projectVersion}).
+                            </div>
+                            <div class="row card-sub-header border-bottom">
+                                <div class="col">
+                                    <h4>Get model info</h4>
+                                </div>
+                            </div>
+                            <div class="mb-3 text-sm">
+                                <code>curl -v -X GET http://localhost:${vm.serverPort}/api/info</code>
+                            </div>
+                            <div class="row card-sub-header border-bottom">
+                                <div class="col">
+                                    <h4>How to run inference</h4>
+                                </div>
+                            </div>
+                            ${vm.model.mode === 'image' ? html`
+                            <div class="mb-3 text-sm">
+                                <code>curl -v -X POST -F 'file=@path-to-an-image.jpg' http://localhost:${vm.serverPort}/api/image</code>
+                            </div>
+                            <div class="mb-4 text-xs">
+                                (Expecting a ${vm.model.width} x ${vm.model.height} (${vm.model.depth}) image, images in other resolutions will be resized)
+                            </div>
+                            ` : html`
+                            <div class="mb-3 text-sm">
+                                <code>curl -v -X POST -H "Content-Type: application/json" -d '{"features": [5, 10, 15, 20]}' http://localhost:${vm.serverPort}/api/features</code>
+                            </div>
+                            <div class="mb-4 text-xs">
+                                (Expecting ${vm.model.featuresCount} features for this model)
+                            </div>
+                            `}
+                        </div>
+                    </div>
+                    <div class="card shadow mt-4">
+                        <div class="card-body text-left mb--3">
+                            <div class="row card-sub-header border-bottom mt--2">
+                                <div class="col">
+                                    <h4>Try out inferencing</h4>
+                                </div>
+                            </div>
+                            ${vm.model.mode === 'image' ? html`
+                            <div class="mb-3">
+                                <input type="file" class="form-control form-control-sm border-0 px-0" id="upload-file">
+                            </div>
+                            ` : html`
+                            <div class="mb-2 text-sm">
+                                Enter ${vm.model.featuresCount} features, split by ',' - for example from "Live classification".
+                            </div>
+                            <div class="mb-3">
+                                <input class="form-control form-control-sm" id="features" placeholder="0, 0, 0, 0, ...">
+                            </div>
+                            `}
+                            <div class="mb-3">
+                                <button class="btn-sm btn btn-primary" id="run-inference" disabled>Run inference</button>
+                            </div>
+
+                            <div class="row mb-3" id="result-section" style="display: none">
+                                <div class="${resultsColClass}">
+                                    <div class="row card-sub-header border-bottom">
+                                        <div class="col">
+                                            <h4>Result</h4>
+                                        </div>
+                                    </div>
+                                    <pre class="text-xs mb-0">Bleep bloop</pre>
+                                </div>
+                                <div id="preview-section" class="${resultsColClass}" style="display: none">
+                                    <div class="row card-sub-header border-bottom">
+                                        <div class="col">
+                                            <h4>Preview</h4>
+                                        </div>
+                                    </div>
+                                    <div id="preview-image-container" class="mt-3"><img id="preview-image"></img></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <footer class="footer">
+            <div class="row">
+                <div class="col text-center">
+                    <div class="copyright text-center text-muted">
+                        <i class="fas fa-code"></i>
+                        Developed by <a href="https://edgeimpulse.com" class="font-weight-bold" target="_blank">Edge Impulse</a>.
+                    </div>
+                </div>
+            </div>
+        </footer>
+
+        <script type="text/javascript" src="/inference-server.js"></script>
+        <script>
+            window.InferenceServer();
+        </script>
+    </body>
+    </html>
+    `;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "edge-impulse-linux",
-  "version": "1.4.8",
+  "version": "1.5.1",
   "description": "Node.js SDK and tools for Edge Impulse for Linux",
   "directories": {
     "example": "examples"
@@ -8,7 +8,8 @@
   "scripts": {
     "build": "./node_modules/.bin/tsc -p .",
     "lint": "./node_modules/tslint/bin/tslint -p tsconfig.json",
-    "test": "tsc -b . && TS_NODE_PROJECT=./tsconfig.json mocha --config ./test/.mocharc.js"
+    "test": "tsc -b . && TS_NODE_PROJECT=./tsconfig.json mocha --config ./test/.mocharc.js",
+    "watch-runner": "func() { tsc-watch -b . --onSuccess \"node build/cli/linux/runner.js $1\" --noClear; }; func"
   },
   "bin": {
     "edge-impulse-linux": "build/cli/linux/linux.js",
@@ -28,7 +29,6 @@
   },
   "homepage": "https://github.com/edgeimpulse/linux-sdk-node#readme",
   "dependencies": {
-    "@types/sharp": "0.29.1",
     "async-mutex": "0.2.6",
     "borc": "2.1.2",
     "cbor": "5.0.1",
@@ -37,6 +37,7 @@
     "form-data": "4.0.0",
     "inquirer": "7.0.0",
     "jpeg-js": "0.4.2",
+    "multer": "1.4.5-lts.1",
     "node-fetch": "2.6.7",
     "npm-registry-fetch": "5.0.0",
     "request": "2.88.0",
@@ -55,15 +56,18 @@
     "@types/express": "4.17.1",
     "@types/inquirer": "6.5.0",
     "@types/mocha": "9.0.0",
+    "@types/multer": "1.4.11",
     "@types/npm-registry-fetch": "4.0.1",
     "@types/request": "2.48.3",
     "@types/request-promise": "4.1.44",
+    "@types/sharp": "0.29.1",
     "@types/socket.io": "2.1.4",
     "@types/tiny-async-pool": "1.0.0",
     "@types/ws": "6.0.3",
     "mocha": "9.1.3",
-    "tslint": "6.1.2",
     "ts-node": "10.4.0",
+    "tsc-watch": "4.6.2",
+    "tslint": "6.1.2",
     "typescript": "3.9.3"
   }
 }