let feedback;

let img;

​

function setup() {

  createCanvas(384, 640);

  // createCanvas(475, 636);

  let input_image_field = createInput(

    "Enter your prompt here"

  );

  input_image_field.size(450);

  input_image_field.id("input_image_prompt");

  input_image_field.position(10, 10);

  //add a button to ask for picture

  let button = createButton("Ask");

  button.position(460, 10);

  button.mousePressed(() => {

    askForPicture(input_image_field.value());

  });

  feedback = createP("");

  feedback.position(0, 20);

}

​

function draw() {

  if (img) image(img, 0, 0, width, height);

}

​

async function askForPicture(p_prompt) {

  const imageDiv = select("#resulting_image");

  feedback.html("Waiting for reply from Replicate's Stable Diffusion API...");

  let data = {

    // version: "da77bc59ee60423279fd632efb4795ab731d9e3ca9705ef3341091fb989b7eaf", // Stable Diffusion

    // version: "15a3689ee13b0d2616e98820eca31d4c3abcd36672df6afce5cb6feb1d66087d", // img 2 img

    version: "26d3c19f09b63925b3d974d0934cbdf33e7243189f7ff3e281b00930f648fb1d", // sdxl-cross-section

    input: {

      width: 384,   //768

      height: 640, //1280

      prompt: p_prompt,

      refine: "no_refiner",

      scheduler: "K_EULER",

      lora_scale: 0.6,

      num_outputs: 1,

      guidance_scale: 7.5,

      apply_watermark: false,

      high_noise_frac: 0.8,

      negative_prompt: "",

      prompt_strength: 0.8,

      num_inference_steps: 50,

    },

  };

  console.log("Asking for Picture Info From Replicate via Proxy", data);

  let options = {

    method: "POST",

    headers: {

      "Content-Type": "application/json",

    },

    body: JSON.stringify(data),

  };

  const url = replicateProxy + "/create_n_get/";

  const picture_info = await fetch(url, options);

  //turn the stuff coming back into json

  const proxy_said = await picture_info.json();

  if (proxy_said.output.length == 0) {

    feedback.html("Something went wrong, try it again");

  } else {

    feedback.html("");

    loadImage(proxy_said.output[0], (incomingImage) => {

      img = incomingImage;

    });

  }

}

​