31:T8c3,// viewof set = { function setChooser(tsneWidth, tsneHeight) { var el = DOM.svg(tsneWidth,tsneHeight) var svg = d3.select(el) let xscale = d3.scaleLinear() .domain([tsneMeta.xextent[0]*1.1, tsneMeta.xextent[1]*1.1]) .range([0, tsneWidth]) let yscale = d3.scaleLinear() .domain([tsneMeta.yextent[0]*1.1, tsneMeta.yextent[1]*1.1]) .range([0, tsneHeight]) svg.append("image").attr("href", tsneImage) .attr("width", tsneWidth).attr("height", tsneHeight) svg.append("text").classed("set", true) .attr("transform", `translate(${tsneWidth - 200},20)`) .style("fill", "#fff") .style("font-family", "Roboto Mono, Courier New") .style("font-size", 10) var rw = (xscale(hits[0].r) - xscale(0))*2 - 2 svg.selectAll("rect.hit").data(hits) .enter().append("rect").classed("hit", true) // .attr("r", function(d) { return xscale(d.r) - xscale(0) }) .attr("x", function(d) { return xscale(d.x) - rw/2 }) .attr("y", function(d) { return yscale(d.y) - rw/2 }) .attr("width", function(d) { return rw }) .attr("height", function(d) { return rw }) // .attr("cx", function(d) { return xscale(d.x) }) // .attr("cy", function(d) { return yscale(d.y) }) .style("fill", "steelblue") .style("stroke", "steelblue") .style("stroke-width", 1) .style("fill-opacity", 0.2) .style("stroke-opacity", 0.4) .style("cursor", "pointer") .on("click", function(event, d) { el.value = d.set el.dispatchEvent(new CustomEvent("input")) el.dispatchEvent(new CustomEvent("input")) svg.selectAll("rect.hit") .style("fill-opacity", 0.2) .style("stroke-opacity", 0.4) .style("stroke-width", 1) .style("stroke", "steelblue") d3.select(this) .style("fill-opacity", 0.4) .style("stroke-opacity", 1) .style("stroke-width", 2) .style("stroke", "lightblue") }) .on("mouseover", function(event, d) { d3.select("text.set").text(d.set) }) svg.selectAll("rect.hit").filter(function(d) { return d === hits[0] }) .style("fill-opacity", 0.4) .style("stroke-opacity", 1) .style("stroke-width", 1) .style("stroke", "lightblue") el.value = hits[0].set return el }32:Tb80,// viewof chosen = { drawingChooser = function(drawings, w) { let drawingLine = d3.line() .x(function(d) { return d.x }) .y(function(d) { return d.y }) .curve(d3.curveBasis) // console.log("filtered", filtered.length) var size = 40 var cols = Math.floor(w/size) - 1; var filtered = drawings.slice(0, cols * cols) var scale = size/300 var h = filtered.length/cols * size + size * 2 var el = DOM.svg(w, h); var svg = d3.select(el) var g = svg.append("g").attr("transform", "translate(0, 0)") var positioned = filtered.map(function(d,i) { var x = size/2 + (i % cols) * size var y = size/2 + Math.floor(i/cols) * size var strokes = center(d.strokes,size,size,scale * 1.15) strokes.forEach(function(s) { s.nstrokes = strokes.length s.recognized = d.recognized }) return { x: x, y: y, i: i, data: d, strokes: strokes } }) var strokecolor = function(t) { return d3.interpolatePurples((1 - t) * 0.6 + 0.4) } var unreccolor = function(t) { return d3.interpolateReds((1 - t) * 0.6 + 0.4) } var bgs = g// .selectAll("g.drawing") .data(positioned) .enter().append("g").classed("drawing", true) bgs.attr("transform", function (d, i) { return "translate(" + [d.x, d.y] + ")"; }) .style("stroke-width", function (d) { return 0.75; }); // for collision detection bgs.append("rect").attr("width", size).attr("height", size).style("fill", "#fff") .style("fill-opacity", 0) .style("stroke", "none") bgs.selectAll("path.stroke").data(function(d) { return d.strokes }) .enter().append("path").classed("stroke", true) .attr("d", drawingLine) .style("fill", "none") .style("stroke-linecap", "round") .style("pointer-events", "all") .style("stroke", function(d,i) { if(d.recognized) return strokecolor(i/d.nstrokes) return unreccolor(i/d.nstrokes) }) bgs .on("click", function(evt, d) { choose(d.data) }) .on("mouseover", function(evt, d) { d3.select(this).style("stroke-width", 1.5) }) .on("mouseout", function(evt, d) { d3.select(this).style("stroke-width", 0.75) }) function choose(d) { console.log("chose", d) el.value = d el.dispatchEvent(new CustomEvent("input")) el.dispatchEvent(new CustomEvent("input")) g.selectAll("g.drawing").selectAll("path.stroke") .style("stroke", function(d,i) { if(d.recognized) return strokecolor(i/d.nstrokes) return unreccolor(i/d.nstrokes) }) g.selectAll("g.drawing") .style("stroke-width", 0.75) .filter(function(f) { return f.data == d }) .selectAll("path.stroke") .style("stroke", "#26a69a") .style("stroke-width", 2) } choose(drawings[0]) //.filter(function(d) { return !d.recognized }) // .style("stroke", "#444") return el }33:T4b0,/* Center and rescale the strokes of a quickdraw drawing */ function center(strokes, width, height, scale) { var minY = Infinity var maxY = -Infinity var minX = Infinity var maxX = -Infinity var centroidX = 0 var centroidY = 0 var count = 0 var newstrokes = [] strokes.forEach(function(stroke) { stroke.forEach(function(p) { centroidX += p.x centroidY += p.y count++ }) }) centroidX /= count; centroidY /= count; strokes.forEach(function(stroke) { var newstroke = [] stroke.forEach(function(op) { var p = { x: op.x, y: op.y } p.x *= scale p.y *= scale p.x += width/2 - centroidX * scale p.y += height/2 - centroidY * scale if(p.y < minY) minY = p.y if(p.y > maxY) maxY = p.y if(p.x < minX) minX = p.x if(p.x > maxX) maxX = p.x newstroke.push(p) }) newstrokes.push(newstroke) }) var diffX = minX - (width - maxX) var diffY = minY - (height - maxY) newstrokes.forEach(function(stroke) { stroke.forEach(function(p) { p.x -= diffX/2 p.y -= diffY/2 }) }) return newstrokes } 34:T83e,async function pipe(...args) { // this map will go from child to container const containers = new Map(); // set up child containers const container = html`

