StableCanvas / comfyui-client

all ComfyUI http/ws APIs. support NodeJS / Browser environments. and advanced programmable workflow.
https://stablecanvas.github.io/comfyui-client/
MIT License
60 stars 10 forks source link

Clean up the API usage #11

Open matbee-eth opened 1 month ago

matbee-eth commented 1 month ago

This is impossible to follow along.

Your examples are marked as deprecated, and your README examples don't even work with the given example files. Very confusing.

export async function generateImage(prompt: string): Promise<string> {
  await comfyUIClient.connect();
  const workflow = new ComfyUIWorkflow();
  const cls = workflow.classes;
  const [model, clip, vae] = cls.CheckpointLoaderSimple({
    ckpt_name: "lofi_v5.baked.fp16.safetensors",
  });
  const enc = (text: string) => cls.CLIPTextEncode({ text, clip })[0];
  const [samples] = cls.KSampler({
    seed: Math.floor(Math.random() * 2 ** 32),
    steps: 35,
    cfg: 4,
    sampler_name: "dpmpp_2m_sde_gpu",
    scheduler: "karras",
    denoise: 1,
    model,
    positive: enc("best quality, 1girl"),
    negative: enc(
      "worst quality, bad anatomy, embedding:NG_DeepNegative_V1_75T"
    ),
    latent_image: cls.EmptyLatentImage({
      width: 512,
      height: 512,
      batch_size: 1,
    })[0],
  });
  cls.SaveImage({
    filename_prefix: "from-sc-comfy-ui-client",
    images: cls.VAEDecode({ samples, vae })[0],
  });
// How do I get this to even work?
  try {
    const response = await comfyUIClient.enqueue_polling(payload.prompt);
zhzLuke96 commented 1 month ago

Hey @matbee-eth, thanks for bringing this up!

TL;DR: You need to invoke the workflow you've created:

const client = /* your client instance */;
const wf1 = createWorkflow();
const result = await wf1.invoke(client); // or wf1.invoke_polling(client)

so, your case should be:

export async function generateImage(prompt: string): Promise<string> {
  const workflow = new ComfyUIWorkflow();

  // ... define this workflow

  const images = await workflow.invoke_polling(client)
  return images[0].data; // image url
}

Longer answer:

First, in addition to the README, we have auto-generated documentation pages which provide more detailed information, including example code and type annotations for commonly used interfaces.

Second, I'm guessing you're confused about the workflow example in the README? This example shows how to create a workflow but doesn't include code on how to use it (I reviewed it, and it does look a bit confusing 😂)

If you need to refer to complete example code, you can check out the ./examples/nodejs/main*.ts entry files. These contain fully executable code examples ranging from the simplest to slightly more complex workflows.