# Table of Contents - [Our Tools - HashLips Lab](#our-tools-hashlips-lab) - [Art Engine 2.0 - HashLips Lab](#art-engine-2-0-hashlips-lab) - [Core Plugins - HashLips Lab](#core-plugins-hashlips-lab) - [Quick Start - HashLips Lab](#quick-start-hashlips-lab) - [Image Layers Input - HashLips Lab](#image-layers-input-hashlips-lab) - [Image Layers Attributes Generator - HashLips Lab](#image-layers-attributes-generator-hashlips-lab) - [Generators Interface - HashLips Lab](#generators-interface-hashlips-lab) - [Image Layers Renderer - HashLips Lab](#image-layers-renderer-hashlips-lab) - [Item Attributes Renderer - HashLips Lab](#item-attributes-renderer-hashlips-lab) - [ERC721 Metadata Exporter - HashLips Lab](#erc721-metadata-exporter-hashlips-lab) - [Exporters Interface - HashLips Lab](#exporters-interface-hashlips-lab) - [Sol Metadata Exporter - HashLips Lab](#sol-metadata-exporter-hashlips-lab) - [Collection Data Updater - HashLips Lab](#collection-data-updater-hashlips-lab) - [Inputs Interface - HashLips Lab](#inputs-interface-hashlips-lab) - [Custom Plugins - HashLips Lab](#custom-plugins-hashlips-lab) - [Inputs Plugin Example - HashLips Lab](#inputs-plugin-example-hashlips-lab) - [Images Exporter - HashLips Lab](#images-exporter-hashlips-lab) - [Generator Plugin Example - HashLips Lab](#generator-plugin-example-hashlips-lab) - [Renderer Plugin Example - HashLips Lab](#renderer-plugin-example-hashlips-lab) - [Renderers Interface - HashLips Lab](#renderers-interface-hashlips-lab) - [Exporter Plugin Example - HashLips Lab](#exporter-plugin-example-hashlips-lab) --- # Our Tools - HashLips Lab Docs Our Tools Our Tools ========= 🧑‍🎨 Art Engine Your go-to solution to generate collections of assets starting with any kind of input and producing any kind of output. [Discover more](https://lab.hashlips.io/docs/art-engine) 🧙‍♀️ Collection Data Updater A flexible library to update collection data programmatically. [Discover more](https://lab.hashlips.io/docs/collection-data-updater) [Overview](https://lab.hashlips.io/docs/art-engine "Overview") --- # Art Engine 2.0 - HashLips Lab Docs Art Engine Overview ![Art Engine logo](https://lab.hashlips.io/images/docs/art-engine/art-engine-logo.png) Art Engine 2.0 ============== This project is currently in its early development stages. You can [join us on GitHub (opens in a new tab)](https://github.com/hashlips-lab/hashlips-lab/tree/main/packages/art-engine) to follow the development process. Overview[](https://lab.hashlips.io/docs/art-engine#overview) ------------------------------------------------------------- Welcome to the Art Engine 2.0 developer documentation! The Art Engine is a versatile npm package designed for creating various forms of art that often involve layering different media files, such as NFT art and metadata. It achieves this flexibility through a plugin-based system, enabling artists and developers to combine different plugins to generate diverse and unique content. The engine executes these plugins in a predefined order, allowing you to create artwork that incorporates multiple layers of media files. With the Art Engine, you can leverage the included CORE plugins or even build your own custom plugins to extend its capabilities and cater to your specific artistic needs. Whether you're creating NFTs or other forms of layered art, the Art Engine provides a powerful and customizable solution to bring your creative vision to life. ### A Brief History[](https://lab.hashlips.io/docs/art-engine#a-brief-history) The foundation of the Art Engine 2.0 was inspired by the OG HashLips Art Engine, an earlier version that gained immense popularity during the rise of NFTs. Originally available at [HashLips Art Engine (opens in a new tab)](https://github.com/HashLips/hashlips_art_engine) , this precursor to the Art Engine 2.0 was designed with a primary focus on creating images and metadata for ERC721 NFTs. As its user base expanded rapidly, enthusiastic users suggested numerous features and enhancements. However, due to its initial design, adding new features while maintaining code readability became increasingly challenging. To address these challenges and pave the way for future growth and extensibility, the Art Engine 2.0 was born. The core idea behind the Art Engine 2.0 was to adopt a plugin-based approach, allowing users not only to make use of the core plugins but also to create their own plugins and openly share them with the community. This shift to a plugin-centric architecture enables seamless integration of new features, facilitates code maintenance, and encourages collaborative development. [Our Tools](https://lab.hashlips.io/docs "Our Tools") [Getting Started](https://lab.hashlips.io/docs/art-engine/getting-started "Getting Started") --- # Core Plugins - HashLips Lab Docs Art Engine Core Plugins Overview Core Plugins ============ The Art Engine 2.0 comes with a powerful set of core plugins that facilitate the generation of NFT art and metadata. These core plugins are divided into four categories: inputs, generators, renderers, and exporters. Each category serves a distinct role in the art generation process. Plugins[](https://lab.hashlips.io/docs/art-engine/core-plugins#plugins) ------------------------------------------------------------------------ ### Inputs:[](https://lab.hashlips.io/docs/art-engine/core-plugins#inputs) These plugins provide the initial data or inputs required for the art generation process. They feed data to the generators. * [Image Layers Input Plugin](https://lab.hashlips.io/docs/art-engine/core-plugins/inputs/image-layers) ### Generators:[](https://lab.hashlips.io/docs/art-engine/core-plugins#generators) These plugins take the inputs from the input plugins and generate attribute data that will influence the appearance of the final artwork. * [Image Layers Attributes Generator](https://lab.hashlips.io/docs/art-engine/core-plugins/generators/image-layers-attributes) ### Renderers:[](https://lab.hashlips.io/docs/art-engine/core-plugins#renderers) These plugins take the generated attribute data from the generators and use it to create visual renders of the artwork. * [Image Layers Renderer](https://lab.hashlips.io/docs/art-engine/core-plugins/renderers/image-layers) * [Item Attributes Renderer](https://lab.hashlips.io/docs/art-engine/core-plugins/renderers/item-attributes) ### Exporters:[](https://lab.hashlips.io/docs/art-engine/core-plugins#exporters) These plugins take the rendered artwork and metadata and export it into various formats suitable for different NFT platforms. * [ERC721 Metadata Exporter](https://lab.hashlips.io/docs/art-engine/core-plugins/exporters/erc721-metadata) * [Sol Metadata Exporter](https://lab.hashlips.io/docs/art-engine/core-plugins/exporters/sol-metadata) * [Images Exporter](https://lab.hashlips.io/docs/art-engine/core-plugins/exporters/images) [Getting Started](https://lab.hashlips.io/docs/art-engine/getting-started "Getting Started") [Image Layers](https://lab.hashlips.io/docs/art-engine/core-plugins/inputs/image-layers "Image Layers") --- # Quick Start - HashLips Lab Docs Art Engine Getting Started Quick Start =========== Installation Process[](https://lab.hashlips.io/docs/art-engine/getting-started#installation-process) ----------------------------------------------------------------------------------------------------- ### Install package[](https://lab.hashlips.io/docs/art-engine/getting-started#install-package) You can install the Art Engine npm package by running the following command: npm install @hashlips-lab/art-engine > If you wish to explore the Art Engine's source code or contribute to its development, you can find the repository on GitHub: [Art Engine Repository (opens in a new tab)](https://github.com/hashlips-lab/hashlips-lab/tree/main/packages/art-engine) > You can also find the NPM package here: [Art Engine NPM package (opens in a new tab)](https://www.npmjs.com/package/@hashlips-lab/art-engine) Usage[](https://lab.hashlips.io/docs/art-engine/getting-started#usage) ----------------------------------------------------------------------- ### Adding the Art Engine[](https://lab.hashlips.io/docs/art-engine/getting-started#adding-the-art-engine) In this example, we'll initialize the Art Engine 2.0 without plugins thats why you see empty input objects, generators array, renderers array, and exporters array. const { ArtEngine } = require("@hashlips-lab/art-engine"); const BASE_PATH = __dirname; const ae = new ArtEngine({ cachePath: `${BASE_PATH}/cache`, outputPath: `${BASE_PATH}/output`, useCache: false, inputs: {}, generators: [], renderers: [], exporters: [], }); (async () => { // Run the Art Engine await ae.run(); // Print performance metrics await ae.printPerformance(); })(); * We set up the `cachePath` and `outputPath` to specify the paths where the Art Engine will cache temporary data and save the generated artwork, respectively. The `useCache` option is set to `false`, meaning the Art Engine will not use cached data during the current run. * `await ae.run();` executes the Art Engine, and since there are no plugins defined, the Art Engine will complete the process without generating any actual artwork. * `await ae.printPerformance();` prints the performance metrics after the run, providing insights into the processing time and resource usage. ### Adding plugins[](https://lab.hashlips.io/docs/art-engine/getting-started#adding-plugins) Below is a usage example demonstrating how to use the Art Engine 2.0 to create NFT art by combining different CORE plugins. This example will load image layers as inputs, generate attributes for each item, render the layers on top of each other, and export the artwork and metadata. For a more detailed understanding, you can check out the example repository that implements this template: [Art Engine Template Repository (opens in a new tab)](https://github.com/hashlips-lab/art-engine-template) const { ArtEngine, inputs, generators, renderers, exporters, } = require("@hashlips-lab/art-engine"); const BASE_PATH = __dirname; const ae = new ArtEngine({ cachePath: `${BASE_PATH}/cache`, outputPath: `${BASE_PATH}/output`, useCache: false, inputs: { // Define the input plugin (ImageLayersInput) to load image layers apes: new inputs.ImageLayersInput({ assetsBasePath: `${BASE_PATH}/data`, }), }, generators: [\ // Define the generator plugin (ImageLayersAttributesGenerator) to generate attributes for each item\ new generators.ImageLayersAttributesGenerator({\ dataSet: "apes",\ startIndex: 1,\ endIndex: 10,\ }),\ ], renderers: [\ // Define the renderer plugins to render the attributes and image layers\ new renderers.ItemAttributesRenderer({\ name: (itemUid) => `Ape ${itemUid}`,\ description: (attributes) => {\ return `This is a token with "${attributes["Background"][0]}" as Background`;\ },\ }),\ new renderers.ImageLayersRenderer({\ width: 2048,\ height: 2048,\ }),\ ], exporters: [\ // Define the exporter plugins to export the generated artwork and metadata\ new exporters.ImagesExporter(),\ new exporters.Erc721MetadataExporter({\ imageUriPrefix: "ipfs://__CID__/",\ }),\ new exporters.SolMetadataExporter({\ imageUriPrefix: "ipfs://__CID__/",\ symbol: "APES",\ sellerFeeBasisPoints: 200,\ collectionName: "The Apes",\ creators: [\ {\ address: "__SOLANA_WALLET_ADDRESS_HERE__",\ share: 100,\ },\ ],\ }),\ ], }); (async () => { // Run the Art Engine to generate the artwork await ae.run(); // Print performance metrics await ae.printPerformance(); })(); Throughout the documentation, we will explore each of these components in detail, providing code examples, plugin configurations, and best practices for their effective utilization. Additional Learning Resources[](https://lab.hashlips.io/docs/art-engine/getting-started#additional-learning-resources) ----------------------------------------------------------------------------------------------------------------------- To help developers get started with the Art Engine 2.0 and to enhance their understanding of its features and functionalities, we have curated a YouTube playlist. This playlist covers various topics related to the Art Engine and provides practical demonstrations to facilitate learning. Whether you are an artist or a developer, these videos will guide you through the process of creating NFT art and utilizing the Art Engine to its full potential. ### YouTube Playlist: Art Engine 2.0 Tutorials[](https://lab.hashlips.io/docs/art-engine/getting-started#youtube-playlist-art-engine-20-tutorials) [Art Engine 2.0 Tutorials - YouTube Playlist (opens in a new tab)](https://www.youtube.com/watch?v=0IRBQ69SkM8&list=PLvfQp12V0hS2GM-Ad9xqx4NVsr80872aQ) [Overview](https://lab.hashlips.io/docs/art-engine "Overview") [Overview](https://lab.hashlips.io/docs/art-engine/core-plugins "Overview") --- # Image Layers Input - HashLips Lab Docs Art Engine Core Plugins Inputs Image Layers Image Layers Input ================== The purpose of the Image Layers Input plugin is to provide a flexible way to define image layers and their variations for artwork generation. It acts as a data source for the Image Layers Generator, making it easy to manage and update visual components through a folder structure. The plugin streamlines the process of integrating new assets, allowing artists and developers to focus on creating high-quality elements for unique artworks. Adding the plugin[](https://lab.hashlips.io/docs/art-engine/core-plugins/inputs/image-layers#adding-the-plugin) ---------------------------------------------------------------------------------------------------------------- 1. Import the plugin object: const { ArtEngine, inputs } = require("@hashlips-lab/art-engine"); 2. Setup a base path: const BASE_PATH = __dirname; 3. Add the plugin to an instance of the Art Engine: const ae = new ArtEngine({ cachePath: `${BASE_PATH}/cache`, outputPath: `${BASE_PATH}/output`, useCache: false, inputs: { apes: new inputs.ImageLayersInput({ assetsBasePath: `${BASE_PATH}/data/layers`, }), // Add more inputs if needed... }, // Add generators, renderers, and exporters as required... }); Parameters[](https://lab.hashlips.io/docs/art-engine/core-plugins/inputs/image-layers#parameters) -------------------------------------------------------------------------------------------------- * `assetsBasePath` (string): The path to the folder containing your image layers and attribute folders. Dependencies[](https://lab.hashlips.io/docs/art-engine/core-plugins/inputs/image-layers#dependencies) ------------------------------------------------------------------------------------------------------ ### Folder Structure and Naming Convention[](https://lab.hashlips.io/docs/art-engine/core-plugins/inputs/image-layers#folder-structure-and-naming-convention) The `Image Layers Input` plugin uses a specific folder structure and naming convention to organize image layers and their attributes. The naming convention allows you to define attributes such as z-depth, rarity weight, and positional offsets for each layer and option. The structure should look like this: ├── data │ ├── layers │ │ ├── Layer1__z10 │ │ │ ├── Option1__w10.png │ │ │ ├── Option2__w5.png │ │ │ └── edge-cases │ │ │ └── Option2__tTrait1__vValue1.png │ │ ├── Layer2__z20 │ │ │ ├── Option1__w5.png │ │ │ └── edge-cases │ │ │ └── Option1__z20__tTrait2__vValue2.png │ │ └── ... * Each layer is represented by a folder with its name (e.g., "Layer1," "Layer2," etc.). * Inside each layer folder, you can create sub-folders representing different attribute options (e.g., "Option1," "Option2," etc.). These options correspond to different variations or traits of the layer. * Image files within each option folder represent the actual assets for that option. The optional "w" attribute in the filename specifies the rarity weight, which affects the probability of the option being chosen during rendering. * The optional "z" attribute in the layer and option folder names allows you to control the z-depth at which the layer and option should be rendered. Lower z-depth values make the layers appear behind higher ones. * The optional "x" and "y" attributes in the filename can be used to offset the image when rendered, allowing precise positioning of the assets. ### Edge Cases[](https://lab.hashlips.io/docs/art-engine/core-plugins/inputs/image-layers#edge-cases) Edge cases allow you to define variations for an option based on the attributes of other layers. Inside each option folder, you can create an "edge-cases" sub-folder. The image files within this folder will represent the assets for specific attribute combinations of other layers. An example edge case filename: `Option1__z20__tTrait2__vValue2.png`. This means that if "Trait2" has the value "Value2," then the asset will be rendered at a z-depth of 20. Remember, this plugin provides flexibility in designing your NFT art with multiple layers, options, and conditional variations. Understanding the folder structure and naming convention will enable the Art Engine to process your image layers correctly and create unique and diverse NFTs. Interfaces[](https://lab.hashlips.io/docs/art-engine/core-plugins/inputs/image-layers#interfaces) -------------------------------------------------------------------------------------------------- ### Base[](https://lab.hashlips.io/docs/art-engine/core-plugins/inputs/image-layers#base) This plugin adheres to the base input interface called `InputInterface`. * [InputInterface](https://lab.hashlips.io/docs/art-engine/custom-plugins/inputs/interface) ### Custom[](https://lab.hashlips.io/docs/art-engine/core-plugins/inputs/image-layers#custom) The `InputInterface` is generic and takes an `InputDataType` as its parameter, which is returned by the `load` function. For the Image Layers Input plugin, this concept is realized through the `ImageLayersInputInterface`. Keep in mind that the this interface will look different on each plugin's implementation. Here's how the interface structure looks: interface LayerAsset { path: string; size: number; relativeXOffset: number; relativeYOffset: number; relativeZOffset: number; lastModifiedTime: number; } export default interface ImageLayersInputInterface { basePath: string; layers: { [traitName: string]: { name: string; baseXOffset: number; baseYOffset: number; baseZOffset: number; options: { [optionName: string]: { name: string; weight: number; assets: LayerAsset[]; edgeCases: { [matchUid: string]: { matchingTrait: string; matchingValue: string; assets: LayerAsset[]; }; }; }; }; }; }; } Essentially, the Image Layers Input plugin implements the InputInterface by specializing it with the ImageLayersInputInterface. export class ImageLayersInput implements InputInterface { // Implementation details } This enables the plugin to seamlessly integrate into the Art Engine ecosystem, providing a flexible and customizable way to define what the plugin should export. [Overview](https://lab.hashlips.io/docs/art-engine/core-plugins "Overview") [Image Layers Attributes](https://lab.hashlips.io/docs/art-engine/core-plugins/generators/image-layers-attributes "Image Layers Attributes") --- # Image Layers Attributes Generator - HashLips Lab Docs Art Engine Core Plugins Generators Image Layers Attributes Image Layers Attributes Generator ================================= The Image Layers Attributes Generator is a core generator plugin designed to generate attributes and assets for image layers in the Art Engine. It takes an input dataset of image layers and their options, calculates unique DNA for each generated item, and randomly selects attributes based on the provided weights. It also handles edge cases for assets that depend on specific attribute combinations. Adding the plugin[](https://lab.hashlips.io/docs/art-engine/core-plugins/generators/image-layers-attributes#adding-the-plugin) ------------------------------------------------------------------------------------------------------------------------------- 1. Import the plugin object: const { ArtEngine, generators } = require("@hashlips-lab/art-engine"); 2. Setup a base path: const BASE_PATH = __dirname; 3. Add the plugin to an instance of the Art Engine: const ae = new ArtEngine({ cachePath: `${BASE_PATH}/cache`, outputPath: `${BASE_PATH}/output`, useCache: false, generators: [\ new generators.ImageLayersAttributesGenerator({\ dataSet: "apes", // Replace "apes" with your actual dataset key\ startIndex: 1, // Start index for generating items\ endIndex: 10, // End index for generating items\ });\ // Add more generators if needed...\ ] // Add inputs, renderers, and exporters as required... }); Parameters[](https://lab.hashlips.io/docs/art-engine/core-plugins/generators/image-layers-attributes#parameters) ----------------------------------------------------------------------------------------------------------------- * `dataSet`: A string representing the key of the input dataset containing image layers and their options. The dataset should be set up using the Image Layers Input plugin. * `startIndex`: An integer representing the starting index for generating items. * `endIndex`: An integer representing the ending index for generating items. Dependencies[](https://lab.hashlips.io/docs/art-engine/core-plugins/generators/image-layers-attributes#dependencies) --------------------------------------------------------------------------------------------------------------------- The Image Layers Attributes Generator depends on the Image Layers Input plugin, which provides the input dataset structure with image layers and their options. The `apes` key is used as an example dataset key, but in your project, you should replace it with the actual key used for your image layers input. Interfaces[](https://lab.hashlips.io/docs/art-engine/core-plugins/generators/image-layers-attributes#interfaces) ----------------------------------------------------------------------------------------------------------------- ### Base[](https://lab.hashlips.io/docs/art-engine/core-plugins/generators/image-layers-attributes#base) This plugin adheres to the base generator interface called `GeneratorInterface`. * [GeneratorInterface](https://lab.hashlips.io/docs/art-engine/custom-plugins/generators/interface) ### Custom[](https://lab.hashlips.io/docs/art-engine/core-plugins/generators/image-layers-attributes#custom) The Image Layers Attributes Generator plugin is a prime example of a generator in the Art Engine ecosystem. It adheres to the core generator interface and implements specialized output interfaces for the attributes it generates. Two custom interfaces are essential for the Image Layers Attributes Generator: * `ImageLayersGeneratorInterface`: export default interface ImageLayersGeneratorInterface { assets: { path: string; xOffset: number; yOffset: number; zOffset: number; }[]; } * `ItemAttributesGeneratorInterface`: export default interface ItemAttributesGeneratorInterface { dna: string; attributes: { [traitName: string]: string; }; } In the context of the Image Layers Attributes Generator, these interfaces define the structure of the generated attributes. The generator can produce either image layer information or item attributes. The `ImageLayersAttributesGenerator` class encapsulates this functionality and implements the `GeneratorInterface` by utilizing the `GeneratorOutput` type: type GeneratorOutput = | ImageLayersGeneratorInterface | ItemAttributesGeneratorInterface; class ImageLayersAttributesGenerator implements GeneratorInterface { // Implementation details } This enables the Image Layers Attributes Generator to seamlessly integrate into the Art Engine, produce diverse attributes, and contribute to the creation of layered and customizable artwork. [Image Layers](https://lab.hashlips.io/docs/art-engine/core-plugins/inputs/image-layers "Image Layers") [Image Layers](https://lab.hashlips.io/docs/art-engine/core-plugins/renderers/image-layers "Image Layers") --- # Generators Interface - HashLips Lab Docs Art Engine Custom Plugins Generators Interface Generators Interface ==================== All generator plugins in the Art Engine implement the `GeneratorInterface` interface. This interface defines the basic structure that an generator plugin should follow. interface GeneratorInterface { init: (props: GeneratorInitPropsInterface) => Promise; generate: () => Promise>; } * `GeneratorInterface`: This is a generic interface. `GeneratorDataType` specifies the type of data that the generator will produce, which corresponds to the type of data that the `ItemsAttributes` interface is parameterized with. * `init(props: GeneratorInitPropsInterface) => Promise`: This method is used to initialize the generator. It takes an object of type `GeneratorInitPropsInterface` as an argument, containing the seed and inputs manager. It returns a promise that resolves when the initialization is complete. * `generate() => Promise>`: This method is responsible for generating the attributes for items. It returns a promise that resolves to an object conforming to the structure defined by `ItemsAttributes`. This object maps item UIDs to arrays of attributes. interface ItemsAttributes { [itemUid: string]: ItemPropertiesInterface[]; } This part of the code defines the structure of the attributes data that the generator will produce. It's essentially a mapping between item unique identifiers (item UIDs) and arrays of attribute data. Here's what's happening: * `ItemsAttributes`: This is a generic interface. The `AttributeDataType` represents the type of data that the attributes will hold. It could be strings, numbers, or any other relevant data type. * `[itemUid: string]: ItemPropertiesInterface[]`: This is an object that maps item UIDs (strings) to arrays of attribute data. Each item UID serves as a key, and its corresponding value is an array of attributes, where each attribute has a specific format defined by the `ItemPropertiesInterface` (which likely holds the attribute name and value). interface GeneratorInitPropsInterface { seed: string; inputsManager: InputsManager; } * `seed`: This is a string value that serves as a seed for deterministic generation. Deterministic generation ensures that the same input will always produce the same output, which can be useful for testing and reproducibility. * `inputsManager`: This is an instance of the `InputsManager` class. The `InputsManager` is used to manage and access the data produced by input plugins. It allows the generator to retrieve data from various input sources, such as images or text, and use it in the generation process. [Example](https://lab.hashlips.io/docs/art-engine/custom-plugins/inputs/example "Example") [Example](https://lab.hashlips.io/docs/art-engine/custom-plugins/generators/example "Example") --- # Image Layers Renderer - HashLips Lab Docs Art Engine Core Plugins Renderers Image Layers Image Layers Renderer ===================== The Image Layers Renderer is a plugin designed to work with the Image Layers Generator of the Art Engine. Its purpose is to take the output generated by the Image Layers Generator, which consists of item attributes and their corresponding layered images, and render those layered images into temporary files. These temporary files can then be utilized for further processing or artwork creation. Adding the plugin[](https://lab.hashlips.io/docs/art-engine/core-plugins/renderers/image-layers#adding-the-plugin) ------------------------------------------------------------------------------------------------------------------- 1. Import the plugin object: const { ArtEngine, renderers } = require("@hashlips-lab/art-engine"); 2. Setup a base path: const BASE_PATH = __dirname; 3. Add the plugin to an instance of the Art Engine: const ae = new ArtEngine({ cachePath: `${BASE_PATH}/cache`, outputPath: `${BASE_PATH}/output`, useCache: false, renderers: [\ new renderers.ImageLayersRenderer({\ width: 2048, // Specify the width of the rendered image\ height: 2048, // Specify the height of the rendered image\ });\ // Add more renderers if needed...\ ] // Add inputs, generators, and exporters as required... }); Parameters[](https://lab.hashlips.io/docs/art-engine/core-plugins/renderers/image-layers#parameters) ----------------------------------------------------------------------------------------------------- * `width` (number): The width of the rendered image in pixels. * `height` (number): The height of the rendered image in pixels. * `imageProcessor` (optional): An optional custom image processor that implements the `ImageProcessorInterface`. If not provided, the default `SharpImageProcessor` will be used. Interfaces[](https://lab.hashlips.io/docs/art-engine/core-plugins/renderers/image-layers#interfaces) ----------------------------------------------------------------------------------------------------- ### Base[](https://lab.hashlips.io/docs/art-engine/core-plugins/renderers/image-layers#base) This plugin adheres to the base renderer interface called `RendererInterface`. * [RendererInterface](https://lab.hashlips.io/docs/art-engine/custom-plugins/renderers/interface) ### Custom[](https://lab.hashlips.io/docs/art-engine/core-plugins/renderers/image-layers#custom) The Image Layers Renderer plugin serves as a prime example of a renderer in the Art Engine ecosystem. It adheres to the core renderer interface and specializes in producing static layered images based on the provided attributes. The StaticLayeredImagesRendererInterface is a custom interface specifically crafted for the Image Layers Renderer. It encapsulates the structure of rendered static layered images: export default interface StaticLayeredImagesRendererInterface { path: string; } The Image Layers Renderer class is defined as follows: export class ImageLayersRenderer implements RendererInterface { // Implementation details } This interface indicates that the rendered output consists of an image file path representing the static layered image. The Image Layers Renderer leverages the provided `attributesGetter` to access the data generated by the Image Layers Attributes Generator. By processing this data, the renderer assembles and renders the desired static layered images. [Image Layers Attributes](https://lab.hashlips.io/docs/art-engine/core-plugins/generators/image-layers-attributes "Image Layers Attributes") [Item Attributes](https://lab.hashlips.io/docs/art-engine/core-plugins/renderers/item-attributes "Item Attributes") --- # Item Attributes Renderer - HashLips Lab Docs Art Engine Core Plugins Renderers Item Attributes Item Attributes Renderer ======================== The Item Attributes Renderer plugin serves as a crucial component in the Art Engine's rendering pipeline. Its primary function is to render the attributes generated during the artwork generation process in a human-readable and structured format. This rendered data can then be used by exporters and other downstream processes to understand and utilize the attributes associated with each generated artwork effectively. Adding the plugin[](https://lab.hashlips.io/docs/art-engine/core-plugins/renderers/item-attributes#adding-the-plugin) ---------------------------------------------------------------------------------------------------------------------- 1. Import the plugin object: const { ArtEngine, renderers } = require("@hashlips-lab/art-engine"); 2. Setup a base path: const BASE_PATH = __dirname; 3. Add the plugin to an instance of the Art Engine: const ae = new ArtEngine({ cachePath: `${BASE_PATH}/cache`, outputPath: `${BASE_PATH}/output`, useCache: false, renderers: [\ new renderers.ItemAttributesRenderer({\ name: (itemUid: string) => `Artwork ${itemUid}`,\ description: (attributes) => `This artwork features ${attributes["Color"]} colors.`,\ });\ // Add more renderers if needed...\ ] // Add inputs, generators, and exporters as required... }); Parameters[](https://lab.hashlips.io/docs/art-engine/core-plugins/renderers/item-attributes#parameters) -------------------------------------------------------------------------------------------------------- * `name` (optional): A function that takes an item's unique ID (`itemUid`) as input and returns a custom name for the artwork associated with that item. If not provided, a default empty string will be used as the name. * `description` (optional): A function that takes the rendered attributes as input and returns a custom description for the artwork based on those attributes. If not provided, a default empty string will be used as the description. Interfaces[](https://lab.hashlips.io/docs/art-engine/core-plugins/renderers/item-attributes#interfaces) -------------------------------------------------------------------------------------------------------- ### Base[](https://lab.hashlips.io/docs/art-engine/core-plugins/renderers/item-attributes#base) This plugin adheres to the base renderer interface called `RendererInterface`. * [RendererInterface](https://lab.hashlips.io/docs/art-engine/custom-plugins/renderers/interface) ### Custom[](https://lab.hashlips.io/docs/art-engine/core-plugins/renderers/item-attributes#custom) The AttributesRendererInterface is a custom interface meticulously crafted for the Item Attributes Renderer. It encapsulates the structure of rendered item attributes: export default interface AttributesRendererInterface { dna: string[]; name: string; description: string; attributes: { [traitName: string]: string[]; }; } The Item Attributes Renderer plugin serves as a prime exemplar of renderer functionality within the Art Engine ecosystem. It adheres to the core renderer interface and specializes in rendering item attributes in a structured, human-friendly format. The Item Attributes Renderer class is defined as follows: export class ItemAttributesRenderer implements RendererInterface { // Implementation details } This interface signifies that the rendered output comprises a DNA identifier, name, description, and a collection of attributes associated with each trait. The Item Attributes Renderer capitalizes on the provided attributesGetter to access the data generated by the Item Attributes Generator. By processing this data, the renderer constructs and renders the item attributes in a comprehensible manner. [Image Layers](https://lab.hashlips.io/docs/art-engine/core-plugins/renderers/image-layers "Image Layers") [Erc721 Metadata](https://lab.hashlips.io/docs/art-engine/core-plugins/exporters/erc721-metadata "Erc721 Metadata") --- # ERC721 Metadata Exporter - HashLips Lab Docs Art Engine Core Plugins Exporters Erc721 Metadata ERC721 Metadata Exporter ======================== The ERC721 Metadata Exporter plugin plays a crucial role in the Art Engine's export process, enabling the transformation and exportation of rendered attributes into ERC721 NFT standard metadata JSON format. This format is widely used in the blockchain industry for representing unique and non-fungible tokens, such as digital artworks. The exporter takes the rendered attributes and generates corresponding metadata files for each item, which can then be used in NFT marketplaces and blockchain applications. Adding the plugin[](https://lab.hashlips.io/docs/art-engine/core-plugins/exporters/erc721-metadata#adding-the-plugin) ---------------------------------------------------------------------------------------------------------------------- 1. Import the plugin object: const { ArtEngine, exporters } = require("@hashlips-lab/art-engine"); 2. Setup a base path: const BASE_PATH = __dirname; 3. Add the plugin to an instance of the Art Engine: const ae = new ArtEngine({ cachePath: `${BASE_PATH}/cache`, outputPath: `${BASE_PATH}/output`, useCache: false, exporters: [\ new exporters.Erc721MetadataExporter({\ metadataFolder: "erc721_metadata",\ imageUriPrefix: "https://example.com/images/",\ });\ // Add more generators if needed...\ ] // Add inputs, exporters, renderers as required... }); Parameters[](https://lab.hashlips.io/docs/art-engine/core-plugins/exporters/erc721-metadata#parameters) -------------------------------------------------------------------------------------------------------- * `metadataFolder` (optional): A string representing the name of the folder where the ERC721 metadata JSON files will be stored. If not provided, a default folder named "erc721\_metadata" will be used. * `imageUriPrefix` (optional): A string representing the prefix that will be added to the `image` field in the ERC721 metadata JSON. This allows customization of the image URI for each item. If not provided, a default prefix of "IMAGE_URI\_PREFIX_" will be used, and the `dna` value from the rendered attributes will be appended to form the complete image URI. Interfaces[](https://lab.hashlips.io/docs/art-engine/core-plugins/exporters/erc721-metadata#interfaces) -------------------------------------------------------------------------------------------------------- ### Base[](https://lab.hashlips.io/docs/art-engine/core-plugins/exporters/erc721-metadata#base) This plugin adheres to the base exporter interface called `ExporterInterface`. * [ExporterInterface](https://lab.hashlips.io/docs/art-engine/custom-plugins/exporters/interface) ### Custom[](https://lab.hashlips.io/docs/art-engine/core-plugins/exporters/erc721-metadata#custom) The ERC721 Metadata Exporter plugin stands as a compelling embodiment of exporter functionality within the Art Engine's ecosystem. This plugin diligently adheres to the core exporter interface, facilitating the creation of ERC721-compliant metadata for your artworks. Here's how the ERC721 Metadata Exporter class comes to fruition: export class Erc721MetadataExporter implements ExporterInterface { // Implementation details } In this exporter, the rendered data, including attributes and DNA, is amalgamated to generate comprehensive ERC721 metadata files. [Item Attributes](https://lab.hashlips.io/docs/art-engine/core-plugins/renderers/item-attributes "Item Attributes") [Sol Metadata](https://lab.hashlips.io/docs/art-engine/core-plugins/exporters/sol-metadata "Sol Metadata") --- # Exporters Interface - HashLips Lab Docs Art Engine Custom Plugins Exporters Interface Exporters Interface =================== All exporter plugins in the Art Engine implement the `ExporterInterface` interface. This interface defines the basic structure that an exporter plugin should follow. interface ExporterInterface { init: (props: ExporterInitPropsInterface) => Promise; export: () => Promise; } * `ExporterInterface`: This interface outlines the structure that exporter plugins should adhere to. * `init(props: ExporterInitPropsInterface) => Promise`: This method initializes the exporter plugin. It takes an object of type `ExporterInitPropsInterface` as an argument, containing the necessary initialization properties. The method returns a promise that resolves when the initialization is complete. * `export() => Promise`: This method is responsible for executing the export process. It returns a promise that resolves when the export process is complete. interface ExporterInitPropsInterface { seed: string; outputPath: string; rendersGetter: ItemsDataManager["getRenders"]; } `ExporterInitPropsInterface`: This interface defines the properties required to initialize an exporter plugin. It includes the following properties: * `seed`: A string value that serves as a seed for deterministic behavior. Similar to other plugins, this can be used to ensure consistent results when exporting. * `outputPath`: A string representing the path where the exporter plugin should export its content. This could be a directory where generated files, metadata, or assets will be saved. * `rendersGetter`: A reference to a function called `getRenders` from the `ItemsDataManager`. This function is used to access the rendered data produced by the renderers. [Example](https://lab.hashlips.io/docs/art-engine/custom-plugins/renderers/example "Example") [Example](https://lab.hashlips.io/docs/art-engine/custom-plugins/exporters/example "Example") --- # Sol Metadata Exporter - HashLips Lab Docs Art Engine Core Plugins Exporters Sol Metadata Sol Metadata Exporter ===================== The Sol Metadata Exporter plugin serves as a vital component in the Art Engine's export process, facilitating the transformation and exportation of rendered attributes into metadata files adhering to the Solana NFT (Non-Fungible Token) standard. This standard defines the metadata format required to create and display NFTs on the Solana blockchain. The exporter takes the rendered attributes and generates corresponding metadata files for each item, which can then be used to mint and manage NFTs on the Solana network. Adding the plugin[](https://lab.hashlips.io/docs/art-engine/core-plugins/exporters/sol-metadata#adding-the-plugin) ------------------------------------------------------------------------------------------------------------------- 1. Import the plugin object: const { ArtEngine, exporters } = require("@hashlips-lab/art-engine"); 2. Setup a base path: const BASE_PATH = __dirname; 3. Add the plugin to an instance of the Art Engine: const ae = new ArtEngine({ cachePath: `${BASE_PATH}/cache`, outputPath: `${BASE_PATH}/output`, useCache: false, exporters: [\ new exporters.SolMetadataExporter({\ metadataFolder: "sol_metadata",\ symbol: "MYNFT",\ sellerFeeBasisPoints: 500,\ collectionName: "My Collection",\ collectionFamily: "Artworks",\ creators: [\ {\ address: "your_solana_wallet_address",\ share: 100,\ },\ ],\ imageUriPrefix: "https://example.com/images/",\ });\ // Add more generators if needed...\ ] // Add inputs, exporters, renderers as required... }); Parameters[](https://lab.hashlips.io/docs/art-engine/core-plugins/exporters/sol-metadata#parameters) ----------------------------------------------------------------------------------------------------- * `metadataFolder` (optional): A string representing the name of the folder where the Solana metadata JSON files will be stored. If not provided, a default folder named "sol\_metadata" will be used. * `symbol` (optional): A string representing the symbol or ticker of the NFT collection. * `sellerFeeBasisPoints` (optional): An integer representing the seller fee as a percentage of the sale price in basis points (1 basis point = 0.01%). If not provided, a default value of 0 will be used. * `collectionName` (optional): A string representing the name of the NFT collection. * `collectionFamily` (optional): A string representing the family or category of the NFT collection. * `creators` (optional): An array of objects, where each object includes the `address` of the NFT creator's Solana wallet and their corresponding `share` in the royalties. * `imageUriPrefix` (optional): A string representing the prefix that will be added to the `image` field in the Solana metadata JSON. This allows customization of the image URI for each item. If not provided, a default prefix of "IMAGE_URI\_PREFIX_" will be used, and the `dna` value from the rendered attributes will be appended to form the complete image URI. Interfaces[](https://lab.hashlips.io/docs/art-engine/core-plugins/exporters/sol-metadata#interfaces) ----------------------------------------------------------------------------------------------------- ### Base[](https://lab.hashlips.io/docs/art-engine/core-plugins/exporters/sol-metadata#base) This plugin adheres to the base exporter interface called `ExporterInterface`. * [ExporterInterface](https://lab.hashlips.io/docs/art-engine/custom-plugins/exporters/interface) ### Custom[](https://lab.hashlips.io/docs/art-engine/core-plugins/exporters/sol-metadata#custom) The Sol Metadata Exporter plugin epitomizes the essence of exporters within the Art Engine's realm. It harmoniously integrates with the core exporter interface to facilitate the creation of metadata conforming to Solana's distinct NFT format. Here's a glimpse of the Sol Metadata Exporter class in action: export class SolMetadataExporter implements ExporterInterface { // Implementation details } Solana NFTs have their own distinct metadata requirements, necessitating careful crafting to ensure compatibility. The Sol Metadata Exporter skillfully assimilates the rendered data, which includes attributes, DNA, and more, and converts it into metadata that complies with Solana's standard. [Erc721 Metadata](https://lab.hashlips.io/docs/art-engine/core-plugins/exporters/erc721-metadata "Erc721 Metadata") [Images](https://lab.hashlips.io/docs/art-engine/core-plugins/exporters/images "Images") --- # Collection Data Updater - HashLips Lab Docs Collection Data Updater Overview Collection Data Updater ======================= The documentation for this tool is under construction. You can [join us on GitHub (opens in a new tab)](https://github.com/hashlips-lab/collection-data-updater) to follow the development process. [Example](https://lab.hashlips.io/docs/art-engine/custom-plugins/exporters/example "Example") --- # Inputs Interface - HashLips Lab Docs Art Engine Custom Plugins Inputs Interface Inputs Interface ================ All input plugins in the Art Engine implement the `InputInterface` interface. This interface defines the basic structure that an input plugin should follow. interface InputInterface { init: (props: InputInitPropsInterface) => Promise; load: () => Promise; } * `InputInterface`: This is the main interface for an input plugin. It's parameterized with a generic type, `InputDataType`, which represents the type of data that the input plugin will produce. * `init(props: InputInitPropsInterface) => Promise`: This method is used to initialize the input plugin. It takes an object of type `InputInitPropsInterface` as an argument, which contains the seed. The method returns a promise that resolves when the initialization is complete. * `load() => Promise`: This method is responsible for loading and retrieving the input data. It returns a promise that resolves to an object of type `InputDataType`, which is the actual input data produced by the plugin. interface InputInitPropsInterface { seed: string; } `InputInitPropsInterface`: This is an interface that defines the properties required to initialize an input plugin. In this case, there's a single property defined: * `seed`: This is a string value that serves as a seed for deterministic behavior. The seed can be used to ensure that the same input plugin produces the same output when initialized with the same seed. [Overview](https://lab.hashlips.io/docs/art-engine/custom-plugins "Overview") [Example](https://lab.hashlips.io/docs/art-engine/custom-plugins/inputs/example "Example") --- # Custom Plugins - HashLips Lab Docs Art Engine Custom Plugins Overview Custom Plugins ============== In addition to its suite of core plugins, the Art Engine 2.0 extends an invitation to developers to leverage their creativity through the creation of custom plugins. In this section, we delve into the mechanics of the core plugins, dissecting their distinct roles and collaborative dynamics. Moreover, we'll provide a comprehensive guide to implementing the core interfaces for each plugin category, empowering developers to confidently craft their own plugins and contribute to the plugin ecosystem. Plugins types[](https://lab.hashlips.io/docs/art-engine/custom-plugins#plugins-types) -------------------------------------------------------------------------------------- ### Inputs[](https://lab.hashlips.io/docs/art-engine/custom-plugins#inputs) The `inputs` are responsible for loading and providing data to the Art Engine. They act as a bridge or adapter, enabling the engine to read and utilize various types of data. Depending on the input plugin used, you can load data from different sources such as images from files, Photoshop files, music files, videos, and more. This flexibility allows artists and developers to work with diverse data formats and sources to create unique NFT art. ### Generators[](https://lab.hashlips.io/docs/art-engine/custom-plugins#generators) The `generators` play a key role in the art generation process by creating attributes or properties for each item in the artwork. They generate variations and unique features for the NFTs, making each piece distinct and appealing. Depending on the generator used, you can define the quantity of media files to be generated, enabling efficient and dynamic NFT creation. ### Renderers[](https://lab.hashlips.io/docs/art-engine/custom-plugins#renderers) The `renderers` combine the attributes generated by the generators with the input data to produce the final visual representation of the artwork. They determine how the attributes and media files are combined to create the desired visual effect. Additionally, renderers leverage temporary storage for rendering the metadata and media files during the generation process. ### Exporters[](https://lab.hashlips.io/docs/art-engine/custom-plugins#exporters) The `exporters` handle the final output of the generated artwork and metadata. They export the media files and metadata in the desired formats, making them ready for use in NFT marketplaces and other platforms. Exporters also act as the last step for data or media manipulation to achieve the desired output. Art Engine Execution Process[](https://lab.hashlips.io/docs/art-engine/custom-plugins#art-engine-execution-process) -------------------------------------------------------------------------------------------------------------------- The Art Engine operates as a dynamic framework that orchestrates the plugin-based generation of NFT art and metadata. Understanding the inner workings of how the Art Engine runs plugins can provide developers with valuable insights to create custom plugins and extend its capabilities. **1\. Seed Initialization** * The Art Engine initiates its workflow by generating a seed file. This seed is a unique value that can be utilized across different plugins for deterministic results or as a source of randomness. **2\. Input Plugins Loop** * The engine proceeds by iterating over the list of input plugins provided in the configuration. * For each input plugin: * The Art Engine calls the `init()` function on the input plugin, allowing it to set up any necessary internal structures or configurations. The seed can be passed here for optional use within the plugin. * Following initialization, the Art Engine calls the `load()` function on the input plugin. This function retrieves data from external sources, which might include images, attributes, or other data relevant to the generation process. * The data returned by the `load()` function is stored for further use in a data structure. **3\. Generators Loop** * Once the input data from all input plugins has been collected, the Art Engine moves on to the generator phase. * For each generator plugin: * The Art Engine calls the `init()` function on the generator, providing it with the previously generated seed and an `inputsManager` instance. The `inputsManager` offers access to the data gathered from input plugins, enabling generators to use this data as a basis for content generation. * The `generate()` function of the generator plugin is then invoked. This function generates various attributes, traits, or characteristics based on the input data. The generated data is returned and stored as a key-value pair for each item in the dataset. **4\. Renderers Loop** * After the data has been generated by the generators, the Art Engine progresses to the rendering phase. * For each renderer plugin: * The Art Engine invokes the `init()` function on the renderer, passing the seed, cachePath, and `attributesGetter`. The `cachePath` can be used to store intermediate or temporary data if needed. The `attributesGetter` provides access to the data generated by the generators, allowing renderers to use this data to produce visual representations. * Subsequently, the `render()` function of the renderer plugin is called. This function generates visual content, such as layered images, using the attributes and traits provided by the generator plugins. The generated visual data is stored as a key-value pair for each item in the dataset. **5\. Exporters Loop** * With the visual content rendered, the Art Engine enters the exporting phase. * For each exporter plugin: * The Art Engine invokes the `init()` function on the exporter, providing the seed, outputPath, and `rendersGetter`. The `outputPath` designates the directory where the exported content should be stored, and the `rendersGetter` gives access to the visual data generated by the renderers. * The `export()` function of the exporter plugin is executed. This function finalizes the generated content, prepares it for export, and places it in the specified `outputPath`. Visual Execution Process[](https://lab.hashlips.io/docs/art-engine/custom-plugins#visual-execution-process) ------------------------------------------------------------------------------------------------------------ +------------------------+ | Seed Initialization | +------------------------+ | v +------------------------+ | Input Plugins | +------------------------+ | v +------------------------+ | Generator Plugins | +------------------------+ | v +------------------------+ | Renderer Plugins | +------------------------+ | v +------------------------+ | Exporter Plugins | +------------------------+ Plugin Interactions[](https://lab.hashlips.io/docs/art-engine/custom-plugins#plugin-interactions) -------------------------------------------------------------------------------------------------- It is important to note that different plugins within the Art Engine are designed to be used together, forming a cohesive ecosystem for NFT art generation. Each plugin is built with a specific output and interface in mind. Therefore, it is crucial to understand what a plugin outputs and how it interacts with other plugins. For example, generators produce attributes that may be consumed by renderers to create meaningful metadata or used as input for other generators to add further complexity to the artwork. Similarly, exporters depend on the output generated by the renderers to produce the final media files and metadata in the desired formats. To ensure a smooth art generation process, it is essential to comprehend the flow of data between plugins and the expected interfaces they use. The documentation for each core plugin will provide insights into its outputs, inputs, and how it fits within the larger context of the Art Engine's plugin-based architecture. Development Considerations[](https://lab.hashlips.io/docs/art-engine/custom-plugins#development-considerations) ---------------------------------------------------------------------------------------------------------------- The Art Engine 2.0 is an actively developing tool, and new core plugins may be added over time to enhance its capabilities. As a result, updates to the Art Engine may introduce changes that could impact existing implementations. We recommend staying updated with the latest releases and following the documentation closely for any potential breaking changes. [Images](https://lab.hashlips.io/docs/art-engine/core-plugins/exporters/images "Images") [Interface](https://lab.hashlips.io/docs/art-engine/custom-plugins/inputs/interface "Interface") --- # Inputs Plugin Example - HashLips Lab Docs Art Engine Custom Plugins Inputs Example Inputs Plugin Example ===================== This template provides a basic structure for an Inputs plugin. Developers can use this template as a starting point and customize it according to their specific use case and data sources. import InputInterface, { InputInitPropsInterface, } from "@hashlips-lab/art-engine/dist/common/inputs/input.interface"; // Define the structure of the custom input data interface ExampleCustomInterface { example: string; } // Create a class for the Inputs plugin export class ExampleInput implements InputInterface { public async init(props: InputInitPropsInterface): Promise { // Initialization tasks can be performed here } public async load(): Promise { // Simulate loading input data, replace with actual data retrieval logic return { example: "Hello World" }; } } [Interface](https://lab.hashlips.io/docs/art-engine/custom-plugins/inputs/interface "Interface") [Interface](https://lab.hashlips.io/docs/art-engine/custom-plugins/generators/interface "Interface") --- # Images Exporter - HashLips Lab Docs Art Engine Core Plugins Exporters Images Images Exporter =============== The Images Exporter plugin plays a crucial role in the Art Engine's export process, allowing the easy retrieval and organization of images generated during the rendering process. This plugin takes the data from the renderer, locates the related images saved in the temporary folder, and then copies and renames these files into the specified output directory. The Images Exporter ensures that the rendered images are correctly organized and readily available for further use, such as minting NFTs or showcasing the artwork. Adding the plugin[](https://lab.hashlips.io/docs/art-engine/core-plugins/exporters/images#adding-the-plugin) ------------------------------------------------------------------------------------------------------------- 1. Import the plugin object: const { ArtEngine, exporters } = require("@hashlips-lab/art-engine"); 2. Setup a base path: const BASE_PATH = __dirname; 3. Add the plugin to an instance of the Art Engine: const ae = new ArtEngine({ cachePath: `${BASE_PATH}/cache`, outputPath: `${BASE_PATH}/output`, useCache: false, exporters: [\ new exporters.ImagesExporter({\ imagesFolder: "artwork_images",\ });\ // Add more generators if needed...\ ] // Add inputs, exporters, renderers as required... }); Parameters[](https://lab.hashlips.io/docs/art-engine/core-plugins/exporters/images#parameters) ----------------------------------------------------------------------------------------------- * `imagesFolder` (optional): A string representing the name of the folder where the exported images will be stored. If not provided, a default folder named "images" will be used. Interfaces[](https://lab.hashlips.io/docs/art-engine/core-plugins/exporters/images#interfaces) ----------------------------------------------------------------------------------------------- ### Base[](https://lab.hashlips.io/docs/art-engine/core-plugins/exporters/images#base) This plugin adheres to the base exporter interface called `ExporterInterface`. * [ExporterInterface](https://lab.hashlips.io/docs/art-engine/custom-plugins/exporters/interface) ### Custom[](https://lab.hashlips.io/docs/art-engine/core-plugins/exporters/images#custom) The Images Exporter plugin shines a spotlight on the exporter's role within the Art Engine's dynamic ecosystem. This plugin embraces the core exporter interface to facilitate the extraction of image-related data from the rendered outputs, transferring them to their new abode within the output directory. Here's a glimpse of the Images Exporter in action: export class ImagesExporter implements ExporterInterface { // Implementation details } By skillfully integrating the rendersGetter function, the Images Exporter seamlessly accesses the visual content generated by renderer plugins, transferring them with fidelity and precision, thus rendering a rich collection of images ready to grace various mediums and platforms. [Sol Metadata](https://lab.hashlips.io/docs/art-engine/core-plugins/exporters/sol-metadata "Sol Metadata") [Overview](https://lab.hashlips.io/docs/art-engine/custom-plugins "Overview") --- # Generator Plugin Example - HashLips Lab Docs Art Engine Custom Plugins Generators Example Generator Plugin Example ======================== This template provides a basic structure for a Generator plugin. Developers can use this template as a foundation and customize it to generate data based on the input data available through the `inputsManager`. import GeneratorInterface, { GeneratorInitPropsInterface, ItemsAttributes, } from "@hashlips-lab/art-engine/dist/common/generators/generator.interface"; import InputsManager from "@hashlips-lab/art-engine/dist/utils/managers/inputs/inputs.manager"; // Define the structure of the custom generator data interface ExampleCustomInterface { example: string; } // Create a class for the Generator plugin export class ExampleGenerator implements GeneratorInterface { inputsManager!: InputsManager; public async init(props: GeneratorInitPropsInterface): Promise { this.inputsManager = props.inputsManager; // Initialization tasks can be performed here } public async generate(): Promise> { // Simulate fetching input data, replace with actual data retrieval logic const inputData = this.inputsManager.get("any_existing_input_key"); // Generate and structure the custom data for each item const items: ItemsAttributes = { 1: [\ {\ kind: "AnyUniqueGeneratorDataIdentifier@v1",\ data: {\ example: inputData.example,\ },\ },\ ], }; return items; } } [Interface](https://lab.hashlips.io/docs/art-engine/custom-plugins/generators/interface "Interface") [Interface](https://lab.hashlips.io/docs/art-engine/custom-plugins/renderers/interface "Interface") --- # Renderer Plugin Example - HashLips Lab Docs Art Engine Custom Plugins Renderers Example Renderer Plugin Example ======================= This template provides a basic structure for a Renderer plugin. Developers can use this template as a starting point and customize it to generate the rendered data based on the attributes available through the `attributesGetter`. import * as path from "path"; import * as fs from "fs"; import RendererInterface, { ItemsRenders, RendererInitPropsInterface, } from "@hashlips-lab/art-engine/dist/common/renderers/renderer.interface"; import ItemsDataManager from "@hashlips-lab/art-engine/dist/utils/managers/items-data/items-data.manager"; import { CACHE } from "@hashlips-lab/art-engine"; import { ItemPropertiesInterface } from "@hashlips-lab/art-engine/dist/utils/managers/items-data/items-data.interface"; // Define the structure of the custom render data interface ExampleCustomInterface { path: string; } // Create a class for the Renderer plugin export class ExampleRenderer implements RendererInterface { attributesGetter!: ItemsDataManager["getAttributes"]; tempRenderDir!: string; public async init(props: RendererInitPropsInterface): Promise { this.attributesGetter = props.attributesGetter; this.tempRenderDir = path.join( props.cachePath, CACHE.RENDERERS_TEMP_CACHE_DIR, "words" ); // Initialization tasks can be performed here } public async render(): Promise> { const renders: ItemsRenders = {}; for (const [itemUid, attributes] of Object.entries( this.attributesGetter() )) { if (!fs.existsSync(this.tempRenderDir)) { fs.mkdirSync(this.tempRenderDir); } // @ts-ignore const supportedAssets = attributes.filter( (attribute: ItemPropertiesInterface) => "AnyUniqueGeneratorDataIdentifier@v1" === attribute.kind ); if (supportedAssets.length > 0) { const outputPath = path.join(this.tempRenderDir, `${itemUid}.json`); fs.writeFileSync( outputPath, JSON.stringify(supportedAssets[0].data, null, 2) ); renders[itemUid] = [\ {\ kind: "AnyUniqueRenderDataIdentifier@v1",\ data: {\ path: outputPath,\ },\ },\ ]; } } return renders; } } [Interface](https://lab.hashlips.io/docs/art-engine/custom-plugins/renderers/interface "Interface") [Interface](https://lab.hashlips.io/docs/art-engine/custom-plugins/exporters/interface "Interface") --- # Renderers Interface - HashLips Lab Docs Art Engine Custom Plugins Renderers Interface Renderers Interface =================== All input renderer in the Art Engine implement the `RendererInterface` interface. This interface defines the basic structure that an renderer plugin should follow. interface RendererInterface { init: (props: RendererInitPropsInterface) => Promise; render: () => Promise>; } * `RendererInterface`: This interface outlines the structure that renderer plugins should follow. It's parameterized with a generic type `RendererDataType` which represents the type of data that the renderer plugin will produce. * `init(props: RendererInitPropsInterface) => Promise`: This method initializes the renderer plugin. It takes an object of type `RendererInitPropsInterface` as an argument, containing the necessary initialization properties. The method returns a promise that resolves when the initialization is complete. * `render() => Promise>`: This method is responsible for performing the rendering process. It returns a promise that resolves to an object of type `ItemsRenders`, which is the rendered data produced by the plugin. interface ItemsRenders { [itemUid: string]: ItemPropertiesInterface[]; } `ItemsRenders`: This is a data structure that represents the renders produced by a renderer plugin. It's an object where the keys are item UIDs (unique identifiers) and the values are arrays of render data of type `RenderDataType`. This structure allows you to store multiple render data sets associated with different items. interface RendererInitPropsInterface { seed: string; cachePath: string; attributesGetter: ItemsDataManager["getAttributes"]; } `RendererInitPropsInterface`: This interface defines the properties required to initialize a renderer plugin. It includes the following properties: * `seed`: A string value that serves as a seed for deterministic behavior. Similar to the input plugins, this can be used to ensure consistent results when rendering. * `cachePath`: A string representing the path where the renderer plugin can store temporary cache data. This can be used to store any intermediate files or data that the exporter might need to use. * `attributesGetter`: A reference to a function called `getAttributes` from the `ItemsDataManager`. This function is used to access the attributes data generated by the generators. [Example](https://lab.hashlips.io/docs/art-engine/custom-plugins/generators/example "Example") [Example](https://lab.hashlips.io/docs/art-engine/custom-plugins/renderers/example "Example") --- # Exporter Plugin Example - HashLips Lab Docs Art Engine Custom Plugins Exporters Example Exporter Plugin Example ======================= This template provides a basic structure for an Exporter plugin. Developers can use this template as a starting point and customize it to define how the rendered data should be exported to the specified output path. import * as path from "path"; import * as fs from "fs"; import ExporterInterface, { ExporterInitPropsInterface, } from "@hashlips-lab/art-engine/dist/common/exporters/exporter.interface"; import ItemsDataManager from "@hashlips-lab/art-engine/dist/utils/managers/items-data/items-data.manager"; import { ItemPropertiesInterface } from "@hashlips-lab/art-engine/dist/utils/managers/items-data/items-data.interface"; // Create a class for the Exporter plugin export class ExampleExporter implements ExporterInterface { private rendersGetter!: ItemsDataManager["getRenders"]; private outputPath!: string; public async init(props: ExporterInitPropsInterface) { this.rendersGetter = props.rendersGetter; this.outputPath = props.outputPath; // Initialization tasks can be performed here } public async export(): Promise { for (const [itemUid, renders] of Object.entries(this.rendersGetter())) { // @ts-ignore let attributes = renders.find( (render: ItemPropertiesInterface) => "AnyUniqueRenderDataIdentifier@v1" === render.kind ); if (attributes) { fs.copyFileSync( attributes?.data.path, path.join(this.outputPath, `${itemUid}.txt`) ); } } } } [Interface](https://lab.hashlips.io/docs/art-engine/custom-plugins/exporters/interface "Interface") [Overview](https://lab.hashlips.io/docs/collection-data-updater "Overview") ---