${style} ${args.map(arg => { const node = html`

` containers.set(arg, node) return node })}`; // render children from `index` forward, starting with `value` // (which will be re-set by each next child) async function render(index, value) { for (const arg of args.slice(index)) { let node; // if child is a function, call it with the last child's value; // if it's a DOM node, render it; // if it's something else, wrap in a DOM node and render if (typeof arg === "function") { const v = await arg(value); if (v instanceof Node) { node = v } else { node = Object.assign(html`${arg.label || "f"}`, {value: v}) } } else if (arg instanceof Node) { node = arg } else { node = html`

${arg}`; } // when a child emits an input event, re-run every child to the right of it with the new value node.addEventListener("input", e => { // console.log("event listener", e, args.indexOf(arg) + 1, node.value) render(args.indexOf(arg) + 1, node.value) }); // remove the old version of this child, if any, and add the new one const parent = containers.get(arg) if (parent.firstChild) parent.removeChild(parent.firstChild); parent.append(node); // if this child has some value, pass it along to the next child // if this child doesnt implement value, pass through last value if(node.value !== undefined) value = node.value; } // set final value on root container and dispatch input event, // so that the whole thing can participate in observable dataflow // console.log("new value who dis?", value) container.dispatchEvent(new CustomEvent("input")); container.value = value; } // initialize await render(0) return container }35:[] 2f:{"title":"QuickDraw to ControlNet Scribble","cells":[{"id":0,"value":"# QuickDraw to ControlNet Scribble\n* [Machine Learning for Visualization](https://medium.com/@enjalot/machine-learning-for-visualization-927a9dff1cab) article explaining using the latent space of SketchRNN to explore [QuickDraw data](https://quickdraw.withgoogle.com/data)\n* [jagilley/controlnet-scribble API](https://replicate.com/jagilley/controlnet-scribble)\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":962,"value":"viewof word = Inputs.select(words, { label: \"Choose a word\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1033,"value":"viewof drawing = await pipe(setChooser(width/2 - 20, width/2 - 20), (set) => {\n return fetch(`https://storage.googleapis.com/quickdraw-data/words/grid-${word}/${set}`)\n .then(response => response.json())\n .then(samples => samples.map(strokifyDrawing))\n .then(drawings => drawingChooser(drawings, width/2 - 20))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1094,"value":"render(drawing.strokes, 512)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1019,"value":"drawing","pinned":false,"hidden":false,"mode":"ojs"},{"id":828,"value":"viewof form = Inputs.form({\n pos: Inputs.textarea({\n label: \"Positive prompt\", \n value: `a photo of a ${word}`\n }),\n neg: Inputs.textarea({\n label: \"Negative prompt\", \n value: `longbody, lowres, bad anatomy, bad hands, missing fingers, extra digit, fewer digits, cropped, worst quality, low quality`\n }),\n scale: Inputs.range([0.1, 30], { label: \"scale\", value: 8, step: 0.1}),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"viewof submitter = Inputs.button(\"Submit\", { value: null, reduce: () => formData})","pinned":false,"hidden":false,"mode":"ojs"},{"id":740,"value":"

