Use handlebars with template

dist/index.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -15,6 +38,7 @@ const multer_1 = __importDefault(require("multer"));
 const uuid_1 = require("uuid");
 const mime_1 = require("mime");
 const log_1 = require("./log");
+const Handlebars = __importStar(require("handlebars"));
 const port = typeof process.env['PORT'] !== 'undefined' ? parseInt(process.env['PORT'], 10) : 3333;
 const data = typeof process.env['DATADIR'] !== 'undefined' ? process.env['DATADIR'] : './data';
 const dbPath = (0, path_1.join)(data, 'queue.sqlite');
@@ -44,6 +68,18 @@ const uploadZip = (0, multer_1.default)({ storage, fileFilter });
 const uploadOnnx = (0, multer_1.default)({ storage, fileFilter });
 app.use(body_parser_1.default.json());
 app.use(body_parser_1.default.urlencoded({ extended: true }));
+async function createTemplate(filePath) {
+    let tmpl;
+    try {
+        tmpl = await promises_1.default.readFile(filePath, 'utf8');
+    }
+    catch (err) {
+        log.error(err);
+        return null;
+    }
+    return Handlebars.compile(tmpl);
+}
+let index;
 function hash(path) {
     return new Promise((resolve, reject) => {
         const hashSum = (0, crypto_1.createHash)('sha256');
@@ -204,14 +240,7 @@ async function complete(id, meta) {
     });
 }
 app.get('/', async (req, res, next) => {
-    let html;
+    const html = index({});
-    try {
-        html = await promises_1.default.readFile('./views/index.html', 'utf8');
-    }
-    catch (err) {
-        log.error(err);
-        return next(err);
-    }
     res.send(html);
 });
 app.post('/', uploadZip.single('dataset'), async (req, res, next) => {
@@ -466,7 +495,8 @@ app.post('/job/fail/:id', async (req, res, next) => {
     }
     res.json(true);
 });
-app.listen(port, () => {
+app.listen(port, async () => {
+    index = await createTemplate('./views/index.hbs');
     log.info(`yolo_web running on port ${port}`);
 });
 //# sourceMappingURL=index.js.map

package-lock.json

@@ -12,6 +12,7 @@
         "body-parser": "^1.20.2",
         "dotenv": "^16.3.1",
         "express": "^4.18.2",
+        "handlebars": "^4.7.8",
         "lodash": "^4.17.21",
         "mime": "^3.0.0",
         "multer": "^1.4.5-lts.1",
@@ -23,6 +24,7 @@
       },
       "devDependencies": {
         "@types/express": "^4.17.17",
+        "@types/handlebars": "^4.1.0",
         "@types/mime": "^3.0.1",
         "@types/multer": "^1.4.7",
         "@types/node-fetch": "^2.6.9",
@@ -151,6 +153,16 @@
         "@types/send": "*"
       }
     },
+    "node_modules/@types/handlebars": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@types/handlebars/-/handlebars-4.1.0.tgz",
+      "integrity": "sha512-gq9YweFKNNB1uFK71eRqsd4niVkXrxHugqWFQkeLRJvGjnxsLr16bYtcsG4tOFwmYi0Bax+wCkbf1reUfdl4kA==",
+      "deprecated": "This is a stub types definition. handlebars provides its own type definitions, so you do not need this installed.",
+      "dev": true,
+      "dependencies": {
+        "handlebars": "*"
+      }
+    },
     "node_modules/@types/http-errors": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.1.tgz",
@@ -1013,6 +1025,26 @@
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "optional": true
     },
+    "node_modules/handlebars": {
+      "version": "4.7.8",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz",
+      "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==",
+      "dependencies": {
+        "minimist": "^1.2.5",
+        "neo-async": "^2.6.2",
+        "source-map": "^0.6.1",
+        "wordwrap": "^1.0.0"
+      },
+      "bin": {
+        "handlebars": "bin/handlebars"
+      },
+      "engines": {
+        "node": ">=0.4.7"
+      },
+      "optionalDependencies": {
+        "uglify-js": "^3.1.4"
+      }
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -1556,6 +1588,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
+    },
     "node_modules/node-addon-api": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-4.3.0.tgz",
@@ -2059,6 +2096,14 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "optional": true
     },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/sqlite3": {
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/sqlite3/-/sqlite3-5.1.6.tgz",
@@ -2229,6 +2274,18 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/uglify-js": {
+      "version": "3.17.4",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz",
+      "integrity": "sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==",
+      "optional": true,
+      "bin": {
+        "uglifyjs": "bin/uglifyjs"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/unique-filename": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
@@ -2355,6 +2412,11 @@
         "node": ">= 12.0.0"
       }
     },
+    "node_modules/wordwrap": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
+      "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q=="
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",

package.json

@@ -12,6 +12,7 @@
   "license": "ISC",
   "devDependencies": {
     "@types/express": "^4.17.17",
+    "@types/handlebars": "^4.1.0",
     "@types/mime": "^3.0.1",
     "@types/multer": "^1.4.7",
     "@types/node-fetch": "^2.6.9",
@@ -24,6 +25,7 @@
     "body-parser": "^1.20.2",
     "dotenv": "^16.3.1",
     "express": "^4.18.2",
+    "handlebars": "^4.7.8",
     "lodash": "^4.17.21",
     "mime": "^3.0.0",
     "multer": "^1.4.5-lts.1",

src/index.ts

@@ -12,6 +12,7 @@ import { v4 as uuid } from 'uuid';
 import { getType } from 'mime';
 import { createLog } from './log'
 import type { Logger } from 'winston';
+import * as Handlebars from 'handlebars';
 
 const port : number = typeof process.env['PORT'] !== 'undefined' ? parseInt(process.env['PORT'], 10) : 3333;
 const data : string = typeof process.env['DATADIR'] !== 'undefined' ? process.env['DATADIR'] : './data';
@@ -47,6 +48,19 @@ const uploadOnnx : any = multer({ storage, fileFilter });
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: true }));
 
+async function createTemplate (filePath : string) : Promise<HandlebarsTemplateDelegate<any>> {
+	let tmpl : string;
+	try {
+		tmpl = await fs.readFile(filePath, 'utf8');
+	} catch (err) {
+		log.error(err);
+		return null
+	}
+	return Handlebars.compile(tmpl);
+}
+
+let index : HandlebarsTemplateDelegate<any>;
+
 function hash (path : string) : Promise<string> {
 	return new Promise((resolve : Function, reject : Function) => {
 		const hashSum : Hash = createHash('sha256');
@@ -204,13 +218,7 @@ async function complete (id : string, meta : string | null) : Promise<boolean> {
 }
 
 app.get('/', async (req : Request, res : Response, next : NextFunction) => {
-	let html : string;
+	const html = index({});
-	try {
-		html = await fs.readFile('./views/index.html', 'utf8');
-	} catch (err) {
-		log.error(err);
-		return next(err);
-	}
 	res.send(html);
 });
 
@@ -500,7 +508,7 @@ app.post('/job/fail/:id', async (req : Request, res: Response, next : NextFuncti
 	res.json(true);
 });
 
-app.listen(port, () => {
+app.listen(port, async () => {
-
+	index = await createTemplate('./views/index.hbs');
 	log.info(`yolo_web running on port ${port}`);
 })