From ee1020859b4e3e4f75ae1c82822e11d1c633cd2d Mon Sep 17 00:00:00 2001 From: Yelin Jeong Date: Mon, 1 Jul 2024 16:41:28 +0900 Subject: [PATCH] Apply eslint to Image Classification Offloading Yolo This patch applies eslint with fix option and adds some error handling. Signed-off-by: Yelin Jeong --- .../js/main.js | 279 +++++++++--------- .../js/utils.js | 40 +-- 2 files changed, 163 insertions(+), 156 deletions(-) diff --git a/Tizen.web/ImageClassificationOffloadingYolo/js/main.js b/Tizen.web/ImageClassificationOffloadingYolo/js/main.js index 9dfa84ff..5e6bb6e2 100644 --- a/Tizen.web/ImageClassificationOffloadingYolo/js/main.js +++ b/Tizen.web/ImageClassificationOffloadingYolo/js/main.js @@ -11,10 +11,10 @@ */ import { - getAbsPath, - getNetworkType, - getIpAddress, - GetImgPath, + getAbsPath, + getNetworkType, + getIpAddress, + GetImgPath, } from "./utils.js"; let fHandle = null; @@ -22,102 +22,113 @@ let tensorsData = null; let tensorsInfo = null; function disposeData() { - if (fHandle != null) { - fHandle.close(); - } + if (fHandle != null) { + fHandle.close(); + } - if (tensorsData != null) { - tensorsData.dispose(); - } + if (tensorsData != null) { + tensorsData.dispose(); + } - if (tensorsInfo != null) { - tensorsInfo.dispose(); - } + if (tensorsInfo != null) { + tensorsInfo.dispose(); + } } let localHandle; let offloadingHandle; function createPipelineDescription(isLocal, filter) { - const absLabelPath = getAbsPath("coco.txt"); - - return ( - "appsrc caps=image/jpeg name=srcx_" + (isLocal ? "local" : "offloading") + " ! jpegdec ! " + - "videoconvert ! video/x-raw,format=RGB,width=224,height=224,framerate=0/1 ! tee name=t " + - "t. ! tensor_converter ! tensor_transform mode=arithmetic option=typecast:float32,div:255.0 ! " + - "other/tensors,num_tensors=1,format=static,dimensions=(string)3:224:224:1,types=float32,framerate=0/1 ! " + - filter + " ! " + "other/tensors,num_tensors=1,types=float32,format=static,dimensions=1029:84:1 ! " + - "tensor_transform mode=transpose option=1:0:2:3 ! " + - "other/tensors,num_tensors=1,types=float32,format=static,dimensions=84:1029:1 !" + - "tensor_decoder mode=bounding_boxes option1=yolov8 option2=" + absLabelPath + " option3=0 option4=224:224 option5=224:224 ! " + - "video/x-raw,width=224,height=224,format=RGBA,framerate=0/1 ! mix.sink_0 t. ! mix.sink_1 " + - "compositor name=mix sink_0::zorder=2 sink_1::zorder=1 ! video/x-raw,width=224,height=224,format=RGBA,framerate=0/1 ! tensor_converter ! " + - "other/tensors,num_tensors=1,types=uint8,format=static,dimensions=4:224:224:1 ! " + - "appsink sync=false name=sinkx_" + (isLocal ? "local" : "offloading") - ); + const absLabelPath = getAbsPath("coco.txt"); + + return ( + "appsrc caps=image/jpeg name=srcx_" + + (isLocal ? "local" : "offloading") + + " ! jpegdec ! " + + "videoconvert ! video/x-raw,format=RGB,width=224,height=224,framerate=0/1 ! tee name=t " + + "t. ! tensor_converter ! tensor_transform mode=arithmetic option=typecast:float32,div:255.0 ! " + + "other/tensors,num_tensors=1,format=static,dimensions=(string)3:224:224:1,types=float32,framerate=0/1 ! " + + filter + + " ! " + + "other/tensors,num_tensors=1,types=float32,format=static,dimensions=1029:84:1 ! " + + "tensor_transform mode=transpose option=1:0:2:3 ! " + + "other/tensors,num_tensors=1,types=float32,format=static,dimensions=84:1029:1 !" + + "tensor_decoder mode=bounding_boxes option1=yolov8 option2=" + + absLabelPath + + " option3=0 option4=224:224 option5=224:224 ! " + + "video/x-raw,width=224,height=224,format=RGBA,framerate=0/1 ! mix.sink_0 t. ! mix.sink_1 " + + "compositor name=mix sink_0::zorder=2 sink_1::zorder=1 ! video/x-raw,width=224,height=224,format=RGBA,framerate=0/1 ! tensor_converter ! " + + "other/tensors,num_tensors=1,types=uint8,format=static,dimensions=4:224:224:1 ! " + + "appsink sync=false name=sinkx_" + + (isLocal ? "local" : "offloading") + ); } /** * Callback function for pipeline sink listener */ function sinkListenerCallback(sinkName, data) { - const endTime = performance.now(); - - const tensorsRetData = data.getTensorRawData(0).data; - const pixelData = new Uint8ClampedArray(tensorsRetData); - const imageData = new ImageData(pixelData, 224); - - let type; - if (sinkName.endsWith("local")) { - type = "local"; - } else { - type = "offloading"; - } - - const canvas = document.getElementById("canvas_" + type); - canvas.width = 224; - canvas.height = 224; - const ctx = canvas.getContext("2d"); - ctx.putImageData(imageData, 0, 0); - - const time = document.getElementById("time_" + type); - time.innerText = type + " : " + (endTime - startTime) + " ms"; + const endTime = performance.now(); + + const tensorsRetData = data.getTensorRawData(0).data; + const pixelData = new Uint8ClampedArray(tensorsRetData); + const imageData = new ImageData(pixelData, 224); + + let type; + if (sinkName.endsWith("local")) { + type = "local"; + } else { + type = "offloading"; + } + + const canvas = document.getElementById("canvas_" + type); + canvas.width = 224; + canvas.height = 224; + const ctx = canvas.getContext("2d"); + ctx.putImageData(imageData, 0, 0); + + const time = document.getElementById("time_" + type); + time.innerText = type + " : " + (endTime - startTime) + " ms"; } /** * Run a pipeline that uses Tizen device's resources */ function runLocal() { - const absModelPath = getAbsPath("yolov8s_float32.tflite"); - const filter = - "tensor_filter framework=tensorflow-lite model=" + absModelPath; + const absModelPath = getAbsPath("yolov8s_float32.tflite"); + const filter = + "tensor_filter framework=tensorflow-lite model=" + absModelPath; - const pipelineDescription = createPipelineDescription(true, filter); + const pipelineDescription = createPipelineDescription(true, filter); - localHandle = tizen.ml.pipeline.createPipeline(pipelineDescription); - localHandle.start(); - localHandle.registerSinkListener("sinkx_local", sinkListenerCallback); + localHandle = tizen.ml.pipeline.createPipeline(pipelineDescription); + localHandle.start(); + localHandle.registerSinkListener("sinkx_local", sinkListenerCallback); } /** * Run a pipeline that uses other device's resources */ function runOffloading() { - const filter = - "tensor_query_client host=" + ip + - " port=" + document.getElementById("port").value + - " dest-host=" + document.getElementById("ip").value + - " dest-port=" + document.getElementById("port").value + - " timeout=1000"; - - const pipelineDescription = createPipelineDescription(false, filter); - - offloadingHandle = tizen.ml.pipeline.createPipeline(pipelineDescription); - offloadingHandle.start(); - offloadingHandle.registerSinkListener( - "sinkx_offloading", - sinkListenerCallback, - ); + const filter = + "tensor_query_client host=" + + ip + + " port=" + + document.getElementById("port").value + + " dest-host=" + + document.getElementById("ip").value + + " dest-port=" + + document.getElementById("port").value + + " timeout=1000"; + + const pipelineDescription = createPipelineDescription(false, filter); + + offloadingHandle = tizen.ml.pipeline.createPipeline(pipelineDescription); + offloadingHandle.start(); + offloadingHandle.registerSinkListener( + "sinkx_offloading", + sinkListenerCallback, + ); } let startTime; @@ -126,75 +137,71 @@ let startTime; * Run a pipeline that uses other device's resources */ function inference(isLocal) { - const img_path = GetImgPath(); - let img = new Image(); - img.src = img_path; + const img_path = GetImgPath(); + let img = new Image(); + img.src = img_path; - img.onload = function () { - disposeData(); - fHandle = tizen.filesystem.openFile("wgt-package" + img_path, "r"); - const imgUInt8Array = fHandle.readData(); - - tensorsInfo = new tizen.ml.TensorsInfo(); - tensorsInfo.addTensorInfo("tensor", "UINT8", [imgUInt8Array.length]); - tensorsData = tensorsInfo.getTensorsData(); - tensorsData.setTensorRawData(0, imgUInt8Array); - - startTime = performance.now(); - - if (isLocal) { - localHandle.getSource("srcx_local").inputData(tensorsData); - } else { - offloadingHandle.getSource("srcx_offloading").inputData(tensorsData); - } - }; + img.onload = function () { + disposeData(); + fHandle = tizen.filesystem.openFile("wgt-package" + img_path, "r"); + const imgUInt8Array = fHandle.readData(); + + tensorsInfo = new tizen.ml.TensorsInfo(); + tensorsInfo.addTensorInfo("tensor", "UINT8", [imgUInt8Array.length]); + tensorsData = tensorsInfo.getTensorsData(); + tensorsData.setTensorRawData(0, imgUInt8Array); + + startTime = performance.now(); + + if (isLocal) { + localHandle.getSource("srcx_local").inputData(tensorsData); + } else { + offloadingHandle.getSource("srcx_offloading").inputData(tensorsData); + } + }; } let ip; window.onload = async function () { - const networkType = await getNetworkType(); - ip = await getIpAddress(networkType); - - document - .getElementById("start_local") - .addEventListener("click", function () { - runLocal(); - }); - - document - .getElementById("start_offloading") - .addEventListener("click", function () { - runOffloading(); - }); - - document - .getElementById("local") - .addEventListener("click", function () { - inference(true); - }); - - document - .getElementById("offloading") - .addEventListener("click", function () { - inference(false); - }); - - /* add eventListener for tizenhwkey */ - document.addEventListener("tizenhwkey", function (e) { - if (e.keyName === "back") { - try { - console.log("Pipeline is disposed!!"); - localHandle.stop(); - localHandle.dispose(); - - offloadingHandle.stop(); - offloadingHandle.dispose(); - - disposeData(); - - tizen.application.getCurrentApplication().exit(); - } catch (ignore) {} - } + const networkType = await getNetworkType(); + ip = await getIpAddress(networkType); + + document.getElementById("start_local").addEventListener("click", function () { + runLocal(); + }); + + document + .getElementById("start_offloading") + .addEventListener("click", function () { + runOffloading(); }); + + document.getElementById("local").addEventListener("click", function () { + inference(true); + }); + + document.getElementById("offloading").addEventListener("click", function () { + inference(false); + }); + + /* add eventListener for tizenhwkey */ + document.addEventListener("tizenhwkey", function (e) { + if (e.keyName === "back") { + try { + console.log("Pipeline is disposed!!"); + localHandle.stop(); + localHandle.dispose(); + + offloadingHandle.stop(); + offloadingHandle.dispose(); + + disposeData(); + + tizen.application.getCurrentApplication().exit(); + } catch (ignore) { + console.log("error " + ignore); + } + } + }); }; diff --git a/Tizen.web/ImageClassificationOffloadingYolo/js/utils.js b/Tizen.web/ImageClassificationOffloadingYolo/js/utils.js index bdefef8d..a6330b19 100644 --- a/Tizen.web/ImageClassificationOffloadingYolo/js/utils.js +++ b/Tizen.web/ImageClassificationOffloadingYolo/js/utils.js @@ -11,10 +11,10 @@ * Get absolute path for file */ export function getAbsPath(fileName) { - const filePath = 'wgt-package/res/' + fileName; - const URI_PREFIX = 'file://'; - const absPath = tizen.filesystem.toURI(filePath).substr(URI_PREFIX.length); - return absPath + const filePath = "wgt-package/res/" + fileName; + const URI_PREFIX = "file://"; + const absPath = tizen.filesystem.toURI(filePath).substr(URI_PREFIX.length); + return absPath; } /** @@ -22,11 +22,11 @@ export function getAbsPath(fileName) { * @returns the network type */ export async function getNetworkType() { - return new Promise((resolve, reject) => { - tizen.systeminfo.getPropertyValue("NETWORK", function (data) { - resolve(data.networkType); - }); + return new Promise((resolve) => { + tizen.systeminfo.getPropertyValue("NETWORK", function (data) { + resolve(data.networkType); }); + }); } /** @@ -35,14 +35,14 @@ export async function getNetworkType() { * @returns ip address of the network type */ export async function getIpAddress(networkType) { - return new Promise((resolve, reject) => { - tizen.systeminfo.getPropertyValue( - networkType + "_NETWORK", - function (property) { - resolve(property.ipAddress); - }, - ); - }); + return new Promise((resolve) => { + tizen.systeminfo.getPropertyValue( + networkType + "_NETWORK", + function (property) { + resolve(property.ipAddress); + }, + ); + }); } /** @@ -50,9 +50,9 @@ export async function getIpAddress(networkType) { * @returns image path */ export function GetImgPath() { - const MAX_IMG_CNT = 2; - let imgsrc = GetImgPath.count++ % MAX_IMG_CNT; - imgsrc = imgsrc.toString().concat('.jpg'); - return '/res/'.concat(imgsrc); + const MAX_IMG_CNT = 2; + let imgsrc = GetImgPath.count++ % MAX_IMG_CNT; + imgsrc = imgsrc.toString().concat(".jpg"); + return "/res/".concat(imgsrc); } GetImgPath.count = 0;