Multi Image Generation for Next.js

import {
  // Editor Initialization
  initMultiImageGenerationDesignEditor,          // Adopter mode (light theme, standard editing)
  initMultiImageGenerationAdvancedDesignEditor,  // Creator mode (dark theme, full template design)

  // Configuration Plugins (for direct use)
  DesignEditorConfig,
  AdvancedDesignEditorConfig,

  // Headless Engine
  initMultiImageGenerationHeadlessEngine,        // Initialize engine without UI
  renderSceneToImage,        // Load scene and export as image

  // Generation Utilities
  fillTemplate,              // Fill template with data
  generateAssets,            // Batch generate multiple assets
  applyRestaurantColors,     // Apply brand colors to loaded scene

  // Helper Utilities
  hexToRgba,                 // Convert hex color to RGBA
  replaceImageByName,        // Replace image block by name
  exportSceneAsImage         // Export current scene as image
} from './imgly';

import CreativeEditor from '@cesdk/cesdk-js/react';
import { initMultiImageGenerationDesignEditor, initMultiImageGenerationAdvancedDesignEditor } from './imgly';

const config = {
  baseURL: '/assets/',
  license: 'YOUR_CESDK_LICENSE_KEY'
};

// Adopter mode: Light theme, standard editing features
<CreativeEditor
  config={config}
  init={async (cesdk) => {
    await initMultiImageGenerationDesignEditor(cesdk);
    await cesdk.engine.scene.loadFromString(sceneString);
  }}
/>

// Creator mode: Dark theme, full template design
<CreativeEditor
  config={config}
  init={async (cesdk) => {
    await initMultiImageGenerationAdvancedDesignEditor(cesdk);
    await cesdk.actions.run('scene.create');
  }}
/>

import {
  initMultiImageGenerationHeadlessEngine,
  fillTemplate,
  generateAssets
} from './imgly';
import type { Restaurant, Template, GeneratedAsset } from './app/types';

// Initialize headless engine (no UI)
const engine = await initMultiImageGenerationHeadlessEngine();

// Fill a single template with restaurant data
await fillTemplate(engine, 'instagram-square', restaurant);
const imageUrl = await exportSceneAsImage(engine);

// Or generate multiple assets at once
const templates: Template[] = [
  { sceneKey: 'instagram-square', label: 'Instagram Square' },
  { sceneKey: 'facebook-cover', label: 'Facebook Cover' },
  { sceneKey: 'twitter-header', label: 'Twitter Header' }
];

await generateAssets(engine, templates, restaurant, (index, asset) => {
  // Called for each generated asset
  console.log(`Generated ${asset.label}:`, asset.src);
});

// Clean up when done
engine.dispose();

// Create a blank design canvas - starts with an empty design scene
await cesdk.actions.run('scene.create');

// Load from a template archive - restores a previously saved project
await cesdk.loadFromArchiveURL('https://example.com/template.zip');

// Load from an image URL - creates a new scene with the image
await cesdk.createFromImage('https://example.com/image.jpg');

// Load from a scene file - restores a scene from JSON
await cesdk.loadFromURL('https://example.com/scene.json');