2c:null 2d:["$","title",null,{"children":"Zarr.js - Take #1 🎬 | Praful Bhawsar | Observable"}] 32:[] 30:{"id":"d2b0da8b82a40150","slug":"zarr-js-take-1","title":"Zarr.js - Take #1 🎬","thumbnail":"67a68bbaeb4a83c437a91e0f06ff50afd161e6c066e5611aae42a7c8f9401363","access_level":"public","create_time":"$D2022-01-12T14:15:13.512Z","update_time":"$D2022-02-04T16:13:11.517Z","view_time":null,"first_public_time":"$D2022-01-13T09:27:32.413Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b0b4412d0985303e","login":"prafulb","name":"Praful Bhawsar","avatar_url":"https://avatars-next.observableusercontent.com/765f5b661080e697f1ac35466b8e2cef535a03897b0dc7163c9b13484530ac2a","tier":"starter_2024"},"version":288,"publish_version":288,"role":null,"authored":false,"authors":[{"type":"individual","id":"49bdf3232a315bf5","login":"prafulb","name":"Praful Bhawsar","avatar_url":"https://avatars-next.observableusercontent.com/765f5b661080e697f1ac35466b8e2cef535a03897b0dc7163c9b13484530ac2a","tier":null}],"members":[{"type":"individual","id":"49bdf3232a315bf5","login":"prafulb","name":"Praful Bhawsar","avatar_url":"https://avatars-next.observableusercontent.com/765f5b661080e697f1ac35466b8e2cef535a03897b0dc7163c9b13484530ac2a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Zarr.js - Take #1 🎬","cells":[{"id":0,"value":"# Zarr.js - Take #1 🎬","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":264,"value":"viewof zarrDirURL = Inputs.text({\n label: html`URL to Zarr Root: `,\n value:\n \"https://storage.googleapis.com/episphere_testdata/Zarr_Test/data.zarr\",\n width: 500,\n datalist: [\n \"https://storage.googleapis.com/episphere_testdata/Zarr_Test/data.zarr\",\n \"https://storage.googleapis.com/episphere_testdata/Zarr_Test/data_zstd.zarr\"\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"viewof groupSelector = Inputs.radio([\"train\", \"test\"], {\n label: html`Select group: `,\n value: \"test\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"viewof imageIndexInput = {\n groupSelector;\n let max = 60000 - 1;\n if (groupSelector === \"test\") {\n max = 10000 - 1;\n }\n return Inputs.number([0, max], {\n label: html`Image index in group: `,\n value: 0\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"canvas = {\n groupSelector;\n imageIndexInput;\n\n const canvas = DOM.canvas(28, 28);\n const ctx = canvas.getContext(\"2d\");\n const rgbaImgData = [];\n\n const { data: imgData, label } = await getImageForPrediction(\n groupSelector,\n imageIndexInput\n );\n \n imgData\n .flat(Infinity)\n .map((x) => x[0])\n .forEach((pixelIntensity) => {\n rgbaImgData.push(Math.ceil(pixelIntensity * 255));\n rgbaImgData.push(Math.ceil(pixelIntensity * 255));\n rgbaImgData.push(Math.ceil(pixelIntensity * 255));\n rgbaImgData.push(255);\n });\n\n ctx.putImageData(\n new ImageData(Uint8ClampedArray.from(rgbaImgData), 28, 28),\n 0,\n 0\n );\n\n const prediction = await (\n await model.predict(tfjs.tensor2d(imgData).reshape([1, 28, 28, 1]))\n )\n .argMax(1)\n .data();\n\n return html`${canvas}\n

Actual Label: ${label}

Predicted: ${prediction}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"zarr = await import(\"https://unpkg.com/zarr@0.5.1/zarr.mjs?module\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"tfjs = require(\"@tensorflow/tfjs\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"model = await tfjs.loadLayersModel(\n \"https://cloud4bio.github.io/data/model.json\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"initializeZarrStore = async (url=\"https://storage.googleapis.com/episphere_testdata/Zarr%20Test\", rootDir=\"data.zarr\", mode=\"r\") => {\n const store = new zarr.HTTPStore(url)\n const group = await zarr.openGroup(store, rootDir, mode)\n return group\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"getImageForPrediction = async (group = \"test\", index = 0) => {\n const tempStrArr = zarrDirURL.trim().split(\"/\");\n const zarrRootDirName = tempStrArr.pop();\n const zarrBaseURL = tempStrArr.join(\"/\");\n if (\n !mutable rootGroup ||\n mutable rootGroup?.store?.url !== zarrBaseURL ||\n mutable rootGroup?.path !== zarrRootDirName\n ) {\n mutable rootGroup = await initializeZarrStore(\n zarrBaseURL,\n zarrRootDirName,\n \"r\"\n );\n }\n const imageItem_X = await mutable rootGroup.getItem(`${group}/X`);\n const imageItem_y = await mutable rootGroup.getItem(`${group}/y`);\n const { data: imageData } = await imageItem_X.get([index]);\n const imageLabel = await imageItem_y.get([index]);\n return {\n data: imageData,\n label: imageLabel\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"mutable rootGroup = undefined","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"