\n ${result && !result.completed_at ? spinner({\n style: \"\",\n size: 140,\n class: \"\"\n }) : result ? htl.html`

` : \"Click Submit to render with ControlNet\"}\n

\n ${result && !result.completed_at ? spinner({\n style: \"\",\n size: 140,\n class: \"\"\n }) : result ? htl.html`

` : \"\"}\n

","pinned":false,"hidden":false,"mode":"html"},{"id":879,"value":"result","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"// this is my work account dreamstudio key...\nviewof apiKey = Inputs.text({label: \"Replicate API key\", value: \"428a4b368f6f3ecbcc5d8e9026f21e1e0725dcf8\", width: 420})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1197,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":206,"value":"### Inputs to API\nWe turn the above form inputs into a [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object which we will then be able to submit to the API.\n\nKey functionality around processing the image is detailed in the section below this.","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"formData = {\n return {\n version: \"435061a1b5a4c1e26740464bf786efdfa9cb3a3ac488595a2de23e143fdb0117\",\n input: {\n prompt: form.pos,\n n_prompt: form.neg,\n ddim_steps: 20,\n scale: form.scale,\n image_resolution: '512',\n image: await render(drawing.strokes, 512).toDataURL()\n // image: canvasImage.toDataURL()\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":411,"value":"### The fetch request\nWe compose the fetch request with our form data. We take advantage of Observable Generator magic to let us show a loading state.","pinned":false,"hidden":false,"mode":"md"},{"id":598,"value":"predict = {\n return submit(submitter)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":595,"value":"submit = function* (formData) { \n if(!formData) return null;\n // Observable specific thing\n yield null;\n\n yield fetch(`https://corsproxy.io/?` + encodeURIComponent(`https://api.replicate.com/v1/predictions`), {\n // yield fetch(`https://api.replicate.com/v1/predictions`, {\n method: 'POST',\n headers: {\n 'Authorization': `Token ${apiKey}`,\n // DO NOT set content-type, prevents browser from setting an important boundary property\n // 'Content-Type': 'multipart/form-data',\n 'Accept': \"application/json\",\n },\n // body: formData\n body: JSON.stringify(formData)\n })\n .then(response => {\n if(response.status !== 200) {\n return response.json()\n }\n return response.json()\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":812,"value":"The way the Replicate API works is that it gives you back a unique url that you can use to poll on the status of your model run. So we check every 500ms and if its completed we can use the output.","pinned":false,"hidden":false,"mode":"md"},{"id":769,"value":"result = {\n let data = predict\n\n yield null\n // request every half second until its completed\n while(data && !data.completed_at && data.created_at && !data.error) {\n // console.log(\"in the loop\", data)\n if(!predict.urls) {\n yield Promises.delay(500, {})\n continue\n }\n \n yield Promises.delay(500, replicatePrediction(predict.urls.get).then(response => {\n data = response\n return data\n }))\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":759,"value":"function replicatePrediction(url) {\n let predictionOptions = {\n method: \"get\",\n headers: {\n Authorization: 'Token ' + apiKey,\n 'Content-Type': 'application/json'\n }\n }\n \n return d3.json(`https://corsproxy.io/?` + encodeURIComponent(url), predictionOptions)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"## Using HTML5 Canvas\n","pinned":false,"hidden":false,"mode":"md"},{"id":945,"value":"This function creates an interactive drawing canvas.","pinned":false,"hidden":false,"mode":"md"},{"id":943,"value":"When we just want to render the strokes that were drawn by the input image.","pinned":false,"hidden":false,"mode":"md"},{"id":1120,"value":"render(drawing.strokes, 512)","pinned":true,"hidden":false,"mode":"ojs"},{"id":922,"value":"function render(strokes, size) {\n let w = size;\n let h = size;\n let canvas = DOM.canvas(w, h);\n let context = canvas.getContext(\"2d\");\n // we collect our strokes here and dispatch\n let strokeWidth = 5;\n let scale = size/300\n\n context.lineCap = \"round\";\n context.lineJoin = \"round\";\n\n context.clearRect(0, 0, canvas.width, canvas.height);\n context.lineWidth = strokeWidth * 2;\n\n context.strokeStyle = \"black\";\n\n let centered = center(strokes,size,size,scale * .85) \n centered.forEach((stroke) => {\n // draw the dots\n // stroke.forEach(p => {\n // context.beginPath()\n // context.arc(p[0], p[1], strokeWidth, 0, Math.PI * 2)\n // context.fill()\n // })\n // connect the dots\n context.beginPath();\n context.moveTo(stroke[0].x, stroke[0].y);\n stroke.slice(1).forEach((p) => context.lineTo(p.x, p.y));\n context.stroke();\n });\n\n canvas.style.border = \"solid 1px #ccc\";\n canvas.style.cursor = \"crosshair\";\n\n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1161,"value":"We create an interface that lets you choose sets of drawings from the latent space","pinned":false,"hidden":false,"mode":"md"},{"id":1158,"value":"viewof chosenSet = setChooser(500, 500)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1215,"value":"chosenSet","pinned":true,"hidden":false,"mode":"ojs"},{"id":975,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1156,"value":"We create an interface that lets you choose from the drawings in a selected set:","pinned":false,"hidden":false,"mode":"md"},{"id":991,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"blobify = (canvas) => {\n return new Promise((resolve, reject) => {\n canvas.toBlob((blob) => {\n resolve(blob)\n }, 'image/png')\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":957,"value":"## QuickDraw setup","pinned":false,"hidden":false,"mode":"md"},{"id":959,"value":"words = [\n \"ant\",\n \"alarm_clock\",\n \"bee\", \n \"bear\",\n \"bicycle\",\n \"bird\", \n \"book\",\n \"bulldozer\",\n \"bus\",\n \"cat\", \n \"chair\",\n \"dog\",\n \"duck\",\n \"castle\",\n \"eye\",\n \"face\",\n \"fan\",\n \"flamingo\",\n \"flower\",\n \"frog\",\n \"garden\",\n \"hand\",\n \"octopus\",\n \"owl\",\n \"penguin\",\n \"pig\",\n \"paintbrush\",\n \"power_outlet\",\n \"skull\",\n \"snail\",\n \"snowflake\",\n \"tiger\",\n \"toothpaste\",\n \"truck\",\n \"yoga\", \n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":973,"value":"sets = (await fetch(`https://storage.googleapis.com/quickdraw-data/words/grid-${word}/files-${word}.json`)).json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":986,"value":"hits = {\n return sets.filter(function(d) { return d.indexOf(word) == 0 })\n .map(function(d) {\n var stripped = d.replace('.json', '').replace(word, \"\")\n return {\n set: d,\n x: +stripped.split(\"_\")[1],\n y: +stripped.split(\"_\")[2],\n r: +stripped.split(\"_\")[3]\n }\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":977,"value":"tsneImage = `https://storage.googleapis.com/quickdraw-data/images/tsne-${word}.png`","pinned":true,"hidden":false,"mode":"ojs"},{"id":983,"value":"tsneMeta = (await fetch(`https://storage.googleapis.com/quickdraw-data/images/tsne-${word}-meta.json`)).json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":989,"value":"function strokifyDrawing(d) {\n var drawing = JSON.parse(JSON.stringify(d)) //well that's one way to copy\n var strokes = d.drawing.map(function(s) {\n var points = []\n s[0].forEach(function(x,i) {\n points.push({x: x, y: s[1][i] })\n })\n return points;\n })\n drawing.strokes = strokes;\n return drawing\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1000,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":369,"value":"## Appendix\nUseful imports from other notebooks","pinned":false,"hidden":false,"mode":"md"},{"id":187,"value":"import { loading as spinner } from \"@mateh/loading\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":365,"value":"import {textcolor} from \"@observablehq/text-color-annotations-in-markdown\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":460,"value":"// https://talk.observablehq.com/t/when-do-event-listeners-need-to-be-manually-removed/7160\n// this lets us cancel a fetch request if our cell's recalculate before the fetch is complete\nfunction toSignal(invalidation) {\n const controller = new AbortController;\n invalidation.then(() => controller.abort());\n return controller.signal;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1029,"value":"// import { pipe } from \"@tophtucker/pipe\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1047,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":1060,"value":"style = html``","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}