31:[] 2f:{"title":"Chép Ảnh bằng Trí Tuệ Nhân Tạo","cells":[{"id":0,"value":"viewof title = md`# Chép Ảnh bằng Trí Tuệ Nhân Tạo`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"Reproduces a [TFJS-TFLite demo](https://codepen.io/jinjingforever/pen/xxgWRaE) in Observable.","pinned":false,"hidden":false,"mode":"md"},{"id":52,"value":"viewof imageUrl = Inputs.text({\n value:\n \"https://cadasa.github.io/kjerag.jpg\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"dashboard = html` \n \n \n \n \n

\n ${img}\n

\n ${img2}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"img = {\n return new Promise((resolve) => {\n const img = new Image();\n img.width = 224;\n img.height = 224;\n img.onload = () => resolve(img);\n img.crossOrigin = \"anonymous\";\n img.src = imageUrl;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"img2 = {\n // Prepare the input tensors from the image.\n const inputTensor = tf.sub(\n tf.div(\n tf.expandDims(\n tf.image\n // Resize.\n .resizeBilinear(tf.browser.fromPixels(img), [224, 224])\n ),\n 127.5\n ),\n 1\n );\n\n // Run the inference and get the output tensors.\n const outputTensor = tfliteModel.predict(inputTensor);\n\n // Process and draw the result on the canvas.\n //\n // De-normalize.\n const data = tf.mul(tf.add(outputTensor, 1), 127.5);\n // Convert from RGB to RGBA, and create and return ImageData.\n const rgb = Array.from(data.dataSync());\n const rgba = [];\n for (let i = 0; i < rgb.length / 3; i++) {\n for (let c = 0; c < 3; c++) {\n rgba.push(rgb[i * 3 + c]);\n }\n rgba.push(255);\n }\n // Draw on canvas.\n const imageData = new ImageData(Uint8ClampedArray.from(rgba), 224, 224);\n\n const ctx = DOM.context2d(224, 224, 1);\n\n ctx.putImageData(imageData, 0, 0);\n\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"tf = {\n await import(\"https://cdn.skypack.dev/@tensorflow/tfjs-backend-cpu\");\n\n return await import(\"https://cdn.skypack.dev/@tensorflow/tfjs-core\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"tflite = {\n const tflite = await import(\n \"https://cdn.skypack.dev/@tensorflow/tfjs-tflite\"\n );\n\n tflite.setWasmPath(\n \"https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-tflite@0.0.1-alpha.4/dist/\"\n );\n\n return tflite;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"tfliteModel = tflite.loadTFLiteModel(\n \"https://storage.googleapis.com/tfweb/models/cartoongan_fp16.tflite\"\n)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}