pixel flipper, data sifter. trying to see what I can while I'm here
result
result.error
formData = {
return {
version: "cf58e3279848046acb6fdaae3c48e79129b4a60eda8b1506bf58b264bdf58832",
input: {
prompt: form.pos,
negative_prompt: form.neg,
model_checkpoint: "sd-v1-4",
type_in: "sketch",
num_inference_steps: 50,
guidance_scale: form.scale,
width: viewof input.width,
height: viewof input.height,
image: render(input).toDataURL()
// image: canvasImage.toDataURL()
}
}
}
predict = {
return submit(submitter)
}
submit = function* (formData) {
if(!formData) return null;
// Observable specific thing
yield null;
yield fetch(`https://corsproxy.io/?` + encodeURIComponent(`https://api.replicate.com/v1/predictions`), {
// yield fetch(`https://api.replicate.com/v1/predictions`, {
method: 'POST',
headers: {
'Authorization': `Token ${apiKey}`,
// DO NOT set content-type, prevents browser from setting an important boundary property
// 'Content-Type': 'multipart/form-data',
'Accept': "application/json",
},
// body: formData
body: JSON.stringify(formData)
})
.then(response => {
if(response.status !== 200) {
return response.json()
}
return response.json()
})
}
result = {
let data = predict
yield null
// request every half second until its completed
while(data && !data.completed_at && data.created_at && !data.error) {
// console.log("in the loop", data)
if(!predict.urls) {
yield Promises.delay(500, {})
continue
}
yield Promises.delay(500, replicatePrediction(predict.urls.get).then(response => {
data = response
return data
}))
}
}
function replicatePrediction(url) {
let predictionOptions = {
method: "get",
headers: {
Authorization: 'Token ' + apiKey,
'Content-Type': 'application/json'
}
}
return d3.json(`https://corsproxy.io/?` + encodeURIComponent(url), predictionOptions)
}
drawing = function() {
let w = canvasImage.width
let h = canvasImage.height
let canvas = DOM.canvas(w, h);
let context = canvas.getContext("2d");
// we collect our strokes here and dispatch
let strokes = canvas.value = []
let fg = "white";
let bg = "black";
let stroke;
let time;
let newtime;
let strokeWidth = 5;
canvas.value.strokeWidth = strokeWidth
context.lineCap = "round"
context.lineJoin = "round"
canvas.onmousedown = event => {
stroke = []
time = +new Date()
strokes.push(stroke)
canvas.onmousemove(event);
};
canvas.onmouseup = event => {
stroke = null;
};
canvas.onwheel = function(event) {
strokeWidth *= 1 + event.wheelDelta / 10000;
event.preventDefault();
canvas.value.strokeWidth = strokeWidth
canvas.dispatchEvent(new CustomEvent("input"));
render()
// update the cursor
var rect = canvas.getBoundingClientRect();
let ex = event.clientX - rect.left - 2
let ey = event.clientY - rect.top - 1
context.strokeStyle = fg
context.lineWidth = 1
context.beginPath()
context.arc(ex, ey, strokeWidth, 0, Math.PI * 2)
context.stroke()
context.strokeStyle = bg
context.lineWidth = 1
context.beginPath()
context.arc(ex, ey, strokeWidth - 1, 0, Math.PI * 2)
context.stroke()
}
canvas.onmousemove = event => {
var rect = canvas.getBoundingClientRect();
let ex = event.clientX - rect.left - 2
let ey = event.clientY - rect.top - 1
if (stroke != null) {
newtime = +new Date();
stroke.push([ex, ey, newtime - time]);
canvas.dispatchEvent(new CustomEvent("input"));
time = newtime;
}
render()
// update the cursor
context.strokeStyle = fg
context.lineWidth = 1
context.beginPath()
context.arc(ex, ey, strokeWidth, 0, Math.PI * 2)
context.stroke()
context.strokeStyle = bg
context.lineWidth = 1
context.beginPath()
context.arc(ex, ey, strokeWidth - 1, 0, Math.PI * 2)
context.stroke()
};
function render() {
context.fillStyle = bg;
context.fillRect(0, 0, canvas.width, canvas.height);
if(!strokes.length)
context.drawImage(canvasImage, 0, 0);
context.lineWidth = strokeWidth * 2;
context.strokeStyle = fg
strokes.forEach(stroke => {
// draw the dots
// stroke.forEach(p => {
// context.beginPath()
// context.arc(p[0], p[1], strokeWidth, 0, Math.PI * 2)
// context.fill()
// })
// connect the dots
context.beginPath();
context.moveTo(stroke[0][0], stroke[0][1]);
stroke.slice(1).forEach(p => context.lineTo(p[0], p[1]));
context.stroke();
})
}
// we reference the "value" of our clear button so that this block reevaluates
// when it changes. even tho a button by default doesn't really have a value the event
// still triggers a reevaluation, effectively clearing the canvas
canvas.clear = function() {
strokes = canvas.value = []
strokes.strokeWidth = strokeWidth
canvas.dispatchEvent(new CustomEvent("input"));
render()
}
canvas.style.border = "solid 1px #ccc";
canvas.style.cursor = "crosshair"
render();
return canvas;
}
function render(strokes) {
let w = canvasImage.width;
let h = canvasImage.height;
let canvas = DOM.canvas(w, h);
let context = canvas.getContext("2d");
// we collect our strokes here and dispatch
let fg = "white";
let bg = "black";
let stroke;
let time;
let newtime;
let strokeWidth = strokes.strokeWidth;
context.lineCap = "round";
context.lineJoin = "round";
context.fillStyle = bg;
context.fillRect(0, 0, canvas.width, canvas.height);
if (!strokes.length) context.drawImage(canvasImage, 0, 0);
context.lineWidth = strokeWidth * 2;
context.strokeStyle = fg;
strokes.forEach((stroke) => {
// draw the dots
// stroke.forEach(p => {
// context.beginPath()
// context.arc(p[0], p[1], strokeWidth, 0, Math.PI * 2)
// context.fill()
// })
// connect the dots
context.beginPath();
context.moveTo(stroke[0][0], stroke[0][1]);
stroke.slice(1).forEach((p) => context.lineTo(p[0], p[1]));
context.stroke();
});
canvas.style.border = "solid 1px #ccc";
canvas.style.cursor = "crosshair";
return canvas;
}
blobify = (canvas) => {
return new Promise((resolve, reject) => {
canvas.toBlob((blob) => {
resolve(blob)
}, 'image/png')
})
}
canvasImage = resizeToCanvas(url)
url = inputImage ? await inputImage.url() : await FileAttachment("carsketch.png").url()
async function resizeToCanvas(url, scale = 1) {
let img = new Image();
img.crossOrigin = '*';
img.src = url;
await new Promise(resolve => img.addEventListener('load', resolve));
let w = img.width
let h = img.height
// resize the image appropriately
let f = factorize(w, h, 512)
let sw = Math.floor(f.width * scale)
let sh = Math.floor(f.height * scale)
let ctx = DOM.canvas(sw, sh).getContext('2d');
ctx.drawImage(img, 0, 0, sw, sh);
ctx.canvas.originalWidth = img.width
ctx.canvas.originalHeight = img.height
return ctx.canvas;
}
function factorize(w, h, target) {
// target should be power of 2 probably, like 512 or 1024
let factor = target / Math.max(w, h)
factor = Math.ceil(Math.min(w, h) * factor / 64) * 64 / Math.min(w, h)
w = Math.floor((w * factor) / 64) * 64
h = Math.floor((h * factor) / 64) * 64
return { width: w , height: h }
}
f = factorize(sampleWidth, sampleHeight, factor)
cf = factorize(canvasImage.originalWidth, canvasImage.originalHeight, factor)
import { loading as spinner } from "@mateh/loading"
import {textcolor} from "@observablehq/text-color-annotations-in-markdown"
// https://talk.observablehq.com/t/when-do-event-listeners-need-to-be-manually-removed/7160
// this lets us cancel a fetch request if our cell's recalculate before the fetch is complete
function toSignal(invalidation) {
const controller = new AbortController;
invalidation.then(() => controller.abort());
return controller.signal;
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.