Generate image with FLUX.2-klein split layout

We've used a single model file so far. FLUX.2-klein needs three: a diffusion model, a text encoder, and a VAE.

The diffusion model is the inference engine. It iteratively refines a noise field step by step until the result matches your prompt. The text encoder produces the tokens the engine reads. The VAE encodes the working state in latent space and decodes the final image back to pixels.

The three files are independent. The SDK downloads each one on its own schedule, then wires them together at load time.

FLUX.2-klein split-layout is three files in one loadModel call: diffusion model, LLM encoder, VAE. The chain: LLM → tokens → diffusion → latent → VAE → pixels. The combined load would look like the following:

const modelId = await loadModel({
  modelSrc: FLUX_2_KLEIN_4B_Q4_0,
  modelType: "sdcpp-generation",
  modelConfig: {
    llmModelSrc: QWEN3_4B_Q4_K_M,
    vaeModelSrc: FLUX_2_KLEIN_4B_VAE,
  },
});

From the caller's perspective, split-layout vs single-file is invisible. The outputs array is the same type as for a single-file model: a Promise<Uint8Array[]> of PNG bytes. Drain progressStream while waiting for outputs so inference isn't blocked:

const result = diffusion({ modelId, prompt: "a quiet harbor at dawn" });
if (result.progressStream) {
  for await (const step of result.progressStream) {
    console.log(`▸ step ${step.step}/${step.totalSteps}`);
  }
}
const outputs = await result.outputs;

outputs[0] is the first PNG, fs.writeFileSync writes raw bytes (no header needed), and an empty array means the call failed silently. Save the file and log the count:

const first = outputs[0];
if (first) fs.writeFileSync("output/image-generation/harbor.png", first);
console.log(`Generated ${outputs.length} image`);

Note: the SDK only downloads the files that aren't already on disk. The second run with the same constants skips the download and goes straight to inference.