pixel flipper, data sifter. trying to see what I can while I'm here
result
formData = {
let version = "68f699d395bc7c17008283a7cef6d92edc832d8dc59eb41a6cafec7fc70b85bc";
return {
version: version,
input: {
prompt: form.pos,
negative_prompt: form.neg,
num_inference_steps: 20,
scheduler: "K_EULER_ANCESTRAL",
input_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)
}
blobify = (canvas) => {
return new Promise((resolve, reject) => {
canvas.toBlob((blob) => {
resolve(blob)
}, 'image/png')
})
}
canvasImage = resizeToCanvas(url)
url = form.init_image ? await form.init_image.url() : await FileAttachment("dog_cat.jpeg").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.