2d:null 2e:["$","title",null,{"children":"seam carving algorithm | Curtis Hu | Observable"}] 33:T471,seamCarveMulti = { let workCanvas = document.createElement("canvas"); workCanvas.width = img.width; workCanvas.height = img.height; workCanvas.getContext("2d").drawImage(img, 0, 0); const { dp, backtrack, w, h } = dpEnergyMapX; const ctx = workCanvas.getContext("2d"); const outData = ctx.getImageData(0, 0, w, h); const src = outData.data; const newCanvas = document.createElement("canvas"); newCanvas.width = w; newCanvas.height = h; let lastRow = tf.tensor1d(dp[h - 1]); const { values, indices } = tf.topk(lastRow.neg(), numCarves); let minIdxs = await indices.data(); console.log(minIdxs); for (let i = 0; i < numCarves; i++) { const seam = new Int32Array(h); seam[h - 1] = minIdxs[i]; for (let y = h - 2; y >= 0; y--) { seam[y] = backtrack[y + 1][seam[y + 1]]; const s = (y * w + seam[y]) * 4; src[s] = 255; src[s + 1] = 0; src[s + 2] = 0; src[s + 3] = 255; } } newCanvas.getContext("2d").putImageData(outData, 0, 0); workCanvas = newCanvas; workCanvas.style.width = "100%"; workCanvas.style.height = "auto"; return workCanvas; }34:T597,croppedImage = { let workCanvas = document.createElement("canvas"); workCanvas.width = img.width; workCanvas.height = img.height; workCanvas.getContext("2d").drawImage(img, 0, 0); const { dp, backtrack, w, h } = dpEnergyMapX; const ctx = workCanvas.getContext("2d"); const inData = ctx.getImageData(0, 0, w, h); const srcBuffer = Array.from(inData.data); const outCanvas = document.createElement("canvas"); const newW = w - numCarves; outCanvas.width = newW; outCanvas.height = h; const outCtx = outCanvas.getContext("2d"); const outData = outCtx.createImageData(newW, h); const dst = outData.data; let lastRow = tf.tensor1d(dp[h - 1]); const { values, indices } = tf.topk(lastRow.neg(), numCarves); let minIdxs = await indices.data(); // cut out var lastSeam = minIdxs; for (let i = 0; i < numCarves; i++) srcBuffer.splice(lastSeam[i], 4); for (let y = h - 2; y >= 0; y--) { for (let i = 0; i < numCarves; i++) { var curSeamIdx = backtrack[y + 1][lastSeam[i]]; const s = (y * w + curSeamIdx) * 4; srcBuffer.splice(s, 4); lastSeam[i] = curSeamIdx; } } console.log(dst, srcBuffer); dst.set(Uint8ClampedArray.from(srcBuffer)); outCanvas.getContext("2d").putImageData(outData, 0, 0); workCanvas = outCanvas; workCanvas.style.width = "100%"; workCanvas.style.maxWidth = "600px"; workCanvas.style.height = "auto"; return workCanvas; }35:[{"id":"6d5b910c4ee1d4699452f8332eb0bda629a604bc96ef59209768ebb6fe272c73d00c789f38f602e44a228c10fa2a266c81174ca2bec3dd2bf01cd513ec866e2b","href":"https://static.observableusercontent.com/files/6d5b910c4ee1d4699452f8332eb0bda629a604bc96ef59209768ebb6fe272c73d00c789f38f602e44a228c10fa2a266c81174ca2bec3dd2bf01cd513ec866e2b","name":"dali.jpg","type":"image/jpeg","lastModified":1787202078012.231,"size":649873}] 31:{"id":"e54af95b70862c59","slug":"seam-carving","title":"seam carving algorithm","thumbnail":"a3b00d66d232d848dd3a7342c081dc3e21caebb5f5defbc8bc88a852b2e03ae3","access_level":"public","create_time":"$D2026-08-20T04:31:16.325Z","update_time":"$D2026-08-23T03:07:40.663Z","view_time":null,"first_public_time":"$D2026-08-23T00:46:38.920Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"36cfebe167a11b5a","login":"funnyscar","name":"Curtis Hu","avatar_url":"https://avatars-next.observableusercontent.com/cdb5df3e81197abbd70071762afd3bc6ec02b38df2002063eeea64175f5f7f6a","tier":"starter_2024"},"version":314,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ec92543f06de6b54","login":"funnyscar","name":"Curtis Hu","avatar_url":"https://avatars-next.observableusercontent.com/cdb5df3e81197abbd70071762afd3bc6ec02b38df2002063eeea64175f5f7f6a","tier":null}],"members":[{"type":"individual","id":"ec92543f06de6b54","login":"funnyscar","name":"Curtis Hu","avatar_url":"https://avatars-next.observableusercontent.com/cdb5df3e81197abbd70071762afd3bc6ec02b38df2002063eeea64175f5f7f6a","tier":null,"role":"editor"},{"type":"team","id":"36cfebe167a11b5a","login":"funnyscar","name":"Curtis Hu","avatar_url":"https://avatars-next.observableusercontent.com/cdb5df3e81197abbd70071762afd3bc6ec02b38df2002063eeea64175f5f7f6a","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"748f703ce0299083","slug":"done","title":"fun","owner":{"id":"36cfebe167a11b5a","login":"funnyscar","name":"Curtis Hu"}},"type":"notebook","body":{"title":"seam carving algorithm","cells":[{"id":0,"value":"# seam carving algorithm \n\nThis is an oldie algorithm","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":190,"value":"Upload your custom image or use the default image provided!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"viewof file_ = Inputs.file({ label: \"Custom Image\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"file = file_ ?? FileAttachment(\"dali.jpg\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"Broken into [0,255] pixels. Into HTML canvas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":176,"value":"img = {\n const img = new Image();\n img.crossOrigin = \"anonymous\";\n img.src = await file.url();\n await img.decode();\n const canvas = document.createElement(\"canvas\");\n canvas.width = img.width;\n canvas.height = img.height;\n canvas.style.width = \"100%\";\n canvas.style.height = \"auto\";\n canvas.style.maxWidth = \"600px\";\n const ctx = canvas.getContext(\"2d\");\n ctx.drawImage(img, 0, 0);\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"From this, we'll create an energy map, which for use is just a pass with the sobel operator in the X direction for now. There are other methods out there.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":203,"value":"tf = require(\"@tensorflow/tfjs@latest\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"energy_map = {\n const d = tf.browser.fromPixels(img, 1).toFloat().div(255);\n\n const gxKernel = tf.tensor4d(\n [-1, 0, 1, -2, 0, 2, -1, 0, 1],\n [3, 3, 1, 1] // (h, w, in, out)\n );\n const gyKernel = tf.tensor4d([-1, -2, -1, 0, 0, 0, 1, 2, 1], [3, 3, 1, 1]);\n\n const input = d.expandDims(0); // (batch, h, w, 1)\n\n const gx = tf.conv2d(input, gxKernel, 1, \"same\"); // convolve in one\n const gy = tf.conv2d(input, gyKernel, 1, \"same\"); // convolve in the other\n\n // combine for total magnitude \"edge\"\n const magnitude = tf.sqrt(tf.add(tf.square(gx), tf.square(gy)));\n\n // remove batch dimension, turn into 0, 255 values.\n const normalized = magnitude.squeeze().clipByValue(0, 1).mul(255);\n\n return normalized;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"sobelCanvas = {\n const canvas = document.createElement(\"canvas\");\n const displayTensor = energy_map.toInt().expandDims(2); // back to [h, w, 1] for toPixels\n await tf.browser.toPixels(displayTensor, canvas);\n canvas.style.width = \"100%\";\n canvas.style.maxWidth = \"600px\";\n canvas.style.height = \"auto\";\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"dpEnergyMapX = {\n const h = energy_map.shape[0];\n const w = energy_map.shape[1];\n const energy = await energy_map.array(); // 2D JS array [h][w]\n\n const dp = Array.from({ length: h }, () => new Float32Array(w));\n const backtrack = Array.from({ length: h }, () => new Int32Array(w));\n\n // first row = energy as-is\n for (let x = 0; x < w; x++) dp[0][x] = energy[0][x];\n\n for (let y = 1; y < h; y++) {\n for (let x = 0; x < w; x++) {\n let minPrev = dp[y - 1][x];\n let minX = x;\n if (x > 0 && dp[y - 1][x - 1] < minPrev) {\n minPrev = dp[y - 1][x - 1];\n minX = x - 1;\n }\n if (x < w - 1 && dp[y - 1][x + 1] < minPrev) {\n minPrev = dp[y - 1][x + 1];\n minX = x + 1;\n }\n dp[y][x] = energy[y][x] + minPrev;\n backtrack[y][x] = minX;\n }\n }\n\n return { dp, backtrack, w, h };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"dpEnergyMapXCanvas = {\n const { dp, backtrack, w, h } = dpEnergyMapX;\n\n // flatten dp (array of arrays) to flat array\n const flat = new Float32Array(w * h);\n for (let y = 0; y < h; y++) {\n for (let x = 0; x < w; x++) {\n flat[y * w + x] = dp[y][x];\n }\n }\n\n const dpTensor = tf.tensor2d(flat, [h, w]);\n\n // normalize to 0-255 for display\n const minVal = dpTensor.min();\n const maxVal = dpTensor.max();\n const normalized = dpTensor.sub(minVal).div(maxVal.sub(minVal)).mul(255);\n\n const canvas = document.createElement(\"canvas\");\n const displayTensor = normalized.toInt().expandDims(2); // back to [h, w, 1] for toPixels\n await tf.browser.toPixels(displayTensor, canvas);\n canvas.style.width = \"100%\";\n canvas.style.maxWidth = \"600px\";\n canvas.style.height = \"auto\";\n dpTensor.dispose();\n minVal.dispose();\n maxVal.dispose();\n normalized.dispose();\n displayTensor.dispose();\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"viewof numCarves = Inputs.number({\n label: \"# of seam carves\",\n step: 1,\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"### citations\n\n- 2007 SIGGRAPH paper by Avidan and Shamir (\"Seam Carving for Content-Aware Image Resizing\").","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"