// - models/checkpoints/sd_xl_base_1.0.safetensors

// - models/controlnet/t2i-adapter-depth-midas-sdxl-1.0.fp16.safetensors

// to be available on the ComfyUI server

​

let workflow;

let comfy;

let srcImg;

let resImg;

let angle = 0;

let radius = 100;

​

function preload() {

  workflow = loadJSON("workflow_api.json");

}

​

function setup() {

  createCanvas(512, 512);

  pixelDensity(2); // SDXL operates on 1024x1024

​

  srcImg = createGraphics(width, height);

  srcImg.background(0);

​

  comfy = new ComfyUiP5Helper("https://gpu1.gohai.xyz:8188/");

  console.log("workflow is", workflow);

​

  let button = createButton("start generating");

  button.mousePressed(requestImage);

}

​

function requestImage() {

  // replace the LoadImage node with our source image

  workflow[20] = comfy.image(srcImg);

​

  // we could change the random seed here, which determines the

  // noisy latent the generation starts out from

  //workflow[3].inputs.seed = random(9999999);

​

  // and also control the textual prompt

  //workflow[24].inputs.text = "red billard ball, reflection, uniform dark green felt background";

​

  comfy.run(workflow, gotImage);

}

​

function gotImage(data, err) {

  // data is an array of outputs from running the workflow

  console.log("gotImage", data);

​

  // we can load them like so

  if (data.length > 0) {

    resImg = loadImage(data[0].src);

  }

​

  // automatically run again

  requestImage();

}

​

function draw() {

  // draw a scene into the source image to use for generation

  srcImg.background(0);

  srcImg.fill(255);

  srcImg.stroke(255);

  srcImg.circle(

    width / 2 + cos(angle) * radius,

    height / 2 + sin(angle) * radius,

    75

  );

  angle += radians(1);

​

  background(255);

  image(srcImg, 0, 0);

  //if we have an image, put it onto the canvas

  if (resImg) {

    image(resImg, 0, 0, width, height);

  }

}

​