2a:null 2b:["$","title",null,{"children":"Drawings to Human | Hugging Face | Observable"}] 30:Ta57,viewof bushSelector = { const brush = document.createElement("canvas"); brush.style.pointerEvents = "none"; brush.width = 50; brush.height = 50; const ctx = brush.getContext("2d"); function setBrush(c, s) { s = s; ctx.clearRect(0, 0, brush.width, brush.height); ctx.beginPath(); ctx.fillStyle = c; ctx.arc(brush.width / 2, brush.height / 2, s / 2, 0, 2 * Math.PI); ctx.fill(); } const form = htl.html``; const color = COLOR_LIST[6].color; const size = 10; form.value = { color: `rgb(${color.join(",")})`, size: size }; setBrush(form.value.color, form.value.size); form.oninput = (e) => { e && e.preventDefault(); const selectedId = [...form.colors].find((e) => e.checked).value; const size = parseInt(form.range.value); const color = COLOR_LIST[selectedId].color; form.value = { color: `rgb(${color.join(",")})`, size: size }; setBrush(form.value.color, form.value.size); canvas.setBrush(form.value.color, form.value.size); }; return form; }31:T54c,viewof sampleImage = { const form = htl.html`

Choose a template to start ${samples.map( (s, id) => htl.html.fragment`

` )}

`; form.value = {}; form.oninput = (e) => { e.preventDefault(); form.value = samples[e.target.value]; canvas.drawImage(form.value); }; return form; }32:T427,textureSelection = { const sections = [ "lower clothing texture", "upper clothing texture", "outer clothing texture" ]; const textures = [ "pure color", "stripe/spline", "plaid/lattice", "floral", "denim" ]; const form = htl.html` Select Texture Description ${sections.map( (section, i) => htl.html.fragment` ` )}

`; form.value = []; form.oninput = (event) => { form.value = [...form.elements].map((e) => e.value); }; return form; }33:Td38,canvas = { const clear = html``; const canvas = document.createElement("canvas"); const brush = document.createElement("canvas"); canvas.width = 256; canvas.height = 512; canvas.style.imageRendering = "pixelated"; canvas.style.width = "100%"; brush.style.position = "absolute"; brush.style.zIndex = 100; brush.style.transform = "translate(-50%,-50%)"; brush.style.pointerEvents = "none"; brush.hidden = true; const ctx = canvas.getContext("2d"); const brushctx = brush.getContext("2d"); const { width, height } = canvas; ctx.imageSmoothingEnabled = false; // ctx.scale(0.5, 0.5); window.devicePixelRatio = 1; const pxBrush = new PxBrush(canvas); canvas.style.width = "100%"; canvas.style.aspectRatio = "256/512"; canvas.style.maxWidth = "256px"; canvas.style.height = "unset"; let size = 10; let color = "#00000"; setBrush(color, size); ctx.rect(0, 0, width, height); ctx.fill(); function clearCanvas() { ctx.rect(0, 0, width, height); ctx.fill(); } function getPosition(canvas, event) { const rect = canvas.getBoundingClientRect(); return { x: (event.clientX - rect.left) * (canvas.width / rect.width), y: (event.clientY - rect.top) * (canvas.height / rect.height) }; } clear.onclick = () => clearCanvas(); let mouseDown = false; let startPosition = null; d3.select(canvas) .on("touchmove", (e) => e.preventDefault()) .on("pointerenter", (e) => { brush.hidden = false; }) .on("pointerup pointerleave pointercancel pointerout", (e) => { brush.hidden = true; mouseDown = false; }) .on("pointerdown", (e) => { mouseDown = true; startPosition = getPosition(canvas, e); pxBrush.draw({ from: startPosition, to: startPosition, size, color }); }) .on("pointermove", (e) => { const position = getPosition(canvas, e); d3.select(brush) .style("top", `${e.offsetY}px`) .style("left", `${e.offsetX}px`); if (!mouseDown) { return; } pxBrush.draw({ from: startPosition, to: position, size, color }); startPosition = position; }); function setBrush(c, s) { color = c; size = s; brush.width = size; brush.height = size; brushctx.clearRect(0, 0, brush.width, brush.height); brushctx.beginPath(); brushctx.fillStyle = c; brushctx.arc(size / 2, size / 2, size / 2, 0, 2 * Math.PI); brushctx.fill(); } const drawImage = (src) => { const img = new Image(); img.onload = function () { ctx.drawImage(img, 0, 0, width, height); }; img.src = src; }; const save = () => { // COLOR_LIST.forEach((c, i) => { // pxBrush.draw({ // from: { x: i * 1, y: height }, // to: { x: i * 1, y: height - 2 }, // size: 1, // color: `rgb(${c.color.join(",")})` // }); // }); return new Promise(async (resolve) => { await new Promise((resolve) => { requestAnimationFrame(resolve); }); canvas.toBlob(resolve, "png", 1.0); }); }; return Object.assign( htl.html`

${clear}

${canvas} ${brush}

`, { canvas, save, setBrush, drawImage } ); }34:T6d2,async function predict( base64Image, textureString, sampleSteps = 10, randomSeed ) { const session = nanoid(11); let hash, queue_position; let b = 0; mutable predictStatus = "Generating"; const controller = new AbortController(); invalidation.then(() => { controller.abort(); }); await fetch(API + "/api/queue/push/", { signal: controller.signal, headers: { "Content-Type": "application/json" }, method: "POST", body: JSON.stringify({ fn_index: 2, data: [base64Image, textureString, sampleSteps, randomSeed], action: "predict", session_hash: session }) }) .then(async (res) => { const data = await res.json(); ({ hash, queue_position } = data); }) .catch((err) => { console.log(err); }); let timeout = 0; let status, data; while (status !== "QUEUED" || status !== "PENDING") { try { const resp = await fetch(API + "/api/queue/status/", { signal: controller.signal, headers: { "Content-Type": "application/json" }, method: "POST", body: JSON.stringify({ hash: hash }) }); if (resp.status != 200) { break; } ({ status, data } = await resp.json()); if (status === "QUEUED") { mutable predictStatus = `Queue ${data}/${queue_position}`; } else if (status === "PENDING") { mutable predictStatus = "Pending"; } else if (status === "FAILED") { mutable predictStatus = "Failed"; break; } else if (status === "COMPLETE") { mutable predictStatus = "Complete"; break; } await Promises.delay(1000); } catch (error) { console.log(error); break; } } return data; }35:T489,COLOR_LIST = [ { color: [0, 0, 0], label: "background" }, { color: [255, 250, 250], label: "top" }, { color: [220, 220, 220], label: "outer" }, { color: [250, 235, 215], label: "skirt" }, { color: [255, 250, 205], label: "dress" }, { color: [211, 211, 211], label: "pants" }, { color: [70, 130, 180], label: "leggings" }, { color: [127, 255, 212], label: "headwear" }, { color: [0, 100, 0], label: "eyeglass" }, { color: [50, 205, 50], label: "neckwear" }, { color: [255, 255, 0], label: "belt" }, { color: [245, 222, 179], label: "footwear" }, { color: [255, 140, 0], label: "bag" }, { color: [255, 0, 0], label: "hair" }, { color: [16, 78, 139], label: "face" }, { color: [144, 238, 144], label: "skin" }, { color: [50, 205, 174], label: "ring" }, { color: [50, 155, 250], label: "wrist wearing" }, { color: [160, 140, 88], label: "socks" }, { color: [213, 140, 88], label: "gloves" }, { color: [90, 140, 90], label: "necklace" }, { color: [185, 210, 205], label: "rompers" }, { color: [130, 165, 180], label: "earrings" }, { color: [225, 141, 151], label: "tie" } ].sort((a, b) => (b.label > a.label ? -1 : 1))36:[{"id":"200aaaa7544c10c978acfe4f7d48bb32af78cdc4c81ef0cad6f242972183a26409fb50b63d355e51bb88d039d482662a6acf8899146a0dbf63f57f7f0afe2dc4","href":"https://static.observableusercontent.com/files/200aaaa7544c10c978acfe4f7d48bb32af78cdc4c81ef0cad6f242972183a26409fb50b63d355e51bb88d039d482662a6acf8899146a0dbf63f57f7f0afe2dc4","name":"samples@6.zip","type":"application/zip","lastModified":1658250314465.531,"size":45187}] 2e:{"id":"e1b697bfe5c5d136","slug":"drawings-to-human","title":"Drawings to Human","thumbnail":"f0fce3cc64fb0bf3d2c7b6db82e649bcb2c1d07858c943c2eec0c0c854786ae7","access_level":"public","create_time":"$D2022-06-28T04:14:34.709Z","update_time":"$D2022-10-25T20:06:52.666Z","view_time":null,"first_public_time":"$D2022-07-19T18:02:25.641Z","has_unpublished_edits":null,"fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"08f80506ae76fdf3","login":"huggingface","name":"Hugging Face","avatar_url":"https://avatars-next.observableusercontent.com/798cf3379d3840e4759a43470c74a7225fe5d81c88a08e763c446c93eff8797c","tier":"pro"},"version":1662,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"06bc2aaa9d8c4a54","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":null}],"members":[{"type":"individual","id":"bf1872cca880d345","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":null,"role":"editor"},{"type":"team","id":"08f80506ae76fdf3","login":"huggingface","name":"Hugging Face","avatar_url":"https://avatars-next.observableusercontent.com/798cf3379d3840e4759a43470c74a7225fe5d81c88a08e763c446c93eff8797c","tier":"pro","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"cc47632928450280","slug":"a-i-artificial-intelligence","title":"Artificial Intelligence","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"titling":"auto","title":"Drawings to Human","cells":[{"id":0,"value":"intro = {\n const t = md`# Drawings to Human\nThis is an unofficial drawing tool to explore the generative human generator [**Text2Human**](https://github.com/yumingj/Text2Human). This is the original prototype that was later converted to Svelte and published here [drawings-to-human](https://huggingface.co/spaces/CVPR/drawings-to-human)\n\n\n\n#### Thanks to \nAuthors: [Yuming Jiang](https://yumingj.github.io/), [Shuai Yang](https://williamyang1991.github.io/), [Haonan Qiu](http://haonanqiu.com/), [Wayne Wu](https://wywu.github.io/), [Chen Change Loy](https://www.mmlab-ntu.com/person/ccloy/) and [Ziwei Liu](https://liuziwei7.github.io/)
\n\n[@hysts](https://huggingface.co/hysts) for the original Space implementation\n\nThe backend is powered by a [Gradio](https://gradio.app/) application running on [Spaces](https://huggingface.co/spaces/CVPR/Text2Human). \n`;\n t.querySelectorAll(\"a\").forEach((n) => (n.target = \"_blank\"));\n\n return t;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":531,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":925,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":777,"value":"viewof generateButton = Inputs.button(\"Generate Human\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":1327,"value":"status = {\n if (predictStatus) {\n return html`\n ${predictStatus} \n`;\n }\n return md``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":1052,"value":"layout = htl.html`\n\n

${canvas}

${newHuman}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"savaImage = DOM.download(() => newHuman.blob, undefined, \"Save Image\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":1029,"value":"viewof newSeed = Inputs.button(\"New Seed\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":1472,"value":"viewof seed = {\n newSeed;\n const value = params.get(\"seed\") || Number(randomSeed());\n return Inputs.text({\n label: \"Seed\",\n value,\n placeholder: \"Integer Seed\",\n type: \"Number\",\n submit: true\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":825,"value":"mutable predictStatus = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"newHuman = {\n if (generateButton > 0) {\n const texture = [...textureSelection].map((e) => e.value).join(\", \");\n const res = await predict(\n canvas.canvas.toDataURL(),\n texture,\n 10,\n Number(seed)\n );\n console.log(res);\n const imgSrc = res.data[0];\n const img = html`

`;\n\n const blob = await fetch(imgSrc).then((res) => res.blob());\n img.blob = blob;\n return img;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":875,"value":"params = new URLSearchParams(location.search)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":885,"value":"function randomSeed() {\n return BigInt(13248873089935215612 & (((1 << 63) - 1) * Math.random()));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"API = \"https://radames-text2human-api.hf.space\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"PxBrush = (await require(\"px-brush\")).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"samples = {\n const zip = await FileAttachment(\"samples@6.zip\").zip();\n return Promise.all(\n zip.filenames.map((f) => zip.file(f).url()).sort(() => 0.5 - Math.random())\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"nanoid = import(\"nanoid/nanoid.js\").then((module) => module.nanoid)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 2f:"$2e:body"