Generate an Image

This guide will walk you through how to generate an image using the Core3D SDK.

The Code
Breaking It Down

The Code

import { Core3D, Model, APIv1 } from '@core3d/sdk';
import { Adapter } from '@core3d/sdk-adapter-three';

const core3d = new Core3D({
    apiKey: '...', // your Core3D API token
    createAdapter: ctx => new Adapter(ctx),
});

const { data: generationStyles } = await core3d.api.generationStyles.list();

const generationStyle = generationStyles
    .find(generationStyle => Object.keys(generationStyle.types).includes('pattern'));

const { data: { uri } } = await core3d.api.generations.create({
    type: 'image',
    data: {
        type: 'pattern',
        style: generationStyle.uri,
    },
});

const generation = await core3d.api.wait<APIv1.GenerationResource>(uri);

if (generation.status !== 'ok') {
    throw new Error('generation failed');
}

const img = document.createElement('img');

img.src = generation.images.default.fullsize.url!;

document.body.append(img);

Breaking It Down

First, we load some generation styles from the API and find the first one that supports the pattern type.

const { data: generationStyles } = await core3d.api.generationStyles.list();

const generationStyle = generationStyles
    .find(generationStyle => Object.keys(generationStyle.types).includes('pattern'));

Then, we create a new generation resource for the generation style.

const { data: { uri } } = await core3d.api.generations.create({
    type: 'image',
    data: {
        type: 'pattern',
        style: generationStyle.uri,
    },
});

Then, we use the core3d.api.wait() method to wait for the generation to complete, and if it isn't successful we throw an error.

const generation = await core3d.api.wait<APIv1.GenerationResource>(uri);

if (generation.status !== 'ok') {
    throw new Error('generation failed');
}

Finally, we append the image to the document.

const img = document.createElement('img');

img.src = generation.images.default.fullsize.url!;

document.body.append(img);

Generate an Image

Contents

The Code

Breaking It Down

Get in touch