--- title: "Creating visual assets | Customer's Canvas Hub" canonical: "https://customerscanvas.com/docs/hub/dev-center/api/asset-generator/creating-visual-assets/" --- # Creating visual assets > You may want to create product designs, generate images using external services such as Midjourney, or generate the packaging mockups. Customer's Canvas can simplify the development and design process, allowing users to quickly and easily create visual materials with the Asset Generator API. ## Use Cases ### Packaging Mockups The Asset Generator API allows you to create packaging mockups. Users can provide dimensions and other packaging parameters, and the API will return the appropriate mockup. This can be useful for companies that often need to create new packaging designs for their products. ### Future Implementations Further implementations of the Asset Generator API will include additional functionalities such as image generation based on user descriptions and creating product designs with customizable parameters like colors, logos, and texts. These upcoming features will be particularly useful for projects requiring a large number of unique images or multiple design options. ## Data models For now, this API only supports creating 3D mockups, and users need to specify the parameters of [`MockupCreationModel`](https://customerscanvas.com/docs/hub/dev-center/api/asset-generator.md#model/MockupCreationModel): - **Name**: The mockup name. - **Specification**: One of the supported models, FEFCO or ECMA. - **Material**: The type of material the box should be made of, such as cardboard, plastic, metal, etc. - **Box dimensions**: The length, width, and height of the box in the metric measurement system. - **Material**: The type of material the box should be made of, such as cardboard, plastic, metal, etc. - **Flute type**: The type of corrugated flutes. - **Print sides**: The front, back, or both sides. After a box has been created, users can personalize: - **Color**: The color of the box. It can be a specific color code (for example, a HEX code for web design) or just the name of the color. - **Logo**: If the company logo is to be placed on the box, users upload a graphical representation of it. - **Text**: Any text that should be displayed on the box, such as the product name, instructions for use, etc. ### Parameter rules When defining specification parameters, you can apply rules for filling in their values, such as minimum and maximum values. You can define one or all the rules of [`MockupSpecParamRulesDto`](https://customerscanvas.com/docs/hub/dev-center/api/asset-generator.md#model/MockupSpecParamRulesDto): - **Default**: The default value specified as a string is optional. If a default value is specified, its data type (after conversion from `string`) must correspond to [`MockupSpecParamDto.Type`](https://customerscanvas.com/docs/hub/dev-center/api/asset-generator.md#model/MockupSpecParamDto). - **Min**: The minimum allowable value is mandatory for parameters with numeric data types (for example, if `MockupSpecParamDto.Type="float"`). - **Max**: The maximum allowable value is mandatory for parameters with numeric data types (for example, if `MockupSpecParamDto.Type="float"`). - **LessOrEqual**: This rule expresses the "less than or equal to" constraint. Some specifications have parameters whose values are constrained by the values of other parameters according to the "less than or equal to" rule. If such a dependency exists, it should be reflected in the `LessOrEqual` field. When referring to other parameters, use their aliases, `Alias` (not the name, `Name`). For example, the value `lessOrEqual=['H/2', 'L']` indicates that this parameter must be less than or equal to half the height and also less than or equal to the length. - **GreaterOrEqual**: This rule expresses the "greater than or equal to" constraint. Some specifications have parameters whose values are constrained by the values of other parameters according to the "greater than or equal to" rule. If such a dependency exists, it should be reflected in the `GreaterOrEqual` field. When referring to other parameters, use their aliases, `Alias` (not the name, `Name`). For example, the value `greaterOrEqual=['H/2', 'L']` indicates that this parameter must be greater than or equal to half the height and also greater than or equal to the length. - **Equal**: This rule expresses the "equal to" constraint. Some specifications have parameters whose values are fixed and tied to the values of other parameters. If such a dependency exists, it should be reflected in the `Equal` field. When referring to other parameters, use their aliases, `Alias` (not the name, `Name`). For example, the value `equal="H/2"` indicates that this parameter must be equal to half the height. To refer to other parameters, use their aliases, `Alias` (not `Name`). ### Validation results The validation process stops upon detecting the first invalid parameter. The validation result of the mockup specification parameters is represented by the [`MockupSpecParamsValidationResult`](https://customerscanvas.com/docs/hub/dev-center/api/asset-generator.md#model/MockupSpecParamsValidationResultDto) model: - **IsValid**: Indicates if the parameters of the mockup specification are valid. If all parameters pass the validation successfully, the `IsValid` flag is set to `true`. If any parameter fails the validation, the `IsValid` flag is set to `false`. - **ErrorInfo**: Contains error information. If the validation of parameters is successful, the error information is absent (value is `null`). Otherwise, `ErrorInfo` should contain the information necessary to correct the error (invalid parameter value). - **FailedParameter**: Specifies the failed specification parameter. If the validation of parameters is successful, the information about the invalid parameter is absent (value is `null`). Otherwise, `FailedParameter` should specify the parameter that caused the validation error. - **FailedValue**: Indicates the failed value of the specification parameter. If the validation of parameters is successful, the information about the invalid parameter value is absent (value is `null`). Otherwise, `FailedValue` should indicate the value that failed the validation. ## Generating mockups 3D mockups are generated according to the [`MockupSpecDto`](https://customerscanvas.com/docs/hub/dev-center/api/asset-generator.md#model/MockupSpecDto) specifications from a backend library. Since all specification parameters and their value ranges are hard-coded, this API only allows you to read the available specifications, apply the user input to their parameters [`MockupSpecParamDto`](https://customerscanvas.com/docs/hub/dev-center/api/asset-generator.md#model/MockupSpecParamDto), and generate the mockups. The 3D mockup generation is implemented through the following steps. ### 1. Get a specification To get the list of all available specifications, use the endpoint [`GET /api/asset-generator/v1/mockups/specifications`](https://customerscanvas.com/docs/hub/dev-center/api/asset-generator.md#tag/mockupgenerator/GetAllSpecifications). To find a specification by name, use [`GET /api/asset-generator/v1/mockups/specifications/{name}`](https://customerscanvas.com/docs/hub/dev-center/api/asset-generator.md#tag/mockupgenerator/GetSpecification). Let's look at how you can obtain a list of available mockup specifications. **cURL** ```bash curl -X GET \ "https://api.customerscanvashub.com/api/asset-generator/v1/mockups/specifications" \ -H "accept: application/json" \ -H "Authorization: Bearer " ``` **HTTP** ```http GET https://api.customerscanvashub.com/api/asset-generator/v1/mockups/specifications ``` **C#** ```csharp var specifications = await mockupGeneratorApiClient.GetAllSpecificationsAsync(); ``` **TS** ```typescript var specifications = _mockupGeneratorApiClient.getAllSpecifications(); ``` This endpoint returns an array of available specifications, where you can find their names, preview image names, and whether the specifications are licensed. ```json [ { "name": "FEFCO 0201", "group": "Packaging", "imageNames": [ "box", "schema" ], "licensed": true }, ... ] ``` Preview images provide a visual representation of how the product will look and how dimensions will be applied in mockups, for example: ![Specifications preview images.](images/spec-images.png) These drawings are generated based on the specification by the endpoint [`GET /api/asset-generator/v1/mockups/specifications/{name}/images/{imageName}`](https://customerscanvas.com/docs/hub/dev-center/api/asset-generator.md#tag/mockupgenerator/GetSpecificationImage). Let's generate the `schema`. **cURL** ```bash curl -X GET \ "https://api.customerscanvashub.com/api/asset-generator/v1/mockups/specifications/FEFCO%200201/images/schema" \ -H "accept: application/octet-stream" \ -H "Authorization: Bearer " ``` **HTTP** ```http GET https://api.customerscanvashub.com/api/asset-generator/v1/mockups/specifications/FEFCO%200201/images/schema Accept: application/octet-stream Authorization: Bearer ``` **C#** ```csharp var specificationName = "FEFCO 0201"; var imageName = "schema"; var drawing = await mockupGeneratorApiClient.GetSpecificationImageAsync(specificationName, imageName); ``` **TS** ```typescript const specificationName = "FEFCO 0201"; const imageName = "schema"; const drawing = await _mockupGeneratorApiClient.getSpecificationImage(specificationName, imageName); ``` This endpoint returns binary data, as indicated by the `application/octet-stream` content type. By default, the drawing contains only one element. For a composite box, for example, a box with a lid, the drawing will include two elements: one for the box and another for the lid. ### 2. Get specification parameters After you have obtained the list of specifications, you can get their parameters. Pass their name as a path parameter to the endpoint [`GET /api/asset-generator/v1/mockups/specifications/{name}/parameters`](https://customerscanvas.com/docs/hub/dev-center/api/asset-generator.md#tag/mockupgenerator/GetSpecificationParameters). For example, to get the parameters of the `FEFCO 0201` specification: **cURL** ```bash curl -X GET \ "https://api.customerscanvashub.com/api/asset-generator/v1/mockups/specifications/FEFCO%200201/parameters" \ -H "accept: application/json" \ -H "Authorization: Bearer " ``` **HTTP** ```http GET https://api.customerscanvashub.com/api/asset-generator/v1/mockups/specifications/FEFCO%200201/parameters ``` **C#** ```csharp var specificationName = "FEFCO 0201"; var parameters = await mockupGeneratorApiClient.GetSpecificationParametersAsync(specificationName); ``` **TS** ```typescript var specificationName = "FEFCO 0201"; var parameters = await _mockupGeneratorApiClient.getSpecificationParameters(specificationName); ``` This endpoint returns a list of supported parameters and the rules for filling them in. You can pass their values when generating a mockup or validating the parameters. ### 3. Validate input data You may want to validate the input data before generating a mockup. To do so, use the endpoint [`POST /api/asset-generator/v1/mockups/specifications/{name}/parameters/validate`](https://customerscanvas.com/docs/hub/dev-center/api/asset-generator.md#tag/mockupgenerator/ValidateSpecificationParameters). Let's validate the mockup specification for a box of 2 x 1.5 x 1 inches. Convert these values to millimeters and use aliases instead of names. For these dimensions, the request body will look as follows: ```json { "L": "50", "W": "37", "H": "25" } ``` The request example: **cURL** ```bash curl -X POST \ "https://api.customerscanvashub.com/api/asset-generator/v1/mockups/specifications/FEFCO%200201/parameters/validate" \ -H "accept: application/json" \ -H "Authorization: Bearer " \ -H "Content-Type: application/json" \ -d '{"L":"50","W":"37","H":"25"}' ``` **HTTP** ```http POST https://api.customerscanvashub.com/api/asset-generator/v1/mockups/specifications/FEFCO%200201/parameters/validate Accept: application/json Authorization: Bearer Content-Type: application/json { "L": "50", "W": "37", "H": "25" } ``` **C#** ```csharp var specificationName = "FEFCO 0201"; var body = """ { "L": "50", "W": "37", "H": "25", } """; var response = await mockupGeneratorApiClient.ValidateSpecificationParametersAsync(specificationName, body); ``` **TS** ```typescript const specificationName = "FEFCO 0201"; var body = { "L": "50", "W": "37", "H": "25", }; var design = _mockupGeneratorApiClient.validateSpecificationParameters(specificationName, body); ``` For more details about validation results, refer to the [data model description](#validation-results). To avoid re-generating the same drawing, you can also check that a mockup with the specified name is already exists in Asset Storage. To do so, use the endpoint [`GET ​/api​/storage​/v1​/mockups`](https://customerscanvas.com/docs/hub/dev-center/api/asset-storage.md#tag/privatedesigns/GetAll) and filter mockups by name. ### 4. Generate and save the mockup The generation of a 3D mockup is performed based on the specification parameters by the endpoint [`POST /api/asset-generator/v1/mockups/generate`](https://customerscanvas.com/docs/hub/dev-center/api/asset-generator.md#tag/mockupgenerator/Generate). The following request body can be used to create a private mockup for the **CrisFord** user under the **/Mockups/Cris** subfolder. ```json { "specName": "FEFCO 0201", "specParameters": { "L": "50", "W": "37", "H": "25", "CT": "Corrugated", "FT": "B", "BPS": "Both" }, "mockupFileName": "box2x1.5x1", "mockupFilePath": "/Cris", "privateStorageOwner": "CrisFord" } ``` To generate a public mockup, pass an empty string as `privateStorageOwner`. **cURL** ```bash curl -X POST \ "https://api.customerscanvashub.com/api/asset-generator/v1/mockups/generate" \ -H "accept: application/json" \ -H "Authorization: Bearer " \ -H "Content-Type: application/json" \ -d '{ "specName": "FEFCO 0201", "specParameters": { "L": "50", "W": "37", "H": "25", "CT": "Corrugated", "FT": "B", "BPS": "Both" }, "mockupFileName": "box2x1.5x1", "mockupFilePath": "/Generated", "privateStorageOwner": "" }' ``` **HTTP** ```http POST https://api.customerscanvashub.com/api/asset-generator/v1/mockups/generate Accept: application/json Authorization: Bearer Content-Type: application/json { "specName": "FEFCO 0201", "specParameters": { "L": "50", "W": "37", "H": "25", "CT": "Corrugated", "FT": "B", "BPS": "Both" }, "mockupFileName": "box2x1.5x1", "mockupFilePath": "/Generated", "privateStorageOwner": "" } ``` **C#** ```csharp var body = """ { "specName": "FEFCO 0201", "specParameters": { "L": "50", "W": "37", "H": "25", "CT": "Corrugated", "FT": "B", "BPS": "Both" }, "mockupFileName": "box2x1.5x1", "mockupFilePath": "/Generated", "privateStorageOwner": "" } """; var response = await mockupGeneratorApiClient.GenerateAsync(body); ``` **TS** ```ts const body = { "specName": "FEFCO 0201", "specParameters": { "L": "50", "W": "37", "H": "25", "CT": "Corrugated", "FT": "B", "BPS": "Both" }, "mockupFileName": "box2x1.5x1", "mockupFilePath": "/Generated", "privateStorageOwner": "" }; const response = await _mockupGeneratorApiClient.generate(body); ``` The result of the generation is an M3D mockup file, which is saved in the Asset Storage. In the endpoint response, you can find the mockup ID, which can be used to download the M3D file from Assets Storage. In your tenant, you can find the generated file in the **Mockups** section. ![Generated m3d mockup files.](images/generated-mockups.png)